@etus/ui 0.1.0

package/src/components/advanced/Search/Search.types.ts

@@ -0,0 +1,243 @@
+// Search/Search.types.ts
+
+import type * as React from "react"
+
+/**
+ * Individual search result item
+ */
+export interface SearchResult {
+  /** Action to execute on selection */
+  action?: () => void
+  /** Optional description */
+  description?: string
+  /** Group category for result grouping */
+  group?: string
+  /** Optional link destination */
+  href?: string
+  /** Optional icon */
+  icon?: React.ReactNode
+  /** Unique identifier */
+  id: string
+  /** Keywords for search matching */
+  keywords?: string[]
+  /** Display title */
+  title: string
+}
+
+/**
+ * Search filter definition
+ */
+export interface SearchFilter {
+  /** Optional icon */
+  icon?: React.ReactNode
+  /** Unique identifier */
+  id: string
+  /** Display label */
+  label: string
+}
+
+/**
+ * Grouped search results
+ */
+export interface SearchGroup {
+  /** Unique identifier */
+  id: string
+  /** Display label */
+  label: string
+  /** Results in this group */
+  results: SearchResult[]
+}
+
+/**
+ * Search component state
+ */
+export type SearchState = "empty" | "error" | "idle" | "loading" | "results"
+
+/**
+ * Search variant
+ */
+export type SearchVariant = "command" | "fullscreen" | "inline"
+
+/**
+ * Search size
+ */
+export type SearchSize = "default" | "lg" | "sm"
+
+/**
+ * Props for the main Search component
+ */
+export interface SearchProps {
+  /** Currently active filter IDs */
+  activeFilters?: string[]
+  /** Auto focus input on mount */
+  autoFocus?: boolean
+  /** Additional class name */
+  className?: string
+  /** Debounce delay in ms */
+  debounce?: number
+  /** Default value for uncontrolled mode */
+  defaultValue?: string
+  /** Disabled state */
+  disabled?: boolean
+  /** Error state */
+  error?: boolean
+  /** Error message */
+  errorMessage?: string
+  /** Available filters */
+  filters?: SearchFilter[]
+  /** History items */
+  history?: SearchResult[]
+  /** Loading state */
+  loading?: boolean
+  /** Minimum characters before search */
+  minChars?: number
+  /** Callback when value changes */
+  onChange?: (value: string) => void
+  /** Callback to clear history */
+  onClearHistory?: () => void
+  /** Callback when filters change */
+  onFilterChange?: (filters: string[]) => void
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void
+  /** Search function - can be sync or async */
+  onSearch?: (query: string) => Promise<SearchResult[]> | undefined
+  /** Callback when result is selected */
+  onSelect?: (result: SearchResult) => void
+  /** Controlled open state (for command variant) */
+  open?: boolean
+  /** Placeholder text */
+  placeholder?: string
+  /** Search results to display */
+  results?: SearchResult[]
+  /** Show search history */
+  showHistory?: boolean
+  /** Size */
+  size?: SearchSize
+  /** Controlled value */
+  value?: string
+  /** Variant style */
+  variant?: SearchVariant
+}
+
+/**
+ * Props for SearchInput subcomponent
+ */
+export interface SearchInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /** Size variant */
+  size?: SearchSize
+}
+
+/**
+ * Props for SearchResults container
+ */
+export interface SearchResultsProps {
+  /** Children */
+  children?: React.ReactNode
+  /** Additional class name */
+  className?: string
+  /** Size variant */
+  size?: SearchSize
+}
+
+/**
+ * Props for SearchResultItem
+ */
+export interface SearchResultItemProps {
+  /** Additional class name */
+  className?: string
+  /** Callback on select */
+  onSelect?: (result: SearchResult) => void
+  /** Query for highlight matching */
+  query?: string
+  /** Result data */
+  result: SearchResult
+  /** Whether item is selected */
+  selected?: boolean
+  /** Size variant */
+  size?: SearchSize
+}
+
+/**
+ * Props for SearchResultGroup
+ */
+export interface SearchResultGroupProps {
+  /** Children (SearchResultItem) */
+  children?: React.ReactNode
+  /** Additional class name */
+  className?: string
+  /** Group label */
+  label: string
+  /** Size variant */
+  size?: SearchSize
+}
+
+/**
+ * Props for SearchFilters
+ */
+export interface SearchFiltersProps {
+  /** Active filter IDs */
+  activeFilters: string[]
+  /** Additional class name */
+  className?: string
+  /** Available filters */
+  filters: SearchFilter[]
+  /** Callback when filters change */
+  onFilterChange: (filters: string[]) => void
+  /** Size variant */
+  size?: SearchSize
+}
+
+/**
+ * Props for SearchHistory
+ */
+export interface SearchHistoryProps {
+  /** Additional class name */
+  className?: string
+  /** History items */
+  items: SearchResult[]
+  /** Callback to clear history */
+  onClear?: () => void
+  /** Callback on select */
+  onSelect?: (result: SearchResult) => void
+  /** Size variant */
+  size?: SearchSize
+}
+
+/**
+ * Props for SearchEmpty
+ */
+export interface SearchEmptyProps {
+  /** Children */
+  children?: React.ReactNode
+  /** Additional class name */
+  className?: string
+  /** Message to display */
+  message?: string
+  /** Size variant */
+  size?: SearchSize
+}
+
+/**
+ * Props for SearchLoading
+ */
+export interface SearchLoadingProps {
+  /** Additional class name */
+  className?: string
+  /** Message to display */
+  message?: string
+  /** Size variant */
+  size?: SearchSize
+}
+
+/**
+ * Props for SearchHighlight utility
+ */
+export interface SearchHighlightProps {
+  /** Additional class name for matches */
+  className?: string
+  /** Query to match */
+  query: string
+  /** Text to highlight */
+  text: string
+}

