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

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Grid, GridSpan } from "../../components/ui/layout";
+import { DemoBox, LAYOUT_DOCS_RULE } from "./demo";
+import { hiddenArgs } from "./controls";
+
+const meta = {
+  title: "Components/Layout/GridSpan",
+  component: GridSpan,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Direct child of `Grid`. Spans columns or rows without Tailwind `col-span-*`.",
+          "",
+          LAYOUT_DOCS_RULE,
+          "",
+          "```tsx",
+          `import { Grid, GridSpan } from "@syscore/ui-library"`,
+          "",
+          '<Grid columns={3} gap="md">',
+          "  <GridSpan columns={2}>Wide</GridSpan>",
+          "  <div>Narrow</div>",
+          '  <GridSpan columns="full">Full row</GridSpan>',
+          "</Grid>",
+          "```",
+          "",
+          "Controls here drive the first cell of the grid below.",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    ...hiddenArgs,
+    columns: { control: "select", options: [1, 2, 3, "full"] },
+    rows: { control: "select", options: [1, 2, 3] },
+  },
+  args: { columns: 2 },
+} satisfies Meta<typeof GridSpan>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Column span",
+  render: (args) => (
+    <Grid columns={3} gap="md" width="100%">
+      <GridSpan {...args}>
+        <DemoBox label="Spanning cell" tall />
+      </GridSpan>
+      <DemoBox label="1" tall />
+      <DemoBox label="1" tall />
+      <GridSpan columns="full">
+        <DemoBox label="Full row" />
+      </GridSpan>
+    </Grid>
+  ),
+};
+
+export const RowSpan: Story = {
+  name: "Row span",
+  args: { rows: 2, columns: 1 },
+  render: (args) => (
+    <Grid columns={3} gap="md" width="100%">
+      <GridSpan {...args}>
+        <DemoBox label="Spanning cell" tall />
+      </GridSpan>
+      <DemoBox label="A" />
+      <DemoBox label="B" />
+      <DemoBox label="C" />
+      <DemoBox label="D" />
+    </Grid>
+  ),
+};

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

@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { HStack } from "../../components/ui/layout";
+import { ButtonV01 } from "../../components/ui/button-v01";
+import { Text } from "../../components/ui/typography";
+import { DemoBox, LAYOUT_DOCS_RULE } from "./demo";
+import {
+  alignControl,
+  hiddenArgs,
+  justifyControl,
+  spaceControl,
+} from "./controls";
+
+const meta = {
+  title: "Components/Layout/HStack",
+  component: HStack,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Horizontal stack. Arranges children left to right with a consistent gap.",
+          "",
+          LAYOUT_DOCS_RULE,
+          "",
+          "```tsx",
+          `import { HStack } from "@syscore/ui-library"`,
+          "",
+          '<HStack gap="md" align="center">',
+          "  <Item />",
+          "  <Item />",
+          "</HStack>",
+          "```",
+          "",
+          "`align` is the cross axis (vertical here), `justify` the main axis. Every prop is in the table below — try them in Controls.",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    ...hiddenArgs,
+    gap: spaceControl,
+    padding: spaceControl,
+    align: alignControl,
+    justify: justifyControl,
+    wrap: { control: "boolean" },
+    isScrollable: { control: "boolean" },
+  },
+  args: {
+    gap: "md",
+    align: "center",
+  },
+} satisfies Meta<typeof HStack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => (
+    <HStack {...args}>
+      <DemoBox label="Item 1" />
+      <DemoBox label="Item 2" />
+      <DemoBox label="Item 3" />
+    </HStack>
+  ),
+};
+
+export const SpaceBetween: Story = {
+  name: "Space between",
+  args: { justify: "between", align: "center", width: "100%", padding: "md" },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The page-header pattern: title on the left, actions on the right.",
+      },
+    },
+  },
+  render: (args) => (
+    <HStack {...args}>
+      <Text variant="heading-xxsmall">Page title</Text>
+      <HStack gap="xs">
+        <ButtonV01
+          typeVariant="utility"
+          appearance="solid"
+          hierarchy="secondary"
+          size="medium"
+        >
+          Cancel
+        </ButtonV01>
+        <ButtonV01
+          typeVariant="utility"
+          appearance="solid"
+          context="confirm"
+          size="medium"
+        >
+          Save
+        </ButtonV01>
+      </HStack>
+    </HStack>
+  ),
+};
+
+export const Wrap: Story = {
+  args: { gap: "sm", wrap: true, maxWidth: 448 },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "With `wrap`, items flow onto a new line instead of overflowing.",
+      },
+    },
+  },
+  render: (args) => (
+    <HStack {...args}>
+      {[
+        "Design",
+        "Engineering",
+        "Product",
+        "Marketing",
+        "Research",
+        "Data",
+      ].map((tag) => (
+        <DemoBox key={tag} label={tag} />
+      ))}
+    </HStack>
+  ),
+};

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

