@syscore/ui-library 1.27.3 → 2.0.0-beta-publish-workflow-beta.2

package/client/ui/SystemBar/system-bar.stories.tsx

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  SystemBar,
+  SystemBarSpacer,
+  SystemBarIcon,
+  SystemBarAction,
+} from "../../components/ui/system-bar";
+
+// ─── Inline SVG icons ─────────────────────────────────────────────────────────
+
+function IconWifi({ strength = 4 }: { strength?: 1 | 2 | 3 | 4 }) {
+  // Simple wifi icon — bars filled based on strength
+  const bars = [1, 2, 3, 4];
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      {strength >= 1 && <path d="M1 9l2 2c5-5 13-5 18 0l2-2C16.93 2.93 7.08 2.93 1 9z" opacity={strength === 1 ? 1 : 0.4} />}
+      {strength >= 2 && <path d="M5 13l2 2a7 7 0 0 1 10 0l2-2C15.14 9.14 8.87 9.14 5 13z" opacity={strength === 2 ? 1 : 0.6} />}
+      {strength >= 3 && <path d="M9 17l3 3 3-3a4.237 4.237 0 0 0-6 0z" />}
+      <circle cx="12" cy="20" r="1" />
+    </svg>
+  );
+}
+
+function IconSignal() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <rect x="2" y="16" width="3" height="6" rx="0.5" />
+      <rect x="7" y="12" width="3" height="10" rx="0.5" />
+      <rect x="12" y="8" width="3" height="14" rx="0.5" />
+      <rect x="17" y="4" width="3" height="18" rx="0.5" opacity="0.3" />
+    </svg>
+  );
+}
+
+function IconBattery() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <rect x="2" y="7" width="18" height="11" rx="2" stroke="currentColor" strokeWidth="1.5" fill="none" />
+      <rect x="3.5" y="8.5" width="12" height="8" rx="1" />
+      <path d="M20 10h2v5h-2z" />
+    </svg>
+  );
+}
+
+function IconMessage() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+    </svg>
+  );
+}
+
+function IconMinus() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none" aria-hidden="true">
+      <line x1="5" y1="12" x2="19" y2="12" />
+    </svg>
+  );
+}
+
+function IconMaximize() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none" aria-hidden="true">
+      <rect x="3" y="3" width="18" height="18" rx="1" />
+    </svg>
+  );
+}
+
+function IconClose() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2" fill="none" aria-hidden="true">
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+const meta = {
+  title: "Draft/SystemBar",
+  component: SystemBar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    color: { control: "color" },
+    window: { control: "boolean" },
+  },
+} satisfies Meta<typeof SystemBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// ─── Default ─────────────────────────────────────────────────────────────────
+// Android-style status bar with wifi, signal, battery and a clock.
+
+export const Default: Story = {
+  render: () => (
+    <SystemBar>
+      <SystemBarIcon>
+        <IconWifi strength={4} />
+      </SystemBarIcon>
+      <SystemBarIcon>
+        <IconSignal />
+      </SystemBarIcon>
+      <SystemBarIcon>
+        <IconBattery />
+      </SystemBarIcon>
+      <SystemBarSpacer />
+      <span className="system-bar-time">3:13 PM</span>
+    </SystemBar>
+  ),
+};
+
+// ─── Colors ───────────────────────────────────────────────────────────────────
+// Three bars with different background colors — text/icons auto-switch to white.
+
+export const Colors: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+      {/* Primary blue */}
+      <SystemBar color="#0284c7">
+        <SystemBarIcon><IconWifi strength={4} /></SystemBarIcon>
+        <SystemBarIcon><IconSignal /></SystemBarIcon>
+        <SystemBarIcon><IconBattery /></SystemBarIcon>
+        <SystemBarSpacer />
+        <span className="system-bar-time">08:30</span>
+      </SystemBar>
+
+      {/* Red */}
+      <SystemBar color="#f87171">
+        <SystemBarIcon><IconWifi strength={2} /></SystemBarIcon>
+        <SystemBarIcon><IconSignal /></SystemBarIcon>
+        <SystemBarIcon><IconBattery /></SystemBarIcon>
+        <SystemBarSpacer />
+        <span className="system-bar-time">18:30</span>
+      </SystemBar>
+
+      {/* Indigo */}
+      <SystemBar color="#3730a3">
+        <SystemBarIcon><IconWifi strength={3} /></SystemBarIcon>
+        <SystemBarIcon><IconSignal /></SystemBarIcon>
+        <SystemBarIcon><IconBattery /></SystemBarIcon>
+        <SystemBarSpacer />
+        <span className="system-bar-time">13:24</span>
+      </SystemBar>
+    </div>
+  ),
+};
+
+// ─── Window ───────────────────────────────────────────────────────────────────
+// Desktop-style title bar: message on the left, window controls on the right.
+
+export const Window: Story = {
+  render: () => (
+    <SystemBar window>
+      <SystemBarIcon>
+        <IconMessage />
+      </SystemBarIcon>
+      <span className="system-bar-label">10 unread messages</span>
+      <SystemBarSpacer />
+      <SystemBarAction aria-label="Minimise window">
+        <IconMinus />
+      </SystemBarAction>
+      <SystemBarAction aria-label="Maximise window">
+        <IconMaximize />
+      </SystemBarAction>
+      <SystemBarAction
+        aria-label="Close window"
+        className="system-bar-action--close"
+      >
+        <IconClose />
+      </SystemBarAction>
+    </SystemBar>
+  ),
+};

