@olwiba/ui 0.1.14 → 0.2.0

package/src/app/TeamMembersPanel.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import * as React from 'react';
+import type { ColumnDef } from '@tanstack/react-table';
+import { MoreHorizontal, UserPlus } from 'lucide-react';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Dialog,
+} from '@olwiba/cn';
+import { Button } from '../primitives/Button';
+import { Input } from '../primitives/Input';
+import { DataTable } from '../components/DataTable';
+
+export interface TeamMemberRecord {
+  id: string;
+  name: string;
+  email: string;
+  avatar?: string;
+  role: string;
+}
+
+export interface TeamMembersPanelProps {
+  members: TeamMemberRecord[];
+  /** Roles offered in the invite dialog and the per-row role menu. @default ['Owner', 'Admin', 'Member'] */
+  roles?: string[];
+  onInvite?: (email: string, role: string) => void;
+  onRoleChange?: (memberId: string, role: string) => void;
+  onRemove?: (memberId: string) => void;
+  title?: string;
+  description?: string;
+}
+
+function InviteDialog({ roles, onInvite, onClose }: { roles: string[]; onInvite?: (email: string, role: string) => void; onClose: () => void }) {
+  const [email, setEmail] = React.useState('');
+  const [role, setRole] = React.useState(roles[roles.length - 1] ?? roles[0]);
+
+  return (
+    <DialogContent>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          onInvite?.(email, role);
+          onClose();
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Invite a team member</DialogTitle>
+          <DialogDescription>They&rsquo;ll get an email invite to join this workspace.</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="invite-email">Email address</Label>
+            <Input id="invite-email" type="email" required placeholder="name@company.com" value={email} onChange={(e) => setEmail(e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label>Role</Label>
+            <Select value={role} onValueChange={setRole}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {roles.map((r) => <SelectItem key={r} value={r}>{r}</SelectItem>)}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button type="submit">Send invite</Button>
+        </DialogFooter>
+      </form>
+    </DialogContent>
+  );
+}
+
+/**
+ * Member list with role management and an invite dialog. One block for
+ * team/org administration — built on `DataTable` rather than a bespoke list.
+ */
+export function TeamMembersPanel({
+  members,
+  roles = ['Owner', 'Admin', 'Member'],
+  onInvite,
+  onRoleChange,
+  onRemove,
+  title = 'Team members',
+  description = 'Manage who has access to this workspace.',
+}: TeamMembersPanelProps) {
+  const [inviteOpen, setInviteOpen] = React.useState(false);
+  const columns = React.useMemo<ColumnDef<TeamMemberRecord>[]>(() => [
+    {
+      accessorKey: 'name',
+      header: 'Name',
+      cell: ({ row }) => (
+        <div className="flex items-center gap-3">
+          <Avatar className="size-8">
+            <AvatarImage src={row.original.avatar} alt="" />
+            <AvatarFallback>{row.original.name.slice(0, 2).toUpperCase()}</AvatarFallback>
+          </Avatar>
+          <div>
+            <p className="text-sm font-medium leading-none">{row.original.name}</p>
+            <p className="mt-1 text-xs text-muted-foreground">{row.original.email}</p>
+          </div>
+        </div>
+      ),
+    },
+    {
+      accessorKey: 'role',
+      header: 'Role',
+      cell: ({ row }) =>
+        onRoleChange ? (
+          <Select value={row.original.role} onValueChange={(value) => onRoleChange(row.original.id, value)}>
+            <SelectTrigger className="h-8 w-32"><SelectValue /></SelectTrigger>
+            <SelectContent>
+              {roles.map((r) => <SelectItem key={r} value={r}>{r}</SelectItem>)}
+            </SelectContent>
+          </Select>
+        ) : (
+          <Badge variant="secondary">{row.original.role}</Badge>
+        ),
+    },
+    ...(onRemove ? [{
+      id: 'actions',
+      header: '',
+      cell: ({ row }) => (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="size-8">
+              <MoreHorizontal className="size-4" />
+              <span className="sr-only">Row actions</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem className="text-destructive" onClick={() => onRemove(row.original.id)}>
+              Remove member
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      ),
+      enableSorting: false,
+    } satisfies ColumnDef<TeamMemberRecord>] : []),
+  ], [roles, onRoleChange, onRemove]);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div>
+          <h2 className="text-base font-semibold">{title}</h2>
+          <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+        </div>
+        {onInvite && (
+          <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
+            <DialogTrigger asChild>
+              <Button><UserPlus className="size-4" /> Invite member</Button>
+            </DialogTrigger>
+            {/* key resets the form fields each time the dialog opens */}
+            <InviteDialog key={String(inviteOpen)} roles={roles} onInvite={onInvite} onClose={() => setInviteOpen(false)} />
+          </Dialog>
+        )}
+      </div>
+      <DataTable columns={columns} data={members} searchKey="name" searchPlaceholder="Search members…" pageSize={0} />
+    </div>
+  );
+}

package/src/components/ActivityFeed.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import * as React from 'react';
+import { Activity } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage, cn } from '@olwiba/cn';
+
+export interface ActivityFeedItem {
+  id: string;
+  /** Main line — pass rich nodes for emphasis, e.g. <><b>Ana</b> deployed to production</>. */
+  title: React.ReactNode;
+  description?: string;
+  /** Pre-formatted timestamp, e.g. "2h ago" or "Mar 4". */
+  timestamp?: string;
+  /** Avatar image — takes precedence over `icon`. */
+  avatar?: string;
+  /** Fallback initials when `avatar` is set but fails to load. */
+  initials?: string;
+  /** Icon node rendered in the timeline marker when there is no avatar. */
+  icon?: React.ReactNode;
+}
+
+export interface ActivityFeedProps {
+  items: ActivityFeedItem[];
+  emptyMessage?: string;
+  className?: string;
+}
+
+/**
+ * Vertical activity timeline — avatar or icon markers connected by a rail,
+ * one row per event. Presentation-only: pass pre-formatted timestamps and
+ * rich `title` nodes from your own data layer.
+ */
+export function ActivityFeed({
+  items,
+  emptyMessage = 'No activity yet.',
+  className,
+}: ActivityFeedProps) {
+  if (items.length === 0) {
+    return (
+      <div className={cn('flex flex-col items-center gap-2 py-10 text-center', className)}>
+        <Activity className="size-6 text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">{emptyMessage}</p>
+      </div>
+    );
+  }
+
+  return (
+    <ol className={className}>
+      {items.map((item, i) => (
+        <li key={item.id} className="relative flex gap-3 pb-6 last:pb-0">
+          {/* Rail connecting this marker to the next */}
+          {i !== items.length - 1 && (
+            <span aria-hidden className="absolute left-4 top-9 bottom-0 w-px -translate-x-1/2 bg-border" />
+          )}
+          <span className="relative z-10 flex size-8 shrink-0 items-center justify-center">
+            {item.avatar ? (
+              <Avatar className="size-8">
+                <AvatarImage src={item.avatar} alt="" />
+                <AvatarFallback className="text-xs">{item.initials ?? '?'}</AvatarFallback>
+              </Avatar>
+            ) : (
+              <span className="flex size-8 items-center justify-center rounded-full border bg-card text-muted-foreground [&>svg]:size-4">
+                {item.icon ?? <Activity />}
+              </span>
+            )}
+          </span>
+          <div className="min-w-0 flex-1 pt-1">
+            <div className="flex items-baseline justify-between gap-2">
+              <p className="text-sm">{item.title}</p>
+              {item.timestamp && (
+                <span className="shrink-0 text-xs text-muted-foreground">{item.timestamp}</span>
+              )}
+            </div>
+            {item.description && (
+              <p className="mt-0.5 text-xs text-muted-foreground">{item.description}</p>
+            )}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/components/CommandMenu.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from '@olwiba/cn';
+import { RegisterHotkeys } from './RegisterHotkeys';
+import { useControlledOpen } from '../hooks/use-controlled-open';
+
+export interface CommandMenuItem {
+  id: string;
+  label: string;
+  icon?: LucideIcon;
+  shortcut?: string;
+  keywords?: string[];
+  onSelect: () => void;
+}
+
+export interface CommandMenuGroup {
+  heading: string;
+  items: CommandMenuItem[];
+}
+
+export interface CommandMenuProps {
+  groups: CommandMenuGroup[];
+  placeholder?: string;
+  emptyMessage?: string;
+  /** Controlled open state — omit to let the component manage it internally. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Registers Cmd+K (mac) / Ctrl+K (win) to toggle the palette. @default true */
+  hotkey?: boolean;
+}
+
+/**
+ * Global search / Cmd+K command palette. One component — pass different
+ * `groups` per surface rather than building a bespoke dialog each time.
+ */
+export function CommandMenu({
+  groups,
+  placeholder = 'Type a command or search…',
+  emptyMessage = 'No results found.',
+  open: openProp,
+  onOpenChange,
+  hotkey = true,
+}: CommandMenuProps) {
+  const internal = useControlledOpen(false);
+  const isOpen = openProp ?? internal.isOpen;
+  const setOpen = React.useCallback(
+    (next: boolean) => {
+      if (openProp === undefined) internal.setIsOpen(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange, internal.setIsOpen],
+  );
+
+  const runItem = (item: CommandMenuItem) => {
+    setOpen(false);
+    item.onSelect();
+  };
+
+  return (
+    <>
+      {hotkey && (
+        <RegisterHotkeys
+          hotkeys={[
+            { key: 'k', meta: true, handler: () => setOpen(!isOpen) },
+            { key: 'k', ctrl: true, handler: () => setOpen(!isOpen) },
+          ]}
+        />
+      )}
+      <CommandDialog open={isOpen} onOpenChange={setOpen}>
+        <CommandInput placeholder={placeholder} />
+        <CommandList>
+          <CommandEmpty>{emptyMessage}</CommandEmpty>
+          {groups.map((group, i) => (
+            <React.Fragment key={group.heading}>
+              {i > 0 && <CommandSeparator />}
+              <CommandGroup heading={group.heading}>
+                {group.items.map((item) => (
+                  <CommandItem
+                    key={item.id}
+                    value={[item.label, ...(item.keywords ?? [])].join(' ')}
+                    onSelect={() => runItem(item)}
+                  >
+                    {item.icon && <item.icon />}
+                    <span>{item.label}</span>
+                    {item.shortcut && <CommandShortcut>{item.shortcut}</CommandShortcut>}
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </React.Fragment>
+          ))}
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}

package/src/components/DataTable.tsx

@@ -0,0 +1,212 @@
+'use client';
+
+import * as React from 'react';
+import {
+  type ColumnDef,
+  type SortingState,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronLeft, ChevronRight, Search } from 'lucide-react';
+import { Checkbox, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, cn } from '@olwiba/cn';
+import { Button } from '../primitives/Button';
+import { Input } from '../primitives/Input';
+
+export interface DataTableProps<TData> {
+  columns: ColumnDef<TData>[];
+  data: TData[];
+  /** Shows a quick-filter input above the table, matching against `searchKey`. */
+  searchKey?: string;
+  searchPlaceholder?: string;
+  /** Adds a checkbox column and reports the selected rows. */
+  selectable?: boolean;
+  onSelectionChange?: (rows: TData[]) => void;
+  /** Rows per page. Set to `0` to disable pagination entirely. @default 10 */
+  pageSize?: number;
+  /** Slot rendered top-right of the toolbar — e.g. an "Add" button. */
+  toolbar?: React.ReactNode;
+  onRowClick?: (row: TData) => void;
+  emptyMessage?: string;
+  className?: string;
+}
+
+const selectColumn: ColumnDef<Record<string, unknown>> = {
+  id: '__select',
+  header: ({ table }) => (
+    <Checkbox
+      checked={table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate')}
+      onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+      aria-label="Select all"
+    />
+  ),
+  cell: ({ row }) => (
+    <Checkbox
+      checked={row.getIsSelected()}
+      onCheckedChange={(value) => row.toggleSelected(!!value)}
+      onClick={(e) => e.stopPropagation()}
+      aria-label="Select row"
+    />
+  ),
+  enableSorting: false,
+};
+
+/**
+ * Sortable, paginated, optionally-selectable data table. One component —
+ * toggle `searchKey`/`selectable`/`pageSize` rather than reaching for a
+ * different table component per use case.
+ */
+export function DataTable<TData>({
+  columns,
+  data,
+  searchKey,
+  searchPlaceholder = 'Search…',
+  selectable = false,
+  onSelectionChange,
+  pageSize = 10,
+  toolbar,
+  onRowClick,
+  emptyMessage = 'No results.',
+  className,
+}: DataTableProps<TData>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = React.useState({});
+  const [globalFilter, setGlobalFilter] = React.useState('');
+
+  const allColumns = React.useMemo(
+    () => (selectable ? [selectColumn as ColumnDef<TData>, ...columns] : columns),
+    [selectable, columns],
+  );
+
+  const table = useReactTable({
+    data,
+    columns: allColumns,
+    state: { sorting, rowSelection, globalFilter },
+    onSortingChange: setSorting,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: (row, _columnId, filterValue) => {
+      if (!searchKey) return true;
+      const value = row.getValue(searchKey);
+      return String(value ?? '').toLowerCase().includes(String(filterValue).toLowerCase());
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    ...(pageSize > 0 ? { getPaginationRowModel: getPaginationRowModel() } : {}),
+    initialState: pageSize > 0 ? { pagination: { pageSize } } : undefined,
+    enableRowSelection: selectable,
+  });
+
+  React.useEffect(() => {
+    if (!onSelectionChange) return;
+    onSelectionChange(table.getSelectedRowModel().rows.map((r) => r.original));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowSelection]);
+
+  const rows = table.getRowModel().rows;
+
+  return (
+    <div className={cn('space-y-4', className)}>
+      {(searchKey || toolbar) && (
+        <div className="flex items-center justify-between gap-4">
+          {searchKey ? (
+            <div className="relative max-w-sm flex-1">
+              <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={globalFilter}
+                onChange={(e) => setGlobalFilter(e.target.value)}
+                placeholder={searchPlaceholder}
+                className="pl-8"
+              />
+            </div>
+          ) : <div />}
+          {toolbar}
+        </div>
+      )}
+
+      <div className="overflow-hidden rounded-lg border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  const canSort = header.column.getCanSort();
+                  const sortDir = header.column.getIsSorted();
+                  return (
+                    <TableHead
+                      key={header.id}
+                      aria-sort={sortDir === 'asc' ? 'ascending' : sortDir === 'desc' ? 'descending' : canSort ? 'none' : undefined}
+                    >
+                      {header.isPlaceholder ? null : canSort ? (
+                        <button
+                          type="button"
+                          className="flex items-center gap-1.5 font-medium hover:text-foreground"
+                          onClick={header.column.getToggleSortingHandler()}
+                        >
+                          {flexRender(header.column.columnDef.header, header.getContext())}
+                          {sortDir === 'asc' ? <ArrowUp className="size-3.5" /> : sortDir === 'desc' ? <ArrowDown className="size-3.5" /> : <ArrowUpDown className="size-3.5 text-muted-foreground/50" />}
+                        </button>
+                      ) : (
+                        flexRender(header.column.columnDef.header, header.getContext())
+                      )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {rows.length ? (
+              rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() ? 'selected' : undefined}
+                  onClick={() => onRowClick?.(row.original)}
+                  tabIndex={onRowClick ? 0 : undefined}
+                  onKeyDown={onRowClick ? (e) => {
+                    if (e.key === 'Enter' && e.target === e.currentTarget) onRowClick(row.original);
+                  } : undefined}
+                  className={cn(onRowClick && 'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring')}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={allColumns.length} className="h-24 text-center text-muted-foreground">
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {(selectable || (pageSize > 0 && table.getPageCount() > 1)) && (
+        <div className="flex items-center justify-between">
+          <p className="text-sm text-muted-foreground">
+            {selectable && `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} selected`}
+            {selectable && pageSize > 0 && table.getPageCount() > 1 && ' · '}
+            {pageSize > 0 && table.getPageCount() > 1 && `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
+          </p>
+          {pageSize > 0 && table.getPageCount() > 1 && (
+            <div className="flex gap-2">
+              <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+                <ChevronLeft className="size-4" /> Previous
+              </Button>
+              <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+                Next <ChevronRight className="size-4" />
+              </Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export type { ColumnDef as DataTableColumn };