@byldpartners/ui 0.0.1

package/src/components/DataTable/useDataTable.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useDataTable, getCellValue } from "./useDataTable";
+import type { ColumnDef } from "./DataTable.types";
+
+interface Row {
+  name: string;
+  age: number;
+}
+
+const columns: ColumnDef<Row>[] = [
+  { id: "name", header: "Name", accessorKey: "name", sortable: true },
+  { id: "age", header: "Age", accessorKey: "age", sortable: true },
+];
+
+const data: Row[] = [
+  { name: "Charlie", age: 30 },
+  { name: "Alice", age: 25 },
+  { name: "Bob", age: 35 },
+];
+
+describe("getCellValue", () => {
+  it("gets value by accessorKey", () => {
+    expect(getCellValue(columns[0], data[0])).toBe("Charlie");
+  });
+
+  it("gets value by accessorFn", () => {
+    const col: ColumnDef<Row> = {
+      id: "custom",
+      header: "Custom",
+      accessorFn: (row) => `${row.name}-${row.age}`,
+    };
+    expect(getCellValue(col, data[0])).toBe("Charlie-30");
+  });
+
+  it("returns undefined when no accessor", () => {
+    const col: ColumnDef<Row> = { id: "empty", header: "Empty" };
+    expect(getCellValue(col, data[0])).toBeUndefined();
+  });
+});
+
+describe("useDataTable", () => {
+  it("returns unsorted data initially", () => {
+    const { result } = renderHook(() => useDataTable({ columns, data }));
+    expect(result.current.sortedData).toEqual(data);
+    expect(result.current.sortColumn).toBeNull();
+    expect(result.current.sortDirection).toBeNull();
+  });
+
+  it("sorts ascending on first click", () => {
+    const { result } = renderHook(() => useDataTable({ columns, data }));
+    act(() => result.current.handleSort("name"));
+    expect(result.current.sortColumn).toBe("name");
+    expect(result.current.sortDirection).toBe("asc");
+    expect(result.current.sortedData.map((r) => r.name)).toEqual([
+      "Alice",
+      "Bob",
+      "Charlie",
+    ]);
+  });
+
+  it("sorts descending on second click", () => {
+    const { result } = renderHook(() => useDataTable({ columns, data }));
+    act(() => result.current.handleSort("name"));
+    act(() => result.current.handleSort("name"));
+    expect(result.current.sortDirection).toBe("desc");
+    expect(result.current.sortedData.map((r) => r.name)).toEqual([
+      "Charlie",
+      "Bob",
+      "Alice",
+    ]);
+  });
+
+  it("clears sort on third click", () => {
+    const { result } = renderHook(() => useDataTable({ columns, data }));
+    act(() => result.current.handleSort("name"));
+    act(() => result.current.handleSort("name"));
+    act(() => result.current.handleSort("name"));
+    expect(result.current.sortColumn).toBeNull();
+    expect(result.current.sortDirection).toBeNull();
+    expect(result.current.sortedData).toEqual(data);
+  });
+
+  it("resets to ascending when switching columns", () => {
+    const { result } = renderHook(() => useDataTable({ columns, data }));
+    act(() => result.current.handleSort("name"));
+    act(() => result.current.handleSort("age"));
+    expect(result.current.sortColumn).toBe("age");
+    expect(result.current.sortDirection).toBe("asc");
+    expect(result.current.sortedData.map((r) => r.age)).toEqual([25, 30, 35]);
+  });
+
+  it("sorts numeric values correctly", () => {
+    const { result } = renderHook(() => useDataTable({ columns, data }));
+    act(() => result.current.handleSort("age"));
+    expect(result.current.sortedData.map((r) => r.age)).toEqual([25, 30, 35]);
+  });
+});

package/src/components/DataTable/useDataTable.ts

@@ -0,0 +1,68 @@
+import { useState, useMemo, useCallback } from "react";
+import type { ColumnDef, SortDirection } from "./DataTable.types";
+
+function getCellValue<TData>(column: ColumnDef<TData>, row: TData): unknown {
+  if (column.accessorFn) return column.accessorFn(row);
+  if (column.accessorKey) return row[column.accessorKey];
+  return undefined;
+}
+
+interface UseDataTableProps<TData> {
+  columns: ColumnDef<TData>[];
+  data: TData[];
+}
+
+export function useDataTable<TData>({ columns, data }: UseDataTableProps<TData>) {
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
+
+  const handleSort = useCallback(
+    (columnId: string) => {
+      if (sortColumn === columnId) {
+        if (sortDirection === "asc") {
+          setSortDirection("desc");
+        } else if (sortDirection === "desc") {
+          setSortColumn(null);
+          setSortDirection(null);
+        }
+      } else {
+        setSortColumn(columnId);
+        setSortDirection("asc");
+      }
+    },
+    [sortColumn, sortDirection],
+  );
+
+  const sortedData = useMemo(() => {
+    if (!sortColumn || !sortDirection) return data;
+
+    const column = columns.find((c) => c.id === sortColumn);
+    if (!column) return data;
+
+    return [...data].sort((a, b) => {
+      const aVal = getCellValue(column, a);
+      const bVal = getCellValue(column, b);
+
+      if (aVal == null && bVal == null) return 0;
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+
+      const comparison =
+        typeof aVal === "string" && typeof bVal === "string"
+          ? aVal.localeCompare(bVal)
+          : Number(aVal) - Number(bVal);
+
+      return sortDirection === "asc" ? comparison : -comparison;
+    });
+  }, [data, columns, sortColumn, sortDirection]);
+
+  return {
+    sortColumn,
+    sortDirection,
+    sortedData,
+    handleSort,
+    getCellValue,
+  };
+}
+
+export { getCellValue };

