{"id":13422476,"url":"https://github.com/moishinetzer/pbandj","last_synced_at":"2025-03-16T12:31:26.888Z","repository":{"id":65420741,"uuid":"559594283","full_name":"moishinetzer/PBandJ","owner":"moishinetzer","description":"Zero-Config Reusable Component Framework for React 🥜💜","archived":false,"fork":false,"pushed_at":"2024-01-17T16:55:06.000Z","size":1610,"stargazers_count":111,"open_issues_count":5,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-09T01:12:31.283Z","etag":null,"topics":["design-system","library","npm","package","react","reactjs","storybook","styleguide","typescript","zero-config"],"latest_commit_sha":null,"homepage":"","language":"MDX","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/moishinetzer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2022-10-30T15:47:17.000Z","updated_at":"2025-03-03T10:13:07.000Z","dependencies_parsed_at":"2024-01-07T18:07:27.081Z","dependency_job_id":null,"html_url":"https://github.com/moishinetzer/PBandJ","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moishinetzer%2FPBandJ","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moishinetzer%2FPBandJ/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moishinetzer%2FPBandJ/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moishinetzer%2FPBandJ/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moishinetzer","download_url":"https://codeload.github.com/moishinetzer/PBandJ/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243814880,"owners_count":20352037,"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":["design-system","library","npm","package","react","reactjs","storybook","styleguide","typescript","zero-config"],"created_at":"2024-07-30T23:00:45.799Z","updated_at":"2025-03-16T12:31:26.465Z","avatar_url":"https://github.com/moishinetzer.png","language":"MDX","funding_links":[],"categories":["Code Design"],"sub_categories":["Boilerplate"],"readme":"\u003ch1 align=\"center\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/moishinetzer/PBandJ/main/public/logo.png\" width=\"400px\" /\u003e\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eThe Zero-Config Reusable Component Framework For React\u003c/b\u003e\n\u003c/p\u003e\n\n---\n\n## Introduction\n\nPBandJ is an all-in-one tool to quickly create and publish a high-quality component library, taking care of tedious setup and ensuring best practices. Publish your library to be reused across projects or shared with others!\n\n\u003e PBandJ works just as well for publishing vanilla TypeScript libraries too!\n\n## What's Inside\n\n- ⚛️ React, with TypeScript by default\n\n- 📦 Tsup for building and bundling\n\n- 🤖 GitHub Actions for publishing to npm and testing\n\n- 📕 Storybook v7 running on Vite for instant HMR\n\n- ⚡ Vite playground dev server\n\n- 🦋 Changesets for versioning\n\n- 🧪 Vitest for testing\n\n- 🕵️‍♂️ Eslint for linting\n\n- 💅 Prettier for formatting\n\n## Getting Started\n\nTo get started run the following:\n\n```sh\nnpx pbandj@latest\n```\n\nThis will run you through the CLI to get your project set up with all the tools you need to get started!\n\n---\n\n## 🚀 Publishing\n\nTo publish your library to npm, you need to follow the steps below.\n\n### 1. Generate a Personal Access Token\n\nTo publish your library to npm, you need to generate a personal access token. This is a token that is used to authenticate you when publishing to npm. You can generate one [here][npm-token].\n\nIf your account requires 2FA, you will need to generate an `Automation` token, otherwise, a `Publish` token will suffice.\n\n### 2. Add the Token to GitHub Secrets\n\nOnce you have generated your token, you need to add it to your GitHub repository as a secret. This is so that the GitHub Action can use it to publish your library to npm. You can find out how to do this [here][github-secrets].\n\nSet the name of the secret to `NPM_TOKEN` and the value to your token.\n\n### 3. Change the GitHub Workflow Permissions\n\nThis can be done by going to the `Settings` tab of your repository, then going to `Actions` and then `General` and changing the Workflow Permissions to allow \"Read and Write permissions\", and make sure the box that says \"Allow GitHub Actions to create and approve pull requests\" is checked.\n\n### 4. Commit a Changeset\n\nOnce you have added your token to GitHub secrets, you need to commit a changeset. Generate your first changeset by running:\n\n```sh\nnpx changeset\n```\n\nThen commit the changeset log to trigger the GitHub Action.\n\nSee [below](#-changesets) for more information on how to use changesets.\n\n\u003e Note: PBandJ has been configured assuming projects use the `main` branch as the default branch. If you use a different branch, you will need to change the `publish.yml` file in the `.github/workflows` folder to use your default branch. You will also need to change the `config.json` file in the `.changeset` folder to use your default branch.\n\n### 5. Merge the Release PR\n\nOnce the GitHub Action has been triggered, it will create a PR that will publish your library to npm. Once the PR has been merged, your library will be published to npm!\n\n\u003e Note: Sometimes the GitHub Action can fail, this can be due to a number of reasons most likely it is to do with the name of your package. If this happens, change the name of your package in `package.json`, and either rerun the action or try again from step 4.\n\n## 📦 Bundling\n\nThis project uses [tsup][] for bundling.\n\nEverything that PBandJ uses is hot-swappable. Meaning, if you don't want to use tsup as a bundler for whatever reason you can easily change it to your favourite bundler. Change the `build` scripts in `package.json` to whatever you want.\n\nYou can edit the `tsup.config.ts` file to your liking.\n\nFor example, if you wanted to enable code-splitting and minify the code your config would look like this:\n\n```ts\n// tsup.config.ts\n\nexport default defineConfig({\n  // ...\n  splitting: true,\n  minify: true,\n});\n```\n\n### CSS Caveat\n\nMost bundlers don't bundle CSS by default at all. When they do, it usually requires injecting the styles directly into the head tag, which means that any classes you define could potentially clash with any other project that uses your library.\n\nFor this reason, we _highly_ recommend only using CSS Modules (which is what the `css-check` script checks for) and PostCSS plugins for other transformations.\n\n## 📕 Storybook\n\n[Storybook][] has been preconfigured to run on Vite, which means that you get instant HMR when developing your components. This is a huge productivity boost when developing components.\n\nTo start storybook run:\n\n```sh\nnpm run storybook\n```\n\nPBandJ utilises version 7 of Storybook, which means that you can use the new Component Story Format (CSF) to write your stories.\n\nCheck out the [official documentation][] for more information on how to make the most out of the awesome features that Storybook provides.\n\n## ⚡ Vite Dev Server\n\nEach project is preconfigured with a [Vite][] dev server that can be started by running:\n\n```sh\nnpm run dev\n```\n\nThis has been provided for those that like to create components in a playground rather than a storybook-first approach.\n\n## 🦋 Changesets\n\n[Changesets][] are used to version your library, and publish it to npm.\n\nTo create a changesets run:\n\n```sh\nnpx changeset\n```\n\nCommit the generated changelog to trigger the GitHub Action mentioned [below](#-github-actions).\n\nThe files that you commit alongside the generated changeset log are the changes that will be referenced in the release notes. This means you can commit the changeset log by itself to just trigger the publish without referencing the exact files.\n\n## 🤖 GitHub Actions\n\nThere are two actions provided out of the box located in the `.github/workflows` folder.\n\n`main.yml`:\n\n- This action is run on all branches.\n- It runs linting, tests, and typechecking.\n- It runs typechecking, and performs a build to make sure it can be built safely.\n\n`publish.yml`\n\n- This action is run on the `main` branch\n- If there is a changeset that was committed, a PR is created that when merged will automatically publish that version to npm.\n- If a publishing PR already exists, the changes are added to that release PR.\n\n## 🧪 Testing\n\nThere are several approaches to testing components that have been provided out of the box.\n\n### Vitest\n\n[Vitest][] is a testing framework that is built on top of Vite. It is a great choice for testing components, as it provides a fast and easy way to test components. It's mainly used to test the functionality of components, rather than the visual aspects, however it can be used for both.\n\nTo run the tests, run:\n\n```sh\nnpm run test\n```\n\n### Storybook Tests\n\nThe recommended way to run storybook tests is to use the [Chromatic][] integration. This is a service that allows you to run visual regression tests on your components.\n\nThe setup steps can be found [here][chromatic-setup].\n\nOnce that has been set up, you can use the Storybook play function to run integration tests on your components. See the [official documentation][storybook-play-functions] for more information.\n\n## Future Features\n\nThere is a planned configuration to be added to the CLI, that will allow simple setup of popular styling frameworks.\n\nThese are an example of some that could be added to help users get set up automatically.\n\n- [TailwindCSS][]\n- [ChakraUI][]\n- [Ant Design][]\n- [Emotion][]\n- [Styled Components][]\n- [Material UI][]\n- [Chromatic][]\n\n## Made With PBandJ\n\nGet us started by sharing your component library!\n\nOpen up an issue [here][new-project-issue].\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://mnetzer.com\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/11411486?v=4?s=100\" width=\"100px;\" alt=\"Moishi Netzer\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMoishi Netzer\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/moishinetzer/PBandJ/commits?author=moishinetzer\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/moishinetzer/PBandJ/commits?author=moishinetzer\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.alexmaldonado.dev/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/66364639?v=4?s=100\" width=\"100px;\" alt=\"Alex Maldonado\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlex Maldonado\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#question-AlexMNet\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/Zonalds\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/50281058?v=4?s=100\" width=\"100px;\" alt=\"Paschal\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePaschal\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#question-Zonalds\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/MartinPlayon\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/142259939?v=4?s=100\" width=\"100px;\" alt=\"MartinPlayon\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMartinPlayon\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/moishinetzer/PBandJ/commits?author=MartinPlayon\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/moishinetzer/PBandJ/pulls?q=is%3Apr+reviewed-by%3AMartinPlayon\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n## License\n\nThis project is licensed under the terms of the MIT license.\n\n[npm-token]: https://docs.npmjs.com/creating-and-viewing-access-tokens#creating-access-tokens\n[github-secrets]: https://docs.github.com/en/actions/security-guides/encrypted-secrets#creating-encrypted-secrets-for-a-repository\n[tsup]: https://tsup.egoist.dev/\n[storybook]: https://storybook.js.org/\n[official documentation]: https://storybook.js.org/docs/7.0/react/get-started/introduction\n[vite]: https://vitejs.dev/\n[changesets]: https://github.com/changesets/changesets\n[vitest]: https://vitest.dev/\n[chromatic-setup]: https://storybook.js.org/docs/7.0/react/writing-tests/visual-testing#setup-chromatic-addon\n[storybook-play-functions]: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing\n[tailwindcss]: https://tailwindcss.com/\n[chakraui]: https://chakra-ui.com/\n[ant design]: https://ant.design/\n[emotion]: https://emotion.sh/\n[styled components]: https://styled-components.com/\n[material ui]: https://material-ui.com/\n[chromatic]: https://www.chromatic.com/\n\n[new-project-issue]: https://github.com/moishinetzer/PBandJ/issues/new?title=[Example%20Project]:%20\u0026body=Please%20add%20this%20project%20that%20was%20created%20with%20PBandJ%20to%20the%20README:\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoishinetzer%2Fpbandj","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoishinetzer%2Fpbandj","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoishinetzer%2Fpbandj/lists"}