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

package/client/ui/BottomNavigation/bottom-navigation.stories.tsx

@@ -0,0 +1,285 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  BottomNavigation,
+  BottomNavigationItem,
+  BottomNavigationGroup,
+} from "../../components/ui/bottom-navigation";
+import {
+  History,
+  Heart,
+  MapPin,
+  Tv,
+  Music,
+  BookOpen,
+  Image,
+} from "lucide-react";
+
+const meta = {
+  title: "Draft/BottomNavigation",
+  component: BottomNavigation,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    grow: { control: "boolean" },
+    horizontal: { control: "boolean" },
+    shift: { control: "boolean" },
+    active: { control: "boolean" },
+    elevated: { control: "boolean" },
+    color: { control: "color" },
+  },
+} satisfies Meta<typeof BottomNavigation>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// ─── Wrapper helper — gives stories a realistic page height ──────────────────
+function PageWrapper({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        position: "relative",
+        height: 200,
+        overflow: "hidden",
+        border: "1px solid #e5e7eb",
+        borderRadius: 8,
+        background: "#f9f9fa",
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+// ─── Default ─────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState(0);
+    return (
+      <PageWrapper>
+        <BottomNavigation value={value} onChange={(v) => setValue(Number(v))}>
+          <BottomNavigationGroup>
+            <BottomNavigationItem value={0}>
+              <History size={20} />
+              <span>Recent</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={1}>
+              <Heart size={20} />
+              <span>Favorites</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={2}>
+              <MapPin size={20} />
+              <span>Nearby</span>
+            </BottomNavigationItem>
+          </BottomNavigationGroup>
+        </BottomNavigation>
+      </PageWrapper>
+    );
+  },
+};
+
+// ─── Color ───────────────────────────────────────────────────────────────────
+// The `color` prop applies the active highlight color to the selected item.
+
+export const Color: Story = {
+  render: () => {
+    const [value, setValue] = useState(1);
+    return (
+      <PageWrapper>
+        <BottomNavigation
+          value={value}
+          onChange={(v) => setValue(Number(v))}
+          color="var(--color-cyan-800, #0f748a)"
+        >
+          <BottomNavigationGroup>
+            <BottomNavigationItem value={0}>
+              <History size={20} />
+              <span>Recents</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={1}>
+              <Heart size={20} />
+              <span>Favorites</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={2}>
+              <MapPin size={20} />
+              <span>Nearby</span>
+            </BottomNavigationItem>
+          </BottomNavigationGroup>
+        </BottomNavigation>
+      </PageWrapper>
+    );
+  },
+};
+
+// ─── Grow ─────────────────────────────────────────────────────────────────────
+// Each item fills all available space (max 168px per MD spec).
+
+export const Grow: Story = {
+  render: () => {
+    const [value, setValue] = useState(1);
+    return (
+      <PageWrapper>
+        <BottomNavigation
+          value={value}
+          onChange={(v) => setValue(Number(v))}
+          color="var(--color-cyan-800, #0f748a)"
+          grow
+        >
+          <BottomNavigationGroup>
+            <BottomNavigationItem value={0}>
+              <History size={20} />
+              <span>Recents</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={1}>
+              <Heart size={20} />
+              <span>Favorites</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={2}>
+              <MapPin size={20} />
+              <span>Nearby</span>
+            </BottomNavigationItem>
+          </BottomNavigationGroup>
+        </BottomNavigation>
+      </PageWrapper>
+    );
+  },
+};
+
+// ─── Horizontal ───────────────────────────────────────────────────────────────
+// Icon and label sit side-by-side instead of stacked.
+
+export const Horizontal: Story = {
+  render: () => {
+    const [value, setValue] = useState(1);
+    return (
+      <PageWrapper>
+        <BottomNavigation
+          value={value}
+          onChange={(v) => setValue(Number(v))}
+          color="var(--color-blue-600, #2e74ad)"
+          horizontal
+        >
+          <BottomNavigationGroup>
+            <BottomNavigationItem value={0}>
+              <History size={20} />
+              <span>Recents</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={1}>
+              <Heart size={20} />
+              <span>Favorites</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={2}>
+              <MapPin size={20} />
+              <span>Nearby</span>
+            </BottomNavigationItem>
+          </BottomNavigationGroup>
+        </BottomNavigation>
+      </PageWrapper>
+    );
+  },
+};
+
+// ─── Shift ────────────────────────────────────────────────────────────────────
+// Only the active item shows its label; inactive items show icon only.
+// The background color changes per active item using the color prop.
+
+export const Shift: Story = {
+  render: () => {
+    const colors = ["#f97316", "#84cc16", "#0ea5e9", "#a855f7"];
+    const [value, setValue] = useState(1);
+    return (
+      <PageWrapper>
+        <BottomNavigation
+          value={value}
+          onChange={(v) => setValue(Number(v))}
+          color="#ffffff"
+          shift
+          style={{ backgroundColor: colors[value] }}
+        >
+          <BottomNavigationGroup>
+            <BottomNavigationItem value={0}>
+              <Tv size={20} />
+              <span>Video</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={1}>
+              <Music size={20} />
+              <span>Music</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={2}>
+              <BookOpen size={20} />
+              <span>Book</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={3}>
+              <Image size={20} />
+              <span>Image</span>
+            </BottomNavigationItem>
+          </BottomNavigationGroup>
+        </BottomNavigation>
+      </PageWrapper>
+    );
+  },
+};
+
+// ─── Toggle ───────────────────────────────────────────────────────────────────
+// The `active` prop controls whether the nav bar is visible.
+// When false the bar slides off-screen.
+
+export const Toggle: Story = {
+  render: () => {
+    const [value, setValue] = useState(0);
+    const [visible, setVisible] = useState(true);
+    return (
+      <PageWrapper>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            paddingTop: "2rem",
+          }}
+        >
+          <button
+            type="button"
+            onClick={() => setVisible((v) => !v)}
+            style={{
+              padding: "0.5rem 1.25rem",
+              border: "1px solid var(--color-blue-600, #2e74ad)",
+              borderRadius: 9999,
+              color: "var(--color-blue-600, #2e74ad)",
+              background: "transparent",
+              cursor: "pointer",
+              fontWeight: 600,
+              fontSize: "0.875rem",
+            }}
+          >
+            Toggle Navigation
+          </button>
+        </div>
+        <BottomNavigation
+          value={value}
+          onChange={(v) => setValue(Number(v))}
+          color="var(--color-blue-600, #2e74ad)"
+          active={visible}
+        >
+          <BottomNavigationGroup>
+            <BottomNavigationItem value={0}>
+              <History size={20} />
+              <span>Recents</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={1}>
+              <Heart size={20} />
+              <span>Favorites</span>
+            </BottomNavigationItem>
+            <BottomNavigationItem value={2}>
+              <MapPin size={20} />
+              <span>Nearby</span>
+            </BottomNavigationItem>
+          </BottomNavigationGroup>
+        </BottomNavigation>
+      </PageWrapper>
+    );
+  },
+};

