@byldpartners/ui 0.0.1

package/src/components/Accordion/useAccordion.test.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useAccordion } from "./useAccordion";
+
+describe("useAccordion", () => {
+  describe("single type", () => {
+    it("starts with no expanded items by default", () => {
+      const { result } = renderHook(() => useAccordion({ type: "single" }));
+      expect(result.current.expandedItems).toEqual([]);
+    });
+
+    it("expands an item on toggle", () => {
+      const { result } = renderHook(() => useAccordion({ type: "single" }));
+      act(() => result.current.toggle("item-1"));
+      expect(result.current.expandedItems).toEqual(["item-1"]);
+    });
+
+    it("replaces the expanded item when toggling a different one", () => {
+      const { result } = renderHook(() => useAccordion({ type: "single" }));
+      act(() => result.current.toggle("item-1"));
+      act(() => result.current.toggle("item-2"));
+      expect(result.current.expandedItems).toEqual(["item-2"]);
+    });
+
+    it("does NOT collapse when collapsible is false", () => {
+      const { result } = renderHook(() =>
+        useAccordion({ type: "single", collapsible: false }),
+      );
+      act(() => result.current.toggle("item-1"));
+      act(() => result.current.toggle("item-1"));
+      expect(result.current.expandedItems).toEqual(["item-1"]);
+    });
+
+    it("collapses when collapsible is true", () => {
+      const { result } = renderHook(() =>
+        useAccordion({ type: "single", collapsible: true }),
+      );
+      act(() => result.current.toggle("item-1"));
+      act(() => result.current.toggle("item-1"));
+      expect(result.current.expandedItems).toEqual([]);
+    });
+
+    it("calls onValueChange with string for single type", () => {
+      const onChange = vi.fn();
+      const { result } = renderHook(() =>
+        useAccordion({ type: "single", onValueChange: onChange }),
+      );
+      act(() => result.current.toggle("item-1"));
+      expect(onChange).toHaveBeenCalledWith("item-1");
+    });
+  });
+
+  describe("multiple type", () => {
+    it("expands multiple items", () => {
+      const { result } = renderHook(() => useAccordion({ type: "multiple" }));
+      act(() => result.current.toggle("item-1"));
+      act(() => result.current.toggle("item-2"));
+      expect(result.current.expandedItems).toEqual(["item-1", "item-2"]);
+    });
+
+    it("collapses an individual item", () => {
+      const { result } = renderHook(() => useAccordion({ type: "multiple" }));
+      act(() => result.current.toggle("item-1"));
+      act(() => result.current.toggle("item-2"));
+      act(() => result.current.toggle("item-1"));
+      expect(result.current.expandedItems).toEqual(["item-2"]);
+    });
+
+    it("calls onValueChange with array for multiple type", () => {
+      const onChange = vi.fn();
+      const { result } = renderHook(() =>
+        useAccordion({ type: "multiple", onValueChange: onChange }),
+      );
+      act(() => result.current.toggle("item-1"));
+      expect(onChange).toHaveBeenCalledWith(["item-1"]);
+    });
+  });
+
+  describe("controlled mode", () => {
+    it("uses the controlled value", () => {
+      const { result } = renderHook(() =>
+        useAccordion({ type: "single", value: "item-2" }),
+      );
+      expect(result.current.expandedItems).toEqual(["item-2"]);
+    });
+
+    it("does not update internal state when controlled", () => {
+      const onChange = vi.fn();
+      const { result } = renderHook(() =>
+        useAccordion({ type: "single", value: "item-1", onValueChange: onChange }),
+      );
+      act(() => result.current.toggle("item-2"));
+      // Internal state does not update
+      expect(result.current.expandedItems).toEqual(["item-1"]);
+      expect(onChange).toHaveBeenCalledWith("item-2");
+    });
+  });
+
+  describe("defaultValue", () => {
+    it("initializes with a string defaultValue", () => {
+      const { result } = renderHook(() =>
+        useAccordion({ type: "single", defaultValue: "item-1" }),
+      );
+      expect(result.current.expandedItems).toEqual(["item-1"]);
+    });
+
+    it("initializes with an array defaultValue", () => {
+      const { result } = renderHook(() =>
+        useAccordion({ type: "multiple", defaultValue: ["item-1", "item-2"] }),
+      );
+      expect(result.current.expandedItems).toEqual(["item-1", "item-2"]);
+    });
+  });
+});

