@regardio/react 0.5.5 → 0.6.0

package/src/fieldset/fieldset.stories.tsx

@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button';
+import { Fieldset } from './fieldset';
+
+const meta = {
+  argTypes: {
+    variant: {
+      control: 'select',
+      description: 'Fieldset variant',
+      options: ['default', 'compact'],
+    },
+  },
+  component: Fieldset.Root,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Fieldset',
+} satisfies Meta<typeof Fieldset.Root>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Fieldset.Root>
+      <Fieldset.Legend>Personal Information</Fieldset.Legend>
+      <div className="space-y-4">
+        <label className="block text-sm font-medium text-gray-700">
+          First Name
+          <input
+            className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+            placeholder="Enter first name"
+            type="text"
+          />
+        </label>
+        <label className="block text-sm font-medium text-gray-700">
+          Last Name
+          <input
+            className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+            placeholder="Enter last name"
+            type="text"
+          />
+        </label>
+      </div>
+    </Fieldset.Root>
+  ),
+};
+
+export const Compact: Story = {
+  render: () => (
+    <Fieldset.Root variant="compact">
+      <Fieldset.Legend>Contact Details</Fieldset.Legend>
+      <div className="space-y-2">
+        <label className="block text-sm font-medium text-gray-700">
+          Email
+          <input
+            className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+            placeholder="Enter email"
+            type="email"
+          />
+        </label>
+        <label className="block text-sm font-medium text-gray-700">
+          Phone
+          <input
+            className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+            placeholder="Enter phone number"
+            type="tel"
+          />
+        </label>
+      </div>
+    </Fieldset.Root>
+  ),
+};
+
+export const SmallLegend: Story = {
+  render: () => (
+    <Fieldset.Root>
+      <Fieldset.Legend size="small">Settings</Fieldset.Legend>
+      <div className="space-y-4">
+        <label className="flex items-center">
+          <input
+            className="mr-2"
+            type="checkbox"
+          />
+          <span className="text-sm">Enable notifications</span>
+        </label>
+        <label className="flex items-center">
+          <input
+            className="mr-2"
+            type="checkbox"
+          />
+          <span className="text-sm">Allow marketing emails</span>
+        </label>
+      </div>
+    </Fieldset.Root>
+  ),
+};
+
+export const WithCustomClass: Story = {
+  render: () => (
+    <Fieldset.Root className="bg-blue-50 border-blue-200">
+      <Fieldset.Legend className="text-blue-900">Blue Theme</Fieldset.Legend>
+      <div className="space-y-4">
+        <input
+          className="w-full px-3 py-2 border border-blue-300 rounded-md bg-white"
+          placeholder="Custom styled input"
+          type="text"
+        />
+        <input
+          className="w-full px-3 py-2 border border-blue-300 rounded-md bg-white"
+          placeholder="Another input"
+          type="text"
+        />
+      </div>
+    </Fieldset.Root>
+  ),
+};
+
+export const NestedFieldsets: Story = {
+  render: () => (
+    <Fieldset.Root>
+      <Fieldset.Legend>Account Settings</Fieldset.Legend>
+      <div className="space-y-6">
+        <Fieldset.Root className="border-gray-300">
+          <Fieldset.Legend size="small">Profile Information</Fieldset.Legend>
+          <div className="space-y-3">
+            <input
+              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              placeholder="Username"
+              type="text"
+            />
+            <input
+              className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              placeholder="Email"
+              type="email"
+            />
+          </div>
+        </Fieldset.Root>
+        <Fieldset.Root className="border-gray-300">
+          <Fieldset.Legend size="small">Privacy Settings</Fieldset.Legend>
+          <div className="space-y-2">
+            <label className="flex items-center">
+              <input
+                className="mr-2"
+                type="checkbox"
+              />
+              <span className="text-sm">Public profile</span>
+            </label>
+            <label className="flex items-center">
+              <input
+                className="mr-2"
+                type="checkbox"
+              />
+              <span className="text-sm">Show email</span>
+            </label>
+          </div>
+        </Fieldset.Root>
+      </div>
+    </Fieldset.Root>
+  ),
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <form className="space-y-6">
+      <Fieldset.Root>
+        <Fieldset.Legend>User Registration</Fieldset.Legend>
+        <div className="space-y-4">
+          <label className="block text-sm font-medium text-gray-700">
+            Full Name
+            <input
+              className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+              placeholder="Enter your full name"
+              type="text"
+            />
+          </label>
+          <label className="block text-sm font-medium text-gray-700">
+            Email Address
+            <input
+              className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+              placeholder="Enter your email"
+              type="email"
+            />
+          </label>
+          <label className="block text-sm font-medium text-gray-700">
+            Password
+            <input
+              className="w-full px-3 py-2 border border-gray-300 rounded-md mt-1"
+              placeholder="Enter password"
+              type="password"
+            />
+          </label>
+        </div>
+      </Fieldset.Root>
+      <Button
+        className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+        type="submit"
+      >
+        Register
+      </Button>
+    </form>
+  ),
+};

