@syscore/ui-library 1.1.9 → 1.1.11

package/client/hooks/UseTabs.tsx

@@ -0,0 +1,35 @@
+import { useState, useCallback } from "react";
+
+export type Tab = {
+  label: string;
+  value: string;
+  subRoutes?: unknown;
+};
+
+interface UseTabsProps {
+  tabs: Tab[];
+  initialTabId: string;
+}
+
+export function useTabs({ tabs, initialTabId }: UseTabsProps) {
+  const initialIndex = tabs.findIndex((tab) => tab.value === initialTabId);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(
+    initialIndex >= 0 ? initialIndex : 0
+  );
+
+  const setSelectedTab = useCallback(([index, direction]: [number, number]) => {
+    setSelectedTabIndex(index);
+  }, []);
+
+  const selectedTab = tabs[selectedTabIndex] || tabs[0];
+
+  return {
+    tabProps: {
+      tabs,
+      selectedTabIndex,
+      setSelectedTab,
+    },
+    selectedTab,
+  };
+}
+

package/client/hooks/use-mobile.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+    undefined,
+  );
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/client/hooks/use-segmented-control.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect, useCallback } from "react";
+
+export interface UseSegmentedControlOptions<T extends string> {
+  value?: T;
+  defaultValue?: T;
+  onValueChange?: (value: T) => void;
+}
+
+export function useSegmentedControl<T extends string>({
+  value,
+  defaultValue,
+  onValueChange,
+}: UseSegmentedControlOptions<T>) {
+  const [internalValue, setInternalValue] = useState<T | undefined>(
+    value ?? defaultValue,
+  );
+
+  // Sync with controlled value
+  useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  const handleValueChange = useCallback(
+    (newValue: T) => {
+      if (value === undefined) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [value, onValueChange],
+  );
+
+  const currentValue = value ?? internalValue;
+
+  return {
+    value: currentValue,
+    onValueChange: handleValueChange,
+  };
+}
+

package/client/hooks/use-toast.ts

@@ -0,0 +1,188 @@
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };

package/client/pages/Index.tsx

