@tribepad/themis 1.3.4 → 1.5.0

package/src/elements/Tree/Tree.stories.tsx

@@ -0,0 +1,407 @@
+import { useState, type ReactElement } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  Tree,
+  TreeItem,
+  TreeItemContent,
+  TreeItemChevron,
+} from './Tree';
+import type { Selection } from './Tree.types';
+
+const meta = {
+  title: 'Elements/Tree',
+  component: Tree,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'Accessible hierarchical list built on React Aria `Tree`. Supports keyboard navigation (Arrow keys, Home/End, type-ahead), expansion, single/multiple selection, lazy children via `hasChildItems`, and custom row content.',
+      },
+    },
+  },
+  argTypes: {
+    selectionMode: {
+      control: 'select',
+      options: ['none', 'single', 'multiple'],
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'bordered'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'default', 'lg'],
+    },
+  },
+} satisfies Meta<typeof Tree>;
+
+export default meta;
+type Story = StoryObj<typeof Tree>;
+
+function Sample(): ReactElement {
+  return (
+    <Tree aria-label="Departments" className="max-w-md">
+      <TreeItem id="eng" textValue="Engineering" hasChildItems>
+        <TreeItemContent>
+          <TreeItemChevron />
+          <span>Engineering</span>
+        </TreeItemContent>
+        <TreeItem id="eng.platform" textValue="Platform" hasChildItems>
+          <TreeItemContent>
+            <TreeItemChevron />
+            <span>Platform</span>
+          </TreeItemContent>
+          <TreeItem id="eng.platform.ml" textValue="ML">
+            <TreeItemContent>
+              <TreeItemChevron hasChildItems={false} />
+              <span>ML</span>
+            </TreeItemContent>
+          </TreeItem>
+          <TreeItem id="eng.platform.observability" textValue="Observability">
+            <TreeItemContent>
+              <TreeItemChevron hasChildItems={false} />
+              <span>Observability</span>
+            </TreeItemContent>
+          </TreeItem>
+        </TreeItem>
+        <TreeItem id="eng.tooling" textValue="Tooling">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Tooling</span>
+          </TreeItemContent>
+        </TreeItem>
+      </TreeItem>
+      <TreeItem id="design" textValue="Design">
+        <TreeItemContent>
+          <TreeItemChevron hasChildItems={false} />
+          <span>Design</span>
+        </TreeItemContent>
+      </TreeItem>
+    </Tree>
+  );
+}
+
+export const Default: Story = {
+  render: () => <Sample />,
+};
+
+export const Bordered: Story = {
+  render: () => (
+    <Tree aria-label="Departments" variant="bordered" className="max-w-md">
+      <TreeItem id="a" textValue="Item A">
+        <TreeItemContent>
+          <TreeItemChevron hasChildItems={false} />
+          <span>Item A</span>
+        </TreeItemContent>
+      </TreeItem>
+      <TreeItem id="b" textValue="Item B">
+        <TreeItemContent>
+          <TreeItemChevron hasChildItems={false} />
+          <span>Item B</span>
+        </TreeItemContent>
+      </TreeItem>
+    </Tree>
+  ),
+};
+
+/**
+ * Realistic ltree-shaped hierarchy used by the selection stories. Three
+ * roots, each with at least one expandable subtree. Mirrors what an EOS
+ * Job Categories taxonomy might look like.
+ */
+function LtreeSampleData(): ReactElement {
+  return (
+    <>
+      <TreeItem id="engineering" textValue="Engineering" hasChildItems>
+        <TreeItemContent>
+          <TreeItemChevron />
+          <span>Engineering</span>
+        </TreeItemContent>
+        <TreeItem id="engineering.platform" textValue="Platform" hasChildItems>
+          <TreeItemContent>
+            <TreeItemChevron />
+            <span>Platform</span>
+          </TreeItemContent>
+          <TreeItem id="engineering.platform.ml" textValue="ML">
+            <TreeItemContent>
+              <TreeItemChevron hasChildItems={false} />
+              <span>ML</span>
+            </TreeItemContent>
+          </TreeItem>
+          <TreeItem
+            id="engineering.platform.observability"
+            textValue="Observability"
+          >
+            <TreeItemContent>
+              <TreeItemChevron hasChildItems={false} />
+              <span>Observability</span>
+            </TreeItemContent>
+          </TreeItem>
+        </TreeItem>
+        <TreeItem id="engineering.tooling" textValue="Tooling" hasChildItems>
+          <TreeItemContent>
+            <TreeItemChevron />
+            <span>Tooling</span>
+          </TreeItemContent>
+          <TreeItem id="engineering.tooling.ci" textValue="CI/CD">
+            <TreeItemContent>
+              <TreeItemChevron hasChildItems={false} />
+              <span>CI/CD</span>
+            </TreeItemContent>
+          </TreeItem>
+        </TreeItem>
+      </TreeItem>
+
+      <TreeItem id="design" textValue="Design" hasChildItems>
+        <TreeItemContent>
+          <TreeItemChevron />
+          <span>Design</span>
+        </TreeItemContent>
+        <TreeItem id="design.brand" textValue="Brand">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Brand</span>
+          </TreeItemContent>
+        </TreeItem>
+        <TreeItem id="design.product" textValue="Product">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Product</span>
+          </TreeItemContent>
+        </TreeItem>
+        <TreeItem id="design.research" textValue="Research">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Research</span>
+          </TreeItemContent>
+        </TreeItem>
+      </TreeItem>
+
+      <TreeItem id="operations" textValue="Operations" hasChildItems>
+        <TreeItemContent>
+          <TreeItemChevron />
+          <span>Operations</span>
+        </TreeItemContent>
+        <TreeItem id="operations.people" textValue="People">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>People</span>
+          </TreeItemContent>
+        </TreeItem>
+        <TreeItem id="operations.finance" textValue="Finance">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Finance</span>
+          </TreeItemContent>
+        </TreeItem>
+      </TreeItem>
+    </>
+  );
+}
+
+export const SingleSelection: Story = {
+  render: () => {
+    function Inner(): ReactElement {
+      const [selected, setSelected] = useState<Selection>(
+        new Set(['engineering.platform.ml']),
+      );
+      return (
+        <div className="flex flex-col gap-3">
+          <Tree
+            aria-label="Job categories"
+            selectionMode="single"
+            selectedKeys={selected}
+            defaultExpandedKeys={new Set(['engineering', 'engineering.platform'])}
+            onSelectionChange={setSelected}
+            className="max-w-md"
+          >
+            <LtreeSampleData />
+          </Tree>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Selected:{' '}
+            <code>{Array.from(selected as Set<string>).join(', ') || '—'}</code>
+          </p>
+        </div>
+      );
+    }
+    return <Inner />;
+  },
+};
+
+export const MultipleSelection: Story = {
+  render: () => {
+    function Inner(): ReactElement {
+      const [selected, setSelected] = useState<Selection>(
+        new Set(['engineering.platform.ml', 'design.research']),
+      );
+      return (
+        <div className="flex flex-col gap-3">
+          <Tree
+            aria-label="Job categories"
+            selectionMode="multiple"
+            selectedKeys={selected}
+            defaultExpandedKeys={
+              new Set(['engineering', 'engineering.platform', 'design'])
+            }
+            onSelectionChange={setSelected}
+            className="max-w-md"
+          >
+            <LtreeSampleData />
+          </Tree>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Selected:{' '}
+            <code>
+              {Array.from(selected as Set<string>).join(', ') || '—'}
+            </code>
+          </p>
+        </div>
+      );
+    }
+    return <Inner />;
+  },
+};
+
+export const SingleSelectionDeepLtree: Story = {
+  render: () => {
+    function Inner(): ReactElement {
+      const [selected, setSelected] = useState<Selection>(new Set([]));
+      return (
+        <div className="flex flex-col gap-3">
+          <Tree
+            aria-label="Job categories — deep"
+            selectionMode="single"
+            selectedKeys={selected}
+            defaultExpandedKeys={
+              new Set([
+                'engineering',
+                'engineering.platform',
+                'engineering.tooling',
+                'design',
+                'operations',
+              ])
+            }
+            onSelectionChange={setSelected}
+            className="max-w-md"
+          >
+            <LtreeSampleData />
+          </Tree>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            Tip: use{' '}
+            <kbd className="rounded bg-[var(--secondary)] px-1.5 py-0.5">↓</kbd>{' '}
+            <kbd className="rounded bg-[var(--secondary)] px-1.5 py-0.5">↑</kbd>{' '}
+            to walk rows,{' '}
+            <kbd className="rounded bg-[var(--secondary)] px-1.5 py-0.5">→</kbd>{' '}
+            <kbd className="rounded bg-[var(--secondary)] px-1.5 py-0.5">←</kbd>{' '}
+            to expand/collapse, type-ahead to jump.
+          </p>
+        </div>
+      );
+    }
+    return <Inner />;
+  },
+};
+
+export const MultipleSelectionDeepLtree: Story = {
+  render: () => {
+    function Inner(): ReactElement {
+      const [selected, setSelected] = useState<Selection>(
+        new Set([
+          'engineering.platform.observability',
+          'engineering.tooling.ci',
+          'design.brand',
+          'operations.finance',
+        ]),
+      );
+      return (
+        <div className="flex flex-col gap-3">
+          <Tree
+            aria-label="Job categories — multi-pick"
+            selectionMode="multiple"
+            selectedKeys={selected}
+            defaultExpandedKeys={
+              new Set([
+                'engineering',
+                'engineering.platform',
+                'engineering.tooling',
+                'design',
+                'operations',
+              ])
+            }
+            onSelectionChange={setSelected}
+            className="max-w-md"
+          >
+            <LtreeSampleData />
+          </Tree>
+          <p className="text-sm text-[var(--muted-foreground)]">
+            {Array.from(selected as Set<string>).length} selected
+          </p>
+        </div>
+      );
+    }
+    return <Inner />;
+  },
+};
+
+export const DisabledRow: Story = {
+  render: () => (
+    <Tree aria-label="Departments" disabledKeys={['eng']} className="max-w-md">
+      <TreeItem id="eng" textValue="Engineering">
+        <TreeItemContent>
+          <TreeItemChevron hasChildItems={false} />
+          <span>Engineering (disabled)</span>
+        </TreeItemContent>
+      </TreeItem>
+      <TreeItem id="design" textValue="Design">
+        <TreeItemContent>
+          <TreeItemChevron hasChildItems={false} />
+          <span>Design</span>
+        </TreeItemContent>
+      </TreeItem>
+    </Tree>
+  ),
+};
+
+export const EmptyState: Story = {
+  render: () => (
+    <Tree
+      aria-label="Empty"
+      renderEmptyState={() => <span>No items yet</span>}
+      className="max-w-md"
+    >
+      {[]}
+    </Tree>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Tree aria-label="sm" size="sm" className="max-w-md">
+        <TreeItem id="sm.1" textValue="Small row">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Small row</span>
+          </TreeItemContent>
+        </TreeItem>
+      </Tree>
+      <Tree aria-label="default" className="max-w-md">
+        <TreeItem id="def.1" textValue="Default row">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Default row</span>
+          </TreeItemContent>
+        </TreeItem>
+      </Tree>
+      <Tree aria-label="lg" size="lg" className="max-w-md">
+        <TreeItem id="lg.1" textValue="Large row">
+          <TreeItemContent>
+            <TreeItemChevron hasChildItems={false} />
+            <span>Large row</span>
+          </TreeItemContent>
+        </TreeItem>
+      </Tree>
+    </div>
+  ),
+};