package/src/fieldset/fieldset.test.tsx

@@ -0,0 +1,63 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Fieldset } from './fieldset';
+
+describe('Fieldset', () => {
+  it('renders FieldsetRoot with legend', () => {
+    render(
+      <Fieldset.Root>
+        <Fieldset.Legend>Test Legend</Fieldset.Legend>
+        <div>Fieldset content</div>
+      </Fieldset.Root>,
+    );
+    expect(screen.getByText('Test Legend')).toBeInTheDocument();
+  });
+
+  it('applies variant styles to FieldsetRoot', () => {
+    render(
+      <Fieldset.Root variant="compact">
+        <Fieldset.Legend>Compact Legend</Fieldset.Legend>
+      </Fieldset.Root>,
+    );
+    const fieldsetRoot = screen.getByText('Compact Legend').parentElement;
+    expect(fieldsetRoot).toHaveClass('space-y-2');
+  });
+
+  it('applies size styles to FieldsetLegend', () => {
+    render(
+      <Fieldset.Root>
+        <Fieldset.Legend size="small">Small Legend</Fieldset.Legend>
+      </Fieldset.Root>,
+    );
+    expect(screen.getByText('Small Legend')).toHaveClass('text-base', 'font-medium');
+  });
+
+  it('applies custom className to FieldsetRoot', () => {
+    render(
+      <Fieldset.Root className="custom-fieldset">
+        <Fieldset.Legend>Custom Legend</Fieldset.Legend>
+      </Fieldset.Root>,
+    );
+    const fieldsetRoot = screen.getByText('Custom Legend').parentElement;
+    expect(fieldsetRoot).toHaveClass('custom-fieldset');
+  });
+
+  it('applies custom className to FieldsetLegend', () => {
+    render(
+      <Fieldset.Root>
+        <Fieldset.Legend className="custom-legend">Legend</Fieldset.Legend>
+      </Fieldset.Root>,
+    );
+    expect(screen.getByText('Legend')).toHaveClass('custom-legend');
+  });
+
+  it('renders children content', () => {
+    render(
+      <Fieldset.Root>
+        <Fieldset.Legend>Legend</Fieldset.Legend>
+        <p data-testid="fieldset-content">Fieldset content</p>
+      </Fieldset.Root>,
+    );
+    expect(screen.getByTestId('fieldset-content')).toBeInTheDocument();
+  });
+});

package/src/fieldset/fieldset.tsx

