@syscore/ui-library 1.25.0 → 2.0.0-beta-publish-workflow-beta.1

package/client/ui/Layout/Stack.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Stack } from "../../components/ui/layout";
+import { DemoBox, LAYOUT_DOCS_RULE } from "./demo";
+import {
+  alignControl,
+  hiddenArgs,
+  justifyControl,
+  spaceControl,
+} from "./controls";
+
+const meta = {
+  title: "Components/Layout/Stack",
+  component: Stack,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Unified stack. Use when direction is dynamic. Otherwise prefer `HStack` or `VStack`.",
+          "",
+          LAYOUT_DOCS_RULE,
+          "",
+          "```tsx",
+          `import { Stack } from "@syscore/ui-library"`,
+          "",
+          '<Stack direction="vertical" gap="md">…</Stack>',
+          '<Stack direction="horizontal" gap="md" align="center">…</Stack>',
+          "```",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    ...hiddenArgs,
+    direction: { control: "inline-radio", options: ["vertical", "horizontal"] },
+    gap: spaceControl,
+    padding: spaceControl,
+    align: alignControl,
+    justify: justifyControl,
+    wrap: { control: "boolean" },
+    isScrollable: { control: "boolean" },
+  },
+} satisfies Meta<typeof Stack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { direction: "vertical", gap: "md" },
+  render: (args) => (
+    <Stack {...args} maxWidth={args.direction === "vertical" ? 384 : undefined}>
+      <DemoBox label="Item 1" />
+      <DemoBox label="Item 2" />
+      <DemoBox label="Item 3" />
+    </Stack>
+  ),
+};
+
+export const Horizontal: Story = {
+  args: { direction: "horizontal", gap: "md", align: "center" },
+  render: (args) => (
+    <Stack {...args}>
+      <DemoBox label="Item 1" />
+      <DemoBox label="Item 2" />
+      <DemoBox label="Item 3" />
+    </Stack>
+  ),
+};

package/client/ui/Layout/StackItem.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HStack, StackItem, VStack } from "../../components/ui/layout";
+import { DemoBox, LAYOUT_DOCS_RULE } from "./demo";
+import { hiddenArgs } from "./controls";
+
+const meta = {
+  title: "Components/Layout/StackItem",
+  component: StackItem,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Child of `HStack` / `VStack` / `Stack`. Controls grow and scroll without Tailwind `flex-1`.",
+          "",
+          LAYOUT_DOCS_RULE,
+          "",
+          "```tsx",
+          `import { HStack, StackItem } from "@syscore/ui-library"`,
+          "",
+          "<HStack>",
+          "  <StackItem>Logo</StackItem>",
+          '  <StackItem size="fill">Content</StackItem>',
+          "  <StackItem>Actions</StackItem>",
+          "</HStack>",
+          "```",
+          "",
+          "| `size` | Effect |",
+          "|--------|--------|",
+          "| `static` (default) | Intrinsic size, no grow |",
+          "| `fill` | Grows to fill remaining space |",
+          "",
+          "`isScrollable` makes a filling item scroll internally — the pattern behind a fixed header and footer with a scrolling middle. `alignSelf` overrides the stack's `align` for one child.",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    ...hiddenArgs,
+    size: { control: "inline-radio", options: ["static", "fill"] },
+    isScrollable: { control: "boolean" },
+    alignSelf: {
+      control: "select",
+      options: ["start", "center", "end", "stretch", "baseline"],
+    },
+  },
+  args: { size: "fill" },
+} satisfies Meta<typeof StackItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Fill remaining space",
+  render: (args) => (
+    <HStack width="100%" gap="sm">
+      <StackItem>
+        <DemoBox label="Logo" />
+      </StackItem>
+      <StackItem {...args}>
+        <DemoBox label="Fills remaining space" />
+      </StackItem>
+      <StackItem>
+        <DemoBox label="Actions" />
+      </StackItem>
+    </HStack>
+  ),
+};
+
+export const FillAndScroll: Story = {
+  name: "Fill and scroll",
+  args: { size: "fill", isScrollable: true },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Static header and footer with a scrolling middle — the same shape as `Layout`, at component scale.",
+      },
+    },
+  },
+  render: (args) => (
+    <VStack height={240} gap={0} width="100%" maxWidth={480}>
+      <StackItem>
+        <DemoBox label="Header (static)" />
+      </StackItem>
+      <StackItem {...args}>
+        <VStack gap="sm" padding="sm">
+          {Array.from({ length: 8 }, (_, i) => (
+            <DemoBox key={i} label={`Row ${i + 1}`} />
+          ))}
+        </VStack>
+      </StackItem>
+      <StackItem>
+        <DemoBox label="Footer (static)" />
+      </StackItem>
+    </VStack>
+  ),
+};
+
+export const AlignSelf: Story = {
+  name: "Align self",
+  args: { size: "static", alignSelf: "end" },
+  parameters: {
+    docs: {
+      description: {
+        story: "One child opts out of the stack's `align`.",
+      },
+    },
+  },
+  render: (args) => (
+    <HStack width="100%" gap="sm" align="start" height={120}>
+      <StackItem>
+        <DemoBox label="align: start" />
+      </StackItem>
+      <StackItem {...args}>
+        <DemoBox label="alignSelf" />
+      </StackItem>
+      <StackItem>
+        <DemoBox label="align: start" />
+      </StackItem>
+    </HStack>
+  ),
+};

