├── .babelrc ├── .browserslistrc ├── .editorconfig ├── .env.example ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .husky ├── .gitignore └── pre-commit ├── .prettierrc ├── .vscode └── settings.json ├── README.md ├── codegen.yml ├── jest.config.ts ├── next-env.d.ts ├── next.config.js ├── package.json ├── postcss.config.js ├── public └── favicon │ ├── android-icon-144x144.png │ ├── android-icon-192x192.png │ ├── android-icon-36x36.png │ ├── android-icon-48x48.png │ ├── android-icon-72x72.png │ ├── android-icon-96x96.png │ ├── apple-icon-114x114.png │ ├── apple-icon-120x120.png │ ├── apple-icon-144x144.png │ ├── apple-icon-152x152.png │ ├── apple-icon-180x180.png │ ├── apple-icon-57x57.png │ ├── apple-icon-60x60.png │ ├── apple-icon-72x72.png │ ├── apple-icon-76x76.png │ ├── apple-icon-precomposed.png │ ├── apple-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon-96x96.png │ ├── favicon.ico │ ├── manifest.json │ ├── ms-icon-144x144.png │ ├── ms-icon-150x150.png │ ├── ms-icon-310x310.png │ └── ms-icon-70x70.png ├── src ├── pages │ ├── _app.tsx │ ├── _document.tsx │ ├── index.css │ └── index.tsx ├── styles │ ├── breakpoints.json │ ├── index.ts │ ├── mixins.ts │ └── theme.ts ├── systems │ ├── Api │ │ ├── helpers │ │ │ └── apollo.ts │ │ └── index.ts │ └── Core │ │ ├── components │ │ ├── Chakra │ │ │ └── index.tsx │ │ ├── Favicon │ │ │ └── index.tsx │ │ ├── Layout │ │ │ └── index.tsx │ │ └── StrapiImage │ │ │ └── index.tsx │ │ ├── helpers │ │ ├── dayjs.ts │ │ └── mq.ts │ │ ├── hooks │ │ └── useViewport.ts │ │ └── index.ts └── types.d.ts ├── tailwind.config.js ├── tsconfig.json └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "next/babel", 5 | { 6 | "preset-react": { 7 | "runtime": "automatic", 8 | "importSource": "@emotion/react" 9 | } 10 | } 11 | ] 12 | ], 13 | "plugins": [ 14 | "@emotion/babel-plugin", 15 | "babel-plugin-macros", 16 | ["module-resolver", { "root": ["./src"] }] 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # Supported browsers 2 | 3 | last 3 version 4 | > 5% 5 | not dead 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | tab_width = 2 5 | indent_size = 2 6 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | NEXT_PUBLIC_STRAPI_URL="http://localhost:1337" 2 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | .husky 2 | tailwind.config.js 3 | **/*.js 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | parserOptions: { 4 | ecmaVersion: 2020, 5 | sourceType: 'module', 6 | ecmaFeatures: { 7 | jsx: true, 8 | }, 9 | }, 10 | env: { 11 | jest: true, 12 | }, 13 | settings: { 14 | react: { 15 | version: 'detect', 16 | }, 17 | }, 18 | extends: [ 19 | 'plugin:@typescript-eslint/recommended', 20 | 'plugin:react/recommended', 21 | 'prettier', 22 | 'plugin:@next/next/recommended', 23 | ], 24 | rules: { 25 | '@typescript-eslint/no-namespace': 'off', 26 | '@typescript-eslint/no-non-null-assertion': 'off', 27 | '@typescript-eslint/explicit-module-boundary-types': 'off', 28 | '@typescript-eslint/no-explicit-any': 'off', 29 | '@typescript-eslint/ban-ts-comment': 'off', 30 | 'react/react-in-jsx-scope': 'off', 31 | 'react/prop-types': 'off', 32 | 'react/display-name': 'off', 33 | }, 34 | } 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | # Keep environment variables out of version control 3 | .env 4 | .env.local 5 | .next 6 | .eslintcache 7 | 8 | # Sentry 9 | .sentryclirc 10 | -------------------------------------------------------------------------------- /.husky/.gitignore: -------------------------------------------------------------------------------- 1 | _ 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | yarn test 5 | npx lint-staged 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "semi": false 4 | } 5 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true, 3 | } 4 | -------------------------------------------------------------------------------- /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 | ## Stack Used 4 | 5 | - [NextJS](https://nextjs.org/) 6 | - [Typescript](https://www.typescriptlang.org/) 7 | - [Prettier](https://prettier.io/) 8 | - [Jest](https://jestjs.io/) & [React-testing-library](https://testing-library.com/docs/react-testing-library/intro/) 9 | - [Husky](https://typicode.github.io/husky/#/) & [Lint-staged](https://github.com/okonet/lint-staged) 10 | - [TailwindCSS](https://tailwindcss.com/) 11 | - [ChakraUI](https://chakra-ui.com/) 12 | - [FontSource](https://fontsource.org/) 13 | - [Emotion](https://emotion.sh/) 14 | - [Twin.macro](https://github.com/ben-rogerson/twin.macro) 15 | - [Apollo GraphQL](https://www.apollographql.com/) 16 | - [GraphQL Codegen](https://www.graphql-code-generator.com/) 17 | 18 | ## Getting Started 19 | 20 | First, run the development server: 21 | 22 | ```bash 23 | npm run dev 24 | # or 25 | yarn dev 26 | ``` 27 | 28 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 29 | 30 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 31 | 32 | ## Learn More 33 | 34 | To learn more about Next.js, take a look at the following resources: 35 | 36 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 37 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 38 | 39 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 40 | 41 | ## Deploy on Vercel 42 | 43 | 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. 44 | 45 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 46 | -------------------------------------------------------------------------------- /codegen.yml: -------------------------------------------------------------------------------- 1 | schema: http://localhost:1337/graphql 2 | generates: 3 | ./src/strapi-types.d.ts: 4 | plugins: 5 | - typescript 6 | -------------------------------------------------------------------------------- /jest.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from '@jest/types' 2 | 3 | const config: Config.InitialOptions = { 4 | verbose: true, 5 | modulePathIgnorePatterns: ['.next', 'node_modules'], 6 | } 7 | export default config 8 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // NOTE: This file should not be edited 6 | // see https://nextjs.org/docs/basic-features/typescript for more information. 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | webpack5: true, 3 | images: { 4 | domains: ['localhost'], 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-boilerplate", 3 | "license": "MIT", 4 | "version": "0.1.0", 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "format": "prettier write ./", 10 | "lint": "eslint '**/*.{js,ts,tsx}' --fix", 11 | "check-types": "tsc -w --noEmit", 12 | "test": "jest --passWithNoTests", 13 | "prepare": "husky install", 14 | "generate": "run-s generate:*", 15 | "generate:codegen": "graphql-codegen" 16 | }, 17 | "dependencies": { 18 | "@apollo/client": "^3.4.15", 19 | "@chakra-ui/react": "^1.6.8", 20 | "@emotion/react": "^11.4.1", 21 | "@emotion/styled": "^11.3.0", 22 | "@fontsource/dm-sans": "^4.5.0", 23 | "@hookform/resolvers": "^2.8.1", 24 | "classnames": "^2.3.1", 25 | "cross-fetch": "^3.1.4", 26 | "dayjs": "^1.10.7", 27 | "framer-motion": "^4.1.5", 28 | "graphql": "^15.6.0", 29 | "next": "11.1.2", 30 | "ramda": "^0.27.1", 31 | "react": "17.0.2", 32 | "react-dom": "17.0.2", 33 | "react-hook-form": "^7.17.0", 34 | "react-icons": "^4.2.0", 35 | "react-use": "^17.2.4", 36 | "twin.macro": "^2.7.0", 37 | "yup": "^0.32.9" 38 | }, 39 | "devDependencies": { 40 | "@babel/core": "^7.15.5", 41 | "@babel/preset-react": "^7.14.5", 42 | "@emotion/babel-plugin": "^11.3.0", 43 | "@graphql-codegen/cli": "^2.2.0", 44 | "@graphql-codegen/typescript": "^2.2.2", 45 | "@next/eslint-plugin-next": "^11.1.2", 46 | "@testing-library/react": "^12.1.1", 47 | "@types/node": "^16.10.2", 48 | "@types/react": "^17.0.26", 49 | "@typescript-eslint/eslint-plugin": "^4.32.0", 50 | "@typescript-eslint/parser": "^4.32.0", 51 | "autoprefixer": "^10.3.6", 52 | "babel-jest": "^27.2.4", 53 | "babel-loader": "^8.2.2", 54 | "babel-plugin-macros": "^3.1.0", 55 | "babel-plugin-module-resolver": "^4.1.0", 56 | "eslint": "^7.32.0", 57 | "eslint-config-prettier": "^8.3.0", 58 | "eslint-plugin-react": "^7.26.1", 59 | "husky": "^7.0.2", 60 | "jest": "^27.2.4", 61 | "lint-staged": ">=11.1.2", 62 | "npm-run-all": "^4.1.5", 63 | "postcss": "^8.3.8", 64 | "prettier": "^2.4.1", 65 | "tailwindcss": "^2.2.16", 66 | "typescript": "^4.4.3" 67 | }, 68 | "lint-staged": { 69 | "src/*.{js,jsx,ts,tsx}": "eslint --cache --fix" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/android-icon-144x144.png -------------------------------------------------------------------------------- /public/favicon/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/android-icon-192x192.png -------------------------------------------------------------------------------- /public/favicon/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/android-icon-36x36.png -------------------------------------------------------------------------------- /public/favicon/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/android-icon-48x48.png -------------------------------------------------------------------------------- /public/favicon/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/android-icon-72x72.png -------------------------------------------------------------------------------- /public/favicon/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/android-icon-96x96.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/apple-icon-114x114.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/apple-icon-120x120.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/apple-icon-144x144.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/apple-icon-152x152.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/apple-icon-180x180.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/apple-icon-57x57.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/apple-icon-60x60.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/apple-icon-72x72.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/apple-icon-76x76.png -------------------------------------------------------------------------------- /public/favicon/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/apple-icon-precomposed.png -------------------------------------------------------------------------------- /public/favicon/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/apple-icon.png -------------------------------------------------------------------------------- /public/favicon/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /public/favicon/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/favicon-16x16.png -------------------------------------------------------------------------------- /public/favicon/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/favicon-32x32.png -------------------------------------------------------------------------------- /public/favicon/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/favicon-96x96.png -------------------------------------------------------------------------------- /public/favicon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/favicon.ico -------------------------------------------------------------------------------- /public/favicon/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /public/favicon/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/ms-icon-144x144.png -------------------------------------------------------------------------------- /public/favicon/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/ms-icon-150x150.png -------------------------------------------------------------------------------- /public/favicon/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/ms-icon-310x310.png -------------------------------------------------------------------------------- /public/favicon/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pedronauck/nextjs-boilerplate/c3590975a750aba9d7210a5b0dfecb5566f2b15b/public/favicon/ms-icon-70x70.png -------------------------------------------------------------------------------- /src/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '@fontsource/dm-sans/400.css' 2 | import '@fontsource/dm-sans/700.css' 3 | import './index.css' 4 | 5 | import { ApolloProvider } from '@apollo/client' 6 | import { AppProps } from 'next/app' 7 | 8 | import { Chakra } from 'systems/Core' 9 | import { client } from 'systems/Api' 10 | 11 | const App = ({ Component, pageProps }: AppProps) => { 12 | return ( 13 | 14 | 15 | 16 | 17 | 18 | ) 19 | } 20 | 21 | export default App 22 | -------------------------------------------------------------------------------- /src/pages/_document.tsx: -------------------------------------------------------------------------------- 1 | import Document, { 2 | DocumentContext, 3 | Html, 4 | Head, 5 | Main, 6 | NextScript, 7 | } from 'next/document' 8 | 9 | class MyDocument extends Document { 10 | static async getInitialProps(ctx: DocumentContext) { 11 | return Document.getInitialProps(ctx) 12 | } 13 | render() { 14 | return ( 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | ) 23 | } 24 | } 25 | 26 | export default MyDocument 27 | -------------------------------------------------------------------------------- /src/pages/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | -------------------------------------------------------------------------------- /src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | import { css } from '@emotion/react' 3 | import tw from 'twin.macro' 4 | 5 | import { Layout } from 'systems/Core' 6 | 7 | const Home: FC = () => { 8 | return ( 9 | 10 |
Hello world
11 | 12 | ) 13 | } 14 | 15 | const styles = { 16 | root: css` 17 | ${tw`flex flex-col items-center justify-center w-full`}; 18 | height: 100vh; 19 | `, 20 | } 21 | 22 | export default Home 23 | -------------------------------------------------------------------------------- /src/styles/breakpoints.json: -------------------------------------------------------------------------------- 1 | { 2 | "xs": 300, 3 | "sm": 600, 4 | "md": 768, 5 | "lg": 1024, 6 | "xl": 1280, 7 | "xxl": 1536 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/index.ts: -------------------------------------------------------------------------------- 1 | import * as mixins from './mixins' 2 | 3 | export { mixins } 4 | -------------------------------------------------------------------------------- /src/styles/mixins.ts: -------------------------------------------------------------------------------- 1 | import { css } from '@emotion/react' 2 | import tw from 'twin.macro' 3 | 4 | export const container = tw` 5 | max-w-6xl mx-auto xs:(px-6) sm:(px-14) 6 | ` 7 | 8 | export const pseudoContent = (width?: string, height?: string) => css` 9 | ${tw`absolute block content['']`} 10 | width: ${width}; 11 | height: ${height}; 12 | ` 13 | -------------------------------------------------------------------------------- /src/styles/theme.ts: -------------------------------------------------------------------------------- 1 | import { extendTheme } from '@chakra-ui/react' 2 | import colors from 'tailwindcss/colors' 3 | 4 | const config: any = { 5 | initialColorMode: 'light', 6 | useSystemColorMode: false, 7 | } 8 | 9 | const fonts = { 10 | heading: `'DM Sans', sans-serif`, 11 | body: `'DM Sans', sans-serif`, 12 | } 13 | 14 | const theme = extendTheme({ 15 | config, 16 | fonts, 17 | colors: { 18 | ...colors, 19 | gray: colors.blueGray, 20 | primary: colors['indigo'], 21 | secondary: colors['teal'], 22 | }, 23 | styles: { 24 | global: { 25 | body: { 26 | bg: 'body', 27 | color: 'gray.700', 28 | fontSize: [18, 20], 29 | fontWeight: '400', 30 | }, 31 | a: { 32 | color: 'primary.700', 33 | _hover: { 34 | color: 'primary.700', 35 | textDecoration: 'underline', 36 | }, 37 | }, 38 | 'h1,h2,h3,h4,h5,h6': { 39 | color: 'gray.800', 40 | fontWeight: 'bold', 41 | }, 42 | }, 43 | }, 44 | }) 45 | 46 | export default theme 47 | -------------------------------------------------------------------------------- /src/systems/Api/helpers/apollo.ts: -------------------------------------------------------------------------------- 1 | import fetch from 'cross-fetch' 2 | import { onError } from '@apollo/client/link/error' 3 | 4 | import { ApolloClient, InMemoryCache, HttpLink, from } from '@apollo/client' 5 | 6 | const URI = 7 | process.env.NODE_ENV !== 'production' 8 | ? `http://localhost:1337/graphql` 9 | : process.env.NEXT_PUBLIC_STRAPI_URL 10 | 11 | const httpLink = new HttpLink({ uri: URI, fetch }) 12 | 13 | const errorLink = onError(({ graphQLErrors, networkError }) => { 14 | if (graphQLErrors) 15 | graphQLErrors.forEach(({ message, locations, path }) => 16 | console.log( 17 | `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}` 18 | ) 19 | ) 20 | if (networkError) console.log(`[Network error]: ${networkError}`) 21 | }) 22 | 23 | export const client = new ApolloClient({ 24 | link: from([errorLink, httpLink]), 25 | cache: new InMemoryCache(), 26 | }) 27 | -------------------------------------------------------------------------------- /src/systems/Api/index.ts: -------------------------------------------------------------------------------- 1 | export { client } from './helpers/apollo' 2 | -------------------------------------------------------------------------------- /src/systems/Core/components/Chakra/index.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | import { GetServerSideProps } from 'next' 3 | import { 4 | ChakraProvider, 5 | cookieStorageManager, 6 | localStorageManager, 7 | } from '@chakra-ui/react' 8 | 9 | import theme from 'styles/theme' 10 | 11 | const Chakra: FC = ({ cookies, children }) => { 12 | const colorModeManager = 13 | typeof cookies === 'string' 14 | ? cookieStorageManager(cookies) 15 | : localStorageManager 16 | return ( 17 | 18 | {children} 19 | 20 | ) 21 | } 22 | 23 | export const getServerSideProps: GetServerSideProps = async ({ req }) => { 24 | return { 25 | props: { 26 | cookies: req.headers.cookie ?? '', 27 | }, 28 | } 29 | } 30 | 31 | export default Chakra 32 | -------------------------------------------------------------------------------- /src/systems/Core/components/Favicon/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { FC } from 'react' 2 | 3 | type Props = { 4 | color?: string 5 | } 6 | 7 | export const Favicon: FC = ({ color = '#FFF' }) => { 8 | return ( 9 | 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 55 | 61 | 67 | 73 | 79 | 80 | 81 | 85 | 86 | 87 | ) 88 | } 89 | -------------------------------------------------------------------------------- /src/systems/Core/components/Layout/index.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | import Head from 'next/head' 3 | 4 | import { Favicon } from 'systems/Core' 5 | 6 | interface Props { 7 | head?: any 8 | title: string 9 | } 10 | 11 | export const Layout: FC = ({ head, children, title }) => { 12 | return ( 13 | <> 14 | 15 | {title} 16 | 17 | 18 | 19 | {head} 20 | 21 | {children} 22 | 23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /src/systems/Core/components/StrapiImage/index.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from 'react' 2 | import Image from 'next/image' 3 | 4 | type Props = { 5 | image?: any 6 | } 7 | 8 | export const StrapiImage: FC = ({ image }) => { 9 | if (!image) return null 10 | return ( 11 | {image.alternativeText { 17 | return `${process.env.NEXT_PUBLIC_STRAPI_URL}${src}?w=${width}&h=${height}&q=80` 18 | }} 19 | /> 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /src/systems/Core/helpers/dayjs.ts: -------------------------------------------------------------------------------- 1 | import dayjs from 'dayjs' 2 | import relativeTime from 'dayjs/plugin/relativeTime' 3 | import 'dayjs/locale/pt-br' 4 | 5 | dayjs.extend(relativeTime) 6 | dayjs.locale('pt-br') 7 | 8 | export { dayjs } 9 | -------------------------------------------------------------------------------- /src/systems/Core/helpers/mq.ts: -------------------------------------------------------------------------------- 1 | import * as R from 'ramda' 2 | import breakpoints from 'styles/breakpoints.json' 3 | 4 | export const mq = (min: string, max?: string) => { 5 | const minWidth = R.prop(min, breakpoints) 6 | const maxWidth = R.prop(max, breakpoints) 7 | const result = 8 | `@media (min-width: ${minWidth}px)` + 9 | (maxWidth ? `and (max-width: ${maxWidth}px)` : '') 10 | return result 11 | } 12 | -------------------------------------------------------------------------------- /src/systems/Core/hooks/useViewport.ts: -------------------------------------------------------------------------------- 1 | import * as R from 'ramda' 2 | import { useState, useEffect } from 'react' 3 | import { useWindowSize } from 'react-use' 4 | 5 | import breakpoints from 'styles/breakpoints.json' 6 | 7 | export type Viewports = { 8 | isXS: boolean 9 | isSM: boolean 10 | isMD: boolean 11 | isLG: boolean 12 | isXL: boolean 13 | is2XL: boolean 14 | lessXS: boolean 15 | lessSM: boolean 16 | lessMD: boolean 17 | lessLG: boolean 18 | lessXL: boolean 19 | less2XL: boolean 20 | } 21 | 22 | const INITIAL_VIEWPORT = { 23 | isXS: false, 24 | isSM: false, 25 | isMD: false, 26 | isLG: false, 27 | isXL: false, 28 | is2XL: false, 29 | lessXS: false, 30 | lessSM: false, 31 | lessMD: false, 32 | lessLG: false, 33 | lessXL: false, 34 | less2XL: false, 35 | } 36 | 37 | export function useViewport(): Viewports { 38 | const { width } = useWindowSize() 39 | const [viewport, setViewport] = useState(INITIAL_VIEWPORT) 40 | const entries = Object.entries(breakpoints) 41 | 42 | useEffect(() => { 43 | setViewport( 44 | entries.reduce((obj, [key, value]) => { 45 | return R.pipe( 46 | R.assoc(`is${key.toUpperCase()}`, width >= value), 47 | R.assoc(`less${key.toUpperCase()}`, width < value) 48 | )(obj) 49 | }, {}) as Viewports 50 | ) 51 | }, [width]) 52 | 53 | return viewport 54 | } 55 | -------------------------------------------------------------------------------- /src/systems/Core/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Chakra } from './components/Chakra' 2 | export { Layout } from './components/Layout' 3 | export { Favicon } from './components/Favicon' 4 | export { StrapiImage } from './components/StrapiImage' 5 | 6 | export { mq } from './helpers/mq' 7 | export { dayjs } from './helpers/dayjs' 8 | 9 | export { useViewport } from './hooks/useViewport' 10 | export type { Viewports } from './hooks/useViewport' 11 | -------------------------------------------------------------------------------- /src/types.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'ramda' 2 | declare module 'tailwindcss/colors' 3 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | const breakpoints = require('./src/styles/breakpoints.json') 2 | const colors = require('tailwindcss/colors') 3 | 4 | module.exports = { 5 | mode: 'jit', 6 | purge: ['./src/**/*.{js,ts,jsx,tsx}'], 7 | darkMode: false, 8 | theme: { 9 | extend: { 10 | colors: { 11 | ...colors, 12 | gray: colors.blueGray, 13 | primary: colors['indigo'], 14 | secondary: colors['teal'], 15 | }, 16 | fontFamily: { 17 | sans: ['DM Sans', 'sans-serif'], 18 | }, 19 | }, 20 | screens: Object.entries(breakpoints).reduce((obj, [key, value]) => { 21 | return { ...obj, [key]: `${value}px` } 22 | }, {}), 23 | }, 24 | variants: { 25 | extend: {}, 26 | }, 27 | plugins: [], 28 | } 29 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "target": "esnext", 5 | "module": "esnext", 6 | "allowJs": true, 7 | "jsx": "preserve", 8 | "strict": true, 9 | "jsxImportSource": "@emotion/react", 10 | "moduleResolution": "node", 11 | "allowSyntheticDefaultImports": true, 12 | "noUnusedLocals": true, 13 | "noUnusedParameters": true, 14 | "removeComments": true, 15 | "preserveConstEnums": true, 16 | "sourceMap": true, 17 | "skipLibCheck": true, 18 | "esModuleInterop": true, 19 | "typeRoots": ["./node_modules/@types", "./types"], 20 | "lib": ["dom", "es2017"], 21 | "forceConsistentCasingInFileNames": true, 22 | "noEmit": true, 23 | "resolveJsonModule": true, 24 | "isolatedModules": true, 25 | "sourceRoot": "./src", 26 | "baseUrl": "./src", 27 | "paths": { 28 | "~public/*": ["../public/*"], 29 | } 30 | }, 31 | "exclude": [ 32 | "dist", 33 | ".next", 34 | "out", 35 | "node_modules", 36 | "next.config.js", 37 | "postcss.config.js", 38 | "**/*.spec.ts", 39 | "**/*.spec.tsx", 40 | "**/*.test.ts", 41 | "**/*.test.tsx", 42 | "coverage" 43 | ], 44 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "tailwind.config.js"] 45 | } 46 | --------------------------------------------------------------------------------