= ({ 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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/.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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 |
4 | 🔥 A simple boilerplate for creating a Design System in Storybook using React, Styled Components, Tailwind, and Typescript
5 |
6 | 
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 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | //prettier-ignore
2 | {
3 | "compilerOptions": {
4 | /* Basic Options */
5 | // "incremental": true, /* Enable incremental compilation */
6 | "target": "es6", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
7 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
8 | "lib": ["dom"], /* Specify library files to be included in the compilation. */
9 | // "allowJs": true, /* Allow javascript files to be compiled. */
10 | // "checkJs": true, /* Report errors in .js files. */
11 | "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
12 | "declaration": true, /* Generates corresponding '.d.ts' file. */
13 | "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
14 | // "sourceMap": true, /* Generates corresponding '.map' file. */
15 | // "outFile": "./", /* Concatenate and emit output to single file. */
16 | "outDir": "./dist", /* Redirect output structure to the directory. */
17 | "rootDirs": ["src", "stories"], /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
18 | // "composite": true, /* Enable project compilation */
19 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
20 | // "removeComments": true, /* Do not emit comments to output. */
21 | // "noEmit": true, /* Do not emit outputs. */
22 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
23 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
24 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
25 |
26 | /* Strict Type-Checking Options */
27 | "strict": true, /* Enable all strict type-checking options. */
28 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
29 | // "strictNullChecks": true, /* Enable strict null checks. */
30 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */
31 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
32 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
33 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
34 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
35 |
36 | /* Additional Checks */
37 | // "noUnusedLocals": true, /* Report errors on unused locals. */
38 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
39 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
40 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
41 |
42 | /* Module Resolution Options */
43 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
44 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
45 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
46 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
47 | // "typeRoots": [], /* List of folders to include type definitions from. */
48 | // "types": [], /* Type declaration files to be included in compilation. */
49 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
50 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
51 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
52 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
53 |
54 | /* Source Map Options */
55 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
56 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
57 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
58 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
59 |
60 | /* Experimental Options */
61 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
62 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
63 |
64 | /* Advanced Options */
65 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
66 | }
67 | }
68 |
--------------------------------------------------------------------------------