@stll/workspace-ui 0.0.1-placeholder.0 → 0.2.0

package/dist/property-icon.js

@@ -0,0 +1,56 @@
+import { AlertCircleIcon, BanknoteIcon, CalendarIcon, CircleDotIcon, FileIcon, FileQuestionIcon, HashIcon, LinkIcon, ListChecksIcon, TextIcon, UserIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@stll/ui/utils";
+//#region src/property-icon.tsx
+const propertyMap = {
+	text: {
+		icon: TextIcon,
+		label: "Text"
+	},
+	money: {
+		icon: BanknoteIcon,
+		label: "Money"
+	},
+	person: {
+		icon: UserIcon,
+		label: "Person"
+	},
+	file: {
+		icon: FileIcon,
+		label: "File"
+	},
+	error: {
+		icon: AlertCircleIcon,
+		label: "Error"
+	},
+	"single-select": {
+		icon: CircleDotIcon,
+		label: "Single Select"
+	},
+	"multi-select": {
+		icon: ListChecksIcon,
+		label: "Multi Select"
+	},
+	unsupported: {
+		icon: FileQuestionIcon,
+		label: "Unsupported"
+	},
+	date: {
+		icon: CalendarIcon,
+		label: "Date"
+	},
+	int: {
+		icon: HashIcon,
+		label: "Number"
+	},
+	clip: {
+		icon: LinkIcon,
+		label: "Clip"
+	}
+};
+const PropertyIcon = ({ type, className }) => {
+	const Icon = propertyMap[type].icon;
+	return /* @__PURE__ */ jsx(Icon, { className: cn("size-3.5 shrink-0", className) });
+};
+//#endregion
+export { PropertyIcon };

package/dist/sorts.d.ts

@@ -0,0 +1,41 @@
+import { PropertyIconType } from "./property-icon.js";
+//#region src/sorts.d.ts
+/** One sort a view carries. */
+type SortDescriptor = {
+  propertyId: string;
+  desc: boolean;
+};
+/** A property a view may sort by. */
+type SortableProperty = {
+  id: string;
+  name: string;
+  type: PropertyIconType;
+};
+type SortChipsLabels = {
+  /** Accessible name of the "add a sort" trigger. */
+  add: string;
+  /** Accessible name of a chip's remove button. */
+  remove: string;
+};
+type SortChipsProps = {
+  sorts: readonly SortDescriptor[];
+  properties: readonly SortableProperty[];
+  onUpdate: (sorts: SortDescriptor[]) => void;
+  labels: SortChipsLabels;
+};
+/**
+ * The view's sorts as chips, plus the menu that adds one.
+ *
+ * A sort is a property id and a direction; which properties can be sorted is
+ * the caller's answer, so this reads nothing but the three fields a chip
+ * draws.
+ */
+declare const SortChips: ({ sorts, properties, onUpdate, labels }: SortChipsProps) => import("react").JSX.Element;
+/**
+ * What ascending means depends on what is being sorted: A→Z for words, 1→9 for
+ * numbers, an arrow for dates. A type with no idiom falls back to the arrow
+ * icon, which is why this returns null rather than a default string.
+ */
+declare const sortDirectionHint: (propertyType: string | undefined, desc: boolean) => string | null;
+//#endregion
+export { SortChips, SortChipsLabels, SortChipsProps, SortDescriptor, SortableProperty, sortDirectionHint };

package/dist/sorts.js

@@ -0,0 +1,99 @@
+import { PropertyIcon } from "./property-icon.js";
+import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon, XIcon } from "lucide-react";
+import { Button } from "@stll/ui/button";
+import { Menu, MenuItem, MenuPopup, MenuTrigger } from "@stll/ui/menu";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/sorts.tsx
+/**
+* The view's sorts as chips, plus the menu that adds one.
+*
+* A sort is a property id and a direction; which properties can be sorted is
+* the caller's answer, so this reads nothing but the three fields a chip
+* draws.
+*/
+const SortChips = ({ sorts, properties, onUpdate, labels }) => /* @__PURE__ */ jsxs(Fragment, { children: [sorts.map((sort) => {
+	const property = properties.find((candidate) => candidate.id === sort.propertyId);
+	if (!property) return null;
+	return /* @__PURE__ */ jsx(SortChip, {
+		desc: sort.desc,
+		labels,
+		onRemove: () => {
+			onUpdate(sorts.filter((candidate) => candidate.propertyId !== sort.propertyId));
+		},
+		onToggle: () => {
+			onUpdate(sorts.map((candidate) => candidate.propertyId === sort.propertyId ? {
+				...candidate,
+				desc: !candidate.desc
+			} : candidate));
+		},
+		propertyName: property.name,
+		propertyType: property.type
+	}, sort.propertyId);
+}), /* @__PURE__ */ jsx(AddSortButton, {
+	labels,
+	onAdd: (sort) => onUpdate([...sorts, sort]),
+	properties,
+	sortedPropertyIds: new Set(sorts.map((sort) => sort.propertyId))
+})] });
+/**
+* What ascending means depends on what is being sorted: A→Z for words, 1→9 for
+* numbers, an arrow for dates. A type with no idiom falls back to the arrow
+* icon, which is why this returns null rather than a default string.
+*/
+const sortDirectionHint = (propertyType, desc) => {
+	if (!propertyType) return null;
+	switch (propertyType) {
+		case "text":
+		case "single-select":
+		case "multi-select":
+		case "file":
+		case "person": return desc ? "Z→A" : "A→Z";
+		case "int":
+		case "money": return desc ? "9→1" : "1→9";
+		case "date": return desc ? "↓" : "↑";
+		default: return null;
+	}
+};
+const SortChip = ({ propertyName, propertyType, desc, onToggle, onRemove, labels }) => {
+	const SortIcon = desc ? ArrowDownIcon : ArrowUpIcon;
+	const hint = sortDirectionHint(propertyType, desc);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bg-muted/50 flex items-center rounded-md border",
+		children: [/* @__PURE__ */ jsxs(Button, {
+			onClick: onToggle,
+			size: "xs",
+			variant: "ghost",
+			children: [
+				!hint && /* @__PURE__ */ jsx(SortIcon, {}),
+				propertyName,
+				hint && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: hint
+				})
+			]
+		}), /* @__PURE__ */ jsx(Button, {
+			"aria-label": labels.remove,
+			onClick: onRemove,
+			size: "icon-xs",
+			variant: "ghost",
+			children: /* @__PURE__ */ jsx(XIcon, {})
+		})]
+	});
+};
+const AddSortButton = ({ properties, sortedPropertyIds, onAdd, labels }) => /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuTrigger, {
+	"aria-label": labels.add,
+	render: /* @__PURE__ */ jsx(Button, {
+		size: "icon-xs",
+		variant: "ghost"
+	}),
+	children: /* @__PURE__ */ jsx(ArrowUpDownIcon, {})
+}), /* @__PURE__ */ jsx(MenuPopup, { children: properties.map((property) => /* @__PURE__ */ jsxs(MenuItem, {
+	disabled: sortedPropertyIds.has(property.id),
+	onClick: () => onAdd({
+		propertyId: property.id,
+		desc: false
+	}),
+	children: [/* @__PURE__ */ jsx(PropertyIcon, { type: property.type }), property.name]
+}, property.id)) })] });
+//#endregion
+export { SortChips, sortDirectionHint };

