@nypl/design-system-react-components 1.5.1 → 1.6.0-vite-rc

package/README.md

@@ -18,7 +18,7 @@ Storybook documentation
 | 3.                | [Storybook](#storybook)                                                             |
 | 4.                | [Accessibility](#accessibility)                                                     |
 | 5.                | [Contributing Quickstart](#contributing-quickstart)                                 |
-| 6.                | [Developing with NPM Link](#developing-with-npm-link)                               |
+| 6.                | [Local App Development](#local-app-development)                                     |
 | 7.                | [Typescript Usage](#typescript-usage)                                               |
 | 8.                | [Unit Testing](#unit-testing)                                                       |
 | 9.                | [CDN](#cdn)                                                                         |
@@ -98,18 +98,7 @@ For apps using parcel, prepend the string import with `npm:` such as :
 @import "npm:@nypl/design-system-react-components/dist/styles.css";
 ```
 
-4. Optionally import the `@nypl/design-system-react-components/dist/resources.scss` file in your main _scss_ file. This file contains useful SCSS mixins that can be used for global or component style rules.
-
-```scss
-@import "@nypl/design-system-react-components/dist/resources.scss";
-
-// `screenreader-only` is one example of a mixing from `resources.scss`:
-legend {
-  @include screenreader-only;
-}
-```
-
-5. Use DS components!
+4. Use DS components!
 
 Consult Storybook for the list of available components and props that they require.
 
@@ -196,7 +185,7 @@ When actively developing components or fixing bugs, make sure that the related s
 For stand-alone document pages in Storybook, you need to:
 
 1. create the `[page-name].stories.mdx` file in `src/docs/`
-2. add the file reference to the `.storybook/main.js` file in the `stories` array
+2. add the file reference to the `.storybook/main.cjs` file in the `stories` array
 
 ### React Component Versions
 
@@ -272,9 +261,9 @@ Follow the [contribution document](/.github/CONTRIBUTING.md) to follow git branc
 
 ### Node Version
 
-We recommend using Node version 14.x since the DS has some issues with versions higher than 14.x. The Github Actions for linting, automated testing, deploying to Github Pages, and releasing to npm are all running on Node 14.x.
+We recommend using Node version 16.x. The Github Actions for linting, automated testing, deploying to Github Pages, and releasing to npm are all running on Node 16.x.
 
-If you are using `nvm`, the local `.nvmrc` file can be use to set your local Node version with the `nvm use` command (will be set to `14.x`).
+If you are using `nvm`, the local `.nvmrc` file (using `16.x`) can be use to set your local Node version with the `nvm use` command. Make sure your machine has Node version 16.x installed through `nvm` already.
 
 ### Git Branch Workflow
 
@@ -317,26 +306,25 @@ The release candidate version passed QA and is ready for production! What do we
 4. Delete the `package-lock.json` file and the `node_modules` directory.
 5. Run `npm install` to install all the dependencies and create a new `package-lock.json` file with the updated version.
 6. Push the changes to Github and create a new pull request from `development` that points to the `release` branch.
-7. Once approved and merged, a Github Action will run that will automatically deploy the static Storybook to Github Pages and publish the new version to npm.
+7. Once approved and merged, a Github Action will run that will automatically deploy the static Storybook to Github Pages and publish the new version to npm. |
 
-#### Release Troubleshooting
+## Local App Development
 
-There is currently a bug with node that causes Vercel preview instances to fail and not build correctly. In order to fix this, the build script has an included node flag added. This can be found in package.json:
+Sometimes, you may want to test out a new feature or bug fix in a local app rather than publishing a release candidate version to npm. While this is possible, it is not always straightforward.
 
-```json
-  "build-storybook:v1": "npm run prebuild:storybook && NODE_OPTIONS=--openssl-legacy-provider build-storybook -c .storybook -o ./reservoir/v1",
-```
+_Please note that the following instructions depend on the node version for both the Design System and the local app. If the node versions are different, the instructions may not work. This is a limitation of npm._
 
-Unfortunately, while this helps the Vercel previews to build correctly, it causes the Github Action that builds the production Storybook to fail. Because of this, the `release` branch must _not_ include the `NODE_OPTIONS=--openssl-legacy-provider` flag. This means that the `release` branch must be updated to remove this flag before merging the `development` branch into it.
+### Developing with npm install
+
+To develop with a local version of the Design System:
 
-For now, this is a manual process until the repo's node version and build system are updated.
+1. In the root of the consuming application directory, run:
 
-| Branch        | Script                                                                                                                                          |
-| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| `development` | `"build-storybook:v1": "npm run prebuild:storybook && NODE_OPTIONS=--openssl-legacy-provider build-storybook -c .storybook -o ./reservoir/v1",` |
-| `release`     | `"build-storybook:v1": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v1",`                                        |
+```sh
+$ npm install --no-save [../path/to/design-system]
+```
 
-## Developing with NPM Link
+### Developing with npm link
 
 To develop with a local version of the Design System:
 
@@ -352,13 +340,13 @@ $ npm link
 $ npm link @nypl/design-system-react-components
 ```
 
-3. Go back to the Design System directory and run the following command. It allos the local Design System to be rebuilt and exported automatically:
+3. Go back to the Design System directory and run the following command. It allows the local Design System to be rebuilt and exported automatically:
 
 ```sh
 $ npm start
 ```
 
-### Error Troubleshooting
+#### Error Troubleshooting
 
 It's possible when running `npm link` that you'll get an `Invalid Hook` issue. If this occurs, it's most likely caused by having two versions of React when trying to run the application while the NYPL DS package is linked. This [Duplicate React](https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react) issue is covered by the React team.
 
@@ -370,7 +358,7 @@ $ npm link [../path/to/application]/node_modules/react
 
 Now you should be able to run `npm start` in the DS directory and `npm run dev` (or whatever your application uses) in the application directory and not get an `Invalid Hook` error.
 
-### npm Unlink
+#### npm Unlink
 
 To unlink the DS codebase:
 
@@ -465,24 +453,36 @@ After writing new tests, run `npm run test:generate-output` to create a new JSON
 
 ## CDN
 
-You can also use the Design System styles in your project through the `unpkg` CDN:
+You can also use the Design System styles in your project through the `unpkg` CDN, but not that this is not recommended for production use.
 
 ```html
 <link
   href="https://unpkg.com/@nypl/design-system-react-components/dist/styles.css"
 />
-<script src="https://unpkg.com/@nypl/design-system-react-components/dist/design-system-react-components.cjs.production.min.js" />
-<script src="https://unpkg.com/@nypl/design-system-react-components/dist/design-system-react-components.esm.js" />
+<script src="https://unpkg.com/@nypl/design-system-react-components/dist/design-system-react-components.umd.cjs" />
+<script src="https://unpkg.com/@nypl/design-system-react-components/dist/design-system-react-components.js" />
+```
+
+If you need to reference a particular version you can do do by including the version number in the URL.
+
+For version < 1.6.0:
+
+```html
+<link
+  href="https://unpkg.com/@nypl/design-system-react-components@1.5.1/dist/styles.css"
+/>
+<script src="https://unpkg.com/@nypl/design-system-react-components@1.5.1/dist/design-system-react-components.cjs.production.min.js" />
+<script src="https://unpkg.com/@nypl/design-system-react-components@1.5.1/dist/design-system-react-components.esm.js" />
 ```
 
-If you need to reference a particular version you can do do by including the version number in the URL:
+For version >= 1.6.0:
 
 ```html
 <link
-  href="https://unpkg.com/@nypl/design-system-react-components@1.0.0/dist/styles.css"
+  href="https://unpkg.com/@nypl/design-system-react-components@1.6.0/dist/styles.css"
 />
-<script src="https://unpkg.com/@nypl/design-system-react-components@1.0.0/dist/design-system-react-components.cjs.production.min.js" />
-<script src="https://unpkg.com/@nypl/design-system-react-components@1.0.0/dist/design-system-react-components.esm.js" />
+<script src="https://unpkg.com/@nypl/design-system-react-components@1.6.0/dist/design-system-react-components.umd.cjs" />
+<script src="https://unpkg.com/@nypl/design-system-react-components@1.6.0/dist/design-system-react-components.js" />
 ```
 
 You can check out a working Codepen with unpkg [here](https://codepen.io/edwinguzman/pen/ExmXGKx).