@fastnd/components 1.0.31 → 1.0.32

package/dist/examples/data-visualization/FilterChipGroup/FilterChipGroup.tsx

@@ -0,0 +1,125 @@
+import React, { useState } from 'react'
+import { ChevronDown, X } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Checkbox } from '@/components/ui/checkbox'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Input } from '@/components/ui/input'
+import { cn } from '@/lib/utils'
+import type { ColumnDef, FilterState } from '../types'
+
+export interface FilterChipGroupProps {
+  columns: Record<string, ColumnDef>
+  filters: FilterState
+  onToggleFilter: (column: string, value: string) => void
+  onClearFilter: (column: string) => void
+  getFilterOptions: (colKey: string) => string[]
+  className?: string
+}
+
+interface FilterChipProps {
+  colKey: string
+  col: ColumnDef
+  selected: string[]
+  onToggleFilter: (column: string, value: string) => void
+  onClearFilter: (column: string) => void
+  getFilterOptions: (colKey: string) => string[]
+}
+
+function FilterChip({
+  colKey,
+  col,
+  selected,
+  onToggleFilter,
+  onClearFilter,
+  getFilterOptions,
+}: FilterChipProps) {
+  const [search, setSearch] = useState('')
+  const isActive = selected.length > 0
+  const options = getFilterOptions(colKey)
+  const filteredOptions = search
+    ? options.filter((opt) => opt.toLowerCase().includes(search.toLowerCase()))
+    : options
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn(isActive && 'border-primary text-primary bg-primary/5')}
+        >
+          {col.label}
+          {isActive && ` (${selected.length})`}
+          {isActive ? (
+            <X
+              className="ml-1 size-3.5"
+              aria-label="Filter entfernen"
+              onClick={(e) => {
+                e.stopPropagation()
+                onClearFilter(colKey)
+              }}
+            />
+          ) : (
+            <ChevronDown className="ml-1 size-3.5" />
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-60 p-0" align="start">
+        <div className="p-2 border-b border-border">
+          <Input
+            placeholder="Suchen..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="h-8"
+          />
+        </div>
+        <ScrollArea className="max-h-[300px]">
+          <div className="p-1" role="listbox" aria-label={`${col.label} Filter`}>
+            {filteredOptions.map((opt) => (
+              <div
+                key={opt}
+                role="option"
+                aria-selected={selected.includes(opt)}
+                className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-accent cursor-pointer"
+                onClick={() => onToggleFilter(colKey, opt)}
+              >
+                <Checkbox checked={selected.includes(opt)} tabIndex={-1} />
+                <span className="text-sm">{opt}</span>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export function FilterChipGroup({
+  columns,
+  filters,
+  onToggleFilter,
+  onClearFilter,
+  getFilterOptions,
+  className,
+}: FilterChipGroupProps) {
+  const primaryFilterEntries = Object.entries(columns).filter(
+    ([, col]) => col.filterable && col.primaryFilter,
+  )
+
+  return (
+    <div className={cn('flex flex-wrap items-center gap-2', className)}>
+      {primaryFilterEntries.map(([colKey, col]) => (
+        <FilterChip
+          key={colKey}
+          colKey={colKey}
+          col={col}
+          selected={filters[colKey] ?? []}
+          onToggleFilter={onToggleFilter}
+          onClearFilter={onClearFilter}
+          getFilterOptions={getFilterOptions}
+        />
+      ))}
+    </div>
+  )
+}

package/dist/examples/data-visualization/MoreFiltersPopover/MoreFiltersPopover.tsx

@@ -0,0 +1,132 @@
+import React, { useState } from 'react'
+import { Filter, ChevronDown } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { Checkbox } from '@/components/ui/checkbox'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Input } from '@/components/ui/input'
+import { cn } from '@/lib/utils'
+import type { ColumnDef, FilterState } from '../types'
+
+export interface MoreFiltersPopoverProps {
+  columns: Record<string, ColumnDef>
+  filters: FilterState
+  onToggleFilter: (column: string, value: string) => void
+  onClearSecondaryFilters: () => void
+  getFilterOptions: (colKey: string) => string[]
+  className?: string
+}
+
+interface SectionProps {
+  colKey: string
+  col: ColumnDef
+  selected: string[]
+  onToggleFilter: (column: string, value: string) => void
+  getFilterOptions: (colKey: string) => string[]
+}
+
+function FilterSection({ colKey, col, selected, onToggleFilter, getFilterOptions }: SectionProps) {
+  const [search, setSearch] = useState('')
+  const options = getFilterOptions(colKey)
+  const filteredOptions = search
+    ? options.filter((opt) => opt.toLowerCase().includes(search.toLowerCase()))
+    : options
+  const count = selected.length
+
+  return (
+    <Collapsible>
+      <CollapsibleTrigger className="flex items-center justify-between w-full px-3 py-2 hover:bg-accent text-left">
+        <span className="text-sm">{col.label}</span>
+        <div className="flex items-center gap-1.5">
+          {count > 0 && <Badge variant="secondary">{count}</Badge>}
+          <ChevronDown className="size-4 transition-transform data-[state=open]:rotate-180" />
+        </div>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="px-2 pb-1.5 pt-0">
+          <div className="px-1 pb-1.5">
+            <Input
+              placeholder="Suchen..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="h-8"
+            />
+          </div>
+          <div role="listbox" aria-label={`${col.label} Filter`}>
+            {filteredOptions.map((opt) => (
+              <div
+                key={opt}
+                role="option"
+                aria-selected={selected.includes(opt)}
+                className="flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-accent cursor-pointer"
+                onClick={() => onToggleFilter(colKey, opt)}
+              >
+                <Checkbox checked={selected.includes(opt)} tabIndex={-1} />
+                <span className="text-sm">{opt}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+export function MoreFiltersPopover({
+  columns,
+  filters,
+  onToggleFilter,
+  onClearSecondaryFilters,
+  getFilterOptions,
+  className,
+}: MoreFiltersPopoverProps) {
+  const secondaryCols = Object.entries(columns).filter(
+    ([, col]) => col.filterable && !col.primaryFilter,
+  )
+  const secondaryCount = secondaryCols.reduce((acc, [k]) => acc + (filters[k]?.length || 0), 0)
+  const isActive = secondaryCount > 0
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant={isActive ? 'default' : 'outline'}
+          size="sm"
+          className={cn(className)}
+        >
+          <Filter className="size-4" />
+          Weitere Filter
+          {isActive && (
+            <Badge variant="secondary" className="ml-1.5">
+              {secondaryCount}
+            </Badge>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-80 p-0" align="start">
+        <div className="flex items-center justify-between p-3 border-b border-border">
+          <span className="text-sm font-semibold">Weitere Filter</span>
+          {isActive && (
+            <Button variant="ghost" size="sm" onClick={onClearSecondaryFilters}>
+              Alle zurücksetzen
+            </Button>
+          )}
+        </div>
+        <ScrollArea className="max-h-[400px]">
+          {secondaryCols.map(([colKey, col]) => (
+            <FilterSection
+              key={colKey}
+              colKey={colKey}
+              col={col}
+              selected={filters[colKey] ?? []}
+              onToggleFilter={onToggleFilter}
+              getFilterOptions={getFilterOptions}
+            />
+          ))}
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  )
+}