@mostrom/app-shell 0.1.0

package/src/components/sectioned-list-board/types.ts

@@ -0,0 +1,216 @@
+import type { ReactNode } from "react";
+import type { Assignee } from "@/components/ui/assignee-selector";
+
+// Re-export Assignee from shared location
+export type { Assignee };
+
+export interface BoardSection<T> {
+  id: string;
+  name: string;
+  items: T[];
+  collapsed?: boolean;
+}
+
+export interface FilterOption {
+  id: string;
+  label: string;
+  value: string;
+  field: string;
+}
+
+export interface SortOption {
+  id: string;
+  label: string;
+  field: string;
+}
+
+export interface SortState {
+  field: string | null;
+  direction: "asc" | "desc" | null;
+}
+
+export interface FilterState {
+  field: string | null;
+  value: string | null;
+}
+
+export interface DateRangeState {
+  from: Date | undefined;
+  to: Date | undefined;
+}
+
+export interface DragState {
+  isDragging: boolean;
+  dragType: "section" | "card" | null;
+  activeId: string | null;
+}
+
+export type BoardTaskAction =
+  | "duplicate"
+  | "markComplete"
+  | "addSubtask"
+  | "openTaskDetails"
+  | "openInNewTab"
+  | "copyTaskLink"
+  | "delete";
+
+/** Event fired when an item is opened (click, context menu, or keyboard) */
+export interface ItemOpenEvent<T> {
+  item: T;
+  itemId: string;
+  sectionId: string;
+  source: "click" | "context-menu" | "keyboard";
+}
+
+/** Configuration for the built-in drawer */
+export interface DrawerProps {
+  /** Which side the drawer opens from */
+  side?: "right" | "left";
+  /** Width of the drawer */
+  width?: number | string;
+}
+
+export type BoardBadgeColor = "red" | "blue" | "green" | "grey";
+
+export interface BoardCardBadgeField<T> {
+  field: Extract<keyof T, string>;
+  colorMap?: Record<string, BoardBadgeColor>;
+  defaultColor?: BoardBadgeColor;
+}
+
+export interface BoardCardAvatarField<T> {
+  field: Extract<keyof T, string>;
+  /** Whether the assignee can be edited via command dialog */
+  editable?: boolean;
+}
+
+export interface BoardCardDateField<T> {
+  field: Extract<keyof T, string>;
+  editable?: boolean;
+}
+
+export interface BoardCardConfig<T> {
+  titleField: Extract<keyof T, string>;
+  badgeField?: BoardCardBadgeField<T>;
+  avatarField?: BoardCardAvatarField<T>;
+  dateField?: BoardCardDateField<T>;
+}
+
+export interface SectionedListBoardProps<T> {
+  /** Array of sections containing items */
+  sections: BoardSection<T>[];
+  /** Function to get unique ID from item */
+  getItemId: (item: T) => string;
+  /** Data-driven card configuration */
+  cardConfig: BoardCardConfig<T>;
+  /** Optional callback for updating non-title card fields */
+  onItemFieldChange?: (
+    sectionId: string,
+    itemId: string,
+    field: Extract<keyof T, string>,
+    value: unknown
+  ) => void;
+  /** Optional function to check if item is completed */
+  isItemCompleted?: (item: T) => boolean;
+
+  // Section handlers
+  onSectionReorder?: (sections: BoardSection<T>[]) => void;
+  onToggleSection?: (sectionId: string) => void;
+  onRenameSection?: (sectionId: string, name: string) => void;
+  onAddSection?: (afterSectionId?: string) => void;
+  onDeleteSection?: (sectionId: string) => void;
+
+  // Item handlers
+  onItemReorder?: (sectionId: string, items: T[]) => void;
+  onItemMoveToSection?: (
+    item: T,
+    fromSectionId: string,
+    toSectionId: string,
+    targetIndex?: number
+  ) => void;
+  onAddItem?: (sectionId: string) => void;
+  onItemTitleEdit?: (sectionId: string, itemId: string, newTitle: string) => void;
+  onItemComplete?: (sectionId: string, itemId: string, completed: boolean) => void;
+  onItemAction?: (
+    sectionId: string,
+    itemId: string,
+    action: BoardTaskAction
+  ) => void;
+
+  // Filter/Sort
+  filterOptions?: FilterOption[];
+  sortOptions?: SortOption[];
+  filter?: FilterState;
+  sort?: SortState;
+  onFilterChange?: (filter: FilterState) => void;
+  onSortChange?: (sort: SortState) => void;
+
+  // Date Range Filter
+  dateRange?: DateRangeState;
+  onDateRangeChange?: (dateRange: DateRangeState) => void;
+  /** Label for the date range filter button (defaults to "Date") */
+  dateRangeLabel?: string;
+
+  /** List of available assignees for the assignee selector */
+  assignees?: Assignee[];
+
+  // Item Details Drawer
+  /** Callback fired when an item is opened (click, context menu, or keyboard) */
+  onItemOpen?: (event: ItemOpenEvent<T>) => void;
+  /** Render function for item details - when provided, enables built-in drawer */
+  renderItemDetails?: (item: T) => ReactNode;
+  /** Configuration for the built-in drawer */
+  drawerProps?: DrawerProps;
+}
+
+export interface SortableBoardSectionProps<T> {
+  sortableId: string;
+  section: BoardSection<T>;
+  getItemId: (item: T) => string;
+  cardConfig: BoardCardConfig<T>;
+  onItemFieldChange?: (itemId: string, field: Extract<keyof T, string>, value: unknown) => void;
+  onToggle: () => void;
+  onRename: (name: string) => void;
+  onAddItem: () => void;
+  onDelete: () => void;
+  onItemTitleEdit?: (itemId: string, newTitle: string) => void;
+  onItemComplete?: (itemId: string, completed: boolean) => void;
+  onItemAction?: (itemId: string, action: BoardTaskAction) => void;
+  /** Callback fired when an item is opened */
+  onItemOpen?: (event: ItemOpenEvent<T>) => void;
+  isDragDisabled: boolean;
+  isItemCompleted?: (item: T) => boolean;
+  collapseDuringDrag?: boolean;
+  dropIndicatorPosition?: "before" | "after" | null;
+  cardDropIndicatorIndex?: number | null;
+  /** List of available assignees for the assignee selector */
+  assignees?: Assignee[];
+}
+
+export interface SortableBoardCardProps<T> {
+  item: T;
+  itemId: string;
+  index: number;
+  sectionId: string;
+  cardConfig: BoardCardConfig<T>;
+  isCompleted: boolean;
+  isDragDisabled: boolean;
+  onTitleEdit?: (newTitle: string) => void;
+  onComplete?: (completed: boolean) => void;
+  onTaskAction?: (action: BoardTaskAction) => void;
+  onFieldChange?: (field: Extract<keyof T, string>, value: unknown) => void;
+  /** Callback fired when the item is opened (click, context menu, or keyboard) */
+  onItemOpen?: (source: "click" | "context-menu" | "keyboard") => void;
+  /** List of available assignees for the assignee selector */
+  assignees?: Assignee[];
+}
+
+export interface BoardCardContentProps<T> {
+  item: T;
+  cardConfig: BoardCardConfig<T>;
+  titleContent?: ReactNode;
+  onFieldChange?: (field: Extract<keyof T, string>, value: unknown) => void;
+  interactive?: boolean;
+  /** List of available assignees for the assignee selector */
+  assignees?: Assignee[];
+}