@@ -0,0 +1,75 @@
+import { Fieldset as BaseUIFieldset } from '@base-ui/react/fieldset';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const fieldsetRootVariants = {
+  compact: ['space-y-2'],
+  default: ['space-y-4'],
+} as const;
+
+const fieldsetRoot = tv({
+  base: ['border', 'border-gray-200', 'rounded-lg', 'p-4'],
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: fieldsetRootVariants,
+  },
+});
+
+const fieldsetLegend = tv({
+  base: ['text-lg', 'font-semibold', 'text-gray-900', 'mb-2'],
+  defaultVariants: {
+    size: 'default',
+  },
+  variants: {
+    size: {
+      default: [],
+      small: ['text-base', 'font-medium', 'text-gray-900', 'mb-1'],
+    },
+  },
+});
+
+export type FieldsetRootVariant = keyof typeof fieldsetRootVariants;
+export type FieldsetLegendSize = 'default' | 'small';
+
+export interface FieldsetRootProps
+  extends Omit<ComponentProps<typeof BaseUIFieldset.Root>, 'className'> {
+  className?: string;
+  variant?: FieldsetRootVariant;
+}
+
+export interface FieldsetLegendProps
+  extends Omit<ComponentProps<typeof BaseUIFieldset.Legend>, 'className'> {
+  className?: string;
+  size?: FieldsetLegendSize;
+}
+
+export const FieldsetRoot = ({ className, variant, ...props }: FieldsetRootProps) => {
+  return (
+    <BaseUIFieldset.Root
+      className={fieldsetRoot({
+        className,
+        variant,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const FieldsetLegend = ({ className, size, ...props }: FieldsetLegendProps) => {
+  return (
+    <BaseUIFieldset.Legend
+      className={fieldsetLegend({
+        className,
+        size,
+      })}
+      {...props}
+    />
+  );
+};
+
+export const Fieldset = {
+  Legend: FieldsetLegend,
+  Root: FieldsetRoot,
+};

package/src/fieldset/index.ts

@@ -0,0 +1,7 @@
+export type {
+  FieldsetLegendProps,
+  FieldsetLegendSize,
+  FieldsetRootProps,
+  FieldsetRootVariant,
+} from './fieldset';
+export { Fieldset } from './fieldset';

package/src/form/form.stories.tsx

@@ -0,0 +1,230 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../button';
+import { Field } from '../field';
+import { Input } from '../input';
+import { Form } from './form';
+
+const meta = {
+  argTypes: {
+    variant: {
+      control: 'select',
+      description: 'Form variant',
+      options: ['default', 'compact', 'inline'],
+    },
+  },
+  component: Form,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Form',
+} satisfies Meta<typeof Form>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Form>
+      <Field.Root>
+        <Field.Label>Email</Field.Label>
+        <Input
+          placeholder="Enter your email"
+          type="email"
+        />
+        <Field.Description>We'll never share your email.</Field.Description>
+      </Field.Root>
+      <Field.Root>
+        <Field.Label>Password</Field.Label>
+        <Input
+          placeholder="Enter your password"
+          type="password"
+        />
+      </Field.Root>
+      <Button type="submit">Sign In</Button>
+    </Form>
+  ),
+};
+
+export const Compact: Story = {
+  render: () => (
+    <Form variant="compact">
+      <Field.Root>
+        <Field.Label>Username</Field.Label>
+        <Input placeholder="Enter username" />
+      </Field.Root>
+      <Field.Root>
+        <Field.Label>Email</Field.Label>
+        <Input
+          placeholder="Enter email"
+          type="email"
+        />
+      </Field.Root>
+      <Button type="submit">Register</Button>
+    </Form>
+  ),
+};
+
+export const Inline: Story = {
+  render: () => (
+    <Form variant="inline">
+      <Field.Root>
+        <Field.Label>Search</Field.Label>
+        <Input placeholder="Search..." />
+      </Field.Root>
+      <Button type="submit">Search</Button>
+    </Form>
+  ),
+};
+
+export const WithValidation: Story = {
+  render: () => (
+    <Form>
+      <Field.Root>
+        <Field.Label variant="error">Email</Field.Label>
+        <Input
+          placeholder="Enter your email"
+          type="email"
+          variant="error"
+        />
+        <Field.Error>Please enter a valid email address</Field.Error>
+      </Field.Root>
+      <Field.Root>
+        <Field.Label>Password</Field.Label>
+        <Input
+          placeholder="Enter your password"
+          type="password"
+        />
+        <Field.Description>Password must be at least 8 characters</Field.Description>
+      </Field.Root>
+      <Button type="submit">Sign In</Button>
+    </Form>
+  ),
+};
+
+export const RegistrationForm: Story = {
+  render: () => (
+    <Form>
+      <div className="space-y-6">
+        <Field.Root>
+          <Field.Label>Full Name</Field.Label>
+          <Input placeholder="Enter your full name" />
+        </Field.Root>
+        <Field.Root>
+          <Field.Label>Email Address</Field.Label>
+          <Input
+            placeholder="Enter your email"
+            type="email"
+          />
+        </Field.Root>
+        <Field.Root>
+          <Field.Label>Password</Field.Label>
+          <Input
+            placeholder="Create a password"
+            type="password"
+          />
+        </Field.Root>
+        <Field.Root>
+          <Field.Label>Confirm Password</Field.Label>
+          <Input
+            placeholder="Confirm your password"
+            type="password"
+          />
+        </Field.Root>
+        <Button
+          className="w-full"
+          type="submit"
+        >
+          Submit Form
+        </Button>
+      </div>
+    </Form>
+  ),
+};
+
+export const ContactForm: Story = {
+  render: () => (
+    <Form>
+      <div className="space-y-6">
+        <Field.Root>
+          <Field.Label>Name</Field.Label>
+          <Input placeholder="Your name" />
+        </Field.Root>
+        <Field.Root>
+          <Field.Label>Email</Field.Label>
+          <Input
+            placeholder="Your email"
+            type="email"
+          />
+        </Field.Root>
+        <Field.Root>
+          <Field.Label>Subject</Field.Label>
+          <Input placeholder="Message subject" />
+        </Field.Root>
+        <Field.Root>
+          <Field.Label>Message</Field.Label>
+          <textarea
+            className="w-full px-3 py-2 border border-gray-300 rounded-md"
+            placeholder="Your message"
+            rows={4}
+          />
+        </Field.Root>
+        <Button type="submit">Send Message</Button>
+      </div>
+    </Form>
+  ),
+};
+
+export const SearchForm: Story = {
+  render: () => (
+    <Form
+      className="max-w-md mx-auto"
+      variant="inline"
+    >
+      <Field.Root className="flex-1">
+        <Field.Label className="sr-only">Search</Field.Label>
+        <Input placeholder="Search products..." />
+      </Field.Root>
+      <Button type="submit">Search</Button>
+    </Form>
+  ),
+};
+
+export const WithCustomClass: Story = {
+  render: () => (
+    <Form className="bg-gray-50 p-6 rounded-lg shadow-md">
+      <Field.Root>
+        <Field.Label className="text-blue-600">Custom Field</Field.Label>
+        <Input
+          className="bg-white border-blue-300"
+          placeholder="Custom styled input"
+        />
+      </Field.Root>
+      <Button
+        className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
+        type="submit"
+      >
+        Register
+      </Button>
+    </Form>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const handleSubmit = (event: React.FormEvent) => {
+      event.preventDefault();
+      alert('Form submitted!');
+    };
+
+    return (
+      <Form onSubmit={handleSubmit}>
+        <Field.Root>
+          <Field.Label>Interactive Field</Field.Label>
+          <Input placeholder="Type something..." />
+        </Field.Root>
+        <Button type="submit">Submit Form</Button>
+      </Form>
+    );
+  },
+};

package/src/form/form.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Form } from './form';
+
+describe('Form', () => {
+  it('renders form with children', () => {
+    render(
+      <Form>
+        <div>Form content</div>
+      </Form>,
+    );
+    expect(screen.getByText('Form content')).toBeInTheDocument();
+  });
+
+  it('applies variant styles', () => {
+    render(
+      <Form variant="compact">
+        <div>Compact form</div>
+      </Form>,
+    );
+    const formElement = screen.getByText('Compact form').parentElement;
+    expect(formElement).toHaveClass('space-y-4');
+  });
+
+  it('applies inline variant styles', () => {
+    render(
+      <Form variant="inline">
+        <div>Inline form</div>
+      </Form>,
+    );
+    const formElement = screen.getByText('Inline form').parentElement;
+    expect(formElement).toHaveClass('flex', 'flex-wrap', 'gap-4');
+  });
+
+  it('applies custom className', () => {
+    render(
+      <Form className="custom-form">
+        <div>Custom form</div>
+      </Form>,
+    );
+    const formElement = screen.getByText('Custom form').parentElement;
+    expect(formElement).toHaveClass('custom-form');
+  });
+
+  it('passes through other props', () => {
+    render(
+      <Form
+        data-testid="test-form"
+        method="post"
+      >
+        <div>Test form</div>
+      </Form>,
+    );
+    const formElement = screen.getByTestId('test-form');
+    expect(formElement).toHaveAttribute('method', 'post');
+  });
+
+  it('handles onSubmit', () => {
+    const handleSubmit = vi.fn();
+    render(
+      <Form onSubmit={handleSubmit}>
+        <div>Submit form</div>
+      </Form>,
+    );
+    const formElement = screen.getByText('Submit form').parentElement;
+    expect(formElement).toBeInTheDocument();
+  });
+});

package/src/form/form.tsx

@@ -0,0 +1,38 @@
+import { Form as BaseUIForm } from '@base-ui/react/form';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const formVariants = {
+  compact: ['space-y-4'],
+  default: ['space-y-6'],
+  inline: ['flex', 'flex-wrap', 'gap-4', 'items-end'],
+} as const;
+
+const form = tv({
+  base: [],
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: formVariants,
+  },
+});
+
+export type FormVariant = keyof typeof formVariants;
+
+export interface FormProps extends Omit<ComponentProps<typeof BaseUIForm>, 'className'> {
+  className?: string;
+  variant?: FormVariant;
+}
+
+export const Form = ({ className, variant, ...props }: FormProps) => {
+  return (
+    <BaseUIForm
+      className={form({
+        className,
+        variant,
+      })}
+      {...props}
+    />
+  );
+};

package/src/form/index.ts

@@ -0,0 +1,2 @@
+export type { FormProps, FormVariant } from './form';
+export { Form } from './form';