diff --git a/.gitignore b/.gitignore
index 2d79478f9..bd8471e7f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,7 @@ composer.lock
*.swo
# Project Specific
+/_stories/private
/.storybook_build
/storybook-static
/packages/**/examples/private
diff --git a/.storybook/autoGenerate.stories.tsx b/.storybook/autoGenerate.stories.tsx
new file mode 100644
index 000000000..3bad39212
--- /dev/null
+++ b/.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 (
+
+ {Object.entries(allConfigs).map(([filename, config]) => (
+ <>
+
+
{filename.split('-').join(' ')}
+ {config.type === 'map' && }
+ {config.type === 'chart' && }
+ {config.type === 'dashboard' && }
+ {config.type === 'data-bite' && }
+ {config.type === 'waffle-chart' && }
+
+
+ >
+ ))}
+
+ )
+ }
+}
diff --git a/.storybook/main.ts b/.storybook/main.ts
index a0f8e8e48..1bfa21ee7 100644
--- a/.storybook/main.ts
+++ b/.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',
diff --git a/README.md b/README.md
index 226aed0be..0471e0a4d 100644
--- a/README.md
+++ b/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
+
---