package/src/components/Accordion/useAccordion.ts

@@ -0,0 +1,65 @@
+import { useState, useCallback } from "react";
+import type { AccordionType } from "./Accordion.types";
+
+interface UseAccordionProps {
+  type?: AccordionType;
+  collapsible?: boolean;
+  defaultValue?: string | string[];
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+}
+
+export function useAccordion({
+  type = "single",
+  collapsible = false,
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+}: UseAccordionProps) {
+  const [internalValue, setInternalValue] = useState<string[]>(() => {
+    if (defaultValue) {
+      return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
+    }
+    return [];
+  });
+
+  const expandedItems =
+    controlledValue !== undefined
+      ? Array.isArray(controlledValue)
+        ? controlledValue
+        : [controlledValue]
+      : internalValue;
+
+  const toggle = useCallback(
+    (itemValue: string) => {
+      let next: string[];
+
+      if (type === "single") {
+        if (expandedItems.includes(itemValue)) {
+          next = collapsible ? [] : expandedItems;
+        } else {
+          next = [itemValue];
+        }
+      } else {
+        if (expandedItems.includes(itemValue)) {
+          next = expandedItems.filter((v) => v !== itemValue);
+        } else {
+          next = [...expandedItems, itemValue];
+        }
+      }
+
+      if (controlledValue === undefined) {
+        setInternalValue(next);
+      }
+      onValueChange?.(type === "single" ? (next[0] ?? "") : next);
+
+      return next;
+    },
+    [type, collapsible, expandedItems, controlledValue, onValueChange],
+  );
+
+  return {
+    expandedItems,
+    toggle,
+  };
+}

package/src/components/Alert/Alert.native.tsx

