Merge pull request #2341 from CDCgov/dev

4.25.9 dev > test

Author: adamdoe

.github/workflows/storybook-deploy.yml

@@ -13,10 +13,10 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: 'npm'
       - run: npx yarn install
       - run: npm install -g storybook

.github/workflows/test_storybook.yml .github/workflows/test-storybook.yml.github/workflows/test_storybook.yml renamed to .github/workflows/test-storybook.yml

@@ -2,6 +2,8 @@ name: Test Storybook
 
 on:
   workflow_dispatch:
+  pull_request:
+    branches: [main, dev]
 
 jobs:
   storybook-tests:
@@ -14,7 +16,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
           cache: yarn
 
       - name: Install dependencies
@@ -23,9 +25,6 @@ jobs:
       - name: Build Packages
         run: lerna run build
 
-      - name: Build Storybook
-        run: yarn build-storybook --output-dir storybook-static
-
       - name: Add Playwright
         run: npx playwright install
 
@@ -36,4 +35,4 @@ jobs:
         run: npx wait-on http://localhost:6006
 
       - name: Run Storybook tests
-        run: yarn test-storybook
+        run: yarn test-storybook --no-watch --reporter=default

.github/workflows/unit-test.yml

@@ -13,10 +13,11 @@ jobs:
 
     steps:
       - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
+      - name: Use Node.js 20.x
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: 'npm'
       - run: npx yarn install
+      - run: lerna run build
       - run: npm run test --workspaces

.storybook/coveSbThemes.ts

@@ -1,5 +1,5 @@
 // COVE Storybook Themes
