@fastnd/components 1.0.29 → 1.0.30

package/dist/examples/data-explorer/DataExplorerPagination/DataExplorerPagination.tsx

@@ -0,0 +1,129 @@
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination'
+import { NativeSelect, NativeSelectOption } from '@/components/ui/native-select'
+import { cn } from '@/lib/utils'
+
+export interface DataExplorerPaginationProps {
+  currentPage: number
+  totalPages: number
+  pageSize: number
+  totalFiltered: number
+  totalData: number
+  onPageChange: (page: number) => void
+  onPageSizeChange: (size: number) => void
+  className?: string
+}
+
+const PAGE_SIZES = [25, 50, 100] as const
+
+function getPageRange(current: number, total: number): (number | '...')[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1)
+  }
+  if (current <= 4) {
+    return [1, 2, 3, 4, 5, '...', total]
+  }
+  if (current >= total - 3) {
+    return [1, '...', total - 4, total - 3, total - 2, total - 1, total]
+  }
+  return [1, '...', current - 1, current, current + 1, '...', total]
+}
+
+export function DataExplorerPagination({
+  currentPage,
+  totalPages,
+  pageSize,
+  totalFiltered,
+  onPageChange,
+  onPageSizeChange,
+  className,
+}: DataExplorerPaginationProps) {
+  const startItem = totalFiltered === 0 ? 0 : (currentPage - 1) * pageSize + 1
+  const endItem = Math.min(currentPage * pageSize, totalFiltered)
+  const pageRange = getPageRange(currentPage, totalPages)
+  const atFirst = currentPage <= 1
+  const atLast = currentPage >= totalPages
+
+  return (
+    <nav
+      data-slot="data-explorer-pagination"
+      aria-label="Seitennavigation"
+      className={cn('flex flex-wrap items-center justify-between gap-3 px-4 py-3', className)}
+    >
+      {/* Left: result range + page size select */}
+      <div className="flex items-center gap-3 text-sm text-muted-foreground">
+        <span>
+          {startItem}–{endItem} von {totalFiltered} Ergebnissen
+        </span>
+        <div className="flex items-center gap-1.5">
+          <span className="text-xs">Zeilen:</span>
+          <NativeSelect
+            size="sm"
+            value={pageSize}
+            onChange={(e) => onPageSizeChange(Number(e.target.value))}
+            aria-label="Einträge pro Seite"
+            className="w-auto"
+          >
+            {PAGE_SIZES.map((s) => (
+              <NativeSelectOption key={s} value={s}>
+                {s}
+              </NativeSelectOption>
+            ))}
+          </NativeSelect>
+        </div>
+      </div>
+
+      {/* Right: page navigation */}
+      <Pagination className="w-auto mx-0 justify-end">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              role="button"
+              aria-disabled={atFirst}
+              className={cn(atFirst && 'pointer-events-none opacity-50')}
+              onClick={atFirst ? undefined : () => onPageChange(currentPage - 1)}
+            />
+          </PaginationItem>
+
+          {pageRange.map((page, idx) =>
+            page === '...' ? (
+              <PaginationItem key={`ellipsis-${idx}`}>
+                <PaginationEllipsis />
+              </PaginationItem>
+            ) : (
+              <PaginationItem key={page}>
+                <PaginationLink
+                  role="button"
+                  isActive={page === currentPage}
+                  onClick={() => onPageChange(page)}
+                  aria-label={`Seite ${page}`}
+                  className={page === currentPage ? 'bg-primary text-primary-foreground border-primary hover:bg-primary/90 hover:text-primary-foreground' : ''}
+                >
+                  {page}
+                </PaginationLink>
+              </PaginationItem>
+            ),
+          )}
+
+          <PaginationItem>
+            <PaginationNext
+              role="button"
+              aria-disabled={atLast}
+              className={cn(atLast && 'pointer-events-none opacity-50')}
+              onClick={atLast ? undefined : () => onPageChange(currentPage + 1)}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </nav>
+  )
+}
+
+DataExplorerPagination.displayName = 'DataExplorerPagination'

