├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .prettierignore
├── .prettierrc
├── LICENSE
├── README.md
├── jest.config.js
├── jest.setup.js
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
    ├── components
    │   ├── Button.test.tsx
    │   ├── Button.tsx
    │   ├── Card.test.tsx
    │   ├── Card.tsx
    │   ├── Dropdown.test.tsx
    │   ├── Dropdown.tsx
    │   ├── Input.test.tsx
    │   ├── Input.tsx
    │   ├── List.test.tsx
    │   ├── List.tsx
    │   ├── Text.test.tsx
    │   ├── Text.tsx
    │   ├── __snapshots__
    │   │   ├── Button.test.tsx.snap
    │   │   ├── Card.test.tsx.snap
    │   │   ├── Dropdown.test.tsx.snap
    │   │   ├── Input.test.tsx.snap
    │   │   ├── List.test.tsx.snap
    │   │   └── Text.test.tsx.snap
    │   └── layout
    │   │   ├── AppHeader.test.tsx
    │   │   ├── AppHeader.tsx
    │   │   ├── Layout.test.tsx
    │   │   ├── Layout.tsx
    │   │   ├── LayoutMDX.test.tsx
    │   │   ├── LayoutMDX.tsx
    │   │   ├── ThemeSwitch.test.tsx
    │   │   ├── ThemeSwitch.tsx
    │   │   └── __snapshots__
    │   │       ├── AppHeader.test.tsx.snap
    │   │       ├── Layout.test.tsx.snap
    │   │       ├── LayoutMDX.test.tsx.snap
    │   │       └── ThemeSwitch.test.tsx.snap
    ├── pages
    │   ├── _app.tsx
    │   ├── _document.tsx
    │   ├── components.tsx
    │   ├── index.tsx
    │   └── typography.mdx
    ├── styles
    │   ├── main.css
    │   └── nprogress.css
    └── utils
    │   └── routes.ts
