@mostrom/app-shell 0.1.0

package/src/components/sectioned-list-board/board-card-content.tsx

@@ -0,0 +1,340 @@
+import * as React from "react";
+import * as Popover from "@radix-ui/react-popover";
+import Badge from "@cloudscape-design/components/badge";
+import Button from "@cloudscape-design/components/button";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+import { format, isToday, isTomorrow, isValid, parseISO } from "date-fns";
+import {
+  DateSelector,
+  type DateSelectorValue,
+} from "@platform/app-shell/components/reui";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { BoardCardContentProps, BoardBadgeColor } from "./types";
+import { AssigneeSelector } from "@/components/ui/assignee-selector";
+
+function getItemFieldValue<T>(item: T, field: Extract<keyof T, string>): unknown {
+  return (item as Record<string, unknown>)[field];
+}
+
+function toDisplayText(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return "";
+}
+
+function getBadgeColor(
+  value: string,
+  colorMap?: Record<string, BoardBadgeColor>,
+  fallback: BoardBadgeColor = "blue"
+): BoardBadgeColor {
+  return colorMap?.[value] ?? fallback;
+}
+
+function getInitials(name: string): string {
+  const parts = name
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean);
+
+  if (parts.length === 0) return "?";
+
+  return parts
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? "")
+    .join("");
+}
+
+function formatDateLabel(value: string): string | null {
+  if (!value) return null;
+  const parsed = parseISO(value);
+  if (!isValid(parsed)) return null;
+  if (isToday(parsed)) return "Today";
+  if (isTomorrow(parsed)) return "Tomorrow";
+  return format(parsed, "MMM d");
+}
+
+function CalendarIcon() {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <rect x="3.5" y="5.5" width="17" height="15" rx="2.5" stroke="currentColor" />
+      <path d="M7 3V8" stroke="currentColor" strokeLinecap="round" />
+      <path d="M17 3V8" stroke="currentColor" strokeLinecap="round" />
+      <path d="M3.5 9.5H20.5" stroke="currentColor" />
+    </svg>
+  );
+}
+
+function createSingleDayValue(date?: Date): DateSelectorValue {
+  return {
+    period: "day",
+    operator: "is",
+    startDate: date,
+    endDate: undefined,
+  };
+}
+
+export function BoardCardContent<T>({
+  item,
+  cardConfig,
+  titleContent,
+  onFieldChange,
+  interactive = true,
+  assignees,
+}: BoardCardContentProps<T>) {
+  const [isDateSelectorOpen, setIsDateSelectorOpen] = React.useState(false);
+  const [isAssigneeSelectorOpen, setIsAssigneeSelectorOpen] = React.useState(false);
+
+  const rawTitle = getItemFieldValue(item, cardConfig.titleField);
+  const title = toDisplayText(rawTitle);
+
+  const badgeValue = cardConfig.badgeField
+    ? toDisplayText(getItemFieldValue(item, cardConfig.badgeField.field))
+    : "";
+  const isPriorityField = cardConfig.badgeField?.field === "priority";
+  const priorityOptions =
+    cardConfig.badgeField && isPriorityField && cardConfig.badgeField.colorMap
+      ? Object.keys(cardConfig.badgeField.colorMap)
+      : [];
+  const badgeSelectOptions =
+    badgeValue && !priorityOptions.includes(badgeValue)
+      ? [...priorityOptions, badgeValue]
+      : priorityOptions;
+  const canEditPriority = Boolean(
+    interactive &&
+      onFieldChange &&
+      cardConfig.badgeField &&
+      isPriorityField &&
+      badgeSelectOptions.length > 0
+  );
+  const badgeColor = cardConfig.badgeField
+    ? getBadgeColor(
+        badgeValue,
+        cardConfig.badgeField.colorMap,
+        cardConfig.badgeField.defaultColor ?? "blue"
+      )
+    : "blue";
+
+  const avatarValue = cardConfig.avatarField
+    ? toDisplayText(getItemFieldValue(item, cardConfig.avatarField.field))
+    : "";
+
+  const dateValue = cardConfig.dateField
+    ? toDisplayText(getItemFieldValue(item, cardConfig.dateField.field))
+    : "";
+  const dueDateLabel = formatDateLabel(dateValue);
+
+  const selectedDate = React.useMemo(() => {
+    if (!dateValue) return undefined;
+    const parsed = parseISO(dateValue);
+    return isValid(parsed) ? parsed : undefined;
+  }, [dateValue]);
+
+  const [internalDateValue, setInternalDateValue] = React.useState<DateSelectorValue>(
+    createSingleDayValue(selectedDate)
+  );
+
+  React.useEffect(() => {
+    if (isDateSelectorOpen) {
+      setInternalDateValue(createSingleDayValue(selectedDate));
+    }
+  }, [isDateSelectorOpen, selectedDate]);
+
+  const canEditDate = Boolean(
+    interactive &&
+      cardConfig.dateField?.editable &&
+      cardConfig.dateField &&
+      onFieldChange
+  );
+
+  const canEditAssignee = Boolean(
+    interactive &&
+      cardConfig.avatarField &&
+      cardConfig.avatarField.editable !== false &&
+      onFieldChange &&
+      assignees &&
+      assignees.length > 0
+  );
+
+  // Find current assignee by name
+  const currentAssignee = assignees?.find(
+    (a) => a.name === avatarValue
+  );
+
+  const handleAssigneeSelect = (assignee: { id: string; name: string; email: string; avatar?: string } | null) => {
+    if (!cardConfig.avatarField || !onFieldChange) return;
+    onFieldChange(cardConfig.avatarField.field, assignee?.name ?? "");
+  };
+
+  const handleOpenDatePicker = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    if (!canEditDate) return;
+    setIsDateSelectorOpen(true);
+  };
+
+  const handleApplyDate = () => {
+    if (!cardConfig.dateField || !onFieldChange) return;
+    const value = internalDateValue.startDate
+      ? format(internalDateValue.startDate, "yyyy-MM-dd")
+      : "";
+    onFieldChange(cardConfig.dateField.field, value);
+    setIsDateSelectorOpen(false);
+  };
+
+  const handleClearDate = () => {
+    if (!cardConfig.dateField || !onFieldChange) return;
+    setInternalDateValue(createSingleDayValue(undefined));
+    onFieldChange(cardConfig.dateField.field, "");
+    setIsDateSelectorOpen(false);
+  };
+
+  const handleCancelDate = () => {
+    setIsDateSelectorOpen(false);
+  };
+
+  const handlePriorityChange = (value: string) => {
+    if (!cardConfig.badgeField || !onFieldChange) return;
+    onFieldChange(cardConfig.badgeField.field, value);
+  };
+
+  return (
+    <div className="board-card-content-inner">
+      <div className="board-card-title">{titleContent ?? title}</div>
+
+      {cardConfig.badgeField && badgeValue ? (
+        <div className="board-card-badge">
+          {canEditPriority ? (
+            <div
+              onPointerDown={(e) => e.stopPropagation()}
+              onClick={(e) => e.stopPropagation()}
+              onDoubleClick={(e) => e.stopPropagation()}
+            >
+              <Select value={badgeValue} onValueChange={handlePriorityChange}>
+                <SelectTrigger aria-label="Priority" data-testid="board-card-priority-select">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {badgeSelectOptions.map((option) => (
+                    <SelectItem key={option} value={option}>
+                      {option}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          ) : (
+            <Badge color={badgeColor}>{badgeValue}</Badge>
+          )}
+        </div>
+      ) : null}
+
+      {(cardConfig.avatarField || cardConfig.dateField) && (
+        <div className="board-card-footer">
+          {cardConfig.avatarField ? (
+            canEditAssignee ? (
+              <AssigneeSelector
+                open={isAssigneeSelectorOpen}
+                onOpenChange={setIsAssigneeSelectorOpen}
+                assignees={assignees ?? []}
+                selectedId={currentAssignee?.id}
+                onSelect={handleAssigneeSelect}
+                mode="popover"
+                align="start"
+              >
+                <button
+                  type="button"
+                  className="board-card-avatar board-card-avatar-editable"
+                  title={avatarValue ? `${avatarValue} (click to change)` : "Assign someone"}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    setIsAssigneeSelectorOpen(true);
+                  }}
+                  onDoubleClick={(e) => e.stopPropagation()}
+                >
+                  {getInitials(avatarValue)}
+                </button>
+              </AssigneeSelector>
+            ) : (
+              <span className="board-card-avatar" title={avatarValue || "Unassigned"}>
+                {getInitials(avatarValue)}
+              </span>
+            )
+          ) : null}
+
+          {cardConfig.dateField ? (
+            canEditDate ? (
+              <Popover.Root open={isDateSelectorOpen} onOpenChange={setIsDateSelectorOpen}>
+                <Popover.Trigger asChild>
+                  <button
+                    type="button"
+                    className="board-card-date-control"
+                    onClick={handleOpenDatePicker}
+                    onDoubleClick={(e) => e.stopPropagation()}
+                    title={dateValue ? "Edit date" : "Add date"}
+                    aria-label={dateValue ? "Edit date" : "Add date"}
+                  >
+                    <span className="board-card-date-icon-circle">
+                      <CalendarIcon />
+                    </span>
+                    {dueDateLabel ? <span className="board-card-date-label">{dueDateLabel}</span> : null}
+                  </button>
+                </Popover.Trigger>
+                <Popover.Portal>
+                  <Popover.Content
+                    className="board-card-date-popover"
+                    side="bottom"
+                    align="start"
+                    sideOffset={8}
+                    onClick={(e) => e.stopPropagation()}
+                    onDoubleClick={(e) => e.stopPropagation()}
+                  >
+                    <DateSelector
+                      value={internalDateValue}
+                      onChange={setInternalDateValue}
+                      allowRange={false}
+                      periodTypes={["day"]}
+                      presetMode="is"
+                      showInput={false}
+                    />
+                    <div className="board-card-date-actions">
+                      <SpaceBetween direction="horizontal" size="xs">
+                        <Button
+                          variant="normal"
+                          onClick={handleClearDate}
+                          disabled={!dateValue && !internalDateValue}
+                        >
+                          Clear
+                        </Button>
+                        <Button variant="normal" onClick={handleCancelDate}>
+                          Cancel
+                        </Button>
+                        <Button variant="primary" onClick={handleApplyDate}>
+                          Apply
+                        </Button>
+                      </SpaceBetween>
+                    </div>
+                  </Popover.Content>
+                </Popover.Portal>
+              </Popover.Root>
+            ) : dueDateLabel ? (
+              <span className="board-card-date-label">{dueDateLabel}</span>
+            ) : null
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/sectioned-list-board/date-range-filter.tsx

@@ -0,0 +1,249 @@
+import * as React from "react";
+import {
+  endOfMonth,
+  endOfYear,
+  startOfMonth,
+  startOfYear,
+  subDays,
+  subMonths,
+  subYears,
+  addDays,
+  addMonths,
+  format,
+} from "date-fns";
+import type { DateRange } from "react-day-picker";
+import { Calendar as CalendarIcon, ChevronDown } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import type { DateRangeState } from "./types";
+
+interface DateRangeFilterProps {
+  dateRange: DateRangeState;
+  onDateRangeChange: (dateRange: DateRangeState) => void;
+  label?: string;
+}
+
+export function DateRangeFilter({
+  dateRange,
+  onDateRangeChange,
+  label = "Date",
+}: DateRangeFilterProps) {
+  const today = new Date();
+  const [month, setMonth] = React.useState(dateRange.from ?? today);
+  const [open, setOpen] = React.useState(false);
+
+  const yesterday = {
+    from: subDays(today, 1),
+    to: subDays(today, 1),
+  };
+
+  const tomorrow = {
+    from: today,
+    to: addDays(today, 1),
+  };
+
+  const last7Days = {
+    from: subDays(today, 6),
+    to: today,
+  };
+
+  const next7Days = {
+    from: addDays(today, 1),
+    to: addDays(today, 7),
+  };
+
+  const last30Days = {
+    from: subDays(today, 29),
+    to: today,
+  };
+
+  const monthToDate = {
+    from: startOfMonth(today),
+    to: today,
+  };
+
+  const lastMonth = {
+    from: startOfMonth(subMonths(today, 1)),
+    to: endOfMonth(subMonths(today, 1)),
+  };
+
+  const nextMonth = {
+    from: startOfMonth(addMonths(today, 1)),
+    to: endOfMonth(addMonths(today, 1)),
+  };
+
+  const yearToDate = {
+    from: startOfYear(today),
+    to: today,
+  };
+
+  const lastYear = {
+    from: startOfYear(subYears(today, 1)),
+    to: endOfYear(subYears(today, 1)),
+  };
+
+  const handleSelect = (newDate: DateRange | undefined) => {
+    if (newDate) {
+      onDateRangeChange({ from: newDate.from, to: newDate.to });
+    }
+  };
+
+  const handlePresetClick = (preset: { from: Date; to: Date }) => {
+    onDateRangeChange(preset);
+    setMonth(preset.to);
+  };
+
+  const handleClear = () => {
+    onDateRangeChange({ from: undefined, to: undefined });
+    setOpen(false);
+  };
+
+  const formatDateRange = () => {
+    if (!dateRange.from) return label;
+    if (!dateRange.to || dateRange.from.getTime() === dateRange.to.getTime()) {
+      return format(dateRange.from, "MMM d, yyyy");
+    }
+    if (
+      dateRange.from.getFullYear() === dateRange.to.getFullYear() &&
+      dateRange.from.getMonth() === dateRange.to.getMonth()
+    ) {
+      return `${format(dateRange.from, "MMM d")} - ${format(dateRange.to, "d, yyyy")}`;
+    }
+    if (dateRange.from.getFullYear() === dateRange.to.getFullYear()) {
+      return `${format(dateRange.from, "MMM d")} - ${format(dateRange.to, "MMM d, yyyy")}`;
+    }
+    return `${format(dateRange.from, "MMM d, yyyy")} - ${format(dateRange.to, "MMM d, yyyy")}`;
+  };
+
+  const hasValue = dateRange.from !== undefined;
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          className="board-dropdown-trigger"
+          data-testid="board-date-range-select"
+        >
+          <CalendarIcon size={16} />
+          <span>{formatDateRange()}</span>
+          <ChevronDown size={14} />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <Card className="max-w-xs border-0 py-4 shadow-none">
+          <CardContent className="px-4">
+            <Calendar
+              mode="range"
+              selected={{ from: dateRange.from, to: dateRange.to }}
+              onSelect={handleSelect}
+              month={month}
+              onMonthChange={setMonth}
+              className="w-full bg-transparent p-0"
+            />
+          </CardContent>
+          <CardFooter className="flex flex-wrap gap-2 border-t px-4 !pt-4">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                onDateRangeChange({ from: today, to: today });
+                setMonth(today);
+              }}
+            >
+              Today
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePresetClick(yesterday)}
+            >
+              Yesterday
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePresetClick(tomorrow)}
+            >
+              Tomorrow
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePresetClick(last7Days)}
+            >
+              Last 7 days
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePresetClick(next7Days)}
+            >
+              Next 7 days
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePresetClick(last30Days)}
+            >
+              Last 30 days
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePresetClick(monthToDate)}
+            >
+              Month to date
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePresetClick(lastMonth)}
+            >
+              Last month
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePresetClick(nextMonth)}
+            >
+              Next month
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePresetClick(yearToDate)}
+            >
+              Year to date
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => handlePresetClick(lastYear)}
+            >
+              Last year
+            </Button>
+          </CardFooter>
+          {hasValue && (
+            <div className="border-t px-4 py-3">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="w-full"
+                onClick={handleClear}
+              >
+                Clear
+              </Button>
+            </div>
+          )}
+        </Card>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,19 @@
+export { SectionedListBoard } from "./sectioned-list-board";
+export { DateRangeFilter } from "./date-range-filter";
+// Re-export AssigneeSelector from shared ui location
+export { AssigneeSelector } from "@/components/ui/assignee-selector";
+export type {
+  Assignee,
+  BoardSection,
+  BoardCardConfig,
+  BoardBadgeColor,
+  BoardTaskAction,
+  FilterOption,
+  SortOption,
+  SortState,
+  FilterState,
+  DateRangeState,
+  SectionedListBoardProps,
+  ItemOpenEvent,
+  DrawerProps,
+} from "./types";