@mostrom/app-shell 0.1.0

package/src/components/data-table/data-table-preferences.tsx

@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from "react"
+import type { Table } from "@tanstack/react-table"
+import { SettingsIcon } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Label } from "@/components/ui/label"
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
+
+export interface DataTablePreferences {
+  pageSize: number
+  columnDisplay: { id: string; visible: boolean }[]
+  stripedRows: boolean
+  contentDensity: "comfortable" | "compact"
+}
+
+export interface DataTablePreferencesProps<TData> {
+  table: Table<TData>
+  preferences: DataTablePreferences
+  onPreferencesChange: (preferences: DataTablePreferences) => void
+  pageSizeOptions?: number[]
+  trigger?: React.ReactNode
+}
+
+export function DataTablePreferencesDialog<TData>({
+  table,
+  preferences,
+  onPreferencesChange,
+  pageSizeOptions = [10, 20, 50],
+  trigger,
+}: DataTablePreferencesProps<TData>) {
+  const [open, setOpen] = React.useState(false)
+  const [localPreferences, setLocalPreferences] = React.useState(preferences)
+
+  // Sync local preferences when dialog opens
+  React.useEffect(() => {
+    if (open) {
+      setLocalPreferences(preferences)
+    }
+  }, [open, preferences])
+
+  // Generate column display options from table
+  const displayOptions = React.useMemo(() => {
+    return table
+      .getAllColumns()
+      .filter((col) => typeof col.accessorFn !== "undefined" && col.getCanHide())
+      .map((col) => ({
+        id: col.id,
+        label: (col.columnDef.meta as { headerTitle?: string })?.headerTitle || col.id,
+      }))
+  }, [table])
+
+  const handleConfirm = () => {
+    onPreferencesChange(localPreferences)
+    setOpen(false)
+  }
+
+  const handleColumnVisibilityChange = (columnId: string, visible: boolean) => {
+    const newColumnDisplay = localPreferences.columnDisplay.map((col) =>
+      col.id === columnId ? { ...col, visible } : col
+    )
+    setLocalPreferences({ ...localPreferences, columnDisplay: newColumnDisplay })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {trigger || (
+          <Button variant="outline" size="icon">
+            <SettingsIcon className="size-4" />
+            <span className="sr-only">Preferences</span>
+          </Button>
+        )}
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Preferences</DialogTitle>
+          <DialogDescription>
+            Customize how the table displays data.
+          </DialogDescription>
+        </DialogHeader>
+
+        <FieldGroup>
+          {/* Page Size */}
+          <Field>
+            <FieldLabel>Page size</FieldLabel>
+            <Select
+              value={String(localPreferences.pageSize)}
+              onValueChange={(value) =>
+                setLocalPreferences({ ...localPreferences, pageSize: Number(value) })
+              }
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {pageSizeOptions.map((size) => (
+                  <SelectItem key={size} value={String(size)}>
+                    {size} items
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </Field>
+
+          {/* Content Density */}
+          <Field>
+            <FieldLabel>Content density</FieldLabel>
+            <Select
+              value={localPreferences.contentDensity}
+              onValueChange={(value: "comfortable" | "compact") =>
+                setLocalPreferences({ ...localPreferences, contentDensity: value })
+              }
+            >
+              <SelectTrigger className="w-full">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="comfortable">Comfortable</SelectItem>
+                <SelectItem value="compact">Compact</SelectItem>
+              </SelectContent>
+            </Select>
+          </Field>
+
+          {/* Column Display */}
+          {displayOptions.length > 0 && (
+            <Field>
+              <FieldLabel>Column display</FieldLabel>
+              <div className="border-border space-y-2 rounded-lg border p-3">
+                {displayOptions.map((option) => {
+                  const columnPref = localPreferences.columnDisplay.find(
+                    (col) => col.id === option.id
+                  )
+                  const isVisible = columnPref?.visible ?? true
+
+                  return (
+                    <div key={option.id} className="flex items-center gap-2">
+                      <Checkbox
+                        id={`col-${option.id}`}
+                        checked={isVisible}
+                        onCheckedChange={(checked) =>
+                          handleColumnVisibilityChange(option.id, !!checked)
+                        }
+                      />
+                      <Label htmlFor={`col-${option.id}`} className="text-sm font-normal">
+                        {option.label}
+                      </Label>
+                    </div>
+                  )
+                })}
+              </div>
+            </Field>
+          )}
+        </FieldGroup>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button onClick={handleConfirm}>Confirm</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/data-table/data-table-toolbar.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import type { Table } from "@tanstack/react-table"
+import { Settings2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { DataGridColumnVisibility } from "@/components/reui/data-grid/data-grid-column-visibility"
+
+/**
+ * DataTableToolbar - Toolbar for table-specific controls.
+ *
+ * IMPORTANT: This toolbar should only contain table-specific controls like:
+ * - Search/filter input
+ * - Column visibility toggle
+ * - Selection-based bulk actions (e.g., "Delete Selected", "Archive Selected")
+ *
+ * For create/import/export actions, use CreateButtonGroup OUTSIDE the table.
+ * Place it above the DataGrid component, not inside the toolbar.
+ *
+ * @example
+ * ```tsx
+ * <div className="space-y-4">
+ *   <div className="flex items-center justify-between">
+ *     <h1>Items</h1>
+ *     <CreateButtonGroup
+ *       createLabel="Create Item"
+ *       onImport={() => {}}
+ *       onExport={() => {}}
+ *     />
+ *   </div>
+ *   <DataGrid table={table}>
+ *     <DataTableToolbar
+ *       table={table}
+ *       bulkActions={
+ *         selectedCount > 0 && (
+ *           <Button variant="destructive" size="sm">
+ *             Delete Selected ({selectedCount})
+ *           </Button>
+ *         )
+ *       }
+ *     />
+ *     ...
+ *   </DataGrid>
+ * </div>
+ * ```
+ */
+export interface DataTableToolbarProps<TData> {
+  table?: Table<TData>
+  filterValue?: string
+  onFilterChange?: (value: string) => void
+  filterPlaceholder?: string
+  showColumnVisibility?: boolean
+  selectedCount?: number
+  totalCount?: number
+  /**
+   * Selection-based bulk actions only (e.g., "Delete Selected", "Archive Selected").
+   * For create/import/export, use CreateButtonGroup above the table instead.
+   */
+  bulkActions?: React.ReactNode
+  className?: string
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  filterValue = "",
+  onFilterChange,
+  filterPlaceholder = "Search...",
+  showColumnVisibility = true,
+  selectedCount,
+  totalCount,
+  bulkActions,
+  className,
+}: DataTableToolbarProps<TData>) {
+  const showCounter = typeof selectedCount === "number" && typeof totalCount === "number"
+
+  return (
+    <div className={cn("flex items-center justify-between gap-2", className)}>
+      <div className="flex flex-1 items-center gap-2">
+        {/* Search Input */}
+        <div className="relative max-w-sm flex-1">
+          <Input
+            placeholder={filterPlaceholder}
+            value={filterValue}
+            onChange={(e) => onFilterChange?.(e.target.value)}
+          />
+        </div>
+
+        {/* Selection counter */}
+        {showCounter && selectedCount > 0 && (
+          <span className="text-muted-foreground text-sm">
+            {selectedCount} of {totalCount} selected
+          </span>
+        )}
+      </div>
+
+      <div className="flex items-center gap-2">
+        {/* Selection-based bulk actions */}
+        {bulkActions}
+
+        {/* Column visibility toggle */}
+        {showColumnVisibility && table && (
+          <DataGridColumnVisibility
+            table={table}
+            trigger={
+              <Button variant="outline" size="sm">
+                <Settings2Icon className="mr-2 size-4" />
+                Columns
+              </Button>
+            }
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/data-table/data-table.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+/**
+ * Data Table Components
+ *
+ * Re-exports from reui/data-grid for convenient access.
+ * Use these components directly following the patterns in the examples.
+ */
+
+// Core data grid components
+export { DataGrid, DataGridContainer } from "@/components/reui/data-grid/data-grid"
+export { DataGridTable, DataGridTableRowSelect, DataGridTableRowSelectAll } from "@/components/reui/data-grid/data-grid-table"
+export { DataGridTableDnd } from "@/components/reui/data-grid/data-grid-table-dnd"
+export { DataGridPagination } from "@/components/reui/data-grid/data-grid-pagination"
+export { DataGridColumnHeader } from "@/components/reui/data-grid/data-grid-column-header"
+export { DataGridColumnVisibility } from "@/components/reui/data-grid/data-grid-column-visibility"
+
+// Types from data-grid
+export type { DataGridProps, DataGridApiFetchParams, DataGridApiResponse } from "@/components/reui/data-grid/data-grid"
+
+// TanStack Table re-exports
+export {
+  useReactTable,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+} from "@tanstack/react-table"
+
+export type {
+  ColumnDef,
+  SortingState,
+  PaginationState,
+  RowSelectionState,
+  VisibilityState,
+  ColumnFiltersState,
+} from "@tanstack/react-table"

package/src/components/data-table/index.ts

@@ -0,0 +1,32 @@
+/**
+ * Data Table Components
+ *
+ * Re-exports from reui/data-grid for convenient access.
+ * Use these components directly following the patterns in the examples.
+ *
+ * IMPORTANT: CreateButtonGroup should be placed OUTSIDE/ABOVE the table,
+ * not inside the toolbar. The toolbar's bulkActions prop is only for
+ * selection-based actions like "Delete Selected".
+ */
+
+// Re-export core data-grid components
+export * from "./data-table"
+
+// Toolbar
+export { DataTableToolbar } from "./data-table-toolbar"
+export type { DataTableToolbarProps } from "./data-table-toolbar"
+
+// Preferences dialog
+export { DataTablePreferencesDialog } from "./data-table-preferences"
+export type {
+  DataTablePreferences as DataTablePreferencesType,
+  DataTablePreferencesProps,
+} from "./data-table-preferences"
+
+// Create button group (for use ABOVE the table, not in toolbar)
+export { CreateButtonGroup } from "../ui/create-button-group"
+export type { CreateButtonGroupProps } from "../ui/create-button-group"
+
+// Actions dropdown (replaces Cloudscape ButtonDropdown)
+export { ActionsDropdown } from "../ui/actions-dropdown"
+export type { ActionsDropdownProps, ActionsDropdownItem } from "../ui/actions-dropdown"

package/src/components/global-header/AllServicesButton.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+import React from "react";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import type {
+  MenuDropdownItems,
+  MenuDropdownItem,
+  MenuDropdownItemGroup,
+  MenuItemClickHandler,
+} from "./ServicesMenu";
+
+type AllServicesButtonProps = {
+  items: MenuDropdownItems;
+  onItemClick?: MenuItemClickHandler;
+};
+
+const DotsNineIcon = () => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+  >
+    {([5, 12, 19] as const).flatMap((cx) =>
+      ([5, 12, 19] as const).map((cy) => (
+        <circle key={`${cx}-${cy}`} cx={cx} cy={cy} r={1.6} fill="currentColor" />
+      )),
+    )}
+  </svg>
+);
+
+const isGroup = (item: MenuDropdownItem | MenuDropdownItemGroup): item is MenuDropdownItemGroup =>
+  typeof (item as MenuDropdownItemGroup).items !== "undefined";
+
+export function AllServicesButton({ items, onItemClick }: AllServicesButtonProps) {
+  const handleItemClick = (item: MenuDropdownItem) => {
+    if (item.disabled) return;
+    onItemClick?.({
+      id: item.id,
+      href: item.href,
+      external: item.external,
+    });
+  };
+
+  const renderItem = (item: MenuDropdownItem) => {
+    const content = (
+      <>
+        <span>{item.text}</span>
+        {item.description && (
+          <span className="text-xs text-muted-foreground ml-2">{item.description}</span>
+        )}
+      </>
+    );
+
+    if (item.href) {
+      return (
+        <DropdownMenuItem key={item.id} asChild disabled={item.disabled}>
+          <a
+            href={item.href}
+            target={item.external ? "_blank" : undefined}
+            rel={item.external ? "noopener noreferrer" : undefined}
+            onClick={() => handleItemClick(item)}
+          >
+            {content}
+          </a>
+        </DropdownMenuItem>
+      );
+    }
+
+    return (
+      <DropdownMenuItem
+        key={item.id}
+        disabled={item.disabled}
+        onSelect={() => handleItemClick(item)}
+      >
+        {content}
+      </DropdownMenuItem>
+    );
+  };
+
+  return (
+    <div className="app-shell-apps-button">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label="Apps"
+            className="h-9 w-9 hover:bg-transparent"
+          >
+            <span className="app-shell-apps-icon">
+              <DotsNineIcon />
+            </span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" sideOffset={8} className="w-64 max-h-96 overflow-y-auto">
+          {items.map((item, index) => {
+            if (isGroup(item)) {
+              return (
+                <React.Fragment key={item.text || `group-${index}`}>
+                  {index > 0 && <DropdownMenuSeparator />}
+                  <DropdownMenuGroup>
+                    {item.text && (
+                      <DropdownMenuLabel>{item.text}</DropdownMenuLabel>
+                    )}
+                    {item.items.map((subItem) => renderItem(subItem as MenuDropdownItem))}
+                  </DropdownMenuGroup>
+                </React.Fragment>
+              );
+            }
+            return renderItem(item as MenuDropdownItem);
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/components/global-header/CategoriesButton.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import React from "react";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import type {
+  MenuDropdownItems,
+  MenuDropdownItem,
+  MenuDropdownItemGroup,
+  MenuItemClickHandler,
+} from "./ServicesMenu";
+
+type CategoriesButtonProps = {
+  items: MenuDropdownItems;
+  onItemClick?: MenuItemClickHandler;
+};
+
+const SquaresFourIcon = () => (
+  <svg
+    aria-hidden="true"
+    focusable="false"
+    width="22"
+    height="22"
+    viewBox="0 0 24 24"
+  >
+    <rect x="4" y="4" width="7" height="7" rx="1.4" fill="currentColor" />
+    <rect x="13" y="4" width="7" height="7" rx="1.4" fill="currentColor" />
+    <rect x="4" y="13" width="7" height="7" rx="1.4" fill="currentColor" />
+    <rect x="13" y="13" width="7" height="7" rx="1.4" fill="currentColor" />
+  </svg>
+);
+
+const isGroup = (item: MenuDropdownItem | MenuDropdownItemGroup): item is MenuDropdownItemGroup =>
+  typeof (item as MenuDropdownItemGroup).items !== "undefined";
+
+const flattenItems = (items: MenuDropdownItems): MenuDropdownItem[] => {
+  const result: MenuDropdownItem[] = [];
+  items.forEach((item) => {
+    if (isGroup(item)) {
+      result.push(...flattenItems(item.items));
+    } else {
+      result.push(item as MenuDropdownItem);
+    }
+  });
+  return result;
+};
+
+export function CategoriesButton({ items, onItemClick }: CategoriesButtonProps) {
+  const flatItems = flattenItems(items);
+
+  const handleItemClick = (item: MenuDropdownItem) => {
+    if (item.disabled) return;
+    onItemClick?.({
+      id: item.id,
+      href: item.href,
+      external: item.external,
+    });
+  };
+
+  return (
+    <div className="app-shell-categories-button">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label="Categories"
+            className="h-9 w-9 hover:bg-transparent"
+          >
+            <span className="app-shell-categories-icon">
+              <SquaresFourIcon />
+            </span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" sideOffset={8} className="w-56">
+          {flatItems.map((item) => {
+            const content = (
+              <>
+                <span>{item.text}</span>
+                {item.description && (
+                  <span className="text-xs text-muted-foreground ml-2">{item.description}</span>
+                )}
+              </>
+            );
+
+            if (item.href) {
+              return (
+                <DropdownMenuItem key={item.id} asChild disabled={item.disabled}>
+                  <a
+                    href={item.href}
+                    target={item.external ? "_blank" : undefined}
+                    rel={item.external ? "noopener noreferrer" : undefined}
+                    onClick={() => handleItemClick(item)}
+                  >
+                    {content}
+                  </a>
+                </DropdownMenuItem>
+              );
+            }
+
+            return (
+              <DropdownMenuItem
+                key={item.id}
+                disabled={item.disabled}
+                onSelect={() => handleItemClick(item)}
+              >
+                {content}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}

package/src/components/global-header/GlobalHeader.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+export interface GlobalHeaderIdentity {
+  /** Logo image configuration */
+  logo?: {
+    src: string;
+    alt: string;
+  };
+  /** Link when clicking the identity/logo */
+  href?: string;
+  /** Text to display next to or instead of logo */
+  title?: string;
+}
+
+export interface GlobalHeaderProps {
+  /** Platform identity/branding shown in the top-left */
+  identity?: GlobalHeaderIdentity;
+  /** Search area content (center of header) */
+  search?: React.ReactNode;
+  /** Utility components for the right side of the header */
+  utilities?: React.ReactNode;
+}
+
+export function GlobalHeader({ identity, search, utilities }: GlobalHeaderProps) {
+  const logoElement = identity?.logo ? (
+    <img
+      src={identity.logo.src}
+      alt={identity.logo.alt}
+      className="app-shell-header-logo"
+    />
+  ) : null;
+
+  const identityContent = identity?.href ? (
+    <a href={identity.href} className="app-shell-header-identity-link">
+      {logoElement}
+      {identity.title && <span className="app-shell-header-title">{identity.title}</span>}
+    </a>
+  ) : (
+    <div className="app-shell-header-identity">
+      {logoElement}
+      {identity?.title && <span className="app-shell-header-title">{identity.title}</span>}
+    </div>
+  );
+
+  return (
+    // suppressHydrationWarning: browser extensions (Dashlane, 1Password, etc.) inject attributes before hydration
+    <header id="global-header" className="app-shell-header" suppressHydrationWarning>
+      <div className="app-shell-header-left">
+        {identityContent}
+      </div>
+      <div className="app-shell-header-center">
+        {search}
+      </div>
+      <div className="app-shell-header-right">
+        {utilities}
+      </div>
+    </header>
+  );
+}