├── tailwind.config.js
└── tsconfig.json


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["next/babel"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | assets
2 | __snapshots__
3 | styles
4 | .next
5 | node_modules
6 | *.mdx


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "@typescript-eslint/parser",
 3 |   "extends": [
 4 |     "plugin:@typescript-eslint/recommended",
 5 |     "prettier/@typescript-eslint",
 6 |     "react-app",
 7 |     "plugin:prettier/recommended"
 8 |   ],
 9 |   "plugins": ["@typescript-eslint", "react"],
10 |   "rules": {
11 |     "@typescript-eslint/explicit-function-return-type": "off",
12 |     "@typescript-eslint/explicit-module-boundary-types": "off",
13 |     "jsx-a11y/anchor-is-valid": "off"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .next
3 | assets
4 | __snapshots__
5 | styles
6 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "es5",
3 |   "tabWidth": 2,
4 |   "semi": false,
5 |   "singleQuote": true
6 | }
7 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Lailo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # NextJS with Tailwind CSS and TypeScript
 2 | 
 3 | This is a demo project to show how to setup [NextJS](https://nextjs.org) with [TypeScript](https://www.typescriptlang.org/), [TailwindCSS](https://tailwindcss.com) and [Jest](https://jestjs.io).
 4 | 
 5 | It shows how you can use a utility-first CSS framework with snapshot testing to have nice tests with different component stats (loading, disabled, active, ...).
 6 | 
 7 | To reduce the CSS bundle size of TailwindCSS, I added [PurgeCSS](https://www.purgecss.com/).
 8 | 
 9 | ## Development
10 | 
11 | 1. `npm install`
12 | 2. `npm run dev`
13 | 
14 | ## Testing
15 | 
16 | `npm test`
17 | 
18 | ## Production
19 | 
20 | 1. `npm run build`
21 | 2. `npm run start`
22 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | const TEST_REGEX = '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|js?|tsx?|ts?)$'
 2 | 
 3 | module.exports = {
 4 |   setupFiles: ['<rootDir>/jest.setup.js'],
 5 |   testRegex: TEST_REGEX,
 6 |   moduleNameMapper: {
 7 |     '@components(.*)$': '<rootDir>/src/components$1',
 8 |     '@pages(.*)$': '<rootDir>/src/pages$1',
 9 |     '@styles(.*)$': '<rootDir>/src/styles$1',
10 |     '@utils(.*)$': '<rootDir>/src/utils$1',
11 |   },
12 |   transform: {
13 |     '^.+\\.tsx?$': 'babel-jest',
14 |     '.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$':
15 |       'jest-transform-stub',
16 |   },
17 |   testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/'],
18 |   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
19 |   collectCoverage: false,
20 |   snapshotSerializers: ['enzyme-to-json/serializer'],
21 | }
22 | 


--------------------------------------------------------------------------------
/jest.setup.js:
--------------------------------------------------------------------------------
1 | const Enzyme = require('enzyme')
2 | const Adapter = require('enzyme-adapter-react-16')
3 | 
4 | Enzyme.configure({ adapter: new Adapter() })
5 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/types/global" />
3 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const withMDX = require('@next/mdx')({
2 |   extension: /\.(md|mdx)$/,
3 | })
4 | 
5 | module.exports = withMDX({
6 |   pageExtensions: ['ts', 'tsx', 'mdx'],
7 | })
8 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "next-with-tailwindcss",
 3 |   "version": "1.0.0",
 4 |   "description": "NextJS with Tailwind CSS",
 5 |   "scripts": {
 6 |     "dev": "next",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "test": "npm run test:format && npm run test:lint && npm run test:unit",
10 |     "test:unit": "jest",
11 |     "test:unit:watch": "jest --watch",
12 |     "test:format": "prettier --check .",
13 |     "test:tsc": "tsc --noEmit",
14 |     "test:lint": "eslint './src/**/*' --ext .tsx,.ts"
15 |   },
16 |   "husky": {
17 |     "hooks": {
18 |       "pre-commit": "npm run test:tsc && npm run test:lint",
19 |       "pre-push": "npm run test"
20 |     }
21 |   },
22 |   "repository": {
23 |     "type": "git",
24 |     "url": "git+https://github.com/lailo-ch/next-with-tailwindcss.git"
25 |   },
26 |   "author": "Lailo",
27 |   "license": "MIT",
28 |   "bugs": {
29 |     "url": "https://github.com/lailo-ch/next-with-tailwindcss/issues"
30 |   },
31 |   "homepage": "https://github.com/lailo-ch/next-with-tailwindcss#readme",
32 |   "dependencies": {
33 |     "clsx": "^1.1.1",
34 |     "next": "^9.4.4",
35 |     "nprogress": "^0.2.0",
36 |     "react": "^16.13.1",
37 |     "react-dom": "^16.13.1",
38 |     "react-icons": "^3.10.0",
39 |     "react-switch": "^5.0.1",
40 |     "use-dark-mode": "^2.3.1"
41 |   },
42 |   "devDependencies": {
43 |     "@mdx-js/loader": "^1.6.5",
44 |     "@next/mdx": "^9.4.4",
45 |     "@types/jest": "^25.2.3",
46 |     "@types/node": "^14.0.9",
47 |     "@types/react": "^16.9.35",
48 |     "@typescript-eslint/eslint-plugin": "^3.1.0",
49 |     "@typescript-eslint/parser": "^3.1.0",
50 |     "babel-core": "^6.26.3",
51 |     "babel-eslint": "^10.1.0",
52 |     "babel-jest": "^26.0.1",
53 |     "enzyme": "^3.11.0",
54 |     "enzyme-adapter-react-16": "^1.15.2",
55 |     "enzyme-to-json": "^3.5.0",
56 |     "eslint": "^7.1.0",
57 |     "eslint-config-prettier": "^6.11.0",
58 |     "eslint-config-react-app": "^5.2.1",
59 |     "eslint-plugin-flowtype": "^5",
60 |     "eslint-plugin-import": "^2.20.2",
61 |     "eslint-plugin-jsx-a11y": "^6.2.3",
62 |     "eslint-plugin-prettier": "^3.1.3",
63 |     "eslint-plugin-react": "^7.20.0",
64 |     "eslint-plugin-react-hooks": "^4.0.4",
65 |     "husky": "^4.2.5",
66 |     "jest": "^26.0.1",
67 |     "jest-transform-stub": "^2.0.0",
68 |     "postcss-preset-env": "^6.7.0",
69 |     "prettier": "2.0.5",
70 |     "react-addons-test-utils": "^15.6.2",
71 |     "react-test-renderer": "^16.13.1",
72 |     "tailwindcss": "^1.4.6",
73 |     "tailwindcss-dark-mode": "^1.1.4",
74 |     "typescript": "^3.9.3"
75 |   }
76 | }
77 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: ['tailwindcss', 'postcss-preset-env'],
3 | }
4 | 


--------------------------------------------------------------------------------
/src/components/Button.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { shallow } from 'enzyme'
 3 | import toJson from 'enzyme-to-json'
 4 | 
 5 | import Button from './Button'
 6 | 
 7 | describe('Button', () => {
 8 |   it('renders with correct label', () => {
 9 |     const wrapper = shallow(<Button>Hello</Button>)
10 |     expect(wrapper.text()).toEqual('Hello')
11 |   })
12 | 
13 |   it('matches primary (default) type snapshot', () => {
14 |     const wrapper = shallow(<Button>Primary</Button>)
15 |     expect(toJson(wrapper)).toMatchSnapshot()
16 |   })
17 | 
18 |   it('matches secondary type snapshot', () => {
19 |     const wrapper = shallow(<Button type="secondary">Secondary</Button>)
20 |     expect(toJson(wrapper)).toMatchSnapshot()
21 |   })
22 | 
23 |   it('matches with external className as string', () => {
24 |     const wrapper = shallow(
25 |       <Button className="external-classname">Hello</Button>
26 |     )
27 |     expect(toJson(wrapper)).toMatchSnapshot()
28 |   })
29 | 
30 |   it('matches with external className as object', () => {
31 |     const wrapper = shallow(
32 |       <Button
33 |         className={{
34 |           'external-classname-true': true,
35 |           'external-classname-false': false,
36 |         }}
37 |       >
38 |         Hello
39 |       </Button>
40 |     )
41 |     expect(toJson(wrapper)).toMatchSnapshot()
42 |   })
43 | 
44 |   it('matches disabled state', () => {
45 |     const wrapper = shallow(<Button disabled>Disabled</Button>)
46 |     expect(toJson(wrapper)).toMatchSnapshot()
47 |   })
48 | 
49 |   it('matches loading state', () => {
50 |     const wrapper = shallow(<Button loading>Disabled</Button>)
51 |     expect(toJson(wrapper)).toMatchSnapshot()
52 |   })
53 | })
54 | 


--------------------------------------------------------------------------------
/src/components/Button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import clsx from 'clsx'
 3 | 
 4 | export interface Props {
 5 |   type?: 'primary' | 'secondary'
 6 |   className?: string | Record<string, unknown>
 7 |   loading?: boolean
 8 | }
 9 | 
10 | const Button: React.FC<Props & React.HTMLProps<HTMLButtonElement>> = ({
11 |   children,
12 |   className,
13 |   type = 'primary',
14 |   loading = false,
15 |   ...props
16 | }) => {
17 |   const disabled = props.disabled || loading
18 | 
19 |   const mergedClassName = clsx(
20 |     'px-4 py-2',
21 |     { 'text-white': !disabled, 'text-gray-500 dark:text-gray-700': disabled },
22 |     {
23 |       'bg-primary hover:bg-primary-darker': !disabled && type === 'primary',
24 |       'bg-secondary hover:bg-secondary-darker':
25 |         !disabled && type === 'secondary',
26 |       'bg-gray-300 dark:bg-gray-800': disabled,
27 |     },
28 |     {
29 |       'cursor-not-allowed': disabled && !loading,
30 |       'cursor-wait': loading,
31 |     },
32 |     className
33 |   )
34 | 
35 |   return (
36 |     <button className={mergedClassName} disabled={disabled} {...props}>
37 |       {children}
38 |       {loading && '...'}
39 |     </button>
40 |   )
41 | }
42 | 
43 | export default Button
44 | 


--------------------------------------------------------------------------------
/src/components/Card.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { shallow } from 'enzyme'
 3 | import toJson from 'enzyme-to-json'
 4 | import Card from './Card'
 5 | 
 6 | describe('Card', () => {
 7 |   it('matches snapshot', () => {
 8 |     const wrapper = shallow(
 9 |       <Card>
10 |         <h1>hello world</h1>
11 |       </Card>
12 |     )
13 |     expect(toJson(wrapper)).toMatchSnapshot()
14 |   })
15 | })
16 | 


--------------------------------------------------------------------------------
/src/components/Card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import clsx from 'clsx'
 3 | 
 4 | export interface Props {
 5 |   className?: string | Record<string, unknown>
 6 | }
 7 | 
 8 | const Card: React.FC<Props> = ({ className, children }) => {
 9 |   return (
10 |     <div
11 |       className={clsx(
12 |         'rounded shadow-md',
13 |         'p-4 sm:p-6 md:p-8',
14 |         'bg-white dark:bg-gray-800',
15 |         'border border-gray-200 dark:border-gray-700',
16 |         className
17 |       )}
18 |     >
19 |       {children}
20 |     </div>
21 |   )
22 | }
23 | 
24 | export default Card
25 | 


--------------------------------------------------------------------------------
/src/components/Dropdown.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { shallow } from 'enzyme'
 3 | import toJson from 'enzyme-to-json'
 4 | import Dropdown from './Dropdown'
 5 | 
 6 | describe('Dropdown', () => {
 7 |   it('matches snapshot', () => {
 8 |     const wrapper = shallow(
 9 |       <Dropdown buttonLabel="menu">
10 |         <ul>
11 |           <li>hello</li>
12 |           <li>world</li>
13 |         </ul>
14 |       </Dropdown>
15 |     )
16 |     expect(toJson(wrapper)).toMatchSnapshot()
17 |   })
18 | })
19 | 


--------------------------------------------------------------------------------
/src/components/Dropdown.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import clsx from 'clsx'
 3 | 
 4 | export interface Props {
 5 |   className?: string | Record<string, unknown>
 6 |   buttonLabel: string | React.ReactElement
 7 | }
 8 | 
 9 | const Dropdown: React.FC<Props> = ({ className, buttonLabel, children }) => {
10 |   const node = React.useRef<HTMLDivElement>()
11 |   const [showDropdown, setShowDropdown] = React.useState(false)
12 | 
13 |   const toggleDropdown = () => {
14 |     setShowDropdown(!showDropdown)
15 |   }
16 | 
17 |   const handleClickOutside = (e: MouseEvent) => {
18 |     if (node?.current?.contains(e.target as Node)) {
19 |       return
20 |     }
21 |     setShowDropdown(false)
22 |   }
23 | 
24 |   React.useEffect(() => {
25 |     document.addEventListener('mousedown', handleClickOutside)
26 |     return () => document.removeEventListener('mousedown', handleClickOutside)
27 |   }, [])
28 | 
29 |   return (
30 |     <div ref={node} className={clsx('relative inline-block', className)}>
31 |       <button
32 |         className={clsx('p-2 rounded-full', {
33 |           'hover:bg-primary hover:bg-opacity-25': !showDropdown,
34 |           'bg-primary text-white': showDropdown,
35 |         })}
36 |         onClick={toggleDropdown}
37 |       >
38 |         {buttonLabel}
39 |       </button>
40 |       {showDropdown && (
41 |         <div className="absolute right-0 mt-1 bg-white dark:bg-gray-800 border dark:border-gray-700 rounded shadow-md p-2 space-y-2">
42 |           {children}
43 |         </div>
44 |       )}
45 |     </div>
46 |   )
47 | }
48 | 
49 | export default Dropdown
50 | 


--------------------------------------------------------------------------------
/src/components/Input.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { shallow } from 'enzyme'
 3 | import toJson from 'enzyme-to-json'
 4 | import { FiMail } from 'react-icons/fi'
 5 | 
 6 | import Input from './Input'
 7 | 
 8 | describe('Input', () => {
 9 |   it('renders with correct label', () => {
10 |     const wrapper = shallow(<Input label="Hello" />)
11 |     expect(wrapper.find('label').first().text()).toEqual('Hello')
12 |   })
13 | 
14 |   it('renders with value', () => {
15 |     const wrapper = shallow(<Input value="Hello" />)
16 |     expect(wrapper.find('input').props().value).toEqual('Hello')
17 |   })
18 | 
19 |   it('matches default snapshot', () => {
20 |     const wrapper = shallow(<Input placeholder="email" />)
21 |     expect(toJson(wrapper)).toMatchSnapshot()
22 |   })
23 | 
24 |   it('matches with icon snapshot', () => {
25 |     const wrapper = shallow(<Input placeholder="email" startIcon={FiMail} />)
26 |     expect(toJson(wrapper)).toMatchSnapshot()
27 |   })
28 | 
29 |   it('matches disabled snapshot', () => {
30 |     const wrapper = shallow(<Input placeholder="email" disabled />)
31 |     expect(toJson(wrapper)).toMatchSnapshot()
32 |   })
33 | 
34 |   it('matches with error snapshot', () => {
35 |     const wrapper = shallow(
36 |       <Input placeholder="email" errorMessage="there is an error" />
37 |     )
38 |     expect(toJson(wrapper)).toMatchSnapshot()
39 |   })
40 | 
41 |   it('matches custom class names snapshot', () => {
42 |     const wrapper = shallow(<Input className="custom-class" />)
43 |     expect(toJson(wrapper)).toMatchSnapshot()
44 |   })
45 | 
46 |   it('matches with help text', () => {
47 |     const wrapper = shallow(<Input helpText="my help text" />)
48 |     expect(toJson(wrapper)).toMatchSnapshot()
49 |   })
50 | })
51 | 


--------------------------------------------------------------------------------
/src/components/Input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import clsx from 'clsx'
 3 | import { IconType } from 'react-icons/lib/cjs'
 4 | 
 5 | export interface Props {
 6 |   className?: string | Record<string, unknown>
 7 |   startIcon?: IconType
 8 |   label?: string
 9 |   helpText?: string
10 |   errorMessage?: string
11 | }
12 | 
13 | const Input: React.FC<Props & React.HTMLProps<HTMLInputElement>> = ({
14 |   className,
15 |   startIcon: StartIcon,
16 |   label,
17 |   helpText,
18 |   errorMessage,
19 |   ...props
20 | }) => {
21 |   return (
22 |     <div className={clsx(className)}>
23 |       {label && (
24 |         <label
25 |           className={clsx(
26 |             'block mb-1 pl-2',
27 |             'text-xs text-gray-600 uppercase',
28 |             'font-light'
29 |           )}
30 |         >
31 |           {label}
32 |         </label>
33 |       )}
34 |       <div
35 |         className={clsx(
36 |           'flex items-center',
37 |           'rounded-sm',
38 |           'border',
39 |           props.disabled && 'border-dashed bg-gray-300 dark:bg-gray-800',
40 |           !errorMessage && [
41 |             'border-gray-400 focus-within:border-gray-600',
42 |             'dark:border-gray-700 dark-focus-within:border-gray-600',
43 |           ],
44 |           errorMessage && 'border-red-600',
45 |           !errorMessage && 'text-black dark:text-white',
46 |           errorMessage && 'text-red-600'
47 |         )}
48 |       >
49 |         {StartIcon && (
50 |           <StartIcon className={clsx('ml-2', errorMessage && 'text-red-600')} />
51 |         )}
52 |         <input
53 |           {...props}
54 |           className={clsx(
55 |             'bg-transparent w-full py-1 px-2',
56 |             props.disabled && 'cursor-not-allowed'
57 |           )}
58 |         />
59 |       </div>
60 |       {helpText && (
61 |         <div className="pl-2 mt-1 text-xs text-gray-600 font-light">
62 |           {helpText}
63 |         </div>
64 |       )}
65 |       {errorMessage && (
66 |         <div className="pl-2 mt-1 text-xs text-red-600 font-light">
67 |           {errorMessage}
68 |         </div>
69 |       )}
70 |     </div>
71 |   )
72 | }
73 | 
74 | export default Input
75 | 


--------------------------------------------------------------------------------
/src/components/List.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { shallow } from 'enzyme'
 3 | import toJson from 'enzyme-to-json'
 4 | import List from './List'
 5 | 
 6 | describe('List', () => {
 7 |   it('matches empty ul snapshot', () => {
 8 |     const wrapper = shallow(<List>items</List>)
 9 |     expect(toJson(wrapper)).toMatchSnapshot()
10 |   })
11 | 
12 |   it('matches empty ol snapshot', () => {
13 |     const wrapper = shallow(<List ordered>items</List>)
14 |     expect(toJson(wrapper)).toMatchSnapshot()
15 |   })
16 | 
17 |   it('matches li snapshot', () => {
18 |     const wrapper = shallow(<List item>item text</List>)
19 |     expect(toJson(wrapper)).toMatchSnapshot()
20 |   })
21 | 
22 |   it('matches ul with item snapshot', () => {
23 |     const wrapper = shallow(
24 |       <List>
25 |         <List item>item text</List>
26 |         <List item>item text</List>
27 |       </List>
28 |     )
29 |     expect(toJson(wrapper)).toMatchSnapshot()
30 |   })
31 | 
32 |   it('matches empty ol snapshot', () => {
33 |     const wrapper = shallow(
34 |       <List ordered>
35 |         <List item>item text</List>
36 |         <List item>item text</List>
37 |       </List>
38 |     )
39 |     expect(toJson(wrapper)).toMatchSnapshot()
40 |   })
41 | })
42 | 


--------------------------------------------------------------------------------
/src/components/List.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import clsx from 'clsx'
 3 | 
 4 | export interface Props {
 5 |   className?: string | Record<string, unknown>
 6 |   ordered?: boolean
 7 |   item?: boolean
 8 | }
 9 | 
10 | const List: React.FC<Props> = ({
11 |   className,
12 |   item,
13 |   children,
14 |   ordered = false,
15 | }) => {
16 |   const sharedStyles = 'text-base text-gray-700 dark:text-gray-300'
17 | 
18 |   if (item) {
19 |     return <li className={clsx('', sharedStyles, className)}>{children}</li>
20 |   }
21 | 
22 |   const Component = ordered ? 'ol' : 'ul'
23 |   return (
24 |     <Component
25 |       className={clsx(
26 |         'list-inside leading-loose',
27 |         { 'list-decimal': ordered, 'list-disc': !ordered },
28 |         sharedStyles,
29 |         className
30 |       )}
31 |     >
32 |       {children}
33 |     </Component>
34 |   )
35 | }
36 | 
37 | export default List
38 | 


--------------------------------------------------------------------------------
/src/components/Text.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { shallow } from 'enzyme'
 3 | import toJson from 'enzyme-to-json'
 4 | import Text from './Text'
 5 | 
 6 | describe('Text', () => {
 7 |   it('matches h1 snapshot', () => {
 8 |     const wrapper = shallow(<Text h1>Header 1</Text>)
 9 |     expect(toJson(wrapper)).toMatchSnapshot()
10 |   })
11 | 
12 |   it('matches h2 snapshot', () => {
13 |     const wrapper = shallow(<Text h2>Header 2</Text>)
14 |     expect(toJson(wrapper)).toMatchSnapshot()
15 |   })
16 | 
17 |   it('matches h3 snapshot', () => {
18 |     const wrapper = shallow(<Text h3>Header 3</Text>)
19 |     expect(toJson(wrapper)).toMatchSnapshot()
20 |   })
21 | 
22 |   it('matches h4 snapshot', () => {
23 |     const wrapper = shallow(<Text h4>Header 4</Text>)
24 |     expect(toJson(wrapper)).toMatchSnapshot()
25 |   })
26 | 
27 |   it('matches h5 snapshot', () => {
28 |     const wrapper = shallow(<Text h5>Header 5</Text>)
29 |     expect(toJson(wrapper)).toMatchSnapshot()
30 |   })
31 | 
32 |   it('matches h6 snapshot', () => {
33 |     const wrapper = shallow(<Text h6>Header 6</Text>)
34 |     expect(toJson(wrapper)).toMatchSnapshot()
35 |   })
36 | 
37 |   it('matches default text snapshot', () => {
38 |     const wrapper = shallow(<Text>This is a paragraph</Text>)
39 |     expect(toJson(wrapper)).toMatchSnapshot()
40 |   })
41 | 
42 |   it('matches small snapshot', () => {
43 |     const wrapper = shallow(<Text small>Small text</Text>)
44 |     expect(toJson(wrapper)).toMatchSnapshot()
45 |   })
46 | 
47 |   it('matches bold snapshot', () => {
48 |     const wrapper = shallow(<Text bold>Bold text</Text>)
49 |     expect(toJson(wrapper)).toMatchSnapshot()
50 |   })
51 | })
52 | 


--------------------------------------------------------------------------------
/src/components/Text.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import clsx from 'clsx'
 3 | 
 4 | export interface Props {
 5 |   className?: string | Record<string, unknown>
 6 |   h1?: boolean
 7 |   h2?: boolean
 8 |   h3?: boolean
 9 |   h4?: boolean
10 |   h5?: boolean
11 |   h6?: boolean
12 |   p?: boolean
13 |   small?: boolean
14 |   bold?: boolean
15 | }
16 | 
17 | const Text: React.FC<Props> = ({
18 |   className,
19 |   children,
20 |   h1 = false,
21 |   h2 = false,
22 |   h3 = false,
23 |   h4 = false,
24 |   h5 = false,
25 |   h6 = false,
26 |   small = false,
27 |   bold = false,
28 | }) => {
29 |   const sharedStyles = 'text-gray-700 dark:text-gray-300'
30 |   const headerStyles = 'text-gray-900 dark:text-gray-100 font-black'
31 | 
32 |   if (h1) {
33 |     return (
34 |       <h1 className={clsx('text-5xl', headerStyles, className)}>{children}</h1>
35 |     )
36 |   }
37 | 
38 |   if (h2) {
39 |     return (
40 |       <h2 className={clsx('text-4xl', headerStyles, className)}>{children}</h2>
41 |     )
42 |   }
43 | 
44 |   if (h3) {
45 |     return (
46 |       <h3 className={clsx('text-3xl', headerStyles, className)}>{children}</h3>
47 |     )
48 |   }
49 | 
50 |   if (h4) {
51 |     return (
52 |       <h4 className={clsx('text-2xl', headerStyles, className)}>{children}</h4>
53 |     )
54 |   }
55 | 
56 |   if (h5) {
57 |     return (
58 |       <h5 className={clsx('text-xl', headerStyles, className)}>{children}</h5>
59 |     )
60 |   }
61 | 
62 |   if (h6) {
63 |     return (
64 |       <h6 className={clsx('text-lg', headerStyles, className)}>{children}</h6>
65 |     )
66 |   }
67 | 
68 |   if (small) {
69 |     return (
70 |       <small className={clsx('text-xs', sharedStyles, className)}>
71 |         {children}
72 |       </small>
73 |     )
74 |   }
75 | 
76 |   return (
77 |     <p
78 |       className={clsx(
79 |         'font-light leading-relaxed',
80 |         { 'font-semibold': bold, 'text-xs': small, 'text-base': !small },
81 |         sharedStyles,
82 |         className
83 |       )}
84 |     >
85 |       {children}
86 |     </p>
87 |   )
88 | }
89 | 
90 | export default Text
91 | 


--------------------------------------------------------------------------------
/src/components/__snapshots__/Button.test.tsx.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Button matches disabled state 1`] = `
 4 | <button
 5 |   className="px-4 py-2 text-gray-500 dark:text-gray-700 bg-gray-300 dark:bg-gray-800 cursor-not-allowed"
 6 |   disabled={true}
 7 | >
 8 |   Disabled
 9 | </button>
10 | `;
11 | 
12 | exports[`Button matches loading state 1`] = `
13 | <button
14 |   className="px-4 py-2 text-gray-500 dark:text-gray-700 bg-gray-300 dark:bg-gray-800 cursor-wait"
15 |   disabled={true}
16 | >
17 |   Disabled
18 |   ...
19 | </button>
20 | `;
21 | 
22 | exports[`Button matches primary (default) type snapshot 1`] = `
23 | <button
24 |   className="px-4 py-2 text-white bg-primary hover:bg-primary-darker"
25 |   disabled={false}
26 | >
27 |   Primary
28 | </button>
29 | `;
30 | 
31 | exports[`Button matches secondary type snapshot 1`] = `
32 | <button
33 |   className="px-4 py-2 text-white bg-secondary hover:bg-secondary-darker"
34 |   disabled={false}
35 | >
36 |   Secondary
37 | </button>
38 | `;
39 | 
40 | exports[`Button matches with external className as object 1`] = `
41 | <button
42 |   className="px-4 py-2 text-white bg-primary hover:bg-primary-darker external-classname-true"
43 |   disabled={false}
44 | >
45 |   Hello
46 | </button>
47 | `;
48 | 
49 | exports[`Button matches with external className as string 1`] = `
50 | <button
51 |   className="px-4 py-2 text-white bg-primary hover:bg-primary-darker external-classname"
52 |   disabled={false}
53 | >
54 |   Hello
55 | </button>
56 | `;
57 | 


--------------------------------------------------------------------------------
/src/components/__snapshots__/Card.test.tsx.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Card matches snapshot 1`] = `
 4 | <div
 5 |   className="rounded shadow-md p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"
 6 | >
 7 |   <h1>
 8 |     hello world
 9 |   </h1>
10 | </div>
11 | `;
12 | 


