@cdc/core 4.25.11 → 4.26.2

package/.claude/agents/qa-test-developer.md

@@ -0,0 +1,126 @@
+---
+name: qa-test-developer
+description: "Use this agent when you need to add, update, or improve test coverage for components and features. This includes writing unit tests with Vitest, creating Playwright integration tests within Storybook, and coordinating visual regression testing with Backstop. Trigger this agent after implementing new components, fixing bugs, or when test coverage needs improvement.\\n\\nExamples:\\n\\n<example>\\nContext: User has just implemented a new chart component.\\nuser: \"I just created a new PieChart component in the chart package\"\\nassistant: \"I can see the new PieChart component. Let me use the qa-test-developer agent to add comprehensive test coverage for it.\"\\n<Task tool invocation to launch qa-test-developer agent>\\n</example>\\n\\n<example>\\nContext: User wants to ensure a bug fix is properly tested.\\nuser: \"I fixed a bug in the data-table sorting logic\"\\nassistant: \"Great fix! I'll use the qa-test-developer agent to add tests that verify this bug won't regress and ensure the sorting behavior is well-covered.\"\\n<Task tool invocation to launch qa-test-developer agent>\\n</example>\\n\\n<example>\\nContext: User is asking for test coverage on existing code.\\nuser: \"Can you add tests for the Dashboard layout components?\"\\nassistant: \"I'll launch the qa-test-developer agent to analyze the Dashboard components and create comprehensive unit and integration tests.\"\\n<Task tool invocation to launch qa-test-developer agent>\\n</example>\\n\\n<example>\\nContext: Proactive usage after significant code changes detected.\\nassistant: \"I notice significant changes were made to the map visualization rendering logic. Let me use the qa-test-developer agent to ensure proper test coverage for these changes.\"\\n<Task tool invocation to launch qa-test-developer agent>\\n</example>"
+model: sonnet
+memory: project
+---
+
+You are an expert QA Developer specializing in React component testing within monorepo environments. You have deep expertise in Vitest for unit testing, Playwright for integration testing within Storybook, and visual regression testing with Backstop.js. Your goal is to create comprehensive, maintainable test suites that catch bugs early and document component behavior.
+
+## Your Core Responsibilities
+
+1. **Write Unit Tests with Vitest**
+   - Create tests in `*.test.{js,jsx,ts,tsx}` files alongside the components
+   - Use the jsdom environment configured in the project
+   - Import from `testing-setup.js` when DOM matchers are needed
+   - Test component rendering, props handling, state changes, and edge cases
+   - Mock external dependencies appropriately
+   - Follow the AAA pattern: Arrange, Act, Assert
+   - Aim for meaningful coverage, not just line coverage
+
+2. **Create Playwright Integration Tests in Storybook**
+   - Write interaction tests using Storybook's play functions
+   - Test user workflows and component interactions
+   - Verify accessibility requirements
+   - Test responsive behavior when relevant
+   - Use `@storybook/test` utilities for assertions
+   - Structure tests to run with `yarn test-storybook`
+
+3. **Coordinate Backstop Visual Regression Testing**
+   - **Always ask the user** if Backstop tests should be updated or created
+   - When approved, create or update Backstop scenarios
+   - Define appropriate viewports for responsive testing
+   - Set meaningful selectors and hide dynamic elements
+   - Document any visual baseline changes needed
+
+## Testing Patterns for This Codebase
+
+### Vitest Unit Test Structure
+```typescript
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ComponentName } from './ComponentName';
+
+describe('ComponentName', () => {
+  it('should render with default props', () => {
+    render(<ComponentName />);
+    expect(screen.getByRole('...')).toBeInTheDocument();
+  });
+
+  it('should handle user interaction', async () => {
+    const user = userEvent.setup();
+    const onAction = vi.fn();
+    render(<ComponentName onAction={onAction} />);
+    
+    await user.click(screen.getByRole('button'));
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+});
+```
+
+### Storybook Play Function Structure
+```typescript
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent, expect } from '@storybook/test';
+
+export const WithInteraction: StoryObj = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    
+    await userEvent.click(canvas.getByRole('button'));
+    await expect(canvas.getByText('Expected Result')).toBeInTheDocument();
+  },
+};
+```
+
+## Workflow
+
+1. **Analyze the Component/Feature**: Understand what needs testing by reading the implementation
+2. **Identify Test Scenarios**: List unit tests, integration tests, and potential visual tests
+3. **Write Unit Tests First**: Create comprehensive Vitest tests
+4. **Add Storybook Integration Tests**: Write play functions for user interaction flows
+5. **Ask About Backstop**: Explicitly ask the user if visual regression tests should be added/updated
+6. **Verify Tests Pass**: Run the tests to ensure they work correctly
+
+## Quality Standards
+
+- Tests should be deterministic and not flaky
+- Use meaningful test descriptions that document behavior
+- Avoid testing implementation details; test behavior
+- Mock at the boundaries (API calls, external services)
+- Keep tests focused and independent
+- Clean up after tests (no shared state pollution)
+
+## Before Completing
+
+- Ensure all new tests pass: `vitest run` or `yarn test-storybook`
+- Verify no existing tests were broken
+- Confirm test file locations follow project conventions
+- Ask about Backstop if visual changes are involved
+
+**Update your agent memory** as you discover testing patterns, common test utilities used in this codebase, component testing quirks, and established testing conventions. This builds institutional knowledge for consistent test quality across the monorepo.
+
+Examples of what to record:
+- Common mocking patterns for specific dependencies
+- Reusable test utilities in @cdc/core
+- Components that require special testing setup
+- Known flaky test patterns to avoid
+
+# Persistent Agent Memory
+
+You have a persistent Persistent Agent Memory directory at `/Users/adamdoe/Code/cdc-open-viz/packages/core/.claude/agent-memory/qa-test-developer/`. Its contents persist across conversations.
+
+As you work, consult your memory files to build on previous experience. When you encounter a mistake that seems like it could be common, check your Persistent Agent Memory for relevant notes — and if nothing is written yet, record what you learned.
+
+Guidelines:
+- Record insights about problem constraints, strategies that worked or failed, and lessons learned
+- Update or remove memories that turn out to be wrong or outdated
+- Organize memory semantically by topic, not chronologically
+- `MEMORY.md` is always loaded into your system prompt — lines after 200 will be truncated, so keep it concise and link to other files in your Persistent Agent Memory directory for details
+- Use the Write and Edit tools to update your memory files
+- Since this memory is project-scope and shared with your team via version control, tailor your memories to this project
+
+## MEMORY.md
+
+Your MEMORY.md is currently empty. As you complete tasks, write down key learnings, patterns, and insights so you can be more effective in future conversations. Anything saved in MEMORY.md will be included in your system prompt next time.

