@kitn.ai/ui 0.14.1

package/src/components/attachments.stories.tsx

@@ -0,0 +1,303 @@
+import type { Meta, StoryObj } from 'storybook-solidjs-vite';
+import { createSignal, For } from 'solid-js';
+import {
+  Attachments,
+  Attachment,
+  AttachmentPreview,
+  AttachmentInfo,
+  AttachmentRemove,
+  AttachmentHoverCard,
+  AttachmentHoverCardTrigger,
+  AttachmentHoverCardContent,
+  AttachmentEmpty,
+} from './attachments';
+import type { AttachmentData } from './attachments';
+import { componentDescription } from '../stories/docs/element-controls';
+
+const sampleAttachments: AttachmentData[] = [
+  {
+    id: '1',
+    type: 'file',
+    filename: 'mountain-landscape.jpg',
+    mediaType: 'image/jpeg',
+    url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
+  },
+  {
+    id: '2',
+    type: 'file',
+    filename: 'sunset-beach.png',
+    mediaType: 'image/png',
+    url: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=400&h=400&fit=crop',
+  },
+  {
+    id: '3',
+    type: 'file',
+    filename: 'architecture-report.pdf',
+    mediaType: 'application/pdf',
+  },
+  {
+    id: '4',
+    type: 'file',
+    filename: 'demo-recording.mp4',
+    mediaType: 'video/mp4',
+  },
+  {
+    id: '5',
+    type: 'file',
+    filename: 'podcast-episode.mp3',
+    mediaType: 'audio/mpeg',
+  },
+  {
+    id: '6',
+    type: 'source-document',
+    filename: 'SolidJS Documentation',
+    title: 'SolidJS Reactivity Guide',
+    url: 'https://solidjs.com/docs',
+  },
+];
+
+const meta = {
+  title: 'Solid (Advanced)/Elements/Attachments',
+  component: Attachments,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: componentDescription([
+        'A composable container for displaying file and source-document attachments as thumbnails, inline chips, or a vertical list. Built from `Attachments` + per-item `Attachment` with `AttachmentPreview`, `AttachmentInfo`, and `AttachmentRemove` parts.',
+        '**When to use:** to show files a user attached to a prompt, or documents/sources referenced by a message. Choose `grid` for thumbnails, `inline` for compact chips, `list` for a detailed rows view.',
+        '**How to use:** set `variant` on `Attachments`, then map your data to `Attachment` (passing each item via `data` and an `onRemove` handler) and compose the preview/info/remove parts inside.',
+        '**Placement:** prompt input area (pending uploads), message bodies (attached or cited files), and document panels.',
+      ]),
+      controls: { exclude: ['use:eventListener'] },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['grid', 'inline', 'list'],
+      description: 'Layout of the attachment items.',
+      table: { defaultValue: { summary: 'grid' } },
+    },
+    children: {
+      control: false,
+      description: 'The `Attachment` items to render inside the container.',
+    },
+    class: {
+      control: 'text',
+      description: 'Extra classes for the container element.',
+    },
+  },
+  args: {
+    variant: 'grid',
+  },
+  render: (args) => {
+    const [items, setItems] = createSignal([...sampleAttachments]);
+    const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
+    return (
+      <Attachments {...args}>
+        <For each={items()}>
+          {(item) => (
+            <Attachment data={item} onRemove={() => remove(item.id)}>
+              <AttachmentPreview />
+              <AttachmentInfo />
+              <AttachmentRemove />
+            </Attachment>
+          )}
+        </For>
+      </Attachments>
+    );
+  },
+} satisfies Meta<typeof Attachments>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const IMPORT = `import {
+  Attachments, Attachment, AttachmentPreview, AttachmentInfo, AttachmentRemove,
+} from '@kitn.ai/ui';`;
+const src = (code: string) => ({
+  parameters: { docs: { source: { code: `${IMPORT}\n\n${code}`, language: 'tsx' } } },
+});
+
+/** Interactive playground — switch `variant` to compare grid / inline / list. */
+export const Playground: Story = {
+  ...src(`<Attachments variant="grid">
+  <For each={items()}>
+    {(item) => (
+      <Attachment data={item} onRemove={() => remove(item.id)}>
+        <AttachmentPreview />
+        <AttachmentInfo />
+        <AttachmentRemove />
+      </Attachment>
+    )}
+  </For>
+</Attachments>`),
+};
+
+export const Grid: Story = {
+  render: () => {
+    const [items, setItems] = createSignal([...sampleAttachments]);
+    const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
+    return (
+      <div class="space-y-4">
+        <Attachments variant="grid">
+          <For each={items()}>
+            {(item) => (
+              <Attachment data={item} onRemove={() => remove(item.id)}>
+                <AttachmentPreview />
+                <AttachmentRemove />
+              </Attachment>
+            )}
+          </For>
+        </Attachments>
+        <button
+          class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          onClick={() => setItems([...sampleAttachments])}
+        >
+          Reset
+        </button>
+      </div>
+    );
+  },
+  ...src(`<Attachments variant="grid">
+  <For each={items()}>
+    {(item) => (
+      <Attachment data={item} onRemove={() => remove(item.id)}>
+        <AttachmentPreview />
+        <AttachmentRemove />
+      </Attachment>
+    )}
+  </For>
+</Attachments>`),
+};
+
+export const Inline: Story = {
+  render: () => {
+    const [items, setItems] = createSignal([...sampleAttachments]);
+    const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
+    return (
+      <div class="space-y-4">
+        <Attachments variant="inline">
+          <For each={items()}>
+            {(item) => (
+              <Attachment data={item} onRemove={() => remove(item.id)}>
+                <AttachmentPreview />
+                <AttachmentInfo />
+                <AttachmentRemove />
+              </Attachment>
+            )}
+          </For>
+        </Attachments>
+        <button
+          class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          onClick={() => setItems([...sampleAttachments])}
+        >
+          Reset
+        </button>
+      </div>
+    );
+  },
+  ...src(`<Attachments variant="inline">
+  <For each={items()}>
+    {(item) => (
+      <Attachment data={item} onRemove={() => remove(item.id)}>
+        <AttachmentPreview />
+        <AttachmentInfo />
+        <AttachmentRemove />
+      </Attachment>
+    )}
+  </For>
+</Attachments>`),
+};
+
+export const List: Story = {
+  render: () => {
+    const [items, setItems] = createSignal([...sampleAttachments]);
+    const remove = (id: string) => setItems((prev) => prev.filter((a) => a.id !== id));
+    return (
+      <div class="w-96 space-y-4">
+        <Attachments variant="list">
+          <For each={items()}>
+            {(item) => (
+              <Attachment data={item} onRemove={() => remove(item.id)}>
+                <AttachmentPreview />
+                <AttachmentInfo showMediaType />
+                <AttachmentRemove />
+              </Attachment>
+            )}
+          </For>
+        </Attachments>
+        <button
+          class="text-sm text-muted-foreground hover:text-foreground transition-colors"
+          onClick={() => setItems([...sampleAttachments])}
+        >
+          Reset
+        </button>
+      </div>
+    );
+  },
+  ...src(`<Attachments variant="list">
+  <For each={items()}>
+    {(item) => (
+      <Attachment data={item} onRemove={() => remove(item.id)}>
+        <AttachmentPreview />
+        <AttachmentInfo showMediaType />
+        <AttachmentRemove />
+      </Attachment>
+    )}
+  </For>
+</Attachments>`),
+};
+
+export const WithHoverCard: Story = {
+  render: () => (
+    <Attachments variant="grid">
+      <AttachmentHoverCard>
+        <AttachmentHoverCardTrigger>
+          <Attachment
+            data={{
+              id: '1',
+              type: 'file',
+              filename: 'mountain-landscape.jpg',
+              mediaType: 'image/jpeg',
+              url: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=400&fit=crop',
+            }}
+          >
+            <AttachmentPreview />
+          </Attachment>
+        </AttachmentHoverCardTrigger>
+        <AttachmentHoverCardContent>
+          <img
+            src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop"
+            alt="Mountain landscape"
+            class="max-w-xs rounded"
+          />
+        </AttachmentHoverCardContent>
+      </AttachmentHoverCard>
+    </Attachments>
+  ),
+  ...src(`<Attachments variant="grid">
+  <AttachmentHoverCard>
+    <AttachmentHoverCardTrigger>
+      <Attachment data={item}>
+        <AttachmentPreview />
+      </Attachment>
+    </AttachmentHoverCardTrigger>
+    <AttachmentHoverCardContent>
+      <img src={item.url} alt={item.filename} class="max-w-xs rounded" />
+    </AttachmentHoverCardContent>
+  </AttachmentHoverCard>
+</Attachments>`),
+};
+
+export const Empty: Story = {
+  render: () => (
+    <Attachments variant="grid">
+      <AttachmentEmpty />
+    </Attachments>
+  ),
+  ...src(`<Attachments variant="grid">
+  <AttachmentEmpty />
+</Attachments>`),
+};

