@syscore/ui-library 1.25.0 → 2.0.0

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: "UI/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>
+    );
+  },
+};