package/client/ui/Table/TableV01.stories.tsx

@@ -0,0 +1,256 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Pencil } from "lucide-react";
+import {
+  TableV01,
+  TableV01Action,
+  TableV01Body,
+  TableV01Cell,
+  TableV01Header,
+  TableV01HeaderCell,
+  TableV01Row,
+  type TableV01Align,
+  type TableV01Density,
+} from "../../components/ui/table-v01";
+
+const meta = {
+  title: "Components/Table",
+  component: TableV01,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Data table with a header, body and optional footer.",
+          "",
+          "```tsx",
+          `import {`,
+          `  TableV01, TableV01Header, TableV01Body, TableV01Footer, TableV01Row,`,
+          `  TableV01HeaderCell, TableV01Cell, TableV01Tag, TableV01Action,`,
+          `} from "@syscore/ui-library"`,
+          "",
+          '<TableV01 density="compact">',
+          "  <TableV01Header>",
+          "    <TableV01Row>",
+          '      <TableV01HeaderCell label="Concept" />',
+          '      <TableV01HeaderCell label="Actions" align="right" />',
+          "    </TableV01Row>",
+          "  </TableV01Header>",
+          "  <TableV01Body>",
+          "    <TableV01Row>",
+          '      <TableV01Cell text="Thermal comfort" tag="T4.1" />',
+          '      <TableV01Cell align="right" action={<TableV01Action>…</TableV01Action>} />',
+          "    </TableV01Row>",
+          "  </TableV01Body>",
+          "</TableV01>",
+          "```",
+          "",
+          "### Props",
+          "",
+          "| Component | Prop | Values | Default |",
+          "|-----------|------|--------|---------|",
+          "| `TableV01` | `density` | `compact` \\| `balanced` \\| `spacious` | `compact` |",
+          "| `TableV01HeaderCell` | `label` | column label | — |",
+          "| | `align` | `left` \\| `center` \\| `right` | `left` |",
+          "| `TableV01Cell` | `text` | cell text | — |",
+          "| | `tag` | wrapped in the code tag automatically | — |",
+          "| | `action` | one or more `TableV01Action` | — |",
+          "| | `align` | `left` \\| `center` \\| `right` | `left` |",
+          "",
+          "Mix `text`, `tag` and `action` freely — they render in that order. `children`",
+          "still works for anything the props cannot express, such as a link or two lines.",
+          "",
+          "### Density",
+          "",
+          "`density` sets the cell's vertical padding; row heights follow from the content.",
+          "",
+          "| | Padding | Header | Text row | Tag / action row |",
+          "|---|---------|--------|----------|------------------|",
+          "| `compact` | 16 | 40 | 43 | 64 |",
+          "| `balanced` | 20 | 48 | 51 | 72 |",
+          "| `spacious` | 24 | 56 | 59 | 80 |",
+          "",
+          "Column dividers, outer borders and the rounded corners are handled",
+          "automatically from cell and row position — nothing to pass.",
+        ].join("\n"),
+      },
+    },
+  },
+} satisfies Meta<typeof TableV01>;
+
+export default meta;
+
+/** Density and alignment as controls; the three columns show one layout each. */
+type StoryArgs = {
+  density: TableV01Density;
+  align: TableV01Align;
+};
+
+type Story = StoryObj<StoryArgs>;
+
+const CONTROLS = {
+  density: {
+    control: "inline-radio" as const,
+    options: ["compact", "balanced", "spacious"],
+    description: "The cell's vertical padding.",
+  },
+  align: {
+    control: "inline-radio" as const,
+    options: ["left", "center", "right"],
+    description: "Text alignment, applied to every cell.",
+  },
+};
+
+const ROWS = [
+  { text: "Thermal comfort", tag: "T4.1" },
+  { text: "Water quality", tag: "W2.2" },
+  { text: "Nourishment", tag: "N1.2" },
+];
+
+/** A cell holds a single icon action; pass a fragment for more. */
+const action = (label: string) => (
+  <TableV01Action aria-label={`Edit ${label}`}>
+    <Pencil strokeWidth={1.5} />
+  </TableV01Action>
+);
+
+/**
+ * One table per content type, three columns wide, with density and alignment
+ * as controls.
+ */
+function contentStory(
+  headers: [string, string, string],
+  cell: (row: (typeof ROWS)[number], align: TableV01Align) => React.ReactNode,
+  story: string,
+): Story {
+  return {
+    argTypes: CONTROLS,
+    args: { density: "compact", align: "left" },
+    parameters: { docs: { description: { story } } },
+    render: ({ density, align }) => (
+      <TableV01 density={density} containerClassName="sb-table-triple">
+        <TableV01Header>
+          <TableV01Row>
+            {headers.map((label) => (
+              <TableV01HeaderCell key={label} label={label} align={align} />
+            ))}
+          </TableV01Row>
+        </TableV01Header>
+        <TableV01Body>
+          {ROWS.map((row) => (
+            <TableV01Row key={row.tag}>
+              {headers.map((label) => (
+                <React.Fragment key={label}>{cell(row, align)}</React.Fragment>
+              ))}
+            </TableV01Row>
+          ))}
+        </TableV01Body>
+      </TableV01>
+    ),
+  };
+}
+
+export const WithText: Story = {
+  ...contentStory(
+    ["Concept", "Strategy", "Status"],
+    (row, align) => <TableV01Cell text={row.text} align={align} />,
+    "Text cells — pass the `text` prop.",
+  ),
+  name: "With text",
+};
+
+export const WithTag: Story = {
+  ...contentStory(
+    ["Code", "Strategy", "Reference"],
+    (row, align) => <TableV01Cell tag={row.tag} align={align} />,
+    "Tag cells — pass `tag` and it is wrapped in the code tag automatically.",
+  ),
+  name: "With tag",
+};
+
+export const WithAction: Story = {
+  ...contentStory(
+    ["Actions", "Review", "Archive"],
+    (row, align) => <TableV01Cell action={action(row.text)} align={align} />,
+    "Action cells — pass one or more `TableV01Action` to `action`.",
+  ),
+  name: "With action",
+};
+
+export const TextAndTag: Story = {
+  ...contentStory(
+    ["Concept", "Strategy", "Feature"],
+    (row, align) => (
+      <TableV01Cell text={row.text} tag={row.tag} align={align} />
+    ),
+    "Text and tag on the same cell.",
+  ),
+  name: "Text + tag",
+};
+
+export const TextAndAction: Story = {
+  ...contentStory(
+    ["Concept", "Strategy", "Actions"],
+    (row, align) => (
+      <TableV01Cell text={row.text} action={action(row.text)} align={align} />
+    ),
+    "Text and an action on the same cell.",
+  ),
+  name: "Text + action",
+};
+
+export const AllVariants: Story = {
+  name: "All variants",
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          "Every content combination across all three densities, one row per alignment.",
+      },
+    },
+  },
+  render: () => (
+    <div style={{ display: "grid", gap: "var(--space-3xl)" }}>
+      {(["compact", "balanced", "spacious"] as const).map((density) => (
+        <div key={density} style={{ display: "grid", gap: "var(--space-xs)" }}>
+          <span className="sb-table-density-label font-mazzardSoft">
+            {density}
+          </span>
+          <TableV01 density={density}>
+            <TableV01Header>
+              <TableV01Row>
+                <TableV01HeaderCell label="Align" />
+                <TableV01HeaderCell label="Text only" />
+                <TableV01HeaderCell label="Tag only" />
+                <TableV01HeaderCell label="Text + tag" />
+                <TableV01HeaderCell label="Text + action" />
+                <TableV01HeaderCell label="Action only" />
+              </TableV01Row>
+            </TableV01Header>
+            <TableV01Body>
+              {(["left", "center", "right"] as const).map((align, index) => {
+                const row = ROWS[index];
+                return (
+                  <TableV01Row key={align}>
+                    <TableV01Cell text={align} />
+                    <TableV01Cell text={row.text} align={align} />
+                    <TableV01Cell tag={row.tag} align={align} />
+                    <TableV01Cell text={row.text} tag={row.tag} align={align} />
+                    <TableV01Cell
+                      text={row.text}
+                      action={action(row.text)}
+                      align={align}
+                    />
+                    <TableV01Cell action={action(row.text)} align={align} />
+                  </TableV01Row>
+                );
+              })}
+            </TableV01Body>
+          </TableV01>
+        </div>
+      ))}
+    </div>
+  ),
+};