package/src/components/attachments.test.tsx

@@ -0,0 +1,64 @@
+/**
+ * Unit tests for the Attachments SolidJS primitives.
+ *
+ * Covers two bugs found while dogfooding `kai-attachments` in the docs site:
+ *   1. The per-item layout was not reactive to a post-render variant change —
+ *      `Attachment` destructured `variant` from context, capturing it once.
+ *   2. `AttachmentHoverCardTrigger` could not carry layout, so the hover trigger
+ *      collapsed inline/list rows (it forwards a class now).
+ */
+import { describe, it, expect, afterEach } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { render, cleanup } from '@solidjs/testing-library';
+import { createSignal } from 'solid-js';
+import {
+  Attachments,
+  Attachment,
+  AttachmentHoverCard,
+  AttachmentHoverCardTrigger,
+  type AttachmentData,
+  type AttachmentVariant,
+} from './attachments';
+
+afterEach(cleanup);
+
+const fileData: AttachmentData = {
+  id: '1',
+  type: 'file',
+  filename: 'spec.pdf',
+  mediaType: 'application/pdf',
+};
+
+describe('Attachment item layout', () => {
+  it('re-lays out items when the container variant changes after first render', () => {
+    const [variant, setVariant] = createSignal<AttachmentVariant>('grid');
+    const { container } = render(() => (
+      <Attachments variant={variant()}>
+        <Attachment data={fileData} />
+      </Attachments>
+    ));
+
+    const item = () => container.querySelector('.group') as HTMLElement;
+    expect(item().className).toMatch(/size-24/); // grid tile
+
+    setVariant('inline');
+    expect(item().className).not.toMatch(/size-24/); // no longer a grid tile
+    expect(item().className).toMatch(/\bh-8\b/); // inline chip height
+  });
+});
+
+describe('AttachmentHoverCardTrigger', () => {
+  it('forwards a class to the underlying hover trigger so it can carry the row layout', () => {
+    const { container } = render(() => (
+      <AttachmentHoverCard>
+        <AttachmentHoverCardTrigger class="flex items-center gap-1.5">
+          <span>preview</span>
+        </AttachmentHoverCardTrigger>
+      </AttachmentHoverCard>
+    ));
+
+    const trigger = container.querySelector('span');
+    expect(trigger).toBeTruthy();
+    expect(trigger!.className).toContain('flex');
+  });
+});