├── public
    ├── _redirects
    ├── favicon.ico
    └── assets
    │   └── fonts
    │       ├── open-sans-v29-latin
    │           ├── open-sans-v29-latin-700.woff
    │           ├── open-sans-v29-latin-700.woff2
    │           ├── open-sans-v29-latin-italic.woff
    │           ├── open-sans-v29-latin-italic.woff2
    │           ├── open-sans-v29-latin-regular.woff
    │           ├── open-sans-v29-latin-700italic.woff
    │           ├── open-sans-v29-latin-regular.woff2
    │           └── open-sans-v29-latin-700italic.woff2
    │       ├── montserrat-v24-latin
    │           ├── montserrat-v24-latin-900.woff
    │           ├── montserrat-v24-latin-900.woff2
    │           ├── montserrat-v24-latin-900italic.woff
    │           └── montserrat-v24-latin-900italic.woff2
    │       └── styles.css
├── .vscode
    └── settings.json
├── src
    ├── templates
    │   └── Home
    │   │   ├── styles.ts
    │   │   └── index.tsx
    ├── components
    │   └── Heading
    │   │   ├── styles.ts
    │   │   ├── index.tsx
    │   │   ├── test.tsx
    │   │   └── stories.tsx
    ├── pages
    │   ├── index.tsx
    │   ├── _app.tsx
    │   └── _document.tsx
    ├── config
    │   └── index.ts
    └── styles
    │   ├── render-theme.tsx
    │   ├── theme.ts
    │   └── global-styles.ts
├── .test
    └── setup.js
├── .husky
    └── pre-commit
├── .lintstagedrc.json
├── next-env.d.ts
├── types
    ├── styled-components.d.ts
    └── jest-styled-components.d.ts
├── .editorconfig
├── next.config.js
├── .prettierrc.json
├── .gitignore
├── tsconfig.json
├── .storybook
    ├── main.js
    └── preview.jsx
├── vite.config.js
├── .eslintrc.json
├── README.md
└── package.json


/public/_redirects:
--------------------------------------------------------------------------------
1 | /*    /index.html    200
2 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "window.zoomLevel": 0,
3 |   "prettier.configPath": "./.prettierrc.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/src/templates/Home/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | 
3 | export const Wrapper = styled.div``;
4 | 


--------------------------------------------------------------------------------
/src/components/Heading/styles.ts:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | 
3 | export const Title = styled.h1``;
4 | 


--------------------------------------------------------------------------------
/.test/setup.js:
--------------------------------------------------------------------------------
1 | import { vi } from 'vitest';
2 | import '@testing-library/jest-dom';
3 | import 'jest-styled-components';
4 | 


--------------------------------------------------------------------------------
/.husky/pre-commit:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 | . "$(dirname -- "$0")/_/husky.sh"
3 | 
4 | npm run type-check
5 | npm run lint-staged
6 | 


--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import Home from 'templates/Home';
2 | 
3 | export default function Index() {
4 |   return <Home />;
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/.lintstagedrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "src/**/*.{ts,tsx,js,jsx}": [
3 |     "npm run full-lint -- --fix",
4 |     "npm run test -- --watch=false --passWithNoTests"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/src/templates/Home/index.tsx:
--------------------------------------------------------------------------------
1 | import { Heading } from 'components/Heading';
2 | 
3 | function Home() {
4 |   return <Heading>Example</Heading>;
5 | }
6 | 
7 | export default Home;
8 | 


--------------------------------------------------------------------------------
/src/config/index.ts:
--------------------------------------------------------------------------------
1 | export default {
2 |   url: 'https://strapi-v4-test.herokuapp.com/api/pages/?populate=deep&',
3 |   siteName: 'Otávio Miranda',
4 |   defaultSlug: 'landing-page',
5 | };
6 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-700.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-700.woff


--------------------------------------------------------------------------------
/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-700.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-700.woff2


--------------------------------------------------------------------------------
/public/assets/fonts/montserrat-v24-latin/montserrat-v24-latin-900.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/assets/fonts/montserrat-v24-latin/montserrat-v24-latin-900.woff


--------------------------------------------------------------------------------
/public/assets/fonts/montserrat-v24-latin/montserrat-v24-latin-900.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/assets/fonts/montserrat-v24-latin/montserrat-v24-latin-900.woff2


