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

package/client/storybook.css

@@ -1,3 +1,128 @@
 @import "tailwindcss";
 
 
+
+/* ---------------------------------------------------------------------------
+   Story fixtures (Storybook only — never shipped in the library build).
+   Token-driven so the frames around layout stories follow the theme instead of
+   demonstrating the hardcoded styling the layout docs tell people to avoid.
+   --------------------------------------------------------------------------- */
+.sb-shell-frame {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: var(--sb-shell-frame-height, 26.25rem);
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius, 0.75rem);
+  overflow: hidden;
+  background-color: hsl(var(--background));
+}
+
+.sb-demo-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--space-5xl);
+  padding-inline: var(--space-sm);
+  border: 1px dashed hsl(var(--border));
+  border-radius: var(--radius, 0.5rem);
+  background-color: hsl(var(--muted));
+  color: hsl(var(--muted-foreground));
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.sb-demo-box--tall {
+  min-height: var(--space-7xl);
+}
+
+/* Fixture accents — the dashed/tinted boxes that make a layout visible. */
+.sb-outline {
+  border: 1px dashed hsl(var(--border));
+  border-radius: var(--radius, 0.75rem);
+}
+
+.sb-fill {
+  border: 1px dashed hsl(var(--border));
+  border-radius: var(--radius, 0.75rem);
+  background-color: hsl(var(--muted));
+}
+
+.sb-spacer-fill {
+  background-color: hsl(var(--primary) / 0.25);
+  border-radius: 2px;
+}
+
+/* Follow the token palette so the theme toolbar affects the canvas, not just the components. */
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
+.sb-caption {
+  font-size: 0.75rem;
+  color: hsl(var(--muted-foreground));
+  font-variant-numeric: tabular-nums;
+}
+
+.sb-pagination-spec {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--space-2xl);
+}
+
+.sb-pagination-matrix {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2xl);
+  align-items: flex-start;
+}
+
+.sb-pagination-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2xl);
+}
+
+.sb-pagination-label {
+  width: 80px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 25.2px;
+  color: var(--color-gray-700);
+  text-transform: capitalize;
+}
+
+/* SearchField spec rows (Storybook only) */
+.sb-searchfield-matrix {
+  display: grid;
+  gap: var(--space-lg);
+}
+
+.sb-searchfield-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xl);
+}
+
+.sb-searchfield-label {
+  min-width: 5rem;
+  font-size: 0.75rem;
+  text-transform: capitalize;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Density label above each table in the Table "All variants" story. */
+.sb-table-density-label {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Content-type stories show Figma's three alignment columns at 180px each. */
+.sb-table-triple {
+  width: 540px;
+}

package/client/ui/Accordion.stories.tsx

@@ -17,7 +17,7 @@ import { CONCEPT_ICONS } from "@/lib/concept-icons";
 import { Text } from "@/components/ui/typography";
 
 const meta = {
-  title: "Review/Accordion",
+  title: "Components/Accordion",
   component: Accordion,
   tags: ["autodocs"],
   parameters: {

package/client/ui/AlertDialogPanel/AlertDialogPanel.stories.tsx

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AlertDialogPanelSurface } from "../../components/ui/alert-dialog-panel";
+
+const meta = {
+  title: "Components/Alert Dialog",
+  component: AlertDialogPanelSurface,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    // The panel's 12px ring is white at 20% opacity and sits outside the fill,
+    // so it vanishes on a white canvas — what the 27 Aug review flagged. These
+    // stories render the surface inline, so the default background stands in
+    // for the modal overlay (`rgba(0, 0, 0, 0.8)`) the dialog really sits on.
+    backgrounds: {
+      default: "light",
+      values: [
+        { name: "light", value: "#FFFFFF" },
+        { name: "overlay", value: "#282A31" },
+        { name: "surface", value: "#71747D" },
+      ],
+    },
+    docs: {
+      description: {
+        component: [
+          "Confirmation dialog.",
+          "",
+          "Three variants — `default`, `destruction` and `success` — each available at",
+          "`medium` (420px) and `small` (320px). Use the **Controls** panel to switch size.",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import {`,
+          `  AlertDialogPanel, AlertDialogPanelSurface,`,
+          `} from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## Two components, two jobs",
+          "",
+          "| Component | Use for |",
+          "|-----------|---------|",
+          "| `AlertDialogPanel` | The real modal — portal, overlay, focus trap, escape handling |",
+          "| `AlertDialogPanelSurface` | The bare panel, rendered inline. Used by the stories below |",
+          "",
+          "## Props",
+          "",
+          "| Prop | Values | Default | Effect |",
+          "|------|--------|---------|--------|",
+          '| `variant` | `"default"` \\| `"destruction"` \\| `"success"` | `"default"` | Surface and confirm-button treatment |',
+          '| `size` | `"medium"` \\| `"small"` | `"medium"` | 420px vs 320px wide |',
+          "| `title` | `ReactNode` | — | Heading text |",
+          "| `description` | `ReactNode` | — | Supporting copy |",
+          "| `showDescription` | `boolean` | `true` | Shows or hides the description |",
+          '| `cancelLabel` | `ReactNode` | `"Cancel"` | Left (dismiss) button |',
+          '| `actionLabel` | `ReactNode` | `"Confirm"` | Right (confirm) button |',
+          "| `onCancel` / `onAction` | `() => void` | — | Button handlers |",
+          "| `trigger` | `ReactNode` | — | Element that opens the modal |",
+          "",
+          "## Sizing behaviour",
+          "",
+          "At `medium` the two buttons split the row equally. At `small` they hug their",
+          "labels and centre as a group.",
+          "",
+          "## Using it as a modal",
+          "",
+          "The stories below render the surface inline so the design is visible. In an",
+          "app, use `AlertDialogPanel` for a real dialog:",
+          "",
+          "```tsx",
+          "const [open, setOpen] = useState(false)",
+          "",
+          "<AlertDialogPanel",
+          "  open={open}",
+          "  onOpenChange={setOpen}",
+          `  variant="destruction"`,
+          `  size="medium"`,
+          `  title="Are you sure?"`,
+          `  description="This action cannot be undone."`,
+          `  cancelLabel="Cancel"`,
+          `  actionLabel="Delete"`,
+          "  onAction={handleDelete}",
+          `  trigger={<Button variant="general-primary">Delete item</Button>}`,
+          "/>",
+          "```",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destruction", "success"],
+    },
+    size: { control: "select", options: ["medium", "small"] },
+    showDescription: { control: "boolean" },
+    title: { control: "text" },
+    description: { control: "text" },
+    cancelLabel: { control: "text" },
+    actionLabel: { control: "text" },
+    asPrimitive: { table: { disable: true } },
+  },
+} satisfies Meta<typeof AlertDialogPanelSurface>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ─── Default ──────────────────────────────────────────────────────────────────
+// Neutral confirmation. Switch `size` in the Controls panel.
+
+export const Default: Story = {
+  args: {
+    variant: "default",
+    size: "medium",
+    title: "Confirm Action",
+    description: "Are you sure you want to proceed with this action?",
+    cancelLabel: "Cancel",
+    actionLabel: "Confirm",
+  },
+};
+
+// ─── Destructive ──────────────────────────────────────────────────────────────
+// Irreversible action. Confirm button uses the coral treatment.
+
+export const Destructive: Story = {
+  args: {
+    variant: "destruction",
+    size: "medium",
+    title: "Are you sure?",
+    description:
+      "This action cannot be undone. This will permanently delete the item.",
+    cancelLabel: "Cancel",
+    actionLabel: "Delete",
+  },
+};
+
+// ─── Success ──────────────────────────────────────────────────────────────────
+// Positive confirmation on the gradient surface.
+
+export const Success: Story = {
+  args: {
+    variant: "success",
+    size: "medium",
+    title: "Success!",
+    description: "Link sent! Check your inbox 📥",
+    cancelLabel: "Send link again",
+    actionLabel: "Try another email",
+  },
+};

package/client/ui/AlertV02/AlertV02.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AlertV02 } from "../../components/ui/alert-v02";
+import samplePhoto from "../../assets/avatar-identity/photo.png";
+
+const LOREM =
+  "Lorem ipsum dolor sit amet consectetur adipiscing elit. Sit amet consectetur adipiscing elit quisque faucibus ex. Adipiscing elit quisque faucibus ex sapien vitae pellentesque.";
+
+const appearances = ["solid", "subtle", "outline"] as const;
+const colors = ["default", "success", "error"] as const;
+const sizes = ["large", "small"] as const;
+const indicators = ["icon", "avatar"] as const;
+
+const meta = {
+  title: "Components/Alert",
+  component: AlertV02,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Inline alert. Existing `UI/Alert` is unchanged.",
+          "",
+          "Stories are the semantic states: **Default**, **Success**, **Error**.",
+          "Use **Controls** for appearance (solid / subtle / outline), size, and indicator.",
+          "All Variants shows the full set of **36**.",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import { AlertV02 } from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "Pick `color` for meaning. Use `variant`, `size`, and `indicator` for presentation.",
+          "Handle Confirm, Cancel, and dismiss with the callbacks — do not navigate from the",
+          "heading itself.",
+          "",
+          "```tsx",
+          "const [visible, setVisible] = useState(true)",
+          "",
+          "visible ? (",
+          "  <AlertV02",
+          `    color="error"`,
+          `    variant="solid"`,
+          `    size="large"`,
+          `    indicator="icon"`,
+          `    title="Could not save changes"`,
+          `    description="Check the required fields and try again."`,
+          `    confirmLabel="Retry"`,
+          `    cancelLabel="Cancel"`,
+          "    onConfirm={handleRetry}",
+          "    onCancel={() => setVisible(false)}",
+          "    onDismiss={() => setVisible(false)}",
+          "  />",
+          ") : null",
+          "```",
+          "",
+          "| Situation | Use |",
+          "|-----------|-----|",
+          "| Neutral notice | `color=\"default\"` |",
+          "| Positive confirmation | `color=\"success\"` |",
+          "| Failure / blocking problem | `color=\"error\"` |",
+          "| Compact toolbar / inline row | `size=\"small\"` (heading + Confirm only) |",
+          "| Person-specific message | `indicator=\"avatar\"` and `avatarSrc` |",
+          "",
+          "## Props",
+          "",
+          "| Prop | Values | Default | Effect |",
+          "|------|--------|---------|--------|",
+          "| `color` | `\"default\"` \\| `\"success\"` \\| `\"error\"` | `\"default\"` | Semantic state (stories) |",
+          "| `variant` | `\"solid\"` \\| `\"subtle\"` \\| `\"outline\"` | `\"solid\"` | Surface treatment |",
+          "| `size` | `\"large\"` \\| `\"small\"` | `\"large\"` | Stacked copy + two actions vs compact row |",
+          "| `indicator` | `\"icon\"` \\| `\"avatar\"` | `\"icon\"` | Leading checkmark or 32px avatar |",
+          "| `action` | `boolean` | `true` | Confirm (and Cancel on large) |",
+          "| `title` | `ReactNode` | — | Heading |",
+          "| `description` | `ReactNode` | — | Body copy (large only) |",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      name: "Appearance",
+      control: "select",
+      options: [...appearances],
+    },
+    size: { control: "select", options: [...sizes] },
+    indicator: { control: "select", options: [...indicators] },
+    action: { control: "boolean" },
+    title: { control: "text" },
+    description: { control: "text" },
+    confirmLabel: { control: "text" },
+    cancelLabel: { control: "text" },
+    avatarSrc: { control: "text" },
+    color: { table: { disable: true } },
+  },
+  args: {
+    variant: "solid",
+    size: "large",
+    indicator: "icon",
+    action: true,
+    title: "Alert Heading",
+    description: LOREM,
+    confirmLabel: "Confirm",
+    cancelLabel: "Cancel",
+    avatarSrc: samplePhoto,
+  },
+} satisfies Meta<typeof AlertV02>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { color: "default" },
+};
+
+export const Success: Story = {
+  args: { color: "success" },
+};
+
+export const Error: Story = {
+  args: { color: "error" },
+};
+
+export const AllVariants: Story = {
+  name: "All Variants",
+  render: (args) => (
+    <div
+      style={{
+        display: "grid",
+        gap: 40,
+        width: "min(100%, 1200px)",
+      }}
+    >
+      {sizes.flatMap((size) =>
+        indicators.map((indicator) => (
+          <section key={`${size}-${indicator}`}>
+            <h3
+              style={{
+                margin: "0 0 16px",
+                fontSize: 14,
+                fontWeight: 600,
+                textTransform: "uppercase",
+                letterSpacing: 0.5,
+                color: "#52545d",
+              }}
+            >
+              {size} · {indicator}
+            </h3>
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(3, minmax(0, 360px))",
+                gap: 16,
+              }}
+            >
+              {appearances.flatMap((variant) =>
+                colors.map((color) => (
+                  <AlertV02
+                    key={`${size}-${indicator}-${variant}-${color}`}
+                    {...args}
+                    size={size}
+                    indicator={indicator}
+                    variant={variant}
+                    color={color}
+                    title="Alert Heading"
+                    description={LOREM}
+                    avatarSrc={samplePhoto}
+                  />
+                )),
+              )}
+            </div>
+          </section>
+        )),
+      )}
+    </div>
+  ),
+  argTypes: {
+    variant: { table: { disable: true } },
+    size: { table: { disable: true } },
+    indicator: { table: { disable: true } },
+  },
+  parameters: { layout: "padded" },
+};