@buildcanada/components 0.3.3 → 0.3.5

package/src/primitives/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { within, userEvent, expect, fn } from "@storybook/test"
+import { useState } from "react"
+
+import { Checkbox } from "./Checkbox"
+
+const meta: Meta<typeof Checkbox> = {
+    title: "Components/Primitives/Checkbox",
+    component: Checkbox,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A styled checkbox component with label support.
+
+## Usage
+
+\`\`\`tsx
+import { Checkbox } from "@buildcanada/components"
+
+<Checkbox label="I agree to the terms" />
+\`\`\`
+
+## Controlled vs Uncontrolled
+
+Use \`defaultChecked\` for uncontrolled or \`checked\` with \`onChange\` for controlled:
+
+\`\`\`tsx
+// Uncontrolled
+<Checkbox label="Option" defaultChecked />
+
+// Controlled
+<Checkbox
+  label="Option"
+  checked={isChecked}
+  onChange={(e) => setIsChecked(e.target.checked)}
+/>
+\`\`\`
+                `,
+            },
+        },
+    },
+    argTypes: {
+        label: { description: "The label text displayed next to the checkbox" },
+        disabled: { description: "Whether the checkbox is disabled" },
+        defaultChecked: { description: "Initial checked state (uncontrolled)" },
+        checked: { description: "Controlled checked state" },
+        onChange: { description: "Callback when checkbox state changes" },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+    args: {
+        label: "I agree to the terms and conditions",
+    },
+}
+
+export const Checked: Story = {
+    args: {
+        label: "Subscribe to newsletter",
+        defaultChecked: true,
+    },
+}
+
+export const Unchecked: Story = {
+    args: {
+        label: "Remember my preferences",
+        defaultChecked: false,
+    },
+}
+
+export const Disabled: Story = {
+    args: {
+        label: "This option is disabled",
+        disabled: true,
+    },
+}
+
+export const DisabledChecked: Story = {
+    args: {
+        label: "This option is checked and disabled",
+        defaultChecked: true,
+        disabled: true,
+    },
+}
+
+export const LongLabel: Story = {
+    args: {
+        label: "By checking this box, I confirm that I have read and understood the privacy policy, terms of service, and agree to receive communications from Build Canada.",
+    },
+}
+
+// Interactive test: Click to toggle
+export const ClickTest: Story = {
+    args: {
+        label: "Click to toggle",
+        onChange: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement)
+        const checkbox = canvas.getByRole("checkbox", { name: /click to toggle/i })
+
+        await expect(checkbox).not.toBeChecked()
+        await userEvent.click(checkbox)
+        await expect(checkbox).toBeChecked()
+        await expect(args.onChange).toHaveBeenCalled()
+    },
+}
+
+// Interactive test: Double click
+export const DoubleClickTest: Story = {
+    args: {
+        label: "Double click test",
+        onChange: fn(),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+        const checkbox = canvas.getByRole("checkbox", { name: /double click/i })
+
+        await expect(checkbox).not.toBeChecked()
+        await userEvent.click(checkbox)
+        await expect(checkbox).toBeChecked()
+        await userEvent.click(checkbox)
+        await expect(checkbox).not.toBeChecked()
+    },
+}
+
+// Interactive test: Disabled should not toggle
+export const DisabledClickTest: Story = {
+    args: {
+        label: "Disabled checkbox",
+        disabled: true,
+        onChange: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement)
+        const checkbox = canvas.getByRole("checkbox", { name: /disabled checkbox/i })
+
+        await expect(checkbox).toBeDisabled()
+        await userEvent.click(checkbox)
+        await expect(args.onChange).not.toHaveBeenCalled()
+    },
+}
+
+// Interactive test: Keyboard interaction
+export const KeyboardTest: Story = {
+    args: {
+        label: "Keyboard toggle",
+        onChange: fn(),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+        const checkbox = canvas.getByRole("checkbox", { name: /keyboard toggle/i })
+
+        checkbox.focus()
+        await expect(checkbox).toHaveFocus()
+        await userEvent.keyboard(" ")
+        await expect(checkbox).toBeChecked()
+    },
+}
+
+export const Controlled: Story = {
+    render: function ControlledCheckbox() {
+        const [checked, setChecked] = useState(false)
+        return (
+            <div>
+                <Checkbox
+                    label={`Controlled checkbox (${checked ? "checked" : "unchecked"})`}
+                    checked={checked}
+                    onChange={(e) => setChecked(e.target.checked)}
+                />
+                <p style={{ marginTop: "16px", fontFamily: "sans-serif", fontSize: "14px" }}>
+                    The checkbox is currently: <strong>{checked ? "checked" : "unchecked"}</strong>
+                </p>
+            </div>
+        )
+    },
+}
+
+export const MultipleCheckboxes: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+            <Checkbox label="Option A" defaultChecked />
+            <Checkbox label="Option B" />
+            <Checkbox label="Option C" />
+            <Checkbox label="Option D (disabled)" disabled />
+        </div>
+    ),
+}
+
+export const FormExample: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px", maxWidth: "500px" }}>
+            <h3 style={{ margin: 0, fontFamily: "sans-serif" }}>Communication Preferences</h3>
+            <Checkbox label="Email updates about new features" defaultChecked />
+            <Checkbox label="Weekly newsletter" defaultChecked />
+            <Checkbox label="Partner offers and promotions" />
+            <Checkbox label="Account activity alerts" defaultChecked />
+        </div>
+    ),
+}

