├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .storybook ├── config.js └── main.js ├── README.md ├── package.json ├── postcss.config.js ├── prettier.config.js ├── src ├── assets │ └── css │ │ ├── main.css │ │ └── tailwind.css ├── components │ └── Button │ │ ├── index.tsx │ │ └── styles.ts └── index.tsx ├── stories └── Button.story.tsx ├── tailwind.config.js ├── tsconfig.json ├── types └── tailwind.macro │ └── index.d.ts └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | end_of_line = lf -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | **/*.js 2 | node_modules 3 | dist 4 | build 5 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": [ 7 | "plugin:react/recommended", 8 | "airbnb", 9 | "plugin:@typescript-eslint/recommended", 10 | "prettier/@typescript-eslint", 11 | "plugin:prettier/recommended" 12 | ], 13 | "globals": { 14 | "Atomics": "readonly", 15 | "SharedArrayBuffer": "readonly" 16 | }, 17 | "parser": "@typescript-eslint/parser", 18 | "parserOptions": { 19 | "ecmaFeatures": { 20 | "jsx": true 21 | }, 22 | "ecmaVersion": 11, 23 | "sourceType": "module" 24 | }, 25 | "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"], 26 | "rules": { 27 | "prettier/prettier": "error", 28 | "react-hooks/rules-of-hooks": "error", 29 | "react-hooks/exhaustive-deps": "warn", 30 | "react/jsx-filename-extension": [1, { "extensions": [".tsx"] }], 31 | "import/prefer-default-export": "off", 32 | "import/extensions": [ 33 | "error", 34 | "ignorePackages", 35 | { 36 | "ts": "never", 37 | "tsx": "never" 38 | } 39 | ] 40 | }, 41 | "settings": { 42 | "import/resolver": { 43 | "typescript": {} 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure, addDecorator } from "@storybook/react"; 2 | import { withInfo } from "@storybook/addon-info"; 3 | import centered from "@storybook/addon-centered/react"; 4 | 5 | addDecorator(withInfo); 6 | addDecorator(centered); 7 | 8 | // automatically import all files ending in *.stories.tsx 9 | configure(require.context("../stories", true, /\.story\.tsx$/), module); 10 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | const path = require("path"); 2 | 3 | module.exports = { 4 | webpackFinal: async (config) => { 5 | (config.module.rules = [ 6 | ...config.module.rules, 7 | { 8 | test: /\.(ts|tsx)$/, 9 | include: [path.resolve(__dirname, "..")], 10 | use: [ 11 | { 12 | loader: require.resolve("babel-loader"), 13 | options: { 14 | presets: [require.resolve("babel-preset-react-app")], 15 | }, 16 | }, 17 | require.resolve("react-docgen-typescript-loader"), 18 | ], 19 | }, 20 | ]), 21 | config.resolve.extensions.push(".ts", ".tsx"); 22 | return config; 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

logo-danarocha

2 | 3 | 4 |

🔥 A simple boilerplate for creating a Design System in Storybook using React, Styled Components, Tailwind, and Typescript

5 |

6 | GitHub Last Commit 8 | 9 |

10 | 11 | ## :information_source: Getting Started 12 | 13 | These instructions will get you a copy of the project up and running on your local machine for development purposes. 14 | You will need: 15 | 16 | - NodeJS | Yarn or Npm 17 | 18 | You need to install these prerequisites on your computer before you can use the "**Boilerplate**". 19 | 20 |

NodeJS

with these instructions. 21 | 22 |

Yarn

with these instructions. 23 | 24 | 25 | ```bash 26 | # Clone the repository 27 | $ git clone https://github.com/danarocha-br/storybook-react-typescript-tailwind-styled.git 28 | 29 | # Go into the repository folder you just create and Install dependencies 30 | $ yarn install 31 | ``` 32 | 33 | ## Tasks 34 | - build:css: will build the css from tailwind.css file 35 | - watch:css: will watch every change made in your css files 36 | - storybook: will start your storybook 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-design-system", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "license": "MIT", 6 | "scripts": { 7 | "build:css": "postcss src/assets/css/tailwind.css -o src/assets/css/main.css", 8 | "watch:css": "postcss src/assets/css/tailwind.css -o src/assets/css/main.css -w", 9 | "storybook": "start-storybook -p 8080" 10 | }, 11 | "dependencies": { 12 | "styled-components": "^5.1.0" 13 | }, 14 | "devDependencies": { 15 | "@babel/core": "^7.9.6", 16 | "@storybook/addon-centered": "^5.3.18", 17 | "@storybook/addon-info": "^5.3.18", 18 | "@storybook/react": "^5.3.18", 19 | "@types/react": "^16.9.35", 20 | "@types/styled-components": "^5.1.0", 21 | "@typescript-eslint/eslint-plugin": "^2.32.0", 22 | "@typescript-eslint/parser": "^2.32.0", 23 | "autoprefixer": "^9.7.6", 24 | "babel-loader": "^8.1.0", 25 | "babel-preset-react-app": "^9.1.2", 26 | "eslint": "^6.8.0", 27 | "eslint-config-airbnb": "^18.1.0", 28 | "eslint-config-prettier": "^6.11.0", 29 | "eslint-import-resolver-typescript": "^2.0.0", 30 | "eslint-plugin-import": "^2.20.2", 31 | "eslint-plugin-jsx-a11y": "^6.2.3", 32 | "eslint-plugin-prettier": "^3.1.3", 33 | "eslint-plugin-react": "^7.19.0", 34 | "eslint-plugin-react-hooks": "^2.5.1", 35 | "postcss-cli": "^7.1.1", 36 | "postcss-import": "^12.0.1", 37 | "prettier": "^2.0.5", 38 | "react": "^16.13.1", 39 | "react-docgen-typescript-loader": "^3.7.2", 40 | "tailwind.macro": "^1.0.0-alpha.10", 41 | "tailwindcss": "^1.4.6", 42 | "typescript": "^3.8.3" 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require("postcss-import"), 4 | require("tailwindcss"), 5 | require("autoprefixer"), 6 | ], 7 | }; 8 | -------------------------------------------------------------------------------- /prettier.config.js: -------------------------------------------------------------------------------- 1 | //prettier-ignore 2 | module.exports = { 3 | trailingComma: "all", 4 | singleQuote: true, 5 | allowParens: "avoid", 6 | }; 7 | -------------------------------------------------------------------------------- /src/assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /src/components/Button/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { ButtonHTMLAttributes } from 'react'; 2 | 3 | import { Container } from './styles'; 4 | 5 | export interface ButtonProps extends ButtonHTMLAttributes { 6 | label: string; 7 | } 8 | 9 | const Button: React.FC = ({ label, ...rest }) => { 10 | return ( 11 | 12 | {label} 13 | 14 | ); 15 | }; 16 | 17 | export { Button }; 18 | -------------------------------------------------------------------------------- /src/components/Button/styles.ts: -------------------------------------------------------------------------------- 1 | import styled, { css } from 'styled-components'; 2 | import tw from 'tailwind.macro'; 3 | 4 | export const Container = styled.button` 5 | ${tw`text-white text-base font-bold text-center bg-indigo-700 rounded-full flex py-4 px-10 focus:outline-none cursor-pointer`} 6 | 7 | &:disabled { 8 | ${tw`opacity-75 cursor-not-allowed`} 9 | } 10 | 11 | &:hover:not(:disabled) { 12 | ${tw`bg-indigo-800 border-transparent shadow-xs`} 13 | } 14 | 15 | &:active:not(:disabled) { 16 | ${tw`bg-indigo-900 border-transparent shadow-xs`} 17 | } 18 | `; 19 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import './assets/css/tailwind.css'; 2 | 3 | export { Button } from './components/Button'; 4 | -------------------------------------------------------------------------------- /stories/Button.story.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | 4 | import { Button } from '../src'; 5 | 6 | storiesOf('Button', module).add('Default', () =>