--------------------------------------------------------------------------------
/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-italic.woff


--------------------------------------------------------------------------------
/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-italic.woff2


--------------------------------------------------------------------------------
/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-regular.woff


--------------------------------------------------------------------------------
/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-700italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-700italic.woff


--------------------------------------------------------------------------------
/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-regular.woff2


--------------------------------------------------------------------------------
/public/assets/fonts/montserrat-v24-latin/montserrat-v24-latin-900italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/assets/fonts/montserrat-v24-latin/montserrat-v24-latin-900italic.woff


--------------------------------------------------------------------------------
/public/assets/fonts/montserrat-v24-latin/montserrat-v24-latin-900italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/assets/fonts/montserrat-v24-latin/montserrat-v24-latin-900italic.woff2


--------------------------------------------------------------------------------
/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-700italic.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luizomf/nextjs-12-example-with-typescript-and-styled-components/HEAD/public/assets/fonts/open-sans-v29-latin/open-sans-v29-latin-700italic.woff2


--------------------------------------------------------------------------------
/types/styled-components.d.ts:
--------------------------------------------------------------------------------
1 | import { theme } from '../src/styles/theme';
2 | 
3 | type Theme = typeof theme;
4 | 
5 | declare module 'styled-components' {
6 |   // eslint-disable-next-line @typescript-eslint/no-empty-interface
7 |   export interface DefaultTheme extends Theme {}
8 | }
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: https://EditorConfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | [*]
 7 | indent_style = space
 8 | indent_size = 2
 9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = true
12 | insert_final_newline = true


--------------------------------------------------------------------------------
/src/components/Heading/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as Styled from './styles';
 2 | 
 3 | export type HeadingProps = {
 4 |   children: React.ReactNode | string;
 5 | };
 6 | 
 7 | export const Heading = (props: HeadingProps) => {
 8 |   return <Styled.Title>{props.children}</Styled.Title>;
 9 | };
10 | 


--------------------------------------------------------------------------------
/src/styles/render-theme.tsx:
--------------------------------------------------------------------------------
1 | import { render, RenderResult } from '@testing-library/react';
2 | import { ThemeProvider } from 'styled-components';
3 | import { theme } from './theme';
4 | 
5 | export const renderTheme = (children: React.ReactNode): RenderResult => {
6 |   return render(<ThemeProvider theme={theme}>{children}</ThemeProvider>);
7 | };
8 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   reactStrictMode: true,
 4 |   images: {
 5 |     domains: ['logodownload.org', 'source.unsplash.com', 'res.cloudinary.com'],
 6 |     formats: ['image/avif', 'image/webp'],
 7 |   },
 8 |   compiler: {
 9 |     styledComponents: true,
10 |   },
11 |   trailingSlash: true,
12 | };
13 | 
14 | module.exports = nextConfig;
15 | 


--------------------------------------------------------------------------------
/src/components/Heading/test.tsx:
--------------------------------------------------------------------------------
 1 | import { screen } from '@testing-library/react';
 2 | import { Heading } from '.';
 3 | import { renderTheme } from '../../styles/render-theme';
 4 | 
 5 | describe('<Heading />', () => {
 6 |   it('should render a heading', () => {
 7 |     renderTheme(<Heading>Example</Heading>);
 8 |     const heading = screen.getByRole('heading', { name: 'Example' });
 9 |     expect(heading).toBeInTheDocument();
10 |   });
11 | });
12 | 


--------------------------------------------------------------------------------
/src/components/Heading/stories.tsx:
--------------------------------------------------------------------------------
 1 | import { Meta, Story } from '@storybook/react/types-6-0';
 2 | import { Heading, HeadingProps } from '.';
 3 | 
 4 | export default {
 5 |   title: 'Heading',
 6 |   component: Heading,
 7 |   args: {
 8 |     children: 'O texto está escuro',
 9 |   },
10 |   argTypes: {
11 |     children: { type: 'string' },
12 |   },
13 | } as Meta;
14 | 
15 | export const Template: Story<HeadingProps> = (args) => <Heading {...args} />;
16 | 


