DT-3027: Setup Basic Super Form #2765

rossnelson · 2025-06-13T19:18:27Z

Description & motivation 💭

This PR implements direct SuperForms integration for form handling in the UI. It adds a minimal wrapper utility and documentation to help developers use SuperForms effectively.

Key changes:

Added createSPAForm wrapper that configures SuperForms with SPA defaults
Added documentation with examples for both wrapper and raw SuperForms usage
Created Storybook examples showing various form patterns
Added unit tests with proper mocking to avoid Svelte lifecycle issues
Updated basic page to demonstrate SuperForms usage
Added project guidelines in CLAUDE.md for development standards

Screenshots (if applicable) 📸

Storybook story shows a simple form with text input that successfully posts form data to the actions pane when submitted.

In Page	Storybook

Form Usage

Forms use direct SuperForms integration:

import { createSPAForm } from '$lib/utilities/form/create-spa-form';
import { z } from 'zod';

const schema = z.object({
  username: z.string().min(3),
  email: z.string().email(),
});

const { form, errors, enhance } = createSPAForm({
  schema,
  defaultValues: { username: '', email: '' },
  options: {
    onUpdate: async ({ form }) => {
      // Handle form submission
    },
  },
});

<form use:enhance>
  <Input bind:value={$form.username} error={$errors.username?.[0]} />
  <Input bind:value={$form.email} error={$errors.email?.[0]} />
  <Button type="submit">Submit</Button>
</form>

Benefits ✨

Type safety - Full TypeScript support from SuperForms
Developer experience - Direct access to SuperForms APIs
Performance - No wrapper overhead
Future-proof - Built on well-maintained SuperForms library

Testing 🧪

Unit tests for createSPAForm function with mocked SuperForms
Storybook examples with interactive forms
Basic page demonstrates usage
All linting and type checking passes

Steps to test: 🚶‍♂️🚶‍♀️

Run pnpm stories:dev to start Storybook
Navigate to "Form/SuperForms Examples" story
Test all four form examples (basic, raw, loading, validation)
Visit /basic route to see form in action
Run pnpm test src/lib/utilities/form/create-spa-form.test.ts to verify tests
Run pnpm check and pnpm lint to verify code quality

Checklists ✅

Completed

C 8000 reate SuperForms wrapper utility
Add documentation and examples
Create unit tests with proper mocking
Update Storybook with interactive examples
Remove barrel imports for direct file paths
Ensure all linting and type checking passes
Add project coding standards (CLAUDE.md)

Issue(s) closed

Completes DT-3027 SuperForms integration - adds form handling with direct SuperForms usage.

Closes DT-3034, DT-3028, DT-3029, DT-3032

vercel · 2025-06-13T19:18:32Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
holocene	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 27, 2025 8:01pm

src/lib/holocene/form/context/form-provider.svelte

src/lib/holocene/form/factories/base.ts

src/lib/holocene/form/factories/server-form.ts

src/lib/holocene/form/factories/spa-form.ts

src/lib/holocene/form/form.stories.svelte

src/lib/holocene/form/use-form-field.svelte.ts

src/lib/holocene/input/input.svelte

src/routes/(app)/basic/+page.svelte

src/lib/holocene/form/factories/index.ts

src/lib/holocene/form/use-form-field.svelte.ts

src/lib/holocene/form/index.ts

rossnelson · 2025-06-23T22:07:35Z

src/lib/utilities/form/create-spa-form.test.ts

@@ -0,0 +1,134 @@
+// @vitest-environment jsdom


This test feels pointless. is there a better way to unit test svelte components?

Adds foundational form infrastructure using SuperForms for SPA applications. Includes SuperForms integration with Zod validation, comprehensive documentation, and Storybook examples. Key implementation details: - SuperForms dependency with Zod for schema validation - Example components demonstrating various form patterns - Documentation covering both wrapper and raw SuperForms usage - Storybook integration for interactive form examples - Testing infrastructure setup with proper mocking - CLAUDE.md documentation for project coding standards The infrastructure provides a foundation for building robust forms with client-side validation, loading states, error handling, and proper accessibility support.

vercel bot deployed to Preview June 13, 2025 23:30 View deployment

vercel bot deployed to Preview June 16, 2025 18:40 View deployment

vercel bot deployed to Preview June 16, 2025 18:47 View deployment

vercel bot deployed to Preview June 16, 2025 19:30 View deployment

vercel bot deployed to Preview June 16, 2025 21:10 View deployment

rossnelson force-pushed the DT-3027-setup-basic-form branch from 7db11d3 to b94a2c1 Compare June 17, 2025 15:00

vercel bot deployed to Preview June 17, 2025 15:01 View deployment

vercel bot deployed to Preview June 18, 2025 14:41 View deployment

vercel bot deployed to Preview June 18, 2025 18:12 View deployment

vercel bot deployed to Preview June 18, 2025 18:26 View deployment

vercel bot deployed to Preview June 18, 2025 18:52 View deployment