package/client/ui/BreadcrumbTrail/BreadcrumbTrail.stories.tsx

@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  BreadcrumbTrail,
+  BreadcrumbTrailCode,
+  BreadcrumbTrailEllipsis,
+  BreadcrumbTrailHome,
+  BreadcrumbTrailItem,
+  BreadcrumbTrailLink,
+  BreadcrumbTrailList,
+  BreadcrumbTrailPage,
+  BreadcrumbTrailSeparator,
+} from "../../components/ui/breadcrumb-trail";
+import { IconConceptCommunity } from "../../components/icons/ConceptIcons";
+
+const meta = {
+  title: "Components/Breadcrumb",
+  component: BreadcrumbTrail,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component: [
+          "Navigation trail. Existing `UI/Breadcrumb` is unchanged.",
+          "",
+          "Three variants: **Standard** (concept + theme/strategy codes),",
+          "**Directory** (home + current page), and **Account** (home + text path,",
+          "with an ellipsis collapse for deep trees).",
+          "",
+          "---",
+          "",
+          "## Import",
+          "",
+          "```tsx",
+          `import {`,
+          `  BreadcrumbTrail, BreadcrumbTrailList, BreadcrumbTrailItem,`,
+          `  BreadcrumbTrailLink, BreadcrumbTrailPage, BreadcrumbTrailSeparator,`,
+          `  BreadcrumbTrailHome, BreadcrumbTrailEllipsis, BreadcrumbTrailCode,`,
+          `} from "@syscore/ui-library"`,
+          "```",
+          "",
+          "## How to use",
+          "",
+          "Compose the trail like HTML: list → items → link or current page, with a separator",
+          "between items. The last crumb is `BreadcrumbTrailPage` (not a link).",
+          "",
+          "```tsx",
+          "<BreadcrumbTrail>",
+          "  <BreadcrumbTrailList>",
+          "    <BreadcrumbTrailItem>",
+          `      <BreadcrumbTrailLink href="/" aria-label="Home">`,
+          "        <BreadcrumbTrailHome />",
+          "      </BreadcrumbTrailLink>",
+          "    </BreadcrumbTrailItem>",
+          "    <BreadcrumbTrailSeparator />",
+          "    <BreadcrumbTrailItem>",
+          `      <BreadcrumbTrailLink href="/projects">Projects</BreadcrumbTrailLink>`,
+          "    </BreadcrumbTrailItem>",
+          "    <BreadcrumbTrailSeparator />",
+          "    <BreadcrumbTrailItem>",
+          "      <BreadcrumbTrailPage>Overview</BreadcrumbTrailPage>",
+          "    </BreadcrumbTrailItem>",
+          "  </BreadcrumbTrailList>",
+          "</BreadcrumbTrail>",
+          "```",
+          "",
+          "| Situation | Use |",
+          "|-----------|-----|",
+          "| Home glyph | `BreadcrumbTrailHome` |",
+          "| Collapsed middle of a long path | `BreadcrumbTrailEllipsis` |",
+          "| Theme code badge | `BreadcrumbTrailCode variant=\"theme\"` |",
+          "| Strategy code badge | `BreadcrumbTrailCode variant=\"strategy\"` |",
+          "| Concept mark | `IconConceptCommunity` inside a link |",
+          "",
+          "Do not use the older `Breadcrumb` from `UI/Breadcrumb` —",
+          "that compound is the previous shadcn trail.",
+        ].join("\n"),
+      },
+    },
+  },
+} satisfies Meta<typeof BreadcrumbTrail>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Standard: Story = {
+  name: "Standard · Icon only",
+  render: () => (
+    <BreadcrumbTrail>
+      <BreadcrumbTrailList>
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailLink href="/" aria-label="Community">
+            <IconConceptCommunity active />
+          </BreadcrumbTrailLink>
+        </BreadcrumbTrailItem>
+        <BreadcrumbTrailSeparator />
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailLink href="/theme">
+            <BreadcrumbTrailCode variant="theme">C#</BreadcrumbTrailCode>
+          </BreadcrumbTrailLink>
+        </BreadcrumbTrailItem>
+        <BreadcrumbTrailSeparator />
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailCode variant="strategy">C#.#</BreadcrumbTrailCode>
+        </BreadcrumbTrailItem>
+      </BreadcrumbTrailList>
+    </BreadcrumbTrail>
+  ),
+};
+
+export const Directory: Story = {
+  name: "Directory · Icon + Text",
+  render: () => (
+    <BreadcrumbTrail>
+      <BreadcrumbTrailList>
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailLink href="/" aria-label="Home">
+            <BreadcrumbTrailHome />
+          </BreadcrumbTrailLink>
+        </BreadcrumbTrailItem>
+        <BreadcrumbTrailSeparator />
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailPage>Item</BreadcrumbTrailPage>
+        </BreadcrumbTrailItem>
+      </BreadcrumbTrailList>
+    </BreadcrumbTrail>
+  ),
+};
+
+export const Account: Story = {
+  name: "Account · Icon + Text",
+  render: () => (
+    <BreadcrumbTrail>
+      <BreadcrumbTrailList>
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailLink href="/" aria-label="Home">
+            <BreadcrumbTrailHome />
+          </BreadcrumbTrailLink>
+        </BreadcrumbTrailItem>
+        <BreadcrumbTrailSeparator />
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailLink href="/item-1">Item 1</BreadcrumbTrailLink>
+        </BreadcrumbTrailItem>
+        <BreadcrumbTrailSeparator />
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailLink href="/item-2">Item 2</BreadcrumbTrailLink>
+        </BreadcrumbTrailItem>
+        <BreadcrumbTrailSeparator />
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailPage>Item 3</BreadcrumbTrailPage>
+        </BreadcrumbTrailItem>
+      </BreadcrumbTrailList>
+    </BreadcrumbTrail>
+  ),
+};
+
+export const AccountCollapsed: Story = {
+  name: "Account · Icon + Text + Ellipsis",
+  render: () => (
+    <BreadcrumbTrail>
+      <BreadcrumbTrailList>
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailLink href="/" aria-label="Home">
+            <BreadcrumbTrailHome />
+          </BreadcrumbTrailLink>
+        </BreadcrumbTrailItem>
+        <BreadcrumbTrailSeparator />
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailEllipsis />
+        </BreadcrumbTrailItem>
+        <BreadcrumbTrailSeparator />
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailLink href="/item-a">Item 1</BreadcrumbTrailLink>
+        </BreadcrumbTrailItem>
+        <BreadcrumbTrailSeparator />
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailLink href="/item-b">Item 1</BreadcrumbTrailLink>
+        </BreadcrumbTrailItem>
+        <BreadcrumbTrailSeparator />
+        <BreadcrumbTrailItem>
+          <BreadcrumbTrailPage>Item 1</BreadcrumbTrailPage>
+        </BreadcrumbTrailItem>
+      </BreadcrumbTrailList>
+    </BreadcrumbTrail>
+  ),
+};
+
+const CONCEPTS = [
+  ["mind", "M"],
+  ["community", "C"],
+  ["movement", "V"],
+  ["water", "W"],
+  ["air", "A"],
+  ["light", "L"],
+  ["thermal-comfort", "T"],
+  ["nourishment", "N"],
+  ["sound", "S"],
+  ["materials", "X"],
+  ["inactive", "X"],
+] as const;
+
+export const CodePalette: Story = {
+  name: "Code badges · All concepts",
+  render: () => (
+    <div style={{ display: "grid", gap: 24 }}>
+      <div>
+        <p style={{ marginBottom: 8, fontSize: 12, opacity: 0.6 }}>Theme</p>
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 24 }}>
+          {CONCEPTS.map(([concept, prefix]) => (
+            <BreadcrumbTrailCode key={concept} variant="theme" concept={concept}>
+              {prefix}#
+            </BreadcrumbTrailCode>
+          ))}
+        </div>
+      </div>
+      <div>
+        <p style={{ marginBottom: 8, fontSize: 12, opacity: 0.6 }}>Strategy</p>
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 24 }}>
+          {CONCEPTS.map(([concept, prefix]) => (
+            <BreadcrumbTrailCode
+              key={concept}
+              variant="strategy"
+              concept={concept}
+            >
+              {prefix}#.#
+            </BreadcrumbTrailCode>
+          ))}
+        </div>
+      </div>
+    </div>
+  ),
+};

package/client/ui/Button.stories.tsx

@@ -6,7 +6,7 @@ import { UtilityChevronDown } from "../components/icons/UtilityChevronDown";
 import { NavAccount } from "../components/icons/NavAccount";
 
 const meta = {
-  title: "Review/Button",
+  title: "Draft/Button Legacy",
   component: Button,
   tags: ["autodocs"],
   parameters: {