@weave-design-system/react 0.1.0

package/src/primitives/button/Button.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ArrowRight, Plus, Trash2 } from 'lucide-react';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Primitives/Button',
+  component: Button,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'ghost', 'destructive', 'outline'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    loading: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    children: 'Create Task',
+    variant: 'primary',
+  },
+};
+
+export const AllVariants: Story = {
+  name: 'All Variants',
+  render: () => (
+    <div className="flex flex-wrap gap-4 items-center">
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button variant="outline">Outline</Button>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex gap-4 items-center">
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+    </div>
+  ),
+};
+
+export const WithIcons: Story = {
+  name: 'With Icons',
+  render: () => (
+    <div className="flex gap-4 items-center">
+      <Button leftIcon={<Plus size={16} />}>Add Item</Button>
+      <Button rightIcon={<ArrowRight size={16} />}>Continue</Button>
+      <Button variant="destructive" leftIcon={<Trash2 size={16} />}>
+        Delete
+      </Button>
+    </div>
+  ),
+};
+
+export const Loading: Story = {
+  args: {
+    children: 'Saving...',
+    loading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled',
+    disabled: true,
+  },
+};

package/src/primitives/button/Button.test.tsx

@@ -0,0 +1,64 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('renders with children', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+  });
+
+  it('calls onClick handler', async () => {
+    const onClick = vi.fn();
+    render(<Button onClick={onClick}>Click</Button>);
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('does not fire onClick when disabled', async () => {
+    const onClick = vi.fn();
+    render(
+      <Button disabled onClick={onClick}>
+        Click
+      </Button>,
+    );
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('does not fire onClick when loading', async () => {
+    const onClick = vi.fn();
+    render(
+      <Button loading onClick={onClick}>
+        Click
+      </Button>,
+    );
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('shows loading spinner when loading', () => {
+    render(<Button loading>Save</Button>);
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+    expect(button.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('applies variant classes', () => {
+    const { rerender } = render(<Button variant="primary">Test</Button>);
+    expect(screen.getByRole('button')).toHaveClass('bg-rust');
+
+    rerender(<Button variant="secondary">Test</Button>);
+    expect(screen.getByRole('button')).toHaveClass('bg-forest');
+
+    rerender(<Button variant="destructive">Test</Button>);
+    expect(screen.getByRole('button')).toHaveClass('bg-error');
+  });
+
+  it('forwards ref', () => {
+    const ref = vi.fn();
+    render(<Button ref={ref}>Test</Button>);
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLButtonElement));
+  });
+});

package/src/primitives/button/Button.tsx

@@ -0,0 +1,85 @@
+import { forwardRef } from 'react';
+import { Loader2 } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import type { ButtonProps } from './Button.types';
+
+const variantStyles: Record<string, string> = {
+  primary:
+    'bg-rust text-white hover:bg-rust-dark active:bg-rust-dark/90 disabled:bg-border disabled:text-text-secondary',
+  secondary:
+    'bg-forest text-white hover:bg-forest/90 active:bg-forest/80 disabled:bg-border disabled:text-text-secondary',
+  ghost:
+    'bg-transparent text-text-primary hover:bg-surface active:bg-border disabled:text-text-secondary',
+  destructive:
+    'bg-error text-white hover:bg-error/90 active:bg-error/80 disabled:bg-border disabled:text-text-secondary',
+  outline:
+    'bg-transparent text-text-primary border border-border hover:bg-surface active:bg-border disabled:text-text-secondary',
+};
+
+const sizeStyles: Record<string, string> = {
+  sm: 'px-3 py-1.5 rounded-md gap-1.5',
+  md: 'px-4 py-2 rounded-md gap-2',
+  lg: 'px-6 py-3 rounded-md gap-2.5',
+};
+
+const sizeFontStyles: Record<string, React.CSSProperties> = {
+  sm: { fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' },
+  md: { fontSize: 'var(--text-body)', lineHeight: 'var(--leading-body)' },
+  lg: { fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-body-lg)' },
+};
+
+const iconSize: Record<string, number> = {
+  sm: 14,
+  md: 16,
+  lg: 18,
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'primary',
+      size = 'md',
+      loading = false,
+      disabled,
+      leftIcon,
+      rightIcon,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        disabled={disabled || loading}
+        className={cn(
+          'inline-flex items-center justify-center font-sans font-semibold',
+          'transition-all ease-out',
+          'active:scale-[0.97]',
+          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rust',
+          'disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100',
+          variantStyles[variant],
+          sizeStyles[size],
+          loading && 'opacity-80',
+          className,
+        )}
+        style={{
+          transitionDuration: 'var(--duration-fast)',
+          ...sizeFontStyles[size],
+        }}
+        {...props}
+      >
+        {loading ? (
+          <Loader2 className="animate-spin" size={iconSize[size]} />
+        ) : (
+          leftIcon
+        )}
+        {children}
+        {!loading && rightIcon}
+      </button>
+    );
+  },
+);
+
+Button.displayName = 'Button';

package/src/primitives/button/Button.types.ts

@@ -0,0 +1,17 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
+  /** Visual style variant */
+  variant?: ButtonVariant;
+  /** Size of the button */
+  size?: ButtonSize;
+  /** Show loading spinner and disable interaction */
+  loading?: boolean;
+  /** Icon element to show before children */
+  leftIcon?: React.ReactNode;
+  /** Icon element to show after children */
+  rightIcon?: React.ReactNode;
+}

package/src/primitives/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Checkbox } from './Checkbox';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Primitives/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
+
+export const Unchecked: Story = {
+  args: { label: 'Accept terms and conditions' },
+};
+
+export const Checked: Story = {
+  args: { label: 'Accept terms and conditions', defaultChecked: true },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Disabled option', disabled: true },
+};
+
+export const DisabledChecked: Story = {
+  args: { label: 'Locked option', disabled: true, checked: true },
+};

package/src/primitives/checkbox/Checkbox.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Checkbox } from './Checkbox';
+
+describe('Checkbox', () => {
+  it('renders with label', () => {
+    render(<Checkbox label="Accept terms" />);
+    expect(screen.getByLabelText('Accept terms')).toBeInTheDocument();
+  });
+
+  it('toggles on click', async () => {
+    const onCheckedChange = vi.fn();
+    render(<Checkbox label="Accept" onCheckedChange={onCheckedChange} />);
+    await userEvent.click(screen.getByLabelText('Accept'));
+    expect(onCheckedChange).toHaveBeenCalledWith(true);
+  });
+
+  it('does not toggle when disabled', async () => {
+    const onCheckedChange = vi.fn();
+    render(<Checkbox label="Accept" disabled onCheckedChange={onCheckedChange} />);
+    await userEvent.click(screen.getByLabelText('Accept'));
+    expect(onCheckedChange).not.toHaveBeenCalled();
+  });
+
+  it('supports controlled state', () => {
+    render(<Checkbox label="Accept" checked={true} />);
+    expect(screen.getByLabelText('Accept')).toBeChecked();
+  });
+});

package/src/primitives/checkbox/Checkbox.tsx

@@ -0,0 +1,79 @@
+import { forwardRef, useId } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import { useControllableState } from '../../hooks/use-controllable-state';
+import type { CheckboxProps } from './Checkbox.types';
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ label, checked: controlledChecked, defaultChecked = false, onCheckedChange, className, disabled, id: idProp, onChange, ...props }, ref) => {
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    const [checked, setChecked] = useControllableState({
+      value: controlledChecked,
+      defaultValue: defaultChecked,
+      onChange: onCheckedChange,
+    });
+
+    return (
+      <label
+        htmlFor={id}
+        className={cn(
+          'inline-flex items-center gap-2 cursor-pointer select-none',
+          disabled && 'opacity-40 cursor-not-allowed',
+          className,
+        )}
+      >
+        <div className="relative flex items-center justify-center">
+          <input
+            ref={ref}
+            id={id}
+            type="checkbox"
+            checked={checked}
+            disabled={disabled}
+            className="peer sr-only"
+            onChange={(e) => {
+              setChecked(e.target.checked);
+              onChange?.(e);
+            }}
+            {...props}
+          />
+          <div
+            className={cn(
+              'h-5 w-5 rounded-sm border-2 flex items-center justify-center',
+              'peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-rust',
+              checked
+                ? 'bg-rust border-rust'
+                : 'bg-white border-border',
+            )}
+            style={{
+              transitionProperty: 'background-color, border-color, transform',
+              transitionDuration: 'var(--duration-fast)',
+              transitionTimingFunction: 'var(--ease-spring)',
+              transform: 'scale(1)',
+            }}
+          >
+            <Check
+              size={14}
+              className="text-white"
+              strokeWidth={3}
+              style={{
+                transform: checked ? 'scale(1)' : 'scale(0)',
+                transitionProperty: 'transform',
+                transitionDuration: 'var(--duration-fast)',
+                transitionTimingFunction: 'var(--ease-spring)',
+              }}
+            />
+          </div>
+        </div>
+        <span
+          className="text-text-primary"
+          style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-body)' }}
+        >
+          {label}
+        </span>
+      </label>
+    );
+  },
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/primitives/checkbox/Checkbox.types.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
+  /** Label text displayed next to the checkbox */
+  label: string;
+  /** Controlled checked state */
+  checked?: boolean;
+  /** Default checked state for uncontrolled usage */
+  defaultChecked?: boolean;
+  /** Change handler */
+  onCheckedChange?: (checked: boolean) => void;
+}

