https://github.com/wmalarski/solid-panda-98
https://github.com/wmalarski/solid-panda-98
Last synced: 7 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/wmalarski/solid-panda-98
- Owner: wmalarski
- Created: 2024-11-17T19:56:58.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-11-18T19:47:37.000Z (11 months ago)
- Last Synced: 2025-01-26T18:26:54.598Z (9 months ago)
- Language: TypeScript
- Size: 230 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Turborepo Design System
This Solid design system is powered by:
- 🏎 [Turborepo](https://turbo.build/repo) — High-performance build system for Monorepos
- 🚀 [SolidJS](https://docs.solidjs.com/) — JavaScript library for user interfaces
- 💅 [Tailwind](https://tailwindcss.com/) — Styling solution
- 👷 [Solid-UI](https://www.solid-ui.com/) — Reusable components
- 👷 [Kobalte](https://kobalte.dev) — Component library
- 🛠 [Tsup](https://rollupjs.org/) — TypeScript bundler
- 📖 [Storybook](https://storybook.js.org/) — UI component environment powered by Vite
As well as a few others tools:
- [TypeScript](https://www.typescriptlang.org/) for static type checking
- [Biome](https://biomejs.dev/) for code linting and formatting
- [Vitest](https://vitest.dev/) next generation testing framework
- [Changesets](https://github.com/changesets/changesets) for managing versioning and changelogs
### Useful Commands
- `pnpm build` - Build all packages, including the Storybook site
- `pnpm dev` - Run all packages locally and preview with Storybook
- `pnpm lint` - Lint all packages
- `pnpm changeset` - Generate a changeset
- `pnpm clean` - Clean up all `node_modules` and `dist` folders (runs each package's clean script)
## Turborepo
[Turborepo](https://turbo.build/repo) is a high-performance build system for JavaScript and TypeScript codebases. It was designed after the workflows used by massive software engineering organizations to ship code at scale. Turborepo abstracts the complex configuration needed for monorepos and provides fast, incremental builds with zero-configuration remote caching.
Using Turborepo simplifies managing your design system monorepo, as you can have a single lint, build, test, and release process for all packages. [Learn more](https://vercel.com/blog/monorepos-are-changing-how-teams-build-software) about how monorepos improve your development workflow.
## Apps & Packages
This Turborepo includes the following packages and applications:
- `apps/storybook`: Component documentation site with Storybook
- `packages/ui`: Core Solid components
- `packages/typescript-config`: Shared `tsconfig.json`s used throughout the Turborepo
Each package and app is 100% [TypeScript](https://www.typescriptlang.org/). Workspaces enables us to "hoist" dependencies that are shared between packages to the root `package.json`. This means smaller `node_modules` folders and a better local dev experience. To install a dependency for the entire monorepo, use the `-w` workspaces flag with `pnpm add`.
This example sets up your `.gitignore` to exclude all generated files, other folders like `node_modules` used to store your dependencies.
## Versioning & Publishing Packages
This example uses [Changesets](https://github.com/changesets/changesets) to manage versions, create changelogs, and publish to npm. It's preconfigured so you can start publishing packages immediately.
You'll need to create an `NPM_TOKEN` and `GITHUB_TOKEN` and add it to your GitHub repository settings to enable access to npm. It's also worth installing the [Changesets bot](https://github.com/apps/changeset-bot) on your repository.
### Generating the Changelog
To generate your changelog, run `pnpm changeset` locally:
1. **Which packages would you like to include?** – This shows which packages and changed and which have remained the same. By default, no packages are included. Press `space` to select the packages you want to include in the `changeset`.
1. **Which packages should have a major bump?** – Press `space` to select the packages you want to bump versions for.
1. If doing the first major version, confirm you want to release.
1. Write a summary for the changes.
1. Confirm the changeset looks as expected.
1. A new Markdown file will be created in the `changeset` folder with the summary and a list of the packages included.
### Releasing
When you push your code to GitHub, the [GitHub Action](https://github.com/changesets/action) will run the `release` script defined in the root `package.json`:
```bash
turbo run build --filter=docs^... && changeset publish
```
Turborepo runs the `build` script for all publishable packages (excluding docs) and publishes the packages to npm. By default, this example includes `acme` as the npm organization. To change this, do the following:
- Rename folders in `packages/*` to replace `acme` with your desired scope
- Search and replace `acme` with your desired scope
- Re-run `pnpm install`
To publish packages to a private npm organization scope, **remove** the following from each of the `package.json`'s
```diff
- "publishConfig": {
- "access": "public"
- },
```