Test

.github/workflows/test-storybook.yml

@@ -25,14 +25,8 @@ jobs:
       - name: Build Packages
         run: lerna run build
 
-      - name: Add Playwright
-        run: npx playwright install
-
-      - name: Start Storybook
-        run: yarn storybook -p 6006 &
-
-      - name: Wait for Storybook to be available
-        run: npx wait-on http://localhost:6006
+      - name: Install Playwright with dependencies
+        run: npx playwright install chromium --with-deps
 
       - name: Run Storybook tests
-        run: yarn test-storybook --no-watch --reporter=default
+        run: yarn test-storybook

.gitignore

@@ -54,3 +54,4 @@ lerna-debug.log
 /backstop_data/bitmaps_test/
 /backstop_data/html_report/
 /backstop_data/ci_report/
+/.github/agents

.storybook/main.ts

@@ -1,3 +1,4 @@
+// This file has been automatically migrated to valid ESM format by Storybook.
 import { createRequire } from 'node:module'
 import { dirname, join } from 'node:path'
 import { mergeConfig } from 'vite'
@@ -29,23 +30,14 @@ const config: StorybookConfig = {
     options: {}
   },
 
-  features: {
-    storyStoreV7: true
-  },
-
   core: {
-    builder: getAbsolutePath('@storybook/builder-vite'),
     disableTelemetry: true
   },
 
   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)
 

.syncpackrc.json

@@ -0,0 +1,146 @@
+{
+  "versionGroups": [
+    {
+      "label": "Keep @cdc packages in sync",
+      "dependencies": [
+        "@cdc/**"
+      ],
+      "dependencyTypes": [
+        "prod",
+        "dev"
+      ],
+      "policy": "sameRange"
+    },
+    {
+      "label": "Pin shared React dependencies",
+      "dependencies": [
+        "react",
+        "react-dom"
+      ],
+      "dependencyTypes": [
+        "peer"
+      ],
+      "pinVersion": "^18.2.0"
+    },
+    {
+      "label": "Pin shared @types packages",
+      "dependencies": [
+        "@types/**"
+      ],
+      "dependencyTypes": [
+        "dev"
+      ],
+      "policy": "sameRange"
+    },
+    {
+      "label": "Pin shared build tools",
+      "dependencies": [
+        "@vitejs/**",
+        "vite",
+        "typescript"
+      ],
+      "dependencyTypes": [
+        "dev",
+        "prod"
+      ],
+      "policy": "highest"
+    },
+    {
+      "label": "Pin lodash version",
+      "dependencies": [
+        "lodash"
+      ],
+      "pinVersion": "^4.17.23"
+    },
+    {
+      "label": "Synchronize shared utilities",
+      "dependencies": [
+        "html-react-parser",
+        "papaparse",
+        "use-debounce",
+        "dompurify"
+      ],
+      "policy": "highest"
+    },
+    {
+      "label": "Pin @visx packages to latest",
+      "dependencies": [
+        "@visx/**"
+      ],
+      "pinVersion": "^3.12.0"
+    },
+    {
+      "label": "Synchronize visualization libraries",
+      "dependencies": [
+        "chroma-js"
+      ],
+      "policy": "highest"
+    },
+    {
+      "label": "Synchronize D3 ecosystem",
+      "dependencies": [
+        "d3",
+        "d3-**"
+      ],
+      "policy": "highests"
+    },
+    {
+      "label": "Synchronize UI/accessibility libraries",
+      "dependencies": [
+        "react-tooltip",
+        "react-accessible-accordion"
+      ],
+      "policy": "sameRange"
+    },
+    {
+      "label": "Synchronize drag-and-drop libraries",
+      "dependencies": [
+        "react-dnd",
+        "react-dnd-html5-backend",
+        "@hello-pangea/dnd"
+      ],
+      "policy": "sameRange"
+    },
+    {
+      "label": "Synchronize Storybook ecosystem",
+      "dependencies": [
+        "@storybook/**",
+        "storybook"
+      ],
+      "dependencyTypes": [
+        "dev"
+      ],
+      "policy": "highest"
+    }
+  ],
+  "semverGroups": [
+    {
+      "label": "Use caret ranges for most dependencies",
+      "range": "^",
+      "dependencies": [
+        "**"
+      ],
+      "packages": [
+        "**"
+      ]
+    }
+  ],
+  "sortAz": [
+    "contributors",
+    "dependencies",
+    "devDependencies",
+    "keywords",
+    "peerDependencies",
+    "resolutions",
+    "scripts"
+  ],
+  "sortFirst": [
+    "name",
+    "version",
+    "description",
+    "keywords",
+    "license",
+    "author",
+    "contributors"
+  ]
+}

AGENTS.md

@@ -0,0 +1,26 @@
+# AI Agent Instructions
+
+This file helps AI coding assistants understand how to work with this repository. It serves as an index to context documents that provide deeper knowledge for specific areas of the codebase.
+
+## Context Documents
+
+Before working on a specific area, read the relevant context document from the `docs/` directory:
+
+| Document                         | When to Use                                                                                                                                                    |
+| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `docs/TESTING_BEST_PRACTICES.md` | Writing or reviewing editor interaction tests. Covers the `performAndAssert` pattern, testing helpers, and common pitfalls to avoid.                           |
+| `docs/DASHBOARD_FILTERS_FLOW.md` | Working on dashboard filtering, data flow, or filter-related bugs. Contains flow diagrams, data transformation pipelines, and refactoring notes.               |
+| `docs/PACKAGE_DEPENDENCIES.md`   | Adding imports between packages or understanding the monorepo architecture. Explains the allowed dependency hierarchy (core → visualizations → orchestrators). |
+| `docs/PALETTE_MIGRATION.md`      | Working with color palettes or the palette selection system. Covers the v1 → v2 migration, helper functions, and configuration structure.                      |
+| `docs/COVE_EVENTS.md`            | Adding analytics events or working with the metrics system. Documents the event format, available event types, and usage patterns.                             |
+
+## Creating New Context Documents
+
+When you complete work on a substantial feature or complex system, **prompt the user** to consider creating a new context document if:
+
+- The feature involves non-obvious data flow or state management
+- There are important patterns or conventions that future developers should follow
+- The implementation has gotchas, edge cases, or decisions that aren't self-evident from the code
+- Multiple files or packages interact in ways that would take time to rediscover
+
+Suggest a document name and brief outline. Context documents are not user documentation—they're notes for developers (human or AI) who will work on this area again.