@fragments-sdk/ui 0.13.0 → 0.15.1

package/src/components/Fieldset/Fieldset.fragment.tsx

@@ -1,167 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Fieldset } from '.';
-import { Field } from '../Field';
-import { Input } from '../Input';
-import { Textarea } from '../Textarea';
-import { Select } from '../Select';
-import { Checkbox } from '../Checkbox';
-import { Grid } from '../Grid';
-
-export default defineFragment({
-  component: Fieldset,
-
-  meta: {
-    name: 'Fieldset',
-    description: 'Groups related form fields with an accessible legend. Use to organize forms into logical sections.',
-    category: 'forms',
-    status: 'stable',
-    tags: ['form', 'fieldset', 'group', 'legend', 'accessible'],
-    since: '0.4.0',
-  },
-
-  usage: {
-    when: [
-      'Grouping related fields in a form (e.g., address, personal info)',
-      'Disabling a group of fields together',
-      'Providing an accessible group label for screen readers',
-    ],
-    whenNot: [
-      'Generic visual grouping (use Card)',
-      'Single field wrapping (use Field)',
-    ],
-    guidelines: [
-      'Always include a Fieldset.Legend for accessibility',
-      'Use disabled prop to disable all fields within the group',
-      'Use Grid inside Fieldset for multi-column layouts',
-    ],
-    accessibility: [
-      'Renders semantic fieldset element',
-      'Legend provides accessible group label',
-      'Disabled state propagates to all child fields',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Fieldset content including Fieldset.Legend and form fields',
-      required: true,
-    },
-    disabled: {
-      type: 'boolean',
-      description: 'Disables all fields within the fieldset',
-    },
-  },
-
-  relations: [
-    { component: 'Field', relationship: 'sibling', note: 'Contains Field components' },
-    { component: 'Form', relationship: 'parent', note: 'Used within a Form' },
-    { component: 'Card', relationship: 'alternative', note: 'Use Card for non-form visual grouping' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'disabled: boolean - disables all child fields',
-      'Fieldset.Legend: accessible group label',
-    ],
-    scenarioTags: ['form.group', 'form.fieldset'],
-    a11yRules: ['A11Y_FIELDSET_LEGEND'],
-  },
-
-  variants: [
-    {
-      name: 'Two-column layout',
-      description: 'Fieldset with Grid for side-by-side fields',
-      render: () => (
-        <Fieldset>
-          <Fieldset.Legend>Personal Information</Fieldset.Legend>
-          <Grid columns={2} gap="md">
-            <Field name="firstName">
-              <Field.Label>First Name</Field.Label>
-              <Field.Control>
-                <Input placeholder="Jane" />
-              </Field.Control>
-            </Field>
-            <Field name="lastName">
-              <Field.Label>Last Name</Field.Label>
-              <Field.Control>
-                <Input placeholder="Doe" />
-              </Field.Control>
-            </Field>
-            <Grid.Item colSpan="full">
-              <Field name="email">
-                <Field.Label>Email</Field.Label>
-                <Field.Control>
-                  <Input type="email" placeholder="jane@example.com" />
-                </Field.Control>
-              </Field>
-            </Grid.Item>
-          </Grid>
-        </Fieldset>
-      ),
-    },
-    {
-      name: 'Mixed controls',
-      description: 'Fieldset with textarea, select, and checkbox',
-      render: () => (
-        <Fieldset>
-          <Fieldset.Legend>Preferences</Fieldset.Legend>
-          <Field name="bio">
-            <Field.Label>Bio</Field.Label>
-            <Field.Control>
-              <Textarea placeholder="Tell us about yourself" rows={3} />
-            </Field.Control>
-            <Field.Description>Brief description for your profile.</Field.Description>
-          </Field>
-          <Field name="role">
-            <Field.Label>Role</Field.Label>
-            <Field.Control>
-              <Select placeholder="Select a role">
-                <Select.Trigger />
-                <Select.Content>
-                  <Select.Item value="admin">Admin</Select.Item>
-                  <Select.Item value="editor">Editor</Select.Item>
-                  <Select.Item value="viewer">Viewer</Select.Item>
-                </Select.Content>
-              </Select>
-            </Field.Control>
-          </Field>
-          <Field name="newsletter">
-            <Field.Control>
-              <Checkbox label="Subscribe to newsletter" />
-            </Field.Control>
-          </Field>
-        </Fieldset>
-      ),
-    },
-    {
-      name: 'Disabled',
-      description: 'Disabled fieldset prevents interaction with all children',
-      render: () => (
-        <Fieldset disabled>
-          <Fieldset.Legend>Locked Section</Fieldset.Legend>
-          <Grid columns={2} gap="md">
-            <Field name="lockedFirst">
-              <Field.Label>First Name</Field.Label>
-              <Field.Control>
-                <Input defaultValue="Jane" />
-              </Field.Control>
-            </Field>
-            <Field name="lockedLast">
-              <Field.Label>Last Name</Field.Label>
-              <Field.Control>
-                <Input defaultValue="Doe" />
-              </Field.Control>
-            </Field>
-          </Grid>
-          <Field name="lockedCheck">
-            <Field.Control>
-              <Checkbox label="Cannot toggle" defaultChecked />
-            </Field.Control>
-          </Field>
-        </Fieldset>
-      ),
-    },
-  ],
-});

