Release v0.2.0: Dialog, PopupForm components and CI publishing

.github/workflows/ci.yml

@@ -61,6 +61,7 @@ jobs:
                   retention-days: 7
 
     chromatic:
+        if: github.event_name == 'pull_request'
         runs-on: ubuntu-latest
         needs: build
         steps:

.github/workflows/npm-publish.yml

@@ -11,14 +11,15 @@ on:
                 default: "false"
                 type: boolean
             package:
-                description: "Package to publish (charts, colours, or all)"
+                description: "Package to publish (charts, colours, components, or all)"
                 required: false
                 default: "all"
                 type: choice
                 options:
                     - all
                     - charts
                     - colours
+                    - components
 
 permissions:
     id-token: write
@@ -66,3 +67,21 @@ jobs:
 
             - run: bunx npm publish --access public --provenance ${{ env.DRY_RUN }}
               working-directory: packages/colours
+
+    publish-components:
+        if: github.event.inputs.package == 'all' || github.event.inputs.package == 'components' || github.event_name == 'release'
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: "24"
+                  registry-url: "https://registry.npmjs.org"
+
+            - uses: oven-sh/setup-bun@v2
+
+            - run: bun install --frozen-lockfile
+
+            - run: bunx npm publish --access public --provenance ${{ env.DRY_RUN }}
+              working-directory: packages/components

.storybook/preview.ts

@@ -7,6 +7,7 @@ import "../packages/components/src/styles/main.scss"
 
 const preview: Preview = {
     decorators: [ChartsDecorator],
+    tags: ["autodocs"],
     parameters: {
         controls: {
             matchers: {
@@ -24,6 +25,12 @@ const preview: Preview = {
                 { name: "dark", value: "#1a1a1a" },
             ],
         },
+        docs: {
+            source: {
+                type: "code",
+            },
+            toc: true,
+        },
     },
 }
 

packages/charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buildcanada/charts",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A configurable data visualization library for creating interactive charts.",
   "type": "module",
   "main": "src/index.ts",

packages/charts/src/components/Button/Button.stories.tsx

@@ -6,6 +6,37 @@ import { Button } from "./Button"
 const meta: Meta<typeof Button> = {
     title: "Components/Button",
     component: Button,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A button component for the charts library with multiple theme variants.
+
+## Usage
+
+\`\`\`tsx
+import { Button } from "@buildcanada/charts"
+
+<Button text="Download" theme="solid-blue" icon={faDownload} />
+\`\`\`
+
+## Themes
+
+- **solid-vermillion**: Primary action (red)
+- **solid-blue**: Secondary action (blue)
+- **solid-dark-blue**: Dark blue variant
+- **solid-light-blue**: Light blue variant
+- **outline-vermillion**: Outlined red
+- **outline-light-blue**: Outlined light blue
+- **outline-white**: Outlined white (for dark backgrounds)
+
+## Icon Support
+
+Use FontAwesome icons with \`icon\` prop and control position with \`iconPosition\`.
+                `,
+            },
+        },
+    },
     argTypes: {
         theme: {
             control: "select",
@@ -18,13 +49,18 @@ const meta: Meta<typeof Button> = {
                 "outline-light-blue",
                 "outline-white",
             ],
+            description: "Visual theme of the button",
         },
         iconPosition: {
             control: "radio",
             options: ["left", "right"],
+            description: "Position of the icon relative to text",
         },
+        text: { description: "Button label text" },
+        icon: { description: "FontAwesome icon definition" },
+        disabled: { description: "Whether the button is disabled" },
+        href: { description: "If provided, renders as an anchor tag" },
     },
-    tags: ["autodocs"],
 }
 
 export default meta

packages/charts/src/components/Checkbox.stories.tsx

