https://github.com/bigcommerce/big-design-patterns-sandbox
A library of useful pattern components to speed up development of React/BigDesign applications
https://github.com/bigcommerce/big-design-patterns-sandbox
Last synced: 4 months ago
JSON representation
A library of useful pattern components to speed up development of React/BigDesign applications
- Host: GitHub
- URL: https://github.com/bigcommerce/big-design-patterns-sandbox
- Owner: bigcommerce
- Created: 2024-05-17T15:52:25.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-11-07T21:42:10.000Z (8 months ago)
- Last Synced: 2025-11-07T23:27:22.408Z (8 months ago)
- Language: TypeScript
- Homepage: https://bigcommerce.github.io/big-design-patterns-sandbox/
- Size: 5.81 MB
- Stars: 0
- Watchers: 4
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# BigDesign Patterns Sandbox
This monorepo is a sandbox environment for developing and testing BigDesign Patterns. There are two packages:
- `examples-site` is a lightweight site that showcases usage of the patterns
- `patterns` contains the components
The patterns are published on npm under [bigcommerce-design-patterns](https://www.npmjs.com/package/bigcommerce-design-patterns) so they can be more easily stress tested in apps before being added into the main BigDesign library.
## Developing
### Getting started
Before running any commands, make sure you have `pnpm` installed:
```sh
npm install -g pnpm
```
### Running the example site
Run the example site in dev mode by:
```sh
pnpm run dev
```
In dev mode, editing the components within the `patterns` package will hot-reload the example site, as the site uses the workspace to reference the `bigcommerce-design-patterns` dependency.
### Using the local patterns package in another local project
To use the local patterns package in another local project:
1. Add the following to the `package.json` file in your project (updating the path to the local patterns package):
```json
"bigcommerce-design-patterns": "link:../big-design-patterns-sandbox/packages/patterns",
```
2. Run `pnpm install` to install the local patterns package, creating a symlink in the local project's `node_modules` directory that points to the local patterns package. Your project will use the built files in the `dist` directory of the patterns package, so you'll need to run `pnpm run build` in the patterns package to build the files before using them in your project.
#### Hot reloading
If you want to enable hot reloading of the patterns package, you can run `pnpm run build:watch` in the patterns package folder (`big-design-patterns-sandbox/packages/patterns`) to watch for changes and rebuild the files on file save.
## Publishing
### Using changesets to publish a new version
This repo uses [changesets](https://github.com/changesets/changesets) to version the packages in a consistent manner. It also builds a changelog automatically.
To release a new version with changes:
1. Run the following command to create a new changeset:
```sh
npx @changesets/cli
```
The CLI will ask you to select which package(s) are being updated and if the packages should have a major or minor bump. After confirming these answers, a new changeset will be created in `/.changeset`.
2. Commit the generated file in `/.changeset/` to your branch and push to GitHub.
3. Create a PR with your changes and the changeset.
4. Once the PR is approved and merged into the `main` branch, the GitHub Action at `/.github/workflows/release.yml` will run, which creates a version bump PR.
5. Merging the version bump PR will release the new package version to NPM.