@flamingo-stack/openframe-frontend-core 0.0.324-snapshot.20260625182754 → 0.0.324

package/src/components/ui/date-picker.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as Popover from "@radix-ui/react-popover";
-import { ArrowUpDown, Calendar, ChevronLeft, ChevronRight } from "lucide-react";
+import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
 import * as React from "react";
 import {
   DayPicker,
@@ -19,7 +19,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "./select";
-import type { SortDirection } from "./sort-column-item";
 
 // ============================================================================
 // Types
@@ -122,12 +121,6 @@ interface DatePickerCalendarProps {
   fromDate?: Date;
   toDate?: Date;
   locale?: DayPickerProps["locale"];
-  /**
-   * When true the calendar fills its container width and day cells flex to
-   * fit (instead of the fixed 40px cells). Used by DateFilterMenu so the grid
-   * lines up with the surrounding controls per the Figma filter-menu.
-   */
-  fluid?: boolean;
 }
 
 function DatePickerCalendar({
@@ -138,7 +131,6 @@ function DatePickerCalendar({
   fromDate,
   toDate,
   locale,
-  fluid = false,
 }: DatePickerCalendarProps) {
   const today = new Date();
 
@@ -182,35 +174,28 @@ function DatePickerCalendar({
     onSelect(completed);
   };
 
-  // Fixed 40px cells by default; in fluid mode cells flex to fill the width.
-  const cellOuter = fluid ? "flex-1 aspect-square min-w-0" : "size-10";
-  const cellInner = fluid ? "size-full" : "size-10";
-
   const classNames: DayPickerProps["classNames"] = {
-    root: cn("p-4 date-picker-calendar", fluid && "w-full"),
+    root: "p-4 date-picker-calendar",
     months: "flex gap-8",
-    month: cn("flex flex-col gap-2", fluid && "w-full"),
+    month: "flex flex-col gap-2",
     month_caption: "hidden",
     nav: "hidden",
-    month_grid: cn("border-collapse", fluid && "w-full"),
+    month_grid: "border-collapse",
     weekdays: "flex",
     weekday: cn(
-      cellOuter,
-      "flex items-center justify-center",
+      "size-10 flex items-center justify-center",
       "text-[14px] font-medium leading-5 text-ods-text-secondary"
     ),
     week: "flex",
     day: cn(
-      cellOuter,
-      "flex items-center justify-center",
+      "size-10 flex items-center justify-center",
       "text-h4 text-ods-text-primary",
       "cursor-pointer",
       "transition-colors duration-150",
       "hover:bg-ods-bg-surface hover:rounded-[6px]"
     ),
     day_button: cn(
-      cellInner,
-      "flex items-center justify-center",
+      "size-10 flex items-center justify-center",
       "cursor-pointer bg-transparent border-none outline-none",
       "text-inherit font-inherit"
     ),
@@ -306,7 +291,7 @@ function DatePickerCalendar({
 
   if (mode === "single") {
     return (
-      <div className={cn("bg-ods-card border border-ods-border rounded-[6px] overflow-hidden", fluid && "w-full")}>
+      <div className="bg-ods-card border border-ods-border rounded-[6px] overflow-hidden">
         <div className="flex items-center justify-between px-4 pt-4">
           <CalendarNavButton
             direction="left"
@@ -343,7 +328,7 @@ function DatePickerCalendar({
   // Range mode
   return (
     <div
-      className={cn("bg-ods-card border border-ods-border rounded-md overflow-hidden", fluid && "w-full")}
+      className="bg-ods-card border border-ods-border rounded-md overflow-hidden"
       onMouseLeave={() => setHoveredDate(undefined)}
     >
       <style>{rangeStyles}</style>
@@ -981,196 +966,6 @@ export function DatePickerInputSimple({
   );
 }
 
-// ============================================================================
-// DateFilterMenu Component (sort + calendar filter popover from Figma)
-// ============================================================================
-
-export interface DateFilterResult {
-  /** Selected sort direction */
-  sort: SortDirection;
-  /** Selected single date (mode === "single") */
-  date?: Date;
-  /** Selected date range (mode === "range") */
-  range?: DateRange;
-}
-
-export interface DateFilterMenuProps {
-  /** Selection mode for the calendar. Defaults to "range". */
-  mode?: DatePickerMode;
-  /** Current (applied) sort direction. Defaults to "desc". */
-  sort?: SortDirection;
-  /** Current (applied) single date — used when mode === "single". */
-  date?: Date;
-  /** Current (applied) range — used when mode === "range". */
-  range?: DateRange;
-  /** Fired when the user presses Apply with the drafted selection. */
-  onApply?: (result: DateFilterResult) => void;
-  /** Fired when the menu closes (Close button, outside click, Esc). */
-  onClose?: () => void;
-  /** Disable the trigger. */
-  disabled?: boolean;
-  /** Minimum selectable date. */
-  fromDate?: Date;
-  /** Maximum selectable date. */
-  toDate?: Date;
-  /** Locale for the calendar. */
-  locale?: DayPickerProps["locale"];
-  /** Popover alignment relative to the trigger. */
-  align?: "start" | "center" | "end";
-  /** Label for the ascending sort option. */
-  ascLabel?: string;
-  /** Label for the descending sort option. */
-  descLabel?: string;
-  /** Additional class name for the trigger button. */
-  className?: string;
-  /** Accessible label for the trigger. */
-  "aria-label"?: string;
-}
-
-/**
- * DateFilterMenu — a calendar-icon-triggered popover combining a sort-direction
- * selector and a date / date-range calendar, with Close and Apply actions.
- * Selections are drafted internally and only committed via `onApply`.
- */
-export function DateFilterMenu({
-  mode = "range",
-  sort = "desc",
-  date,
-  range,
-  onApply,
-  onClose,
-  disabled = false,
-  fromDate,
-  toDate,
-  locale,
-  align = "start",
-  ascLabel = "Sort by Ascending",
-  descLabel = "Sort by Descending",
-  className,
-  "aria-label": ariaLabel = "Open date filter",
-}: DateFilterMenuProps) {
-  const [open, setOpen] = React.useState(false);
-
-  // Drafted selection — initialized from props each time the menu opens.
-  const [draftSort, setDraftSort] = React.useState<SortDirection>(sort);
-  const [draftSelected, setDraftSelected] = React.useState<
-    Date | DateRange | undefined
-  >(mode === "single" ? date : range);
-
-  const resetDraft = React.useCallback(() => {
-    setDraftSort(sort);
-    setDraftSelected(mode === "single" ? date : range);
-  }, [sort, date, range, mode]);
-
-  const handleOpenChange = (next: boolean) => {
-    if (next) {
-      resetDraft();
-    } else {
-      onClose?.();
-    }
-    setOpen(next);
-  };
-
-  const handleApply = () => {
-    const result: DateFilterResult =
-      mode === "single"
-        ? { sort: draftSort, date: draftSelected as Date | undefined }
-        : { sort: draftSort, range: draftSelected as DateRange | undefined };
-    onApply?.(result);
-    setOpen(false);
-  };
-
-  const handleClose = () => {
-    onClose?.();
-    setOpen(false);
-  };
-
-  return (
-    <Popover.Root open={open} onOpenChange={handleOpenChange}>
-      <Popover.Trigger asChild>
-        <Button
-          type="button"
-          variant="outline"
-          size="icon"
-          disabled={disabled}
-          aria-label={ariaLabel}
-          className={className}
-          leftIcon={<Calendar className="size-6" />}
-        />
-      </Popover.Trigger>
-
-      <Popover.Portal>
-        <Popover.Content
-          className={cn(
-            "z-[9999] w-80 max-w-[calc(100vw-2rem)]",
-            "flex flex-col gap-4 rounded-[6px] border border-ods-border bg-ods-bg p-4",
-            "animate-in fade-in-0 zoom-in-95",
-            "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
-            "data-[side=bottom]:slide-in-from-top-2",
-            "data-[side=top]:slide-in-from-bottom-2"
-          )}
-          sideOffset={8}
-          align={align}
-        >
-          {/* Sort direction selector */}
-          <Select
-            value={draftSort}
-            onValueChange={(value) => setDraftSort(value as SortDirection)}
-          >
-            <SelectTrigger className="gap-2" aria-label="Sort direction">
-              {/* Wrapper is a <div> (not <span>) so SelectTrigger's
-                  `[&>span]:line-clamp-1` rule doesn't force it to a vertical
-                  -webkit-box and stack the icon/label into a column. */}
-              <div className="flex min-w-0 flex-1 items-center gap-2">
-                <ArrowUpDown className="size-6 shrink-0 text-ods-text-secondary" />
-                <span className="truncate">
-                  <SelectValue />
-                </span>
-              </div>
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="asc">{ascLabel}</SelectItem>
-              <SelectItem value="desc">{descLabel}</SelectItem>
-            </SelectContent>
-          </Select>
-
-          {/* Calendar */}
-          <DatePickerCalendar
-            mode={mode}
-            selected={draftSelected}
-            onSelect={setDraftSelected}
-            numberOfMonths={1}
-            fromDate={fromDate}
-            toDate={toDate}
-            locale={locale}
-            fluid
-          />
-
-          {/* Actions */}
-          <div className="flex w-full items-stretch gap-4">
-            <Button
-              type="button"
-              variant="outline"
-              fullWidth
-              onClick={handleClose}
-            >
-              Close
-            </Button>
-            <Button
-              type="button"
-              variant="accent"
-              fullWidth
-              onClick={handleApply}
-            >
-              Apply
-            </Button>
-          </div>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-}
-
 // ============================================================================
 // Exports
 // ============================================================================

package/src/stories/DatePicker.stories.tsx

@@ -1,15 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 import { useState } from "react";
 import {
-  DateFilterMenu,
-  type DateFilterResult,
   DatePicker,
   DatePickerInput,
   DatePickerInputSimple,
   type DatePickerBaseProps,
   type DateRange,
 } from "../components/ui/date-picker";
-import type { SortDirection } from "../components/ui/sort-column-item";
 
 // Using a simplified type for Storybook since DatePicker uses discriminated union
 type DatePickerStoryProps = DatePickerBaseProps & {
@@ -762,141 +759,3 @@ export const SimpleInputDateOnly: Story = {
     ),
   ],
 };
-
-// ============================================================================
-// DateFilterMenu Stories (sort + calendar filter popover from Figma)
-// ============================================================================
-
-const fmtSort = (sort: SortDirection) =>
-  sort === "asc" ? "Ascending" : "Descending";
-
-const fmtDay = (d: Date) =>
-  d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
-
-/**
- * DateFilterMenu — calendar-icon trigger opens a popover with a sort selector,
- * a date-range calendar, and Close / Apply actions. Matches the Figma
- * `filter-menu`. Selections are drafted internally and committed on Apply.
- */
-export const FilterMenuRange: Story = {
-  render: function Render() {
-    const [applied, setApplied] = useState<DateFilterResult | null>(null);
-
-    const summary = () => {
-      if (!applied) return "Nothing applied yet";
-      const { sort, range } = applied;
-      const r = range?.from
-        ? range.to
-          ? `${fmtDay(range.from)} - ${fmtDay(range.to)}`
-          : fmtDay(range.from)
-        : "all dates";
-      return `Sort ${fmtSort(sort)} · ${r}`;
-    };
-
-    return (
-      <div className="flex flex-col gap-4">
-        <div className="flex items-center gap-3">
-          <span className="text-h4 text-ods-text-primary">Last activity</span>
-          <DateFilterMenu mode="range" onApply={setApplied} />
-        </div>
-        <div className="text-[14px] text-ods-text-secondary p-3 bg-ods-bg rounded-lg border border-ods-border">
-          <span className="text-ods-text-primary">Applied:</span> {summary()}
-        </div>
-      </div>
-    );
-  },
-};
-
-/**
- * DateFilterMenu in single-date mode.
- */
-export const FilterMenuSingle: Story = {
-  render: function Render() {
-    const [applied, setApplied] = useState<DateFilterResult | null>(null);
-
-    return (
-      <div className="flex flex-col gap-4">
-        <div className="flex items-center gap-3">
-          <span className="text-h4 text-ods-text-primary">Date &amp; time</span>
-          <DateFilterMenu mode="single" sort="asc" onApply={setApplied} />
-        </div>
-        <div className="text-[14px] text-ods-text-secondary p-3 bg-ods-bg rounded-lg border border-ods-border">
-          <span className="text-ods-text-primary">Applied:</span>{" "}
-          {applied
-            ? `Sort ${fmtSort(applied.sort)} · ${
-                applied.date ? fmtDay(applied.date) : "all dates"
-              }`
-            : "Nothing applied yet"}
-        </div>
-      </div>
-    );
-  },
-};
-
-/**
- * DateFilterMenu wired to filter + sort a small table — mirrors the intended
- * usage in table columns (organizations last-activity, scripts schedules,
- * logs). Apply re-filters and re-sorts the rows by date.
- */
-export const FilterMenuWithTable: Story = {
-  render: function Render() {
-    type Row = { id: string; activity: Date };
-    const rows: Row[] = [
-      { id: "Acme Corp", activity: new Date(2026, 4, 2) },
-      { id: "Globex", activity: new Date(2026, 4, 6) },
-      { id: "Initech", activity: new Date(2026, 4, 11) },
-      { id: "Umbrella", activity: new Date(2026, 4, 18) },
-      { id: "Stark Ind.", activity: new Date(2026, 4, 24) },
-    ];
-
-    const [filter, setFilter] = useState<DateFilterResult>({
-      sort: "desc",
-      range: undefined,
-    });
-
-    const visible = rows
-      .filter((row) => {
-        const { from, to } = filter.range ?? {};
-        if (from && row.activity < from) return false;
-        if (to && row.activity > to) return false;
-        return true;
-      })
-      .sort((a, b) =>
-        filter.sort === "asc"
-          ? a.activity.getTime() - b.activity.getTime()
-          : b.activity.getTime() - a.activity.getTime()
-      );
-
-    return (
-      <div className="flex flex-col gap-3" style={{ width: 360 }}>
-        <div className="flex items-center justify-between">
-          <span className="text-h4 text-ods-text-primary">Organizations</span>
-          <DateFilterMenu
-            mode="range"
-            sort={filter.sort}
-            range={filter.range}
-            onApply={setFilter}
-          />
-        </div>
-        <div className="rounded-lg border border-ods-border overflow-hidden">
-          {visible.map((row) => (
-            <div
-              key={row.id}
-              className="flex items-center justify-between px-3 py-2 border-b border-ods-border last:border-b-0"
-            >
-              <span className="text-ods-text-primary text-[14px]">{row.id}</span>
-              <span className="text-ods-text-secondary text-[14px]">
-                {fmtDay(row.activity)}
-              </span>
-            </div>
-          ))}
-          {visible.length === 0 && (
-            <div className="px-3 py-4 text-center text-ods-text-secondary text-[14px]">
-              No results in range
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  },
-};