--------------------------------------------------------------------------------
/src/components/__snapshots__/Dropdown.test.tsx.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Dropdown matches snapshot 1`] = `
 4 | <div
 5 |   className="relative inline-block"
 6 | >
 7 |   <button
 8 |     className="p-2 rounded-full hover:bg-primary hover:bg-opacity-25"
 9 |     onClick={[Function]}
10 |   >
11 |     menu
12 |   </button>
13 | </div>
14 | `;
15 | 


--------------------------------------------------------------------------------
/src/components/__snapshots__/Input.test.tsx.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`Input matches custom class names snapshot 1`] = `
  4 | <div
  5 |   className="custom-class"
  6 | >
  7 |   <div
  8 |     className="flex items-center rounded-sm border border-gray-400 focus-within:border-gray-600 dark:border-gray-700 dark-focus-within:border-gray-600 text-black dark:text-white"
  9 |   >
 10 |     <input
 11 |       className="bg-transparent w-full py-1 px-2"
 12 |     />
 13 |   </div>
 14 | </div>
 15 | `;
 16 | 
 17 | exports[`Input matches default snapshot 1`] = `
 18 | <div
 19 |   className=""
 20 | >
 21 |   <div
 22 |     className="flex items-center rounded-sm border border-gray-400 focus-within:border-gray-600 dark:border-gray-700 dark-focus-within:border-gray-600 text-black dark:text-white"
 23 |   >
 24 |     <input
 25 |       className="bg-transparent w-full py-1 px-2"
 26 |       placeholder="email"
 27 |     />
 28 |   </div>
 29 | </div>
 30 | `;
 31 | 
 32 | exports[`Input matches disabled snapshot 1`] = `
 33 | <div
 34 |   className=""
 35 | >
 36 |   <div
 37 |     className="flex items-center rounded-sm border border-dashed bg-gray-300 dark:bg-gray-800 border-gray-400 focus-within:border-gray-600 dark:border-gray-700 dark-focus-within:border-gray-600 text-black dark:text-white"
 38 |   >
 39 |     <input
 40 |       className="bg-transparent w-full py-1 px-2 cursor-not-allowed"
 41 |       disabled={true}
 42 |       placeholder="email"
 43 |     />
 44 |   </div>
 45 | </div>
 46 | `;
 47 | 
 48 | exports[`Input matches with error snapshot 1`] = `
 49 | <div
 50 |   className=""
 51 | >
 52 |   <div
 53 |     className="flex items-center rounded-sm border border-red-600 text-red-600"
 54 |   >
 55 |     <input
 56 |       className="bg-transparent w-full py-1 px-2"
 57 |       placeholder="email"
 58 |     />
 59 |   </div>
 60 |   <div
 61 |     className="pl-2 mt-1 text-xs text-red-600 font-light"
 62 |   >
 63 |     there is an error
 64 |   </div>
 65 | </div>
 66 | `;
 67 | 
 68 | exports[`Input matches with help text 1`] = `
 69 | <div
 70 |   className=""
 71 | >
 72 |   <div
 73 |     className="flex items-center rounded-sm border border-gray-400 focus-within:border-gray-600 dark:border-gray-700 dark-focus-within:border-gray-600 text-black dark:text-white"
 74 |   >
 75 |     <input
 76 |       className="bg-transparent w-full py-1 px-2"
 77 |     />
 78 |   </div>
 79 |   <div
 80 |     className="pl-2 mt-1 text-xs text-gray-600 font-light"
 81 |   >
 82 |     my help text
 83 |   </div>
 84 | </div>
 85 | `;
 86 | 
 87 | exports[`Input matches with icon snapshot 1`] = `
 88 | <div
 89 |   className=""
 90 | >
 91 |   <div
 92 |     className="flex items-center rounded-sm border border-gray-400 focus-within:border-gray-600 dark:border-gray-700 dark-focus-within:border-gray-600 text-black dark:text-white"
 93 |   >
 94 |     <FiMail
 95 |       className="ml-2"
 96 |     />
 97 |     <input
 98 |       className="bg-transparent w-full py-1 px-2"
 99 |       placeholder="email"