--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import { ThemeProvider } from 'styled-components';
 2 | import { theme } from '../styles/theme';
 3 | import { AppProps } from 'next/app';
 4 | 
 5 | import '../../public/assets/fonts/styles.css';
 6 | import { GlobalStyles } from '../styles/global-styles';
 7 | 
 8 | function MyApp({ Component, pageProps }: AppProps) {
 9 |   return (
10 |     <ThemeProvider theme={theme}>
11 |       <Component {...pageProps} />
12 |       <GlobalStyles />
13 |     </ThemeProvider>
14 |   );
15 | }
16 | 
17 | export default MyApp;
18 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "arrowParens": "always",
 3 |   "bracketSpacing": true,
 4 |   "endOfLine": "lf",
 5 |   "htmlWhitespaceSensitivity": "ignore",
 6 |   "insertPragma": false,
 7 |   "jsxSingleQuote": false,
 8 |   "printWidth": 80,
 9 |   "proseWrap": "always",
10 |   "quoteProps": "as-needed",
11 |   "requirePragma": false,
12 |   "semi": true,
13 |   "singleQuote": true,
14 |   "tabWidth": 2,
15 |   "trailingComma": "all",
16 |   "useTabs": false,
17 |   "vueIndentScriptAndStyle": false,
18 |   "embeddedLanguageFormatting": "off"
19 | }
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | .pnpm-debug.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | __localcode/
35 | venv/
36 | coverage
37 | *.tsbuildinfo
38 | /*.tsbuildinfo
39 | package-lock.json
40 | yarn-lock.json
41 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": false,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "incremental": true,
11 |     "esModuleInterop": true,
12 |     "module": "esnext",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "moduleResolution": "node",
16 |     "jsx": "preserve",
17 |     "baseUrl": "src"
18 |   },
19 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
20 |   "exclude": ["node_modules"]
21 | }
22 | 


--------------------------------------------------------------------------------
/.storybook/main.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | module.exports = {
 4 |   stories: [
 5 |     '../src/**/*.stories.mdx',
 6 |     '../src/**/*.stories.@(js|jsx|ts|tsx)',
 7 |     '../src/**/stories.@(js|jsx|ts|tsx)',
 8 |   ],
 9 |   addons: [
10 |     '@storybook/addon-links',
11 |     '@storybook/addon-essentials',
12 |     '@storybook/addon-interactions',
13 |     {
14 |       name: 'storybook-addon-next',
15 |       options: {
16 |         nextConfigPath: path.resolve(__dirname, '../next.config.js'),
17 |       },
18 |     },
19 |   ],
20 |   framework: '@storybook/react',
21 |   core: {
22 |     builder: '@storybook/builder-webpack5',
23 |   },
24 | };
25 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite';
 2 | import react from '@vitejs/plugin-react';
 3 | 
 4 | // https://vitejs.dev/config/
 5 | export default defineConfig({
 6 |   plugins: [react()],
 7 |   root: 'src',
 8 |   build: {
 9 |     outDir: '../dist',
10 |   },
11 |   publicDir: '../public',
12 |   test: {
13 |     globals: true,
14 |     environment: 'jsdom',
15 |     setupFiles: ['../.test/setup.js'],
16 |     include: ['**/*(*.)?{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
17 |     exclude: ['node_modules', 'dist', '.idea', '.git', '.cache', 'templates'],
18 |     // coverage: {
19 |     //   reporter: ['clover', 'json', 'lcov'],
20 |     // },
21 |   },
22 | });
23 | 


--------------------------------------------------------------------------------
/types/jest-styled-components.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | import { Plugin, NewPlugin } from 'pretty-format';
 3 | 
 4 | declare global {
 5 |   namespace jest {
 6 |     interface AsymmetricMatcher {
 7 |       $$typeof: symbol;
 8 |       sample?: string | RegExp | object | Array<any> | Function;
 9 |     }
10 | 
11 |     type Value = string | number | RegExp | AsymmetricMatcher | undefined;
12 | 
13 |     interface Options {
14 |       media?: string;
15 |       modifier?: string;
16 |       supports?: string;
17 |     }
18 | 
19 |     interface Matchers<R, T> {
20 |       toHaveStyleRule(property: string, value?: Value, options?: Options): R;
21 |     }
22 |   }
23 | }
24 | 
25 | export declare const styleSheetSerializer: Exclude<Plugin, NewPlugin>;
26 | 


--------------------------------------------------------------------------------
/.storybook/preview.jsx:
--------------------------------------------------------------------------------
 1 | import { ThemeProvider } from 'styled-components';
 2 | import { GlobalStyles } from '../src/styles/global-styles';
 3 | import { theme } from '../src/styles/theme';
 4 | import '../public/assets/fonts/styles.css';
 5 | 
 6 | export const parameters = {
 7 |   actions: { argTypesRegex: '^on[A-Z].*' },
 8 |   backgrounds: {
 9 |     default: 'light',
10 |     values: [
11 |       {
12 |         name: 'light',
13 |         value: theme.colors.white,
14 |       },
15 |       {
16 |         name: 'dark',
17 |         value: theme.colors.primaryColor,
18 |       },
19 |     ],
20 |   },
21 | };
22 | 
23 | export const decorators = [
24 |   (Story) => (
25 |     <ThemeProvider theme={theme}>
26 |       <Story />
27 |       <GlobalStyles />
28 |     </ThemeProvider>
29 |   ),
30 | ];
31 | 


--------------------------------------------------------------------------------
/src/styles/theme.ts:
--------------------------------------------------------------------------------
 1 | export const theme = {
 2 |   colors: {
 3 |     primaryColor: '#0A1128',
 4 |     secondaryColor: '#dc143c',
 5 |     white: '#FFFFFF',
 6 |     mediumGray: '#DDDDDD',
 7 |   },
 8 |   font: {
 9 |     family: {
10 |       default: "'Open Sans', sans-serif",
11 |       secondary: "'Montserrat', sans-serif",
12 |     },
13 |     sizes: {
14 |       xsmall: '8rem',
15 |       small: '1.6rem',
16 |       medium: '2.4rem',
17 |       large: '3.2rem',
18 |       xlarge: '4.0rem',
19 |       xxlarge: '4.8rem',
20 |       huge: '5.6rem',
21 |       xhuge: '6.4rem',
22 |     },
23 |   },
24 |   media: {
25 |     lteMedium: '(max-width: 768px)',
26 |   },
27 |   spacings: {
28 |     xsmall: '8rem',
29 |     small: '1.6rem',
30 |     medium: '2.4rem',
31 |     large: '3.2rem',
32 |     xlarge: '4.0rem',
33 |     xxlarge: '4.8rem',
34 |     huge: '5.6rem',
35 |     xhuge: '6.4rem',
36 |   },
37 | } as const;
38 | 


--------------------------------------------------------------------------------
/src/styles/global-styles.ts:
--------------------------------------------------------------------------------
 1 | import { createGlobalStyle } from 'styled-components';
 2 | 
 3 | export const GlobalStyles = createGlobalStyle`
 4 |   * {
 5 |     margin: 0;
 6 |     padding: 0;
 7 |     box-sizing: border-box;
 8 |   }
 9 | 
10 |   html {
11 |     font-size: 62.5%;
12 |     scroll-behavior: smooth;
13 |   }
14 | 
15 |   body {
16 |     font-size: 1.6rem;
17 |     font-family: ${({ theme }) => theme.font.family.default};
18 |   }
19 | 
20 |   h1, h2, h3, h4, h5, h6 {
21 |     font-family: ${({ theme }) => theme.font.family.secondary};
22 |     margin: ${({ theme }) => theme.spacings.large} 0;
23 |   }
24 | 
25 |   p {
26 |     margin: ${({ theme }) => theme.spacings.medium} 0;
27 |   }
28 | 
29 |   ul, ol {
30 |     margin: ${({ theme }) => theme.spacings.medium};
31 |     padding: ${({ theme }) => theme.spacings.medium};
32 |   }
33 | 
34 |   a {
35 |     color: ${({ theme }) => theme.colors.secondaryColor};
36 |   }
37 | 
38 |   .table {
39 |     width: 100%;
40 |     overflow-y: auto;
41 |   }
42 | `;
43 | 


--------------------------------------------------------------------------------
/src/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import Document, {
 2 |   Html,
 3 |   Head,
 4 |   Main,
 5 |   NextScript,
 6 |   DocumentContext,
 7 | } from 'next/document';
 8 | import { ServerStyleSheet } from 'styled-components';
 9 | 
10 | export default class MyDocument extends Document {
11 |   static async getInitialProps(ctx: DocumentContext) {
12 |     const sheet = new ServerStyleSheet();
13 |     const originalRenderPage = ctx.renderPage;
14 | 
15 |     try {
16 |       ctx.renderPage = () =>
17 |         originalRenderPage({
18 |           enhanceApp: (App) => (props) =>
19 |             sheet.collectStyles(<App {...props} />),
20 |         });
21 | 
22 |       const initialProps = await Document.getInitialProps(ctx);
23 |       return {
24 |         ...initialProps,
25 |         styles: [initialProps.styles, sheet.getStyleElement()],
26 |       };
27 |     } finally {
28 |       sheet.seal();
29 |     }
30 |   }
31 | 
32 |   render() {
33 |     return (
34 |       <Html lang="pt-BR">
35 |         <Head />
36 |         <body>
37 |           <Main />
38 |           <NextScript />
39 |         </body>
40 |       </Html>
41 |     );
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es2021": true,
 5 |     "jest": true,
 6 |     "node": true
 7 |   },
 8 |   "extends": [
 9 |     "next/core-web-vitals",
10 |     "eslint:recommended",
11 |     "plugin:@typescript-eslint/recommended",
12 |     "plugin:react/recommended",
13 |     "plugin:react-hooks/recommended",
14 |     "plugin:prettier/recommended",
15 |     "plugin:storybook/recommended"
16 |   ],
17 |   "globals": {
18 |     "Atomics": "readonly",
19 |     "SharedArrayBuffer": "readonly"
20 |   },
21 |   "parser": "@typescript-eslint/parser",
22 |   "parserOptions": {
23 |     "ecmaFeatures": {
24 |       "jsx": true
25 |     },
26 |     "ecmaVersion": "latest",
27 |     "sourceType": "module"
28 |   },
29 |   "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
30 |   "settings": {
31 |     "react": {
32 |       "version": "detect"
33 |     }
34 |   },
35 |   "rules": {
36 |     "react/react-in-jsx-scope": "off",
37 |     "import/no-anonymous-default-export": [
38 |       "warn",
39 |       {
40 |         "allowArray": true,
41 |         "allowArrowFunction": true,
42 |         "allowAnonymousClass": true,
43 |         "allowAnonymousFunction": true,
44 |         "allowCallExpression": true,
45 |         "allowLiteral": true,
46 |         "allowObject": true
47 |       }
48 |     ],
49 |     "@next/next/no-img-element": "off"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | ```
12 | 
13 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
14 | 
15 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
16 | 
17 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
18 | 
19 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
20 | 
21 | ## Learn More
22 | 
23 | To learn more about Next.js, take a look at the following resources:
24 | 
25 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
26 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
27 | 
28 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
29 | 
30 | ## Deploy on Vercel
31 | 
32 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
33 | 
34 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "project-05",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "storybook": "start-storybook -s public -p 6006",
11 |     "build-storybook": "build-storybook",
12 |     "test": "vitest",
13 |     "export": "next export",
14 |     "deploy-static": "npm run build && npm run export",
15 |     "lint-staged": "lint-staged",
16 |     "type-check": "tsc --noEmit",
17 |     "full-lint": "eslint src --ext .ts,.tsx,.js,.jsx --fix --max-warnings=0",
18 |     "prepare": "husky install",
19 |     "postinstall": "npm run prepare"
20 |   },
21 |   "dependencies": {
22 |     "@styled-icons/material-outlined": "^10.34.0",
23 |     "next": "12.1.6",
24 |     "react": "18.1.0",
25 |     "react-dom": "18.1.0",
26 |     "react-markdown": "^8.0.3",
27 |     "storybook-addon-next": "^1.6.6",
28 |     "styled-components": "^5.3.5"
29 |   },
30 |   "devDependencies": {
31 |     "@babel/core": "^7.18.2",
32 |     "@babel/eslint-parser": "^7.18.2",
33 |     "@babel/preset-env": "^7.18.2",
34 |     "@babel/preset-react": "^7.17.12",
35 |     "@storybook/addon-actions": "^6.5.6",
36 |     "@storybook/addon-essentials": "^6.5.6",
37 |     "@storybook/addon-interactions": "^6.5.6",
38 |     "@storybook/addon-links": "^6.5.6",
39 |     "@storybook/builder-webpack5": "^6.5.6",
40 |     "@storybook/manager-webpack5": "^6.5.6",
41 |     "@storybook/react": "^6.5.6",
42 |     "@storybook/testing-library": "^0.0.11",
43 |     "@testing-library/jest-dom": "^5.16.4",
44 |     "@testing-library/react": "^13.3.0",
45 |     "@types/node": "^17.0.40",
46 |     "@types/react": "^18.0.11",
47 |     "@types/styled-components": "^5.1.25",
48 |     "@typescript-eslint/eslint-plugin": "^5.27.0",
49 |     "@typescript-eslint/parser": "^5.27.0",
50 |     "@vitejs/plugin-react": "^1.3.2",
51 |     "babel-loader": "^8.2.5",
52 |     "eslint": "^8.16.0",
53 |     "eslint-config-next": "12.1.6",
54 |     "eslint-config-prettier": "^8.5.0",
55 |     "eslint-plugin-prettier": "^4.0.0",
56 |     "eslint-plugin-react": "^7.30.0",
57 |     "eslint-plugin-react-hooks": "^4.5.0",
58 |     "eslint-plugin-storybook": "^0.5.12",
59 |     "husky": "^8.0.1",
60 |     "jest-styled-components": "^7.0.8",
61 |     "jsdom": "^19.0.0",
62 |     "lint-staged": "^13.0.0",
63 |     "prettier": "^2.6.2",
64 |     "typescript": "^4.7.3",
65 |     "vitest": "^0.13.1"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/public/assets/fonts/styles.css:
--------------------------------------------------------------------------------
 1 | @font-face {
 2 |   font-family: 'Open Sans';
 3 |   font-style: normal;
 4 |   font-weight: 400;
 5 |   src: local(''),
 6 |     url('./open-sans-v29-latin/open-sans-v29-latin-regular.woff2')
 7 |       format('woff2'),
 8 |     /* Chrome 26+, Opera 23+, Firefox 39+ */
 9 |       url('./open-sans-v29-latin/open-sans-v29-latin-regular.woff')
10 |       format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
11 | }
12 | 
13 | @font-face {
14 |   font-family: 'Open Sans';
15 |   font-style: italic;
16 |   font-weight: 400;
17 |   src: local(''),
18 |     url('./open-sans-v29-latin/open-sans-v29-latin-italic.woff2')
19 |       format('woff2'),
20 |     /* Chrome 26+, Opera 23+, Firefox 39+ */
21 |       url('./open-sans-v29-latin/open-sans-v29-latin-italic.woff')
22 |       format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
23 | }
24 | 
25 | @font-face {
26 |   font-family: 'Open Sans';
27 |   font-style: normal;
28 |   font-weight: 700;
29 |   src: local(''),
30 |     url('./open-sans-v29-latin/open-sans-v29-latin-700.woff2') format('woff2'),
31 |     /* Chrome 26+, Opera 23+, Firefox 39+ */
32 |       url('./open-sans-v29-latin/open-sans-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
33 | }
34 | @font-face {
35 |   font-family: 'Open Sans';
36 |   font-style: italic;
37 |   font-weight: 700;
38 |   src: local(''),
39 |     url('./open-sans-v29-latin/open-sans-v29-latin-700italic.woff2')
40 |       format('woff2'),
41 |     /* Chrome 26+, Opera 23+, Firefox 39+ */
42 |       url('./open-sans-v29-latin/open-sans-v29-latin-700italic.woff')
43 |       format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
44 | }
45 | 
46 | @font-face {
47 |   font-family: 'Montserrat';
48 |   font-style: normal;
49 |   font-weight: 900;
50 |   src: local(''),
51 |     url('./montserrat-v24-latin/montserrat-v24-latin-900.woff2') format('woff2'),
52 |     /* Chrome 26+, Opera 23+, Firefox 39+ */
53 |       url('./montserrat-v24-latin/montserrat-v24-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
54 | }
55 | /* montserrat-900italic - latin */
56 | @font-face {
57 |   font-family: 'Montserrat';
58 |   font-style: italic;
59 |   font-weight: 900;
60 |   src: local(''),
61 |     url('./montserrat-v24-latin/montserrat-v24-latin-900italic.woff2')
62 |       format('woff2'),
63 |     /* Chrome 26+, Opera 23+, Firefox 39+ */
64 |       url('./montserrat-v24-latin/montserrat-v24-latin-900italic.woff')
65 |       format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
66 | }
67 | 


--------------------------------------------------------------------------------