package/src/components/sectioned-list-table/README.md

@@ -0,0 +1,80 @@
+# Sectioned List Table
+
+Data-driven, reusable sectioned table with draggable sections/rows and configurable columns.
+
+## Goal
+
+`SectionedListTable` is **bring your own data only**:
+- Consumers provide section/row data.
+- Consumers describe columns with field metadata.
+- Consumers do **not** provide custom cell render functions.
+
+## Usage
+
+```tsx
+import {
+  SectionedListTable,
+  type ColumnDefinition,
+  type Section,
+  type SortState,
+} from "~/components/shared/sectioned-list-table";
+
+type Deal = {
+  id: string;
+  name: string;
+  assignee: string;
+  value: number;
+  status: string;
+  priority: "High" | "Medium" | "Low";
+  completed: boolean;
+};
+
+const columns: ColumnDefinition<Deal>[] = [
+  { id: "name", header: "Name", field: "name", type: "text", sortable: true, width: 250 },
+  { id: "assignee", header: "Assignee", field: "assignee", type: "avatar", editable: false, width: 100 },
+  { id: "value", header: "Value", field: "value", type: "currency", currencyCode: "USD", editable: false, width: 120 },
+  {
+    id: "priority",
+    header: "Priority",
+    field: "priority",
+    type: "badge",
+    badgeColorMap: { High: "red", Medium: "blue", Low: "green" },
+    editable: false,
+    width: 100,
+  },
+];
+
+function ExampleTable({ sections }: { sections: Section<Deal>[] }) {
+  const [sort, setSort] = React.useState<SortState>({ columnId: null, direction: null });
+
+  return (
+    <SectionedListTable
+      columns={columns}
+      sections={sections}
+      getItemId={(item) => item.id}
+      isItemCompleted={(item) => item.completed}
+      sort={sort}
+      onSort={setSort}
+      onCellEdit={(sectionId, rowIndex, field, value) => {
+        // Persist data field update
+      }}
+    />
+  );
+}
+```
+
+## Column Model
+
+- `field`: Data key used for display and editing.
+- `type`:
+  - `text`: plain string rendering.
+  - `currency`: localized currency formatting.
+  - `badge`: Cloudscape badge with optional `badgeColorMap`.
+  - `avatar`: initials avatar from string field.
+- `editable`: defaults to editable for `text`; set `false` to lock.
+
+## Notes
+
+- Row drag is disabled when sort or filter text is active.
+- Inline editing currently applies to `text` columns.
+- For data consistency, keep `id` aligned with `field` unless you handle mapping in callbacks.

package/src/components/sectioned-list-table/index.ts

@@ -0,0 +1,14 @@
+export { SectionedListTable } from "./sectioned-list-table";
+export type {
+  Assignee,
+  ColumnDefinition,
+  TableColumnType,
+  TableBadgeColor,
+  TableTaskAction,
+  Section,
+  SortState,
+  SectionedListTableProps,
+  ColumnPreferences,
+  ItemOpenEvent,
+  DrawerProps,
+} from "./types";