@@ -7,7 +7,49 @@ import { Checkbox } from "./Checkbox"
 const meta: Meta<typeof Checkbox> = {
     title: "Components/Checkbox",
     component: Checkbox,
-    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A checkbox component for the charts library.
+
+## Usage
+
+\`\`\`tsx
+import { Checkbox } from "@buildcanada/charts"
+
+<Checkbox
+  checked={isChecked}
+  label="Enable option"
+  onChange={(e) => setIsChecked(e.target.checked)}
+/>
+\`\`\`
+
+## Rich Labels
+
+Labels can include React nodes for links or formatting:
+
+\`\`\`tsx
+<Checkbox
+  checked={agreed}
+  label={<span>I agree to the <a href="#">terms</a></span>}
+  onChange={handleChange}
+/>
+\`\`\`
+
+## Controlled Component
+
+This is a controlled component - manage the \`checked\` state externally.
+                `,
+            },
+        },
+    },
+    argTypes: {
+        checked: { description: "Whether the checkbox is checked" },
+        label: { description: "Label text or React node" },
+        disabled: { description: "Whether the checkbox is disabled" },
+        onChange: { description: "Callback when checkbox state changes" },
+    },
     decorators: [
         (Story) => (
             <div style={{ maxWidth: "300px" }}>

packages/charts/src/components/LabeledSwitch/LabeledSwitch.stories.tsx

@@ -7,7 +7,49 @@ import { LabeledSwitch } from "./LabeledSwitch"
 const meta: Meta<typeof LabeledSwitch> = {
     title: "Components/LabeledSwitch",
     component: LabeledSwitch,
-    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A toggle switch component with a label and optional tooltip.
+
+## Usage
+
+\`\`\`tsx
+import { LabeledSwitch } from "@buildcanada/charts"
+
+<LabeledSwitch
+  value={isEnabled}
+  label="Enable feature"
+  onToggle={() => setIsEnabled(!isEnabled)}
+/>
+\`\`\`
+
+## With Tooltip
+
+\`\`\`tsx
+<LabeledSwitch
+  value={value}
+  label="Advanced mode"
+  tooltip="Shows additional configuration options"
+  onToggle={handleToggle}
+/>
+\`\`\`
+
+## Controlled Component
+
+This is a controlled component - you must manage the \`value\` state and handle \`onToggle\`.
+                `,
+            },
+        },
+    },
+    argTypes: {
+        value: { description: "Current toggle state (on/off)" },
+        label: { description: "Label text displayed next to the switch" },
+        tooltip: { description: "Optional tooltip text on hover" },
+        disabled: { description: "Whether the switch is disabled" },
+        onToggle: { description: "Callback when switch is toggled" },
+    },
     decorators: [
         (Story) => (
             <div style={{ maxWidth: "400px" }}>

packages/charts/src/components/loadingIndicator/LoadingIndicator.stories.tsx

@@ -6,7 +6,50 @@ import { Bounds } from "../../utils/index.js"
 const meta: Meta<typeof LoadingIndicator> = {
     title: "Components/LoadingIndicator",
     component: LoadingIndicator,
-    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A loading spinner component displayed while charts are fetching data.
+
+## Usage
+
+\`\`\`tsx
+import { LoadingIndicator } from "@buildcanada/charts"
+
+<LoadingIndicator title="Loading chart data..." />
+\`\`\`
+
+## Customization
+
+\`\`\`tsx
+<LoadingIndicator
+  title="Loading..."
+  color="#e63946"
+  backgroundColor="rgba(255, 255, 255, 0.8)"
+/>
+\`\`\`
+
+## With Bounds
+
+Use the \`bounds\` prop to constrain the indicator to a specific area:
+
+\`\`\`tsx
+<LoadingIndicator
+  bounds={new Bounds(10, 10, 180, 180)}
+  title="Loading..."
+/>
+\`\`\`
+                `,
+            },
+        },
+    },
+    argTypes: {
+        title: { description: "Loading message displayed below the spinner" },
+        color: { description: "Color of the spinner" },
+        backgroundColor: { description: "Background overlay color" },
+        bounds: { description: "Constrain indicator to specific bounds" },
+    },
     decorators: [
         (Story) => (
             <div style={{ position: "relative", width: "200px", height: "200px" }}>

packages/charts/src/explorer/Explorer.stories.tsx

@@ -12,6 +12,43 @@ const meta: Meta<typeof Explorer> = {
     component: Explorer,
     parameters: {
         layout: "centered",
+        docs: {
+            description: {
+                component: `
+A data exploration interface that wraps the Grapher with additional controls for filtering, selecting entities, and switching between chart types.
+
+## Usage
+
+\`\`\`tsx
+import { Explorer } from "@buildcanada/charts"
+
+<Explorer
+  program={explorerProgram}
+  grapherConfigs={grapherConfigs}
+  bounds={bounds}
+/>
+\`\`\`
+
+## Features
+
+- **Entity Selection**: Filter data by countries, provinces, or other entities
+- **Time Controls**: Adjust the time range being displayed
+- **Chart Type Switching**: Toggle between different visualization types
+- **Data Filtering**: Apply filters to narrow down the dataset
+
+## Configuration
+
+The Explorer is configured using an Explorer Program that defines:
+- Available graphers and their configurations
+- Entity selection options
+- Default views and filters
+
+## Embedding
+
+Use \`isEmbeddedInPage\` prop when embedding in a page context for optimized display.
+                `,
+            },
+        },
     },
     decorators: [
         (Story) => (

packages/charts/src/grapher/captionedChart/Logos.stories.tsx

@@ -9,6 +9,42 @@ const meta: Meta<typeof Grapher> = {
     component: Grapher,
     parameters: {
         layout: "centered",
+        docs: {
+            description: {
+                component: `
+Configure the logo displayed on charts. Multiple logo options are available for different branding needs.
+
+## Usage
+
+\`\`\`tsx
+import { Grapher, GrapherState, LogoOption } from "@buildcanada/charts"
+
+const grapherState = new GrapherState({
+  logo: LogoOption["buildcanada-wide"],
+  // ... other options
+})
+
+<Grapher grapherState={grapherState} />
+\`\`\`
+
+## Available Logos
+
+- **buildcanada-wide**: Wide Build Canada logo (default, recommended)
+- **buildcanada**: Square Build Canada logo (compact)
+- **canadaspends**: Canada Spends branded logo
+- **legacy**: Legacy logo for backwards compatibility
+
+## Hiding the Logo
+
+\`\`\`tsx
+const grapherState = new GrapherState({
+  hideLogo: true,
+  // ... other options
+})
+\`\`\`
+                `,
+            },
+        },
     },
     decorators: [
         (Story) => (