package/dist/examples/data-explorer/DataExplorerToolbar/DataExplorerToolbar.tsx

@@ -0,0 +1,143 @@
+import * as React from 'react'
+import { LayoutGrid, List, RotateCcw, Search, Table } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import { ColumnConfigPopover } from '../ColumnConfigPopover/ColumnConfigPopover'
+import { FilterChip } from '../FilterChip/FilterChip'
+import { MoreFiltersPopover } from '../MoreFiltersPopover/MoreFiltersPopover'
+import type { DataExplorerActions, DataExplorerDerived, DataExplorerState } from '../types'
+import { cn } from '@/lib/utils'
+
+export interface DataExplorerToolbarProps {
+  state: DataExplorerState
+  derived: DataExplorerDerived
+  actions: DataExplorerActions
+  className?: string
+}
+
+export function DataExplorerToolbar({
+  state,
+  derived,
+  actions,
+  className,
+}: DataExplorerToolbarProps) {
+  const secondaryFilterCount = React.useMemo(
+    () =>
+      derived.secondaryFilterColumns.reduce(
+        (acc, [key]) => acc + (state.filters[key]?.length ?? 0),
+        0,
+      ),
+    [derived.secondaryFilterColumns, state.filters],
+  )
+
+  return (
+    <div
+      data-slot="data-explorer-toolbar"
+      role="toolbar"
+      aria-label="Daten-Toolbar"
+      className={cn('flex flex-col gap-3 border-b bg-card px-6 py-4', className)}
+    >
+      {/* Row 1: View switcher + column config */}
+      <div className="flex items-center justify-between gap-2">
+        <ToggleGroup
+          type="single"
+          value={state.viewMode}
+          onValueChange={(v) => v && actions.switchView(v as DataExplorerState['viewMode'])}
+          variant="outline"
+          size="sm"
+        >
+          <ToggleGroupItem
+            value="table"
+            aria-label="Tabellenansicht"
+            className="gap-1.5 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:border-primary"
+          >
+            <Table className="size-3.5" />
+            <span className="hidden sm:inline">Tabelle</span>
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="list"
+            aria-label="Listenansicht"
+            className="gap-1.5 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:border-primary"
+          >
+            <List className="size-3.5" />
+            <span className="hidden sm:inline">Liste</span>
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="card"
+            aria-label="Kartenansicht"
+            className="gap-1.5 data-[state=on]:bg-primary data-[state=on]:text-primary-foreground data-[state=on]:border-primary"
+          >
+            <LayoutGrid className="size-3.5" />
+            <span className="hidden sm:inline">Karten</span>
+          </ToggleGroupItem>
+        </ToggleGroup>
+
+        <ColumnConfigPopover
+          columns={derived.domainConfig.columns}
+          columnOrder={state.columnOrder}
+          columnVisibility={state.columnVisibility}
+          onToggleVisibility={actions.toggleColumnVisibility}
+          onReorder={actions.reorderColumns}
+        />
+      </div>
+
+      {/* Row 2: Filter chips + search */}
+      <div className="flex flex-wrap items-center gap-2">
+        {/* Primary filter chips */}
+        {derived.primaryFilterColumns.map(([key, col]) => (
+          <FilterChip
+            key={key}
+            columnKey={key}
+            label={col.label}
+            selectedValues={state.filters[key] ?? []}
+            options={derived.getFilterOptions(key)}
+            onToggleOption={(value) => actions.toggleFilterOption(key, value)}
+            onClear={() => actions.clearFilter(key)}
+          />
+        ))}
+
+        {/* More filters */}
+        {derived.secondaryFilterColumns.length > 0 && (
+          <MoreFiltersPopover
+            columns={derived.secondaryFilterColumns}
+            filters={state.filters}
+            getFilterOptions={derived.getFilterOptions}
+            onToggleOption={actions.toggleFilterOption}
+            onResetSecondary={actions.resetSecondaryFilters}
+            totalSecondaryCount={secondaryFilterCount}
+          />
+        )}
+
+        {/* Reset all */}
+        {derived.hasActiveFilters && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={actions.resetAllFilters}
+            aria-label="Alle Filter zurücksetzen"
+            className="h-8 gap-1.5 text-sm text-muted-foreground hover:text-destructive"
+          >
+            <RotateCcw className="size-3.5" />
+            <span>Zurücksetzen</span>
+          </Button>
+        )}
+
+        {/* Search input — pushed to the right */}
+        <div className="relative ml-auto min-w-[180px] max-w-xs flex-1">
+          <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            type="search"
+            value={state.searchTerm}
+            onChange={(e) => actions.setSearchTerm(e.target.value)}
+            placeholder="Suchen..."
+            aria-label="Datensätze durchsuchen"
+            className="h-8 pl-8 text-sm"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+DataExplorerToolbar.displayName = 'DataExplorerToolbar'

package/dist/examples/data-explorer/DomainSwitcher/DomainSwitcher.tsx

@@ -0,0 +1,36 @@
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { DOMAIN_KEYS, DOMAIN_LABELS } from '../domains'
+import type { DomainKey } from '../types'
+import { cn } from '@/lib/utils'
+
+export interface DomainSwitcherProps {
+  activeDomain: DomainKey
+  onDomainChange: (domain: DomainKey) => void
+  className?: string
+}
+
+export function DomainSwitcher({ activeDomain, onDomainChange, className }: DomainSwitcherProps) {
+  return (
+    <nav data-slot="domain-switcher" className={cn('border-b bg-card', className)}>
+      <Tabs
+        value={activeDomain}
+        onValueChange={(v) => onDomainChange(v as DomainKey)}
+        className="px-6"
+      >
+        <TabsList variant="line" className="h-auto gap-0 rounded-none p-0">
+          {DOMAIN_KEYS.map((key) => (
+            <TabsTrigger
+              key={key}
+              value={key}
+              className="rounded-none px-5 py-3 text-sm font-medium data-[state=active]:font-semibold data-[state=active]:text-primary data-[state=active]:after:bg-primary"
+            >
+              {DOMAIN_LABELS[key]}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+    </nav>
+  )
+}
+
+DomainSwitcher.displayName = 'DomainSwitcher'

package/dist/examples/data-explorer/ExpansionRows/ExpansionRows.tsx

@@ -0,0 +1,180 @@
+import { Plus } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { TableCell, TableRow } from '@/components/ui/table'
+import { ScoreBar } from '../cells'
+import type { ColumnDef } from '../types'
+
+interface ExpansionRowsProps {
+  row: Record<string, unknown>
+  columnKey: string
+  column: ColumnDef
+  visibleColumns: string[]
+  columns: Record<string, ColumnDef>
+  colSpan: number
+  className?: string
+}
+
+const ExpansionRows = ({
+  row,
+  columnKey,
+  column,
+  visibleColumns,
+  columns,
+  colSpan,
+  className,
+}: ExpansionRowsProps) => {
+  const items = row[columnKey]
+
+  if (!Array.isArray(items) || items.length === 0 || !column.expandColumns) {
+    return null
+  }
+
+  // Build a lookup: mainColumnKey -> expandColumnDef for all expand columns that map to a visible column
+  const mapLookup: Record<string, (typeof column.expandColumns)[number]> = {}
+  for (const ec of column.expandColumns) {
+    if (ec.mapTo) {
+      mapLookup[ec.mapTo] = ec
+    }
+  }
+
+  const title = column.expandTitleFn ? column.expandTitleFn(row) : (column.expandLabel ?? columnKey)
+
+  return (
+    <>
+      {/* Title row spanning all columns */}
+      <TableRow
+        data-slot="expansion-title-row"
+        className={cn('bg-secondary hover:bg-secondary border-b-0', className)}
+      >
+        <TableCell colSpan={colSpan} className="text-[11px] font-semibold uppercase tracking-wide px-3 py-2">
+          <div className="flex items-center gap-2">
+            <span>{title}</span>
+            <Badge variant="secondary" className="text-xs tabular-nums">
+              {items.length}
+            </Badge>
+          </div>
+        </TableCell>
+      </TableRow>
+
+      {/* One data row per nested item */}
+      {(items as Record<string, unknown>[]).map((item, idx) => (
+        <TableRow
+          key={idx}
+          data-slot="expansion-data-row"
+          className="bg-accent hover:bg-primary/[0.04]"
+        >
+          {visibleColumns.map((mainKey) => {
+            const mainCol = columns[mainKey]
+            const cellClasses = cn(
+              mainCol?.hideMobile && 'hidden sm:table-cell',
+              mainCol?.hideTablet && 'hidden lg:table-cell',
+            )
+
+            // The expand column itself: render the add button
+            if (mainKey === columnKey) {
+              return (
+                <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)}>
+                  <Button
+                    variant="ghost"
+                    size="icon-xs"
+                    aria-label="Hinzufügen"
+                    onClick={(e) => e.preventDefault()}
+                  >
+                    <Plus />
+                  </Button>
+                </TableCell>
+              )
+            }
+
+            // A column that an expand column maps into
+            const ec = mapLookup[mainKey]
+            if (ec) {
+              const value = item[ec.key]
+
+              if (ec.type === 'score-bar') {
+                return (
+                  <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)}>
+                    <ScoreBar value={typeof value === 'number' ? value : 0} />
+                  </TableCell>
+                )
+              }
+
+              // Delegate rendering to the main column type for structural fidelity
+              if (mainCol?.type === 'double-text' && ec.secondaryKey) {
+                const secondary = item[ec.secondaryKey]
+                return (
+                  <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)}>
+                    <div className={cn('flex flex-col', ec.bold && 'font-medium')}>
+                      <span className="text-sm">{value != null ? String(value) : ''}</span>
+                      {secondary != null && (
+                        <span className="text-xs text-muted-foreground">{String(secondary)}</span>
+                      )}
+                    </div>
+                  </TableCell>
+                )
+              }
+
+              if (mainCol?.type === 'status-badge' && mainCol.statusMap && value != null) {
+                const statusKey = mainCol.statusMap[String(value)] ?? 'default'
+                return (
+                  <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)}>
+                    <Badge variant="secondary" data-status={statusKey}>
+                      {String(value)}
+                    </Badge>
+                  </TableCell>
+                )
+              }
+
+              if (mainCol?.type === 'link') {
+                return (
+                  <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)}>
+                    <a
+                      href="#"
+                      className="text-sm text-primary underline-offset-2 hover:underline"
+                      onClick={(e) => e.preventDefault()}
+                    >
+                      {value != null ? String(value) : ''}
+                    </a>
+                  </TableCell>
+                )
+              }
+
+              const displayValue =
+                typeof value === 'boolean'
+                  ? value
+                    ? 'Ja'
+                    : 'Nein'
+                  : value != null
+                    ? String(value)
+                    : ''
+
+              return (
+                <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)}>
+                  <span
+                    className={cn(
+                      'text-sm',
+                      ec.bold && 'font-medium',
+                      ec.muted && 'text-muted-foreground',
+                    )}
+                  >
+                    {displayValue}
+                  </span>
+                </TableCell>
+              )
+            }
+
+            // No mapping — render empty cell to maintain column alignment
+            return <TableCell key={mainKey} className={cn('px-3 py-2 text-[13px]', cellClasses)} />
+          })}
+        </TableRow>
+      ))}
+    </>
+  )
+}
+
+ExpansionRows.displayName = 'ExpansionRows'
+
+export { ExpansionRows }
+export type { ExpansionRowsProps }

