@weasel-js/labkit 1.3.0-pre.0 → 1.4.0-pre.0

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

@@ -1,190 +0,0 @@
-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',
-  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

@@ -1,193 +0,0 @@
-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');
-  });
-});