Shared is a boilerplate for writing React Libraries bundled with Rollup.js to commonJs ,ES6 Modules, Storybookt, Tailwind CSS, Shadcn/ui.
This project is a clone of React Rollup Boilerplate and has been updated for Tailwind and Shadcn/ui.
git clone git@github.com:behzadam/shared.git
cd shared
yarn install
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 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 is done with Vitest and @testing-library/react
You can refer to Button.test.js
as an example.
yarn test
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
For custom layouts, styling and more information about Storybook, please refer to Storybook documentation.
Make sure the homepage url in package.json
file is set to your githup pages url, then:
yarn deploy
yarn start
: Only serves Storybook.yarn build
: Builds your library (build can be found indist
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 instorybook-static
folder, that can be deployed wherever you need.yarn storybook:deploy
: Builds and deploys Storybook to GitHub Pages.