@@ -0,0 +1,88 @@
+import { useMemo } from "react";
+import { Button } from "../ui/Button";
+
+export default function Index() {
+  const commands = useMemo(
+    () => [
+      { label: "Start Storybook", cmd: "pnpm storybook" },
+      { label: "Build UI library", cmd: "pnpm build:ui" },
+    ],
+    [],
+  );
+
+  return (
+    <div className="min-h-screen bg-[radial-gradient(60%_80%_at_50%_-20%,hsl(252_95%_90%/.6),transparent_70%),linear-gradient(to_bottom_right,hsl(258_90%_98%),hsl(240_20%_98%))]">
+      <section className="px-6 py-20 md:py-28">
+        <div className="mx-auto max-w-6xl text-center">
+          <span className="inline-flex items-center gap-2 rounded-full bg-violet-100 px-3 py-1 text-xs font-semibold text-violet-700 ring-1 ring-inset ring-violet-200">
+            React UI Library
+          </span>
+          <h1 className="mt-6 text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl">
+            Elegant, composable components for modern apps
+          </h1>
+          <p className="mx-auto mt-4 max-w-2xl text-muted-foreground">
+            View and develop components in Storybook. Ship a reusable package
+            you can import like any other React library.
+          </p>
+          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+            <Button size="lg" className="shadow-lg">
+              Open Storybook
+            </Button>
+            <Button variant="secondary" size="lg">
+              Install Library
+            </Button>
+          </div>
+          <div className="mx-auto mt-10 grid max-w-3xl grid-cols-1 gap-3 text-left sm:grid-cols-2">
+            {commands.map((c) => (
+              <div
+                key={c.cmd}
+                className="rounded-lg border bg-card/70 p-4 shadow-xs backdrop-blur-sm"
+              >
+                <p className="text-xs font-semibold text-muted-foreground">
+                  {c.label}
+                </p>
+                <code className="mt-1 block select-all rounded-md bg-foreground/95 px-3 py-2 font-mono text-[12px] text-background">
+                  {c.cmd}
+                </code>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <section className="px-6 pb-24">
+        <div className="mx-auto max-w-6xl">
+          <div className="mb-6 flex items-end justify-between">
+            <h2 className="text-left text-2xl font-bold text-foreground">
+              Button component
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              Variants and sizes ready to use
+            </p>
+          </div>
+          <div className="grid grid-cols-1 gap-6 rounded-xl border bg-card/60 p-6 shadow-xs backdrop-blur-sm md:grid-cols-2">
+            <div>
+              <h3 className="text-sm font-semibold text-foreground">
+                Variants
+              </h3>
+              <div className="mt-3 flex flex-wrap items-center gap-3">
+                <Button>Primary</Button>
+                <Button variant="secondary">Secondary</Button>
+                <Button variant="ghost">Ghost</Button>
+                <Button variant="destructive">Destructive</Button>
+              </div>
+            </div>
+            <div>
+              <h3 className="text-sm font-semibold text-foreground">Sizes</h3>
+              <div className="mt-3 flex flex-wrap items-center gap-3">
+                <Button size="sm">Small</Button>
+                <Button size="md">Medium</Button>
+                <Button size="lg">Large</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}

package/client/pages/NotFound.tsx

@@ -0,0 +1,29 @@
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+const NotFound = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.error(
+      "404 Error: User attempted to access non-existent route:",
+      location.pathname,
+    );
+  }, [location.pathname]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-muted">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4 text-foreground">404</h1>
+        <p className="text-xl text-muted-foreground mb-4">
+          Oops! Page not found
+        </p>
+        <a href="/" className="text-primary hover:text-primary/80 underline">
+          Return to Home
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;

package/client/ui/Accordion/Accordion.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "../../components/ui/accordion";
+
+const meta = {
+  title: "UI/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-full max-w-md">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It adheres to the WAI-ARIA design pattern.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles you can customize using CSS.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It&apos;s animated by default, but you can disable it if you
+          prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" className="w-full max-w-md">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Feature One</AccordionTrigger>
+        <AccordionContent>
+          This is the content for feature one. You can open multiple items at
+          once.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Feature Two</AccordionTrigger>
+        <AccordionContent>
+          This is the content for feature two. All sections can be expanded
+          simultaneously.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Feature Three</AccordionTrigger>
+        <AccordionContent>
+          This is the content for feature three. Great for detailed information
+          display.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};

package/client/ui/Alert/Alert.stories.tsx

@@ -0,0 +1,82 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert, AlertTitle, AlertDescription } from "../../components/ui/alert";
+import { AlertCircle, Terminal, CheckCircle2 } from "lucide-react";
+
+const meta = {
+  title: "UI/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "padded",
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Alert>
+      <Terminal className="h-4 w-4" />
+      <AlertTitle>Heads up!</AlertTitle>
+      <AlertDescription>
+        You can add components to your app using the code below.
+      </AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Destructive: Story = {
+  render: () => (
+    <Alert variant="destructive">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>
+        Your session has expired. Please log in again.
+      </AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Success: Story = {
+  render: () => (
+    <Alert>
+      <CheckCircle2 className="h-4 w-4" />
+      <AlertTitle>Success</AlertTitle>
+      <AlertDescription>
+        Your changes have been saved successfully.
+      </AlertDescription>
+    </Alert>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4 max-w-md">
+      <Alert>
+        <Terminal className="h-4 w-4" />
+        <AlertTitle>Heads up!</AlertTitle>
+        <AlertDescription>
+          You can add components to your app using the code below.
+        </AlertDescription>
+      </Alert>
+
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>
+          Your session has expired. Please log in again.
+        </AlertDescription>
+      </Alert>
+
+      <Alert>
+        <CheckCircle2 className="h-4 w-4" />
+        <AlertTitle>Success</AlertTitle>
+        <AlertDescription>
+          Your changes have been saved successfully.
+        </AlertDescription>
+      </Alert>
+    </div>
+  ),
+};

package/client/ui/AlertDialog/AlertDialog.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "../../components/ui/alert-dialog";
+import { Button } from "../../components/ui/button";
+import { useState } from "react";
+
+const meta = {
+  title: "UI/AlertDialog",
+  component: AlertDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogTrigger asChild>
+          <Button>Open Alert</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Confirm Action</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to proceed with this action?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>Continue</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+  },
+};
+
+export const Delete: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogTrigger asChild>
+          <Button variant="destructive">Delete Item</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete the
+              item.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+  },
+};
+
+export const Warning: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <AlertDialog open={open} onOpenChange={setOpen}>
+        <AlertDialogTrigger asChild>
+          <Button variant="outline">Show Warning</Button>
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Warning</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action will have significant consequences. Please confirm
+              that you understand the risks.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction>I Understand</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+  },
+};