{"_id":"@bernz322/react-library-boilerplate","_rev":"7-1bec2ad570804ffcf8ef0da9b972c92a","name":"@bernz322/react-library-boilerplate","dist-tags":{"latest":"0.0.6"},"versions":{"0.0.2":{"name":"@bernz322/react-library-boilerplate","version":"0.0.2","author":{"name":"Jeffrey Bernadas"},"license":"MIT","_id":"@bernz322/react-library-boilerplate@0.0.2","maintainers":[{"name":"jeffbernadas","email":"jeffrey.bernadas0@gmail.com"}],"homepage":"https://github.com/Bernz322/react-library-boilerplate#readme","bugs":{"url":"https://github.com/Bernz322/react-library-boilerplate/issues"},"dist":{"shasum":"efcc46f8546a135168f3085452bf4aec1c90c195","tarball":"https://registry.npmjs.org/@bernz322/react-library-boilerplate/-/react-library-boilerplate-0.0.2.tgz","fileCount":17,"integrity":"sha512-0Bqvv1QeKIvYAJfNvMN4D7qTSo6BOpQpiQf8yWLW4eIvEmfII8yyJuAGWOkF70TBZCmE3T0bv6xJ4xsXAaJ46g==","signatures":[{"sig":"MEUCIBrU20onINHrPODdNDV/QXtWeJtd7/wgjHUuMyUTzt21AiEAvGr2luosnDLlkzuYU6X3DdQaJkmbyL3c6H7lQkHYaS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19538},"main":"build/index.cjs.js","types":"build/typings/index.d.ts","module":"build/index.esm.js","gitHead":"35428982a905e002853ab82421ad4f96eba15dfa","scripts":{"lint":"eslint","test":"react-scripts test --env=jsdom","build":"npm run build:js && npm run build:types","format":"prettier --write .","prepare":"husky","build:js":"rollup -c rollup.config.mjs","lint:fix":"eslint --fix","storybook":"storybook dev -p 6006","test:clean":"rimraf ./coverage","build:types":"tsc -p tsconfig.build.json","build-storybook":"storybook build"},"_npmUser":{"name":"jeffbernadas","email":"jeffrey.bernadas0@gmail.com"},"repository":{"url":"git+https://github.com/Bernz322/react-library-boilerplate.git","type":"git"},"_npmVersion":"10.9.0","description":"A boilerplate to get your very own React Component Library up and running using Rollup, Typescript, Jest, React Testing, Storybook","directories":{},"sideEffects":false,"_nodeVersion":"22.0.0","dependencies":{"@babel/runtime":"^7.21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","vite":"^5.4.10","husky":"^9.1.6","react":"^18.2.0","eslint":"^9.13.0","rollup":"^4.24.2","globals":"^15.11.0","ts-jest":"^29.0.5","prettier":"3.3.3","react-dom":"^18.2.0","storybook":"^8.3.6","@eslint/js":"^9.13.0","typescript":"^5.0.2","@babel/core":"^7.21.3","@types/jest":"^29.5.0","@types/react":"^18.0.31","babel-loader":"^9.2.1","react-scripts":"^5.0.1","@storybook/test":"^8.3.6","@storybook/react":"^8.3.6","@types/react-dom":"^18.0.11","@babel/preset-env":"^7.20.2","@storybook/blocks":"^8.3.6","typescript-eslint":"^8.12.1","eslint-plugin-jest":"^28.8.3","@babel/preset-react":"^7.18.6","eslint-plugin-react":"^7.37.2","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-image":"^3.0.2","rollup-plugin-delete":"^2.0.0","@storybook/react-vite":"^8.3.6","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^8.3.6","@testing-library/react":"^16.0.1","eslint-config-prettier":"9.1.0","@rollup/plugin-commonjs":"^28.0.1","@babel/preset-typescript":"^7.21.0","@chromatic-com/storybook":"^1.9.0","@testing-library/jest-dom":"^6.6.2","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"^8.3.6","@storybook/addon-onboarding":"^8.3.6","@testing-library/user-event":"^14.4.3","rollup-plugin-node-externals":"^7.1.3","@storybook/addon-interactions":"^8.3.6","react-docgen-typescript-plugin":"^1.0.5","@babel/plugin-transform-runtime":"^7.21.0"},"peerDependencies":{"react":">=16.12.0","react-dom":">=16.12.0"},"_npmOperationalInternal":{"tmp":"tmp/react-library-boilerplate_0.0.2_1730217742256_0.8662830978130374","host":"s3://npm-registry-packages"}},"0.0.4":{"name":"@bernz322/react-library-boilerplate","version":"0.0.4","author":{"name":"Jeffrey Bernadas"},"license":"MIT","_id":"@bernz322/react-library-boilerplate@0.0.4","maintainers":[{"name":"jeffbernadas","email":"jeffrey.bernadas0@gmail.com"}],"homepage":"https://github.com/Bernz322/react-library-boilerplate#readme","bugs":{"url":"https://github.com/Bernz322/react-library-boilerplate/issues"},"dist":{"shasum":"4520db8c68967761054f850c1b1ad7e4f732900f","tarball":"https://registry.npmjs.org/@bernz322/react-library-boilerplate/-/react-library-boilerplate-0.0.4.tgz","fileCount":17,"integrity":"sha512-M2HGjNmQZMFlzBZEcMt8OE1cZCODGGywjUBnzboSrZ+EFpHz8Hf3rOC0D+h+e0HfvLDrLIYhDljU37c/hyk3rg==","signatures":[{"sig":"MEYCIQD+kzmr6zTHIlpj3NLzERBPJtEkzE9gPsxLI1hDLy/iBQIhAOh430FWL9y7bXi896hl9b2dRKAT2shzoufm3UV9gj30","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":19672},"main":"build/index.cjs.js","types":"build/typings/index.d.ts","module":"build/index.esm.js","gitHead":"685d2683277e4018374179cbdf85bb682b438f3f","scripts":{"lint":"eslint","test":"react-scripts test --env=jsdom","build":"npm run build:js && npm run build:types","format":"prettier --write .","prepare":"husky","build:js":"rollup -c rollup.config.mjs","lint:fix":"eslint --fix","storybook":"storybook dev -p 6006","test:clean":"rimraf ./coverage","build:types":"tsc -p tsconfig.build.json","build-storybook":"storybook build"},"_npmUser":{"name":"jeffbernadas","email":"jeffrey.bernadas0@gmail.com"},"repository":{"url":"git+https://github.com/Bernz322/react-library-boilerplate.git","type":"git"},"_npmVersion":"10.8.2","description":"A boilerplate to get your very own React Component Library up and running using Rollup, Typescript, Jest, React Testing, Storybook","directories":{},"sideEffects":false,"_nodeVersion":"20.18.0","dependencies":{"@babel/runtime":"^7.21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","vite":"^5.4.10","husky":"^9.1.6","react":"^18.2.0","eslint":"^9.13.0","rollup":"^4.24.2","globals":"^15.11.0","ts-jest":"^29.0.5","prettier":"3.3.3","react-dom":"^18.2.0","storybook":"^8.3.6","@eslint/js":"^9.13.0","typescript":"^5.0.2","@babel/core":"^7.21.3","@types/jest":"^29.5.0","@types/react":"^18.0.31","babel-loader":"^9.2.1","react-scripts":"^5.0.1","@storybook/test":"^8.3.6","@storybook/react":"^8.3.6","@types/react-dom":"^18.0.11","@babel/preset-env":"^7.20.2","@storybook/blocks":"^8.3.6","typescript-eslint":"^8.12.1","eslint-plugin-jest":"^28.8.3","@babel/preset-react":"^7.18.6","eslint-plugin-react":"^7.37.2","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-image":"^3.0.2","rollup-plugin-delete":"^2.0.0","@storybook/react-vite":"^8.3.6","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^8.3.6","@testing-library/react":"^16.0.1","eslint-config-prettier":"9.1.0","@rollup/plugin-commonjs":"^28.0.1","@babel/preset-typescript":"^7.21.0","@chromatic-com/storybook":"^1.9.0","@testing-library/jest-dom":"^6.6.2","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"^8.3.6","@storybook/addon-onboarding":"^8.3.6","@testing-library/user-event":"^14.4.3","rollup-plugin-node-externals":"^7.1.3","@storybook/addon-interactions":"^8.3.6","react-docgen-typescript-plugin":"^1.0.5","@babel/plugin-transform-runtime":"^7.21.0"},"peerDependencies":{"react":">=16.12.0","react-dom":">=16.12.0"},"_npmOperationalInternal":{"tmp":"tmp/react-library-boilerplate_0.0.4_1730218617937_0.3894060523659495","host":"s3://npm-registry-packages"}},"0.0.5":{"name":"@bernz322/react-library-boilerplate","version":"0.0.5","author":{"name":"Jeffrey Bernadas"},"license":"MIT","_id":"@bernz322/react-library-boilerplate@0.0.5","maintainers":[{"name":"jeffbernadas","email":"jeffrey.bernadas0@gmail.com"}],"homepage":"https://github.com/Bernz322/react-library-boilerplate#readme","bugs":{"url":"https://github.com/Bernz322/react-library-boilerplate/issues"},"dist":{"shasum":"8098df609a2555dc80b8ac731fd3a80bd93f27aa","tarball":"https://registry.npmjs.org/@bernz322/react-library-boilerplate/-/react-library-boilerplate-0.0.5.tgz","fileCount":18,"integrity":"sha512-87FsaWHcWRn33MTYzPPFpGdIJ0EVvnQ7kSKmCIxz4l3hokK1exFjGu00PugjcklMm0l3M4wbO2dV4tOu+/Cm9g==","signatures":[{"sig":"MEUCIQD6V0BkEO4N5JEcJPNgpEcfHm6p4QuCbp58UVP3OMYBvwIgeGvKf9ep74qmH3wsrLJ6MCXBeYbjGzlYJQmffh2Zwrc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21644},"main":"build/index.cjs.js","types":"build/typings/index.d.ts","module":"build/index.esm.js","gitHead":"3176021a6035c940ed720d275793ded5d28c89c2","scripts":{"lint":"eslint","test":"react-scripts test --env=jsdom","build":"rimraf ./dist && npm run build:js && npm run build:types","format":"prettier --write .","prepare":"husky","build:js":"rollup -c rollup.config.mjs","lint:fix":"eslint --fix","storybook":"storybook dev -p 6006","test:clean":"rimraf ./coverage","build:types":"tsc -p tsconfig.build.json","build-storybook":"storybook build"},"_npmUser":{"name":"jeffbernadas","email":"jeffrey.bernadas0@gmail.com"},"repository":{"url":"git+https://github.com/Bernz322/react-library-boilerplate.git","type":"git"},"_npmVersion":"10.8.2","description":"A boilerplate to get your very own React Component Library up and running using Rollup, Typescript, Jest, React Testing, Storybook","directories":{},"sideEffects":false,"_nodeVersion":"20.18.0","dependencies":{"@babel/runtime":"^7.21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.5.0","vite":"^5.4.10","husky":"^9.1.6","react":"^18.2.0","eslint":"^9.13.0","rollup":"^4.24.2","globals":"^15.11.0","ts-jest":"^29.0.5","prettier":"3.3.3","react-dom":"^18.2.0","storybook":"^8.3.6","@eslint/js":"^9.13.0","typescript":"^5.0.2","@babel/core":"^7.21.3","@types/jest":"^29.5.0","@types/react":"^18.0.31","babel-loader":"^9.2.1","react-scripts":"^5.0.1","@storybook/test":"^8.3.6","@storybook/react":"^8.3.6","@types/react-dom":"^18.0.11","@babel/preset-env":"^7.20.2","@storybook/blocks":"^8.3.6","typescript-eslint":"^8.12.1","eslint-plugin-jest":"^28.8.3","@babel/preset-react":"^7.18.6","eslint-plugin-react":"^7.37.2","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-image":"^3.0.2","rollup-plugin-delete":"^2.0.0","@storybook/react-vite":"^8.3.6","rollup-plugin-postcss":"^4.0.2","@storybook/addon-links":"^8.3.6","@testing-library/react":"^16.0.1","eslint-config-prettier":"9.1.0","@rollup/plugin-commonjs":"^28.0.1","@babel/preset-typescript":"^7.21.0","@chromatic-com/storybook":"^1.9.0","@testing-library/jest-dom":"^6.6.2","@rollup/plugin-node-resolve":"^15.0.1","@storybook/addon-essentials":"^8.3.6","@storybook/addon-onboarding":"^8.3.6","@testing-library/user-event":"^14.4.3","rollup-plugin-node-externals":"^7.1.3","@storybook/addon-interactions":"^8.3.6","react-docgen-typescript-plugin":"^1.0.5","@babel/plugin-transform-runtime":"^7.21.0"},"peerDependencies":{"react":">=16.12.0","react-dom":">=16.12.0"},"_npmOperationalInternal":{"tmp":"tmp/react-library-boilerplate_0.0.5_1730288067702_0.46185161775320394","host":"s3://npm-registry-packages"}},"0.0.6":{"name":"@bernz322/react-library-boilerplate","author":{"name":"Jeffrey Bernadas"},"version":"0.0.6","description":"A boilerplate to get your very own React Component Library up and running using Rollup, Typescript, Jest, React Testing, Storybook","license":"MIT","main":"build/index.cjs.js","module":"build/index.esm.js","publishConfig":{"access":"public"},"scripts":{"build":"rimraf ./dist && npm run build:js && npm run build:types","build:js":"rollup -c rollup.config.mjs","build:types":"tsc -p tsconfig.build.json","test:clean":"rimraf ./coverage","test":"react-scripts test --env=jsdom","lint":"eslint","lint:fix":"eslint --fix","format":"prettier --write .","storybook":"storybook dev -p 6006","build-storybook":"storybook build","prepare":"husky"},"sideEffects":false,"types":"build/typings/index.d.ts","peerDependencies":{"react":">=19","react-dom":">=19"},"repository":{"type":"git","url":"git+https://github.com/Bernz322/react-library-boilerplate.git"},"devDependencies":{"@babel/core":"^7.21.3","@babel/plugin-transform-runtime":"^7.21.0","@babel/preset-env":"^7.20.2","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.21.0","@chromatic-com/storybook":"^3.2.5","@eslint/js":"^9.13.0","@rollup/plugin-babel":"^6.0.3","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-image":"^3.0.2","@rollup/plugin-node-resolve":"^16.0.0","@storybook/addon-essentials":"^8.6.4","@storybook/addon-interactions":"^8.6.4","@storybook/addon-links":"^8.6.4","@storybook/addon-onboarding":"^8.6.4","@storybook/blocks":"^8.6.4","@storybook/react":"^8.6.4","@storybook/react-vite":"^8.6.4","@storybook/test":"^8.6.4","@testing-library/jest-dom":"^6.6.2","@testing-library/react":"^16.0.1","@testing-library/user-event":"^14.4.3","@types/jest":"^29.5.0","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","babel-loader":"^10.0.0","eslint":"^9.13.0","eslint-config-prettier":"^10.1.1","eslint-plugin-jest":"^28.8.3","eslint-plugin-react":"^7.37.2","globals":"^16.0.0","husky":"^9.1.6","jest":"^29.5.0","prettier":"^3.5.3","react":"^19.0.0","react-docgen-typescript-plugin":"^1.0.5","react-dom":"^19.0.0","react-scripts":"^5.0.1","rollup":"^4.24.2","rollup-plugin-copy":"^3.5.0","rollup-plugin-delete":"^3.0.1","rollup-plugin-node-externals":"^8.0.0","rollup-plugin-postcss":"^4.0.2","storybook":"^8.6.4","ts-jest":"^29.0.5","typescript":"^5.0.2","typescript-eslint":"^8.12.1","vite":"^6.2.1"},"dependencies":{"@babel/runtime":"^7.21.0"},"_id":"@bernz322/react-library-boilerplate@0.0.6","gitHead":"5afda79f37db05b3506be7afd7bd8400b04505e5","bugs":{"url":"https://github.com/Bernz322/react-library-boilerplate/issues"},"homepage":"https://github.com/Bernz322/react-library-boilerplate#readme","_nodeVersion":"20.18.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-j7ZH7y3mBGnODGFq24EI2/ERcpq/3nUAlsSFnXJ/smYwxAHRaswI2hLQrGZ4697/vrxIznv6zBj1KSUztV7JyA==","shasum":"ef82d98b7f6fa52fd82ca3c46b4e488e78746e4f","tarball":"https://registry.npmjs.org/@bernz322/react-library-boilerplate/-/react-library-boilerplate-0.0.6.tgz","fileCount":18,"unpackedSize":22385,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIEBsNyVfv35VHxG7cQqfv91+65BqwdijBEXNSa1fcaQdAiEA+QyDOTA1CWSRTaKSJFytBLR+xtv3wSqtA001Ph1vos0="}]},"_npmUser":{"name":"jeffbernadas","email":"jeffrey.bernadas0@gmail.com"},"directories":{},"maintainers":[{"name":"jeffbernadas","email":"jeffrey.bernadas0@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-library-boilerplate_0.0.6_1741498493532_0.7120101101509093"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-29T16:02:22.161Z","modified":"2025-03-09T05:34:53.885Z","0.0.1":"2023-03-31T15:37:44.721Z","0.0.2":"2024-10-29T16:02:22.405Z","0.0.4":"2024-10-29T16:16:58.100Z","0.0.5":"2024-10-30T11:34:27.842Z","0.0.6":"2025-03-09T05:34:53.717Z"},"bugs":{"url":"https://github.com/Bernz322/react-library-boilerplate/issues"},"author":{"name":"Jeffrey Bernadas"},"license":"MIT","homepage":"https://github.com/Bernz322/react-library-boilerplate#readme","repository":{"type":"git","url":"git+https://github.com/Bernz322/react-library-boilerplate.git"},"description":"A boilerplate to get your very own React Component Library up and running using Rollup, Typescript, Jest, React Testing, Storybook","maintainers":[{"name":"jeffbernadas","email":"jeffrey.bernadas0@gmail.com"}],"readme":"# React Library Boilerplate\n\nThis is my own and go to boilerplate for creating my own React Component Libraries built with modern practices and tools I am comfortable to use with.\n\n## ✨ Key Features\n\n- :rocket: React 19 support\n- 🔥 Type checking with [TypeScript](https://www.typescriptlang.org/)\n- 🎉 [Storybook](https://storybook.js.org/) V8 Integration\n- 👷 Testing with [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/)\n- 📏 Linter with [ESLint](https://eslint.org/)\n- 🚫 Lint-staged for running linters on Git staged files\n- 💖 Code Formatter with [Prettier](https://prettier.io/)\n- 🦊 Git Hooks with [Husky](https://typicode.github.io/husky/)\n- :scroll: [Rollup](https://rollupjs.org/) for Bundling\n- 🎁 Automatic changelog generation with Semantic Release\n- 🤖 CI/CD for NPM Publishing and Storybook Deployment\n\n#### Requirements\n\n- Node.js 20+ and npm\n\n#### Getting started\n\nRun the following command on your local environment:\n\n```\ngit clone https://github.com/jeffreybernadas/react-library-boilerplate.git my-project-name\ncd my-project-name\nnpm install\n```\n\n_Note: I will always update all dependencies whenever I have the time._\n\nThen run the storybook in development mode to see components by running:\n\n```\nnpm run storybook\n```\n\nOpen http://localhost:6006 with your favorite browser to see the storybook.\n\n#### Adding components\n\nCreate a new component file inside _\"src/components\"_ directory and export it in _\"src/index.ts\"_.\n_Note: This is not limited to components only, you can add React Hooks, Utility Functions, and more to it._\n\nTo check your created component, create a story of it and run storybook.\n\n#### Tests\n\nYou can execute testing by running:\n\n```\nnpm run test\n```\n\n#### Linting\n\nFor linting and checking code quality and problems, execute:\n\n```\nnpm run lint\n```\n\nTo fix errors, execute:\n\n```\nnpm run lint:fix\n```\n\n#### Formatting\n\nFor formatting codes, execute:\n\n```\nnpm run format\n```\n\n#### Build\n\nFor building your library, execute:\n\n```\nnpm run build\n```\n\nThis will create a build folder containing index.esm.js, index.cjs.js, and typings folders for declarations including styles.css.\n\n#### Example usage\n\nIf you are creating a component library, put it in npm registry or do `npm pack` and install it on your other project locally. Import the said component including styles.\n\n```\nimport React from \"react\";\nimport { Header, Button, Page } from \"@bernz322/react-library-boilerplate\";\nimport \"./index.scss\";\n\nconst App = () => {\n  return (\n    <div>\n      <Header />\n      <Button label=\"Click me\" />\n      <Page />\n    </div>\n  );\n};\n\nexport default App;\n```\n\nImport the style in node modules.\n\n```\n@import '@bernz322/react-library-boilerplate/build/styles.css';\n\nbody {\n  font-family: Arial, Helvetica, sans-serif;\n}\n```\n\n#### Deployment of storybook\n\nDeployment of Storybook is automated via Github Actions. You can check storybook.yml on how it's done.\n\n#### Publishing to NPM\n\nSame with Storybook deployment, publishing to NPM is also automated. Just make sure to add NPM_TOKEN in your repositories \"Secrets and variables\" > \"Actions\".\n\nNPM Link:\n\n- https://www.npmjs.com/package/@bernz322/react-library-boilerplate\n\nStorybook Link:\n\n- https://jeffreybernadas.github.io/react-library-boilerplate/\n","readmeFilename":"README.md"}