@livepeer/design-system 1.1.1 → 1.2.0

package/README.md

@@ -8,10 +8,55 @@ Visit [https://livepeer-design-system.vercel.app/](https://livepeer-design-syste
 
 ## Usage
 
+```bash
+pnpm add @livepeer/design-system
 ```
-yarn add @livepeer/design-system
+
+## Prerequisites
+
+- **Node ≥ 20** — see `.nvmrc` (use `nvm use` or `fnm use` to activate)
+- **pnpm** — managed via [corepack](https://nodejs.org/api/corepack.html). Run `corepack enable` once, then the correct pnpm version activates automatically from the `packageManager` field in `package.json`.
+
+## Local development
+
+### Running the docs site
+
+```bash
+pnpm install
+pnpm dev        # docs site at http://localhost:3001
+```
+
+### Testing changes in consumer apps
+
+The design system is consumed by apps such as the [Livepeer Explorer](https://github.com/livepeer/explorer). Use [yalc](https://github.com/wclr/yalc) to test local changes against one or more consumers before publishing — it copies files into each consumer's `node_modules` rather than symlinking, which avoids the duplicate React instance / "Invalid hook call" errors you get from `pnpm link`.
+
+```bash
+# one-time install
+npm i -g yalc
+
+# first-time publish from design-system (populates ~/.yalc/packages)
+pnpm run ds:build
+yalc publish
+
+# one-time, in each consumer app
+yalc add @livepeer/design-system
+pnpm install
+
+# in design-system, after each change
+pnpm run ds:build && yalc push
 ```
 
-## License
+`yalc publish` puts the package in your local yalc store so consumers can `yalc add` it. `yalc push` rebuilds the store entry *and* propagates the new build to every consumer that has already added it. To unlink: run `yalc remove @livepeer/design-system` in each consumer and restore the original dependency version.
+
+For a faster dev loop, run tsup in watch mode and push manually when you want to test:
+
+```bash
+# terminal 1: rebuild on save
+tsup --watch
+
+# terminal 2: sync to consumers
+yalc push
+```
 
-Licensed under the [MIT](./LICENSE) license.
+> [!TIP]
+> Next.js sometimes ignores changes inside `node_modules`. If HMR doesn't fire after `yalc push`, touch a source file in the consumer app or restart its dev server.