package/src/components/DatePicker/DatePicker.native.tsx

@@ -0,0 +1,82 @@
+import {
+  View,
+  Text,
+  Pressable,
+  Modal,
+  TouchableWithoutFeedback,
+  type PressableProps,
+} from "react-native";
+import { Calendar as CalendarIcon } from "lucide-react-native";
+import type { DatePickerProps } from "./DatePicker.types";
+import { Calendar } from "../Calendar/Calendar.native";
+import { Icon } from "../Icon/Icon.native";
+import { useDatePicker } from "./useDatePicker";
+import { cn } from "../../utils/cn";
+
+interface DatePickerNativeProps
+  extends DatePickerProps,
+    Omit<PressableProps, "children" | "disabled"> {}
+
+function DatePicker({
+  value,
+  onValueChange,
+  placeholder = "Pick a date",
+  disabled = false,
+  className,
+  ...props
+}: DatePickerNativeProps) {
+  const { open, openPicker, closePicker, handleSelect, displayText } =
+    useDatePicker({ value, onValueChange });
+
+  return (
+    <>
+      <Pressable
+        onPress={() => !disabled && openPicker()}
+        disabled={disabled}
+        className={cn(
+          "flex-row items-center h-9 w-full rounded-md border border-input px-3 py-2 shadow-sm elevation-1",
+          disabled && "opacity-50",
+          className,
+        )}
+        accessibilityRole="button"
+        accessibilityLabel={displayText ?? placeholder}
+        {...props}
+      >
+        <View className="mr-3">
+          <Icon icon={CalendarIcon} size={16} className="text-muted-foreground" />
+        </View>
+        <Text
+          className={cn(
+            "text-sm leading-4",
+            value ? "text-foreground" : "text-muted-foreground",
+          )}
+        >
+          {displayText ?? placeholder}
+        </Text>
+      </Pressable>
+
+      <Modal
+        visible={open}
+        transparent
+        animationType="fade"
+        onRequestClose={closePicker}
+      >
+        <TouchableWithoutFeedback onPress={closePicker}>
+          <View className="flex-1 justify-center items-center bg-black/50">
+            <View
+              onStartShouldSetResponder={() => true}
+              className="bg-popover rounded-lg shadow-md elevation-3 border border-border mx-6"
+            >
+              <Calendar selected={value} onSelect={handleSelect} />
+            </View>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
+  );
+}
+
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };
+export type { DatePickerNativeProps };

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { DatePicker } from "./DatePicker.web";
+
+const meta = {
+  title: "Components/DatePicker",
+  component: DatePicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+    placeholder: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [date, setDate] = useState<Date | undefined>(undefined);
+    return (
+      <div style={{ width: 280 }}>
+        <DatePicker {...args} value={date} onValueChange={setDate} />
+      </div>
+    );
+  },
+};
+
+export const WithValue: Story = {
+  render: (args) => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+    return (
+      <div style={{ width: 280 }}>
+        <DatePicker {...args} value={date} onValueChange={setDate} />
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: "Pick a date",
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  render: (args) => {
+    const [date, setDate] = useState<Date | undefined>(undefined);
+    return (
+      <div style={{ width: 280 }}>
+        <DatePicker
+          {...args}
+          value={date}
+          onValueChange={setDate}
+          placeholder="Select your birthday"
+        />
+      </div>
+    );
+  },
+};

package/src/components/DatePicker/DatePicker.types.ts

@@ -0,0 +1,7 @@
+export interface DatePickerProps {
+  value?: Date;
+  onValueChange?: (date: Date | undefined) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}

package/src/components/DatePicker/DatePicker.web.tsx

@@ -0,0 +1,85 @@
+import { forwardRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { cn } from "../../utils/cn";
+import { Calendar } from "../Calendar/Calendar.web";
+import type { DatePickerProps } from "./DatePicker.types";
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+const DatePicker = forwardRef<HTMLDivElement, DatePickerProps & React.HTMLAttributes<HTMLDivElement>>(
+  (
+    {
+      value,
+      onValueChange,
+      placeholder = "Pick a date",
+      disabled = false,
+      className,
+      ...props
+    },
+    ref,
+  ) => {
+    const [open, setOpen] = useState(false);
+
+    const handleSelect = (date: Date | undefined) => {
+      onValueChange?.(date);
+      setOpen(false);
+    };
+
+    return (
+      <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.Trigger asChild disabled={disabled}>
+          <button
+            type="button"
+            className={cn(
+              "flex h-9 w-full items-center justify-start whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+              !value && "text-muted-foreground",
+              className,
+            )}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="mr-2 h-4 w-4"
+            >
+              <path d="M8 2v4" />
+              <path d="M16 2v4" />
+              <rect width="18" height="18" x="3" y="4" rx="2" />
+              <path d="M3 10h18" />
+            </svg>
+            {value ? formatDate(value) : placeholder}
+          </button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            ref={ref}
+            className="z-50 rounded-md border bg-popover p-0 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
+            align="start"
+            sideOffset={4}
+            {...props}
+          >
+            <Calendar
+              selected={value}
+              onSelect={handleSelect}
+            />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    );
+  },
+);
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };

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

@@ -0,0 +1,2 @@
+export { DatePicker } from "./DatePicker.native";
+export type { DatePickerProps } from "./DatePicker.types";

package/src/components/DatePicker/index.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from "./DatePicker.web";
+export type { DatePickerProps } from "./DatePicker.types";

package/src/components/DatePicker/useDatePicker.test.ts

@@ -0,0 +1,62 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useDatePicker } from "./useDatePicker";
+
+describe("useDatePicker", () => {
+  it("starts closed", () => {
+    const { result } = renderHook(() => useDatePicker({}));
+    expect(result.current.open).toBe(false);
+  });
+
+  it("opens the picker", () => {
+    const { result } = renderHook(() => useDatePicker({}));
+    act(() => result.current.openPicker());
+    expect(result.current.open).toBe(true);
+  });
+
+  it("closes the picker", () => {
+    const { result } = renderHook(() => useDatePicker({}));
+    act(() => result.current.openPicker());
+    act(() => result.current.closePicker());
+    expect(result.current.open).toBe(false);
+  });
+
+  it("calls onValueChange and closes on select", () => {
+    const onValueChange = vi.fn();
+    const { result } = renderHook(() =>
+      useDatePicker({ onValueChange }),
+    );
+
+    act(() => result.current.openPicker());
+
+    const date = new Date(2024, 5, 15);
+    act(() => result.current.handleSelect(date));
+
+    expect(onValueChange).toHaveBeenCalledWith(date);
+    expect(result.current.open).toBe(false);
+  });
+
+  it("formats display text when value is set", () => {
+    const date = new Date(2024, 5, 15);
+    const { result } = renderHook(() => useDatePicker({ value: date }));
+    expect(result.current.displayText).toContain("June");
+    expect(result.current.displayText).toContain("15");
+    expect(result.current.displayText).toContain("2024");
+  });
+
+  it("returns undefined displayText when no value", () => {
+    const { result } = renderHook(() => useDatePicker({}));
+    expect(result.current.displayText).toBeUndefined();
+  });
+
+  it("works in controlled open mode", () => {
+    const onOpenChange = vi.fn();
+    const { result } = renderHook(() =>
+      useDatePicker({ open: false, onOpenChange }),
+    );
+
+    act(() => result.current.openPicker());
+    expect(result.current.open).toBe(false);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/components/DatePicker/useDatePicker.ts

@@ -0,0 +1,54 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseDatePickerProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  value?: Date;
+  onValueChange?: (date: Date | undefined) => void;
+}
+
+export function useDatePicker({
+  open: controlledOpen,
+  onOpenChange,
+  value,
+  onValueChange,
+}: UseDatePickerProps) {
+  const [open, setOpen] = useControllableState<boolean>({
+    value: controlledOpen,
+    defaultValue: false,
+    onChange: onOpenChange,
+  });
+
+  const openPicker = useCallback(() => {
+    setOpen(true);
+  }, [setOpen]);
+
+  const closePicker = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
+  const handleSelect = useCallback(
+    (date: Date | undefined) => {
+      onValueChange?.(date);
+      setOpen(false);
+    },
+    [onValueChange, setOpen],
+  );
+
+  const displayText = value
+    ? value.toLocaleDateString("en-US", {
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+      })
+    : undefined;
+
+  return {
+    open,
+    openPicker,
+    closePicker,
+    handleSelect,
+    displayText,
+  };
+}