Brainfish Components

Brainfish Components is a React component library starter kit, that helps you to create your own React component library with ease.

Getting started

yarn install

Developing

To start the developing run :

yarn start

This will build a version of your library, run the watcher and also run Storybook. To open Storybook manually open your Browser and navigate to http://localhost:6060. Start developing your components in src/components folder and update the src/index.js file accordingly. Always provide an YourComponent.story.tsx file, so your component will show up in Storybook.

You can refer to example Button component, but I think you'll get the idea.

Linting and Code formating for Typescript

Linting and code formating is done via ESLint and Prettier using eslint-plugin-react and eslint-config-prettier. You can modify linting rules by overriding them in the .eslintrc.cjs file.

yarn lint

or (if automatic fixing is possible)

yarn lint:fix

Testing

Testing is done with Vitest and @testing-library/react You can refer to Button.test.js as an example.

yarn test

Publishing your library to NPM

To release your library to NPM or your private Registry, make sure you have an active account at NPM, your .npmrc file is correctly setup and the registry url at publishConfig in package.json file is set to your repository url, then:

yarn release

Storybook

For custom layouts, styling and more information about Storybook, please refer to Storybook documentation.

Deploy Storybook to GitHub Pages

Make sure the homepage url in package.json file is set to your githup pages url, then:

yarn deploy

Scripts

• yarn start : Only serves Storybook.
• yarn build : Builds your library (build can be found in dist folder).
• yarn storybook:build : Builds the static Storybook in case you want to deploy it.
• yarn test : Runs the tests.
• yarn test:coverage: Runs the test and shows the coverage.
• yarn lint : Runs the linter, Typescript typecheck and stylelint.
• yarn lint:fix : Runs the linter, Typescript typecheck and stylelint and fixes automatic fixable issues.
• yarn eslint: Runs only the JavaScript linter.
• yarn eslint:fix: Runs only the JavaScript linter and fixes automatic fixable issues.
• yarn stylelint: Runs only the style linter.
• yarn stylelint:fix: Runs only the style linter and fixes automatic fixable issues.
• yarn check-types: Runs typescript type checker.
• yarn ci: Runs Linting, tests and type checker all together.
• yarn release : Publishes your Library on NPM or your private Registry (depending on your config in your .npmrc file).
• yarn storybook: Same as yarn start, to serve storybook.
• yarn storybook:build: Generates the build for storybook in storybook-static folder, that can be deployed wherever you need.
• yarn storybook:deploy: Builds and deploys Storybook to GitHub Pages.

Resources

Bundler

• Rollup.js

Code Formatter

• Prettier

Storybook

• Storybook

Testing

• Vitest
• @testing-library/react
• @testing-library/jest-dom

Linting

• ESLint
• eslint-plugin-react
• eslint-config-prettier
• stylelint-prettier
• stylelint-scss

Compiler

• Typescript