@byldpartners/ui 0.0.1

package/src/components/ContextMenu/ContextMenu.web.tsx

@@ -0,0 +1,220 @@
+import { forwardRef } from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { cn } from "../../utils/cn";
+
+function CheckIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="M20 6 9 17l-5-5"/>
+    </svg>
+  );
+}
+
+function ChevronRightIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="m9 18 6-6-6-6"/>
+    </svg>
+  );
+}
+
+function CircleIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <circle cx="12" cy="12" r="10"/>
+    </svg>
+  );
+}
+
+const ContextMenu = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <CircleIcon className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = forwardRef<
+  React.ComponentRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+  ContextMenuPortal,
+  ContextMenuGroup,
+};

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

@@ -0,0 +1,28 @@
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuLabel,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSub,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+} from "./ContextMenu.native";
+export type {
+  ContextMenuProps,
+  ContextMenuTriggerProps,
+  ContextMenuContentProps,
+  ContextMenuItemProps,
+  ContextMenuSeparatorProps,
+  ContextMenuLabelProps,
+  ContextMenuCheckboxItemProps,
+  ContextMenuRadioGroupProps,
+  ContextMenuRadioItemProps,
+  ContextMenuSubProps,
+  ContextMenuSubTriggerProps,
+  ContextMenuSubContentProps,
+} from "./ContextMenu.types";

package/src/components/ContextMenu/index.ts

@@ -0,0 +1,2 @@
+export * from "./ContextMenu.web";
+export type * from "./ContextMenu.types";

package/src/components/ContextMenu/useContextMenu.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useContextMenu } from "./useContextMenu";
+
+describe("useContextMenu", () => {
+  it("defaults to closed", () => {
+    const { result } = renderHook(() => useContextMenu());
+    expect(result.current.open).toBe(false);
+  });
+
+  it("uses defaultOpen", () => {
+    const { result } = renderHook(() =>
+      useContextMenu({ defaultOpen: true }),
+    );
+    expect(result.current.open).toBe(true);
+  });
+
+  it("opens and closes", () => {
+    const { result } = renderHook(() => useContextMenu());
+    act(() => result.current.onOpenChange(true));
+    expect(result.current.open).toBe(true);
+    act(() => result.current.onOpenChange(false));
+    expect(result.current.open).toBe(false);
+  });
+
+  it("calls external onOpenChange", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useContextMenu({ onOpenChange: onChange }),
+    );
+    act(() => result.current.onOpenChange(true));
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+
+  it("works in controlled mode", () => {
+    const onChange = vi.fn();
+    const { result } = renderHook(() =>
+      useContextMenu({ open: false, onOpenChange: onChange }),
+    );
+    act(() => result.current.onOpenChange(true));
+    expect(result.current.open).toBe(false);
+    expect(onChange).toHaveBeenCalledWith(true);
+  });
+});

package/src/components/ContextMenu/useContextMenu.ts