100 |     />
101 |   </div>
102 | </div>
103 | `;
104 | 


--------------------------------------------------------------------------------
/src/components/__snapshots__/List.test.tsx.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`List matches empty ol snapshot 1`] = `
 4 | <ol
 5 |   className="list-inside leading-loose list-decimal text-base text-gray-700 dark:text-gray-300"
 6 | >
 7 |   items
 8 | </ol>
 9 | `;
10 | 
11 | exports[`List matches empty ol snapshot 2`] = `
12 | <ol
13 |   className="list-inside leading-loose list-decimal text-base text-gray-700 dark:text-gray-300"
14 | >
15 |   <List
16 |     item={true}
17 |   >
18 |     item text
19 |   </List>
20 |   <List
21 |     item={true}
22 |   >
23 |     item text
24 |   </List>
25 | </ol>
26 | `;
27 | 
28 | exports[`List matches empty ul snapshot 1`] = `
29 | <ul
30 |   className="list-inside leading-loose list-disc text-base text-gray-700 dark:text-gray-300"
31 | >
32 |   items
33 | </ul>
34 | `;
35 | 
36 | exports[`List matches li snapshot 1`] = `
37 | <li
38 |   className="text-base text-gray-700 dark:text-gray-300"
39 | >
40 |   item text
41 | </li>
42 | `;
43 | 
44 | exports[`List matches ul with item snapshot 1`] = `
45 | <ul
46 |   className="list-inside leading-loose list-disc text-base text-gray-700 dark:text-gray-300"
47 | >
48 |   <List
49 |     item={true}
50 |   >
51 |     item text
52 |   </List>
53 |   <List
54 |     item={true}
55 |   >
56 |     item text
57 |   </List>
58 | </ul>
59 | `;
60 | 


--------------------------------------------------------------------------------
/src/components/__snapshots__/Text.test.tsx.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`Text matches bold snapshot 1`] = `
 4 | <p
 5 |   className="font-light leading-relaxed font-semibold text-base text-gray-700 dark:text-gray-300"
 6 | >
 7 |   Bold text
 8 | </p>
 9 | `;
10 | 
11 | exports[`Text matches default text snapshot 1`] = `
12 | <p
13 |   className="font-light leading-relaxed text-base text-gray-700 dark:text-gray-300"
14 | >
15 |   This is a paragraph
16 | </p>
17 | `;
18 | 
19 | exports[`Text matches h1 snapshot 1`] = `
20 | <h1
21 |   className="text-5xl text-gray-900 dark:text-gray-100 font-black"
22 | >
23 |   Header 1
24 | </h1>
25 | `;
26 | 
27 | exports[`Text matches h2 snapshot 1`] = `
28 | <h2
29 |   className="text-4xl text-gray-900 dark:text-gray-100 font-black"
30 | >
31 |   Header 2
32 | </h2>
33 | `;
34 | 
35 | exports[`Text matches h3 snapshot 1`] = `
36 | <h3
37 |   className="text-3xl text-gray-900 dark:text-gray-100 font-black"
38 | >
39 |   Header 3
40 | </h3>
41 | `;
42 | 
43 | exports[`Text matches h4 snapshot 1`] = `
44 | <h4
45 |   className="text-2xl text-gray-900 dark:text-gray-100 font-black"
46 | >
47 |   Header 4
48 | </h4>
49 | `;
50 | 
51 | exports[`Text matches h5 snapshot 1`] = `
52 | <h5
53 |   className="text-xl text-gray-900 dark:text-gray-100 font-black"
54 | >
55 |   Header 5
56 | </h5>
57 | `;
58 | 
59 | exports[`Text matches h6 snapshot 1`] = `
60 | <h6
61 |   className="text-lg text-gray-900 dark:text-gray-100 font-black"
62 | >
63 |   Header 6
64 | </h6>
65 | `;
66 | 
67 | exports[`Text matches small snapshot 1`] = `
68 | <small
69 |   className="text-xs text-gray-700 dark:text-gray-300"
70 | >
71 |   Small text
72 | </small>
73 | `;
74 | 


--------------------------------------------------------------------------------
/src/components/layout/AppHeader.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { shallow } from 'enzyme'
 3 | import toJson from 'enzyme-to-json'
 4 | 
 5 | import AppHeader from './AppHeader'
 6 | 
 7 | describe('AppHeader', () => {
 8 |   it('matches snapshot', () => {
 9 |     const wrapper = shallow(<AppHeader />)
10 |     expect(toJson(wrapper)).toMatchSnapshot()
11 |   })
12 | })
13 | 


--------------------------------------------------------------------------------
/src/components/layout/AppHeader.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import clsx from 'clsx'
 3 | import Link from 'next/link'
 4 | import dynamic from 'next/dynamic'
 5 | import Dropdown from '@components/Dropdown'
 6 | import routes from '@utils/routes'
 7 | import { FiMoreHorizontal } from 'react-icons/fi'
 8 | import { AiOutlineFontColors } from 'react-icons/ai'
 9 | import { MdFeaturedPlayList } from 'react-icons/md'
10 | 
11 | const ThemeSwitch = dynamic(() => import('@components/layout/ThemeSwitch'), {
12 |   ssr: false,
13 | })
14 | 
15 | export interface Props {
16 |   className?: string | Record<string, unknown>
17 | }
18 | 
19 | const AppHeader: React.FC<Props> = ({ className }) => {
20 |   return (
21 |     <header
22 |       className={clsx(
23 |         'bg-white dark:bg-gray-800 py-2 px-3 flex items-center sticky top-0',
24 |         className
25 |       )}
26 |     >
27 |       <div className="mr-auto flex items-center">
28 |         <Link {...routes.INDEX}>
29 |           <a
30 |             title="home"
31 |             className="flex-grow text-xl font-black text-black dark:text-white dark:hover:text-black"
32 |           >
33 |             My Project
34 |           </a>
35 |         </Link>
36 |       </div>
37 |       <div>
38 |         <Dropdown buttonLabel={<FiMoreHorizontal />}>
39 |           <ul className="w-40 space-y-4 py-2 text-sm">
40 |             <li>
41 |               <Link {...routes.COMPONENTS}>
42 |                 <a className="text-primary hover:underline" title="components">
43 |                   <MdFeaturedPlayList className="inline mr-2" />
44 |                   Components
45 |                 </a>
46 |               </Link>
47 |             </li>
48 |             <li>
49 |               <Link {...routes.TYPOGRAPHY}>
50 |                 <a className="text-primary hover:underline" title="Typography">
51 |                   <AiOutlineFontColors className="inline mr-2" />
52 |                   Typography
53 |                 </a>
54 |               </Link>
55 |             </li>
56 |             <li>
57 |               <hr className="dark:border-gray-700" />
58 |             </li>
59 |             <li className="flex items-center justify-between">
60 |               <span className="mr-auto text-gray-600">Theme</span>
61 |               <ThemeSwitch />
62 |             </li>
63 |           </ul>
64 |         </Dropdown>
65 |       </div>
66 |     </header>
67 |   )
68 | }
69 | 
70 | export default AppHeader
71 | 


--------------------------------------------------------------------------------
/src/components/layout/Layout.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { shallow } from 'enzyme'
 3 | import toJson from 'enzyme-to-json'
 4 | import Layout from './Layout'
 5 | 
 6 | describe('Layout', () => {
 7 |   it('matches snapshot', () => {
 8 |     const wrapper = shallow(
 9 |       <Layout>
10 |         <h1>hello world</h1>
11 |       </Layout>
12 |     )
13 |     expect(toJson(wrapper)).toMatchSnapshot()
14 |   })
15 | 
16 |   it('matches snapshot with title', () => {
17 |     const wrapper = shallow(
18 |       <Layout title="My Awesome App">
19 |         <h1>hello world</h1>
20 |       </Layout>
21 |     )
22 |     expect(toJson(wrapper)).toMatchSnapshot()
23 |   })
24 | 
25 |   it('matches snapshot with custom className', () => {
26 |     const wrapper = shallow(
27 |       <Layout className="py-4 mx-3">
28 |         <h1>hello world</h1>
29 |       </Layout>
30 |     )
31 |     expect(toJson(wrapper)).toMatchSnapshot()
32 |   })
33 | })
34 | 


--------------------------------------------------------------------------------
/src/components/layout/Layout.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import clsx from 'clsx'
 3 | import Head from 'next/head'
 4 | import AppHeader from '@components/layout/AppHeader'
 5 | 
 6 | export interface Props {
 7 |   title?: string
 8 |   className?: string | Record<string, unknown>
 9 | }
10 | 
11 | const Layout: React.FC<Props> = ({
12 |   title = 'NextJS with TypeScript and TailwindCSS',
13 |   className,
14 |   children,
15 | }) => {
16 |   return (
17 |     <>
18 |       <Head>
19 |         <title>{title}</title>
20 |       </Head>
21 |       <div className="min-h-screen flex flex-col">
22 |         <AppHeader />
23 |         <main className={clsx('flex-grow', className)}>{children}</main>
24 |         <footer className="text-xs text-center text-gray-600 py-4 px-3">
25 |           Made with ♥ by{' '}
26 |           <a href="https://www.twitter.com/lailo_ch">@lailo_ch</a>
27 |         </footer>
28 |       </div>
29 |     </>
30 |   )
31 | }
32 | 
33 | export default Layout
34 | 


--------------------------------------------------------------------------------
/src/components/layout/LayoutMDX.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { shallow } from 'enzyme'
 3 | import toJson from 'enzyme-to-json'
 4 | import LayoutMDX from './LayoutMDX'
 5 | 
 6 | describe('LayoutMDX', () => {
 7 |   it('matches snapshot', () => {
 8 |     const wrapper = shallow(<LayoutMDX>hello world</LayoutMDX>)
 9 |     expect(toJson(wrapper)).toMatchSnapshot()
10 |   })
11 | })
12 | 


--------------------------------------------------------------------------------
/src/components/layout/LayoutMDX.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { MDXProvider } from '@mdx-js/react'
 3 | import Layout, { Props as LayoutProps } from './Layout'
 4 | import Text from '@components/Text'
 5 | import List from '@components/List'
 6 | 
 7 | const components = {
 8 |   h1: ({ children }) => (
 9 |     <Text h1 className="mb-4">
10 |       {children}
11 |     </Text>
12 |   ),
13 |   h2: ({ children }) => (
14 |     <Text h2 className="mb-4">
15 |       {children}
16 |     </Text>
17 |   ),
18 |   h3: ({ children }) => (
19 |     <Text h3 className="mb-4">
20 |       {children}
21 |     </Text>
22 |   ),
23 |   h4: ({ children }) => (
24 |     <Text h4 className="mb-4">
25 |       {children}
26 |     </Text>
27 |   ),
28 |   h5: ({ children }) => (
29 |     <Text h5 className="mb-4">
30 |       {children}
31 |     </Text>
32 |   ),
33 |   h6: ({ children }) => (
34 |     <Text h6 className="mb-4">
35 |       {children}
36 |     </Text>
37 |   ),
38 |   p: ({ children }) => <Text className="mb-4">{children}</Text>,
39 |   strong: ({ children }) => (
40 |     <Text bold className="mb-4">
41 |       {children}
42 |     </Text>
43 |   ),
44 |   sub: ({ children }) => (
45 |     <Text small className="mb-4">
46 |       {children}
47 |     </Text>
48 |   ),
49 |   ul: ({ children }) => <List className="mb-4">{children}</List>,
50 |   ol: ({ children }) => (
51 |     <List ordered className="mb-4">
52 |       {children}
53 |     </List>
54 |   ),
55 |   li: ({ children }) => <List item>{children}</List>,
56 | }
57 | 
58 | const LayoutMDX: React.FC<LayoutProps> = ({ children, ...props }) => {
59 |   return (
60 |     <Layout {...props}>
61 |       <MDXProvider components={components}>{children}</MDXProvider>
62 |     </Layout>
63 |   )
64 | }
65 | 
66 | export default LayoutMDX
67 | 


--------------------------------------------------------------------------------
/src/components/layout/ThemeSwitch.test.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { shallow } from 'enzyme'
 3 | import toJson from 'enzyme-to-json'
 4 | 
 5 | import ThemeSwitch from './ThemeSwitch'
 6 | 
 7 | describe('ThemeSwitch', () => {
 8 |   it('matches snapshot', () => {
 9 |     const wrapper = shallow(<ThemeSwitch />)
10 |     expect(toJson(wrapper)).toMatchSnapshot()
11 |   })
12 | })
13 | 


--------------------------------------------------------------------------------
/src/components/layout/ThemeSwitch.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import Switch from 'react-switch'
 3 | import { FiMoon, FiSun } from 'react-icons/fi'
 4 | import useDarkMode from 'use-dark-mode'
 5 | 
 6 | const MODE_TRANSITION_CLASS_NAME = 'dark-mode-transition'
 7 | const MODE_TRANSITION_DURATION = 500
 8 | 
 9 | function setDarkModeTransition() {
10 |   document.documentElement.classList.add(MODE_TRANSITION_CLASS_NAME)
11 |   setTimeout(
12 |     () => document.documentElement.classList.remove(MODE_TRANSITION_CLASS_NAME),
13 |     MODE_TRANSITION_DURATION
14 |   )
15 | }
16 | 
17 | const ThemeSwitch: React.FC = () => {
18 |   const { value: hasActiveDarkMode, toggle: activateDarkMode } = useDarkMode()
19 | 
20 |   const toggleDarkMode = () => {
21 |     setDarkModeTransition()
22 |     activateDarkMode()
23 |   }
24 | 
25 |   return (
26 |     <Switch
27 |       onChange={toggleDarkMode}
28 |       checked={hasActiveDarkMode}
29 |       checkedIcon={<FiMoon className="inline-block mx-2 my-1" />}
30 |       uncheckedIcon={<FiSun className="inline-block mx-2 my-1" />}
31 |       onColor="#1a202c"
32 |       offColor="#f7fafc"
33 |       onHandleColor="#f7fafc"
34 |       offHandleColor="#1a202c"
35 |       className="text-gray-900 dark:text-gray-100 border border-gray-400 dark:border-0"
36 |     />
37 |   )
38 | }
39 | 
40 | export default ThemeSwitch
41 | 


--------------------------------------------------------------------------------
/src/components/layout/__snapshots__/AppHeader.test.tsx.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`AppHeader matches snapshot 1`] = `
 4 | <header
 5 |   className="bg-white dark:bg-gray-800 py-2 px-3 flex items-center sticky top-0"
 6 | >
 7 |   <div
 8 |     className="mr-auto flex items-center"
 9 |   >