package/src/components/Fieldset/Fieldset.test.tsx

@@ -1,48 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { render, screen, expectNoA11yViolations } from '../../test/utils';
-import { Fieldset } from './index';
-
-describe('Fieldset', () => {
-  it('renders a fieldset element', () => {
-    render(
-      <Fieldset>
-        <Fieldset.Legend>Personal Info</Fieldset.Legend>
-        <input aria-label="Name" />
-      </Fieldset>
-    );
-    // Base UI renders a fieldset element
-    const fieldset = screen.getByRole('group');
-    expect(fieldset).toBeInTheDocument();
-  });
-
-  it('renders a legend', () => {
-    render(
-      <Fieldset>
-        <Fieldset.Legend>Contact Details</Fieldset.Legend>
-      </Fieldset>
-    );
-    expect(screen.getByText('Contact Details')).toBeInTheDocument();
-  });
-
-  it('passes disabled prop to fieldset element', () => {
-    const { container } = render(
-      <Fieldset disabled>
-        <Fieldset.Legend>Settings</Fieldset.Legend>
-        <input aria-label="Option" />
-      </Fieldset>
-    );
-    const fieldset = container.querySelector('fieldset');
-    expect(fieldset).toBeInTheDocument();
-    expect(fieldset).toHaveAttribute('data-disabled', '');
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <Fieldset>
-        <Fieldset.Legend>Accessible fieldset</Fieldset.Legend>
-        <input aria-label="Field" />
-      </Fieldset>
-    );
-    await expectNoA11yViolations(container);
-  });
-});

package/src/components/Form/Form.fragment.tsx