package/src/components/advanced/Search/Search.variants.ts

@@ -0,0 +1,358 @@
+// Search/Search.variants.ts
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * Search root container variants
+ */
+export const searchVariants = cva(
+  // Base styles
+  ["relative flex flex-col"],
+  {
+    variants: {
+      variant: {
+        inline: ["w-full"],
+        fullscreen: [
+          "fixed inset-0 z-50",
+          "bg-background/80 backdrop-blur-sm",
+          "flex items-start justify-center pt-[20vh]",
+        ],
+        command: [
+          "bg-popover text-popover-foreground",
+          "rounded-lg border shadow-lg",
+          "overflow-hidden",
+        ],
+      },
+      size: {
+        sm: "",
+        default: "",
+        lg: "",
+      },
+    },
+    defaultVariants: {
+      variant: "inline",
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Search input wrapper variants
+ */
+export const searchInputWrapperVariants = cva(
+  // Base styles
+  [
+    "relative flex items-center",
+    "bg-muted rounded-md border",
+    "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+    "transition-colors",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8",
+        default: "h-10",
+        lg: "h-12",
+      },
+      variant: {
+        inline: "",
+        fullscreen: "max-w-2xl w-full mx-4",
+        command: "border-0 border-b rounded-none",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "inline",
+    },
+  }
+)
+
+/**
+ * Search input field variants
+ */
+export const searchInputVariants = cva(
+  // Base styles
+  [
+    "flex-1 bg-transparent",
+    "placeholder:text-muted-foreground",
+    "focus:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2 py-1 text-xs",
+        default: "h-10 px-3 py-2 text-sm",
+        lg: "h-12 px-4 py-3 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Search icon variants
+ */
+export const searchIconVariants = cva(
+  // Base styles
+  ["shrink-0 text-muted-foreground"],
+  {
+    variants: {
+      size: {
+        sm: "size-3.5 ml-2",
+        default: "size-4 ml-3",
+        lg: "size-5 ml-4",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Search results container variants
+ */
+export const searchResultsVariants = cva(
+  // Base styles
+  [
+    "bg-popover text-popover-foreground",
+    "overflow-y-auto overflow-x-hidden",
+    "scroll-py-1",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "max-h-[200px]",
+        default: "max-h-[300px]",
+        lg: "max-h-[400px]",
+      },
+      variant: {
+        inline: [
+          "absolute left-0 right-0 top-full mt-1",
+          "z-50 rounded-md border shadow-md",
+        ],
+        fullscreen: [
+          "max-w-2xl w-full mx-4 mt-2",
+          "rounded-md border shadow-md",
+        ],
+        command: ["border-0"],
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "inline",
+    },
+  }
+)
+
+/**
+ * Search result item variants
+ */
+export const searchResultItemVariants = cva(
+  // Base styles
+  [
+    "relative flex cursor-pointer items-center gap-2",
+    "rounded-sm outline-none select-none",
+    "transition-colors",
+    "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-1.5 text-xs",
+        default: "px-3 py-2 text-sm",
+        lg: "px-4 py-3 text-base",
+      },
+      selected: {
+        true: "bg-accent text-accent-foreground",
+        false: "hover:bg-accent/50",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      selected: false,
+    },
+  }
+)
+
+/**
+ * Search result icon variants
+ */
+export const searchResultIconVariants = cva(
+  // Base styles
+  ["shrink-0 text-muted-foreground"],
+  {
+    variants: {
+      size: {
+        sm: "size-3.5",
+        default: "size-4",
+        lg: "size-5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Search result group heading variants
+ */
+export const searchGroupHeadingVariants = cva(
+  // Base styles
+  ["font-medium text-muted-foreground"],
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-1 text-[10px]",
+        default: "px-3 py-1.5 text-xs",
+        lg: "px-4 py-2 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Search empty state variants
+ */
+export const searchEmptyVariants = cva(
+  // Base styles
+  ["flex items-center justify-center text-muted-foreground"],
+  {
+    variants: {
+      size: {
+        sm: "py-4 text-xs",
+        default: "py-6 text-sm",
+        lg: "py-8 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Search loading variants
+ */
+export const searchLoadingVariants = cva(
+  // Base styles
+  ["flex items-center justify-center gap-2 text-muted-foreground"],
+  {
+    variants: {
+      size: {
+        sm: "py-4 text-xs",
+        default: "py-6 text-sm",
+        lg: "py-8 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Search filter button variants
+ */
+export const searchFilterVariants = cva(
+  // Base styles
+  [
+    "inline-flex items-center gap-1",
+    "rounded-full border",
+    "transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        default: "px-2.5 py-1 text-xs",
+        lg: "px-3 py-1.5 text-sm",
+      },
+      active: {
+        true: "bg-primary text-primary-foreground border-primary",
+        false: "bg-muted hover:bg-accent",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      active: false,
+    },
+  }
+)
+
+/**
+ * Search filters container variants
+ */
+export const searchFiltersContainerVariants = cva(
+  // Base styles
+  ["flex flex-wrap gap-1"],
+  {
+    variants: {
+      size: {
+        sm: "py-1 px-2",
+        default: "py-2 px-3",
+        lg: "py-3 px-4",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Search history header variants
+ */
+export const searchHistoryHeaderVariants = cva(
+  // Base styles
+  ["flex items-center justify-between text-muted-foreground"],
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-1 text-[10px]",
+        default: "px-3 py-1.5 text-xs",
+        lg: "px-4 py-2 text-sm",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Search highlight match variants
+ */
+export const searchHighlightVariants = cva(
+  // Base styles for highlighted text
+  ["text-primary font-semibold bg-primary/10 rounded-sm px-0.5"]
+)
+
+// Export variant prop types
+export type SearchVariantProps = VariantProps<typeof searchVariants>
+export type SearchInputWrapperVariantProps = VariantProps<
+  typeof searchInputWrapperVariants
+>
+export type SearchInputVariantProps = VariantProps<typeof searchInputVariants>
+export type SearchIconVariantProps = VariantProps<typeof searchIconVariants>
+export type SearchResultsVariantProps = VariantProps<
+  typeof searchResultsVariants
+>
+export type SearchResultItemVariantProps = VariantProps<
+  typeof searchResultItemVariants
+>
+export type SearchGroupHeadingVariantProps = VariantProps<
+  typeof searchGroupHeadingVariants
+>
+export type SearchEmptyVariantProps = VariantProps<typeof searchEmptyVariants>
+export type SearchLoadingVariantProps = VariantProps<
+  typeof searchLoadingVariants
+>
+export type SearchFilterVariantProps = VariantProps<typeof searchFilterVariants>

package/src/components/advanced/Search/index.ts

@@ -0,0 +1,52 @@
+// Search/index.ts
+
+// Types - Note: SearchInputProps is not exported to avoid conflict with forms/SearchInput
+export type {
+  SearchEmptyProps,
+  SearchFilter,
+  SearchFiltersProps,
+  SearchGroup,
+  SearchHighlightProps,
+  SearchHistoryProps,
+  SearchLoadingProps,
+  SearchProps,
+  SearchResult,
+  SearchResultGroupProps,
+  SearchResultItemProps,
+  SearchResultsProps,
+  SearchSize,
+  SearchState,
+  SearchVariant,
+} from "./Search.types"
+
+// Variants - Note: searchIconVariants is not exported to avoid conflict with forms/SearchInput
+export {
+  searchEmptyVariants,
+  searchFiltersContainerVariants,
+  searchFilterVariants,
+  searchGroupHeadingVariants,
+  searchHighlightVariants,
+  searchHistoryHeaderVariants,
+  searchInputVariants,
+  searchInputWrapperVariants,
+  searchLoadingVariants,
+  searchResultIconVariants,
+  searchResultItemVariants,
+  searchResultsVariants,
+  searchVariants,
+} from "./Search.variants"
+
+// Components - Note: SearchInput is not exported to avoid conflict with forms/SearchInput
+// Use AdvancedSearchInput if standalone search input is needed
+export {
+  AdvancedSearchInput,
+  Search,
+  SearchEmpty,
+  SearchFilters,
+  SearchHighlight,
+  SearchHistory,
+  SearchLoading,
+  SearchResultGroup,
+  SearchResultItem,
+  SearchResults,
+} from "./Search"