package/CLAUDE.local.md

@@ -0,0 +1,67 @@
+# @cdc/core — Package Rules
+
+## Build
+- Core has **no JavaScript build step**. The build script only compiles SCSS: `sass styles/cove-main.scss dist/cove-main.css`.
+- All components, helpers, hooks, and types are imported **directly from source** by other packages. Never reference `dist/` for JS/TS imports.
+
+## Where to Put New Code
+
+| What you're adding | Where it goes |
+|---|---|
+| Shared React component | `components/<ComponentName>/` (directory with index file) |
+| Shared helper function | `helpers/<functionName>.ts` (flat file at top level) |
+| Shared custom hook | `hooks/use<Name>.ts` |
+| Shared TypeScript type | `types/<TypeName>.ts` |
+| SCSS styles | `styles/` (`base/`, `components/`, `layout/`, `themes/`, `utils/`) |
+| Color palette data | `data/colorPalettes.ts`, `data/mapColorPalettes.ts`, or `data/sharedPalettes.ts` |
+
+## Helpers Organization
+- **Flat structure**: ~49 top-level files in `helpers/`.
+- **Feature subdirectories** for complex domains:
+  - `cove/` — formatting utilities (accessibility, date, number, string)
+  - `embed/` — embed code generation, URL validation
+  - `metrics/` — analytics helpers
+  - `palettes/` — color palette migration and standardization
+  - `ver/` — version migration files (18+ migration scripts)
+  - `tests/` — shared test utilities (e.g., `testStandaloneBuild.ts`)
+- Key constants in `helpers/constants.ts` — includes `USE_V2_MIGRATION`, `EDITOR_WIDTH`, `DATA_OPERATORS`, `DATA_FUNCTIONS`, color fallbacks.
+
+## Commonly Imported Exports
+Other packages depend heavily on these — be careful when modifying:
+- **Types**: `VizFilter`, `Column`, `Table`, `General`, `Version`, `Visualization`, `FilterBehavior`, `DataSet` (imported as `Datasets`), `Action`
+- **Helpers**: `fetchRemoteData`, `filterVizData`, `DataTransform`, `getViewport`, `updateFieldFactory`, `coveUpdateWorker`, `cloneConfig`
+- **Components**: `Loading`, `EditorPanel`, `Filters`, `DataTable`, `Layout`, `ErrorBoundary`, ui elements (`Modal`, `Accordion`, `Tooltip`)
+- **Contexts**: `EditorContext` (+ `EditorDispatchContext`) — shared editor state used by `@cdc/editor`
+
+## Types Conventions
+- 32 shared type files in `types/`.
+- Other packages **extend** core types rather than duplicating (e.g., chart's `General` extends core's `General`).
+- Use `import type` for type-only imports from core.
+- Core's `Action<Type, Payload>` type is the base for all package action types.
+
+## Components (34 directories)
+Largest/most complex:
+- `DataTable/` (29 files) — shared data table with sorting, pagination, search
+- `EditorPanel/` (16 files) — shared editor panel sections
+- `Filters/` (13 files) — shared filter UI components
+- `ui/` (15 files) — low-level UI primitives (Modal, Accordion, Tooltip, Icon)
+- `elements/` — Button, Card, Confirm, Error, ScreenReaderText, SkipTo
+- `inputs/` — InputCheckbox, InputGroup, InputSelect, InputText, InputToggle
+
+## Styles Architecture
+- Entry point: `styles/cove-main.scss` (this is what the build compiles)
+- Style system in `styles/` with: `base/`, `components/`, `layout/`, `themes/`, `utils/`
+- Breakpoint mixin: `@import '@cdc/core/styles/utils/breakpoints'` — used by all packages
+- Theme colors defined in `styles/themes/_color-definitions.scss`
+- Use CSS custom properties (`var(--cool-gray-10)`) — never hardcode colors.
+
+## Shared Configuration Files
+- `generateViteConfig.js` — all packages import this for build/dev/test config. Do not modify without understanding downstream impact on every package.
+- `testing-setup.js` — provides Testing Library matchers, matchMedia mock, URL.createObjectURL mock, auto-cleanup. All packages use this via Vitest setup.
+- `devTemplate/` — HTML/CSS/JS for package dev servers (example-switching sidebar).
+
+## Pitfalls
+- Modifying any shared type (`types/*.ts`) can break multiple packages — check downstream imports first.
+- `generateViteConfig.js` externals only include `react` and `react-dom`. If a new peer dependency is added, it must be added here too.
+- The `data/` directory contains color palette definitions that affect every visualization — changes here are high-impact.
+- `helpers/ver/` contains ordered version migration scripts. New migrations must maintain the correct sequence.

