@object-ui/plugin-list 3.3.0 → 3.3.1

package/src/UserFilters.tsx

@@ -1,453 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from 'react';
-import { cn, Button, Popover, PopoverContent, PopoverTrigger } from '@object-ui/components';
-import { ChevronDown, X, Plus, SlidersHorizontal } from 'lucide-react';
-import type { ListViewSchema } from '@object-ui/types';
-
-/** Resolved option with optional count */
-interface ResolvedOption {
-  label: string;
-  value: string | number | boolean;
-  color?: string;
-  count?: number;
-}
-
-/** Resolved field with options derived from objectDef when not provided */
-interface ResolvedField {
-  field: string;
-  label?: string;
-  type?: string;
-  options: ResolvedOption[];
-  showCount?: boolean;
-  defaultValues?: (string | number | boolean)[];
-}
-
-export interface UserFiltersProps {
-  config: NonNullable<ListViewSchema['userFilters']>;
-  /** Object definition for auto-deriving field options */
-  objectDef?: any;
-  /** Current data for computing counts */
-  data?: any[];
-  /** Callback when filter state changes */
-  onFilterChange: (filters: any[]) => void;
-  /** Maximum visible filter badges before collapsing into "More" dropdown (dropdown mode only) */
-  maxVisible?: number;
-  className?: string;
-}
-
-/**
- * UserFilters — Airtable Interfaces-style filter bar.
- *
- * Renders one of three modes based on `config.element`:
- * - **dropdown**: field-level dropdown selector badges
- * - **tabs**: named filter preset tab bar
- * - **toggle**: on/off toggle buttons per field
- */
-export function UserFilters({
-  config,
-  objectDef,
-  data = [],
-  onFilterChange,
-  maxVisible,
-  className,
-}: UserFiltersProps) {
-  switch (config.element) {
-    case 'dropdown':
-      return (
-        <DropdownFilters
-          fields={config.fields || []}
-          objectDef={objectDef}
-          data={data}
-          onFilterChange={onFilterChange}
-          maxVisible={maxVisible}
-          className={className}
-        />
-      );
-    case 'tabs':
-      return (
-        <TabFilters
-          tabs={config.tabs || []}
-          showAllRecords={config.showAllRecords !== false}
-          allowAddTab={config.allowAddTab}
-          onFilterChange={onFilterChange}
-          className={className}
-        />
-      );
-    case 'toggle':
-      return (
-        <ToggleFilters
-          fields={config.fields || []}
-          onFilterChange={onFilterChange}
-          className={className}
-        />
-      );
-    default:
-      return null;
-  }
-}
-
-// ============================================
-// Shared helper — resolve field options
-// ============================================
-function resolveFields(
-  fields: NonNullable<NonNullable<ListViewSchema['userFilters']>['fields']>,
-  objectDef: any,
-  data: any[],
-): ResolvedField[] {
-  return fields.map(f => {
-    let options: ResolvedOption[] = f.options ? [...f.options] : [];
-    if (options.length === 0 && objectDef?.fields) {
-      const fieldDef =
-        Array.isArray(objectDef.fields)
-          ? objectDef.fields.find((fd: any) => fd.name === f.field)
-          : objectDef.fields[f.field];
-      if (fieldDef?.options) {
-        if (Array.isArray(fieldDef.options)) {
-          options = fieldDef.options.map((o: any) => ({
-            label: o.label ?? String(o.value ?? o),
-            value: o.value ?? o,
-            color: o.color,
-          }));
-        } else {
-          options = Object.entries(fieldDef.options).map(([value, meta]) => ({
-            label: (meta as any)?.label || value,
-            value,
-            color: (meta as any)?.color,
-          }));
-        }
-      }
-    }
-    if (f.showCount && data.length > 0) {
-      options = options.map(opt => ({
-        ...opt,
-        count: data.filter(row => row[f.field] === opt.value).length,
-      }));
-    }
-    return { ...f, options };
-  });
-}
-
-// ============================================
-// Dropdown Mode
-// ============================================
-interface DropdownFiltersProps {
-  fields: NonNullable<NonNullable<ListViewSchema['userFilters']>['fields']>;
-  objectDef?: any;
-  data: any[];
-  onFilterChange: (filters: any[]) => void;
-  maxVisible?: number;
-  className?: string;
-}
-
-function DropdownFilters({ fields, objectDef, data, onFilterChange, maxVisible, className }: DropdownFiltersProps) {
-  const [selectedValues, setSelectedValues] = React.useState<
-    Record<string, (string | number | boolean)[]>
-  >(() => {
-    const init: Record<string, (string | number | boolean)[]> = {};
-    fields.forEach(f => {
-      if (f.defaultValues && f.defaultValues.length > 0) {
-        init[f.field] = f.defaultValues;
-      }
-    });
-    return init;
-  });
-
-  const resolvedFields = React.useMemo(
-    () => resolveFields(fields, objectDef, data),
-    [fields, objectDef, data],
-  );
-
-  const emitFilters = React.useCallback(
-    (next: Record<string, (string | number | boolean)[]>) => {
-      const conditions = Object.entries(next)
-        .filter(([, v]) => v.length > 0)
-        .map(([field, values]) => [field, 'in', values]);
-      onFilterChange(conditions);
-    },
-    [onFilterChange],
-  );
-
-  const handleChange = (field: string, values: (string | number | boolean)[]) => {
-    const next = { ...selectedValues, [field]: values };
-    setSelectedValues(next);
-    emitFilters(next);
-  };
-
-  // Emit default filters on mount
-  React.useEffect(() => {
-    const hasDefaults = Object.values(selectedValues).some(v => v.length > 0);
-    if (hasDefaults) emitFilters(selectedValues);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Split fields into visible and overflow based on maxVisible
-  const visibleFields = maxVisible !== undefined && maxVisible < resolvedFields.length
-    ? resolvedFields.slice(0, maxVisible)
-    : resolvedFields;
-  const overflowFields = maxVisible !== undefined && maxVisible < resolvedFields.length
-    ? resolvedFields.slice(maxVisible)
-    : [];
-
-  const renderBadge = (f: ResolvedField) => {
-    const selected = selectedValues[f.field] || [];
-    const hasSelection = selected.length > 0;
-
-    return (
-      <Popover key={f.field}>
-        <PopoverTrigger asChild>
-          <button
-            data-testid={`filter-badge-${f.field}`}
-            className={cn(
-              'inline-flex items-center gap-1 rounded-full border h-7 px-2.5 text-xs font-medium transition-colors shrink-0',
-              hasSelection
-                ? 'border-primary/30 bg-primary/5 text-primary'
-                : 'border-border bg-background hover:bg-accent text-foreground',
-            )}
-          >
-            <span className="truncate max-w-[100px]">{f.label || f.field}</span>
-            {hasSelection && (
-              <span className="flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary/10 text-[10px]">
-                {selected.length}
-              </span>
-            )}
-            {hasSelection ? (
-              <X
-                className="h-3 w-3 opacity-60"
-                data-testid={`filter-clear-${f.field}`}
-                onClick={e => {
-                  e.stopPropagation();
-                  handleChange(f.field, []);
-                }}
-              />
-            ) : (
-              <ChevronDown className="h-3 w-3 opacity-60" />
-            )}
-          </button>
-        </PopoverTrigger>
-        <PopoverContent align="start" className="w-56 p-2">
-          <div className="max-h-60 overflow-y-auto space-y-0.5" data-testid={`filter-options-${f.field}`}>
-            {f.options.map(opt => (
-                <label
-                  key={String(opt.value)}
-                  className={cn(
-                    'flex items-center gap-2 text-sm py-1.5 px-2 rounded cursor-pointer',
-                    selected.includes(opt.value) ? 'bg-primary/5 text-primary' : 'hover:bg-muted',
-                  )}
-                >
-                  <input
-                    type="checkbox"
-                    checked={selected.includes(opt.value)}
-                    onChange={() => {
-                      const next = selected.includes(opt.value)
-                        ? selected.filter(v => v !== opt.value)
-                        : [...selected, opt.value];
-                      handleChange(f.field, next);
-                    }}
-                    className="rounded border-input"
-                  />
-                  {opt.color && (
-                    <span
-                      className="h-2.5 w-2.5 rounded-full shrink-0"
-                      style={{ backgroundColor: opt.color }}
-                    />
-                  )}
-                  <span className="truncate flex-1">{opt.label}</span>
-                  {opt.count !== undefined && (
-                    <span className="text-xs text-muted-foreground">{opt.count}</span>
-                  )}
-                </label>
-              ))}
-          </div>
-        </PopoverContent>
-      </Popover>
-    );
-  };
-
-  return (
-    <div className={cn('flex items-center gap-1 overflow-x-auto', className)} data-testid="user-filters-dropdown">
-      <SlidersHorizontal className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-      {resolvedFields.length === 0 ? (
-        <span className="text-xs text-muted-foreground" data-testid="user-filters-empty">
-          No filter fields
-        </span>
-      ) : (
-        <>
-          {visibleFields.map(renderBadge)}
-          {overflowFields.length > 0 && (
-            <Popover>
-              <PopoverTrigger asChild>
-                <button
-                  data-testid="user-filters-more"
-                  className="inline-flex items-center gap-1 rounded-full border border-border bg-background hover:bg-accent text-foreground h-7 px-2.5 text-xs font-medium transition-colors shrink-0"
-                >
-                  <span>More</span>
-                  <span className="flex h-4 min-w-[16px] items-center justify-center rounded-full bg-muted text-[10px] font-medium">
-                    {overflowFields.length}
-                  </span>
-                  <ChevronDown className="h-3 w-3 opacity-60" />
-                </button>
-              </PopoverTrigger>
-              <PopoverContent align="start" className="w-64 p-2" data-testid="user-filters-more-content">
-                <div className="space-y-1">
-                  {overflowFields.map(renderBadge)}
-                </div>
-              </PopoverContent>
-            </Popover>
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-// ============================================
-// Tabs Mode
-// ============================================
-interface TabFiltersProps {
-  tabs: NonNullable<NonNullable<ListViewSchema['userFilters']>['tabs']>;
-  showAllRecords?: boolean;
-  allowAddTab?: boolean;
-  onFilterChange: (filters: any[]) => void;
-  className?: string;
-}
-
-function TabFilters({ tabs, showAllRecords, allowAddTab, onFilterChange, className }: TabFiltersProps) {
-  const [activeTab, setActiveTab] = React.useState<string>(() => {
-    const defaultTab = tabs.find(t => t.default);
-    return defaultTab?.id || (showAllRecords ? '__all__' : tabs[0]?.id || '');
-  });
-
-  const handleTabChange = React.useCallback(
-    (tabId: string) => {
-      setActiveTab(tabId);
-      if (tabId === '__all__') {
-        onFilterChange([]);
-      } else {
-        const tab = tabs.find(t => t.id === tabId);
-        onFilterChange(tab?.filters || []);
-      }
-    },
-    [tabs, onFilterChange],
-  );
-
-  const allTabs = React.useMemo(() => {
-    const result = [...tabs];
-    if (showAllRecords) {
-      result.push({ id: '__all__', label: 'All records', filters: [] });
-    }
-    return result;
-  }, [tabs, showAllRecords]);
-
-  // Emit default tab filters on mount
-  React.useEffect(() => {
-    const defaultTab = tabs.find(t => t.default);
-    if (defaultTab) {
-      onFilterChange(defaultTab.filters || []);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <div className={cn('flex items-center gap-0.5 overflow-x-auto', className)} data-testid="user-filters-tabs">
-      {allTabs.map(tab => (
-        <button
-          key={tab.id}
-          data-testid={`filter-tab-${tab.id}`}
-          onClick={() => handleTabChange(tab.id)}
-          className={cn(
-            'inline-flex items-center h-7 px-3 text-xs font-medium rounded-md transition-colors shrink-0',
-            activeTab === tab.id
-              ? 'bg-primary text-primary-foreground'
-              : 'text-muted-foreground hover:text-foreground hover:bg-muted',
-          )}
-        >
-          {tab.label}
-        </button>
-      ))}
-      {allowAddTab && (
-        <button
-          className="inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted shrink-0"
-          data-testid="filter-tab-add"
-          title="Add filter tab"
-        >
-          <Plus className="h-3.5 w-3.5" />
-        </button>
-      )}
-    </div>
-  );
-}
-
-// ============================================
-// Toggle Mode
-// ============================================
-interface ToggleFiltersProps {
-  fields: NonNullable<NonNullable<ListViewSchema['userFilters']>['fields']>;
-  onFilterChange: (filters: any[]) => void;
-  className?: string;
-}
-
-function ToggleFilters({ fields, onFilterChange, className }: ToggleFiltersProps) {
-  const [activeToggles, setActiveToggles] = React.useState<Set<string>>(() => {
-    const defaults = new Set<string>();
-    fields.forEach(f => {
-      if (f.defaultValues && f.defaultValues.length > 0) defaults.add(f.field);
-    });
-    return defaults;
-  });
-
-  const emitFilters = React.useCallback(
-    (active: Set<string>) => {
-      const conditions = Array.from(active).map(fieldName => {
-        const fieldDef = fields.find(fd => fd.field === fieldName);
-        return fieldDef?.defaultValues
-          ? [fieldName, 'in', fieldDef.defaultValues]
-          : [fieldName, '!=', null];
-      });
-      onFilterChange(conditions);
-    },
-    [fields, onFilterChange],
-  );
-
-  const handleToggle = (field: string) => {
-    setActiveToggles(prev => {
-      const next = new Set(prev);
-      if (next.has(field)) next.delete(field);
-      else next.add(field);
-      emitFilters(next);
-      return next;
-    });
-  };
-
-  // Emit default filters on mount
-  React.useEffect(() => {
-    if (activeToggles.size > 0) emitFilters(activeToggles);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <div className={cn('flex items-center gap-1 overflow-x-auto', className)} data-testid="user-filters-toggle">
-      {fields.map(f => {
-        const isActive = activeToggles.has(f.field);
-        return (
-          <Button
-            key={f.field}
-            variant={isActive ? 'default' : 'outline'}
-            size="sm"
-            className="h-7 px-3 text-xs shrink-0"
-            data-testid={`filter-toggle-${f.field}`}
-            onClick={() => handleToggle(f.field)}
-          >
-            {f.label || f.field}
-          </Button>
-        );
-      })}
-    </div>
-  );
-}

package/src/ViewSwitcher.tsx

@@ -1,113 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as React from 'react';
-import { cn } from '@object-ui/components';
-import { 
-  Grid, 
-  LayoutGrid, 
-  Calendar, 
-  Images,    // gallery
-  Activity,  // timeline
-  GanttChartSquare, // gantt
-  Map,        // map
-} from 'lucide-react';
-
-export type ViewType = 
-  | 'grid' 
-  | 'kanban' 
-  | 'gallery' 
-  | 'calendar' 
-  | 'timeline'
-  | 'gantt'
-  | 'map';
-
-export interface ViewSwitcherProps {
-  currentView: ViewType;
-  availableViews?: ViewType[];
-  onViewChange: (view: ViewType) => void;
-  className?: string;
-  /** Enable animated transitions between views (default: true) */
-  animated?: boolean;
-}
-
-const VIEW_ICONS: Record<ViewType, React.ReactNode> = {
-  grid: <Grid className="h-4 w-4" />,
-  kanban: <LayoutGrid className="h-4 w-4" />,
-  gallery: <Images className="h-4 w-4" />,
-  calendar: <Calendar className="h-4 w-4" />,
-  timeline: <Activity className="h-4 w-4" />,
-  gantt: <GanttChartSquare className="h-4 w-4" />,
-  map: <Map className="h-4 w-4" />,
-};
-
-const VIEW_LABELS: Record<ViewType, string> = {
-  grid: 'Grid',
-  kanban: 'Kanban',
-  gallery: 'Gallery',
-  calendar: 'Calendar',
-  timeline: 'Timeline',
-  gantt: 'Gantt',
-  map: 'Map',
-};
-
-export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({
-  currentView,
-  availableViews = ['grid', 'kanban'],
-  onViewChange,
-  className,
-  animated = true,
-}) => {
-  const handleViewChange = React.useCallback(
-    (view: ViewType) => {
-      if (!animated || view === currentView) {
-        onViewChange(view);
-        return;
-      }
-
-      if (typeof document !== 'undefined' && 'startViewTransition' in document) {
-        (document as Document & {
-          startViewTransition: (cb: () => void) => { finished: Promise<void> };
-        }).startViewTransition(() => onViewChange(view));
-      } else {
-        onViewChange(view);
-      }
-    },
-    [animated, currentView, onViewChange],
-  );
-
-  return (
-    <div className={cn("flex items-center gap-1 bg-transparent oui-view-switcher", className)}>
-      {availableViews.map((view) => {
-        const isActive = currentView === view;
-        return (
-          <button
-            key={view}
-            type="button"
-            onClick={() => handleViewChange(view)}
-            aria-label={VIEW_LABELS[view]}
-            title={VIEW_LABELS[view]}
-            aria-pressed={isActive}
-            data-state={isActive ? 'on' : 'off'}
-            className={cn(
-              "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-              "hover:bg-muted hover:text-muted-foreground",
-              "gap-2 px-3 py-2",
-              "data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-sm border-transparent border data-[state=on]:border-border/50",
-            )}
-          >
-            {VIEW_ICONS[view]}
-            <span className="hidden sm:inline-block text-xs font-medium">
-              {VIEW_LABELS[view]}
-            </span>
-          </button>
-        );
-      })}
-    </div>
-  );
-};