@syscore/ui-library 1.27.3 → 2.0.0

package/client/ui/AppBar/app-bar.stories.tsx

@@ -0,0 +1,280 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  AppBar,
+  AppBarNavIcon,
+  AppBarTitle,
+  AppBarPrepend,
+  AppBarAppend,
+  AppBarContent,
+} from "../../components/ui/app-bar";
+import {
+  Search,
+  Bell,
+  ArrowLeft,
+  MoreVertical,
+  Heart,
+} from "lucide-react";
+
+const meta = {
+  title: "UI/AppBar",
+  component: AppBar,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+  argTypes: {
+    collapse: { control: "boolean" },
+    rounded: { control: "boolean" },
+    elevated: { control: "boolean" },
+    flat: { control: "boolean" },
+    color: {
+      control: "select",
+      options: ["default", "primary", "transparent"],
+    },
+    position: {
+      control: "select",
+      options: ["fixed", "sticky", "relative", "static"],
+    },
+    density: {
+      control: "select",
+      options: ["default", "comfortable", "compact", "prominent"],
+    },
+    image: { control: "text" },
+    imageOverlay: { control: "text" },
+  },
+} satisfies Meta<typeof AppBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// ─── Default ─────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: () => (
+    <AppBar position="relative">
+      <AppBarPrepend>
+        <AppBarNavIcon />
+      </AppBarPrepend>
+      <AppBarTitle>Application Bar</AppBarTitle>
+    </AppBar>
+  ),
+};
+
+// ─── Collapse ────────────────────────────────────────────────────────────────
+
+export const Collapse: Story = {
+  render: () => (
+    <AppBar position="relative" collapse>
+      <AppBarPrepend>
+        <AppBarNavIcon />
+      </AppBarPrepend>
+      <AppBarTitle>Application Bar</AppBarTitle>
+    </AppBar>
+  ),
+};
+
+// ─── Rounded ─────────────────────────────────────────────────────────────────
+
+export const Rounded: Story = {
+  render: () => (
+    <AppBar position="relative" rounded>
+      <AppBarPrepend>
+        <AppBarNavIcon />
+      </AppBarPrepend>
+      <AppBarTitle>Application Bar</AppBarTitle>
+    </AppBar>
+  ),
+};
+
+// ─── With Actions ────────────────────────────────────────────────────────────
+
+export const WithActions: Story = {
+  render: () => (
+    <AppBar position="relative">
+      <AppBarPrepend>
+        <AppBarNavIcon />
+      </AppBarPrepend>
+      <AppBarTitle>Application Bar</AppBarTitle>
+      <AppBarAppend>
+        <button
+          type="button"
+          className="app-bar-action-btn"
+          aria-label="Search"
+        >
+          <Search size={20} />
+        </button>
+        <button
+          type="button"
+          className="app-bar-action-btn"
+          aria-label="Notifications"
+        >
+          <Bell size={20} />
+        </button>
+      </AppBarAppend>
+    </AppBar>
+  ),
+};
+
+// ─── Back Navigation ─────────────────────────────────────────────────────────
+
+export const BackNavigation: Story = {
+  render: () => (
+    <AppBar position="relative">
+      <AppBarPrepend>
+        <AppBarNavIcon icon={<ArrowLeft size={20} />} aria-label="Go back" />
+      </AppBarPrepend>
+      <AppBarTitle>Page Title</AppBarTitle>
+      <AppBarAppend>
+        <button
+          type="button"
+          className="app-bar-action-btn"
+          aria-label="More options"
+        >
+          <MoreVertical size={20} />
+        </button>
+      </AppBarAppend>
+    </AppBar>
+  ),
+};
+
+// ─── With Search Content ──────────────────────────────────────────────────────
+
+export const WithSearchContent: Story = {
+  render: () => (
+    <AppBar position="relative">
+      <AppBarPrepend>
+        <AppBarNavIcon />
+      </AppBarPrepend>
+      <AppBarContent>
+        <div className="app-bar-search">
+          <Search size={16} className="app-bar-search-icon" />
+          <input
+            type="text"
+            placeholder="Search…"
+            className="app-bar-search-input"
+          />
+        </div>
+      </AppBarContent>
+      <AppBarAppend>
+        <button
+          type="button"
+          className="app-bar-action-btn"
+          aria-label="Notifications"
+        >
+          <Bell size={20} />
+        </button>
+      </AppBarAppend>
+    </AppBar>
+  ),
+};
+
+// ─── Density ─────────────────────────────────────────────────────────────────
+
+export const Density: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
+      {(
+        [
+          { density: "default", label: "default (64px)" },
+          { density: "comfortable", label: "comfortable (56px)" },
+          { density: "compact", label: "compact (48px)" },
+        ] as const
+      ).map(({ density, label }) => (
+        <div key={density}>
+          <p
+            style={{
+              fontSize: "0.75rem",
+              color: "#71747d",
+              marginBottom: "0.25rem",
+              paddingLeft: "0.5rem",
+            }}
+          >
+            density="{label}"
+          </p>
+          <AppBar position="relative" color="primary" density={density}>
+            <AppBarPrepend>
+              <AppBarNavIcon />
+            </AppBarPrepend>
+            <AppBarTitle>Photos</AppBarTitle>
+            <AppBarAppend>
+              <button
+                type="button"
+                className="app-bar-action-btn"
+                aria-label="More options"
+              >
+                <MoreVertical size={20} />
+              </button>
+            </AppBarAppend>
+          </AppBar>
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+// ─── Prominent ───────────────────────────────────────────────────────────────
+// density="prominent" gives a taller bar (128px) where the title sits at
+// the bottom — ideal for longer titles or stronger visual presence.
+
+export const Prominent: Story = {
+  render: () => (
+    <AppBar position="relative" color="primary" density="prominent">
+      <AppBarPrepend>
+        <AppBarNavIcon />
+      </AppBarPrepend>
+      <AppBarTitle>My Recent Trips</AppBarTitle>
+      <AppBarAppend>
+        <button
+          type="button"
+          className="app-bar-action-btn"
+          aria-label="More options"
+        >
+          <MoreVertical size={20} />
+        </button>
+      </AppBarAppend>
+    </AppBar>
+  ),
+};
+
+// ─── Image ───────────────────────────────────────────────────────────────────
+// The `image` prop sets a background image on the bar.
+// `imageOverlay` adds a gradient on top for legibility.
+
+export const Image: Story = {
+  render: () => (
+    <AppBar
+      position="relative"
+      image="https://picsum.photos/1920/1080?random"
+      imageOverlay="to top right, rgba(19,84,122,.8), rgba(128,208,199,.8)"
+    >
+      <AppBarPrepend>
+        <AppBarNavIcon />
+      </AppBarPrepend>
+      <AppBarTitle>Title</AppBarTitle>
+      <AppBarAppend>
+        <button
+          type="button"
+          className="app-bar-action-btn"
+          aria-label="Search"
+        >
+          <Search size={20} />
+        </button>
+        <button
+          type="button"
+          className="app-bar-action-btn"
+          aria-label="Favourite"
+        >
+          <Heart size={20} />
+        </button>
+        <button
+          type="button"
+          className="app-bar-action-btn"
+          aria-label="More options"
+        >
+          <MoreVertical size={20} />
+        </button>
+      </AppBarAppend>
+    </AppBar>
+  ),
+};

package/client/ui/Banner/banner.stories.tsx

@@ -0,0 +1,238 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import {
+  Banner,
+  BannerIcon,
+  BannerText,
+  BannerTitle,
+  BannerDescription,
+  BannerAction,
+} from "../../components/ui/banner";
+
+// ─── Inline icons ─────────────────────────────────────────────────────────────
+
+function IconInfo() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="8" x2="12" y2="12" />
+      <line x1="12" y1="16" x2="12.01" y2="16" />
+    </svg>
+  );
+}
+function IconCheckCircle() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+  );
+}
+function IconAlertTriangle() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+  );
+}
+function IconAlertCircle() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="8" x2="12" y2="12" />
+      <line x1="12" y1="16" x2="12.01" y2="16" />
+    </svg>
+  );
+}
+function IconMegaphone() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M3 11l19-9-9 19-2-8-8-2z" />
+    </svg>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+const meta = {
+  title: "UI/Banner",
+  component: Banner,
+  tags: ["autodocs"],
+  parameters: { layout: "fullscreen" },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "info", "success", "warning", "destructive"],
+    },
+    sticky: { control: "boolean" },
+  },
+} satisfies Meta<typeof Banner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ─── Title Only ───────────────────────────────────────────────────────────────
+// Minimal: just a title, no icon or description.
+
+export const TitleOnly: Story = {
+  render: () => (
+    <Banner variant="info">
+      <BannerText>
+        <BannerTitle>Scheduled maintenance on Sunday at 2 AM UTC.</BannerTitle>
+      </BannerText>
+    </Banner>
+  ),
+};
+
+// ─── With Icon ────────────────────────────────────────────────────────────────
+// Icon + title — the most common single-line pattern.
+
+export const WithIcon: Story = {
+  render: () => (
+    <Banner variant="info">
+      <BannerIcon><IconInfo /></BannerIcon>
+      <BannerText>
+        <BannerTitle>Version 2.4.0 is ready to install.</BannerTitle>
+      </BannerText>
+    </Banner>
+  ),
+};
+
+// ─── With Description ─────────────────────────────────────────────────────────
+// Icon + title + supporting description.
+
+export const WithDescription: Story = {
+  render: () => (
+    <Banner variant="warning">
+      <BannerIcon><IconAlertTriangle /></BannerIcon>
+      <BannerText>
+        <BannerTitle>Subscription expiring</BannerTitle>
+        <BannerDescription>Your plan expires in 3 days. Renew to avoid interruption.</BannerDescription>
+      </BannerText>
+    </Banner>
+  ),
+};
+
+// ─── With Action ──────────────────────────────────────────────────────────────
+// Icon + title + description + call-to-action button.
+
+export const WithAction: Story = {
+  render: () => (
+    <Banner variant="info">
+      <BannerIcon><IconInfo /></BannerIcon>
+      <BannerText>
+        <BannerTitle>New terms of service</BannerTitle>
+        <BannerDescription>Please review and accept our updated terms before June 30.</BannerDescription>
+      </BannerText>
+      <BannerAction>Review now</BannerAction>
+    </Banner>
+  ),
+};
+
+// ─── With Close ───────────────────────────────────────────────────────────────
+// Icon + title + dismiss button (no action).
+
+function WithCloseBanner() {
+  const [visible, setVisible] = useState(true);
+  if (!visible) {
+    return (
+      <div style={{ padding: "1rem", fontSize: "0.875rem" }}>
+        Banner dismissed.{" "}
+        <button type="button" onClick={() => setVisible(true)} style={{ textDecoration: "underline", background: "none", border: "none", cursor: "pointer" }}>
+          Show again
+        </button>
+      </div>
+    );
+  }
+  return (
+    <Banner variant="info" onClose={() => setVisible(false)}>
+      <BannerIcon><IconInfo /></BannerIcon>
+      <BannerText>
+        <BannerTitle>Cookie notice</BannerTitle>
+        <BannerDescription>We use cookies to improve your experience.</BannerDescription>
+      </BannerText>
+    </Banner>
+  );
+}
+
+export const WithClose: Story = {
+  render: () => <WithCloseBanner />,
+};
+
+// ─── Full Kit ─────────────────────────────────────────────────────────────────
+// All slots: icon + title + description + action + close button.
+
+function FullKitBanner() {
+  const [visible, setVisible] = useState(true);
+  if (!visible) {
+    return (
+      <div style={{ padding: "1rem", fontSize: "0.875rem" }}>
+        Banner dismissed.{" "}
+        <button type="button" onClick={() => setVisible(true)} style={{ textDecoration: "underline", background: "none", border: "none", cursor: "pointer" }}>
+          Show again
+        </button>
+      </div>
+    );
+  }
+  return (
+    <Banner variant="warning" onClose={() => setVisible(false)}>
+      <BannerIcon><IconAlertTriangle /></BannerIcon>
+      <BannerText>
+        <BannerTitle>Subscription expiring soon</BannerTitle>
+        <BannerDescription>Your plan expires in 3 days. Renew now to avoid losing access.</BannerDescription>
+      </BannerText>
+      <BannerAction>Renew plan</BannerAction>
+    </Banner>
+  );
+}
+
+export const FullKit: Story = {
+  render: () => <FullKitBanner />,
+};
+
+// ─── All Variants ─────────────────────────────────────────────────────────────
+// All 5 variants at a glance using the WithDescription slot combination.
+
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+      <Banner>
+        <BannerIcon><IconMegaphone /></BannerIcon>
+        <BannerText>
+          <BannerTitle>Default</BannerTitle>
+          <BannerDescription>General announcement banner.</BannerDescription>
+        </BannerText>
+      </Banner>
+      <Banner variant="info">
+        <BannerIcon><IconInfo /></BannerIcon>
+        <BannerText>
+          <BannerTitle>Info</BannerTitle>
+          <BannerDescription>Informational message for the user.</BannerDescription>
+        </BannerText>
+      </Banner>
+      <Banner variant="success">
+        <BannerIcon><IconCheckCircle /></BannerIcon>
+        <BannerText>
+          <BannerTitle>Success</BannerTitle>
+          <BannerDescription>Action completed successfully.</BannerDescription>
+        </BannerText>
+      </Banner>
+      <Banner variant="warning">
+        <BannerIcon><IconAlertTriangle /></BannerIcon>
+        <BannerText>
+          <BannerTitle>Warning</BannerTitle>
+          <BannerDescription>Something needs your attention.</BannerDescription>
+        </BannerText>
+      </Banner>
+      <Banner variant="destructive">
+        <BannerIcon><IconAlertCircle /></BannerIcon>
+        <BannerText>
+          <BannerTitle>Destructive</BannerTitle>
+          <BannerDescription>A critical error has occurred.</BannerDescription>
+        </BannerText>
+      </Banner>
+    </div>
+  ),
+};