package/dist/examples/data-explorer/FilterChip/FilterChip.tsx

@@ -0,0 +1,85 @@
+import { ChevronDown, X } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { FilterPopoverContent } from '../FilterPopoverContent/FilterPopoverContent'
+import { cn } from '@/lib/utils'
+
+export interface FilterChipProps {
+  columnKey: string
+  label: string
+  selectedValues: string[]
+  options: string[]
+  onToggleOption: (value: string) => void
+  onClear: () => void
+  className?: string
+}
+
+export function FilterChip({
+  columnKey,
+  label,
+  selectedValues,
+  options,
+  onToggleOption,
+  onClear,
+  className,
+}: FilterChipProps) {
+  const hasSelection = selectedValues.length > 0
+
+  return (
+    <Popover>
+      <div data-slot="filter-chip" className={cn('inline-flex items-center', className)}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            size="sm"
+            aria-haspopup="dialog"
+            aria-label={`${label} Filter`}
+            className={cn(
+              'h-8 gap-1.5 text-sm font-medium',
+              hasSelection && 'rounded-r-none border-r-0 border-primary bg-primary/5 text-primary hover:bg-primary/10',
+            )}
+          >
+            <span>{label}</span>
+            {hasSelection ? (
+              <Badge variant="secondary" className="h-4 min-w-4 px-1 py-0 text-[10px]">
+                {selectedValues.length}
+              </Badge>
+            ) : (
+              <ChevronDown className="size-3.5 text-muted-foreground" />
+            )}
+          </Button>
+        </PopoverTrigger>
+
+        {hasSelection && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onClear}
+            aria-label={`${label} Filter entfernen`}
+            className="h-8 rounded-l-none border-primary bg-primary/5 px-1.5 text-primary hover:bg-primary/10 hover:text-destructive"
+          >
+            <X className="size-3.5" />
+          </Button>
+        )}
+      </div>
+
+      <PopoverContent
+        align="start"
+        sideOffset={4}
+        role="dialog"
+        aria-label={`${label} Filter`}
+        className="w-64 p-3"
+        data-column-key={columnKey}
+      >
+        <FilterPopoverContent
+          options={options}
+          selectedValues={selectedValues}
+          onToggleOption={onToggleOption}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+FilterChip.displayName = 'FilterChip'