@@ -1,292 +0,0 @@
-import React from 'react';
-import { defineFragment } from '@fragments-sdk/cli/core';
-import { Form } from '.';
-import { Field } from '../Field';
-import { Fieldset } from '../Fieldset';
-import { Input } from '../Input';
-import { Textarea } from '../Textarea';
-import { Select } from '../Select';
-import { Checkbox } from '../Checkbox';
-import { RadioGroup } from '../RadioGroup';
-import { Switch } from '../Switch';
-import { Button } from '../Button';
-import { Grid } from '../Grid';
-
-export default defineFragment({
-  component: Form,
-
-  meta: {
-    name: 'Form',
-    description: 'Form wrapper that handles server-side error distribution to Field components. Pairs with Field for complete form validation.',
-    category: 'forms',
-    status: 'stable',
-    tags: ['form', 'validation', 'errors', 'submit', 'server'],
-    since: '0.4.0',
-  },
-
-  usage: {
-    when: [
-      'Building forms that need server-side error handling',
-      'Distributing validation errors to specific fields by name',
-      'Combining client and server validation in one form',
-    ],
-    whenNot: [
-      'Simple forms with only client-side validation (use native form or Field alone)',
-      'Non-form layouts (use Grid or Card)',
-    ],
-    guidelines: [
-      'Pass errors as Record<string, string | string[]> keyed by field name',
-      'Use onClearErrors to clear errors when fields are modified',
-      'Use onFormSubmit for form submission handling',
-      'Field components with matching name prop display errors automatically',
-      'Use Grid inside Form or Fieldset for multi-column layouts',
-    ],
-    accessibility: [
-      'Renders semantic form element',
-      'Error messages linked to fields via aria-describedby',
-    ],
-  },
-
-  props: {
-    children: {
-      type: 'node',
-      description: 'Form content',
-      required: true,
-    },
-    errors: {
-      type: 'object',
-      description: 'Server-side errors keyed by field name',
-    },
-    onFormSubmit: {
-      type: 'function',
-      description: 'Form submission handler',
-    },
-    onClearErrors: {
-      type: 'function',
-      description: 'Called with field name when errors should be cleared',
-    },
-    validationMode: {
-      type: 'enum',
-      description: 'When field validation should run',
-      values: ['onSubmit', 'onBlur', 'onChange'],
-    },
-  },
-
-  relations: [
-    { component: 'Field', relationship: 'sibling', note: 'Contains Field components for error distribution' },
-    { component: 'Fieldset', relationship: 'sibling', note: 'Use Fieldset to group fields within a Form' },
-    { component: 'Button', relationship: 'sibling', note: 'Use Button type="submit" for form submission' },
-  ],
-
-  contract: {
-    propsSummary: [
-      'errors: Record<string, string | string[]> - server errors by field name',
-      'onFormSubmit: (event) => void - submission handler',
-      'onClearErrors: (name) => void - clear errors callback',
-    ],
-    scenarioTags: ['form.submit', 'form.validation', 'form.server'],
-    a11yRules: ['A11Y_FORM_LABEL'],
-  },
-
-  variants: [
-    {
-      name: 'Sign up',
-      description: 'Registration form with two-column name fields',
-      render: () => (
-        <Form onFormSubmit={(e) => { e.preventDefault(); }}>
-          <Grid columns={2} gap="md">
-            <Field name="firstName">
-              <Field.Label>First Name</Field.Label>
-              <Field.Control>
-                <Input placeholder="Jane" />
-              </Field.Control>
-            </Field>
-            <Field name="lastName">
-              <Field.Label>Last Name</Field.Label>
-              <Field.Control>
-                <Input placeholder="Doe" />
-              </Field.Control>
-            </Field>
-            <Grid.Item colSpan="full">
-              <Field name="email">
-                <Field.Label>Email</Field.Label>
-                <Field.Control>
-                  <Input type="email" placeholder="jane@example.com" />
-                </Field.Control>
-                <Field.Error match="typeMismatch">Enter a valid email address</Field.Error>
-              </Field>
-            </Grid.Item>
-            <Grid.Item colSpan="full">
-              <Field name="password">
-                <Field.Label>Password</Field.Label>
-                <Field.Control>
-                  <Input type="password" placeholder="At least 8 characters" />
-                </Field.Control>
-                <Field.Description>Must be at least 8 characters</Field.Description>
-              </Field>
-            </Grid.Item>
-            <Grid.Item colSpan="full">
-              <Field name="terms">
-                <Field.Control>
-                  <Checkbox label="I agree to the terms and conditions" />
-                </Field.Control>
-              </Field>
-            </Grid.Item>
-            <Grid.Item colSpan="full">
-              <Button type="submit" variant="primary">Create Account</Button>
-            </Grid.Item>
-          </Grid>
-        </Form>
-      ),
-    },
-    {
-      name: 'Profile settings',
-      description: 'Multi-section form with Fieldsets, switches, and radio group',
-      render: () => (
-        <Form onFormSubmit={(e) => { e.preventDefault(); }}>
-          <Fieldset>
-            <Fieldset.Legend>Profile</Fieldset.Legend>
-            <Grid columns={2} gap="md">
-              <Field name="displayName">
-                <Field.Label>Display Name</Field.Label>
-                <Field.Control>
-                  <Input placeholder="How others see you" />
-                </Field.Control>
-              </Field>
-              <Field name="timezone">
-                <Field.Label>Timezone</Field.Label>
-                <Field.Control>
-                  <Select placeholder="Select timezone">
-                    <Select.Trigger />
-                    <Select.Content>
-                      <Select.Item value="utc">UTC</Select.Item>
-                      <Select.Item value="est">Eastern (EST)</Select.Item>
-                      <Select.Item value="pst">Pacific (PST)</Select.Item>
-                      <Select.Item value="gmt">GMT</Select.Item>
-                    </Select.Content>
-                  </Select>
-                </Field.Control>
-              </Field>
-              <Grid.Item colSpan="full">
-                <Field name="bio">
-                  <Field.Label>Bio</Field.Label>
-                  <Field.Control>
-                    <Textarea placeholder="Tell us about yourself" rows={3} maxLength={280} />
-                  </Field.Control>
-                  <Field.Description>Max 280 characters</Field.Description>
-                </Field>
-              </Grid.Item>
-            </Grid>
-          </Fieldset>
-          <Fieldset>
-            <Fieldset.Legend>Notifications</Fieldset.Legend>
-            <Field name="emailNotifs">
-              <Field.Control>
-                <Switch label="Email notifications" />
-              </Field.Control>
-            </Field>
-            <Field name="marketingEmails">
-              <Field.Control>
-                <Switch label="Marketing emails" />
-              </Field.Control>
-            </Field>
-            <Field name="frequency">
-              <Field.Label>Digest frequency</Field.Label>
-              <Field.Control>
-                <RadioGroup name="frequency" orientation="vertical">
-                  <RadioGroup.Item value="daily" label="Daily" />
-                  <RadioGroup.Item value="weekly" label="Weekly" />
-                  <RadioGroup.Item value="monthly" label="Monthly" />
-                </RadioGroup>
-              </Field.Control>
-            </Field>
-          </Fieldset>
-          <Button type="submit" variant="primary">Save Changes</Button>
-        </Form>
-      ),
-    },
-    {
-      name: 'Contact form',
-      description: 'Contact form with select, textarea, and checkbox',
-      render: () => (
-        <Form onFormSubmit={(e) => { e.preventDefault(); }}>
-          <Grid columns={2} gap="md">
-            <Field name="name">
-              <Field.Label>Name</Field.Label>
-              <Field.Control>
-                <Input placeholder="Your name" />
-              </Field.Control>
-            </Field>
-            <Field name="email">
-              <Field.Label>Email</Field.Label>
-              <Field.Control>
-                <Input type="email" placeholder="you@example.com" />
-              </Field.Control>
-            </Field>
-            <Grid.Item colSpan="full">
-              <Field name="subject">
-                <Field.Label>Subject</Field.Label>
-                <Field.Control>
-                  <Select placeholder="What is this about?">
-                    <Select.Trigger />
-                    <Select.Content>
-                      <Select.Item value="general">General Inquiry</Select.Item>
-                      <Select.Item value="support">Technical Support</Select.Item>
-                      <Select.Item value="billing">Billing</Select.Item>
-                      <Select.Item value="feedback">Feedback</Select.Item>
-                    </Select.Content>
-                  </Select>
-                </Field.Control>
-              </Field>
-            </Grid.Item>
-            <Grid.Item colSpan="full">
-              <Field name="message">
-                <Field.Label>Message</Field.Label>
-                <Field.Control>
-                  <Textarea placeholder="How can we help?" rows={5} />
-                </Field.Control>
-              </Field>
-            </Grid.Item>
-            <Grid.Item colSpan="full">
-              <Field name="copy">
-                <Field.Control>
-                  <Checkbox label="Send me a copy" />
-                </Field.Control>
-              </Field>
-            </Grid.Item>
-            <Grid.Item colSpan="full">
-              <Button type="submit" variant="primary">Send Message</Button>
-            </Grid.Item>
-          </Grid>
-        </Form>
-      ),
-    },
-    {
-      name: 'With server errors',
-      description: 'Form displaying server-side validation errors',
-      render: () => (
-        <Form errors={{ username: 'Username is already taken', email: 'Email is already registered' }}>
-          <Grid columns={2} gap="md">
-            <Field name="username">
-              <Field.Label>Username</Field.Label>
-              <Field.Control>
-                <Input defaultValue="janedoe" />
-              </Field.Control>
-              <Field.Error match="customError" />
-            </Field>
-            <Field name="email">
-              <Field.Label>Email</Field.Label>
-              <Field.Control>
-                <Input type="email" defaultValue="jane@example.com" />
-              </Field.Control>
-              <Field.Error match="customError" />
-            </Field>
-            <Grid.Item colSpan="full">
-              <Button type="submit" variant="primary">Submit</Button>
-            </Grid.Item>
-          </Grid>
-        </Form>
-      ),
-    },
-  ],
-});

package/src/components/Form/Form.test.tsx

@@ -1,41 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
-import { Form } from './index';
-
-describe('Form', () => {
-  it('renders a form element', () => {
-    const { container } = render(<Form>content</Form>);
-    expect(container.querySelector('form')).toBeInTheDocument();
-  });
-
-  it('calls onFormSubmit when submitted', async () => {
-    const handleSubmit = vi.fn((e: React.FormEvent) => e.preventDefault());
-    const user = userEvent.setup();
-    render(
-      <Form onFormSubmit={handleSubmit} aria-label="Test form">
-        <button type="submit">Submit</button>
-      </Form>
-    );
-    await user.click(screen.getByRole('button', { name: 'Submit' }));
-    expect(handleSubmit).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders children', () => {
-    render(
-      <Form aria-label="Test form">
-        <span>Child content</span>
-      </Form>
-    );
-    expect(screen.getByText('Child content')).toBeInTheDocument();
-  });
-
-  it('has no accessibility violations', async () => {
-    const { container } = render(
-      <Form aria-label="Accessible form">
-        <label htmlFor="f">Name</label>
-        <input id="f" />
-      </Form>
-    );
-    await expectNoA11yViolations(container);
-  });
-});