package/src/primitives/Checkbox/index.ts

@@ -1,2 +1,2 @@
-export { Checkbox, type CheckboxProps } from "./Checkbox"
-export { default } from "./Checkbox"
+export { Checkbox, type CheckboxProps } from "./Checkbox.js"
+export { default } from "./Checkbox.js"

package/src/primitives/TextField/TextField.stories.tsx

@@ -0,0 +1,265 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { within, userEvent, expect, fn } from "@storybook/test"
+
+import { TextField } from "./TextField"
+
+const meta: Meta<typeof TextField> = {
+    title: "Components/Primitives/TextField",
+    component: TextField,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A form text input component with label, hint, and error states.
+
+## Usage
+
+\`\`\`tsx
+import { TextField } from "@buildcanada/components"
+
+<TextField
+  label="Email Address"
+  type="email"
+  placeholder="you@example.com"
+/>
+\`\`\`
+
+## Input Types
+
+Supports standard HTML input types: text, email, password, number, tel, url.
+
+## Validation States
+
+\`\`\`tsx
+// With hint text
+<TextField label="Password" hint="Must be 8+ characters" />
+
+// With error
+<TextField label="Email" error="Invalid email format" />
+
+// Required field
+<TextField label="Name" required />
+\`\`\`
+                `,
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: "select",
+            options: ["text", "email", "password", "number", "tel", "url"],
+            description: "HTML input type",
+        },
+        label: { description: "Label text above the input" },
+        placeholder: { description: "Placeholder text" },
+        hint: { description: "Helper text below the input" },
+        error: { description: "Error message (shows error state when set)" },
+        required: { description: "Whether the field is required" },
+        disabled: { description: "Whether the input is disabled" },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof TextField>
+
+export const Default: Story = {
+    args: {
+        label: "Full Name",
+        placeholder: "Enter your full name",
+    },
+}
+
+export const WithValue: Story = {
+    args: {
+        label: "Email Address",
+        type: "email",
+        value: "contact@buildcanada.com",
+    },
+}
+
+export const WithPlaceholder: Story = {
+    args: {
+        label: "Company",
+        placeholder: "Your company name",
+    },
+}
+
+export const WithHint: Story = {
+    args: {
+        label: "Password",
+        type: "password",
+        placeholder: "Enter your password",
+        hint: "Must be at least 8 characters long",
+    },
+}
+
+export const WithError: Story = {
+    args: {
+        label: "Email Address",
+        type: "email",
+        value: "invalid-email",
+        error: "Please enter a valid email address",
+    },
+}
+
+export const Required: Story = {
+    args: {
+        label: "Email Address",
+        type: "email",
+        placeholder: "you@example.com",
+        required: true,
+    },
+}
+
+export const Disabled: Story = {
+    args: {
+        label: "Organization",
+        value: "Build Canada",
+        disabled: true,
+    },
+}
+
+export const EmailType: Story = {
+    args: {
+        label: "Email",
+        type: "email",
+        placeholder: "you@example.com",
+    },
+}
+
+export const PasswordType: Story = {
+    args: {
+        label: "Password",
+        type: "password",
+        placeholder: "Enter your password",
+    },
+}
+
+export const NumberType: Story = {
+    args: {
+        label: "Amount (CAD)",
+        type: "number",
+        placeholder: "0.00",
+    },
+}
+
+export const TelType: Story = {
+    args: {
+        label: "Phone Number",
+        type: "tel",
+        placeholder: "+1 (555) 123-4567",
+    },
+}
+
+export const NoLabel: Story = {
+    args: {
+        placeholder: "Search...",
+        type: "text",
+    },
+}
+
+// Interactive test: Type in the field
+export const TypeTest: Story = {
+    args: {
+        label: "Username",
+        placeholder: "Enter username",
+        onChange: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement)
+        const input = canvas.getByRole("textbox", { name: /username/i })
+
+        await expect(input).toBeInTheDocument()
+        await userEvent.type(input, "testuser")
+        await expect(input).toHaveValue("testuser")
+        await expect(args.onChange).toHaveBeenCalled()
+    },
+}
+
+// Interactive test: Focus and blur
+export const FocusBlurTest: Story = {
+    args: {
+        label: "Email",
+        placeholder: "Enter email",
+        onFocus: fn(),
+        onBlur: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement)
+        const input = canvas.getByRole("textbox", { name: /email/i })
+
+        await userEvent.click(input)
+        await expect(args.onFocus).toHaveBeenCalled()
+
+        await userEvent.tab()
+        await expect(args.onBlur).toHaveBeenCalled()
+    },
+}
+
+// Interactive test: Disabled field
+export const DisabledTest: Story = {
+    args: {
+        label: "Locked Field",
+        value: "Cannot edit this",
+        disabled: true,
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+        const input = canvas.getByRole("textbox", { name: /locked field/i })
+
+        await expect(input).toBeDisabled()
+        await expect(input).toHaveValue("Cannot edit this")
+    },
+}
+
+// Interactive test: Error state
+export const ErrorStateTest: Story = {
+    args: {
+        label: "Email",
+        value: "invalid",
+        error: "Invalid email format",
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+        const input = canvas.getByRole("textbox", { name: /email/i })
+        const errorMessage = canvas.getByText("Invalid email format")
+
+        await expect(input).toHaveAttribute("aria-invalid", "true")
+        await expect(errorMessage).toBeInTheDocument()
+    },
+}
+
+export const AllStates: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexDirection: "column", gap: "24px", maxWidth: "400px" }}>
+            <TextField
+                label="Default"
+                placeholder="Enter text..."
+            />
+            <TextField
+                label="With Value"
+                value="Some content"
+            />
+            <TextField
+                label="With Hint"
+                placeholder="Enter text..."
+                hint="This is a helpful hint"
+            />
+            <TextField
+                label="With Error"
+                value="Invalid input"
+                error="This field has an error"
+            />
+            <TextField
+                label="Required Field"
+                placeholder="This field is required"
+                required
+            />
+            <TextField
+                label="Disabled"
+                value="Cannot edit"
+                disabled
+            />
+        </div>
+    ),
+}

package/src/primitives/TextField/index.ts

@@ -1,2 +1,2 @@
-export { TextField, type TextFieldProps, type TextFieldType } from "./TextField"
-export { default } from "./TextField"
+export { TextField, type TextFieldProps, type TextFieldType } from "./TextField.js"
+export { default } from "./TextField.js"