Merge pull request #2 from BuildCanada/feat/buildcanada-components

Add @buildcanada/components package with Chromatic visual testing

Author: xrendan

.github/workflows/ci.yml

@@ -59,3 +59,34 @@ jobs:
                   name: storybook-static
                   path: storybook-static/
                   retention-days: 7
+
+    chromatic:
+        runs-on: ubuntu-latest
+        needs: build
+        steps:
+            - name: Clone repository
+              uses: actions/checkout@v5
+              with:
+                  fetch-depth: 0
+
+            - name: Setup Bun
+              uses: oven-sh/setup-bun@v2
+              with:
+                  bun-version: latest
+
+            - name: Install dependencies
+              run: bun install --frozen-lockfile
+
+            - name: Download Storybook artifact
+              uses: actions/download-artifact@v4
+              with:
+                  name: storybook-static
+                  path: storybook-static/
+
+            - name: Run Chromatic
+              uses: chromaui/action@latest
+              with:
+                  projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+                  storybookBuildDir: storybook-static
+                  exitZeroOnChanges: true
+                  onlyChanged: true

.storybook/helpers/grapherStateFactory.ts

@@ -20,6 +20,7 @@ export function createStorybookGrapherState(
 ): GrapherState {
     return LifeExpectancyGrapher({
         bounds: new Bounds(0, 0, 1100, 660),
+        selectedEntityNames: ["Canada", "United States", "Germany", "Japan"],
         ...overrides,
     })
 }
@@ -33,6 +34,7 @@ export function createLineChartState(
     return LifeExpectancyGrapher({
         bounds: new Bounds(0, 0, 1100, 660),
         chartTypes: [GRAPHER_CHART_TYPES.LineChart],
+        selectedEntityNames: ["Canada", "United States", "Germany", "Japan"],
         ...overrides,
     })
 }
@@ -46,6 +48,16 @@ export function createDiscreteBarChartState(
     return LifeExpectancyGrapher({
         bounds: new Bounds(0, 0, 1100, 660),
         chartTypes: [GRAPHER_CHART_TYPES.DiscreteBar],
+        selectedEntityNames: [
+            "Japan",
+            "Canada",
+            "Germany",
+            "United States",
+            "Brazil",
+            "China",
+            "India",
+            "Nigeria",
+        ],
         ...overrides,
     })
 }
@@ -59,6 +71,7 @@ export function createStackedAreaChartState(
     return LifeExpectancyGrapher({
         bounds: new Bounds(0, 0, 1100, 660),
         chartTypes: [GRAPHER_CHART_TYPES.StackedArea],
+        selectedEntityNames: ["Canada", "United States", "Germany", "Japan", "Brazil"],
         ...overrides,
     })
 }
@@ -72,6 +85,7 @@ export function createStackedBarChartState(
     return LifeExpectancyGrapher({
         bounds: new Bounds(0, 0, 1100, 660),
         chartTypes: [GRAPHER_CHART_TYPES.StackedBar],
+        selectedEntityNames: ["Canada", "United States", "Germany", "Japan", "Brazil"],
         ...overrides,
     })
 }
@@ -85,6 +99,7 @@ export function createSlopeChartState(
     return LifeExpectancyGrapher({
         bounds: new Bounds(0, 0, 1100, 660),
         chartTypes: [GRAPHER_CHART_TYPES.SlopeChart],
+        selectedEntityNames: ["Canada", "United States", "Germany", "Japan", "Brazil", "China"],
         ...overrides,
     })
 }
@@ -98,6 +113,7 @@ export function createScatterPlotState(
     return LifeExpectancyGrapher({
         bounds: new Bounds(0, 0, 1100, 660),
         chartTypes: [GRAPHER_CHART_TYPES.ScatterPlot],
+        selectedEntityNames: ["Canada", "United States", "Germany", "Japan", "Brazil", "China", "India"],
         ...overrides,
     })
 }

.storybook/main.ts

@@ -6,12 +6,19 @@ const config: StorybookConfig = {
         "./docs/**/*.mdx",
         "../packages/charts/src/**/*.stories.@(ts|tsx)",
         "../packages/colours/src/**/*.stories.@(ts|tsx)",
+        "../packages/components/src/**/*.stories.@(ts|tsx)",
     ],
-    addons: ["@storybook/addon-docs"],
+    addons: ["@storybook/addon-docs", "@storybook/addon-interactions"],
     framework: {
         name: "@storybook/react-vite",
         options: {},
     },
+    staticDirs: [
+        {
+            from: "../packages/components/src/assets",
+            to: "/assets",
+        },
+    ],
     typescript: {
         // Disable react-docgen because the codebase uses MobX decorators
         // (@observer before export) which aren't compatible with react-docgen
@@ -75,7 +82,10 @@ const config: StorybookConfig = {
             css: {
                 preprocessorOptions: {
                     scss: {
-                        includePaths: ["./packages/charts/src"],
+                        includePaths: [
+                            "./packages/charts/src",
+                            "./packages/components/src",
+                        ],
                         silenceDeprecations: ["import"],
                     },
                 },

.storybook/preview.ts

@@ -3,6 +3,7 @@ import type { Preview } from "@storybook/react"
 import { ChartsDecorator } from "./decorators/ChartsDecorator"
 
 import "../packages/charts/src/styles/charts.scss"
+import "../packages/components/src/styles/main.scss"
 
 const preview: Preview = {
     decorators: [ChartsDecorator],
@@ -14,10 +15,12 @@ const preview: Preview = {
             },
         },
         backgrounds: {
-            default: "light",
+            default: "linen",
             values: [
-                { name: "light", value: "#ffffff" },
+                { name: "linen", value: "#F6ECE3" },
+                { name: "white", value: "#ffffff" },
                 { name: "gray", value: "#f5f5f5" },
+                { name: "charcoal", value: "#272727" },
                 { name: "dark", value: "#1a1a1a" },
             ],
         },