10 |     <Link
11 |       as="/"
12 |       href="/"
13 |     >
14 |       <a
15 |         className="flex-grow text-xl font-black text-black dark:text-white dark:hover:text-black"
16 |         title="home"
17 |       >
18 |         My Project
19 |       </a>
20 |     </Link>
21 |   </div>
22 |   <div>
23 |     <Dropdown
24 |       buttonLabel={<FiMoreHorizontal />}
25 |     >
26 |       <ul
27 |         className="w-40 space-y-4 py-2 text-sm"
28 |       >
29 |         <li>
30 |           <Link
31 |             as="/components"
32 |             href="/components"
33 |           >
34 |             <a
35 |               className="text-primary hover:underline"
36 |               title="components"
37 |             >
38 |               <MdFeaturedPlayList
39 |                 className="inline mr-2"
40 |               />
41 |               Components
42 |             </a>
43 |           </Link>
44 |         </li>
45 |         <li>
46 |           <Link
47 |             as="/typography"
48 |             href="/typography"
49 |           >
50 |             <a
51 |               className="text-primary hover:underline"
52 |               title="Typography"
53 |             >
54 |               <AiOutlineFontColors
55 |                 className="inline mr-2"
56 |               />
57 |               Typography
58 |             </a>
59 |           </Link>
60 |         </li>
61 |         <li>
62 |           <hr
63 |             className="dark:border-gray-700"
64 |           />
65 |         </li>
66 |         <li
67 |           className="flex items-center justify-between"
68 |         >
69 |           <span
70 |             className="mr-auto text-gray-600"
71 |           >
72 |             Theme
73 |           </span>
74 |           <ForwardRef(LoadableComponent) />
75 |         </li>
76 |       </ul>
77 |     </Dropdown>
78 |   </div>
79 | </header>
80 | `;
81 | 


--------------------------------------------------------------------------------
/src/components/layout/__snapshots__/Layout.test.tsx.snap:
--------------------------------------------------------------------------------
  1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
  2 | 
  3 | exports[`Layout matches snapshot 1`] = `
  4 | <Fragment>
  5 |   <Head>
  6 |     <title>
  7 |       NextJS with TypeScript and TailwindCSS
  8 |     </title>
  9 |   </Head>
 10 |   <div
 11 |     className="min-h-screen flex flex-col"
 12 |   >
 13 |     <AppHeader />
 14 |     <main
 15 |       className="flex-grow"
 16 |     >
 17 |       <h1>
 18 |         hello world
 19 |       </h1>
 20 |     </main>
 21 |     <footer
 22 |       className="text-xs text-center text-gray-600 py-4 px-3"
 23 |     >
 24 |       Made with ♥ by
 25 |        
 26 |       <a
 27 |         href="https://www.twitter.com/lailo_ch"
 28 |       >
 29 |         @lailo_ch
 30 |       </a>
 31 |     </footer>
 32 |   </div>
 33 | </Fragment>
 34 | `;
 35 | 
 36 | exports[`Layout matches snapshot with custom className 1`] = `
 37 | <Fragment>
 38 |   <Head>
 39 |     <title>
 40 |       NextJS with TypeScript and TailwindCSS
 41 |     </title>
 42 |   </Head>
 43 |   <div
 44 |     className="min-h-screen flex flex-col"
 45 |   >
 46 |     <AppHeader />
 47 |     <main
 48 |       className="flex-grow py-4 mx-3"
 49 |     >
 50 |       <h1>
 51 |         hello world
 52 |       </h1>
 53 |     </main>
 54 |     <footer
 55 |       className="text-xs text-center text-gray-600 py-4 px-3"
 56 |     >
 57 |       Made with ♥ by
 58 |        
 59 |       <a
 60 |         href="https://www.twitter.com/lailo_ch"
 61 |       >
 62 |         @lailo_ch
 63 |       </a>
 64 |     </footer>
 65 |   </div>
 66 | </Fragment>
 67 | `;
 68 | 
 69 | exports[`Layout matches snapshot with title 1`] = `
 70 | <Fragment>
 71 |   <Head>
 72 |     <title>
 73 |       My Awesome App
 74 |     </title>
 75 |   </Head>
 76 |   <div
 77 |     className="min-h-screen flex flex-col"
 78 |   >
 79 |     <AppHeader />
 80 |     <main
 81 |       className="flex-grow"
 82 |     >
 83 |       <h1>
 84 |         hello world
 85 |       </h1>
 86 |     </main>
 87 |     <footer
 88 |       className="text-xs text-center text-gray-600 py-4 px-3"
 89 |     >
 90 |       Made with ♥ by
 91 |        
 92 |       <a
 93 |         href="https://www.twitter.com/lailo_ch"
 94 |       >
 95 |         @lailo_ch
 96 |       </a>
 97 |     </footer>
 98 |   </div>
 99 | </Fragment>
