moishinetzer/PBandJ

Zero-Config Reusable Component Framework for React 🥜💜

Summary

PBandJ is a CLI scaffolder (npx pbandj@latest) that generates a React + TypeScript component library pre-configured with tsup, Storybook v7, Vite, Vitest, ESLint, Prettier, and Changesets. The README notes it also works for vanilla TypeScript libraries. It targets engineers who want to publish a reusable design system or component package to npm without hand-wiring the tooling.

What it is useful for

PBandJ is useful when an engineer or team needs to spin up a shareable component library or design system quickly, with the standard pieces already wired up. It bundles the parts that are time-consuming to configure from scratch: bundling (tsup), component previewing (Storybook v7 on Vite, with the Component Story Format), testing (Vitest, plus an optional Chromatic integration for visual regression and interaction tests), formatting (Prettier), linting (ESLint), versioning and changelog generation (Changesets), and a CI/release pipeline through GitHub Actions (main.yml for linting, typechecking, tests, and build; publish.yml for npm releases). The bundler is described as hot-swappable, so if you prefer a different bundler you can replace the build script in package.json and edit tsup.config.ts (for example, to enable splitting and minify).

A documented limitation is CSS handling: most bundlers don't bundle CSS by default, and when they do, classes can collide with consumer projects. PBandJ therefore recommends CSS Modules, enforced by a css-check script. The publishing workflow also assumes main is the default branch; using a different branch requires editing publish.yml and .changeset/config.json. Styling-framework presets (Tailwind, Chakra UI, Ant Design, Emotion, Styled Components, Material UI, Chromatic) are listed in the README as planned, not currently available.

How engineers can use it

1. Run npx pbandj@latest and follow the CLI prompts to scaffold a new project.
2. Develop components in Storybook (npm run storybook) for an HMR-driven preview, or in the Vite playground (npm run dev) if you prefer a scratch app.
3. Write tests with npm run test (Vitest), and optionally configure Chromatic for visual regression and Storybook play functions for interaction tests.
4. Configure publishing once: create an npm Personal Access Token (a Publish token, or Automation token if 2FA is on), add it to GitHub Secrets as NPM_TOKEN, and in the repository settings set workflow permissions to "Read and Write" with "Allow GitHub Actions to create and approve pull requests" checked.
5. To release, run npx changeset, commit the generated changelog, and merge the release PR the GitHub Action opens. If the action fails, the README suggests renaming the package in package.json and retrying from step 5.