├── .nvmrc
├── jest.setup.ts
├── browserslist
├── commitlint.config.js
├── .npmrc
├── .storybook
    ├── preview.js
    ├── typings.d.ts
    └── main.js
├── .eslintignore
├── .prettierignore
├── .stylelintignore
├── components
    ├── button
    │   └── src
    │   │   ├── index.ts
    │   │   ├── ButtonComponent.types.ts
    │   │   ├── ButtonComponent.scss
    │   │   ├── ButtonComponent.stories.tsx
    │   │   ├── ButtonComponent.tsx
    │   │   └── ButtonComponent.test.tsx
    └── Button
    │   ├── README.md
    │   └── package.json
├── .prettierrc.js
├── scripts
    ├── build.sh
    └── pre-publish.sh
├── .vscode
    ├── extensions.json
    └── settings.json
├── .stylelintrc
├── .editorconfig
├── lerna.json
├── tsconfig.json
├── jest.config.js
├── .eslintrc
├── .gitignore
├── webpack.config.js
├── LICENSE
├── README.md
├── stories
    └── 0-introduction.stories.mdx
└── package.json


/.nvmrc:
--------------------------------------------------------------------------------
1 | v10.20.1
2 | 


--------------------------------------------------------------------------------
/jest.setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 | 


--------------------------------------------------------------------------------
/browserslist:
--------------------------------------------------------------------------------
1 | > 0.5%
2 | last 2 versions
3 | Firefox ESR
4 | not dead
5 | not IE 9-11
6 | 


--------------------------------------------------------------------------------
/commitlint.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   extends: ['@commitlint/config-conventional']
3 | };
4 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | registry = https://registry.npmjs.org/
2 | # @thedesignsystem:registry=http://localhost:4873/
3 | 


--------------------------------------------------------------------------------
/.storybook/preview.js:
--------------------------------------------------------------------------------
1 | 
2 | export const parameters = {
3 |   actions: { argTypesRegex: "^on[A-Z].*" },
4 | }


--------------------------------------------------------------------------------
/.storybook/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.md' {
2 |   const content: string;
3 |   export default content;
4 | }
5 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
2 | dist/**/*
3 | coverage/**/*
4 | 
5 | **/dist
6 | **/node_modules
7 | **/coverage
8 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
2 | dist/**/*
3 | coverage/**/*
4 | 
5 | **/dist
6 | **/node_modules
7 | **/coverage
8 | 


--------------------------------------------------------------------------------
/.stylelintignore:
--------------------------------------------------------------------------------
1 | node_modules/**/*
2 | dist/**/*
3 | coverage/**/*
4 | 
5 | **/dist
6 | **/node_modules
7 | **/coverage
8 | 


--------------------------------------------------------------------------------
/components/button/src/index.ts:
--------------------------------------------------------------------------------
1 | import ButtonComponent from './ButtonComponent';
2 | 
3 | export { ButtonComponent };
4 | 


--------------------------------------------------------------------------------
/components/button/src/ButtonComponent.types.ts:
--------------------------------------------------------------------------------
1 | export interface ButtonComponentProps {
2 |   theme: 'primary' | 'secondary';
3 | }
4 | 


--------------------------------------------------------------------------------
/components/Button/README.md:
--------------------------------------------------------------------------------
1 | # Component: Button
2 | 
3 | ## Usage
4 | 
5 | Import component with: `import ButtonComponent from '@thedesignsystem/button';`
6 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   tabWidth: 2,
3 |   useTabs: false,
4 |   semi: true,
5 |   trailingComma: "all",
6 |   singleQuote: true,
7 |   endOfLine: "lf"
8 | };
9 | 


--------------------------------------------------------------------------------
/scripts/build.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | 
 3 | set -e # exit with nonzero exit code if anything fails
 4 | 
 5 | rm -rf dist
 6 | 
 7 | # Generate static storybook
 8 | mkdir dist
 9 | npm run build:storybook
10 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "recommendations": [
 3 |     "dbaeumer.vscode-eslint",
 4 |     "stylelint.vscode-stylelint",
 5 |     "editorconfig.editorconfig",
 6 |     "esbenp.prettier-vscode"
 7 |   ],
 8 |   "unwantedRecommendations": []
 9 | }
10 | 