@@ -0,0 +1,287 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Grid,
+  HStack,
+  Layout,
+  LayoutContent,
+  LayoutFooter,
+  LayoutHeader,
+  LayoutPanel,
+  SPACE_NAMES,
+  VStack,
+} from "../../components/ui/layout";
+import { ButtonV01 } from "../../components/ui/button-v01";
+import { Card } from "../../components/ui/card";
+import { Text } from "../../components/ui/typography";
+import { LAYOUT_DOCS_RULE, ShellFrame } from "./demo";
+
+const meta = {
+  title: "Components/Layout/Layout",
+  component: Layout,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Page shell. Regions are children: `LayoutHeader`, `LayoutPanel`, `LayoutContent`, `LayoutFooter`.",
+          "",
+          LAYOUT_DOCS_RULE,
+          "",
+          "Use `HStack` / `VStack` / `Grid` *inside* slots. Do not use Layout for a simple row.",
+          "",
+          "`padding` (default `2xl`) is the horizontal inset for header and footer, and all-sides inset for content. Vertical chrome inset is `--layout-chrome-padding-block`. Panels carry their own `padding` (default `xl`).",
+          "",
+          '`height="fill"` (default) pins header and footer with the grid. `height="auto"` grows with content; the header is not sticky.',
+          "",
+          "`contentWidth` caps and centers the main column using `--layout-measure-*`. Below 768px, panels stack full-width above/below content.",
+          "",
+          "```tsx",
+          `import { Layout, LayoutHeader, LayoutPanel, LayoutContent, LayoutFooter } from "@syscore/ui-library"`,
+          "",
+          '<Layout padding="2xl">',
+          "  <LayoutHeader>Title</LayoutHeader>",
+          "  <LayoutPanel>Nav</LayoutPanel>",
+          "  <LayoutContent>Main</LayoutContent>",
+          "  <LayoutFooter>Status</LayoutFooter>",
+          "</Layout>",
+          "```",
+          "",
+          "Slots take no `className` or `style` — every dimension is a named prop backed by a `--layout-*` variable, so one change in the design system moves every app. Types and defaults are in the table below.",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    padding: { control: "select", options: [...SPACE_NAMES] },
+    height: { control: "select", options: ["fill", "auto"] },
+    contentWidth: { control: "select", options: ["sm", "md", "lg", "full"] },
+  },
+  args: {
+    padding: "2xl",
+    height: "fill",
+  },
+} satisfies Meta<typeof Layout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const nav = ["Dashboard", "Projects", "Reports", "Settings"];
+
+export const Default: Story = {
+  render: (args) => (
+    <ShellFrame>
+      <Layout {...args}>
+        <LayoutHeader>
+          <HStack justify="between" align="center" width="100%">
+            <Text variant="heading-xxsmall">WELL App</Text>
+            <ButtonV01
+              typeVariant="utility"
+              appearance="solid"
+              context="confirm"
+              size="medium"
+            >
+              Sign in
+            </ButtonV01>
+          </HStack>
+        </LayoutHeader>
+        <LayoutPanel>
+          <VStack gap="sm">
+            {nav.map((item) => (
+              <Text key={item} variant="body-small">
+                {item}
+              </Text>
+            ))}
+          </VStack>
+        </LayoutPanel>
+        <LayoutContent>
+          <VStack gap="xl">
+            <Text variant="heading-xsmall">Dashboard</Text>
+            <Grid columns={3} gap="lg">
+              {[
+                { label: "Projects", value: "2,847" },
+                { label: "Score", value: "94%" },
+                { label: "Issues", value: "18" },
+              ].map((item) => (
+                <Card key={item.label} variant="outlined">
+                  <VStack gap="xs">
+                    <Text variant="overline-small">{item.label}</Text>
+                    <Text variant="heading-xsmall">{item.value}</Text>
+                  </VStack>
+                </Card>
+              ))}
+            </Grid>
+          </VStack>
+        </LayoutContent>
+        <LayoutFooter>
+          <HStack justify="between" align="center" width="100%">
+            <Text variant="body-small">Last saved 2 minutes ago</Text>
+            <Text variant="body-small">Ready</Text>
+          </HStack>
+        </LayoutFooter>
+      </Layout>
+    </ShellFrame>
+  ),
+};
+
+export const StartAndEnd: Story = {
+  name: "Start and end panels",
+  render: (args) => (
+    <ShellFrame>
+      <Layout {...args}>
+        <LayoutHeader>
+          <HStack justify="between" align="center" width="100%">
+            <Text variant="heading-xxsmall">Inspector layout</Text>
+          </HStack>
+        </LayoutHeader>
+        <LayoutPanel>
+          <VStack gap="sm">
+            {nav.map((item) => (
+              <Text key={item} variant="body-small">
+                {item}
+              </Text>
+            ))}
+          </VStack>
+        </LayoutPanel>
+        <LayoutContent>
+          <VStack gap="sm">
+            <Text variant="heading-xsmall">Main content</Text>
+            <Text variant="body-small">
+              Select an item in the inspector to see details.
+            </Text>
+          </VStack>
+        </LayoutContent>
+        <LayoutPanel placement="end" width="narrow">
+          <VStack gap="sm">
+            <Text variant="overline-small">Inspector</Text>
+            <Text variant="body-small">Selected item details</Text>
+          </VStack>
+        </LayoutPanel>
+      </Layout>
+    </ShellFrame>
+  ),
+};
+
+export const HeaderAndContent: Story = {
+  name: "Header and content only",
+  render: (args) => (
+    <ShellFrame height={280}>
+      <Layout {...args}>
+        <LayoutHeader>
+          <HStack justify="between" align="center" width="100%">
+            <Text variant="heading-xxsmall">Settings</Text>
+          </HStack>
+        </LayoutHeader>
+        <LayoutContent>
+          <VStack gap="sm">
+            <Text variant="heading-xsmall">No sidebar</Text>
+            <Text variant="body-small">
+              Omit LayoutPanel when you do not need one. Content fills the
+              width.
+            </Text>
+          </VStack>
+        </LayoutContent>
+      </Layout>
+    </ShellFrame>
+  ),
+};
+
+export const CappedContent: Story = {
+  name: "Capped content",
+  args: { contentWidth: "sm" },
+  render: (args) => (
+    <ShellFrame height={280}>
+      <Layout {...args}>
+        <LayoutHeader>
+          <HStack justify="between" align="center" width="100%">
+            <Text variant="heading-xxsmall">Settings</Text>
+          </HStack>
+        </LayoutHeader>
+        <LayoutContent>
+          <VStack gap="sm">
+            <Text variant="heading-xsmall">Capped column</Text>
+            <Text variant="body-small">
+              contentWidth="sm" caps the main column at --layout-measure-sm and
+              centers it.
+            </Text>
+          </VStack>
+        </LayoutContent>
+      </Layout>
+    </ShellFrame>
+  ),
+};
+
+export const AutoHeight: Story = {
+  name: "Height auto",
+  args: { height: "auto" },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          '`height="auto"` grows with content instead of filling its parent. Header and footer are no longer pinned — they scroll with the page, so use it for document-style pages, not app shells.',
+      },
+    },
+  },
+  render: (args) => (
+    <div style={{ height: 280, overflowY: "auto" }} className="sb-shell-frame">
+      <Layout {...args}>
+        <LayoutHeader>
+          <HStack justify="between" align="center" width="100%">
+            <Text variant="heading-xxsmall">Scrolls away</Text>
+          </HStack>
+        </LayoutHeader>
+        <LayoutContent isScrollable={false}>
+          <VStack gap="md">
+            {Array.from({ length: 8 }, (_, i) => (
+              <Text key={i} variant="body-small">
+                Paragraph {i + 1} — the whole page scrolls, header included.
+              </Text>
+            ))}
+          </VStack>
+        </LayoutContent>
+        <LayoutFooter>
+          <Text variant="body-small">End of document</Text>
+        </LayoutFooter>
+      </Layout>
+    </div>
+  ),
+};
+
+export const MobileCollapse: Story = {
+  name: "Mobile (panels stack)",
+  parameters: {
+    viewport: { defaultViewport: "mobile1" },
+    docs: {
+      description: {
+        story:
+          "Below 768px the three-column grid becomes one column: start panel, content, end panel, each full width. Panels cap at 40vh so content is always reachable.",
+      },
+    },
+  },
+  render: (args) => (
+    <ShellFrame height={520}>
+      <Layout {...args}>
+        <LayoutHeader>
+          <Text variant="heading-xxsmall">Narrow viewport</Text>
+        </LayoutHeader>
+        <LayoutPanel>
+          <VStack gap="sm">
+            {nav.map((item) => (
+              <Text key={item} variant="body-small">
+                {item}
+              </Text>
+            ))}
+          </VStack>
+        </LayoutPanel>
+        <LayoutContent>
+          <Text variant="body-small">
+            The nav sits above this content instead of beside it.
+          </Text>
+        </LayoutContent>
+        <LayoutFooter>
+          <Text variant="body-small">Ready</Text>
+        </LayoutFooter>
+      </Layout>
+    </ShellFrame>
+  ),
+};

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

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  HStack,
+  Layout,
+  LayoutContent,
+  LayoutHeader,
+  VStack,
+} from "../../components/ui/layout";
+import { Text } from "../../components/ui/typography";
+import { DemoBox, ShellFrame } from "./demo";
+
+const meta = {
+  title: "Components/Layout/LayoutContent",
+  component: LayoutContent,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Main region of `Layout`. Renders as `<main>`. All-sides inset comes from `Layout padding`.",
+          "",
+          '`isScrollable` (default `true`) scrolls this region only, so header and footer stay put when Layout `height="fill"`.',
+          "",
+          "```tsx",
+          "<LayoutContent isScrollable>",
+          '  <VStack gap="md">…</VStack>',
+          "</LayoutContent>",
+          "```",
+          "",
+          "Takes no `className` or `style` — sizing comes from `Layout` and `--layout-*` variables, so a design-system change reaches every app.",
+          "",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    isScrollable: { control: "boolean" },
+    as: { control: "select", options: ["main", "div"] },
+  },
+  args: {
+    isScrollable: true,
+  },
+} satisfies Meta<typeof LayoutContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Scrolls",
+  render: (args) => (
+    <ShellFrame height={320}>
+      <Layout>
+        <LayoutHeader>
+          <HStack justify="between" align="center" width="100%">
+            <Text variant="heading-xxsmall">Scroll the content</Text>
+          </HStack>
+        </LayoutHeader>
+        <LayoutContent {...args}>
+          <VStack gap="md">
+            {Array.from({ length: 8 }, (_, i) => (
+              <DemoBox key={i} label={`Block ${i + 1}`} />
+            ))}
+          </VStack>
+        </LayoutContent>
+      </Layout>
+    </ShellFrame>
+  ),
+};
+
+export const NotScrollable: Story = {
+  args: { isScrollable: false },
+  render: (args) => (
+    <ShellFrame height={320}>
+      <Layout>
+        <LayoutHeader>
+          <HStack justify="between" align="center" width="100%">
+            <Text variant="heading-xxsmall">No isolated scroll</Text>
+          </HStack>
+        </LayoutHeader>
+        <LayoutContent {...args}>
+          <VStack gap="md">
+            {Array.from({ length: 8 }, (_, i) => (
+              <DemoBox key={i} label={`Block ${i + 1}`} />
+            ))}
+          </VStack>
+        </LayoutContent>
+      </Layout>
+    </ShellFrame>
+  ),
+};

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

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  HStack,
+  Layout,
+  LayoutContent,
+  LayoutFooter,
+  LayoutHeader,
+  VStack,
+} from "../../components/ui/layout";
+import { Text } from "../../components/ui/typography";
+import { DemoBox, ShellFrame } from "./demo";
+
+const meta = {
+  title: "Components/Layout/LayoutFooter",
+  component: LayoutFooter,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: [
+          "Bottom region of `Layout`. Put `HStack` inside for status and actions.",
+          "",
+          'Pinned by Layout’s grid while `height="fill"` and content is `isScrollable`. Not CSS `position: sticky`.',
+          "",
+          "Horizontal inset comes from `Layout padding`; vertical inset from `--layout-chrome-padding-block`. Height floor is `--layout-footer-min-height`.",
+          "",
+          "```tsx",
+          "<LayoutFooter>",
+          '  <HStack justify="between" align="center" width="100%">',
+          "    <Text>Status</Text>",
+          "  </HStack>",
+          "</LayoutFooter>",
+          "```",
+          "",
+          "Takes no `className` or `style` — sizing comes from `Layout` and `--layout-*` variables, so a design-system change reaches every app.",
+          "",
+        ].join("\n"),
+      },
+    },
+  },
+  argTypes: {
+    as: { control: "select", options: ["footer", "div"] },
+  },
+} satisfies Meta<typeof LayoutFooter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  name: "Pinned while content scrolls",
+  args: { as: "footer" },
+  render: (args) => (
+    <ShellFrame height={320}>
+      <Layout>
+        <LayoutHeader>
+          <HStack justify="between" align="center" width="100%">
+            <Text variant="heading-xxsmall">Project</Text>
+          </HStack>
+        </LayoutHeader>
+        <LayoutContent>
+          <VStack gap="md">
+            {Array.from({ length: 8 }, (_, i) => (
+              <DemoBox key={i} label={`Block ${i + 1}`} />
+            ))}
+          </VStack>
+        </LayoutContent>
+        <LayoutFooter {...args}>
+          <HStack justify="between" align="center" width="100%">
+            <Text variant="body-small">Last saved 2 minutes ago</Text>
+            <Text variant="body-small">Ready</Text>
+          </HStack>
+        </LayoutFooter>
+      </Layout>
+    </ShellFrame>
+  ),
+};