@@ -0,0 +1,36 @@
+import { useCallback } from "react";
+import { useControllableState } from "../../hooks/useControllableState";
+
+interface UseContextMenuProps {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+interface UseContextMenuReturn {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function useContextMenu({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+}: UseContextMenuProps = {}): UseContextMenuReturn {
+  const [open, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  const handleOpenChange = useCallback(
+    (nextOpen: boolean) => {
+      setOpen(nextOpen);
+    },
+    [setOpen],
+  );
+
+  return { open, onOpenChange: handleOpenChange };
+}
+
+export type { UseContextMenuProps, UseContextMenuReturn };

package/src/components/DataTable/DataTable.native.tsx

@@ -0,0 +1,85 @@
+import { View, Text, Pressable, FlatList, type ViewProps } from "react-native";
+import type { DataTableProps } from "./DataTable.types";
+import { useDataTable, getCellValue } from "./useDataTable";
+import { cn } from "../../utils/cn";
+
+interface DataTableNativeProps<TData> extends DataTableProps<TData>, ViewProps {}
+
+function DataTable<TData>({
+  columns,
+  data,
+  ...props
+}: DataTableNativeProps<TData>) {
+  const { sortColumn, sortDirection, sortedData, handleSort } = useDataTable({
+    columns,
+    data,
+  });
+
+  const renderHeader = () => (
+    <View className="flex-row border-b border-border bg-background">
+      {columns.map((column) => (
+        <Pressable
+          key={column.id}
+          onPress={column.sortable ? () => handleSort(column.id) : undefined}
+          className="flex-1 px-2 py-2.5 flex-row items-center"
+        >
+          <Text className="font-medium text-xs text-muted-foreground">
+            {column.header}
+            {column.sortable && sortColumn === column.id
+              ? sortDirection === "asc"
+                ? " \u2191"
+                : " \u2193"
+              : ""}
+          </Text>
+        </Pressable>
+      ))}
+    </View>
+  );
+
+  const renderRow = ({ item, index }: { item: TData; index: number }) => (
+    <View
+      className={cn(
+        "flex-row border-b border-border",
+        index % 2 === 0 ? "bg-background" : "bg-muted",
+      )}
+    >
+      {columns.map((column) => {
+        const value = getCellValue(column, item);
+        return (
+          <View
+            key={column.id}
+            className="flex-1 px-2 py-2.5 justify-center"
+          >
+            {column.cell ? (
+              column.cell(value, item)
+            ) : (
+              <Text className="text-sm text-foreground">
+                {String(value ?? "")}
+              </Text>
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+
+  return (
+    <View className="overflow-hidden" {...props}>
+      {renderHeader()}
+      <FlatList
+        data={sortedData}
+        renderItem={renderRow}
+        keyExtractor={(_: TData, index: number) => String(index)}
+        ListEmptyComponent={
+          <View className="p-6 items-center">
+            <Text className="text-muted-foreground text-sm">No results.</Text>
+          </View>
+        }
+      />
+    </View>
+  );
+}
+DataTable.displayName = "DataTable";
+
+export { DataTable };
+export type { DataTableNativeProps };

package/src/components/DataTable/DataTable.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { DataTable } from "./DataTable.web";
+import type { ColumnDef } from "./DataTable.types";
+
+interface Payment {
+  id: string;
+  amount: number;
+  status: "pending" | "processing" | "success" | "failed";
+  email: string;
+}
+
+const columns: ColumnDef<Payment>[] = [
+  {
+    id: "status",
+    header: "Status",
+    accessorKey: "status",
+    sortable: true,
+  },
+  {
+    id: "email",
+    header: "Email",
+    accessorKey: "email",
+    sortable: true,
+  },
+  {
+    id: "amount",
+    header: "Amount",
+    accessorKey: "amount",
+    sortable: true,
+    cell: (value) => {
+      const formatted = new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(value as number);
+      return formatted;
+    },
+  },
+];
+
+const data: Payment[] = [
+  { id: "1", amount: 316, status: "success", email: "alice@example.com" },
+  { id: "2", amount: 242, status: "success", email: "bob@example.com" },
+  { id: "3", amount: 837, status: "processing", email: "carol@example.com" },
+  { id: "4", amount: 874, status: "failed", email: "dave@example.com" },
+  { id: "5", amount: 721, status: "pending", email: "eve@example.com" },
+];
+
+const meta = {
+  title: "Components/DataTable",
+  component: DataTable,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DataTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    columns: columns as ColumnDef<unknown>[],
+    data,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    columns: columns as ColumnDef<unknown>[],
+    data: [],
+  },
+};

package/src/components/DataTable/DataTable.types.ts

@@ -0,0 +1,16 @@
+export type SortDirection = "asc" | "desc" | null;
+
+export interface ColumnDef<TData> {
+  id: string;
+  header: string;
+  accessorKey?: keyof TData;
+  accessorFn?: (row: TData) => unknown;
+  cell?: (value: unknown, row: TData) => React.ReactNode;
+  sortable?: boolean;
+}
+
+export interface DataTableProps<TData> {
+  columns: ColumnDef<TData>[];
+  data: TData[];
+  className?: string;
+}

package/src/components/DataTable/DataTable.web.tsx

@@ -0,0 +1,135 @@
+import { forwardRef, useState, useMemo, useCallback } from "react";
+import { cn } from "../../utils/cn";
+import type { ColumnDef, SortDirection, DataTableProps } 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;
+}
+
+function DataTableInner<TData>(
+  {
+    columns,
+    data,
+    className,
+    ...props
+  }: DataTableProps<TData> & React.HTMLAttributes<HTMLDivElement>,
+  ref: React.ForwardedRef<HTMLDivElement>,
+) {
+  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 (
+    <div ref={ref} className={cn("relative w-full overflow-auto", className)} {...props}>
+      <table className="w-full caption-bottom text-sm">
+        <thead className="[&_tr]:border-b">
+          <tr className="border-b transition-colors hover:bg-muted/50">
+            {columns.map((column) => (
+              <th
+                key={column.id}
+                className={cn(
+                  "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+                  column.sortable && "cursor-pointer select-none",
+                )}
+                onClick={
+                  column.sortable ? () => handleSort(column.id) : undefined
+                }
+              >
+                <div className="flex items-center gap-1">
+                  {column.header}
+                  {column.sortable && sortColumn === column.id && (
+                    <span className="ml-1 text-xs">
+                      {sortDirection === "asc" ? "\u2191" : "\u2193"}
+                    </span>
+                  )}
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="[&_tr:last-child]:border-0">
+          {sortedData.length === 0 ? (
+            <tr>
+              <td
+                colSpan={columns.length}
+                className="h-24 text-center text-muted-foreground"
+              >
+                No results.
+              </td>
+            </tr>
+          ) : (
+            sortedData.map((row, rowIndex) => (
+              <tr
+                key={rowIndex}
+                className="border-b transition-colors hover:bg-muted/50"
+              >
+                {columns.map((column) => {
+                  const value = getCellValue(column, row);
+                  return (
+                    <td
+                      key={column.id}
+                      className="p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]"
+                    >
+                      {column.cell ? column.cell(value, row) : String(value ?? "")}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+const DataTable = forwardRef(DataTableInner) as <TData>(
+  props: DataTableProps<TData> &
+    React.HTMLAttributes<HTMLDivElement> & {
+      ref?: React.ForwardedRef<HTMLDivElement>;
+    },
+) => React.ReactElement;
+
+export { DataTable };
+export type { ColumnDef };

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

@@ -0,0 +1,2 @@
+export { DataTable } from "./DataTable.native";
+export type { DataTableProps, ColumnDef, SortDirection } from "./DataTable.types";

package/src/components/DataTable/index.ts

@@ -0,0 +1,3 @@
+export { DataTable } from "./DataTable.web";
+export type { ColumnDef } from "./DataTable.web";
+export type { DataTableProps, SortDirection } from "./DataTable.types";