@structuralists/scaffolding 0.6.0 → 0.6.1

package/.github/workflows/ci.yml

@@ -0,0 +1,38 @@
+name: CI
+
+# The same four checks the release job runs post-merge (publish.yml), but on
+# every PR — so merging green is enforced, and the release job's checks are a
+# formality rather than the first place a break surfaces.
+on:
+  pull_request:
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  checks:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - run: bun install --frozen-lockfile
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('bun.lock') }}
+          restore-keys: playwright-${{ runner.os }}-
+
+      - name: Install Playwright chromium
+        run: npx playwright install chromium --with-deps
+
+      - run: bun run typecheck
+      - run: bun run lint
+      - run: bun run test
+      - run: bun run test:storybook

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@structuralists/scaffolding",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "main": "./index.ts",
   "types": "./index.ts",
   "exports": {

package/src/forms/useFormState/useFormState.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
 import { useFormState } from './useFormState';
 import { allOf, matches, minLength, notEmpty } from '../validators/validators';
 import { Field } from '../../components/Forms/Field';
@@ -153,6 +154,43 @@ export const SignupForm: Story = {
       <SignupDemo />
     </div>
   ),
+  // Walks the headline flow: errors gated on submit, allOf first-error
+  // progression, live clearing, and the narrowed payload reaching onSubmit.
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const body = within(canvasElement.ownerDocument.body);
+
+    // Errors are gated on submitAttempted — nothing shown initially.
+    await expect(
+      canvas.queryByText("'email' cannot be empty"),
+    ).not.toBeInTheDocument();
+
+    // A failing submit surfaces every constrained field's error.
+    await userEvent.click(canvas.getByRole('button', { name: 'Sign up' }));
+    await expect(canvas.getByText("'email' cannot be empty")).toBeInTheDocument();
+    await expect(
+      canvas.getByText("'displayName' cannot be empty"),
+    ).toBeInTheDocument();
+    await expect(canvas.getByText("'role' cannot be empty")).toBeInTheDocument();
+
+    // allOf progression: notEmpty now passes, matches takes over.
+    await userEvent.type(canvas.getByLabelText(/^Email/), 'not-an-email');
+    await expect(
+      canvas.getByText("'email' must be a valid email"),
+    ).toBeInTheDocument();
+
+    // Fix every field; errors clear live.
+    await userEvent.clear(canvas.getByLabelText(/^Email/));
+    await userEvent.type(canvas.getByLabelText(/^Email/), 'will@example.com');
+    await userEvent.type(canvas.getByLabelText(/^Display name/), 'Will');
+    await userEvent.click(canvas.getByRole('button', { name: 'Role' }));
+    // The option list is portaled — query the document, not the canvas.
+    await userEvent.click(await body.findByRole('option', { name: 'Engineer' }));
+
+    // Valid submit delivers the narrowed payload to onSubmit.
+    await userEvent.click(canvas.getByRole('button', { name: 'Sign up' }));
+    await expect(canvas.getByText(/onSubmit received/)).toBeInTheDocument();
+  },
 };
 
 const LiveValidityDemo = () => {
@@ -193,6 +231,19 @@ export const LiveValidity: Story = {
       <LiveValidityDemo />
     </div>
   ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Errors here are live — no submit gating.
+    await expect(canvas.getByText('false')).toBeInTheDocument();
+    await userEvent.type(canvas.getByLabelText(/^Nickname/), 'ab');
+    await expect(
+      canvas.getByText("'nickname' must be at least 3 characters"),
+    ).toBeInTheDocument();
+
+    await userEvent.type(canvas.getByLabelText(/^Nickname/), 'c');
+    await expect(canvas.getByText('true')).toBeInTheDocument();
+  },
 };
 
 type DebuggerDemoValues = {
@@ -300,4 +351,40 @@ export const WithDebugger: Story = {
       <DebuggerDemo />
     </div>
   ),
+  // The Debugger portals to <body>, so its trigger/window are queried on the
+  // document, not the canvas. Exercises open → live update → close, which
+  // also pins the stable-identity guarantee: a remounting Debugger would
+  // lose its open state on the first keystroke.
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const body = within(canvasElement.ownerDocument.body);
+
+    // Closed: trigger only, no window content.
+    await expect(body.queryByText('isValid')).not.toBeInTheDocument();
+
+    // Open: live state, including errors the form itself isn't showing yet
+    // (its display is submit-gated; the debugger sees the raw truth).
+    await userEvent.click(body.getByRole('button', { name: 'signup form' }));
+    await expect(body.getByText('isValid')).toBeInTheDocument();
+    await expect(body.getByText("'email' cannot be empty")).toBeInTheDocument();
+    await expect(
+      body.getByText("'nickname' cannot be empty"),
+    ).toBeInTheDocument();
+
+    // Live update while open: value appears, its error entry drops out.
+    await userEvent.type(canvas.getByLabelText(/^Nickname/), 'will');
+    await expect(body.getByText('will')).toBeInTheDocument();
+    await expect(
+      body.queryByText("'nickname' cannot be empty"),
+    ).not.toBeInTheDocument();
+
+    // List values render in the window (index-keyed).
+    await userEvent.type(canvas.getByLabelText(/^Tags/), 'typescript');
+    await userEvent.click(canvas.getByRole('button', { name: 'Add' }));
+    await expect(body.getByText('typescript')).toBeInTheDocument();
+
+    // Close: window unmounts, trigger stays.
+    await userEvent.click(body.getByRole('button', { name: 'signup form' }));
+    await expect(body.queryByText('isValid')).not.toBeInTheDocument();
+  },
 };