Skip to content

Commit b5e3774

Browse files
docs: apply review feedback
1 parent 227c0b6 commit b5e3774

File tree

2 files changed

+25
-11
lines changed

2 files changed

+25
-11
lines changed

.changeset/giant-phones-jog.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
'@lg-tools/cli': minor
44
---
55

6-
- Add more detailed color-prefixed process logging to spawned commands in link tool
76
- Added new flags to `link` script to cover broader use cases:
87
- `--no-parallel`: Run the link command sequentially for each package. Useful for when the default parallel approach fails
9-
- `--launch-env`: A string of environment variable lines as `KEY=VALUE`, separated by a newline. Only the specified environment variables will be used during npm link commands in the source and destination directories. This is useful to workaround environment variable pollution by tools such as version managers (e.g., asdf) or script runners (e.g., pnpm) that interfere with `npm link`. We recommend using `--launch-env="$(env)"` to use your original shell environment.
8+
- `--launch-env`: A string of environment variable lines as `KEY=VALUE`, separated by a newline. Only the specified environment variables will be used during npm link commands in the source and destination directories. This is useful to workaround environment variable pollution by tools such as version managers (e.g., asdf) or script runners (e.g., pnpm) that override the script's environment which impacts the launched `npm link` commands. We recommend using `--launch-env="$(env)"` to use your original shell environment.
109
- Improve documentation for linking in DEVELOPER.md

DEVELOPER.md

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -68,14 +68,14 @@ When you run the scaffold script, a `README` file will appear, which is a templa
6868

6969
### Locally
7070

71-
We use @testing-library/react for writing tests locally. This library helps mock out user interactions with components. You can run all tests by running `yarn test` or turn on watch mode with `yarn test --watch`.
71+
We use @testing-library/react for writing tests locally. This library helps mock out user interactions with components. You can run all tests by running `pnpm test` or turn on watch mode with `pnpm test --watch`.
7272

7373
### Linking
7474

7575
We provide a `link` script to help you test in-development components within environments outside of Storybook. To do this, run:
7676

7777
```
78-
yarn run link --to=[path-to-application]
78+
pnpm run link --to=[path-to-application]
7979
```
8080

8181
If you encounter issues while linking, try the following troubleshooting flags:
@@ -94,6 +94,21 @@ If you encounter issues while linking, try the following troubleshooting flags:
9494
},
9595
```
9696

97+
Note: There are some known issues using `pnpm link` from pnpm workspaces. Using Verdaccio, while
98+
more involved, is the more reliable and recommended approach for testing in an external project.
99+
100+
### Using a local registry (Verdaccio)
101+
102+
Publishing test versions to a local registry can be helpful when you need to make changes and test
103+
in an external app (or other library). To do this, you can install and
104+
use [Verdaccio](https://verdaccio.org/)
105+
106+
#### 1. Install `verdaccio`
107+
108+
```bash
109+
pnpm install --global verdaccio
110+
```
111+
97112
#### 2. Start `verdaccio`, and make note on the localhost port (should be `http://localhost:4873/` by default)
98113

99114
```bash
@@ -123,12 +138,12 @@ You should expect to see the following line in that file. (if not you can add it
123138
Ensure all packages are built, then navigate to some package and manually publish:
124139

125140
```bash
126-
yarn build;
141+
pnpm build;
127142
cd packages/<package-name>;
128-
yarn publish;
143+
pnpm publish;
129144
```
130145

131-
To ensure you are pointing to the correct registry, you can add the `--dry-run` flag to the `yarn publish` command. This command should echo:
146+
To ensure you are pointing to the correct registry, you can add the `--dry-run` flag to the `pnpm publish` command. This command should echo:
132147

133148
```
134149
npm notice Publishing to http://localhost:4873
@@ -155,23 +170,23 @@ With your local version published, open up some external app. If the app uses a
155170
Next, install the newly published version of your package in the external project.
156171

157172
```bash
158-
yarn install @leafygreen-ui/<package-name>
173+
pnpm install @leafygreen-ui/<package-name>
159174
```
160175

161176
#### 6. Publishing additional versions
162177

163-
To publish additional versions, manually the version number in `packages/<package-name>/package.json`, and re-run step 4. Then, either manually update the external project's `package.json`, or re-run `yarn install @leafygreen-ui/<package-name>`.
178+
To publish additional versions, manually the version number in `packages/<package-name>/package.json`, and re-run step 4. Then, either manually update the external project's `package.json`, or re-run `pnpm install @leafygreen-ui/<package-name>`.
164179

165180
#### 7. Publishing to NPM
166181

167182
If you want to stop publishing to and/or reading from your local Verdaccio server, remove the reference to the server URL in `~/.npmrc` (and the external project's local `.npmrc`/`.yarnrc`)
168183

169184
## Creating a new component
170185

171-
- Run `yarn create-package <package-name>` to create a new component directory with default configurations
186+
- Run `pnpm create-package <package-name>` to create a new component directory with default configurations
172187
- Add the new component to `build.tsconfig.json`
173188
- If you are using any `leafygreen-ui` dependencies in your new component, add the dependency to the component directory's `tsconfig.json`.
174-
- Run `yarn run init` to link all packages before starting development
189+
- Run `pnpm run init` to link all packages before starting development
175190

176191
## Marking a Storybook story to be imported in mongodb.design
177192

0 commit comments

Comments
 (0)