@scalepad/ui 0.1.0

package/src/components/FilterMenu/FilterSubMenuTypes/SearchableFilterSubmenu.tsx

@@ -0,0 +1,239 @@
+import { useCallback, useMemo, useState, type UIEvent } from 'react';
+
+import { Box, Checkbox, Flex, Skeleton } from '@mantine/core';
+
+import { Menu } from '../../Menu';
+import { SearchableSubMenu } from '../../SearchableSubMenu';
+import { Text } from '../../Typography';
+
+import type {
+  SearchableListAsyncProps,
+  SearchableListSearchMode,
+} from '../../SearchableList/types';
+import type { SearchableFilterItem } from '../types';
+
+export type SearchMode = SearchableListSearchMode;
+
+export interface SearchableFilterSubmenuProps extends SearchableListAsyncProps {
+  /** Label for the submenu (e.g., "Department", "App Category") */
+  label: string;
+  /** List of items to filter */
+  items: SearchableFilterItem[];
+  /**
+   * Currently selected items (with both `id` and `name`).
+   * Selected items can refer to entries that are not in `items` — e.g. when
+   * the parent uses server-side search and previously-selected items have
+   * scrolled out of the current result page. The submenu preserves them as-is.
+   */
+  selectedItems: SearchableFilterItem[];
+  /** Callback when selection changes - passes array of selected items with id and name */
+  onSelectionChange: (selectedItems: SearchableFilterItem[]) => void;
+  /** Optional callback to clear all selections (shows "All [Label]" option) */
+  onClearAll?: () => void;
+  /** Optional placeholder text for search input (defaults to "Filter") */
+  placeholder?: string;
+  /** Whether to show search input control (defaults to true) */
+  showSearch?: boolean;
+  /** Optional message when no items match search (defaults to "No items found") */
+  emptyMessage?: string;
+}
+
+const LOADING_MORE_SKELETON_COUNT = 5;
+
+function LoadingMoreSkeletonMenuItems() {
+  return Array.from({ length: LOADING_MORE_SKELETON_COUNT }).map((_, idx) => (
+    <Menu.Item key={`loading-more-${idx}`} disabled>
+      <Flex align="center" gap="sm">
+        <Skeleton h={14} w={14} radius="xs" />
+        <Skeleton h={10} w={`${60 + (idx % 3) * 10}%`} />
+      </Flex>
+    </Menu.Item>
+  ));
+}
+
+export function SearchableFilterSubmenu({
+  label,
+  items,
+  selectedItems,
+  onSelectionChange,
+  onClearAll,
+  placeholder = 'Filter',
+  showSearch = true,
+  emptyMessage = 'No items found',
+  isLoading = false,
+  isError = false,
+  errorMessage,
+  onRetry,
+  hasMore = false,
+  onLoadMore,
+  isLoadingMore = false,
+  searchMode = 'client',
+  onSearchChange,
+  searchDebounceMs = 250,
+}: SearchableFilterSubmenuProps) {
+  const [search, setSearch] = useState('');
+
+  // Filter items based on search query
+  const displayedItems = useMemo(() => {
+    if (searchMode === 'server') return items;
+    if (!search.trim()) return items;
+    const searchLower = search.toLowerCase();
+    return items.filter(item => item.name.toLowerCase().includes(searchLower));
+  }, [items, search, searchMode]);
+
+  const handleSearchChange = useCallback(
+    (value: string) => {
+      setSearch(value);
+
+      if (searchMode === 'server') {
+        onSearchChange?.(value);
+      }
+    },
+    [onSearchChange, searchMode],
+  );
+
+  const handleScroll = (e: UIEvent<HTMLDivElement>) => {
+    if (!hasMore) return;
+    if (isLoadingMore) return;
+    if (!onLoadMore) return;
+
+    const el = e.currentTarget;
+    const thresholdPx = 150;
+    const distanceToBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    if (distanceToBottom <= thresholdPx) {
+      onLoadMore();
+    }
+  };
+
+  const selectedIds = useMemo(
+    () => new Set(selectedItems.map(item => item.id)),
+    [selectedItems],
+  );
+
+  // Toggle item selection. We work off `selectedItems` (not `items`) so that
+  // entries previously selected from a different search query are preserved
+  // even when they're no longer in the current `items` page.
+  const toggleItem = (itemId: string) => {
+    if (selectedIds.has(itemId)) {
+      onSelectionChange(selectedItems.filter(item => item.id !== itemId));
+      return;
+    }
+
+    const newItem = items.find(item => item.id === itemId);
+    if (!newItem) {
+      // The toggled item is not in the visible list. Should not happen because
+      // toggle is only triggered from a checkbox rendered against `items`.
+      return;
+    }
+
+    onSelectionChange([
+      ...selectedItems,
+      { id: newItem.id, name: newItem.name },
+    ]);
+  };
+
+  // Handle clear all
+  const handleClearAll = () => {
+    if (onClearAll) {
+      onClearAll();
+      setSearch('');
+      if (searchMode === 'server') {
+        onSearchChange?.('');
+      }
+    }
+  };
+
+  return (
+    <SearchableSubMenu
+      label={label}
+      search={search}
+      onSearchChange={handleSearchChange}
+      placeholder={placeholder}
+      showSearch={showSearch}
+      debounceMs={searchMode === 'server' ? searchDebounceMs : undefined}
+    >
+      {/* Clear All Option (if provided) */}
+      {onClearAll && (
+        <>
+          <Menu.Item
+            onClick={e => {
+              e.stopPropagation();
+              handleClearAll();
+            }}
+            closeMenuOnClick={false}
+          >
+            <Text variant="caption1.strong">Clear All</Text>
+          </Menu.Item>
+          <Menu.Divider />
+        </>
+      )}
+
+      {/* Item List */}
+      <Box
+        style={{ maxHeight: '300px', overflowY: 'auto' }}
+        onScroll={handleScroll}
+      >
+        {isLoading ? (
+          <Box p="xs">
+            <Text variant="caption1" c="text.subdued.default">
+              Loading…
+            </Text>
+          </Box>
+        ) : isError ? (
+          <Box p="xs">
+            <Text variant="caption1" c="text.subdued.default">
+              {errorMessage || 'Error loading options.'}
+            </Text>
+            {onRetry && (
+              <Menu.Item closeMenuOnClick={false} onClick={onRetry}>
+                <Text variant="caption1.strong">Retry</Text>
+              </Menu.Item>
+            )}
+          </Box>
+        ) : displayedItems.length > 0 ? (
+          <>
+            {displayedItems.map(item => (
+              <Menu.Item
+                key={item.id}
+                onClick={e => {
+                  e.stopPropagation();
+                  toggleItem(item.id);
+                }}
+                closeMenuOnClick={false}
+                onKeyDown={e => {
+                  if (e.key === ' ') {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    toggleItem(item.id);
+                  }
+                }}
+              >
+                <Flex align="center" gap="sm">
+                  <Checkbox
+                    checked={selectedIds.has(item.id)}
+                    onChange={() => toggleItem(item.id)}
+                    onClick={e => e.stopPropagation()}
+                    size="sm"
+                    label={item.name}
+                  />
+                </Flex>
+              </Menu.Item>
+            ))}
+            {isLoadingMore && <LoadingMoreSkeletonMenuItems />}
+          </>
+        ) : (
+          <Box p="xs">
+            <Text variant="caption1" c="text.subdued.default">
+              {emptyMessage}
+            </Text>
+            {isLoadingMore && (
+              <Box mt="xs">
+                <LoadingMoreSkeletonMenuItems />
+              </Box>
+            )}
+          </Box>
+        )}
+      </Box>
+    </SearchableSubMenu>
+  );
+}

