{"id":20107756,"url":"https://github.com/ahaywood/react-package-starter","last_synced_at":"2025-07-23T19:04:57.978Z","repository":{"id":184094714,"uuid":"671278872","full_name":"ahaywood/react-package-starter","owner":"ahaywood","description":"This is a starter repo for creating a custom React package","archived":false,"fork":false,"pushed_at":"2023-08-05T13:51:45.000Z","size":91997,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-05T21:40:53.859Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/ahaywood.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","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}},"created_at":"2023-07-27T00:57:16.000Z","updated_at":"2023-08-02T06:03:41.000Z","dependencies_parsed_at":"2025-01-13T05:35:49.809Z","dependency_job_id":null,"html_url":"https://github.com/ahaywood/react-package-starter","commit_stats":null,"previous_names":["ahaywood/react-package-starter"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/ahaywood/react-package-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahaywood%2Freact-package-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahaywood%2Freact-package-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahaywood%2Freact-package-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahaywood%2Freact-package-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahaywood","download_url":"https://codeload.github.com/ahaywood/react-package-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahaywood%2Freact-package-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266737719,"owners_count":23976392,"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","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-13T17:58:39.362Z","updated_at":"2025-07-23T19:04:52.962Z","avatar_url":"https://github.com/ahaywood.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Quick Start\n\n- Clone the repo\n- Install the dependencies using `yarn install`\n- View the components in the browser using `yarn storybook`\n- Test any changes by running `yarn test`\n- Build the library using `yarn build`\n- Publish your package on [npm](https://www.npmjs.com/). ([Additional instructions here](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages))\n\n## Connecting to Chromatic\n\n- Create a unique project token for your Storybook by [signing in to Chromatic](https://www.chromatic.com/start) and creating a project.\n- Run the following command: `npx chromatic --project-token \u003cyour-project-token\u003e`.\n- When complete, you’ll see the build status and a link to the published Storybook.\n\n# Scripts\n\nWithin the `package.json` file, there are several scripts you can run:\n\n- `test` - Runs Jest unit tests\n- `test:ci` - Runs Jest unit tests in CI mode. The only difference between this and `test` is that it doesn't watch for changes.\n- `build` - Builds the library and preps it for publishing to npm\n- `storybook` - Runs Storybook\n- `build-storybook` - Builds Storybook\n- `lint` - Runs EsLint\n- `lint:fix` - Runs EsLint and fixes any issues it finds\n- `plop` - Runs PlopJS. You'll still need to specify what PlopJS script you want to run. Right now, the only available script is `component`.\n\n# CI/CD\n\n- When you push code to the repo, stories will be published to [Chromatic](https://www.chromatic.com/). _NOTE: There's a little extra setup required to connect to Chromatic. (Detailed below)_\n- When code is pushed is pushed to the `main` branch or a new pull request is made, [CodeQL](https://codeql.github.com/) will run.\n- When code is pushed Jest unit tests will run. ([for reference](https://github.com/marketplace/actions/run-jest))\n\n### Setting up Chromatic\n\n- Navigate to your GitHub repository. Click the **Settings** tab, followed by **Secrets** and then **New secret.**\n- Create a secret named `CHROMATIC_PROJECT_TOKEN` and paste the token into the value.\n  You can find additional information on [Chromatic's documentation](https://www.chromatic.com/docs/github-actions).\n\n# About this Repo\n\nThis is a starter repo for creating a UI component library. It uses:\n\n- [React](https://react.dev/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Rollup](https://rollupjs.org/)\n- [Storybook](https://storybook.js.org/) and [Chromatic](https://www.chromatic.com/)\n- [Jest](https://jestjs.io/)\n- [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)\n- [PlopJS](https://plopjs.com/)\n- [Prettier](https://prettier.io/) and [EsLint](https://eslint.org/)\n- [TailwindCSS](https://tailwindcss.com/)\n\n## Working with PlopJS\n\n[PlopJS](https://plopjs.com/) is A-MAZING for generating code. If you're really interested, I wrote a little [blog post describing some of my favorite use cases.](https://selfteachme.hashnode.dev/plopjs-the-tool-every-developer-needs-for-a-faster-workflow)\n\nHere, I'm using it to generate all the code needed for an individual component (a component file, a story, a unit test, and an index file).\n\nTo use it, run `yarn plop component`. You'll be prompted for the name of your component. Then, PlopJS will create a new component folder inside of **src/components** with all the appropriate files.\n\nTo change the files, edit the templates inside `plop-templates/component`.\n\nThe plop script is located in **plopfile.mjs**.\n\n# Shout Outs\n\nI used [@Timonwa](https://github.com/Timonwa)'s [Log Rocket: How to Build a Component Library within React and TypeScript](https://blog.logrocket.com/how-to-build-component-library-react-typescript/#why-build-component-library) and [demo-ui-library](https://github.com/Timonwa/demo-ui-library) as a starting point.\n\n# Roadmap\n\n- [ ] Set up Design Tokens / [Style Dictionary](https://www.michaelmang.dev/blog/introduction-to-design-tokens)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahaywood%2Freact-package-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahaywood%2Freact-package-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahaywood%2Freact-package-starter/lists"}