@weasel-js/labkit 0.1.0

package/src/ui/properties/PropertyPanel.stories.tsx

@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import {
+  CheckboxRow,
+  ColorRow,
+  NumberRow,
+  PropertyList,
+  type PropertyListPack,
+  PropertyPanel,
+  PropertyRow,
+  SelectRow,
+  SliderRow,
+  TextRow,
+  ToggleRow,
+} from './PropertyPanel';
+
+// Args common to most stories — exposed as Storybook controls so the
+// title, pack mode, and container width can be tweaked live.
+interface DemoArgs {
+  title: string;
+  pack: PropertyListPack;
+  width: number;
+}
+
+const meta: Meta<DemoArgs> = {
+  title: 'labkit/UI/Properties/PropertyPanel',
+  component: PropertyPanel,
+  argTypes: {
+    title: { control: 'text' },
+    pack: {
+      control: 'inline-radio',
+      options: ['auto-color', 'pairs'] satisfies PropertyListPack[],
+      description:
+        "PropertyList packing. 'auto-color' (default) spans non-color rows full-width; 'pairs' packs every row two-per-row.",
+    },
+    width: { control: { type: 'number', min: 200, max: 600, step: 10 } },
+  },
+  args: {
+    title: 'Shape',
+    pack: 'auto-color',
+    width: 320,
+  },
+};
+export default meta;
+
+type Story = StoryObj<DemoArgs>;
+
+function Demo({ title, pack, width }: DemoArgs) {
+  const [opacity, setOpacity] = useState(0.65);
+  const [radius, setRadius] = useState(12);
+  const [fill, setFill] = useState('#b08adb');
+  const [stroke, setStroke] = useState('#1a1428');
+  const [label, setLabel] = useState('Untitled');
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <div style={{ width }}>
+      <PropertyPanel title={title}>
+        <PropertyList pack={pack}>
+          <SliderRow
+            label="Opacity"
+            value={opacity}
+            min={0}
+            max={1}
+            step={0.01}
+            onChange={setOpacity}
+            format={(v) => v.toFixed(2)}
+          />
+          <SliderRow
+            label="Radius"
+            value={radius}
+            min={0}
+            max={64}
+            step={1}
+            onChange={setRadius}
+            unit="px"
+          />
+          <ColorRow label="Fill" value={fill} onChange={setFill} />
+          <ColorRow label="Stroke" value={stroke} onChange={setStroke} />
+          <TextRow label="Label" value={label} onChange={setLabel} />
+          <CheckboxRow label="Visible" value={visible} onChange={setVisible} />
+        </PropertyList>
+      </PropertyPanel>
+    </div>
+  );
+}
+
+export const Default: Story = {
+  render: (args) => <Demo {...args} />,
+};
+
+export const NoTitle: Story = {
+  args: { title: '' },
+  render: ({ title, width }) => (
+    <div style={{ width }}>
+      <PropertyPanel title={title || undefined}>
+        <PropertyList>
+          <SliderRow label="Just a slider" value={50} min={0} max={100} onChange={() => {}} />
+        </PropertyList>
+      </PropertyPanel>
+    </div>
+  ),
+};
+
+function AllRowsDemo({ title, pack, width }: DemoArgs) {
+  const [opacity, setOpacity] = useState(0.65);
+  const [count, setCount] = useState(8);
+  const [fill, setFill] = useState('#b08adb');
+  const [stroke, setStroke] = useState('#1a1428');
+  const [name, setName] = useState('Untitled');
+  const [visible, setVisible] = useState(true);
+  const [mode, setMode] = useState<'fill' | 'stroke' | 'both'>('both');
+  const [align, setAlign] = useState<'left' | 'center' | 'right'>('center');
+
+  return (
+    <div style={{ width }}>
+      <PropertyPanel title={title}>
+        <PropertyList pack={pack}>
+          <SliderRow
+            label="Opacity"
+            value={opacity}
+            min={0}
+            max={1}
+            step={0.01}
+            onChange={setOpacity}
+            format={(v) => v.toFixed(2)}
+          />
+          <NumberRow label="Count" value={count} onChange={setCount} min={0} max={100} step={1} />
+          <ColorRow label="Fill" value={fill} onChange={setFill} />
+          <ColorRow label="Stroke" value={stroke} onChange={setStroke} />
+          <TextRow label="Name" value={name} onChange={setName} />
+          <SelectRow
+            label="Mode"
+            value={mode}
+            onChange={setMode}
+            options={[
+              { value: 'fill', label: 'Fill only' },
+              { value: 'stroke', label: 'Stroke only' },
+              { value: 'both', label: 'Fill + stroke' },
+            ]}
+          />
+          <ToggleRow
+            label="Align"
+            value={align}
+            onChange={setAlign}
+            options={[
+              { value: 'left', label: 'L' },
+              { value: 'center', label: 'C' },
+              { value: 'right', label: 'R' },
+            ]}
+          />
+          <CheckboxRow label="Visible" value={visible} onChange={setVisible} />
+        </PropertyList>
+      </PropertyPanel>
+    </div>
+  );
+}
+
+export const AllRows: Story = {
+  args: { title: 'Everything' },
+  render: (args) => <AllRowsDemo {...args} />,
+};
+
+export const CustomPropertyRow: Story = {
+  args: { title: 'Custom row' },
+  render: ({ title, pack, width }) => (
+    <div style={{ width }}>
+      <PropertyPanel title={title}>
+        <PropertyList pack={pack}>
+          <PropertyRow label="Anything" readout="custom">
+            <button type="button">click me</button>
+          </PropertyRow>
+        </PropertyList>
+      </PropertyPanel>
+    </div>
+  ),
+};
+
+export const ListWithoutChrome: Story = {
+  // No title — this story explicitly demonstrates rendering without the panel chrome.
+  argTypes: { title: { table: { disable: true } } },
+  render: ({ pack, width }) => (
+    <div style={{ width }}>
+      <PropertyList pack={pack}>
+        <SliderRow label="Bare" value={50} min={0} max={100} onChange={() => {}} />
+        <ColorRow label="Color A" value="#b08adb" onChange={() => {}} />
+        <ColorRow label="Color B" value="#1a1428" onChange={() => {}} />
+      </PropertyList>
+    </div>
+  ),
+};

