docs(example-app): add create-react-app example app #206

suzubara · 2020-05-26T22:41:07Z

Fixes #77

Set up create-react-app boilerplate in /example using the Typescript template
Add @trussworks/react-uswds as a local dependency
Fix example app React module resolution
Render GovBanner in App to demo the lib is working correctly

➜ yarn audit
yarn audit v1.13.0
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ yargs-parser                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=13.1.2 <14.0.0 || >=15.0.1 <16.0.0 || >=18.1.2             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ @commitlint/cli                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ @commitlint/cli > @commitlint/lint > @commitlint/parse >     │
│               │ conventional-commits-parser > meow > yargs-parser            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/1500                      │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ yargs-parser                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=13.1.2 <14.0.0 || >=15.0.1 <16.0.0 || >=18.1.2             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ standard-version                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ standard-version > conventional-recommended-bump >           │
│               │ conventional-commits-parser > meow > yargs-parser            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/1500                      │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ yargs-parser                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=13.1.2 <14.0.0 || >=15.0.1 <16.0.0 || >=18.1.2             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ @commitlint/cli                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ @commitlint/cli > @commitlint/read > git-raw-commits > meow  │
│               │ > yargs-parser                                               │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/1500                      │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ moderate      │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ marked                                                       │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.6.2                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ @storybook/addon-info                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ @storybook/addon-info > marksy > marked                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/812                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ yargs-parser                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=13.1.2 <14.0.0 || >=15.0.1 <16.0.0 || >=18.1.2             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ @commitlint/cli                                              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ @commitlint/cli > meow > yargs-parser                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/1500                      │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ yargs-parser                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=13.1.2 <14.0.0 || >=15.0.1 <16.0.0 || >=18.1.2             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ standard-version                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ standard-version > conventional-recommended-bump >           │
│               │ git-semver-tags > meow > yargs-parser                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/1500                      │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ yargs-parser                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=13.1.2 <14.0.0 || >=15.0.1 <16.0.0 || >=18.1.2             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ standard-version                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ standard-version > git-semver-tags > meow > yargs-parser     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/1500                      │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ yargs-parser                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=13.1.2 <14.0.0 || >=15.0.1 <16.0.0 || >=18.1.2             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ standard-version                                             │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ standard-version > conventional-recommended-bump > meow >    │
│               │ yargs-parser                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/1500                      │
└───────────────┴──────────────────────────────────────────────────────────────┘
8 vulnerabilities found - Packages audited: 2231
Severity: 7 Low | 1 Moderate
✨  Done in 1.91s.

trussworks-infra-zz · 2020-05-27T20:17:21Z

	Warnings
⚠️	This PR does not include changes to storybook, even though it affects component code.

Generated by 🚫 dangerJS against 6546c36

suzubara · 2020-05-27T22:13:50Z

I wanted to note that in this PR I explicitly tell Jest to ignore /example when running yarn test at the root. The question of whether the library tests should also run example app tests is up in the air, as well as how they should factor into CI. I made an issue here to discuss that: #208

haworku

Question - Should we also .npmignore the example folder?

Also, I'm seeing an issue with babel-jest and react-scripts that's keeping me from running the yarn scripts. Did you run into this? It seems like having babel-jest somewhere outside the project directory (in this case in the parent) but also brought in by react-scripts makes things not happy.

haworku · 2020-05-28T21:41:29Z

example/config-overrides.js

+const path = require('path')
+
+// This is needed in order to correctly resolve React versions between the library & example app
+module.exports = override(


Is this going to be needed for any other (eventual) shared dependencies?

It shouldn't, as far as I'm aware react notably causes issues if multiple instances are loaded and that's what this workaround is for.

suzubara · 2020-05-29T20:49:18Z

Question - Should we also .npmignore the example folder?

ok I just reminded myself of this: we don't need to use .npmignore because we are defining the files array in package.json which whitelists files to include in the package instead of the other way around. from https://docs.npmjs.com/misc/developers:

If, given the structure of your project, you find .npmignore to be a maintenance headache, you might instead try populating the files property of package.json, which is an array of file or directory names that should be included in your package. Sometimes a whitelist is easier to manage than a blacklist.

suzubara · 2020-05-29T20:49:22Z

Also, I'm seeing an issue with babel-jest and react-scripts that's keeping me from running the yarn scripts. Did you run into this? It seems like having babel-jest somewhere outside the project directory (in this case in the parent) but also brought in by react-scripts makes things not happy.

update: added SKIP_PREFLIGHT_CHECK=true to the yarn scripts as well as a note about it in the readme

eamahanna

LGTM

feat(example-app): add create-react-app example app

1e44e8e

suzubara added status: wip Work in progress - not ready for code review type: example Example implementations of ReactUSWDS, such as Storybook or kitchen sink app labels May 26, 2020

Suzanne Rozier added 5 commits May 26, 2020 17:57

test(example-app): fix Jest React module config

8b896ba

chore(example-app): use typescript template

293726a

chore: fix jest react resolver in lib config

b07ec1b

chore(example-app): update readme, remove eject script

6246542

test(example-app): ignore example app in CI tests

d823fd7

suzubara mentioned this pull request May 27, 2020

[feat] Determine example app CI / testing workflow #208

Closed

suzubara marked this pull request as ready for review May 27, 2020 22:14

suzubara requested review from gidjin, sarboc and tinyels as code owners May 27, 2020 22:14

suzubara requested review from duncan-truss, eamahanna and haworku May 28, 2020 14:21

suzubara removed the status: wip Work in progress - not ready for code review label May 28, 2020

haworku reviewed May 28, 2020

View reviewed changes

docs(example-app): add docs about SKIP_PREFLIGHT_CHECK

bf7541e

suzubara requested a review from haworku May 29, 2020 20:49

eamahanna approved these changes Jun 1, 2020

View reviewed changes

Merge branch 'develop' into sr-example-app-77

6546c36

suzubara changed the title ~~feat(example-app): add create-react-app example app~~ docs(example-app): add create-react-app example app Jun 1, 2020

suzubara merged commit cf28086 into develop Jun 1, 2020

suzubara deleted the sr-example-app-77 branch June 1, 2020 17:21

suzubara mentioned this pull request Jun 3, 2020

chore(release): 1.5.0 #227

Merged

suzubara mentioned this pull request Jun 3, 2020

chore(release): 1.5.0 #228

Merged

haworku mentioned this pull request Jun 29, 2020

chore(release): 1.6.0 #286

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(example-app): add create-react-app example app #206

docs(example-app): add create-react-app example app #206

suzubara commented May 26, 2020 •

edited

Loading

trussworks-infra-zz commented May 27, 2020 •

edited

Loading

suzubara commented May 27, 2020

haworku left a comment

haworku May 28, 2020

suzubara May 29, 2020

suzubara commented May 29, 2020

suzubara commented May 29, 2020

eamahanna left a comment

docs(example-app): add create-react-app example app #206

docs(example-app): add create-react-app example app #206

Conversation

suzubara commented May 26, 2020 • edited Loading

trussworks-infra-zz commented May 27, 2020 • edited Loading

suzubara commented May 27, 2020

haworku left a comment

Choose a reason for hiding this comment

haworku May 28, 2020

Choose a reason for hiding this comment

suzubara May 29, 2020

Choose a reason for hiding this comment

suzubara commented May 29, 2020

suzubara commented May 29, 2020

eamahanna left a comment

Choose a reason for hiding this comment

suzubara commented May 26, 2020 •

edited

Loading

trussworks-infra-zz commented May 27, 2020 •

edited

Loading