Create React component library using atomic design pattern

Create React component library using atomic design pattern for your Company with the power of Typescript, Storybook and Github webhooks. and document them with jsDoc. all in one place.

By default everthing is exported from "src" as const. Change the index.ts file for the exports according to your convenience.

This project uses yalc for testing in other local project and Husky for git commit linting. If you dont want commit liniting you can remove .husky folder and the below mentioned script from package.json file or you can configure according to your need, using commitlint.config.js

...
"scripts":{
  "prepare": "husky install"
}
...

To start Follow the Following steps

Install yarn

Install via npm

npm install --global yarn

Install yalc globaly

yarn global add yalc

Install all dependencies

yarn install

To Add new component run the following cmd and follow the steps

yarn run create-component

ATOMS: Atoms are the smallest possible components, such as buttons, titles, inputs, text. Atoms of our interfaces serve as the foundational building blocks of our components and can’t be broken down any further without ceasing to be functional.

Molecules: Molecules as they are named consist of two or more atoms, molecules are relatively simple groups of UI elements functioning together as a unit. Examples are A Textfield comprising of an HTML textInput, a label, and an error message or a search Box comprising of an HTML TextInput and a Button.

Organisms: Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. These organisms form distinct sections of an interface.

For running storybook

yarn run storybbok

Run the below CMD to build JSDoc on save changes

yarn run watch:jsDoc

Docker-compose(slow)

For building storybook and jsdoc image we are using storyDockerfile and jsdocDockerfile.

For storybook and jsDoc documentation

docker-compose up

Publishing

For Publishing using github webhooks we need NPM Automation token Access Token.

• To Generate NPM Access token.

• Change the name,homepage,author in package.json.

• Create a NPM Account and create a access token< Automation > (save the token somewhere for github actions secrets).

• Create a repo on github.

• Push to github.

  You can go to the actions tab inside the repo for git webhooks in action.

• Go to settings of the Repo.

• Under Security > Secrets click on Action and add a new repo secret NPM_TOKEN

Note: To trigger publish githook we need to create a new Release and publish it. As soon as you publish it will start doing all the steps mentioned in .github/publish.yaml

Note for devlopment(using: yalc)

When using yalc, Add "postyalc" into package.json. To avoid module not found (it will not add anything inside the package.json file if the yalc project ( < my-package > ) has dependencies).

...
  "scripts":{
    ...
    "postyalc": "yarn"
    ...
  }
...

To automatically install local pacakage dependencies as yalc does not out of the box install or run yarn/npm install after yalc add < my-package >.

When using yalc link in consumer/other project folder it will not touch package.json file and node_modules folder. You will have to import the local package installed with yalc from .yalc in the root_dir. And there will be no effect postyalc script.

If you want you can put pre-commit and pre-push actions in their respective files to trigger.

To Commit to git we have to follow a convention

Note: No need to follow this if not using husky

git commit -m '<prefix>: implement commitlint'

Prefix:[
        "build",
        "chore",
        "ci",
        "docs",
        "feat",
        "fix",
        "perf",
        "refactor",
        "revert",
        "style",
        "test",
        "translation",
        "security",
        "changeset",
        "patch_version"
      ],

To know more about prefix checkout commitlint.config.js