[WNMGDS-395] Build-docs and dev-server scripts

[pwolfert]

TODO

• cmsds build-docs builds src and then builds the docs package into html pages
• cmsds build-docs runs webpack statically after building src and docs
• cmsds start runs webpack dev server and watches for changes to build the source package or the docs
• Fix babel errors when using the build-docs script in child design systems.
• Update or remove the unit tests for the script modules

Summary

• Added the build-scripts command to the design-system-scripts package.
• Refactored doc generation scripts to handle child design systems
• Changed the yarn build script alias in package.json to execute the new build script
• Temporarily removed test and lint scripts

How to test

Core CMSDS:

1. Run yarn install
2. Run yarn build to build design-system and design-system-docs
3. Run yarn start to build, serve, and watch files for the doc site
4. Test the site is reloaded correctly in the following scenarios:
   a. React component in design-system is updated
   b. React component prop documentation in design-system is updated
   c. HTML and React component examples in design-system are updated
   d. Documentation content design-system is updated (i.e. .docs.scss file)
   e. CSS in design-system is updated
   f. React component in design-system-docs is updated
   g. CSS in design-system-docs is updated

Child DS

1. Download and extract
   child-design-system-example .zip

2. Make sure child-design-system-example is in the same directory containing the core CMSDS repo, aka adjacent to the design-system repo folder.

3. Run yarn install (This will also npm link the core ds packages)

4. Go through the same tests listed above for the core CMSDS

5. Additionally test these overrides:
   a. Overriding a core React component and prop docs, ensuring it is outputted in the dist (i.e. src/Button/Button.jsx)
   b. Overriding a core React documentation (i.e. src/Button/_Button.docs.scss)
   c. Overriding core DS css (i.e. src/Button/Button.scss)
   d. Adding new DS components, documentation and css (i.e. src/NewBadge)
   e. Overriding doc site css (i.e. docs/example.scss or docs/index.scss)

[bernardwang]

@line47 @pwolfert I updated the description with details on how to test. This PR should now pass tests and should support child design systems as well.

[pwolfert]

I downloaded your latest version of the child design system and ran yarn install, but there was a parsing error when trying to build:

ERROR in /Users/patrickwolfert/Projects/child-design-system-example/node_modules/@cmsgov/design-system-docs/src/index.jsx 9:15
Module parse failed: Unexpected token (9:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| function render() {
>   const Page = <Docs page={window.page} routes={window.routes} />;
| 
|   if (process.env.NODE_ENV === 'production') {
 @ multi react-hot-loader/patch webpack-hot-middleware/client /Users/patrickwolfert/Projects/child-design-system-example/node_modules/@cmsgov/design-system-docs/src/index.jsx index[2]
ℹ ｢wdm｣: Failed to compile.

[line47]

☝️ I got the same error as Patrick did

[line47]

It looks like the docs.css is not working on the child ds like it does the core doc site.
.docs__sidebar is not applied in the same way and the left nav is wider for the child ds doc site.

changing the order of this index.scss fixes it but I don't think that's what we want to do

@import '@cmsgov/design-system-docs/src/index.scss';
// Use overriden css from child DS src
@import '../../src/index.scss';

[bernardwang]

@line47 Could you elaborate on that? Do you mean overriding the default documentation isnt working for the child DS?

[bernardwang]

@pwolfert Sorry for the last minute updates, but you need to pull dc85210 to fix that error. I also just pushed up some other fixes I found and uploaded an updated child DS example

[pwolfert]

I love the override messages:

I tried going to one of the component pages but got a bunch of errors. I've also tried spinning up a simple http server that serves the docs/dist folder, and I got similar JavaScript errors on component pages.

[line47]

@bernardwang this all for running a child ds.

• I expected the left nav to be the same width as it is on design.cms.gov but the class docs__sidebar is being overridden. I think it might have to do with the ordering of CSS.

Here is a screenshot of the wide nav

I also noticed that the css is not being minimized (should it be?) http://localhost:3000/index.css

[bernardwang]

@pwolfert I think I know which error you are talking about, it should be fixed in the latest commit!

@line47 The CSS wont be minimized unless we pass in NODE_ENV = production, which by default only happens on yarn build. I'm not able to reproduce that wide nav in the child DS some reason... It looks like this for me on the default child design system example.

[pwolfert]

Child design system build and start scripts work! LGTM

[line47]

This is fantastic and working as expected! I can make all the modifications called out in the lists above for both the core and child DS.

The left nav is no longer an issue for me, not sure what was up there.

One small issue I found:
When I made changes to docs/src/example.scss there were no changes.

I do get the terminal message however the changes are not visible

2 Sass files processed in ./docs
[Browsersync] Reloading Browsers...

I was adding this to the example.scss file

.ds-display {
    font-style: italic !important;
}

[bernardwang]

@line47 I tested it on the core and child DS and adding this seemed to work for me.

.ds-display {
    font-style: italic !important;
}

Since I can't reproduce it I'm going to go ahead and merge! I can get any follow ups in a different PR