package/_stories/Gallery.Charts.stories.tsx

@@ -0,0 +1,300 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect } from 'storybook/test'
+import Chart from '@cdc/chart'
+
+// Fallback step function for test descriptions
+const step = async (description: string, fn: () => Promise<void> | void) => {
+  console.log(`▶ ${description}`)
+  await fn()
+  console.log(`✓ ${description}`)
+}
+
+const meta: Meta = {
+  title: 'Regression Tests/Gallery/Charts',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Chart visualization examples from the CDC COVE Gallery'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+
+type Story = StoryObj<typeof Chart>
+
+// Helper function to test chart rendering
+const testChartRendering = async (canvasElement: HTMLElement, storyName: string) => {
+  const canvas = within(canvasElement)
+
+  await step('Wait for chart to render', async () => {
+    const svgElement = await canvas.findByRole('img', { hidden: true }, { timeout: 10000 })
+    expect(svgElement).toBeInTheDocument()
+  })
+
+  await step('Verify chart SVG is present', async () => {
+    const chartSvg = canvasElement.querySelector('svg')
+    expect(chartSvg).toBeInTheDocument()
+  })
+
+  await step('Verify COVE module wrapper is present', async () => {
+    const coveModule = canvasElement.querySelector('.cdc-open-viz-module')
+    expect(coveModule).toBeInTheDocument()
+  })
+
+  console.log(` ${storyName} chart rendered successfully`)
+}
+
+// Bar Charts
+export const Bar_Chart_Time_Based: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Example_Bar_Chart.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Bar Chart Time Based')
+  }
+}
+
+export const Bar_Chart_Categorical: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-category-bar-char.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Bar Chart Categorical')
+  }
+}
+
+export const Bar_Chart_With_Highlighted_Value: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/bar-chart-with-highlighte.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Bar Chart With Highlighted Value')
+  }
+}
+
+export const Bar_Chart_With_Confidence_Intervals: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Example_Bar_CI_1.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Bar Chart With Confidence Intervals')
+  }
+}
+
+export const Bar_Chart_With_Suppressed_Values: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/bar-chart-with-suppressed-values.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Bar Chart With Suppressed Values')
+  }
+}
+
+export const Horizontal_Bar_Chart: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Horizontal_Bar_Chart_Viz.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Horizontal Bar Chart')
+  }
+}
+
+// Box and Whiskers Plots
+export const Box_Plot_With_Outliers: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/box-plot-outliers.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Box Plot With Outliers')
+  }
+}
+
+export const Horizontal_Box_Plot: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/horizontal-box-plot.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Horizontal Box Plot')
+  }
+}
+
+// Bump Chart
+export const Bump_Chart: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/bump-chart.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Bump Chart')
+  }
+}
+
+// Combo Bar/Line Charts
+export const Combo_Bar_And_Area: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Combo_Bar_Line_Viz.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Combo Bar And Area')
+  }
+}
+
+export const Epi_Style_Bar_Chart: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-epi-style-bar-chart.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Epi Style Bar Chart')
+  }
+}
+
+// Deviation Bar Chart
+export const Deviation_Bar_Chart: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-deviation-bar-chart.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Deviation Bar Chart')
+  }
+}
+
+// Forecast Charts
+export const Forecast_Chart_Single_CI: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/forecast-chart-one-CI.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Forecast Chart Single CI')
+  }
+}
+
+export const Forecast_Chart_Multiple_CIs: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/forecast-chart-2-CIs.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Forecast Chart Multiple CIs')
+  }
+}
+
+// Line Charts
+export const Line_Chart_Standard: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Line_Chart_Viz.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Line Chart Standard')
+  }
+}
+
+export const Line_Chart_With_Regions: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Line_Chart_Regions_Viz.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Line Chart With Regions')
+  }
+}
+
+export const Line_Chart_Isolated: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Line_Chart_Isolated.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Line Chart Isolated')
+  }
+}
+
+export const Line_Chart_Line_Weights: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Line_Chart_Line_Weights.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Line Chart Line Weights')
+  }
+}
+
+export const Line_Chart_With_Open_Circles: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/line-chart-with-open-circles.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Line Chart With Open Circles')
+  }
+}
+
+export const Line_Chart_With_Suppression: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/line-chart-with-suppression.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Line Chart With Suppression')
+  }
+}
+
+// Lollipop Bar Chart
+export const Lollipop_Horizontal_Bar_Chart: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/lollipop-style-horizontal-bar-chart.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Lollipop Horizontal Bar Chart')
+  }
+}
+
+// Pie and Donut Charts
+export const Pie_Chart: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Example_Pie_viz.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Pie Chart')
+  }
+}
+
+export const Donut_Chart: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Donut-Chart.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Donut Chart')
+  }
+}
+
+// Scatter Plots
+export const Scatter_Plot_Negative_Trend: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/scatter-plot-negative-trend.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Scatter Plot Negative Trend')
+  }
+}
+
+export const Scatter_Plot_Multi_Series: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/scatter-plot-multi-series.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Scatter Plot Multi Series')
+  }
+}
+
+export const Scatter_Plot_Nonlinear_Trend: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/scatter-plot-nonlinear-trend.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Scatter Plot Nonlinear Trend')
+  }
+}
+
+// Sparklines
+export const Sparkline_2016_Outreach_Var2: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/2016-outreach-2.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Sparkline 2016 Outreach Var2')
+  }
+}
+
+export const Sparkline_2016_Outreach_Var3: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/2016-outreach-3.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Sparkline 2016 Outreach Var3')
+  }
+}
+
+export const Sparkline_2016_Outreach_Var4: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/2016-outreach-4.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Sparkline 2016 Outreach Var4')
+  }
+}
+
+// Stacked Area Charts
+export const Stacked_Area_Chart: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-stacked-area-chart.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Stacked Area Chart')
+  }
+}
+
+export const Area_Chart_With_Annotations: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/area-chart-with-annotations_1.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Area Chart With Annotations')
+  }
+}
+
+export const Area_Chart_With_Categorical_Axis: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-area-chart-with-cat-axis.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Area Chart With Categorical Axis')
+  }
+}
+
+// Stacked Bar Charts
+export const Stacked_Horizontal_Bar_Chart: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/example-stacked-horizontal-chart.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Stacked Horizontal Bar Chart')
+  }
+}
+
+export const Stacked_Vertical_Bar_Chart: Story = {
+  render: () => <Chart configUrl='https://www.cdc.gov/cove/examples/Stacked_Bar_Viz.json' />,
+  play: async ({ canvasElement }) => {
+    await testChartRendering(canvasElement, 'Stacked Vertical Bar Chart')
+  }
+}