package/dist/table-skeleton-rows.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { Column, RowData, TableFeatures } from "@tanstack/react-table";
+//#region src/table-skeleton-rows.d.ts
+type TableSkeletonRowsProps<TFeatures extends TableFeatures, TData extends RowData> = {
+  columns: readonly Column<TFeatures, TData>[];
+  rowCount?: number;
+  renderCell?: (column: Column<TFeatures, TData>) => ReactNode;
+};
+/**
+ * Loading rows generated from the table's own column model, so the skeleton
+ * cannot drift from the real table: add, remove, or reorder a column and the
+ * placeholder gains, loses, or moves the matching cell automatically. Render it
+ * inside the same `<TableBody>` the real rows use, passing the table's leaf
+ * columns (e.g. `table.getAllLeafColumns()`).
+ */
+declare const TableSkeletonRows: <TFeatures extends TableFeatures, TData extends RowData>({ columns, rowCount, renderCell }: TableSkeletonRowsProps<TFeatures, TData>) => import("react").JSX.Element[];
+//#endregion
+export { TableSkeletonRows };

package/dist/table-skeleton-rows.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { Skeleton } from "@stll/ui/skeleton";
+import { TableCell, TableRow } from "@stll/ui/table";
+//#region src/table-skeleton-rows.tsx
+const SKELETON_ROW_KEYS = [
+	"a",
+	"b",
+	"c",
+	"d",
+	"e",
+	"f",
+	"g",
+	"h",
+	"i",
+	"j",
+	"k",
+	"l"
+];
+const DEFAULT_SKELETON_ROW_COUNT = 8;
+/**
+* Loading rows generated from the table's own column model, so the skeleton
+* cannot drift from the real table: add, remove, or reorder a column and the
+* placeholder gains, loses, or moves the matching cell automatically. Render it
+* inside the same `<TableBody>` the real rows use, passing the table's leaf
+* columns (e.g. `table.getAllLeafColumns()`).
+*/
+const TableSkeletonRows = ({ columns, rowCount = DEFAULT_SKELETON_ROW_COUNT, renderCell }) => {
+	return SKELETON_ROW_KEYS.slice(0, Math.min(rowCount, SKELETON_ROW_KEYS.length)).map((rowKey) => /* @__PURE__ */ jsx(TableRow, { children: columns.map((column) => {
+		const custom = renderCell?.(column);
+		return /* @__PURE__ */ jsx(TableCell, { children: custom === void 0 ? /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/5" }) : custom }, column.id);
+	}) }, rowKey));
+};
+//#endregion
+export { TableSkeletonRows };

package/dist/types.d.ts

@@ -0,0 +1,89 @@
+import { OptionColor, OptionColor as OptionColor$1 } from "@stll/ui/option-color";
+//#region src/types.d.ts
+type FieldContent = {
+  type: "error";
+  version: 1;
+} | {
+  type: "pending";
+  version: 1;
+} | {
+  type: "unsupported";
+  version: 1;
+} | {
+  type: "text";
+  version: 1;
+  value: string;
+} | {
+  type: "single-select";
+  version: 1;
+  value: string | null;
+} | {
+  type: "multi-select";
+  version: 1;
+  value: string[];
+} | {
+  type: "file";
+  version: 1;
+  id: string;
+  fileName: string;
+  mimeType: string;
+  sizeBytes: number;
+  encrypted: boolean;
+  sha256Hex: string;
+  pdfFileId: string | null;
+} | {
+  type: "date";
+  version: 1;
+  value: string | null;
+} | {
+  type: "int";
+  version: 1;
+  value: number;
+  currency: string | null;
+} | {
+  /**
+   * A monetary amount. Separate from `int` because it is stored in minor
+   * units and carries its own currency: an int's value is major units, so
+   * one type for both is a 100x bug waiting in every total.
+   */
+  type: "money";
+  version: 1;
+  amountCents: number;
+  currency: string;
+} | {
+  type: "person";
+  version: 1;
+  /** Null when the person is named but not a workspace member. */
+  userId: string | null;
+  name: string;
+  image: string | null;
+} | {
+  type: "clip";
+  version: 1;
+  url: string;
+  snippet?: string;
+  citation?: string;
+  jurisdiction?: string;
+  sourceType?: string;
+};
+/** Runtime names for every content arm the field renderer understands. */
+declare const FIELD_CONTENT_TYPES: readonly ["error", "pending", "unsupported", "text", "single-select", "multi-select", "file", "date", "int", "money", "person", "clip"];
+type WorkspaceFieldContent = FieldContent;
+/**
+ * Minimal structural bound the display layer needs from a property: the cell
+ * renderers only read `content.type` and, for selects, the `options` colors.
+ * Real callers (e.g. the app's `WorkspaceProperty`) satisfy this structurally.
+ */
+type GenericProperty = {
+  content: {
+    type: "file" | "text" | "date" | "int" | "money" | "person";
+  } | {
+    type: "single-select" | "multi-select";
+    options: {
+      value: string;
+      color: OptionColor$1;
+    }[];
+  };
+};
+//#endregion
+export { FIELD_CONTENT_TYPES, FieldContent, GenericProperty, type OptionColor, WorkspaceFieldContent };

package/dist/types.js

@@ -0,0 +1,17 @@
+/** Runtime names for every content arm the field renderer understands. */
+const FIELD_CONTENT_TYPES = [
+	"error",
+	"pending",
+	"unsupported",
+	"text",
+	"single-select",
+	"multi-select",
+	"file",
+	"date",
+	"int",
+	"money",
+	"person",
+	"clip"
+];
+//#endregion
+export { FIELD_CONTENT_TYPES };

package/dist/view-switcher.d.ts

@@ -0,0 +1,33 @@
+import { WorkspaceViewDirection } from "./view-switcher.logic.js";
+//#region src/view-switcher.d.ts
+type WorkspaceViewSwitcherItem = {
+  id: string;
+  name: string;
+};
+type WorkspaceViewSwitcherEditing<View> = {
+  viewId: string;
+  renderLabel: (view: View) => React.ReactNode;
+};
+type WorkspaceViewSwitcherReorder<View> = {
+  getDragData?: (view: View) => Record<string | symbol, unknown>;
+  getDropData?: (view: View) => Record<string | symbol, unknown>;
+  isBlocked?: boolean;
+  onReorder: (viewIds: string[]) => void;
+};
+type WorkspaceViewSwitcherProps<View extends WorkspaceViewSwitcherItem> = {
+  activeViewId: string;
+  ariaLabel: string;
+  direction: WorkspaceViewDirection;
+  reorder: WorkspaceViewSwitcherReorder<View> | null;
+  views: readonly View[];
+  addControl?: React.ReactNode;
+  editing?: WorkspaceViewSwitcherEditing<View> | null;
+  onViewChange: (viewId: string) => void;
+  onViewContextMenu?: (view: View, event: React.MouseEvent<HTMLElement>) => void;
+  onViewDoubleClick?: (view: View, event: React.MouseEvent<HTMLElement>) => void;
+  renderActions?: (view: View) => React.ReactNode;
+  renderIcon: (view: View) => React.ReactNode;
+};
+declare const WorkspaceViewSwitcher: <View extends WorkspaceViewSwitcherItem>({ activeViewId, ariaLabel, direction, reorder, views, addControl, editing, onViewChange, onViewContextMenu, onViewDoubleClick, renderActions, renderIcon }: WorkspaceViewSwitcherProps<View>) => import("react").JSX.Element;
+//#endregion
+export { WorkspaceViewSwitcher, WorkspaceViewSwitcherEditing, WorkspaceViewSwitcherItem, WorkspaceViewSwitcherProps, WorkspaceViewSwitcherReorder };

package/dist/view-switcher.js

@@ -0,0 +1,159 @@
+"use client";
+import { reorderWorkspaceViewIds, toWorkspaceViewDropPosition } from "./view-switcher.logic.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@stll/ui/utils";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { Tabs, TabsList, TabsTab } from "@stll/ui/tabs";
+//#region src/view-switcher.tsx
+const VIEW_DRAG_TYPE = "@stll/workspace-ui/view-switcher/drag-type";
+const VIEW_DRAG_ID = "@stll/workspace-ui/view-switcher/view-id";
+const VIEW_DRAG_INSTANCE = "@stll/workspace-ui/view-switcher/instance";
+const useLatestCallback = (callback) => {
+	const latest = useRef(callback);
+	useEffect(() => {
+		latest.current = callback;
+	}, [callback]);
+	return useCallback((...args) => latest.current(...args), []);
+};
+const WorkspaceViewSwitcher = ({ activeViewId, ariaLabel, direction, reorder, views, addControl, editing, onViewChange, onViewContextMenu, onViewDoubleClick, renderActions, renderIcon }) => {
+	const canReorder = reorder !== null;
+	const [instanceId] = useState(Symbol);
+	const [stripContainer, setStripContainer] = useState(null);
+	useEffect(() => {
+		if (!stripContainer || !canReorder) return;
+		return dropTargetForElements({
+			element: stripContainer,
+			canDrop: ({ source }) => source.data[VIEW_DRAG_TYPE] === true && source.data[VIEW_DRAG_INSTANCE] === instanceId
+		});
+	}, [
+		canReorder,
+		instanceId,
+		stripContainer
+	]);
+	const handleReorder = (draggedId, targetId, position) => {
+		const reordered = reorderWorkspaceViewIds({
+			ids: views.map((view) => view.id),
+			draggedId,
+			targetId,
+			position
+		});
+		if (reordered) reorder?.onReorder(reordered);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 items-center gap-1 px-2",
+		dir: direction,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "min-w-0 flex-1",
+			ref: setStripContainer,
+			children: /* @__PURE__ */ jsx(Tabs, {
+				onValueChange: (value) => {
+					if (typeof value === "string") onViewChange(value);
+				},
+				value: activeViewId,
+				children: /* @__PURE__ */ jsx(TabsList, {
+					"aria-label": ariaLabel,
+					variant: "underline",
+					children: views.map((view) => {
+						if (editing?.viewId === view.id) return /* @__PURE__ */ jsxs(TabsTab, {
+							nativeButton: false,
+							render: /* @__PURE__ */ jsx("div", {}),
+							value: view.id,
+							children: [renderIcon(view), editing.renderLabel(view)]
+						}, view.id);
+						return /* @__PURE__ */ jsx(WorkspaceViewTab, {
+							actions: renderActions?.(view),
+							canReorder,
+							direction,
+							getDragData: reorder?.getDragData,
+							getDropData: reorder?.getDropData,
+							isDragBlocked: reorder?.isBlocked ?? false,
+							instanceId,
+							onContextMenu: onViewContextMenu,
+							onDoubleClick: onViewDoubleClick,
+							onReorder: handleReorder,
+							renderIcon,
+							view
+						}, view.id);
+					})
+				})
+			})
+		}), addControl]
+	});
+};
+const WorkspaceViewTab = ({ actions, canReorder, direction, getDragData, getDropData, isDragBlocked, instanceId, onContextMenu, onDoubleClick, onReorder, renderIcon, view }) => {
+	const [tabContainer, setTabContainer] = useState(null);
+	const [dropPosition, setDropPosition] = useState(null);
+	const canDrag = useLatestCallback(() => !isDragBlocked);
+	const initialData = useLatestCallback(() => ({
+		...getDragData?.(view),
+		[VIEW_DRAG_TYPE]: true,
+		[VIEW_DRAG_ID]: view.id,
+		[VIEW_DRAG_INSTANCE]: instanceId
+	}));
+	const dropData = useLatestCallback(() => ({
+		...getDropData?.(view),
+		[VIEW_DRAG_ID]: view.id
+	}));
+	const reorder = useLatestCallback(onReorder);
+	useEffect(() => {
+		if (!tabContainer) return;
+		return combine(...canReorder ? [draggable({
+			element: tabContainer,
+			canDrag,
+			getInitialData: initialData
+		})] : [], dropTargetForElements({
+			element: tabContainer,
+			canDrop: ({ source }) => canReorder && source.data[VIEW_DRAG_TYPE] === true && source.data[VIEW_DRAG_INSTANCE] === instanceId && source.data[VIEW_DRAG_ID] !== view.id,
+			getData: ({ input, element }) => attachClosestEdge(dropData(), {
+				element,
+				input,
+				allowedEdges: ["left", "right"]
+			}),
+			getIsSticky: () => true,
+			onDrag: ({ self }) => setDropPosition(toWorkspaceViewDropPosition(extractClosestEdge(self.data), direction)),
+			onDragLeave: () => setDropPosition(null),
+			onDrop: ({ source, self }) => {
+				setDropPosition(null);
+				const draggedId = source.data[VIEW_DRAG_ID];
+				const position = toWorkspaceViewDropPosition(extractClosestEdge(self.data), direction);
+				if (typeof draggedId === "string" && position) reorder(draggedId, view.id, position);
+			}
+		}));
+	}, [
+		canReorder,
+		direction,
+		canDrag,
+		dropData,
+		initialData,
+		instanceId,
+		reorder,
+		tabContainer,
+		view.id
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		ref: setTabContainer,
+		children: [
+			dropPosition !== null && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn("bg-primary pointer-events-none absolute inset-y-1 z-20 w-0.5 rounded-full", dropPosition === "before" ? "start-0" : "end-0")
+			}),
+			/* @__PURE__ */ jsxs(TabsTab, {
+				className: actions === null || actions === void 0 ? void 0 : "pe-6.5",
+				onContextMenu: (event) => onContextMenu?.(view, event),
+				onDoubleClick: (event) => onDoubleClick?.(view, event),
+				value: view.id,
+				children: [renderIcon(view), /* @__PURE__ */ jsx("span", {
+					className: "max-w-36 truncate",
+					children: view.name
+				})]
+			}),
+			actions
+		]
+	});
+};
+//#endregion
+export { WorkspaceViewSwitcher };