--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["stylelint-config-recommended", "stylelint-config-prettier"],
 3 |   "plugins": ["stylelint-scss"],
 4 |   "rules": {
 5 |     "indentation": 2,
 6 |     "at-rule-no-unknown": null,
 7 |     "scss/at-rule-no-unknown": true
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/scripts/pre-publish.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env bash
2 | 
3 | set -e # exit with nonzero exit code if anything fails
4 | 
5 | # Changing name and user to differentiate commit and tag from the pipeline
6 | git config user.name "design-system-bot"
7 | git config user.email "design-system@bot.com"
8 | 


--------------------------------------------------------------------------------
/components/button/src/ButtonComponent.scss:
--------------------------------------------------------------------------------
 1 | .test-component {
 2 |   background-color: #fff;
 3 |   border: 1px solid #000;
 4 |   padding: 16px;
 5 |   width: 360px;
 6 |   text-align: center;
 7 | 
 8 |   &.test-component-secondary {
 9 |     background-color: #000;
10 |     color: #fff;
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/components/button/src/ButtonComponent.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ButtonComponent from './ButtonComponent';
 3 | 
 4 | export default {
 5 |   title: 'ButtonComponent',
 6 | };
 7 | 
 8 | export const Primary = () => <ButtonComponent theme="primary" />;
 9 | 
10 | export const Secondary = () => <ButtonComponent theme="secondary" />;
11 | 


--------------------------------------------------------------------------------
/components/button/src/ButtonComponent.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | import { ButtonComponentProps } from './ButtonComponent.types';
 4 | 
 5 | import './ButtonComponent.scss';
 6 | 
 7 | const ButtonComponent: React.FC<ButtonComponentProps> = ({ theme }) => (
 8 |   <div
 9 |     data-testid="test-component"
10 |     className={`test-component test-component-${theme}`}
11 |   >
12 |     <h1 className="heading">I'm the test component</h1>
13 |   </div>
14 | );
15 | 
16 | export default ButtonComponent;
17 | 


--------------------------------------------------------------------------------
/.storybook/main.js:
--------------------------------------------------------------------------------
 1 | const custom = require('../webpack.config.js');
 2 | 
 3 | module.exports = {
 4 |   stories: [
 5 |     '../components/**/*.stories.(ts|tsx|mdx)',
 6 |     '../stories/*.stories.(ts|tsx|mdx)',
 7 |   ],
 8 |   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
 9 |   webpackFinal: (config) => {
10 |     config.resolve.extensions.push('.ts', '.tsx');
11 |     return {
12 |       ...config,
13 |       module: { ...config.module, rules: custom.module.rules },
14 |     };
15 |   },
16 | };
17 | 


--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "packages": ["components/*"],
 3 |   "version": "independent",
 4 |   "npmClient": "npm",
 5 |   "command": {
 6 |     "version": {
 7 |       "changelogPreset": "conventional-changelog-angular",
 8 |       "conventionalCommits": true,
 9 |       "allowBranch": ["master", "release/*"]
10 |     },
11 |     "publish": {
12 |       "ignoreChanges": [
13 |         "ignored-file",
14 |         "**/__fixtures__/**",
15 |         "**/__tests__/**",
16 |         "*.spec.tsx",
17 |         "*.stories.tsx"
18 |       ],
19 |       "message": "chore(release): publish"
20 |     }
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "rootDir": "./components/",
 4 |     "outDir": "./dist/",
 5 |     "esModuleInterop": true,
 6 |     "declaration": true,
 7 |     "downlevelIteration": true,
 8 |     "experimentalDecorators": true,
 9 |     "module": "esnext",
10 |     "target": "es5",
11 |     "lib": ["es6", "dom", "es2016", "es2017"],
12 |     "types": ["jest"],
13 |     "typeRoots": ["node_modules/@types"],
14 |     "sourceMap": true,
15 |     "jsx": "react",
16 |     "moduleResolution": "node",
17 |     "allowSyntheticDefaultImports": true
18 |   },
19 |   "include": ["components/**/*"],
20 |   "exclude": [
21 |     "node_modules",
22 |     "dist",
23 |     "components/**/*.stories.tsx",
24 |     "components/**/*.test.tsx"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/components/button/src/ButtonComponent.test.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | 
 4 | import ButtonComponent from './ButtonComponent';
 5 | import { ButtonComponentProps } from './ButtonComponent.types';
 6 | 
 7 | describe('<ButtonComponent>', () => {
 8 |   let props: ButtonComponentProps;
 9 | 
10 |   beforeEach(() => {
11 |     props = {
12 |       theme: 'primary',
13 |     };
14 |   });
15 | 
16 |   const renderComponent = () => render(<ButtonComponent {...props} />);
17 | 
18 |   it('should render', () => {
19 |     const { getByTestId } = renderComponent();
20 | 
21 |     const testComponent = getByTestId('test-component');
22 | 
23 |     expect(testComponent).toHaveClass('test-component-primary');
24 |   });
25 | });
26 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   roots: ['<rootDir>/components'],
 3 |   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 4 |   moduleFileExtensions: ['ts', 'tsx', 'js'],
 5 |   testMatch: ['<rootDir>/components/**/*.test.tsx'],
 6 |   modulePaths: ['<rootDir>/dist'],
 7 |   testPathIgnorePatterns: ['node_modules/'],
 8 |   transform: {
 9 |     '^.+\\.tsx?$': 'ts-jest',
10 |   },
11 |   moduleNameMapper: {
12 |     '\\.(jpg|ico|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
13 |       'identity-obj-proxy',
14 |     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
15 |   },
16 |   coverageReporters: [
17 |     [
18 |       'json',
19 |       {
20 |         projectRoot: '../../',
21 |       },
22 |     ],
23 |     'text',
24 |   ],
25 | };
26 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "parser": "@typescript-eslint/parser",
 3 |   "extends": [
 4 |     "plugin:react/recommended",
 5 |     "plugin:@typescript-eslint/recommended",
 6 |     "plugin:prettier/recommended",
 7 |     "prettier/@typescript-eslint"
 8 |   ],
 9 |   "rules": {
10 |     "@typescript-eslint/explicit-function-return-type": "off",
11 |     "@typescript-eslint/no-explicit-any": "off",
12 |     "@typescript-eslint/ban-ts-ignore": "off"
13 |   },
14 |   "overrides": [
15 |     {
16 |       "files": ["**/*.tsx"],
17 |       "rules": {
18 |         "react/prop-types": "off"
19 |       }
20 |     }
21 |   ],
22 |   "settings": {
23 |     "react": {
24 |       "version": "detect"
25 |     }
26 |   },
27 |   "ignorePatterns": ["coverage/", "node_modules/", "src/serviceWorker.ts"]
28 | }
29 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # compiled output
 2 | /dist
 3 | **/dist
 4 | /build
 5 | **/build
 6 | /tmp
 7 | /out-tsc
 8 | /documentation
 9 | # Only exists if Bazel was run
10 | /bazel-out
11 | 
12 | # dependencies
13 | /node_modules
14 | **/node_modules
15 | 
16 | # profiling files
17 | chrome-profiler-events*.json
18 | speed-measure-plugin*.json
19 | 
20 | # IDEs and editors
21 | /.idea
22 | .project
23 | .classpath
24 | .c9/
25 | *.launch
26 | .settings/
27 | *.sublime-workspace
28 | 
29 | # IDE - VSCode
30 | .vscode/*
31 | !.vscode/settings.json
32 | !.vscode/tasks.json
33 | !.vscode/launch.json
34 | !.vscode/extensions.json
35 | .history/*
36 | 
37 | # misc
38 | /.sass-cache
39 | /connect.lock
40 | /coverage
41 | **/coverage
42 | /libpeerconnection.log
43 | *.log
44 | testem.log
45 | /typings
46 | 
47 | # System Files
48 | .DS_Store
49 | Thumbs.db
50 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | module.exports = {
 4 |   entry: './src/index.ts',
 5 |   output: {
 6 |     path: path.resolve('dist'),
 7 |     filename: '[name].js',
 8 |     library: 'react-component-library',
 9 |     libraryTarget: 'umd',
10 |   },
11 |   resolve: {
12 |     extensions: ['.ts', '.tsx', '.js'],
13 |     alias: {
14 |       '@thedesignsystem/button': path.resolve(
15 |         __dirname,
16 |         '../components/button/src/index',
17 |       ),
18 |     },
19 |   },
20 |   module: {
21 |     rules: [
22 |       {
23 |         test: /\.(ts|tsx)$/,
24 |         use: [
25 |           {
26 |             loader: require.resolve('ts-loader'),
27 |           },
28 |         ],
29 |       },
30 |       {
31 |         test: /\.scss$/i,
32 |         use: ['style-loader', 'css-loader', 'sass-loader'],
33 |       },
34 |     ],
35 |   },
36 |   externals: {
37 |     react: 'react',
38 |     'react-dom': 'react-dom',
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/components/Button/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@thedesignsystem/button",
 3 |   "version": "0.0.0",
 4 |   "publishConfig": {
 5 |     "directory": "dist"
 6 |   },
 7 |   "repository": {
 8 |     "type": "git",
 9 |     "url": "https://github.com/gstvribs/monorepo-react-component-library.git"
10 |   },
11 |   "author": {
12 |     "name": "Gustavo Ribeiro",
13 |     "email": "gu_ribeiro@live.com",
14 |     "url": "https://twitter.com/gstvribs"
15 |   },
16 |   "license": "MIT",
17 |   "types": "dist/index.d.ts",
18 |   "main": "dist/main.js",
19 |   "scripts": {
20 |     "build": "cross-env webpack -p --config ../../webpack.config.js --mode production",
21 |     "test": "jest button --config=../../jest.config.js",
22 |     "test:watch": "jest button --config=../../jest.config.js --watch",
23 |     "clean": "rimraf dist && rimraf node_modules && rimraf package-lock.json"
24 |   },
25 |   "peerDependencies": {
26 |     "react": "^16.8.2",
27 |     "react-dom": "^16.8.2"
28 |   },
29 |   "devDependencies": {
30 |     "rimraf": "^3.0.2"
31 |   }
32 | }
33 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Gustavo Ribeiro
 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 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "editor.tabSize": 2,
 3 |   "editor.formatOnPaste": true,
 4 |   "editor.formatOnSave": true,
 5 |   "files.eol": "\n",
 6 |   "files.insertFinalNewline": true,
 7 |   "files.trimTrailingWhitespace": true,
 8 |   "files.watcherExclude": {
 9 |     "**/dist/**": true,
10 |     "**/node_modules/**": true
11 |   },
12 |   "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
13 |   "javascript.preferences.quoteStyle": "single",
14 |   "javascript.updateImportsOnFileMove.enabled": "always",
15 |   "typescript.preferences.quoteStyle": "single",
16 |   "prettier.configPath": ".prettierrc.js",
17 |   "stylelint.validate": ["css", "less", "sass", "scss"],
18 |   "scss.validate": true,
19 |   "[typescript]": {
20 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
21 |   },
22 |   "[scss]": {
23 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
24 |   },
25 |   "[javascript]": {
26 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
27 |   },
28 |   "[html]": {
29 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
30 |   },
31 |   "[json]": {
32 |     "editor.defaultFormatter": "esbenp.prettier-vscode"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <h1 align="center">The Design System</h1>
 2 | 
 3 | > This is a proof of concept of a monorepo structure for serving react components and design tokens
 4 | 
 5 | <p align="center">
 6 |   <a href="https://lerna.js.org/">
 7 |     <img src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg" alt="Maintained with Lerna" />
 8 |   </a>
 9 |   <a href="http://commitizen.github.io/cz-cli/">
10 | 	  <img src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg" alt="Commitzen friendly" />
11 |   </a>
12 |   <a href="https://conventionalcommits.org">
13 | 	  <img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" alt="Conventional Commits" />
14 |   </a>
15 | </p>
16 | 
17 | ## Getting started
18 | 
19 | This is a monorepo repository using [Lerna](https://lerna.js.org/), [Commitzen](http://commitizen.github.io/cz-cli/) and [Conventional Commits](https://conventionalcommits.org) to maintain and manage component versions and for documentation, we use [Storybook](https://storybook.js.org/) and [Compodoc](https://compodoc.app/), you can access by clicking [here](https://thedesignsystem.gustavoribeiro.dev/)
20 | 
21 | List of packages containing in this repository:
22 | 
23 | | Name of package                                | Description                                  |
24 | | ---------------------------------------------- | -------------------------------------------- |
25 | | [`@thedesignsystem/components`](./components/) | React components with each package.json file |
26 | 
27 | ## Setup
28 | 
29 | Local setup to run this project locally
30 | 
31 | ### Tools:
32 | 
33 | - Node [version 10.20.1](https://nodejs.org/download/release/v10.21.0/)
34 |   - If you use [nvm](https://github.com/nvm-sh/nvm) just run the command `nvm use` in the root folder
35 | 
36 | ### Configuration
37 | 
38 | - Install all the dependencies: `npm i`
39 | - You can see the components of this repo in:
40 |   - Storybook by running `npm run start:storybook`
41 | 
42 | ### Installing components
43 | 
44 | All components in this repository are installed separately, that is, each component has its own npm package, for example if you want to install the button component:
45 | 
46 | `npm i @thedesignsystem/button`
47 | 


--------------------------------------------------------------------------------
/stories/0-introduction.stories.mdx:
--------------------------------------------------------------------------------
 1 | import { Meta } from '@storybook/addon-docs/blocks';
 2 | 
 3 | <Meta title="The Design System / README" />
 4 | 
 5 | <h1 align="center">The Design System</h1>
 6 | 
 7 | > This is a proof of concept of a monorepo structure for serving react components and design tokens
 8 | 
 9 | <p align="center">
10 |   <a href="https://lerna.js.org/">
11 |     <img
12 |       src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg"
13 |       alt="Maintained with Lerna"
14 |     />
15 |   </a>
16 |   <a href="http://commitizen.github.io/cz-cli/">
17 |     <img
18 |       src="https://img.shields.io/badge/commitizen-friendly-brightgreen.svg"
19 |       alt="Commitzen friendly"
20 |     />
21 |   </a>
22 |   <a href="https://conventionalcommits.org">
23 |     <img
24 |       src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg"
25 |       alt="Conventional Commits"
26 |     />
27 |   </a>
28 | </p>
29 | 
30 | ## Getting started
31 | 
32 | This is a monorepo repository using [Lerna](https://lerna.js.org/), [Commitzen](http://commitizen.github.io/cz-cli/) and [Conventional Commits](https://conventionalcommits.org) to maintain and manage component versions and for documentation, we use [Storybook](https://storybook.js.org/) and [Compodoc](https://compodoc.app/), you can access by clicking [here](https://thedesignsystem.gustavoribeiro.dev/)
33 | 
34 | List of packages containing in this repository:
35 | 
36 | | Name of package                                | Description                                  |
37 | | ---------------------------------------------- | -------------------------------------------- |
38 | | [`@thedesignsystem/components`](./components/) | React components with each package.json file |
39 | 
40 | ## Setup
41 | 
42 | Local setup to run this project locally
43 | 
44 | ### Tools:
45 | 
46 | - Node [version 10.20.1](https://nodejs.org/download/release/v10.21.0/)
47 |   - If you use [nvm](https://github.com/nvm-sh/nvm) just run the command `nvm use` in the root folder
48 | 
49 | ### Configuration
50 | 
51 | - Install all the dependencies: `npm i`
52 | - You can see the components of this repo in:
53 |   - Storybook by running `npm run start:storybook`
54 | 
55 | ### Installing components
56 | 
57 | All components in this repository are installed separately, that is, each component has its own npm package, for example if you want to install the button component:
58 | 
59 | `npm i @thedesignsystem/button`
60 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "@thedesignsystem/app",
  3 |   "version": "0.0.0",
  4 |   "scripts": {
  5 |     "commit": "git-cz",
  6 |     "build": "npm run lerna:build",
  7 |     "build:static": "bash scripts/build.sh",
  8 |     "test": "npm run lerna:test",
  9 |     "lint": "npm run lint:ts && npm run lint:scss",
 10 |     "format": "prettier --write components/**/*.{js,ts,tsx,scss,json}",
 11 |     "publish:prepare": "bash scripts/pre-publish.sh",
 12 |     "publish:local": "npm run publish:prepare && lerna publish --contents dist --registry=http://localhost:4873",
 13 |     "start:storybook": "start-storybook -p 9001 -c .storybook",
 14 |     "build:storybook": "build-storybook -c .storybook -s .storybook/public -o dist/",
 15 |     "lint:ts": "eslint -c .eslintrc ./components/ --quiet --ext .ts",
 16 |     "lint:ts:fix": "eslint -c .eslintrc ./components/ --quiet --ext .ts --fix",
 17 |     "lint:scss": "stylelint **/*.scss --config .stylelintrc --syntax scss",
 18 |     "lint:scss:fix": "stylelint **/*.scss --config .stylelintrc --syntax scss --fix",
 19 |     "registry:local": "verdaccio",
 20 |     "registry:auth": "npm config set registry http://localhost:4873/ && npm adduser --registry http://localhost:4873/ && npm run npm:reset",
 21 |     "registry:reset": "npm config set registry https://registry.npmjs.org/",
 22 |     "registry:dump": "npm run lerna:build && lerna publish from-package --contents dist --registry=http://localhost:4873",
 23 |     "lerna:bootstrap": "lerna bootstrap --hoist",
 24 |     "lerna:list": "lerna ls",
 25 |     "lerna:list:changed": "lerna list --since",
 26 |     "lerna:build": "lerna run build",
 27 |     "lerna:build:changed": "lerna run build --since",
 28 |     "lerna:test": "lerna run test",
 29 |     "lerna:test:changed": "lerna run test --since",
 30 |     "lerna:clean": "npm run lerna:clean:artifacts && npm run lerna:clean:packages && npm run lerna:clean:root",
 31 |     "lerna:clean:artifacts": "lerna run clean --parallel",
 32 |     "lerna:clean:packages": "lerna clean --yes",
 33 |     "lerna:clean:root": "rimraf node_modules && rimraf dist",
 34 |     "postinstall": "npm run lerna:bootstrap"
 35 |   },
 36 |   "config": {
 37 |     "commitizen": {
 38 |       "path": "./node_modules/cz-conventional-changelog"
 39 |     }
 40 |   },
 41 |   "husky": {
 42 |     "hooks": {
 43 |       "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
 44 |       "pre-commit": "npm run build && npm run lint && npm run test"
 45 |     }
 46 |   },
 47 |   "dependencies": {
 48 |     "react": "^16.8.2",
 49 |     "react-dom": "^16.8.2",
 50 |     "@babel/preset-env": "^7.3.1",
 51 |     "@babel/preset-react": "^7.0.0",
 52 |     "@testing-library/jest-dom": "^5.5.0",
 53 |     "@testing-library/react": "^10.0.2",
 54 |     "@types/jest": "^24.0.24",
 55 |     "@types/react": "^16.9.12",
 56 |     "@types/react-dom": "^16.9.8",
 57 |     "autoprefixer": "^9.4.7",
 58 |     "cross-env": "^5.2.0",
 59 |     "css-loader": "^2.1.0",
 60 |     "identity-obj-proxy": "^3.0.0",
 61 |     "jest": "^24.9.0",
 62 |     "sass": "^1.26.10",
 63 |     "node-sass": "^4.11.0",
 64 |     "sass-loader": "^7.1.0",
 65 |     "style-loader": "^0.23.1",
 66 |     "postcss-loader": "^3.0.0",
 67 |     "eslint": "^7.2.0",
 68 |     "eslint-config-prettier": "^6.11.0",
 69 |     "eslint-plugin-import": "^2.21.2",
 70 |     "eslint-plugin-jsdoc": "^27.1.2",
 71 |     "eslint-plugin-prefer-arrow": "^1.2.1",
 72 |     "eslint-plugin-prettier": "^3.1.4",
 73 |     "ts-jest": "^24.2.0",
 74 |     "ts-loader": "^8.0.1",
 75 |     "typescript": "^3.7.2",
 76 |     "webpack": "^4.29.3",
 77 |     "webpack-cli": "^3.2.3"
 78 |   },
 79 |   "devDependencies": {
 80 |     "@babel/core": "^7.2.2",
 81 |     "@lerna/filter-options": "^3.20.0",
 82 |     "@storybook/addon-actions": "^6.0.22",
 83 |     "@storybook/addon-essentials": "^6.0.22",
 84 |     "@storybook/addon-links": "^6.0.22",
 85 |     "@storybook/cli": "^6.0.22",
 86 |     "@storybook/node-logger": "^6.0.22",
 87 |     "@storybook/react": "^6.0.22",
 88 |     "@typescript-eslint/eslint-plugin": "^4.8.1",
 89 |     "@typescript-eslint/parser": "^4.8.1",
 90 |     "babel-loader": "^8.0.5",
 91 |     "eslint-plugin-react": "^7.21.5",
 92 |     "husky": "^4.3.0",
 93 |     "lerna": "^3.22.1",
 94 |     "stylelint": "^13.6.0",
 95 |     "stylelint-config-prettier": "^8.0.1",
 96 |     "stylelint-config-recommended": "^3.0.0",
 97 |     "stylelint-scss": "^3.17.2",
 98 |     "react-is": "^16.13.1",
 99 |     "verdaccio": "^4.6.2"
100 |   }
101 | }
102 | 


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