@@ -0,0 +1,86 @@
+import { View, Text, type ViewProps, type TextProps } from "react-native";
+import { cva } from "class-variance-authority";
+import type { AlertVariant, AlertProps, AlertTitleProps, AlertDescriptionProps } from "./Alert.types";
+import { cn } from "../../utils/cn";
+import { AlertContext, useAlertContext } from "./useAlert";
+
+interface AlertNativeProps extends AlertProps, ViewProps {}
+
+const alertVariants = cva(
+  "w-full rounded-lg border px-4 py-3 text-sm",
+  {
+    variants: {
+      variant: {
+        default: "bg-background border-border",
+        destructive: "bg-background border-destructive/50",
+      } satisfies Record<AlertVariant, string>,
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({ variant = "default", children, className, ...props }: AlertNativeProps) {
+  return (
+    <AlertContext.Provider value={variant}>
+      <View
+        accessibilityRole="alert"
+        className={cn(alertVariants({ variant }), className)}
+        {...props}
+      >
+        {children}
+      </View>
+    </AlertContext.Provider>
+  );
+}
+Alert.displayName = "Alert";
+
+interface AlertTitleNativeProps extends AlertTitleProps, TextProps {}
+
+function AlertTitle({ children, className, ...props }: AlertTitleNativeProps) {
+  const variant = useAlertContext();
+
+  return (
+    <Text
+      className={cn(
+        "font-medium leading-none tracking-tight mb-1",
+        variant === "destructive" ? "text-destructive" : "text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+}
+AlertTitle.displayName = "AlertTitle";
+
+interface AlertDescriptionNativeProps extends AlertDescriptionProps, TextProps {}
+
+function AlertDescription({
+  children,
+  className,
+  ...props
+}: AlertDescriptionNativeProps) {
+  const variant = useAlertContext();
+
+  return typeof children === "string" ? (
+    <Text
+      className={cn(
+        "text-sm leading-relaxed",
+        variant === "destructive" ? "text-destructive" : "text-foreground",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Text>
+  ) : (
+    <View>{children}</View>
+  );
+}
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription, alertVariants };
+export type { AlertNativeProps, AlertTitleNativeProps, AlertDescriptionNativeProps };

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Alert, AlertTitle, AlertDescription } from "./Alert.web";
+
+const meta = {
+  title: "Components/Alert",
+  component: Alert,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    style: { width: 420 },
+    children: (
+      <>
+        <AlertTitle>Heads up!</AlertTitle>
+        <AlertDescription>
+          You can add components to your app using the CLI.
+        </AlertDescription>
+      </>
+    ),
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    variant: "destructive",
+    style: { width: 420 },
+    children: (
+      <>
+        <AlertTitle>Error</AlertTitle>
+        <AlertDescription>
+          Your session has expired. Please log in again.
+        </AlertDescription>
+      </>
+    ),
+  },
+};

package/src/components/Alert/Alert.types.ts

@@ -0,0 +1,17 @@
+export type AlertVariant = "default" | "destructive";
+
+export interface AlertProps {
+  variant?: AlertVariant;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface AlertTitleProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface AlertDescriptionProps {
+  children?: React.ReactNode;
+  className?: string;
+}

package/src/components/Alert/Alert.web.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Alert, AlertTitle, AlertDescription, alertVariants } from "./Alert.web";
+
+describe("Alert", () => {
+  it("renders with role=alert", () => {
+    render(<Alert>content</Alert>);
+    expect(screen.getByRole("alert")).toBeDefined();
+  });
+
+  it("applies default variant", () => {
+    render(<Alert>content</Alert>);
+    expect(screen.getByRole("alert").className).toContain("bg-background");
+  });
+
+  it("applies destructive variant", () => {
+    render(<Alert variant="destructive">err</Alert>);
+    expect(screen.getByRole("alert").className).toContain("text-destructive");
+  });
+
+  it("merges custom className", () => {
+    render(<Alert className="my-alert">content</Alert>);
+    expect(screen.getByRole("alert").className).toContain("my-alert");
+  });
+
+  it("alertVariants generates correct classes", () => {
+    expect(alertVariants({ variant: "destructive" })).toContain("text-destructive");
+  });
+});
+
+describe("AlertTitle", () => {
+  it("renders as h5", () => {
+    render(<AlertTitle>Title</AlertTitle>);
+    const el = screen.getByText("Title");
+    expect(el.tagName).toBe("H5");
+  });
+
+  it("merges className", () => {
+    render(<AlertTitle className="custom">Title</AlertTitle>);
+    expect(screen.getByText("Title").className).toContain("custom");
+  });
+});
+
+describe("AlertDescription", () => {
+  it("renders children", () => {
+    render(<AlertDescription>Desc</AlertDescription>);
+    expect(screen.getByText("Desc")).toBeDefined();
+  });
+});

package/src/components/Alert/Alert.web.tsx

@@ -0,0 +1,59 @@
+import { forwardRef } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/cn";
+import type { AlertVariant } from "./Alert.types";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      } satisfies Record<AlertVariant, string>,
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription, alertVariants };

package/src/components/Alert/index.native.ts

@@ -0,0 +1,2 @@
+export { Alert, AlertTitle, AlertDescription, alertVariants } from "./Alert.native";
+export type { AlertProps, AlertTitleProps, AlertDescriptionProps, AlertVariant } from "./Alert.types";

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+export { Alert, AlertTitle, AlertDescription } from "./Alert.web";
+export type { AlertProps, AlertTitleProps, AlertDescriptionProps, AlertVariant } from "./Alert.types";

package/src/components/Alert/useAlert.test.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { AlertContext, useAlertContext } from "./useAlert";
+
+describe("useAlertContext", () => {
+  it("defaults to 'default' variant", () => {
+    const { result } = renderHook(() => useAlertContext());
+    expect(result.current).toBe("default");
+  });
+
+  it("returns provided variant from context", () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) =>
+      React.createElement(AlertContext.Provider, { value: "destructive" }, children);
+
+    const { result } = renderHook(() => useAlertContext(), { wrapper });
+    expect(result.current).toBe("destructive");
+  });
+});

package/src/components/Alert/useAlert.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import type { AlertVariant } from "./Alert.types";
+
+const AlertContext = createContext<AlertVariant>("default");
+
+function useAlertContext() {
+  return useContext(AlertContext);
+}
+
+export { AlertContext, useAlertContext };