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 + ---