@fastnd/components 1.0.26 → 1.0.28

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

@@ -0,0 +1,282 @@
+import * as React from 'react'
+import { ArrowUp, ArrowDown, ArrowUpDown, ChevronDown } from 'lucide-react'
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+} from '@/components/ui/table'
+import { Button } from '@/components/ui/button'
+import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import { ExpansionDrawer } from '../ExpansionDrawer/ExpansionDrawer'
+import { cellRenderers } from '../cell-renderers'
+import { cn } from '@/lib/utils'
+import type { ColumnConfig, DataRow, SortDirection } from '../types'
+
+interface DataGridTableViewProps extends React.ComponentProps<'div'> {
+  data: DataRow[]
+  columns: Array<[string, ColumnConfig]>
+  sortColumn: string | null
+  sortDirection: SortDirection
+  onToggleSort: (columnKey: string) => void
+  expandedRows: Set<string>
+  onToggleExpand: (rowId: string, expandKey: string) => void
+  favorites: Set<string>
+  onToggleFavorite: (rowId: string) => void
+  columnWidths: Record<string, number>
+  onResizeColumn: (columnKey: string, width: number) => void
+}
+
+const LINE_CLASS: Record<1 | 2 | 3, string> = {
+  1: 'truncate',
+  2: 'line-clamp-2',
+  3: 'line-clamp-3',
+}
+
+// text-sm (14px) × 1.5 line-height × N + 2×8px padding
+const ROW_HEIGHT: Record<2 | 3, string> = {
+  2: '4rem',
+  3: '5.5rem',
+}
+
+function responsiveClass(config: ColumnConfig): string {
+  if (config.hideMobile) return 'hidden md:table-cell'
+  if (config.hideTablet) return 'hidden lg:table-cell'
+  return ''
+}
+
+function getAriaSortValue(
+  key: string,
+  sortColumn: string | null,
+  sortDirection: SortDirection
+): 'ascending' | 'descending' | undefined {
+  if (sortColumn !== key) return undefined
+  return sortDirection === 'asc' ? 'ascending' : 'descending'
+}
+
+const DataGridTableView = React.forwardRef<HTMLDivElement, DataGridTableViewProps>(
+  (
+    {
+      data,
+      columns,
+      sortColumn,
+      sortDirection,
+      onToggleSort,
+      expandedRows,
+      onToggleExpand,
+      favorites,
+      onToggleFavorite,
+      columnWidths,
+      onResizeColumn,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const resizeRef = React.useRef<{
+      key: string
+      startX: number
+      startWidth: number
+    } | null>(null)
+
+    const headerRefs = React.useRef<Record<string, HTMLTableCellElement | null>>({})
+
+    function handleResizeStart(e: React.MouseEvent, key: string) {
+      e.preventDefault()
+      const thEl = headerRefs.current[key]
+      const startWidth = columnWidths[key] || thEl?.offsetWidth || 120
+      resizeRef.current = { key, startX: e.clientX, startWidth }
+
+      function onMouseMove(ev: MouseEvent) {
+        if (!resizeRef.current) return
+        const diff = ev.clientX - resizeRef.current.startX
+        const newWidth = Math.max(60, resizeRef.current.startWidth + diff)
+        onResizeColumn(resizeRef.current.key, newWidth)
+      }
+
+      function onMouseUp() {
+        resizeRef.current = null
+        document.removeEventListener('mousemove', onMouseMove)
+        document.removeEventListener('mouseup', onMouseUp)
+      }
+
+      document.addEventListener('mousemove', onMouseMove)
+      document.addEventListener('mouseup', onMouseUp)
+    }
+
+    function renderCell(row: DataRow, colKey: string, config: ColumnConfig) {
+      if (config.type === 'favorite') {
+        const projectName = String(row[columns[0]?.[0] ?? ''] ?? row.id)
+        return (
+          <FavoriteButton
+            pressed={favorites.has(row.id)}
+            onPressedChange={() => onToggleFavorite(row.id)}
+            projectName={projectName}
+          />
+        )
+      }
+
+      if (config.type === 'expand') {
+        const items = row[colKey] as unknown[]
+        if (!items?.length) {
+          return <span className="text-xs text-muted-foreground">—</span>
+        }
+
+        const compositeKey = `${row.id}::${colKey}`
+        const isExpanded = expandedRows.has(compositeKey)
+
+        return (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onToggleExpand(row.id, colKey)}
+            aria-expanded={isExpanded}
+            aria-label={`${items.length} ${config.expandLabel ?? 'Einträge'} anzeigen`}
+            className="gap-1 text-xs"
+          >
+            <ChevronDown
+              size={14}
+              className={cn('transition-transform', isExpanded && 'rotate-180')}
+            />
+            {items.length} {config.expandLabel ?? 'Einträge'}
+          </Button>
+        )
+      }
+
+      return cellRenderers[config.type](row[colKey], row, config)
+    }
+
+    // Collect expand-type columns for drawer rendering
+    const expandColumns = columns.filter(([, config]) => config.type === 'expand')
+
+    // Max rowLines across all visible columns → determines unified row height
+    const maxRowLines = columns.reduce(
+      (max, [, config]) => Math.max(max, config.rowLines ?? 1),
+      1
+    ) as 1 | 2 | 3
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-grid-table-view"
+        role="region"
+        aria-label="Scrollbare Datentabelle"
+        tabIndex={0}
+        className={cn('overflow-x-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring', className)}
+        {...props}
+      >
+        <Table className="table-fixed" aria-label="Datentabelle">
+          <TableHeader>
+            <TableRow>
+              {columns.map(([key, config]) => {
+                const ariaSort = getAriaSortValue(key, sortColumn, sortDirection)
+                const widthStyle = columnWidths[key]
+                  ? { width: columnWidths[key] }
+                  : undefined
+
+                return (
+                  <TableHead
+                    key={key}
+                    ref={(el) => {
+                      headerRefs.current[key] = el
+                    }}
+                    scope="col"
+                    aria-sort={ariaSort}
+                    className={cn('relative select-none overflow-hidden max-w-0', responsiveClass(config))}
+                    style={widthStyle}
+                  >
+                    {config.sortable ? (
+                      <button
+                        type="button"
+                        onClick={() => onToggleSort(key)}
+                        className="flex items-center gap-1 text-left w-full min-w-0"
+                      >
+                        <span className="truncate flex-1 min-w-0">{config.label}</span>
+                        {sortColumn === key ? (
+                          sortDirection === 'asc' ? (
+                            <ArrowUp size={14} className="shrink-0" />
+                          ) : (
+                            <ArrowDown size={14} className="shrink-0" />
+                          )
+                        ) : (
+                          <ArrowUpDown size={14} className="opacity-30 shrink-0" />
+                        )}
+                      </button>
+                    ) : (
+                      <span className="truncate block">{config.label}</span>
+                    )}
+                    <div
+                      className="absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-primary/20 active:bg-primary/40"
+                      onMouseDown={(e) => handleResizeStart(e, key)}
+                      role="separator"
+                      aria-orientation="vertical"
+                    />
+                  </TableHead>
+                )
+              })}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((row, index) => (
+              <React.Fragment key={row.id}>
+                <TableRow
+                  className="animate-in fade-in-0 slide-in-from-bottom-1"
+                  style={{
+                    animationDelay: `${index * 20}ms`,
+                    animationFillMode: 'backwards',
+                    ...(maxRowLines > 1 ? { height: ROW_HEIGHT[maxRowLines] } : {}),
+                  }}
+                >
+                  {columns.map(([key, config]) => (
+                    <TableCell
+                      key={key}
+                      className={cn(
+                        'overflow-hidden max-w-0 whitespace-normal',
+                        maxRowLines > 1 && 'align-top',
+                        responsiveClass(config)
+                      )}
+                    >
+                      <div className={LINE_CLASS[config.rowLines ?? 1]}>
+                        {renderCell(row, key, config)}
+                      </div>
+                    </TableCell>
+                  ))}
+                </TableRow>
+
+                {expandColumns.map(([expandKey, expandConfig]) => {
+                  const compositeKey = `${row.id}::${expandKey}`
+                  const isExpanded = expandedRows.has(compositeKey)
+                  const items = row[expandKey] as Record<string, unknown>[] | undefined
+
+                  if (!items?.length) return null
+
+                  const title =
+                    expandConfig.expandTitleFn?.(row) ??
+                    `${expandConfig.expandLabel ?? expandKey} (${row.id})`
+
+                  return (
+                    <ExpansionDrawer
+                      key={compositeKey}
+                      items={items}
+                      expandColumns={expandConfig.expandColumns ?? []}
+                      title={title}
+                      colSpan={columns.length}
+                      isOpen={isExpanded}
+                    />
+                  )
+                })}
+              </React.Fragment>
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+    )
+  }
+)
+
+DataGridTableView.displayName = 'DataGridTableView'
+
+export { DataGridTableView }
+export type { DataGridTableViewProps }

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

@@ -0,0 +1,283 @@
+import * as React from 'react'
+import { Table2, List, LayoutGrid, Settings, Search, ChevronDown, Check, X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { InputGroup, InputGroupAddon } from '@/components/ui/input-group'
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'
+import {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandItem,
+} from '@/components/ui/command'
+import { ColumnConfigPopover } from '@/components/ColumnConfigPopover/ColumnConfigPopover'
+import { MoreFiltersPopover } from '../MoreFiltersPopover/MoreFiltersPopover'
+import type { ViewMode, ColumnConfig, DataGridFilters } from '../types'
+
+interface FilterChipProps {
+  label: string
+  values: string[]
+  options: string[]
+  onChange: (values: string[] | null) => void
+}
+
+function FilterChip({ label, values, options, onChange }: FilterChipProps) {
+  const [open, setOpen] = React.useState(false)
+  const hasSelection = values.length > 0
+
+  const buttonLabel =
+    values.length === 0
+      ? label
+      : values.length === 1
+        ? values[0]
+        : `${label} (${values.length})`
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn(
+            'h-8 gap-1 pr-2 text-xs font-normal',
+            hasSelection && 'border-primary/40 bg-primary/5 text-primary'
+          )}
+        >
+          <span className="truncate max-w-[120px]">{buttonLabel}</span>
+          {hasSelection ? (
+            <X
+              size={12}
+              className="shrink-0 text-muted-foreground hover:text-foreground"
+              onClick={(e) => {
+                e.stopPropagation()
+                onChange(null)
+              }}
+            />
+          ) : (
+            <ChevronDown size={12} className="shrink-0 text-muted-foreground" />
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="p-0 min-w-[180px] w-[--radix-popover-trigger-width]">
+        <Command>
+          <CommandInput placeholder="Suchen..." />
+          <CommandList>
+            <CommandEmpty>Keine Ergebnisse</CommandEmpty>
+            {options.map((option) => {
+              const isSelected = values.includes(option)
+              return (
+                <CommandItem
+                  key={option}
+                  value={option}
+                  onSelect={() => {
+                    const next = isSelected
+                      ? values.filter((v) => v !== option)
+                      : [...values, option]
+                    onChange(next.length > 0 ? next : null)
+                    // Popup bleibt offen für weitere Auswahl
+                  }}
+                >
+                  <Check
+                    size={14}
+                    className={cn('shrink-0', isSelected ? 'opacity-100' : 'opacity-0')}
+                  />
+                  {option}
+                </CommandItem>
+              )
+            })}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+interface DataGridToolbarProps extends React.ComponentProps<'div'> {
+  currentView: ViewMode
+  onViewChange: (view: ViewMode) => void
+  columns: Record<string, ColumnConfig>
+  columnOrder: string[]
+  visibleColumns: Set<string>
+  filters: DataGridFilters
+  filterOptions: Record<string, string[]>
+  onFilterChange: (columnKey: string, value: string[] | null) => void
+  searchQuery: string
+  onSearchChange: (query: string) => void
+  hasActiveFilters: boolean
+  onResetFilters: () => void
+  onToggleColumnVisibility: (columnKey: string) => void
+  onReorderColumns: (newOrder: string[]) => void
+}
+
+const DataGridToolbar = React.forwardRef<HTMLDivElement, DataGridToolbarProps>(
+  (
+    {
+      currentView,
+      onViewChange,
+      columns,
+      columnOrder,
+      visibleColumns,
+      filters,
+      filterOptions,
+      onFilterChange,
+      searchQuery,
+      onSearchChange,
+      hasActiveFilters,
+      onResetFilters,
+      onToggleColumnVisibility,
+      onReorderColumns,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const primaryFilterColumns = columnOrder
+      .filter((key) => {
+        const col = columns[key]
+        return col?.filterable && col.primaryFilter && visibleColumns.has(key)
+      })
+      .map((key) => [key, columns[key]] as [string, ColumnConfig])
+
+    const secondaryActiveCount = columnOrder.filter((key) => {
+      const col = columns[key]
+      return (
+        col?.filterable &&
+        !col.primaryFilter &&
+        visibleColumns.has(key) &&
+        filters[key] != null
+      )
+    }).length
+
+    const columnConfigItems = columnOrder.map((key) => ({
+      key,
+      label: columns[key]?.label ?? key,
+    }))
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-grid-toolbar"
+        role="toolbar"
+        aria-label="DataGrid Steuerung"
+        className={cn('flex flex-col gap-2', className)}
+        {...props}
+      >
+        {/* Row 1: View toggle + Density toggle + Column config */}
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <ToggleGroup
+              type="single"
+              variant="outline"
+              value={currentView}
+              onValueChange={(value) => {
+                if (value) onViewChange(value as ViewMode)
+              }}
+              aria-label="Ansicht wählen"
+            >
+              <ToggleGroupItem value="table" aria-label="Tabellenansicht">
+                <Table2 className="size-4" aria-hidden="true" />
+                <span className="hidden sm:inline">Tabelle</span>
+              </ToggleGroupItem>
+              <ToggleGroupItem value="list" aria-label="Listenansicht">
+                <List className="size-4" aria-hidden="true" />
+                <span className="hidden sm:inline">Liste</span>
+              </ToggleGroupItem>
+              <ToggleGroupItem value="cards" aria-label="Kartenansicht">
+                <LayoutGrid className="size-4" aria-hidden="true" />
+                <span className="hidden sm:inline">Karten</span>
+              </ToggleGroupItem>
+            </ToggleGroup>
+
+          </div>
+
+          <ColumnConfigPopover
+            columns={columnConfigItems}
+            visibleColumns={visibleColumns}
+            onVisibilityChange={(key, visible) => {
+              if (visible !== visibleColumns.has(key)) {
+                onToggleColumnVisibility(key)
+              }
+            }}
+            onReorder={onReorderColumns}
+          >
+            <Button variant="outline" size="sm" aria-label="Spalten konfigurieren">
+              <Settings className="size-4" aria-hidden="true" />
+              <span className="hidden sm:inline">Konfigurieren</span>
+            </Button>
+          </ColumnConfigPopover>
+        </div>
+
+        {/* Row 2: Filter chips + Search */}
+        <div className="flex items-center justify-between gap-2 flex-wrap">
+          <div className="flex items-center gap-2 flex-wrap">
+            {primaryFilterColumns.map(([key, config]) => (
+              <FilterChip
+                key={key}
+                label={config.label}
+                values={filters[key] ?? []}
+                options={filterOptions[key] ?? []}
+                onChange={(vals) => onFilterChange(key, vals)}
+              />
+            ))}
+
+            {hasActiveFilters && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onResetFilters}
+                aria-label="Alle Filter zurücksetzen"
+              >
+                Filter zurücksetzen
+              </Button>
+            )}
+
+            <MoreFiltersPopover
+              columns={columns}
+              columnOrder={columnOrder}
+              visibleColumns={visibleColumns}
+              filters={filters}
+              filterOptions={filterOptions}
+              onFilterChange={onFilterChange}
+            >
+              <Button variant="ghost" size="sm" aria-label="Weitere Filter öffnen">
+                + mehr Filter
+                {secondaryActiveCount > 0 && (
+                  <Badge
+                    variant="default"
+                    className="ml-1 size-4 min-w-0 rounded-full p-0 text-[10px] leading-none"
+                    aria-label={`${secondaryActiveCount} aktive sekundäre Filter`}
+                  >
+                    {secondaryActiveCount}
+                  </Badge>
+                )}
+              </Button>
+            </MoreFiltersPopover>
+          </div>
+
+          <InputGroup className="w-auto max-w-[220px]">
+            <InputGroupAddon align="inline-start">
+              <Search className="size-4" aria-hidden="true" />
+            </InputGroupAddon>
+            <input
+              data-slot="input-group-control"
+              type="search"
+              placeholder="Suche..."
+              value={searchQuery}
+              onChange={(e) => onSearchChange(e.target.value)}
+              aria-label="Datensätze durchsuchen"
+              className="flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 h-full px-2 text-sm outline-none"
+            />
+          </InputGroup>
+        </div>
+      </div>
+    )
+  }
+)
+
+DataGridToolbar.displayName = 'DataGridToolbar'
+
+export { DataGridToolbar }
+export type { DataGridToolbarProps }

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

@@ -0,0 +1,41 @@
+import * as React from 'react'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { cn } from '@/lib/utils'
+
+interface DomainSwitcherProps extends React.ComponentProps<'div'> {
+  domains: Array<{ key: string; label: string }>
+  activeDomain: string
+  onDomainChange: (key: string) => void
+}
+
+const DomainSwitcher = React.forwardRef<HTMLDivElement, DomainSwitcherProps>(
+  ({ domains, activeDomain, onDomainChange, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="domain-switcher"
+        aria-label="Datenquelle wechseln"
+        className={cn('flex items-center gap-3', className)}
+        {...props}
+      >
+        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          Datenquelle
+        </span>
+        <Tabs value={activeDomain} onValueChange={onDomainChange}>
+          <TabsList>
+            {domains.map((domain) => (
+              <TabsTrigger key={domain.key} value={domain.key}>
+                {domain.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </Tabs>
+      </div>
+    )
+  }
+)
+
+DomainSwitcher.displayName = 'DomainSwitcher'
+
+export { DomainSwitcher }
+export type { DomainSwitcherProps }