@nypl/design-system-react-components 3.0.0-react-chakra-rc5 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -22
- package/dist/design-system-react-components.cjs +45 -45
- package/dist/design-system-react-components.js +3578 -3553
- package/dist/src/components/Icons/IconSvgs.d.ts +3 -0
- package/dist/src/components/Icons/iconVariables.d.ts +1 -1
- package/dist/src/hooks/useDSHeading.d.ts +3 -1
- package/dist/src/theme/components/button.d.ts +1 -1
- package/dist/src/theme/components/heading.d.ts +1 -1
- package/dist/src/theme/components/modal.d.ts +0 -4
- package/dist/src/theme/components/socialmedialinks.d.ts +36 -19
- package/package.json +2 -4
package/README.md
CHANGED
|
@@ -8,8 +8,9 @@ The Reservoir Design System (DS) is NYPL’s open-source extensible React librar
|
|
|
8
8
|
|
|
9
9
|
Storybook documentation
|
|
10
10
|
|
|
11
|
-
- [
|
|
11
|
+
- [V3 Production - deployed to Github Pages](https://nypl.github.io/nypl-design-system/reservoir/v3/?path=/docs/welcome--docs)
|
|
12
12
|
- [Development/QA - deployed to Vercel](https://nypl-design-system.vercel.app/?path=/docs/welcome--docs)
|
|
13
|
+
- [V2 Production - deployed to Vercel](TODO)
|
|
13
14
|
- [V1 Production - deployed to Vercel](https://nypl-design-system-git-reservoir-v173-nypl.vercel.app/)
|
|
14
15
|
|
|
15
16
|
| Table of Contents | |
|
|
@@ -139,13 +140,13 @@ The list of re-exported Chakra components can be found in the main [index.ts](/s
|
|
|
139
140
|
Find more information about the Design System's internal use of Chakra to create and refactor components in the Storybook documentation page. The following two links have the same information but in different formats for your reading preference:
|
|
140
141
|
|
|
141
142
|
- [MDX format](/src/docs/Chakra.stories.mdx)
|
|
142
|
-
- [Storybook page](https://nypl.github.io/nypl-design-system/reservoir/
|
|
143
|
+
- [Storybook page](https://nypl.github.io/nypl-design-system/reservoir/v3/?path=/docs/chakra-ui--docs)
|
|
143
144
|
|
|
144
145
|
Chakra was integrated into the Design System in version `0.25.0`. For those looking to update to a version greater than or equal `0.25.0`, check out our [Chakra Migration Guide](/CHAKRA_MIGRATION_GUIDE.md).
|
|
145
146
|
|
|
146
147
|
## Storybook
|
|
147
148
|
|
|
148
|
-
The Reservoir Design System leverages Storybook to document all the React components and style guidelines. The Storybook documentation for version
|
|
149
|
+
The Reservoir Design System leverages Storybook to document all the React components and style guidelines. The Storybook documentation for version 3.x can be found [on Github Pages](https://nypl.github.io/nypl-design-system/reservoir/v3/?path=/docs/welcome--docs). For your convenience, the Reservoir Design System components have been organized into logical categories based on both form and function. Please refer to the COMPONENTS section in the Storybook sidebar.
|
|
149
150
|
|
|
150
151
|
### Documentation Instances
|
|
151
152
|
|
|
@@ -153,7 +154,7 @@ There are currently three main instances of the Reservoir Design System Storyboo
|
|
|
153
154
|
|
|
154
155
|
**Production**
|
|
155
156
|
|
|
156
|
-
The production Storybook documentation for DS version
|
|
157
|
+
The production Storybook documentation for DS version 3.x is deployed to [Github Pages](https://nypl.github.io/nypl-design-system/reservoir/v3/?path=/docs/welcome--docs). This is the main instance we use to share the latest stable release of the Reservoir Design System. This documentation site is deployed through [Github Actions](/.github/workflows/gh-pages.yml) only on merges to the `release` and `gh-pages` branches.
|
|
157
158
|
|
|
158
159
|
As of July, 2021, the Github Pages production site gets deployed every two weeks on the same schedule as npm releases.
|
|
159
160
|
|
|
@@ -161,9 +162,13 @@ As of July, 2021, the Github Pages production site gets deployed every two weeks
|
|
|
161
162
|
|
|
162
163
|
The development Storybook documentation is deployed to [Vercel](https://nypl-design-system.vercel.app/?path=/docs/welcome--docs). This development site has all the working updates that get merged to the `development` branch. This means that this site is constantly being updated as pull requests are being merged in. This site is used to see the lastest changes during a working sprint before a production release is made.
|
|
163
164
|
|
|
165
|
+
**Version 2.x**
|
|
166
|
+
|
|
167
|
+
The Storybook documentation for DS version 2.x is deployed to [Vercel](TODO). If you are using a DS version less than 3.0, this is the Storybook documentation you should be referencing. While the DS team will continue to support version 2.x, we will not be adding new features or components to this version. We highly recommend updating to version 3.x for design update and bug fixes.
|
|
168
|
+
|
|
164
169
|
**Version 1.x**
|
|
165
170
|
|
|
166
|
-
The Storybook documentation for DS version 1.x is deployed to [Vercel](https://nypl-design-system-git-reservoir-v173-nypl.vercel.app/). If you are using a DS version less than 2.0, this is the Storybook documentation you should be referencing.
|
|
171
|
+
The Storybook documentation for DS version 1.x is deployed to [Vercel](https://nypl-design-system-git-reservoir-v173-nypl.vercel.app/). If you are using a DS version less than 2.0, this is the Storybook documentation you should be referencing. We highly recommend updating to version 3.x for design update and bug fixes.
|
|
167
172
|
|
|
168
173
|
**Preview Sites**
|
|
169
174
|
|
|
@@ -196,13 +201,13 @@ To help consuming application developers understand which version of the DS is r
|
|
|
196
201
|
|
|
197
202
|
_Make sure not to commit the directory created from the following process_.
|
|
198
203
|
|
|
199
|
-
There should be no need to run the static Storybook instance while actively developing -- it's used exclusively for building out the `gh-pages` environment and deploying it to [Github Pages](https://nypl.github.io/nypl-design-system/reservoir/
|
|
204
|
+
There should be no need to run the static Storybook instance while actively developing -- it's used exclusively for building out the `gh-pages` environment and deploying it to [Github Pages](https://nypl.github.io/nypl-design-system/reservoir/v3/?path=/docs/welcome--docs). In the event that you do run the static Storybook npm script, run:
|
|
200
205
|
|
|
201
206
|
```sh
|
|
202
|
-
$ npm run build-storybook:
|
|
207
|
+
$ npm run build-storybook:v3
|
|
203
208
|
```
|
|
204
209
|
|
|
205
|
-
You can then view `/reservoir/
|
|
210
|
+
You can then view `/reservoir/v3/index.html` in your browser. _Make sure not to commit this directory_.
|
|
206
211
|
|
|
207
212
|
## Accessibility
|
|
208
213
|
|
|
@@ -254,9 +259,9 @@ Follow the [contribution document](/.github/CONTRIBUTING.md) to follow git branc
|
|
|
254
259
|
|
|
255
260
|
### Node Version
|
|
256
261
|
|
|
257
|
-
We recommend using Node version
|
|
262
|
+
We recommend using Node version 18.x. The Github Actions for linting, automated testing, deploying to Github Pages, and releasing to npm are all running on Node 18.x.
|
|
258
263
|
|
|
259
|
-
If you are using `nvm`, the local `.nvmrc` file (using `
|
|
264
|
+
If you are using `nvm`, the local `.nvmrc` file (using `18.x`) can be use to set your local Node version with the `nvm use` command. Make sure your machine has Node version 18.x installed through `nvm` already.
|
|
260
265
|
|
|
261
266
|
### Git Branch Workflow
|
|
262
267
|
|
|
@@ -265,7 +270,7 @@ There are currently two main branches for the DS:
|
|
|
265
270
|
- `development` is the main and default branch for the DS. All new feature and bug fix pull requests should be made against this branch.
|
|
266
271
|
- `release` is the branch used to deploy the static Storybook instance to Github Pages, the DS' production Storybook instance.
|
|
267
272
|
|
|
268
|
-
When a new version of the DS is ready for release, the `development` branch is merged into the `release` branch through a pull request. Once merged, Github Actions will run to deploy the static Storybook as well as publish the new version to npm. Here is a [pull request](https://github.com/NYPL/nypl-design-system/pull/
|
|
273
|
+
When a new version of the DS is ready for release, the `development` branch is merged into the `release` branch through a pull request. Once merged, Github Actions will run to deploy the static Storybook as well as publish the new version to npm. Here is a [pull request](https://github.com/NYPL/nypl-design-system/pull/1532) that follows the convention outlined in [How to Run a Release](https://github.com/NYPL/nypl-design-system/wiki/How-to-Run-a-Release).
|
|
269
274
|
|
|
270
275
|
When working on a new feature or a bug fix:
|
|
271
276
|
|
|
@@ -299,7 +304,7 @@ The release candidate version passed QA and is ready for production! What do we
|
|
|
299
304
|
4. Delete the `package-lock.json` file and the `node_modules` directory.
|
|
300
305
|
5. Run `npm install` to install all the dependencies and create a new `package-lock.json` file with the updated version.
|
|
301
306
|
6. Push the changes to Github and create a new pull request from `development` that points to the `release` branch.
|
|
302
|
-
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.
|
|
307
|
+
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.
|
|
303
308
|
|
|
304
309
|
## Local App Development
|
|
305
310
|
|
|
@@ -458,24 +463,22 @@ You can also use the Design System styles in your project through the `unpkg` CD
|
|
|
458
463
|
|
|
459
464
|
If you need to reference a particular version you can do do by including the version number in the URL.
|
|
460
465
|
|
|
461
|
-
For version < 1.
|
|
466
|
+
For version < 2.1.0:
|
|
462
467
|
|
|
463
468
|
```html
|
|
464
469
|
<link
|
|
465
|
-
href="https://unpkg.com/@nypl/design-system-react-components@
|
|
470
|
+
href="https://unpkg.com/@nypl/design-system-react-components@2.0.0/dist/styles.css"
|
|
466
471
|
/>
|
|
467
|
-
<script src="https://unpkg.com/@nypl/design-system-react-components@
|
|
468
|
-
<script src="https://unpkg.com/@nypl/design-system-react-components@
|
|
472
|
+
<script src="https://unpkg.com/@nypl/design-system-react-components@2.0.0/dist/design-system-react-components.cjs.production.min.js" />
|
|
473
|
+
<script src="https://unpkg.com/@nypl/design-system-react-components@2.0.0/dist/design-system-react-components.esm.js" />
|
|
469
474
|
```
|
|
470
475
|
|
|
471
|
-
For version >= 1.
|
|
476
|
+
For version >= 2.1.0:
|
|
472
477
|
|
|
473
478
|
```html
|
|
474
479
|
<link
|
|
475
|
-
href="https://unpkg.com/@nypl/design-system-react-components@1.
|
|
480
|
+
href="https://unpkg.com/@nypl/design-system-react-components@2.1.1/dist/styles.css"
|
|
476
481
|
/>
|
|
477
|
-
<script src="https://unpkg.com/@nypl/design-system-react-components@1.
|
|
478
|
-
<script src="https://unpkg.com/@nypl/design-system-react-components@1.
|
|
482
|
+
<script src="https://unpkg.com/@nypl/design-system-react-components@2.1.1/dist/design-system-react-components.umd.cjs" />
|
|
483
|
+
<script src="https://unpkg.com/@nypl/design-system-react-components@2.1.1/dist/design-system-react-components.js" />
|
|
479
484
|
```
|
|
480
|
-
|
|
481
|
-
You can check out a working Codepen with unpkg [here](https://codepen.io/edwinguzman/pen/ExmXGKx).
|