package/src/components/FilterMenu/FilterSubMenuTypes/index.ts

@@ -0,0 +1,8 @@
+export {
+  BooleanFilterSubmenu,
+  type BooleanFilterSubmenuProps,
+} from './BooleanFilterSubmenu';
+export {
+  SearchableFilterSubmenu,
+  type SearchableFilterSubmenuProps,
+} from './SearchableFilterSubmenu';

package/src/components/FilterMenu/defaultFilterSchemas.ts

@@ -0,0 +1,63 @@
+import type { FilterItem } from './FilterMenu';
+import type { FilterSchema } from './types';
+
+// Default departments list
+export const DEFAULT_DEPARTMENTS: FilterItem[] = [
+  { id: 'engineering', name: 'Engineering' },
+  { id: 'sales', name: 'Sales' },
+  { id: 'marketing', name: 'Marketing' },
+  { id: 'support', name: 'Support' },
+  { id: 'hr', name: 'Human Resources' },
+  { id: 'finance', name: 'Finance' },
+  { id: 'operations', name: 'Operations' },
+  { id: 'product', name: 'Product' },
+  { id: 'design', name: 'Design' },
+  { id: 'legal', name: 'Legal' },
+];
+
+// Default app categories list
+export const DEFAULT_APP_CATEGORIES: FilterItem[] = [
+  { id: 'productivity', name: 'Productivity' },
+  { id: 'communication', name: 'Communication' },
+  { id: 'development', name: 'Development' },
+  { id: 'design', name: 'Design Tools' },
+  { id: 'analytics', name: 'Analytics' },
+  { id: 'security', name: 'Security' },
+  { id: 'storage', name: 'Storage & Backup' },
+  { id: 'collaboration', name: 'Collaboration' },
+  { id: 'project-management', name: 'Project Management' },
+  { id: 'customer-support', name: 'Customer Support' },
+];
+
+/**
+ * Default filter schemas for backwards compatibility
+ * These match the original hard-coded filter types
+ */
+export const defaultFilterSchemas: FilterSchema[] = [
+  {
+    key: 'favourites',
+    categoryName: 'Favourites',
+    type: 'boolean',
+    label: 'Favourites',
+    submenuType: 'boolean',
+  },
+  {
+    key: 'departments',
+    categoryName: 'Department',
+    type: 'multi-select',
+    label: 'Department',
+    submenuType: 'searchable',
+    items: DEFAULT_DEPARTMENTS,
+    showClearAll: true,
+    emptyMessage: 'No departments found',
+  },
+  {
+    key: 'appCategories',
+    categoryName: 'Category',
+    type: 'multi-select',
+    label: 'App Category',
+    submenuType: 'searchable',
+    items: DEFAULT_APP_CATEGORIES,
+    emptyMessage: 'No categories found',
+  },
+];