package/src/primitives/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox.types';

package/src/primitives/combobox/Combobox.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Combobox } from './Combobox';
+
+const fruits = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'date', label: 'Date' },
+  { value: 'elderberry', label: 'Elderberry' },
+  { value: 'fig', label: 'Fig' },
+  { value: 'grape', label: 'Grape' },
+];
+
+const meta: Meta<typeof Combobox> = {
+  title: 'Primitives/Combobox',
+  component: Combobox,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ minHeight: 300 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Combobox>;
+
+export const Default: Story = {
+  args: { label: 'Fruit', options: fruits, placeholder: 'Choose a fruit...' },
+};
+
+export const WithSelection: Story = {
+  args: { label: 'Fruit', options: fruits, defaultValue: 'cherry' },
+};
+
+export const WithError: Story = {
+  args: { label: 'Fruit', options: fruits, error: 'Please select a fruit' },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Fruit', options: fruits, defaultValue: 'apple', disabled: true },
+};

package/src/primitives/combobox/Combobox.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Combobox } from './Combobox';
+
+const options = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+];
+
+describe('Combobox', () => {
+  it('renders label and combobox input', () => {
+    render(<Combobox label="Fruit" options={options} />);
+    expect(screen.getByLabelText('Fruit')).toHaveAttribute('role', 'combobox');
+  });
+
+  it('opens dropdown on click', async () => {
+    render(<Combobox label="Fruit" options={options} />);
+    await userEvent.click(screen.getByLabelText('Fruit'));
+    expect(screen.getByRole('option', { name: 'Apple' })).toBeInTheDocument();
+  });
+
+  it('selects an option', async () => {
+    const onChange = vi.fn();
+    render(<Combobox label="Fruit" options={options} onChange={onChange} />);
+    await userEvent.click(screen.getByLabelText('Fruit'));
+    await userEvent.click(screen.getByRole('option', { name: 'Banana' }));
+    expect(onChange).toHaveBeenCalledWith('banana');
+  });
+
+  it('filters options by query', async () => {
+    render(<Combobox label="Fruit" options={options} />);
+    await userEvent.click(screen.getByLabelText('Fruit'));
+    await userEvent.type(screen.getByLabelText('Fruit'), 'ch');
+    expect(screen.getByRole('option', { name: 'Cherry' })).toBeInTheDocument();
+    expect(screen.queryByRole('option', { name: 'Apple' })).not.toBeInTheDocument();
+  });
+
+  it('shows error', () => {
+    render(<Combobox label="Fruit" options={options} error="Required" />);
+    expect(screen.getByText('Required')).toBeInTheDocument();
+  });
+});