100 | `;
101 | 


--------------------------------------------------------------------------------
/src/components/layout/__snapshots__/LayoutMDX.test.tsx.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`LayoutMDX matches snapshot 1`] = `
 4 | <Layout>
 5 |   <MDXProvider
 6 |     components={
 7 |       Object {
 8 |         "h1": [Function],
 9 |         "h2": [Function],
10 |         "h3": [Function],
11 |         "h4": [Function],
12 |         "h5": [Function],
13 |         "h6": [Function],
14 |         "li": [Function],
15 |         "ol": [Function],
16 |         "p": [Function],
17 |         "strong": [Function],
18 |         "sub": [Function],
19 |         "ul": [Function],
20 |       }
21 |     }
22 |   >
23 |     hello world
24 |   </MDXProvider>
25 | </Layout>
26 | `;
27 | 


--------------------------------------------------------------------------------
/src/components/layout/__snapshots__/ThemeSwitch.test.tsx.snap:
--------------------------------------------------------------------------------
 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
 2 | 
 3 | exports[`ThemeSwitch matches snapshot 1`] = `
 4 | <ReactSwitch
 5 |   activeBoxShadow="0 0 2px 3px #3bf"
 6 |   boxShadow={null}
 7 |   checked={false}
 8 |   checkedIcon={
 9 |     <FiMoon
10 |       className="inline-block mx-2 my-1"
11 |     />
12 |   }
13 |   className="text-gray-900 dark:text-gray-100 border border-gray-400 dark:border-0"
14 |   disabled={false}
15 |   height={28}
16 |   offColor="#f7fafc"
17 |   offHandleColor="#1a202c"
18 |   onChange={[Function]}
19 |   onColor="#1a202c"
20 |   onHandleColor="#f7fafc"
21 |   uncheckedIcon={
22 |     <FiSun
23 |       className="inline-block mx-2 my-1"
24 |     />
25 |   }
26 |   width={56}
27 | />
28 | `;
29 | 


--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import Router from 'next/router'
 3 | import { AppProps } from 'next/app'
 4 | import NProgress from 'nprogress'
 5 | 
 6 | import '@styles/main.css'
 7 | import '@styles/nprogress.css'
 8 | 
 9 | Router.events.on('routeChangeStart', () => NProgress.start())
10 | Router.events.on('routeChangeComplete', () => NProgress.done())
11 | Router.events.on('routeChangeError', () => NProgress.done())
12 | 
13 | const App: React.FC<AppProps> = ({ Component, pageProps }) => {
14 |   return <Component {...pageProps} />
15 | }
16 | 
17 | export default App
18 | 


--------------------------------------------------------------------------------
/src/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import NextDocument, {
 3 |   Html,
 4 |   Head,
 5 |   Main,
 6 |   NextScript,
 7 |   DocumentContext,
 8 | } from 'next/document'
 9 | 
10 | class Document extends NextDocument {
11 |   static async getInitialProps(context: DocumentContext) {
12 |     const initialProps = await NextDocument.getInitialProps(context)
13 |     return { ...initialProps }
14 |   }
15 | 
16 |   render() {
17 |     return (
18 |       <Html lang="en">
19 |         <Head>
20 |           <meta charSet="utf-8" />
21 |           <meta
22 |             name="viewport"
23 |             content="initial-scale=1.0, width=device-width"
24 |           />
25 |           <link
26 |             href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;800&display=swap"
27 |             rel="stylesheet"
28 |           />
29 |         </Head>
30 |         <body className="min-h-screen">
31 |           <script
32 |             dangerouslySetInnerHTML={{
33 |               __html: `
34 |                 (function() {
35 |                   var storageKey = 'darkMode';
36 |                   var classNameDark = 'dark-mode';
37 |                   var classNameLight = 'light-mode';
38 |                 
39 |                   function setClassOnDocumentBody(darkMode) {
40 |                     document.body.classList.add(darkMode ? classNameDark : classNameLight);
41 |                     document.body.classList.remove(darkMode ? classNameLight : classNameDark);
42 |                   }
43 |                   
44 |                   var preferDarkQuery = '(prefers-color-scheme: dark)';
45 |                   var mql = window.matchMedia(preferDarkQuery);
46 |                   var supportsColorSchemeQuery = mql.media === preferDarkQuery;
47 |                   var localStorageTheme = null;
48 | 
49 |                   try {
50 |                     localStorageTheme = localStorage.getItem(storageKey);
51 |                   } catch (err) {}
52 | 
53 |                   var localStorageExists = localStorageTheme !== null;
54 |                   if (localStorageExists) {
55 |                     localStorageTheme = JSON.parse(localStorageTheme);
56 |                   }
57 |                 
58 |                   if (localStorageExists) {
59 |                     setClassOnDocumentBody(localStorageTheme);
60 |                   } else if (supportsColorSchemeQuery) {
61 |                     setClassOnDocumentBody(mql.matches);
62 |                     localStorage.setItem(storageKey, mql.matches);
63 |                   } else {
64 |                     var isDarkMode = document.body.classList.contains(classNameDark);
65 |                     localStorage.setItem(storageKey, JSON.stringify(isDarkMode));
66 |                   }
67 |                 })();
68 |               `,
69 |             }}
70 |           />
71 |           <Main />
72 |           <NextScript />
73 |         </body>
74 |       </Html>
75 |     )
76 |   }
77 | }
78 | 
79 | export default Document
80 | 


--------------------------------------------------------------------------------
/src/pages/components.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { NextPage } from 'next'
 3 | import { FiMail, FiLock, FiUser, FiMoreHorizontal } from 'react-icons/fi'
 4 | import Layout from '@components/layout/Layout'
 5 | import Button from '@components/Button'
 6 | import Input from '@components/Input'
 7 | import Text from '@components/Text'
 8 | import List from '@components/List'
 9 | import Card from '@components/Card'
10 | import Dropdown from '@components/Dropdown'
11 | 
12 | const ComponentsPage: NextPage = () => {
13 |   return (
14 |     <Layout title="Components" className="container py-8 max-w-xl">
15 |       <section className="mb-20">
16 |         <h2 className="dark:text-gray-100 text-2xl font-thin mb-6">Buttons</h2>
17 |         <div>
18 |           <Button className="mr-1">Primary</Button>
19 |           <Button className="mr-1" type="secondary">
20 |             Secondary
21 |           </Button>
22 |           <Button className="mr-1" disabled>
23 |             Disabled
24 |           </Button>
25 |           <Button className="mr-1" loading>
26 |             Loading
27 |           </Button>
28 |         </div>
29 |       </section>
30 | 
31 |       <section className="mb-20">
32 |         <h2 className="dark:text-gray-100 text-2xl font-thin mb-6">Inputs</h2>
33 |         <Input placeholder="username" startIcon={FiUser} className="mb-4" />
34 |         <Input placeholder="email" startIcon={FiMail} className="mb-4" />
35 |         <Input placeholder="without icon" className="mb-4" />
36 |         <Input placeholder="disabled" disabled className="mb-4" />
37 |         <Input
38 |           defaultValue="with error"
39 |           startIcon={FiMail}
40 |           errorMessage="Email is not correct"
41 |           className="mb-4"
42 |         />
43 |         <Input
44 |           placeholder="lailo-ch"
45 |           label="Username"
46 |           className="mb-4"
47 |           startIcon={FiUser}
48 |         />
49 |         <Input
50 |           placeholder="lailo-ch"
51 |           label="With Help"
52 |           className="mb-4"
53 |           helpText="Add some content here"
54 |         />
55 |       </section>
56 | 
57 |       <section className="mb-20">
58 |         <h2 className="dark:text-gray-100 text-2xl font-thin mb-6">Dropdown</h2>
59 |         <Dropdown buttonLabel={<FiMoreHorizontal />}>
60 |           <ul className="w-32">
61 |             <li>hello world</li>
62 |             <li>how's it going</li>
63 |           </ul>
64 |         </Dropdown>
65 |       </section>
66 | 
67 |       <section className="mb-20">
68 |         <h2 className="dark:text-gray-100 text-2xl font-thin mb-6">Card</h2>
69 |         <Card>
70 |           <Text h6 className="mb-4">
71 |             Welcome Back
72 |           </Text>
73 |           <Input
74 |             placeholder="email"
75 |             startIcon={FiMail}
76 |             label="eMail"
77 |             className="mb-4"
78 |           />
79 |           <Input
80 |             placeholder="****"
81 |             startIcon={FiLock}
82 |             label="Password"
83 |             className="mb-4"
84 |           />
85 |           <Button className="mr-1">Sign In</Button>
86 |         </Card>
87 |       </section>
88 |     </Layout>
89 |   )
90 | }
91 | 
92 | export default ComponentsPage
93 | 


--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | import { NextPage } from 'next'
 3 | import Layout from '@components/layout/Layout'
 4 | import routes from '@utils/routes'
 5 | import Link from 'next/link'
 6 | import { FiArrowRight } from 'react-icons/fi'
 7 | 
 8 | const IndexPage: NextPage = () => {
 9 |   return (
10 |     <Layout title="Your Awesome App" className="container py-8 max-w-xl">
11 |       <h1 className="dark:text-gray-100 text-3xl font-black mb-4">Welcome</h1>
12 |       <p className="mb-4 font-light text-lg">
13 |         This is an template project using NextJS with TailwindCSS including dark
14 |         mode switcher.
15 |       </p>
16 |       <p className="mb-6 font-light text-lg">
17 |         It includes some example components with jest testing and typography but
18 |         it's not complete nor is it tested well.
19 |       </p>
20 |       <div className="space-x-4">
21 |         <Link {...routes.COMPONENTS}>
22 |           <a
23 |             className="bg-primary hover:bg-primary-darker text-white px-4 py-2"
24 |             title="components"
25 |           >
26 |             Components <FiArrowRight className="inline ml-1" />
27 |           </a>
28 |         </Link>
29 |         <Link {...routes.TYPOGRAPHY}>
30 |           <a
31 |             className="bg-secondary hover:bg-secondary-darker text-white px-4 py-2"
32 |             title="Typography"
33 |           >
34 |             Typography <FiArrowRight className="inline ml-1" />
35 |           </a>
36 |         </Link>
37 |       </div>
38 |     </Layout>
39 |   )
40 | }
41 | 
42 | export default IndexPage
43 | 


--------------------------------------------------------------------------------
/src/pages/typography.mdx:
--------------------------------------------------------------------------------
 1 | import LayoutMDX from '@components/layout/LayoutMDX'
 2 | 
 3 | <LayoutMDX title="Your Awesome App" className="container py-8 max-w-xl">
 4 | 
 5 | # header 1
 6 | 
 7 | ## header 2
 8 | 
 9 | ### header 3
10 | 
11 | #### header 4
12 | 
13 | ##### header 5
14 | 
15 | ###### header 6
16 | 
17 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
18 | 
19 | <sub>Small text</sub>
20 | 
21 | **bold**
22 | 
23 | - item 1
24 | - item 2
25 | - item 3
26 | 
27 | 1. first
28 | 2. second
29 | 
30 | </LayoutMDX>
31 | 


--------------------------------------------------------------------------------
/src/styles/main.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | .dark-mode-transition * {
 6 |   @apply transition duration-500 ease-in-out;
 7 | }
 8 | 
 9 | body {
10 |   @apply bg-gray-200;
11 |   @apply text-black;
12 |   @apply font-body;
13 | }
14 | 
15 | body.dark-mode {
16 |   @apply bg-gray-900;
17 |   @apply text-white;
18 | }
19 | 
20 | h1,h2,h3,h4,h5,h6 {
21 |   @apply font-header;
22 | }


--------------------------------------------------------------------------------
/src/styles/nprogress.css:
--------------------------------------------------------------------------------
 1 | #nprogress {
 2 |   pointer-events: none;
 3 | }
 4 | 
 5 | #nprogress .bar {
 6 |   @apply bg-primary;
 7 |   @apply fixed top-0 left-0;
 8 |   @apply z-50;
 9 |   @apply w-full h-1;
10 | }
11 | 


--------------------------------------------------------------------------------
/src/utils/routes.ts:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   INDEX: {
 3 |     href: '/',
 4 |     as: '/',
 5 |   },
 6 |   COMPONENTS: {
 7 |     href: '/components',
 8 |     as: '/components',
 9 |   },
10 |   TYPOGRAPHY: {
11 |     href: '/typography',
12 |     as: '/typography',
13 |   },
14 | }
15 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: ['./src/components/**/*.tsx', './src/pages/**/*.tsx'],
 3 |   theme: {
 4 |     darkSelector: '.dark-mode',
 5 |     container: {
 6 |       center: true,
 7 |       padding: '1rem',
 8 |     },
 9 |     fontFamily: {
10 |       header: ['Open Sans', 'sans-serif'],
11 |       body: ['Open Sans', 'sans-serif'],
12 |     },
13 |     extend: {
14 |       colors: {
15 |         primary: {
16 |           lighter: '#4FD1C5',
17 |           default: '#38B2AC',
18 |           darker: '#319795',
19 |         },
20 |         secondary: {
21 |           lighter: '#63B3ED',
22 |           default: '#4299E1',
23 |           darker: '#3182CE',
24 |         },
25 |       },
26 |     },
27 |   },
28 |   variants: {
29 |     backgroundColor: ['dark', 'responsive', 'hover', 'focus'],
30 |     borderColor: [
31 |       'dark',
32 |       'dark-focus-within',
33 |       'responsive',
34 |       'hover',
35 |       'focus',
36 |       'focus-within',
37 |     ],
38 |     borderWidth: ['dark', 'responsive'],
39 |     textColor: ['dark', 'responsive', 'hover', 'focus'],
40 |   },
41 |   corePlugins: {},
42 |   plugins: [require('tailwindcss-dark-mode')()],
43 | }
44 | 


--------------------------------------------------------------------------------
/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 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "baseUrl": ".",
17 |     "paths": {
18 |       "@components/*": ["src/components/*"],
19 |       "@pages/*": ["src/pages/*"],
20 |       "@styles/*": ["src/styles/*"],
21 |       "@utils/*": ["src/utils/*"]
22 |     }
23 |   },
24 |   "exclude": [
25 |     "node_modules",
26 |     "**/*.spec.ts",
27 |     "**/*.spec.tsx",
28 |     "**/*.test.ts",
29 |     "**/*.test.tsx"
30 |   ],
31 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
32 | }
33 | 


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