package/src/components/FilterMenu/helpers.ts

@@ -0,0 +1,115 @@
+import type { FilterItem } from './FilterMenu';
+import type { FilterSchema, FilterValue } from './types';
+import type { FilterCategory } from '../AppliedFiltersManagerBar/AppliedFiltersManagerBar';
+
+/**
+ * Extract the current filter value from FilterCategory[] based on schema
+ */
+export function extractFilterValue(
+  schema: FilterSchema,
+  filters: FilterCategory[],
+): FilterValue {
+  const category = filters.find(
+    cat => cat.categoryName === schema.categoryName,
+  );
+
+  if (schema.type === 'boolean') {
+    // Boolean filters: true if category exists and has items, false otherwise
+    return category ? category.items.length > 0 : false;
+  }
+
+  if (schema.type === 'multi-select') {
+    // Multi-select filters: return array of FilterItems
+    return category?.items || [];
+  }
+
+  // Fallback (should never reach here with proper typing)
+  return false;
+}
+
+/**
+ * Create a FilterCategory from schema and value
+ */
+export function createFilterCategory(
+  schema: FilterSchema,
+  value: FilterValue,
+): FilterCategory | null {
+  if (schema.type === 'boolean') {
+    const boolValue = value as boolean;
+    if (boolValue) {
+      return {
+        categoryName: schema.categoryName,
+        items: [{ id: schema.key, name: 'True' }],
+      };
+    }
+    return null; // Don't create category if boolean is false
+  }
+
+  if (schema.type === 'multi-select') {
+    const items = value as FilterItem[];
+    if (items.length > 0) {
+      return {
+        categoryName: schema.categoryName,
+        items,
+      };
+    }
+    return null; // Don't create category if no items selected
+  }
+
+  return null;
+}
+
+/**
+ * Update FilterCategory[] with new value based on schema
+ * Preserves other categories that aren't being updated
+ */
+export function updateFilterCategory(
+  schema: FilterSchema,
+  value: FilterValue,
+  currentFilters: FilterCategory[],
+): FilterCategory[] {
+  const newCategory = createFilterCategory(schema, value);
+  let found = false;
+
+  const updatedFilters = currentFilters.reduce<FilterCategory[]>((acc, cat) => {
+    if (cat.categoryName === schema.categoryName) {
+      found = true;
+      // Replace the existing category with the new one, or remove it if no value
+      if (newCategory) {
+        acc.push(newCategory);
+      }
+      return acc;
+    }
+
+    acc.push(cat);
+    return acc;
+  }, []);
+
+  // If the category didn't exist before and we have a new one, append it
+  if (!found && newCategory) {
+    updatedFilters.push(newCategory);
+  }
+
+  return updatedFilters;
+}
+
+/**
+ * Update multiple filter categories at once
+ */
+export function updateFilterCategories(
+  schemas: FilterSchema[],
+  updates: Record<string, FilterValue>,
+  currentFilters: FilterCategory[],
+): FilterCategory[] {
+  let newFilters = [...currentFilters];
+
+  // Process each update
+  Object.entries(updates).forEach(([key, value]) => {
+    const schema = schemas.find(s => s.key === key);
+    if (schema) {
+      newFilters = updateFilterCategory(schema, value, newFilters);
+    }
+  });
+
+  return newFilters;
+}

package/src/components/FilterMenu/index.ts