package/dist/view-switcher.logic.d.ts

@@ -0,0 +1,14 @@
+import { Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
+//#region src/view-switcher.logic.d.ts
+type WorkspaceViewDirection = "ltr" | "rtl";
+type WorkspaceViewDropPosition = "before" | "after";
+declare const toWorkspaceViewDropPosition: (edge: Edge | null, direction: WorkspaceViewDirection) => WorkspaceViewDropPosition | null;
+type ReorderWorkspaceViewIdsParams = {
+  ids: readonly string[];
+  draggedId: string;
+  targetId: string;
+  position: WorkspaceViewDropPosition;
+};
+declare const reorderWorkspaceViewIds: ({ ids, draggedId, targetId, position }: ReorderWorkspaceViewIdsParams) => string[] | null;
+//#endregion
+export { WorkspaceViewDirection, WorkspaceViewDropPosition, reorderWorkspaceViewIds, toWorkspaceViewDropPosition };

package/dist/view-switcher.logic.js

@@ -0,0 +1,14 @@
+//#region src/view-switcher.logic.ts
+const toWorkspaceViewDropPosition = (edge, direction) => {
+	if (edge !== "left" && edge !== "right") return null;
+	return (direction === "rtl" ? edge === "left" : edge === "right") ? "after" : "before";
+};
+const reorderWorkspaceViewIds = ({ ids, draggedId, targetId, position }) => {
+	if (draggedId === targetId || !ids.includes(draggedId) || !ids.includes(targetId)) return null;
+	const withoutDragged = ids.filter((id) => id !== draggedId);
+	const targetIndex = withoutDragged.indexOf(targetId);
+	const reordered = withoutDragged.toSpliced(position === "after" ? targetIndex + 1 : targetIndex, 0, draggedId);
+	return reordered.every((id, index) => id === ids[index]) ? null : reordered;
+};
+//#endregion
+export { reorderWorkspaceViewIds, toWorkspaceViewDropPosition };