package/client/ui/Tabs.stories.tsx

@@ -10,7 +10,7 @@ import { useState } from "react";
 import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 
 const meta = {
-  title: "Review/Tabs",
+  title: "Draft/Tabs Legacy",
   component: Tabs,
   tags: ["autodocs"],
   parameters: {

package/client/ui/TabsV01/TabsV01.stories.tsx

@@ -0,0 +1,144 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TabsV01 } from "../../components/ui/tabs-v01";
+
+const counts = [2, 3, 4, 5] as const;
+
+const sectionHeading: React.CSSProperties = {
+  margin: "0 0 20px",
+  fontSize: 14,
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: 0.5,
+  color: "#52545d",
+};
+
+function StatefulTabs({
+  count,
+  label,
+}: {
+  count: number;
+  label?: React.ReactNode;
+}) {
+  const [value, setValue] = React.useState("tab-0");
+  const items = Array.from({ length: count }, (_, i) => ({
+    value: `tab-${i}`,
+    label: value === `tab-${i}` ? "Active" : "Inactive",
+  }));
+
+  return (
+    <TabsV01
+      label={label}
+      items={items}
+      value={value}
+      onValueChange={setValue}
+    />
+  );
+}
+
+type StoryArgs = React.ComponentProps<typeof TabsV01> & { count?: number };
+
+const meta = {
+  title: "Components/Tabs",
+  component: TabsV01,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Tab bar. Existing `Components/TabsLegacy` (`Tabs`) is unchanged.",
+          "",
+          "Use **Controls** for the tab count and the heading. Each label reports its",
+          "own state, so the selected tab reads Active and the rest read Inactive.",
+          "All Variants shows the four counts side by side.",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import { TabsV01 } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "This is the bar only — wire your own content to `onValueChange`. Leave it",
+          "uncontrolled to select the first item, or drive it with `value`.",
+          "",
+          "```tsx",
+          'const [tab, setTab] = useState("overview")',
+          "",
+          "<TabsV01",
+          `  label="Section"`,
+          "  items={[",
+          `    { value: "overview", label: "Overview" },`,
+          `    { value: "details", label: "Details" },`,
+          "  ]}",
+          "  value={tab}",
+          "  onValueChange={setTab}",
+          "/>",
+          "```",
+          "",
+          'Tabs expose `role="tab"` inside a `role="tablist"`, with arrow-key movement',
+          "and a roving tab index. Both states share one text colour, so the underline",
+          "is the only visual cue for the selected tab.",
+          "",
+          "## Props",
+          "",
+          "| Prop | Values | Default | Effect |",
+          "|------|--------|---------|--------|",
+          "| `items` | `{ value, label, disabled? }[]` | `[]` | The tabs |",
+          "| `label` | `ReactNode` | — | Heading above the bar (18px/25.2) |",
+          "| `value` | `string` | — | Controlled selection |",
+          "| `defaultValue` | `string` | first item | Uncontrolled selection |",
+          "| `onValueChange` | `(value: string) => void` | — | Fires on select |",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    count: {
+      control: "inline-radio",
+      options: [...counts],
+      description: "How many tabs to render.",
+      table: { category: "Story only", defaultValue: { summary: "3" } },
+    },
+    label: { control: "text" },
+    items: { table: { disable: true } },
+    value: { table: { disable: true } },
+  },
+  args: {
+    label: "Label",
+    count: 3,
+  },
+  render: (args) => <StatefulTabs count={args.count ?? 3} label={args.label} />,
+} satisfies Meta<StoryArgs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const AllVariants: Story = {
+  name: "All Variants",
+  parameters: { layout: "padded" },
+  argTypes: { count: { table: { disable: true } } },
+  render: (args) => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 72,
+        padding: "32px 24px 48px",
+      }}
+    >
+      {counts.map((count) => (
+        <section key={count}>
+          <h3 style={sectionHeading}>{count} tabs</h3>
+          <StatefulTabs count={count} label={args.label} />
+        </section>
+      ))}
+    </div>
+  ),
+};

package/client/ui/Tag.stories.tsx

@@ -3,7 +3,7 @@ import { useState } from "react";
 import { Tag } from "../components/ui/tag";
 
 const meta = {
-  title: "Review/Tag",
+  title: "Draft/Tag Legacy",
   component: Tag,
   tags: ["autodocs"],
   parameters: {