package/dist/examples/data-explorer/FilterPopoverContent/FilterPopoverContent.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react'
+import { Search } from 'lucide-react'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Input } from '@/components/ui/input'
+import { cn } from '@/lib/utils'
+
+export interface FilterPopoverContentProps {
+  options: string[]
+  selectedValues: string[]
+  onToggleOption: (value: string) => void
+  labelMap?: Record<string, string>
+  className?: string
+}
+
+export function FilterPopoverContent({
+  options,
+  selectedValues,
+  onToggleOption,
+  labelMap,
+  className,
+}: FilterPopoverContentProps) {
+  const [search, setSearch] = React.useState('')
+
+  const filtered = React.useMemo(() => {
+    if (!search) return options
+    const lower = search.toLowerCase()
+    return options.filter((opt) => {
+      const display = labelMap?.[opt] ?? opt
+      return display.toLowerCase().includes(lower)
+    })
+  }, [options, search, labelMap])
+
+  return (
+    <div data-slot="filter-popover-content" className={cn('flex flex-col gap-2', className)}>
+      <div className="relative">
+        <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Suchen..."
+          className="h-8 pl-8 text-sm"
+        />
+      </div>
+      <div className="max-h-60 overflow-y-auto" role="listbox">
+        {filtered.length === 0 ? (
+          <p className="py-4 text-center text-xs text-muted-foreground">Keine Treffer</p>
+        ) : (
+          filtered.map((opt) => {
+            const label = labelMap?.[opt] ?? opt
+            const checked = selectedValues.includes(opt)
+            return (
+              <label
+                key={opt}
+                role="option"
+                aria-selected={checked}
+                className="flex cursor-pointer items-center gap-2.5 rounded px-1 py-1.5 text-sm hover:bg-accent"
+              >
+                <Checkbox
+                  checked={checked}
+                  onCheckedChange={() => onToggleOption(opt)}
+                  aria-label={label}
+                />
+                <span className="leading-snug">{label}</span>
+              </label>
+            )
+          })
+        )}
+      </div>
+    </div>
+  )
+}
+
+FilterPopoverContent.displayName = 'FilterPopoverContent'