package/src/ui/properties/PropertyPanel.test.tsx

@@ -0,0 +1,193 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  CheckboxRow,
+  ColorRow,
+  NumberRow,
+  PropertyList,
+  PropertyPanel,
+  PropertyRow,
+  SelectRow,
+  SliderRow,
+  TextRow,
+  ToggleRow,
+} from './PropertyPanel';
+
+describe('PropertyPanel', () => {
+  it('renders title and children', () => {
+    render(
+      <PropertyPanel title="Shape">
+        <PropertyRow label="A">
+          <input type="text" defaultValue="x" />
+        </PropertyRow>
+      </PropertyPanel>,
+    );
+    expect(screen.getByRole('heading', { name: 'Shape' })).toBeInTheDocument();
+    expect(screen.getByText('A')).toBeInTheDocument();
+  });
+
+  it('omits the heading when no title is given', () => {
+    const { container } = render(
+      <PropertyPanel>
+        <PropertyRow label="A">
+          <input type="text" defaultValue="x" />
+        </PropertyRow>
+      </PropertyPanel>,
+    );
+    expect(container.querySelector('.lk-property-panel__title')).toBeNull();
+  });
+
+  it('renders children directly (no implicit grid)', () => {
+    const { container } = render(
+      <PropertyPanel>
+        <span>raw child</span>
+      </PropertyPanel>,
+    );
+    expect(container.querySelector('.lk-property-list')).toBeNull();
+    expect(screen.getByText('raw child')).toBeInTheDocument();
+  });
+});
+
+describe('PropertyList', () => {
+  it('renders a grid container', () => {
+    const { container } = render(
+      <PropertyList>
+        <PropertyRow label="A">
+          <input type="text" defaultValue="x" />
+        </PropertyRow>
+      </PropertyList>,
+    );
+    expect(container.querySelector('.lk-property-list')).not.toBeNull();
+  });
+});
+
+describe('PropertyRow', () => {
+  it('renders label and optional readout', () => {
+    render(
+      <PropertyRow label="Opacity" readout="0.65">
+        <input type="range" defaultValue={50} />
+      </PropertyRow>,
+    );
+    expect(screen.getByText('Opacity')).toBeInTheDocument();
+    expect(screen.getByText('0.65')).toBeInTheDocument();
+  });
+
+  it('applies variant class', () => {
+    const { container } = render(
+      <PropertyRow label="L" variant="color">
+        <input type="color" defaultValue="#fff" />
+      </PropertyRow>,
+    );
+    expect(container.querySelector('.lk-property-row--color')).not.toBeNull();
+  });
+});
+
+describe('SliderRow', () => {
+  it('emits numeric value on change', () => {
+    const onChange = vi.fn();
+    render(<SliderRow label="Op" value={10} min={0} max={100} onChange={onChange} />);
+    fireEvent.change(screen.getByRole('slider'), { target: { value: '42' } });
+    expect(onChange).toHaveBeenCalledWith(42);
+  });
+
+  it('formats the readout when format is supplied', () => {
+    render(
+      <SliderRow
+        label="Op"
+        value={0.5}
+        min={0}
+        max={1}
+        step={0.01}
+        onChange={() => {}}
+        format={(v) => v.toFixed(2)}
+      />,
+    );
+    expect(screen.getByDisplayValue('0.50')).toBeInTheDocument();
+  });
+});
+
+describe('ColorRow', () => {
+  it('emits the new hex on change', () => {
+    const onChange = vi.fn();
+    const { container } = render(<ColorRow label="Fill" value="#ffffff" onChange={onChange} />);
+    const input = container.querySelector('input[type="color"]') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: '#aa3300' } });
+    expect(onChange).toHaveBeenCalledWith('#aa3300');
+  });
+});
+
+describe('CheckboxRow', () => {
+  it('toggles the boolean', () => {
+    const onChange = vi.fn();
+    render(<CheckboxRow label="Visible" value={false} onChange={onChange} />);
+    fireEvent.click(screen.getByRole('checkbox'));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+});
+
+describe('TextRow', () => {
+  it('emits the new text on change', () => {
+    const onChange = vi.fn();
+    render(<TextRow label="Name" value="foo" onChange={onChange} />);
+    fireEvent.change(screen.getByDisplayValue('foo'), { target: { value: 'bar' } });
+    expect(onChange).toHaveBeenCalledWith('bar');
+  });
+});
+
+describe('NumberRow', () => {
+  it('emits a number on change', () => {
+    const onChange = vi.fn();
+    render(<NumberRow label="N" value={1} onChange={onChange} />);
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '42' } });
+    expect(onChange).toHaveBeenCalledWith(42);
+  });
+
+  it('ignores non-finite values', () => {
+    const onChange = vi.fn();
+    render(<NumberRow label="N" value={1} onChange={onChange} />);
+    fireEvent.change(screen.getByRole('spinbutton'), { target: { value: 'abc' } });
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe('SelectRow', () => {
+  it('emits the selected option', () => {
+    const onChange = vi.fn();
+    render(
+      <SelectRow
+        label="Mode"
+        value="a"
+        options={[
+          { value: 'a', label: 'A' },
+          { value: 'b', label: 'B' },
+        ]}
+        onChange={onChange}
+      />,
+    );
+    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'b' } });
+    expect(onChange).toHaveBeenCalledWith('b');
+  });
+});
+
+describe('ToggleRow', () => {
+  it('marks the active option aria-pressed and emits on click', () => {
+    const onChange = vi.fn();
+    render(
+      <ToggleRow
+        label="Align"
+        value="left"
+        options={[
+          { value: 'left', label: 'L' },
+          { value: 'right', label: 'R' },
+        ]}
+        onChange={onChange}
+      />,
+    );
+    const left = screen.getByText('L');
+    const right = screen.getByText('R');
+    expect(left).toHaveAttribute('aria-pressed', 'true');
+    expect(right).toHaveAttribute('aria-pressed', 'false');
+    fireEvent.click(right);
+    expect(onChange).toHaveBeenCalledWith('right');
+  });
+});