@@ -0,0 +1,35 @@
+export { FilterMenu } from './FilterMenu';
+export type { FilterItem, FilterMenuProps } from './FilterMenu';
+
+// Filter schema types and utilities
+export {
+  DEFAULT_APP_CATEGORIES,
+  DEFAULT_DEPARTMENTS,
+  defaultFilterSchemas,
+} from './defaultFilterSchemas';
+export {
+  createFilterCategory,
+  extractFilterValue,
+  updateFilterCategories,
+  updateFilterCategory,
+} from './helpers';
+export type {
+  BooleanFilterSchema,
+  FilterSchema,
+  FilterType,
+  FilterValue,
+  MultiSelectFilterSchema,
+  SearchableFilterItemsController,
+  SearchableFilterItemsStatus,
+  SubmenuType,
+} from './types';
+
+// Generic submenu components (for advanced usage)
+export {
+  BooleanFilterSubmenu,
+  SearchableFilterSubmenu,
+} from './FilterSubMenuTypes';
+export type {
+  BooleanFilterSubmenuProps,
+  SearchableFilterSubmenuProps,
+} from './FilterSubMenuTypes';

package/src/components/FilterMenu/types.ts

@@ -0,0 +1,101 @@
+import type { FilterItem } from './FilterMenu';
+import type { SearchableListSearchMode } from '../SearchableList/types';
+
+// Filter value types
+export type FilterValue = boolean | FilterItem[];
+
+// Filter type discriminator
+export type FilterType = 'boolean' | 'multi-select';
+
+// Submenu type discriminator
+export type SubmenuType = 'boolean' | 'searchable';
+
+export type SearchableFilterSearchMode = SearchableListSearchMode;
+
+export interface SearchableFilterSearchConfig {
+  mode: SearchableFilterSearchMode;
+  /**
+   * Called when the user types in the search input (typically used for server-side search).
+   * For client-side search, this is optional and usually omitted.
+   */
+  onSearchChange?: (query: string) => void;
+  /** Debounce time for `onSearchChange` (defaults to 250ms in the UI). */
+  debounceMs?: number;
+}
+
+export type SearchableFilterItemsStatus =
+  | 'idle'
+  | 'loading'
+  | 'success'
+  | 'error';
+
+export interface SearchableFilterItemsController {
+  status: SearchableFilterItemsStatus;
+  /** Optional error message to display when status is `error`. */
+  errorMessage?: string;
+  /** Retry loading items (shown when status is `error`). */
+  retry?: () => void;
+  /** Whether more items exist (enables infinite scroll). */
+  hasMore?: boolean;
+  /** Load the next page of items. */
+  loadMore?: () => void;
+  /** Whether a next page is currently loading (shows a loading-more row). */
+  isLoadingMore?: boolean;
+}
+
+// Base filter schema
+export interface BaseFilterSchema {
+  /** Unique identifier (e.g., 'favourites', 'departments') */
+  key: string;
+  /** Display name in FilterCategory (e.g., 'Favourites', 'Department') */
+  categoryName: string;
+  /** Filter type discriminator */
+  type: FilterType;
+  /** Display label in menu (e.g., 'Favourites', 'Department') */
+  label: string;
+}
+
+// Boolean filter schema (e.g., Favourites)
+export interface BooleanFilterSchema extends BaseFilterSchema {
+  type: 'boolean';
+  /** Type of submenu to render for this filter */
+  submenuType: 'boolean';
+}
+
+// Multi-select filter schema (e.g., Departments, Categories)
+export interface MultiSelectFilterSchema extends BaseFilterSchema {
+  type: 'multi-select';
+  /** Type of submenu to render for this filter */
+  submenuType: 'searchable';
+  /** Items available for selection in this filter */
+  items: FilterItem[];
+  /**
+   * Optional search behavior configuration. Defaults to client-side filtering.
+   * - `client`: submenu filters `items` locally.
+   * - `server`: submenu calls `search.onSearchChange` (debounced) and renders `items` as-is.
+   */
+  search?: SearchableFilterSearchConfig;
+  /**
+   * Optional async/pagination controller for API-backed option lists.
+   * The app owns data fetching and passes flattened `items` + controller state.
+   */
+  itemsController?: SearchableFilterItemsController;
+  /** Whether to show "All [Label]" option to clear all selections (defaults to false) */
+  showClearAll?: boolean;
+  /** Optional custom callback to clear all selections (if not provided, defaults to clearing selections) */
+  onClearAll?: () => void;
+  /** Optional placeholder text for search input (defaults to "Filter") */
+  placeholder?: string;
+  /** Whether to show the search/filter input in submenu (defaults to true) */
+  showSearch?: boolean;
+  /** Optional message when no items match search (defaults to "No items found") */
+  emptyMessage?: string;
+}
+
+export interface SearchableFilterItem {
+  id: string;
+  name: string;
+}
+
+// Union type for all filter schemas
+export type FilterSchema = BooleanFilterSchema | MultiSelectFilterSchema;