package/client/ui/Layout/VStack.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { VStack } from "../../components/ui/layout";
+import { DemoBox, LAYOUT_DOCS_RULE } from "./demo";
+import {
+  alignControl,
+  hiddenArgs,
+  justifyControl,
+  spaceControl,
+} from "./controls";
+
+const meta = {
+  title: "Components/Layout/VStack",
+  component: VStack,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Vertical stack. Arranges children top to bottom with a consistent gap.",
+          "",
+          LAYOUT_DOCS_RULE,
+          "",
+          "```tsx",
+          `import { VStack } from "@syscore/ui-library"`,
+          "",
+          '<VStack gap="md">',
+          "  <Item />",
+          "  <Item />",
+          "</VStack>",
+          "```",
+          "",
+          "`align` is the cross axis (horizontal here), `justify` the main axis. This is the default direction of `Stack` — prefer `VStack` when the axis is known.",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    ...hiddenArgs,
+    gap: spaceControl,
+    padding: spaceControl,
+    align: alignControl,
+    justify: justifyControl,
+    isScrollable: { control: "boolean" },
+  },
+  args: {
+    gap: "md",
+    maxWidth: 384,
+  },
+} satisfies Meta<typeof VStack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <VStack {...args}>
+      <DemoBox label="Item 1" />
+      <DemoBox label="Item 2" />
+      <DemoBox label="Item 3" />
+    </VStack>
+  ),
+};
+
+export const Centered: Story = {
+  args: { align: "center" },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`align="center"` centres each child on the cross axis without stretching it.',
+      },
+    },
+  },
+  render: (args) => (
+    <VStack {...args}>
+      <DemoBox label="Item 1" />
+      <DemoBox label="Item 2" />
+      <DemoBox label="Item 3" />
+    </VStack>
+  ),
+};
+
+export const Scrollable: Story = {
+  args: { gap: "sm", isScrollable: true, height: 220, padding: "sm" },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "`isScrollable` with a fixed `height` scrolls the stack instead of the page.",
+      },
+    },
+  },
+  render: (args) => (
+    <VStack {...args}>
+      {Array.from({ length: 10 }, (_, i) => (
+        <DemoBox key={i} label={`Row ${i + 1}`} />
+      ))}
+    </VStack>
+  ),
+};

package/client/ui/Layout/controls.ts

@@ -0,0 +1,33 @@
+import { SPACE_NAMES } from "../../components/ui/layout";
+
+/**
+ * Shared Storybook controls. `gap`/`padding` accept `SpaceName | number`, so the
+ * generated control is a free text box — these pin them to the token scale, which
+ * is what the design system wants people reaching for.
+ */
+export const spaceControl = {
+  control: "select" as const,
+  options: [...SPACE_NAMES],
+};
+
+export const alignControl = {
+  control: "select" as const,
+  options: ["start", "center", "end", "stretch", "baseline"],
+};
+
+export const justifyControl = {
+  control: "select" as const,
+  options: ["start", "center", "end", "between", "around", "evenly"],
+};
+
+/** Aliases and deprecated props that should not appear as live knobs. */
+export const hiddenArgs = {
+  as: { table: { disable: true } },
+  hAlign: { table: { disable: true } },
+  vAlign: { table: { disable: true } },
+  cols: { table: { disable: true } },
+  colsSm: { table: { disable: true } },
+  colsMd: { table: { disable: true } },
+  colsLg: { table: { disable: true } },
+  colGap: { table: { disable: true } },
+};

