[terra-dev-site] Terra dev site v7

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.1.0 - (August 11, 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.1"
+    "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',
+  },
+```