@nypl/design-system-react-components 1.5.1 → 1.5.2
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 +21 -5
- package/dist/components/Logo/Logo.d.ts +1 -1
- package/dist/components/Logo/LogoSvgs.d.ts +2 -0
- package/dist/design-system-react-components.cjs.development.js +297 -244
- package/dist/design-system-react-components.cjs.development.js.map +1 -1
- package/dist/design-system-react-components.cjs.production.min.js +1 -1
- package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
- package/dist/design-system-react-components.esm.js +297 -245
- package/dist/design-system-react-components.esm.js.map +1 -1
- package/dist/hooks/useCloseDropDown.d.ts +2 -1
- package/dist/index.d.ts +1 -0
- package/package.json +4 -3
- package/CHANGELOG.md +0 -1861
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ Storybook documentation
|
|
|
18
18
|
| 3. | [Storybook](#storybook) |
|
|
19
19
|
| 4. | [Accessibility](#accessibility) |
|
|
20
20
|
| 5. | [Contributing Quickstart](#contributing-quickstart) |
|
|
21
|
-
| 6. | [
|
|
21
|
+
| 6. | [Local App Development](#local-app-development) |
|
|
22
22
|
| 7. | [Typescript Usage](#typescript-usage) |
|
|
23
23
|
| 8. | [Unit Testing](#unit-testing) |
|
|
24
24
|
| 9. | [CDN](#cdn) |
|
|
@@ -336,7 +336,23 @@ For now, this is a manual process until the repo's node version and build system
|
|
|
336
336
|
| `development` | `"build-storybook:v1": "npm run prebuild:storybook && NODE_OPTIONS=--openssl-legacy-provider build-storybook -c .storybook -o ./reservoir/v1",` |
|
|
337
337
|
| `release` | `"build-storybook:v1": "npm run prebuild:storybook && build-storybook -c .storybook -o ./reservoir/v1",` |
|
|
338
338
|
|
|
339
|
-
##
|
|
339
|
+
## Local App Development
|
|
340
|
+
|
|
341
|
+
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.
|
|
342
|
+
|
|
343
|
+
_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._
|
|
344
|
+
|
|
345
|
+
### Developing with npm install
|
|
346
|
+
|
|
347
|
+
To develop with a local version of the Design System:
|
|
348
|
+
|
|
349
|
+
1. In the root of the consuming application directory, run:
|
|
350
|
+
|
|
351
|
+
```sh
|
|
352
|
+
$ npm install --no-save [../path/to/design-system]
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
### Developing with npm link
|
|
340
356
|
|
|
341
357
|
To develop with a local version of the Design System:
|
|
342
358
|
|
|
@@ -352,13 +368,13 @@ $ npm link
|
|
|
352
368
|
$ npm link @nypl/design-system-react-components
|
|
353
369
|
```
|
|
354
370
|
|
|
355
|
-
3. Go back to the Design System directory and run the following command. It
|
|
371
|
+
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:
|
|
356
372
|
|
|
357
373
|
```sh
|
|
358
374
|
$ npm start
|
|
359
375
|
```
|
|
360
376
|
|
|
361
|
-
|
|
377
|
+
#### Error Troubleshooting
|
|
362
378
|
|
|
363
379
|
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.
|
|
364
380
|
|
|
@@ -370,7 +386,7 @@ $ npm link [../path/to/application]/node_modules/react
|
|
|
370
386
|
|
|
371
387
|
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.
|
|
372
388
|
|
|
373
|
-
|
|
389
|
+
#### npm Unlink
|
|
374
390
|
|
|
375
391
|
To unlink the DS codebase:
|
|
376
392
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
export declare type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "digitalCollectionsBlack" | "digitalCollectionsWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnColor" | "mlnWhite" | "nycdoeColor" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "nyplTextBlack" | "nyplTextWhite" | "openebooksColor" | "openebooksNegative" | "openebooksWithTextColor" | "openebooksWithTextNegative" | "qplAltBlack" | "qplAltWhite" | "qplBlack" | "qplColor" | "qplWhite" | "reservoirIconColor" | "reservoirVerticalColor" | "schomburgBlack" | "schomburgCircleBlack" | "schomburgCircleColor" | "schomburgCircleWhite" | "schomburgColor" | "schomburgWhite" | "simplyeBlack" | "simplyeWhite" | "simplyeColor" | "snflBlack" | "snflWhite" | "treasuresColor" | "treasuresColorNegative";
|
|
2
|
+
export declare type LogoNames = "appleAppStoreBlack" | "appleAppStoreWhite" | "bplBlack" | "bplWhite" | "cleverBadgeColor" | "cleverColor" | "cleverWhite" | "digitalCollectionsBlack" | "digitalCollectionsWhite" | "firstbookColor" | "firstbookColorNegative" | "googlePlayBlack" | "lpaBlack" | "lpaColor" | "lpaWhite" | "mlnBlack" | "mlnColor" | "mlnWhite" | "nycdoeBlack" | "nycdoeColor" | "nycdoeWhite" | "nyplFullBlack" | "nyplFullWhite" | "nyplLionBlack" | "nyplLionWhite" | "nyplTextBlack" | "nyplTextWhite" | "openebooksColor" | "openebooksNegative" | "openebooksWithTextColor" | "openebooksWithTextNegative" | "qplAltBlack" | "qplAltWhite" | "qplBlack" | "qplColor" | "qplWhite" | "reservoirIconColor" | "reservoirVerticalColor" | "schomburgBlack" | "schomburgCircleBlack" | "schomburgCircleColor" | "schomburgCircleWhite" | "schomburgColor" | "schomburgWhite" | "simplyeBlack" | "simplyeWhite" | "simplyeColor" | "snflBlack" | "snflWhite" | "treasuresColor" | "treasuresColorNegative";
|
|
3
3
|
export declare type LogoSizes = "default" | "xxsmall" | "xsmall" | "small" | "medium" | "large";
|
|
4
4
|
export interface LogoProps {
|
|
5
5
|
/** Optional className that will be added to the parent element */
|