@fastnd/components 1.0.26 → 1.0.28

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

@@ -0,0 +1,139 @@
+import * as React from 'react'
+import { Plus } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import type { ExpandColumnConfig } from '../types'
+
+interface ExpansionDrawerProps extends React.ComponentProps<'tr'> {
+  items: Record<string, unknown>[]
+  expandColumns: ExpandColumnConfig[]
+  title: string
+  colSpan: number
+  isOpen: boolean
+  onAdd?: (item: Record<string, unknown>) => void
+}
+
+function getScoreBarColor(pct: number): string {
+  const hue = (pct / 100) * 142
+  return `hsl(${hue}, 75%, 45%)`
+}
+
+function ScoreBar({ value }: { value: unknown }) {
+  const raw = typeof value === 'number' ? value : Number(value)
+  const pct = raw <= 1 ? raw * 100 : raw
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="relative h-2 flex-1 overflow-hidden rounded-full bg-muted">
+        <div
+          className="h-full rounded-full"
+          style={{ width: `${pct}%`, backgroundColor: getScoreBarColor(pct) }}
+        />
+      </div>
+      <span className="text-xs font-medium tabular-nums w-8 text-right">{pct.toFixed(0)}%</span>
+    </div>
+  )
+}
+
+function CellContent({ col, value }: { col: ExpandColumnConfig; value: unknown }) {
+  if (col.type === 'score-bar') {
+    return (
+      <td className="p-2 align-middle">
+        <ScoreBar value={value} />
+      </td>
+    )
+  }
+
+  if (col.bold) {
+    return (
+      <td className="p-2 align-middle">
+        <span className="font-medium">{String(value ?? '')}</span>
+      </td>
+    )
+  }
+
+  if (col.muted) {
+    const str = String(value ?? '')
+    if (str.includes('AI')) {
+      return (
+        <td className="p-2 align-middle">
+          <Badge
+            className="bg-[var(--color-info-variant)] text-[var(--color-info)] border-transparent text-[0.625rem] font-semibold uppercase tracking-wide mr-1.5"
+          >
+            KI
+          </Badge>
+          <span className="text-xs text-muted-foreground">{str}</span>
+        </td>
+      )
+    }
+    return (
+      <td className="p-2 align-middle text-xs text-muted-foreground">{str}</td>
+    )
+  }
+
+  return <td className="p-2 align-middle">{String(value ?? '')}</td>
+}
+
+const ExpansionDrawer = React.forwardRef<HTMLTableRowElement, ExpansionDrawerProps>(
+  ({ items, expandColumns, title, colSpan, isOpen, onAdd, className, ...props }, ref) => {
+    return (
+      <tr
+        ref={ref}
+        data-slot="expansion-drawer"
+        className={cn('border-b', !isOpen && 'hidden', className)}
+        {...props}
+      >
+        <td colSpan={colSpan} className="p-0">
+          <div className="bg-muted/30 px-8 py-4">
+            <div className="text-sm font-medium mb-3">{title}</div>
+            <table className="w-full text-sm" aria-label={title}>
+              <thead>
+                <tr>
+                  {expandColumns.map((col) => (
+                    <th
+                      key={col.key}
+                      scope="col"
+                      className="p-2 text-left align-middle font-medium text-muted-foreground text-xs"
+                    >
+                      {col.label}
+                    </th>
+                  ))}
+                  <th scope="col" className="w-24 p-2" />
+                </tr>
+              </thead>
+              <tbody>
+                {items.map((item, index) => {
+                  const firstColValue = String(item[expandColumns[0]?.key] ?? index)
+                  return (
+                    <tr key={index} className="border-t border-border/50">
+                      {expandColumns.map((col) => (
+                        <CellContent key={col.key} col={col} value={item[col.key]} />
+                      ))}
+                      <td className="p-2 align-middle">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          aria-label={`${firstColValue} hinzufügen`}
+                          onClick={() => onAdd?.(item)}
+                        >
+                          <Plus size={14} />
+                          Hinzufügen
+                        </Button>
+                      </td>
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        </td>
+      </tr>
+    )
+  }
+)
+
+ExpansionDrawer.displayName = 'ExpansionDrawer'
+
+export { ExpansionDrawer }
+export type { ExpansionDrawerProps }

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

@@ -0,0 +1,230 @@
+import * as React from 'react'
+import { SlidersHorizontal, ChevronDown, Check } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible'
+import { Badge } from '@/components/ui/badge'
+import type { ColumnConfig, DataGridFilters } from '../types'
+
+interface MoreFiltersPopoverProps extends React.ComponentProps<'div'> {
+  columns: Record<string, ColumnConfig>
+  columnOrder: string[]
+  visibleColumns: Set<string>
+  filters: DataGridFilters
+  filterOptions: Record<string, string[]>
+  onFilterChange: (columnKey: string, values: string[] | null) => void
+  children?: React.ReactNode
+}
+
+const MoreFiltersPopover = React.forwardRef<HTMLDivElement, MoreFiltersPopoverProps>(
+  (
+    {
+      columns,
+      columnOrder,
+      visibleColumns,
+      filters,
+      filterOptions,
+      onFilterChange,
+      children,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [openGroups, setOpenGroups] = React.useState<Record<string, boolean>>({})
+    const [searchQueries, setSearchQueries] = React.useState<Record<string, string>>({})
+
+    const secondaryFilterKeys = columnOrder.filter((key) => {
+      const col = columns[key]
+      return col?.filterable && !col.primaryFilter && visibleColumns.has(key)
+    })
+
+    const activeSecondaryCount = secondaryFilterKeys.filter(
+      (key) => (filters[key]?.length ?? 0) > 0
+    ).length
+
+    const toggleGroup = (key: string) => {
+      setOpenGroups((prev) => ({ ...prev, [key]: !prev[key] }))
+    }
+
+    const handleSearchChange = (key: string, query: string) => {
+      setSearchQueries((prev) => ({ ...prev, [key]: query }))
+    }
+
+    const getFilteredOptions = (key: string): string[] => {
+      const options = filterOptions[key] ?? []
+      const query = searchQueries[key]?.toLowerCase() ?? ''
+      if (!query) return options
+      return options.filter((opt) => opt.toLowerCase().includes(query))
+    }
+
+    const handleOptionSelect = (columnKey: string, option: string) => {
+      const current = filters[columnKey] ?? []
+      const next = current.includes(option)
+        ? current.filter((v) => v !== option)
+        : [...current, option]
+      onFilterChange(columnKey, next.length > 0 ? next : null)
+    }
+
+    return (
+      <div
+        ref={ref}
+        data-slot="more-filters-popover"
+        className={cn('inline-flex', className)}
+        {...props}
+      >
+        <Popover>
+          <PopoverTrigger asChild>
+            {children ?? (
+              <button
+                type="button"
+                className={cn(
+                  'inline-flex items-center gap-1.5 rounded-md border border-border bg-background px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  activeSecondaryCount > 0 && 'border-primary text-primary'
+                )}
+                aria-label="Weitere Filter öffnen"
+              >
+                <SlidersHorizontal className="size-3.5" aria-hidden="true" />
+                + mehr Filter
+                {activeSecondaryCount > 0 && (
+                  <Badge
+                    variant="default"
+                    className="ml-0.5 size-4 min-w-0 rounded-full p-0 text-[10px] leading-none"
+                    aria-label={`${activeSecondaryCount} aktive Filter`}
+                  >
+                    {activeSecondaryCount}
+                  </Badge>
+                )}
+              </button>
+            )}
+          </PopoverTrigger>
+
+          <PopoverContent
+            align="start"
+            className="w-72 p-0"
+            aria-label="Weitere Filter"
+          >
+            <div className="flex items-center justify-between border-b border-border px-4 py-3">
+              <span className="text-sm font-semibold">Weitere Filter</span>
+              {activeSecondaryCount > 0 && (
+                <button
+                  type="button"
+                  onClick={() => {
+                    secondaryFilterKeys.forEach((key) => onFilterChange(key, null))
+                  }}
+                  className="text-xs text-muted-foreground underline-offset-2 hover:text-foreground hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  Alle zurücksetzen
+                </button>
+              )}
+            </div>
+
+            <ul className="divide-y divide-border" role="list">
+              {secondaryFilterKeys.map((key) => {
+                const col = columns[key]
+                const activeValues = filters[key] ?? []
+                const isOpen = openGroups[key] ?? false
+                const filtered = getFilteredOptions(key)
+
+                return (
+                  <li key={key}>
+                    <Collapsible open={isOpen} onOpenChange={() => toggleGroup(key)}>
+                      <CollapsibleTrigger asChild>
+                        <button
+                          type="button"
+                          className={cn(
+                            'flex w-full items-center justify-between px-4 py-2.5 text-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+                            activeValues.length > 0 && 'text-primary'
+                          )}
+                          aria-expanded={isOpen}
+                          aria-controls={`filter-group-${key}`}
+                        >
+                          <span className="font-medium">{col.label}</span>
+                          <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                            {activeValues.length > 0 && (
+                              <span
+                                className="max-w-[80px] truncate font-medium text-primary"
+                              >
+                                {activeValues.length === 1
+                                  ? activeValues[0]
+                                  : `${activeValues.length} ausgewählt`}
+                              </span>
+                            )}
+                            <ChevronDown
+                              className={cn(
+                                'size-3.5 shrink-0 transition-transform duration-200',
+                                isOpen && 'rotate-180'
+                              )}
+                              aria-hidden="true"
+                            />
+                          </span>
+                        </button>
+                      </CollapsibleTrigger>
+
+                      <CollapsibleContent id={`filter-group-${key}`}>
+                        <div className="border-t border-border bg-muted/30 px-3 pb-2 pt-2">
+                          <input
+                            type="search"
+                            placeholder="Suchen…"
+                            value={searchQueries[key] ?? ''}
+                            onChange={(e) => handleSearchChange(key, e.target.value)}
+                            className="mb-2 w-full rounded-md border border-border bg-background px-2.5 py-1.5 text-xs placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                            aria-label={`${col.label} durchsuchen`}
+                          />
+
+                          <ul role="listbox" aria-label={`Optionen für ${col.label}`}>
+                            {filtered.map((option) => {
+                              const isSelected = activeValues.includes(option)
+                              return (
+                                <li key={option} role="option" aria-selected={isSelected}>
+                                  <button
+                                    type="button"
+                                    onClick={() => handleOptionSelect(key, option)}
+                                    className={cn(
+                                      'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-xs transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                                      isSelected && 'font-medium text-primary'
+                                    )}
+                                  >
+                                    <Check
+                                      className={cn(
+                                        'size-3 shrink-0 transition-opacity',
+                                        isSelected ? 'opacity-100' : 'opacity-0'
+                                      )}
+                                      aria-hidden="true"
+                                    />
+                                    {option}
+                                  </button>
+                                </li>
+                              )
+                            })}
+
+                            {filtered.length === 0 && (
+                              <li className="px-2 py-1.5 text-xs text-muted-foreground">
+                                Keine Optionen gefunden
+                              </li>
+                            )}
+                          </ul>
+                        </div>
+                      </CollapsibleContent>
+                    </Collapsible>
+                  </li>
+                )
+              })}
+
+              {secondaryFilterKeys.length === 0 && (
+                <li className="px-4 py-3 text-xs text-muted-foreground">
+                  Keine weiteren Filter verfügbar
+                </li>
+              )}
+            </ul>
+          </PopoverContent>
+        </Popover>
+      </div>
+    )
+  }
+)
+
+MoreFiltersPopover.displayName = 'MoreFiltersPopover'
+
+export { MoreFiltersPopover }
+export type { MoreFiltersPopoverProps }

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

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface ResultCountProps extends React.ComponentProps<'div'> {
+  filtered: number
+  total: number
+  label: string
+}
+
+const ResultCount = React.forwardRef<HTMLDivElement, ResultCountProps>(
+  ({ filtered, total, label, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="result-count"
+        className={cn('px-5 py-2 text-xs text-muted-foreground border-t border-border', className)}
+        {...props}
+      >
+        <span className="font-[family-name:var(--font-grotesk)] font-semibold">{filtered}</span>
+        {' von '}
+        <span className="font-[family-name:var(--font-grotesk)] font-semibold">{total}</span>
+        {' '}
+        {label}
+        {' angezeigt'}
+      </div>
+    )
+  }
+)
+
+ResultCount.displayName = 'ResultCount'
+
+export { ResultCount }
+export type { ResultCountProps }

package/dist/examples/data-visualization/cell-renderers.tsx

@@ -0,0 +1,119 @@
+import type { ReactNode } from 'react'
+import type { CellType, ColumnConfig, DataRow } from './types'
+import { Badge } from '@/components/ui/badge'
+import { ProgressCircle } from '@/components/ProgressCircle/ProgressCircle'
+import { DoubleTextCell } from '@/components/DoubleTextCell/DoubleTextCell'
+import { cn } from '@/lib/utils'
+
+type CellRenderer = (value: unknown, row: DataRow, config: ColumnConfig) => ReactNode
+
+// Status badge color mapping based on statusMap CSS class
+const STATUS_COLORS: Record<string, string> = {
+  active: 'bg-[var(--lifecycle-active-bg)] text-[var(--lifecycle-active)]',
+  nrnd: 'bg-[var(--lifecycle-nrnd-bg)] text-[var(--lifecycle-nrnd)]',
+  eol: 'bg-[var(--lifecycle-eol-bg)] text-[var(--lifecycle-eol)]',
+  production: 'bg-[var(--lifecycle-production-bg)] text-[var(--lifecycle-production)]',
+}
+
+const INVENTORY_COLORS: Record<string, string> = {
+  high: 'bg-[var(--inventory-high-bg)] text-[var(--inventory-high)]',
+  medium: 'bg-[var(--inventory-medium-bg)] text-[var(--inventory-medium)]',
+  low: 'bg-[var(--inventory-low-bg)] text-[var(--inventory-low)]',
+}
+
+// Computes HSL color for score bars: red (0%) → yellow (50%) → green (100%)
+function getScoreBarColor(pct: number): string {
+  const hue = (pct / 100) * 142 // 0 = red, 71 = yellow, 142 = green
+  return `hsl(${hue}, 75%, 45%)`
+}
+
+export const cellRenderers: Record<CellType, CellRenderer> = {
+  text: (value) => <span>{String(value ?? '')}</span>,
+
+  'double-text': (value, row, config) => (
+    <DoubleTextCell
+      primary={String(value ?? '')}
+      secondary={config.secondary ? String(row[config.secondary] ?? '') : undefined}
+    />
+  ),
+
+  link: (value) => (
+    <a href="#" className="text-primary font-medium hover:underline truncate">
+      {String(value ?? '')}
+    </a>
+  ),
+
+  'status-badge': (value, _row, config) => {
+    const statusKey =
+      config.statusMap?.[String(value)] ?? String(value).toLowerCase().replace(/\s+/g, '-')
+    const colorClass = STATUS_COLORS[statusKey] ?? 'bg-secondary text-secondary-foreground'
+    return (
+      <Badge variant="secondary" className={cn('border-transparent', colorClass)}>
+        {String(value)}
+      </Badge>
+    )
+  },
+
+  currency: (value, row, config) => {
+    const num = typeof value === 'number' ? value : 0
+    const cur = config.currencyField ? String(row[config.currencyField] ?? '') : ''
+    return (
+      <span className="font-[family-name:var(--font-grotesk)] font-medium tabular-nums">
+        {num.toFixed(2).replace('.', ',')}
+        {cur && <span className="ml-1 text-muted-foreground font-normal">{cur}</span>}
+      </span>
+    )
+  },
+
+  inventory: (value, _row, config) => {
+    const num = typeof value === 'number' ? value : 0
+    const level = config.levelFn?.(num) ?? 'medium'
+    const formatted = config.formatFn?.(num) ?? String(num)
+    const colorClass = INVENTORY_COLORS[level] ?? INVENTORY_COLORS.medium
+    return (
+      <Badge variant="secondary" className={cn('border-transparent', colorClass)}>
+        {formatted}
+      </Badge>
+    )
+  },
+
+  'inventory-label': (value, _row, config) => {
+    const num = typeof value === 'number' ? value : 0
+    const level = config.levelFn?.(num) ?? 'medium'
+    const labelMap = config.labelMap ?? { high: 'Hoch', medium: 'Mittel', low: 'Niedrig' }
+    const colorClass = INVENTORY_COLORS[level] ?? INVENTORY_COLORS.medium
+    return (
+      <Badge variant="secondary" className={cn('border-transparent', colorClass)}>
+        {labelMap[level]}
+      </Badge>
+    )
+  },
+
+  progress: (value) => {
+    const pct = typeof value === 'number' ? value : 0
+    return <ProgressCircle value={pct} />
+  },
+
+  // favorite and expand are handled inline by the view components (they need callbacks)
+  favorite: () => null,
+  expand: () => null,
+}
+
+// Score bar renderer for expansion drawer tables
+export function renderScoreBar(value: number): ReactNode {
+  const pct = value <= 1 ? value * 100 : value
+  const color = getScoreBarColor(pct)
+  return (
+    <div className="flex items-center gap-2">
+      <div className="relative h-2 flex-1 overflow-hidden rounded-full bg-muted">
+        <div
+          className="h-full rounded-full transition-all"
+          style={{ width: `${pct}%`, backgroundColor: color }}
+        />
+      </div>
+      <span className="text-xs font-medium tabular-nums w-8 text-right">
+        {pct.toFixed(0)}%
+      </span>
+    </div>
+  )
+}