package/client/ui/Layout/demo.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+/**
+ * Story fixtures. Not design-system components — but still token-driven, so the
+ * layout stories never demonstrate the hardcoded styling the docs rule forbids.
+ * Styles live in `client/storybook.css` (Storybook only).
+ */
+export function DemoBox({ label, tall }: { label?: string; tall?: boolean }) {
+  return (
+    <div className={tall ? "sb-demo-box sb-demo-box--tall" : "sb-demo-box"}>
+      {label ?? "Item"}
+    </div>
+  );
+}
+
+export function ShellFrame({
+  children,
+  height = 420,
+}: {
+  children: React.ReactNode;
+  height?: number;
+}) {
+  return (
+    <div
+      className="sb-shell-frame"
+      style={{ ["--sb-shell-frame-height" as string]: `${height / 16}rem` }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export const LAYOUT_DOCS_RULE = [
+  "Do not use Tailwind for layout (`flex`, `grid`, `gap-*`, `items-*`, `justify-*`, `col-span-*`).",
+  "Use these primitives so a change in the design system updates every app.",
+  'Use named space (`gap="md"`, `space="xl"`) and named sizes (`width="narrow"`) — never raw px.',
+].join(" ");

package/client/ui/Menubar/Menubar.stories.tsx

@@ -13,7 +13,7 @@ import {
 import { useState } from "react";
 
 const meta = {
-  title: "UI/Menubar",
+  title: "Draft/Menubar",
   component: Menubar,
   tags: ["autodocs"],
   parameters: {

package/client/ui/MobileNav.stories.tsx

@@ -21,7 +21,7 @@ import {
 } from "@/components/ui/dialog";
 
 const meta = {
-  title: "Review/MobileNav",
+  title: "Components/MobileNav",
   component: MobileNav,
   tags: ["autodocs"],
   parameters: {

package/client/ui/Navigation.stories.tsx

@@ -48,7 +48,7 @@ const Link = React.forwardRef<
 Link.displayName = "Link";
 
 const meta = {
-  title: "Review/Navigation",
+  title: "Components/Navigation",
   component: Navigation,
   tags: ["autodocs"],
   parameters: {

package/client/ui/NavigationMenu/NavigationMenu.stories.tsx

@@ -9,7 +9,7 @@ import {
 } from "../../components/ui/navigation-menu";
 
 const meta = {
-  title: "UI/NavigationMenu",
+  title: "Draft/NavigationMenu",
   component: NavigationMenu,
   tags: ["autodocs"],
   parameters: {

package/client/ui/PageHeader.stories.tsx

@@ -20,7 +20,7 @@ import { BadgeImperativePrimary } from "@/components/icons/imperative-badges";
 import { Text } from "@/components/ui/typography";
 
 const meta = {
-  title: "Review/PageHeader",
+  title: "Components/PageHeader",
   component: PageHeader,
   parameters: {
     layout: "padded",
@@ -120,8 +120,8 @@ export const ThemeHeader: Story = {
                   Theme
                 </span>
               </TooltipTrigger>
-              <TooltipContent className="max-w-[400px]">
-                <p className="body-base text-white">
+              <TooltipContent>
+                <p className="tooltip-body">
                   Themes are groupings of related strategies that address
                   specific aspects of health and well-being within a concept
                   area.
@@ -152,8 +152,8 @@ export const ThemeHeader: Story = {
                       WELL Certification
                     </span>
                   </TooltipTrigger>
-                  <TooltipContent className="max-w-[400px]">
-                    <p className="body-base text-white">
+                  <TooltipContent>
+                    <p className="tooltip-body">
                       The WELL Certification is a globally recognized standard
                       for healthy, people-first buildings. It is based on the
                       WELL Building Standard, which is a comprehensive framework
@@ -216,8 +216,8 @@ export const ThemeHeaderWithPoints: Story = {
                   Theme
                 </span>
               </TooltipTrigger>
-              <TooltipContent className="max-w-[400px]">
-                <p className="body-base text-white">
+              <TooltipContent>
+                <p className="tooltip-body">
                   Themes are groupings of related strategies that address
                   specific aspects of health and well-being within a concept
                   area.
@@ -247,8 +247,8 @@ export const ThemeHeaderWithPoints: Story = {
                           WELL Certification
                         </span>
                       </TooltipTrigger>
-                      <TooltipContent className="max-w-[400px]">
-                        <p className="body-base text-white">
+                      <TooltipContent>
+                        <p className="tooltip-body">
                           The WELL Certification is a globally recognized
                           standard for healthy, people-first buildings. It is
                           based on the WELL Building Standard, which is a
@@ -329,8 +329,8 @@ export const ThemeHeaderWithImperativeBadge: Story = {
                   Theme
                 </span>
               </TooltipTrigger>
-              <TooltipContent className="max-w-[400px]">
-                <p className="body-base text-white">
+              <TooltipContent>
+                <p className="tooltip-body">
                   Themes are groupings of related strategies that address
                   specific aspects of health and well-being within a concept
                   area.
@@ -340,11 +340,11 @@ export const ThemeHeaderWithImperativeBadge: Story = {
           </PageHeaderLeftContent>
 
           <div className="flex items-center gap-4">
-            <Tooltip>
+            <Tooltip trigger="hover">
               <TooltipTrigger>
                 <BadgeImperativePrimary className="cursor-pointer" />
               </TooltipTrigger>
-              <TooltipContent variant="simple">
+              <TooltipContent>
                 <Text as="p" variant="body-small">
                   <span className="font-semibold">Required</span> for
                   certification