Add dynamic storybook story generator (#1826)

* Created dynamic story generator file that can be copied into any folder of configs
* Added storybook to README

---------

Co-authored-by: Monroe <[email protected]>

.gitignore

@@ -21,6 +21,7 @@ composer.lock
 *.swo
 
 # Project Specific
+/_stories/private
 /.storybook_build
 /storybook-static
 /packages/**/examples/private

.storybook/autoGenerate.stories.tsx

@@ -0,0 +1,61 @@
+/* COPY THIS FILE INTO A FOLDER TO DYNAMICALLY GENERATE STORIES FOR ALL THE CONFIGS */
+/* Creates one story that contains all configs in folder */
+/* RECOMMENDED USE:
+  1) create a /_stories/private directory with configs or config subfolders and copy this file into it/them
+  2) Change [folder-name] below to a name for the folder
+*/
+
+const meta = {
+  title: 'Private/[folder-name]'
+}
+
+import React from 'react'
+
+import CdcMap from '@cdc/map/src/CdcMap'
+import Chart from '@cdc/chart/src/CdcChart'
+import Dashboard from '@cdc/dashboard/src/CdcDashboard'
+import CdcDataBite from '@cdc/data-bite/src/CdcDataBite'
+import CdcWaffleChart from '@cdc/waffle-chart/src/CdcWaffleChart'
+
+async function importAll() {
+  const modules = import.meta.glob('./**/*.json')
+  const configs = {}
+  for (const path in modules) {
+    const [, filename] = path.split('/')
+    const mod = await modules[path]()
+    configs[filename] = mod
+  }
+  return configs
+}
+
+const allConfigs: Record<
+  string,
+  {
+    type: string
+    [key: string]: any
+  }
+> = await importAll()
+
+export default meta
+
+export const AllConfigs = {
+  render: () => {
+    return (
+      <div>
+        {Object.entries(allConfigs).map(([filename, config]) => (
+          <>
+            <div key={filename}>
+              <h1 className='mb-4'>{filename.split('-').join(' ')}</h1>
+              {config.type === 'map' && <CdcMap config={{ ...config }} />}
+              {config.type === 'chart' && <Chart config={{ ...config }} isEditor={false} />}
+              {config.type === 'dashboard' && <Dashboard config={{ ...config }} />}
+              {config.type === 'data-bite' && <CdcDataBite config={{ ...config }} />}
+              {config.type === 'waffle-chart' && <CdcWaffleChart config={{ ...config }} />}
+            </div>
+            <hr style={{ margin: '2rem 0' }} />
+          </>
+        ))}
+      </div>
+    )
+  }
+}

.storybook/main.ts

@@ -4,8 +4,18 @@ import react from '@vitejs/plugin-react'
 import svgr from 'vite-plugin-svgr' // Svg Support
 
 const config: StorybookConfig = {
-  stories: ['../_stories/*.mdx', '../packages/**/_stories/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', 'storybook-addon-fetch-mock', '@storybook/addon-a11y'],
+  stories: [
+    '../_stories/*.mdx',
+    '../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'
+  ],
   staticDirs: ['./assets'],
   framework: {
     name: '@storybook/react-vite',

README.md

@@ -57,6 +57,18 @@ Sometimes we need to make fixes or add features to a specific package for our da
 - New packages should have their version start at 1.0.0 through development until they are first published and follow [Semantic Versioning guidelines](https://docs.npmjs.com/about-semantic-versioning) afterwards.
 - Respect the guidelines above and ask someone if you're unsure of something.
 
+## Storybook
+
+COVE makes use of [Storybook](https://storybook.js.org) to preview visualizations. Run it with `yarn storybook`.
+
+In addition to the static stories defined in the `_stories` directory, any COVE config can be viewed locally in Storybook with the following steps:
+
+1. `mkdir -p _stories/private/`
+2. `cp .storybook/autoGenerate.stories.tsx _stories/private/`
+3. Copy configs into `_stories/private/`
+4. `yarn storybook`
+5. You will see those configs under "Private" in Storybook
+
 ---
 
 <details>