[terra-dev-site] Terra dev site v7 (#255)

* first pass

* remove unsaved changes prompt

* clean up

* Downgrade modals to use modal manager, update doc.

* kaiju 404 page

* lint fixes

* some more lint fixes

* build plz

* Adding side nav button back and overlay.

* temporarily disable eslint false positives

* translations and theming

* Fix lint

* terra-docs translations

* Updated screenshots

* remove extra whitespace from the end of the codeblocks

* Themes and allow for custom app base and app nav

* Offer reload button on chuck load failure

* Re-organized files

* updated screenshots

* fix link, move up side effect imports

* Change logs

* polyfills

* fix

* test fixes, and other fixes

* use the 'isFilterStyle' option for the native select in settings.

* Add an faq on sizing

* Updated screenshots, added doc for webpack 4 no entry case.

* Apply suggestions from code review

Co-authored-by: Tyler Biethman <[email protected]>

* Apply suggestions from code review

* Update packages/terra-dev-site/README.md

* CR fixes and updates to proptypes

* Apply suggestions from code review

Co-authored-by: Ben Cai <[email protected]>
Co-authored-by: Jaime Mackey <[email protected]>

* add in test extension, updates tests

* Doc updates

* routing should be case insensitive

* Fix graphs examples, Remove portaling for pages, update portaling for secondary nav items.

* Update packages/terra-application-docs/src/terra-dev-site/tool/terra-dev-site/UpgradeGuides.f/v7.0.0.s.tool.mdx

Co-authored-by: Jaime Mackey <[email protected]>

* whoops flip this back

* no scrolling when secondary nav is open

* Updating translations

* Apply suggestions from code review

Co-authored-by: Ryan Manuel <[email protected]>

* remove commented code

* only add the entry loader once for all site plugins.

* Apply suggestions from code review

Co-authored-by: Emily Rohrbough  <[email protected]>

* update tests

* doc update

Co-authored-by: Tyler Biethman <[email protected]>
Co-authored-by: Ben Cai <[email protected]>
Co-authored-by: Jaime Mackey <[email protected]>
Co-authored-by: Ryan Manuel <[email protected]>
Co-authored-by: Emily Rohrbough  <[email protected]>

jest.config.js

@@ -3,6 +3,10 @@ const jestConfig = require('@cerner/jest-config-terra');
 module.exports = {
   ...jestConfig,
   globalSetup: './jest.globalSetup.js',
+  coveragePathIgnorePatterns: [
+    ...jestConfig.coveragePathIgnorePatterns,
+    '/packages/terra-polyfill/src/index.js',
+  ],
   setupFiles: [
     './jest.enzymeSetup.js',
   ],

package.json

@@ -55,9 +55,9 @@
     "compile:build": "lerna ls -a | sed 's/@cerner\\///g' | cut -d ' ' -f1 | xargs -I {} babel packages/{}/src --out-dir packages/{}/lib --copy-files",
     "compile:clean": "rm -rf packages/**/lib",
     "compile:src": "lerna run compile",
-    "compile:prod": "rm -rf ./build; NODE_ENV=production webpack -p",
-    "compile:lowlight": "rm -rf ./build; THEME=clinical-lowlight-theme webpack -p",
-    "compile:fusion": "rm -rf ./build; THEME=orion-fusion-theme webpack -p",
+    "compile:prod": "rm -rf ./build; NODE_ENV=production webpack --mode=production",
+    "compile:lowlight": "rm -rf ./build; THEME=clinical-lowlight-theme webpack --mode=production",
+    "compile:fusion": "rm -rf ./build; THEME=orion-fusion-theme webpack --mode=production",
     "danger": "danger ci",
     "deploy": "npm run compile:prod && gh-pages -d build",
     "heroku-postbuild": "npm install --only=dev && npm run compile:prod",
@@ -70,8 +70,8 @@
     "prepare-for-release": "terra prepare-for-release",
     "pretest": "npm run lint",
     "postinstall": "link-parent-bin && npm run compile && npm run bootstrap:hoist",
-    "start": "webpack-dev-server",
-    "start-prod": "webpack-dev-server --env.disableHotReloading -p",
+    "start": "webpack serve",
+    "start-prod": "webpack serve --mode=production",
     "start-heroku": "terra express-server --port $PORT --site './build' ",
     "start-static": "npm run compile:prod && terra express-server --site ./build",
     "test": "npm run lint && npm run jest && npm run wdio",
@@ -82,8 +82,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.13.14",
-    "@babel/core": "7.10.5",
-    "@babel/parser": "7.10.5",
+    "@babel/core": "^7.13.14",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
     "@babel/plugin-transform-async-to-generator": "^7.13.0",
@@ -105,32 +104,29 @@
     "@testing-library/react": "^10.0.4",
     "@testing-library/react-hooks": "^5.0.0",
     "@testing-library/user-event": "^12.6.0",
-    "core-js": "^3.15.4",
+    "core-js": "^3.15.2",
     "danger": "^9.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
     "eslint": "^7.19.0",
     "gh-pages": "^3.1.0",
-    "html-webpack-plugin": "^3.1.0",
+    "html-webpack-plugin": "^4.5.0",
+    "intl": "^1.2.5",
     "jest": "^26.6.3",
     "lerna": "^3.16.4",
     "link-parent-bin": "^1.0.0",
     "loader-runner": "^4.1.0",
     "postcss": "^8.2.10",
-    "postcss-assets-webpack-plugin": "^4.0.0",
-    "postcss-custom-properties": "^10.0.0",
-    "postcss-loader": "^4.1.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-intl": "^2.9.0",
     "regenerator-runtime": "^0.13.9",
     "stylelint": "^13.0.0",
     "terra-collapsible-menu-view": "^6.29.0",
-    "terra-dev-site": "^6.15.0",
     "terra-enzyme-intl": "^3.3.0",
-    "webpack": "^4.42.0",
-    "webpack-cli": "^3.3.11",
+    "webpack": "^5.28.0",
+    "webpack-cli": "^4.6.0",
     "webpack-dev-server": "^3.10.3",
     "webpack-merge": "^5.7.3"
   }

packages/terra-application-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * terra-dev-site v7 docs
+
 ## 1.2.0 - (August 26, 2021)
 
 * Changed

packages/terra-application-docs/package.json

@@ -36,9 +36,15 @@
   },
   "dependencies": {
     "@cerner/terra-docs": "^1.0.0",
+    "@cerner/terra-dev-site": "^6.30.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.5.8",
-    "terra-dev-site": "^6.39.2"
+    "react-router-dom": "^5.0.0",
+    "terra-button": "^3.42.0",
+    "terra-disclosure-manager": "^4.27.0",
+    "terra-icon": "^3.40.0",
+    "terra-mixins": "^1.33.0",
+    "terra-toolbar": "^1.22.0"
   },
   "peerDependencies": {
     "react": "^16.8.5",

packages/terra-application-docs/src/additionalTest/additionalSearchDirectory.test.mdx

@@ -0,0 +1 @@
+# Additional Search Directory

packages/terra-application-docs/src/terra-dev-site/component/ThemedComponent.jsx → packages/terra-application-docs/src/dev-site-extended-test/component/ThemedComponent.jsx

@@ -20,7 +20,7 @@ const ThemedComponent = () => {
         Translated block below
       </h1>
       <h1>
-        {applicationIntl.formatMessage({ id: 'Terra.devSite.themed.help' })}
+        {applicationIntl.formatMessage({ id: 'Terra.applicationDocs.themed.help' })}
       </h1>
     </div>
   );

packages/terra-application-docs/src/terra-dev-site/component/ThemedComponent.module.scss → packages/terra-application-docs/src/dev-site-extended-test/component/ThemedComponent.module.scss

@@ -1,7 +1,6 @@
 //Themes
 @import './clinical-lowlight-theme/ThemedComponent.module';
 @import './orion-fusion-theme/ThemedComponent.module';
-@import './terra-dev-site-test-theme/ThemedComponent.module';
 
 :local {
   .themed {

packages/terra-application-docs/src/dev-site-extended-test/extended/extended.extended.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default () => (
+  <h1 className="terra-dev-site-extended">
+    extended
+  </h1>
+);

packages/terra-application-docs/src/terra-dev-site/snt/secondary-scroll-test/GoToButton.jsx → packages/terra-application-docs/src/dev-site-extended-test/snt/secondary-scroll-test/GoToButton.jsx

@@ -26,13 +26,12 @@ const GoToButton = (props) => {
   const {
     path,
     history,
-    ...customProps
   } = props;
 
   let temp;
   if (history) {
     temp = (
-      <button type="button" onClick={() => { goToClick(path, history); }} {...customProps}>
+      <button type="button" onClick={() => { goToClick(path, history); }}>
         Push me
       </button>
     );

packages/terra-application-docs/src/terra-dev-site/test/terra-dev-site/loaders/PropsTableExample.jsx

@@ -71,7 +71,7 @@ const propTypes = {
    * An object taking on a particular shape
    */
   optionalObjectWithShape: PropTypes.shape({
-    color: PropTypes.string,
+    color: PropTypes.string.isRequired,
     fontSize: PropTypes.number,
   }),
   /**
@@ -99,7 +99,7 @@ const propTypes = {
    * ```jsx
    * <div>
    *   <h1>
-   *    {intl.formatMessage({ id: 'Terra.devSite.themed.help' })}
+   *    {intl.formatMessage({ id: 'Terra.applicationDocs.themed.help' })}
    *   </h1>
    * </div>
    * ```

packages/terra-application-docs/src/terra-dev-site/test/terra-dev-site/loaders/example.scss

@@ -0,0 +1,6 @@
+:global {
+  body,
+  h1 {
+    height: 100%;
+  }
+}

packages/terra-application-docs/src/terra-dev-site/test/terra-dev-site/markdownCheatSheet.test.mdx

@@ -207,7 +207,7 @@ Inline `code` has `back-ticks around` it.
 
 Inline `code` has `back-ticks around` it.
 
-Blocks of code are either fenced by lines with three back-ticks <code>```</code>, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.
+Blocks of code are either fenced by lines with three back-ticks, or are indented with four spaces. I recommend only using the fenced code blocks -- they're easier and only they support syntax highlighting.
 
 <pre lang="no-highlight"><code>```javascript
 var s = "JavaScript syntax highlighting";

packages/terra-application-docs/src/terra-dev-site/tool/terra-dev-site/FAQ.h.tool.mdx

@@ -0,0 +1,25 @@
+import { Notice } from '@cerner/terra-docs';
+
+# FAQ
+
+## My components are visible in the raw test route but cut off when displayed in the dev site frame
+
+When components are displayed in the raw route there is an unbroken chain of height 100%s set on the components such that test components with 100% height will fill the available area. With pages, for aesthetic reasons we do not provide a 100% height on all wrapping components. To ensure components display correctly in both raw routes and pages either use block layout or define a fixed hight above any components expecting 100% height.
+
+## I get the webpack error: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
+
+You can get this error when using webpack 4. Part of the TerraDevSite webpack plugin we inject an entry to build the site. Webpack requires an entry to function but when the check is performed changed between webpack 4 and 5. In webpack 4 an entry is checked prior to running the plugin where as in webpack 5 the check is performed after.
+
+To solve this issue you have two options. Upgrade to webpack 5 or add a dummy entrypoint that TerraDevSite will remove before bundling. Upgrading to webpack 5 is recommended.
+
+<Notice variant="important" ariaLevel="3">
+
+If you chose to add the dummy entry point it will have to resolve to a real file. It doesn't matter what file since TerraDevSite will remove it, but webpack 4 does check that the entrypoint file is real.
+
+</Notice>
+
+```js
+  entry: {
+    terraDevSiteDummy: './dummy.js',
+  },
+```