package/_stories/Gallery.DataBite.stories.tsx

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { within, expect, waitFor } from 'storybook/test'
+import DataBite from '@cdc/data-bite'
+
+// Fallback step function for test descriptions
+const step = async (description: string, fn: () => Promise<void> | void) => {
+  console.log(`▶ ${description}`)
+  await fn()
+  console.log(`✓ ${description}`)
+}
+
+const meta: Meta = {
+  title: 'Regression Tests/Gallery/Data Bites',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Data Bite visualization examples from the CDC COVE Gallery'
+      }
+    }
+  },
+  tags: ['autodocs']
+}
+
+export default meta
+
+type Story = StoryObj<typeof DataBite>
+
+// Helper function to test data bite rendering
+const testDataBiteRendering = async (canvasElement: HTMLElement, storyName: string) => {
+  const canvas = within(canvasElement)
+
+  await step('Wait for data bite to render', async () => {
+    await waitFor(() => expect(canvasElement.querySelector('.bite-content')).toBeInTheDocument(), { timeout: 10000 })
+  })
+
+  await step('Verify COVE module wrapper is present', async () => {
+    const coveModule = canvasElement.querySelector('.cdc-open-viz-module')
+    expect(coveModule).toBeInTheDocument()
+  })
+
+  console.log(` ${storyName} data bite rendered successfully`)
+}
+
+export const Data_Bite_Circle_Average: Story = {
+  render: () => (
+    <DataBite configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Average.json' />
+  ),
+  play: async ({ canvasElement }) => {
+    await testDataBiteRendering(canvasElement, 'Data Bite Circle Average')
+  }
+}
+
+export const Data_Bite_Text_Max_Pic: Story = {
+  render: () => (
+    <DataBite configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Max_Pic.json' />
+  ),
+  play: async ({ canvasElement }) => {
+    await testDataBiteRendering(canvasElement, 'Data Bite Text Max Pic')
+  }
+}
+
+export const Data_Bite_Circle_Sum: Story = {
+  render: () => (
+    <DataBite configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Circle_Sum.json' />
+  ),
+  play: async ({ canvasElement }) => {
+    await testDataBiteRendering(canvasElement, 'Data Bite Circle Sum')
+  }
+}
+
+export const Data_Bite_Text_Average_Pic: Story = {
+  render: () => (
+    <DataBite configUrl='https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Data_Bite_Text_Average_Pic.json' />
+  ),
+  play: async ({ canvasElement }) => {
+    await testDataBiteRendering(canvasElement, 'Data Bite Text Average Pic')
+  }
+}