Bump the storybook group in /frontend with 13 updates (#7554)

* Bump the storybook group in /frontend with 13 updates Bumps the storybook group in /frontend with 13 updates: | Package | From | To | | --- | --- | --- | | [@storybook/addon-a11y](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/a11y) | `7.6.14` | `8.0.8` | | [@storybook/addon-actions](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/actions) | `7.6.14` | `8.0.8` | | [@storybook/addon-essentials](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/essentials) | `7.6.14` | `8.0.8` | | [@storybook/addon-interactions](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/interactions) | `7.6.14` | `8.0.8` | | [@storybook/addon-links](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/links) | `7.6.14` | `8.0.8` | | [@storybook/blocks](https://github.com/storybookjs/storybook/tree/HEAD/code/ui/blocks) | `7.6.14` | `8.0.8` | | [@storybook/cli](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/cli) | `7.6.14` | `8.0.8` | | [@storybook/node-logger](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/node-logger) | `7.6.14` | `8.0.8` | | [@storybook/preset-create-react-app](https://github.com/storybookjs/storybook/tree/HEAD/code/presets/create-react-app) | `7.6.14` | `8.0.8` | | [@storybook/react](https://github.com/storybookjs/storybook/tree/HEAD/code/renderers/react) | `7.6.14` | `8.0.8` | | [@storybook/react-webpack5](https://github.com/storybookjs/storybook/tree/HEAD/code/frameworks/react-webpack5) | `7.6.14` | `8.0.8` | | [storybook](https://github.com/storybookjs/storybook/tree/HEAD/code/lib/cli) | `7.6.10` | `8.0.8` | | [storybook-addon-apollo-client](https://github.com/lifeiscontent/storybook-addon-apollo-client) | `5.0.0` | `6.0.0` | Updates `@storybook/addon-a11y` from 7.6.14 to 8.0.8 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.8/code/addons/a11y) Updates `@storybook/addon-actions` from 7.6.14 to 8.0.8 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.8/code/addons/actions) Updates `@storybook/addon-essentials` from 7.6.14 to 8.0.8 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.8/code/addons/essentials) Updates `@storybook/addon-interactions` from 7.6.14 to 8.0.8 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.8/code/addons/interactions) Updates `@storybook/addon-links` from 7.6.14 to 8.0.8 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.8/code/addons/links) Updates `@storybook/blocks` from 7.6.14 to 8.0.8 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.8/code/ui/blocks) Updates `@storybook/cli` from 7.6.14 to 8.0.8 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.8/code/lib/cli) Updates `@storybook/node-logger` from 7.6.14 to 8.0.8 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.8/code/lib/node-logger) Updates `@storybook/preset-create-react-app` from 7.6.14 to 8.0.8 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.8/code/presets/create-react-app) Updates `@storybook/react` from 7.6.14 to 8.0.8 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.8/code/renderers/react) Updates `@storybook/react-webpack5` from 7.6.14 to 8.0.8 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.8/code/frameworks/react-webpack5) Updates `storybook` from 7.6.10 to 8.0.8 - [Release notes](https://github.com/storybookjs/storybook/releases) - [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md) - [Commits](https://github.com/storybookjs/storybook/commits/v8.0.8/code/lib/cli) Updates `storybook-addon-apollo-client` from 5.0.0 to 6.0.0 - [Release notes](https://github.com/lifeiscontent/storybook-addon-apollo-client/releases) - [Commits](lifeiscontent/storybook-addon-apollo-client@v5.0.0...v6.0.0) --- updated-dependencies: - dependency-name: "@storybook/addon-a11y" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/addon-actions" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/addon-essentials" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/addon-interactions" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/addon-links" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/blocks" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/cli" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/node-logger" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/preset-create-react-app" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/react" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: "@storybook/react-webpack5" dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: storybook dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook - dependency-name: storybook-addon-apollo-client dependency-type: direct:development update-type: version-update:semver-major dependency-group: storybook ... Signed-off-by: dependabot[bot] <[email protected]> * Bump tar from 6.2.0 to 6.2.1 in /frontend (#7543) Bumps [tar](https://github.com/isaacs/node-tar) from 6.2.0 to 6.2.1. - [Release notes](https://github.com/isaacs/node-tar/releases) - [Changelog](https://github.com/isaacs/node-tar/blob/main/CHANGELOG.md) - [Commits](isaacs/node-tar@v6.2.0...v6.2.1) --- updated-dependencies: - dependency-name: tar dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * codemod mdx file * new file * add glob back to export config --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Bob Zhao <[email protected]>
CDCgov · Apr 19, 2024 · fda548a · fda548a
1 parent b57d137
commit fda548a
Show file tree

Hide file tree

Showing 4 changed files with 1,117 additions and 2,416 deletions.
diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
@@ -1,5 +1,5 @@
 module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
@@ -19,4 +19,5 @@ module.exports = {
     name: "@storybook/react-webpack5",
     options: { fastRefresh: true },
   },
+  staticDirs: ["../storybook_public"],
 };
diff --git a/frontend/package.json b/frontend/package.json
@@ -72,8 +72,8 @@
     "test:ci": "CI=true yarn test --coverage",
     "eject": "react-scripts eject",
     "create-storybook-public": "rm -rf ./storybook_public && cp -R ./public ./storybook_public && cp mockServiceWorker.js ./storybook_public",
-    "storybook": "yarn create-storybook-public && SASS_PATH=$(cd ./node_modules && pwd):$(cd ./node_modules/@uswds && pwd):$(cd ./node_modules/@uswds/uswds/packages && pwd):$(cd ./src/scss && pwd) storybook dev -p 6006 -s ../storybook_public",
-    "build-storybook": "yarn create-storybook-public && REACT_APP_BACKEND_URL=http://localhost:8080 SASS_PATH=$(cd ./node_modules && pwd):$(cd ./node_modules/@uswds && pwd):$(cd ./node_modules/@uswds/uswds/packages && pwd):$(cd ./src/scss && pwd) storybook build -s storybook_public",
+    "storybook": "yarn create-storybook-public && SASS_PATH=$(cd ./node_modules && pwd):$(cd ./node_modules/@uswds && pwd):$(cd ./node_modules/@uswds/uswds/packages && pwd):$(cd ./src/scss && pwd) storybook dev -p 6006",
+    "build-storybook": "yarn create-storybook-public && REACT_APP_BACKEND_URL=http://localhost:8080 SASS_PATH=$(cd ./node_modules && pwd):$(cd ./node_modules/@uswds && pwd):$(cd ./node_modules/@uswds/uswds/packages && pwd):$(cd ./src/scss && pwd) storybook build",
     "maintenance:start": "[ -z \"$MAINTENANCE_MESSAGE\" ] && echo \"MAINTENANCE_MESSAGE must be set!\" || (echo $MAINTENANCE_MESSAGE > maintenance.json && yarn maintenance:deploy && rm maintenance.json)",
     "maintenance:deploy": "[ -z \"$MAINTENANCE_ENV\" ] && echo \"MAINTENANCE_ENV must be set!\" || az storage blob upload -f maintenance.json -n maintenance.json -c '$web' --account-name simplereport${MAINTENANCE_ENV}app --overwrite",
     "smoke:deploy:local": "node -r dotenv/config deploy-smoke.js dotenv_config_path=.env.local",
@@ -171,17 +171,17 @@
     "@graphql-codegen/typescript": "^4.0.6",
     "@graphql-codegen/typescript-operations": "^4.2.0",
     "@graphql-codegen/typescript-react-apollo": "^4.3.0",
-    "@storybook/addon-a11y": "^7.6.14",
-    "@storybook/addon-actions": "^7.6.14",
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-interactions": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
-    "@storybook/blocks": "^7.6.14",
-    "@storybook/cli": "^7.6.14",
-    "@storybook/node-logger": "^7.6.14",
-    "@storybook/preset-create-react-app": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/react-webpack5": "^7.6.14",
+    "@storybook/addon-a11y": "^8.0.8",
+    "@storybook/addon-actions": "^8.0.8",
+    "@storybook/addon-essentials": "^8.0.8",
+    "@storybook/addon-interactions": "^8.0.8",
+    "@storybook/addon-links": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
+    "@storybook/cli": "^8.0.8",
+    "@storybook/node-logger": "^8.0.8",
+    "@storybook/preset-create-react-app": "^8.0.8",
+    "@storybook/react": "^8.0.8",
+    "@storybook/react-webpack5": "^8.0.8",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.1.3",
     "@types/apollo-upload-client": "^17.0.0",
@@ -222,8 +222,8 @@
     "redux-mock-store": "^1.5.4",
     "sass": "^1.63.6",
     "selenium-webdriver": "^4.16.0",
-    "storybook": "^7.6.10",
-    "storybook-addon-apollo-client": "^5.0.0",
+    "storybook": "^8.0.8",
+    "storybook-addon-apollo-client": "^6.0.0",
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "typescript": "^5.3.2",

diff --git a/...tend/src/stories/Introduction.stories.mdx → frontend/src/stories/Introduction.mdx b/...tend/src/stories/Introduction.stories.mdx → frontend/src/stories/Introduction.mdx
@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs';
+import { Meta } from '@storybook/blocks';
 import Code from './assets/code-brackets.svg';
 import Colors from './assets/colors.svg';
 import Comments from './assets/comments.svg';
@@ -12,106 +12,106 @@ import StackAlt from './assets/stackalt.svg';
 
 <style>
   {`
-    .subheading {
-      --mediumdark: '#999999';
-      font-weight: 900;
-      font-size: 13px;
-      color: #999;
-      letter-spacing: 6px;
-      line-height: 24px;
-      text-transform: uppercase;
-      margin-bottom: 12px;
-      margin-top: 40px;
-    }
-
-    .link-list {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-      row-gap: 10px;
-    }
-
-    @media (min-width: 620px) {
+      .subheading {
+        --mediumdark: '#999999';
+        font-weight: 900;
+        font-size: 13px;
+        color: #999;
+        letter-spacing: 6px;
+        line-height: 24px;
+        text-transform: uppercase;
+        margin-bottom: 12px;
+        margin-top: 40px;
+      }
+
+      .link-list {
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 1fr;
+        row-gap: 10px;
+      }
+
+      @media (min-width: 620px) {
+        .link-list {
+          row-gap: 20px;
+          column-gap: 20px;
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+
+      @media all and (-ms-high-contrast:none) {
       .link-list {
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: 1fr 1fr;
+          display: -ms-grid;
+          -ms-grid-columns: 1fr 1fr;
+          -ms-grid-rows: 1fr 1fr;
+        }
+      }
+
+      .link-item {
+        display: block;
+        padding: 20px 30px 20px 15px;
+        border: 1px solid #00000010;
+        border-radius: 5px;
+        transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+        color: #333333;
+        display: flex;
+        align-items: flex-start;
+      }
+
+      .link-item:hover {
+        border-color: #1EA7FD50;
+        transform: translate3d(0, -3px, 0);
+        box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+      }
+
+      .link-item:active {
+        border-color: #1EA7FD;
+        transform: translate3d(0, 0, 0);
+      }
+
+      .link-item strong {
+        font-weight: 700;
+        display: block;
+        margin-bottom: 2px;
+      }
+
+      .link-item img {
+        height: 40px;
+        width: 40px;
+        margin-right: 15px;
+        flex: none;
+      }
+
+      .link-item span {
+        font-size: 14px;
+        line-height: 20px;
       }
-    }
 
-    @media all and (-ms-high-contrast:none) {
-    .link-list {
-        display: -ms-grid;
-        -ms-grid-columns: 1fr 1fr;
-        -ms-grid-rows: 1fr 1fr;
+      .tip {
+        display: inline-block;
+        border-radius: 1em;
+        font-size: 11px;
+        line-height: 12px;
+        font-weight: 700;
+        background: #E7FDD8;
+        color: #66BF3C;
+        padding: 4px 12px;
+        margin-right: 10px;
+        vertical-align: top;
       }
-    }
-
-    .link-item {
-      display: block;
-      padding: 20px 30px 20px 15px;
-      border: 1px solid #00000010;
-      border-radius: 5px;
-      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-      color: #333333;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .link-item:hover {
-      border-color: #1EA7FD50;
-      transform: translate3d(0, -3px, 0);
-      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-    }
-
-    .link-item:active {
-      border-color: #1EA7FD;
-      transform: translate3d(0, 0, 0);
-    }
-
-    .link-item strong {
-      font-weight: 700;
-      display: block;
-      margin-bottom: 2px;
-    }
-
-    .link-item img {
-      height: 40px;
-      width: 40px;
-      margin-right: 15px;
-      flex: none;
-    }
-
-    .link-item span {
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    .tip {
-      display: inline-block;
-      border-radius: 1em;
-      font-size: 11px;
-      line-height: 12px;
-      font-weight: 700;
-      background: #E7FDD8;
-      color: #66BF3C;
-      padding: 4px 12px;
-      margin-right: 10px;
-      vertical-align: top;
-    }
-
-    .tip-wrapper {
-      font-size: 13px;
-      line-height: 20px;
-      margin-top: 40px;
-      margin-bottom: 40px;
-    }
-
-    .tip-wrapper code {
-      font-size: 12px;
-      display: inline-block;
-    }
-  `}
+
+      .tip-wrapper {
+        font-size: 13px;
+        line-height: 20px;
+        margin-top: 40px;
+        margin-bottom: 40px;
+      }
+
+      .tip-wrapper code {
+        font-size: 12px;
+        display: inline-block;
+      }
+    `}
 </style>
 
 # Welcome to Storybook
@@ -126,45 +126,36 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 <div className="subheading">Configure</div>
 
 <div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
+  <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
     <img src={Plugin} alt="plugin" />
+
     <span>
       <strong>Presets for popular tools</strong>
       Easy setup for TypeScript, SCSS and more.
     </span>
   </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
+
+  <a className="link-item" href="https://storybook.js.org/docs/react/configure/webpack" target="_blank">
     <img src={StackAlt} alt="Build" />
+
     <span>
       <strong>Build configuration</strong>
       How to customize webpack and Babel
     </span>
   </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
+
+  <a className="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
     <img src={Colors} alt="colors" />
+
     <span>
       <strong>Styling</strong>
       How to load and configure CSS libraries
     </span>
   </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
-    target="_blank"
-  >
+
+  <a className="link-item" href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack" target="_blank">
     <img src={Flow} alt="flow" />
+
     <span>
       <strong>Data</strong>
       Providers and mocking for data libraries
@@ -177,27 +168,34 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 <div className="link-list">
   <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
     <img src={Repo} alt="repo" />
+
     <span>
       <strong>Storybook documentation</strong>
       Configure, customize, and extend
     </span>
   </a>
+
   <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
     <img src={Direction} alt="direction" />
+
     <span>
       <strong>In-depth guides</strong>
       Best practices from leading teams
     </span>
   </a>
+
   <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
     <img src={Code} alt="code" />
+
     <span>
       <strong>GitHub project</strong>
       View the source and add issues
     </span>
   </a>
+
   <a className="link-item" href="https://discord.gg/storybook" target="_blank">
     <img src={Comments} alt="comments" />
+
     <span>
       <strong>Discord chat</strong>
       Chat with maintainers and the community