{"id":14985494,"url":"https://github.com/kaihotz/react-rollup-boilerplate","last_synced_at":"2025-05-15T10:06:31.022Z","repository":{"id":33729509,"uuid":"160162120","full_name":"KaiHotz/react-rollup-boilerplate","owner":"KaiHotz","description":"Boilerplate for creating React component libraries, bundled with Rollup.js to ESM  and/or CJS Modules, Storybook, Typescript","archived":false,"fork":false,"pushed_at":"2025-04-11T14:36:53.000Z","size":30378,"stargazers_count":310,"open_issues_count":1,"forks_count":68,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-15T10:05:29.540Z","etag":null,"topics":["boilerplate","boilerplate-front-end","boilerplates","library","react","reactjs","rollup","rollup-example","rollup-js","rollupjs","storybook","typescript"],"latest_commit_sha":null,"homepage":"https://kaihotz.github.io/react-rollup-boilerplate/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KaiHotz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-12-03T09:04:08.000Z","updated_at":"2025-05-06T01:57:57.000Z","dependencies_parsed_at":"2024-06-12T22:26:03.281Z","dependency_job_id":"de5bc5e9-6726-46b7-a644-f94929f7f313","html_url":"https://github.com/KaiHotz/react-rollup-boilerplate","commit_stats":{"total_commits":238,"total_committers":10,"mean_commits":23.8,"dds":"0.26050420168067223","last_synced_commit":"3014d807f3d42a3636e218910bafda1bdb2f5771"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaiHotz%2Freact-rollup-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaiHotz%2Freact-rollup-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaiHotz%2Freact-rollup-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaiHotz%2Freact-rollup-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KaiHotz","download_url":"https://codeload.github.com/KaiHotz/react-rollup-boilerplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319720,"owners_count":22051073,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","boilerplate-front-end","boilerplates","library","react","reactjs","rollup","rollup-example","rollup-js","rollupjs","storybook","typescript"],"created_at":"2024-09-24T14:11:05.539Z","updated_at":"2025-05-15T10:06:25.991Z","avatar_url":"https://github.com/KaiHotz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Getting started\n\nThere are two methods for getting started with this repo.\n\n#### Familiar with Git?\n\n```\ngit clone git@github.com:KaiHotz/react-rollup-boilerplate.git\ncd react-rollup-boilerplate\nyarn install\n```\n\n#### Not Familiar with Git?\n\nClick [here](https://github.com/KaiHotz/react-rollup-boilerplate/archive/master.zip) to download the .zip file.  Extract the contents of the zip file, then open your terminal, change to the project directory, and:\n\n```\nyarn install\n```\n\n## Developing\n\nTo start the developing run :\n\n```\nyarn start\n```\n\nThis will build a version of your library, run the watcher and also run Storybook.\nTo open Storybook manually open your Browser and navigate to [http://localhost:6060](http://localhost:6060).\nStart developing your components in `src/components` folder and update the `src/index.js` file accordingly.\nAlways provide an `YourComponent.story.tsx` file, so your component will show up in Storybook.\n\nYou can refer to example `Button` component, but I think you'll get the idea.\n\n## Styling your components\n\n`SCSS` and `CSS` are supported out of the box, just import your styles into your component like you normally would do.\nFor the use of  `CSS Modules` refer to [rollup-plugin-postcss](https://github.com/egoist/rollup-plugin-postcss)\n\n## Linting and Code formating for Styles\nLinting `SCSS` and `CSS` is suported out of the box following BEM by using [stylelint](https://stylelint.io/)\n\n\n## Linting and Code formating for Typescript\n\nLinting and code formating is done via [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/) using [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react) and\n[eslint-config-prettier](https://github.com/prettier/eslint-config-prettier).\nYou can modify linting rules by overriding them in the `eslint.config.js` file.\n\n```\nyarn lint\n```\nor (if automatic fixing is possible)\n```\nyarn lint:fix\n```\n\n\n## Testing\n\nTesting is done with [Vitest](https://vitest.dev/) and [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/)\nYou can refer to `Button.test.js` as an example.\n```\nyarn test\n```\n\n## Publishing your library to NPM\n\nTo release your library to NPM or your private Registry, make sure you have an active account at [NPM](https://www.npmjs.com/), your `.npmrc` file is correctly setup and the registry url at publishConfig in `package.json` file is set to your repository url, then:\n\n```\nyarn release\n```\n\n## Storybook\n\nFor custom layouts, styling and more information about Storybook, please refer to [Storybook](https://storybook.js.org/basics/writing-stories/) documentation.\n\n#### Deploy Storybook to GitHub Pages\n\nMake sure the homepage url in `package.json` file is set to your githup pages url, then:\n\n```\nyarn deploy\n```\n\n## Scripts\n\n- `yarn start` : Only serves Storybook.\n- `yarn build` : Builds your library (build can be found in `dist` folder).\n- `yarn storybook:build` : Builds the static Storybook in case you want to deploy it.\n- `yarn test` : Runs the tests.\n- `yarn test:coverage`: Runs the test and shows the coverage.\n- `yarn lint` : Runs the linter, Typescript typecheck and stylelint.\n- `yarn lint:fix` : Runs the linter, Typescript typecheck and stylelint and fixes automatic fixable issues.\n- `yarn eslint`: Runs only the JavaScript linter.\n- `yarn eslint:fix`: Runs only the JavaScript linter and fixes automatic fixable issues.\n- `yarn stylelint`: Runs only the style linter.\n- `yarn stylelint:fix`: Runs only the style linter and fixes automatic fixable issues.\n- `yarn check-types`: Runs typescript type checker.\n- `yarn ci`: Runs Linting, tests and type checker all together.\n- `yarn release` : Publishes your Library on NPM or your private Registry (depending on your config in your `.npmrc` file).\n- `yarn storybook`: Same as yarn start, to serve storybook.\n- `yarn storybook:build`: Generates the build for storybook in `storybook-static` folder, that can be deployed wherever you need.\n- `yarn storybook:deploy`: Builds and deploys Storybook to GitHub Pages.\n\n## Resources\n\n### Bundler\n- [Rollup.js](https://rollupjs.org/guide/en)\n\n### Code Formatter\n- [Prettier](https://prettier.io/)\n\n### Storybook\n- [Storybook](https://storybook.js.org/)\n\n### Testing\n- [Vitest](https://vitest.dev/)\n- [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/)\n- [@testing-library/jest-dom](https://github.com/testing-library/jest-dom)\n\n### Linting\n- [ESLint](https://eslint.org/)\n- [eslint-plugin-react](https://www.npmjs.com/package/eslint-plugin-react)\n- [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier)\n- [stylelint-prettier](https://github.com/prettier/stylelint-prettier)\n- [stylelint-scss](https://github.com/kristerkari/stylelint-scss)\n\n### Compiler\n- [Typescript](https://www.typescriptlang.org/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaihotz%2Freact-rollup-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaihotz%2Freact-rollup-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaihotz%2Freact-rollup-boilerplate/lists"}