-import { create } from '@storybook/theming'
+import { create } from 'storybook/theming'
 import logo from './assets/cove-logo-long.svg'
 
 export const managerTheme = create({

.storybook/main.ts

@@ -1,54 +1,94 @@
+import { createRequire } from 'node:module'
+import { dirname, join } from 'node:path'
 import { mergeConfig } from 'vite'
 import type { StorybookConfig } from '@storybook/react-vite'
 import react from '@vitejs/plugin-react'
 import svgr from 'vite-plugin-svgr' // Svg Support
 
+const require = createRequire(import.meta.url)
+
 const config: StorybookConfig = {
   stories: [
-    '../_stories/*.mdx',
-    '../packages/**/_stories/*.stories.@(js|jsx|ts|tsx|mdx)',
+    '../_stories/*.stories.@(js|jsx|ts|tsx)',
+    '../packages/**/_stories/*.stories.@(js|jsx|ts|tsx)',
     '../_stories/private/**/*.stories.@(js|jsx|ts|tsx)'
   ],
+
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    'storybook-addon-fetch-mock',
-    '@storybook/addon-a11y',
-    '@storybook/addon-docs'
+    getAbsolutePath('@storybook/addon-links'),
+    // getAbsolutePath("storybook-addon-fetch-mock"), // Incompatible with Storybook 9 - cannot resolve @storybook/preview-api
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-vitest')
   ],
+
   staticDirs: ['./assets'],
+
   framework: {
-    name: '@storybook/react-vite',
+    name: getAbsolutePath('@storybook/react-vite'),
     options: {}
   },
+
   features: {
     storyStoreV7: true
   },
+
   core: {
-    builder: '@storybook/builder-vite',
+    builder: getAbsolutePath('@storybook/builder-vite'),
     disableTelemetry: true
   },
-  docs: {
-    autodocs: 'tag'
-  },
+
   typescript: {
     reactDocgen: false // https://github.com/storybookjs/storybook/issues/22164#issuecomment-1603627308
   },
+
+  docs: {
+    autodocs: 'tag'
+  },
+
   viteFinal: async (config, { configType }) => {
     console.log('Storybook build mode: ', configType)
 
+    // Common SVG configuration for both dev and build
+    const svgrConfig = {
+      svgrOptions: {
+        exportType: 'default',
+        ref: true,
+        svgo: false,
+        titleProp: true
+      },
+      include: '**/*.svg'
+    }
+
     if (configType === 'DEVELOPMENT') {
       // run Storybook locally
       return mergeConfig(config, {
-        plugins: [svgr({ exportAsDefault: true })]
+        css: {
+          preprocessorOptions: {
+            scss: {
+              // Suppress SASS @import deprecation warnings (same as packages)
+              quietDeps: true,
+              silenceDeprecations: ['legacy-js-api', 'import']
+            }
+          }
+        },
+        plugins: [react({ jsxRuntime: 'automatic' }), svgr(svgrConfig)]
       })
     }
 
     return mergeConfig(config, {
       commonjsOptions: {
         include: [/@cdc\/core/, /node_modules/]
       },
+      css: {
+        preprocessorOptions: {
+          scss: {
+            // Suppress SASS @import deprecation warnings (same as packages)
+            quietDeps: true,
+            silenceDeprecations: ['legacy-js-api', 'import']
+          }
+        }
+      },
       build: {
         sourcemap: false,
         lib: {
@@ -65,12 +105,14 @@ const config: StorybookConfig = {
       plugins: [
         // changed from classic to automatic 02/21 for import React error.
         react({ jsxRuntime: 'automatic' }), //https://github.com/babel/babel/discussions/13013
-        svgr({
-          exportAsDefault: true
-        })
+        svgr(svgrConfig)
       ]
     })
   }
 }
 
 export default config
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')))
+}

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from 'storybook/manager-api'
 import { managerTheme } from './coveSbThemes'
 
 // Assets
@@ -8,4 +8,4 @@ addons.setConfig({
   theme: managerTheme,
   isToolshown: false,
   configureJsx: true
-});
+})

_stories/Guide.NewComponents.stories.mdx

@@ -0,0 +1,76 @@
+import type { Meta } from '@storybook/react'
+
+const meta: Meta = {
+  title: 'Guides/New Components',
+  parameters: {
+    docs: {
+      page: () => (
+        <div style={{ padding: '20px' }}>
+          <h1>Adding New Components</h1>
+          <p>This guide will walk you through the process of creating a new component.</p>
+
+          <h2>Naming Conventions</h2>
+          <ul>
+            <li>Because the components are imported directly from COVE related files, there is no need to reference <code>COVE</code> in the component name. For example, <code>CoveButton</code> should just be named <code>Button</code>.</li>
+            <li>Components should be named in PascalCase, and should be named after the component itself. For example, a component that renders a button should be named <code>Button</code>, not <code>ButtonComponent</code>.</li>
+            <li>Subcomponents should include the name of the parent component, then list its variation, subvariation, etc. The file name should have variation separated by a period in the file name.</li>
+          </ul>
+
+          <h3>Example</h3>
+          <pre><code>Map.jsx → Map.Marker.jsx → Map.Marker.Icon.jsx</code></pre>
+          <pre><code>Map() → MapMarker() → MapMarkerIcon()</code></pre>
+
+          <h2>File Structure</h2>
+          <p>All global components should be placed in its related <code>./packages/core/components/***</code> directory.</p>
+
+          <p>The <code>***</code> directory should be representative of the type of component being created:</p>
+          <ul>
+            <li><strong>editor</strong> - Components/subcomponents specific to the Editor view</li>
+            <li><strong>element</strong> - Elements that are consumed for use in COVE</li>
+            <li><strong>hoc</strong> - Higher-order components</li>
+            <li><strong>input</strong> - Input components for Editor Panels</li>
+            <li><strong>loader</strong> - Loading components</li>
+            <li><strong>manager</strong> - Data management components</li>
+            <li><strong>ui</strong> - Basic UI building blocks</li>
+          </ul>
+        </div>
+      )
+    }
+  }
+}
+
+export default meta
+
+export const Guide = {
+  render: () => (
+    <div style={{ padding: '20px' }}>
+      <h1>Adding New Components</h1>
+      <p>This guide will walk you through the process of creating a new component.</p>
+
+      <h2>Naming Conventions</h2>
+      <ul>
+        <li>Because the components are imported directly from COVE related files, there is no need to reference <code>COVE</code> in the component name. For example, <code>CoveButton</code> should just be named <code>Button</code>.</li>
+        <li>Components should be named in PascalCase, and should be named after the component itself. For example, a component that renders a button should be named <code>Button</code>, not <code>ButtonComponent</code>.</li>
+        <li>Subcomponents should include the name of the parent component, then list its variation, subvariation, etc. The file name should have variation separated by a period in the file name.</li>
+      </ul>
+
+      <h3>Example</h3>
+      <pre><code>Map.jsx → Map.Marker.jsx → Map.Marker.Icon.jsx</code></pre>
+      <pre><code>Map() → MapMarker() → MapMarkerIcon()</code></pre>
+
+      <h2>File Structure</h2>
+      <p>All global components should be placed in its related <code>./packages/core/components/***</code> directory.</p>
+
+      <p>The <code>***</code> directory should be representative of the type of component being created:</p>
+      <ul>
+        <li><strong>editor</strong> - Components/subcomponents specific to the Editor view</li>
+        <li><strong>element</strong> - Elements that are consumed for use in COVE</li>
+        <li><strong>hoc</strong> - Higher-order components</li>
+        <li><strong>input</strong> - Input components for Editor Panels</li>
+        <li><strong>loader</strong> - Loading components</li>
+        <li><strong>manager</strong> - Data management components</li>
+        <li><strong>ui</strong> - Basic UI building blocks</li>
+      </ul>
+    </div>
+  )
+}