@fastnd/components 1.0.31 → 1.0.33

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

@@ -0,0 +1,455 @@
+import React, { useState, useRef, useCallback } from 'react'
+import { ChevronUp, ChevronDown, ArrowLeftRight, Sparkles, Plus, Star } from 'lucide-react'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@/components/ui/hover-card'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { ScoreBar } from '@/components/ScoreBar/ScoreBar'
+import { renderCell } from '../CellRenderers/CellRenderers'
+import { cn } from '@/lib/utils'
+import type { ColumnDef, ExpandColumnDef, SortState } from '../types'
+
+// Icon mapping for expand column headers
+const HEADER_ICONS: Record<string, React.ElementType> = {
+  arrowLeftRight: ArrowLeftRight,
+  sparkles: Sparkles,
+  star: Star,
+}
+
+// Default minimum widths per column type (px)
+const DEFAULT_MIN_WIDTHS: Partial<Record<string, number>> = {
+  favorite: 48,
+  expand: 64,
+  'status-badge': 100,
+  inventory: 100,
+  currency: 100,
+  'double-text': 200,
+  link: 140,
+}
+
+// Column types that should wrap text (line-clamp handles truncation)
+const WRAPPABLE_TYPES = new Set(['text', 'link', 'double-text'])
+
+function computeRowHeight(visibleColumns: string[], columns: Record<string, ColumnDef>): string {
+  for (const key of visibleColumns) {
+    const col = columns[key]
+    if (!col) continue
+    if (WRAPPABLE_TYPES.has(col.type)) return 'min-h-[56px]'
+  }
+  return ''
+}
+
+interface ExpansionCellProps {
+  mainColKey: string
+  expandColKey: string
+  mainCol: ColumnDef
+  mapLookup: Record<string, ExpandColumnDef>
+  item: Record<string, unknown>
+}
+
+function ExpansionCell({ mainColKey, expandColKey, mainCol, mapLookup, item }: ExpansionCellProps) {
+  // Expand column itself → show "Hinzufügen" button
+  if (mainColKey === expandColKey) {
+    return (
+      <Button
+        variant="ghost"
+        size="icon"
+        className="size-7"
+        aria-label="Hinzufügen"
+        onClick={(e) => e.preventDefault()}
+      >
+        <Plus className="size-3.5" aria-hidden="true" />
+      </Button>
+    )
+  }
+
+  const ec = mapLookup[mainColKey]
+  if (!ec) return null
+
+  const val = item[ec.key]
+
+  // double-text with secondary key
+  if (mainCol.type === 'double-text' && ec.secondaryKey) {
+    const sec = item[ec.secondaryKey]
+    return (
+      <>
+        <span className={cn('font-semibold text-[13px] line-clamp-2', ec.bold && 'font-bold')}>
+          {val != null ? String(val) : ''}
+        </span>
+        <span className="text-muted-foreground text-xs line-clamp-1">
+          {sec != null ? String(sec) : ''}
+        </span>
+      </>
+    )
+  }
+
+  // link
+  if (mainCol.type === 'link') {
+    return (
+      <a
+        href="#"
+        className="text-primary hover:underline text-[13px]"
+        onClick={(e) => e.preventDefault()}
+      >
+        {val != null ? String(val) : ''}
+      </a>
+    )
+  }
+
+  // status-badge
+  if (mainCol.type === 'status-badge' && mainCol.statusMap && val != null) {
+    const status = mainCol.statusMap[String(val)] ?? 'active'
+    const STATUS_COLORS: Record<string, string> = {
+      active: 'bg-[var(--lifecycle-active-bg)] text-[var(--lifecycle-active)] border-transparent',
+      nrnd: 'bg-[var(--lifecycle-nrnd-bg)] text-[var(--lifecycle-nrnd)] border-transparent',
+      eol: 'bg-[var(--lifecycle-eol-bg)] text-[var(--lifecycle-eol)] border-transparent',
+      production: 'bg-[var(--lifecycle-production-bg)] text-[var(--lifecycle-production)] border-transparent',
+    }
+    return (
+      <Badge className={cn('gap-1.5', STATUS_COLORS[status])}>
+        <span
+          className={cn('size-1.5 rounded-full', `bg-[var(--lifecycle-${status})]`)}
+          aria-hidden="true"
+        />
+        {String(val)}
+      </Badge>
+    )
+  }
+
+  // score-bar (expand column own type)
+  if (ec.type === 'score-bar') {
+    return <ScoreBar value={val != null ? Number(val) : 0} />
+  }
+
+  // muted text
+  if (ec.muted) {
+    return <span className="text-muted-foreground text-xs line-clamp-3">{val != null ? String(val) : ''}</span>
+  }
+
+  // boolean
+  if (typeof val === 'boolean') {
+    return <span className="text-[13px]">{val ? 'Ja' : 'Nein'}</span>
+  }
+
+  // default text (ec.bold = semibold, always 3-line clamp per spec)
+  return (
+    <span className={cn('text-[13px] line-clamp-3', ec.bold && 'font-semibold')}>
+      {val != null ? String(val) : ''}
+    </span>
+  )
+}
+
+interface ExpansionSectionProps {
+  row: Record<string, unknown>
+  colKey: string
+  visibleColumns: string[]
+  columns: Record<string, ColumnDef>
+}
+
+function ExpansionSection({ row, colKey, visibleColumns, columns }: ExpansionSectionProps) {
+  const col = columns[colKey]
+  const items = row[colKey] as Record<string, unknown>[] | undefined
+  if (!items?.length || !col.expandColumns) return null
+
+  const mapLookup: Record<string, ExpandColumnDef> = {}
+  for (const ec of col.expandColumns) {
+    if (ec.mapTo) mapLookup[ec.mapTo] = ec
+  }
+
+  const title = col.expandTitleFn ? col.expandTitleFn(row) : col.expandLabel
+
+  return (
+    <>
+      {/* Title row */}
+      <TableRow className="bg-secondary hover:bg-secondary">
+        <TableCell
+          colSpan={visibleColumns.length}
+          className="py-2 text-xs uppercase tracking-wide font-semibold text-muted-foreground"
+        >
+          {title}
+        </TableCell>
+      </TableRow>
+
+      {/* Data rows */}
+      {items.map((item, i) => (
+        <TableRow
+          key={i}
+          className={cn(
+            'bg-accent/50 hover:bg-primary/5',
+            i === items.length - 1 && 'border-b-2 border-b-border',
+          )}
+        >
+          {visibleColumns.map((mainKey) => {
+            const mainCol = columns[mainKey]
+            if (!mainCol) return <TableCell key={mainKey} />
+
+            return (
+              <TableCell
+                key={mainKey}
+                className={cn(
+                  mainCol.hideTablet && 'hidden lg:table-cell',
+                  mainCol.hideMobile && 'hidden sm:table-cell',
+                )}
+              >
+                <ExpansionCell
+                  mainColKey={mainKey}
+                  expandColKey={colKey}
+                  mainCol={mainCol}
+                  mapLookup={mapLookup}
+                  item={item}
+                />
+              </TableCell>
+            )
+          })}
+        </TableRow>
+      ))}
+    </>
+  )
+}
+
+export interface DataTableViewProps {
+  data: Record<string, unknown>[]
+  columns: Record<string, ColumnDef>
+  visibleColumns: string[]
+  sort: SortState
+  onToggleSort: (column: string) => void
+  expandedRows: Set<string>
+  onToggleExpansion: (rowId: string, field: string) => void
+  favorites: Set<string>
+  onToggleFavorite: (id: string) => void
+  footer?: React.ReactNode
+  className?: string
+}
+
+export function DataTableView({
+  data,
+  columns,
+  visibleColumns,
+  sort,
+  onToggleSort,
+  expandedRows,
+  onToggleExpansion,
+  favorites,
+  onToggleFavorite,
+  footer,
+  className,
+}: DataTableViewProps) {
+  // Column widths: keyed by column key, value in px
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({})
+
+  // Resize tracking ref (not state — no re-render during drag)
+  const resizeRef = useRef<{
+    colKey: string
+    startX: number
+    startWidth: number
+  } | null>(null)
+
+  const handleResizeMouseDown = useCallback(
+    (e: React.MouseEvent, colKey: string) => {
+      e.preventDefault()
+      const th = (e.target as HTMLElement).closest('th')
+      if (!th) return
+      // Use actual rendered width so resize starts from wherever the browser laid things out
+      const startWidth = columnWidths[colKey] ?? th.getBoundingClientRect().width
+      resizeRef.current = { colKey, startX: e.clientX, startWidth }
+
+      const onMouseMove = (ev: MouseEvent) => {
+        if (!resizeRef.current) return
+        const delta = ev.clientX - resizeRef.current.startX
+        const newWidth = Math.max(60, resizeRef.current.startWidth + delta)
+        setColumnWidths((prev) => ({ ...prev, [resizeRef.current!.colKey]: newWidth }))
+      }
+
+      const onMouseUp = () => {
+        resizeRef.current = null
+        window.removeEventListener('mousemove', onMouseMove)
+        window.removeEventListener('mouseup', onMouseUp)
+      }
+
+      window.addEventListener('mousemove', onMouseMove)
+      window.addEventListener('mouseup', onMouseUp)
+    },
+    [columnWidths, columns],
+  )
+
+  const rowHeightClass = computeRowHeight(visibleColumns, columns)
+
+  // Collect expand column keys for the current domain
+  const expandColKeys = visibleColumns.filter((k) => columns[k]?.type === 'expand')
+
+  return (
+    <div className={cn('mx-4 mb-4 border border-border rounded-md overflow-hidden', className)}>
+    <div
+        className="overflow-x-auto"
+        role="region"
+        aria-label="Datentabelle"
+        tabIndex={0}
+      >
+        <Table>
+          <TableHeader>
+            <TableRow className="bg-secondary hover:bg-secondary">
+              {visibleColumns.map((colKey) => {
+                const col = columns[colKey]
+                if (!col) return null
+
+                const isActiveSort = sort.column === colKey
+                // Only apply explicit width when user has dragged; otherwise let browser auto-size
+                const userWidth = columnWidths[colKey]
+
+                return (
+                  <TableHead
+                    key={colKey}
+                    scope="col"
+                    className={cn(
+                      'group/th relative select-none',
+                      col.hideTablet && 'hidden lg:table-cell',
+                      col.hideMobile && 'hidden sm:table-cell',
+                    )}
+                    style={userWidth != null ? { width: userWidth } : undefined}
+                    aria-sort={
+                      isActiveSort
+                        ? sort.direction === 'asc'
+                          ? 'ascending'
+                          : 'descending'
+                        : undefined
+                    }
+                  >
+                    {col.sortable ? (
+                      // Sortable headers render as ghost Button for proper hover/focus states
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        className="-mx-2 gap-1 px-2 font-medium text-xs uppercase tracking-[0.03em] text-foreground"
+                        onClick={() => onToggleSort(colKey)}
+                      >
+                        {col.label}
+                        <span aria-hidden="true" className="text-muted-foreground">
+                          {isActiveSort ? (
+                            sort.direction === 'asc' ? (
+                              <ChevronUp className="size-3.5" />
+                            ) : (
+                              <ChevronDown className="size-3.5" />
+                            )
+                          ) : (
+                            <ChevronDown className="size-3.5 opacity-40" />
+                          )}
+                        </span>
+                      </Button>
+                    ) : col.headerIcon ? (
+                      // Icon-only header with hover card for expand columns
+                      <HoverCard openDelay={200}>
+                        <HoverCardTrigger asChild>
+                          <span
+                            className="inline-flex items-center justify-center cursor-help text-muted-foreground"
+                            aria-label={col.headerTooltip ?? col.label}
+                          >
+                            {React.createElement(HEADER_ICONS[col.headerIcon] ?? ArrowLeftRight, {
+                              className: 'size-4',
+                              'aria-hidden': true,
+                            })}
+                          </span>
+                        </HoverCardTrigger>
+                        <HoverCardContent side="top" className="w-auto p-2 text-sm">
+                          {col.headerTooltip ?? col.label}
+                        </HoverCardContent>
+                      </HoverCard>
+                    ) : (
+                      <span className="text-xs font-medium uppercase tracking-[0.03em]">
+                        {col.label}
+                      </span>
+                    )}
+
+                    {/* Resize handle */}
+                    <div
+                      role="separator"
+                      aria-orientation="vertical"
+                      className={cn(
+                        'absolute right-0 top-0 h-full w-1 cursor-col-resize opacity-0 group-hover/th:opacity-100 transition-opacity',
+                        'hover:bg-primary active:bg-primary active:opacity-100',
+                      )}
+                      onMouseDown={(e) => handleResizeMouseDown(e, colKey)}
+                      onClick={(e) => e.stopPropagation()}
+                    />
+                  </TableHead>
+                )
+              })}
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {data.map((row, idx) => {
+              const rowId = String(row.id ?? idx)
+              const expandedColKeys = expandColKeys.filter((k) =>
+                expandedRows.has(`${rowId}::${k}`),
+              )
+              const isFavorite = favorites.has(rowId)
+
+              return (
+                <React.Fragment key={rowId}>
+                  <TableRow
+                    className={cn(
+                      'animate-in fade-in slide-in-from-bottom-1',
+                      rowHeightClass,
+                      expandedColKeys.length > 0 && 'border-b-0',
+                    )}
+                    style={{ animationDelay: `${idx * 30}ms` }}
+                  >
+                    {visibleColumns.map((colKey) => {
+                      const col = columns[colKey]
+                      if (!col) return null
+
+                      const isExpanded = expandedRows.has(`${rowId}::${colKey}`)
+
+                      return (
+                        <TableCell
+                          key={colKey}
+                          className={cn(
+                            col.hideTablet && 'hidden lg:table-cell',
+                            col.hideMobile && 'hidden sm:table-cell',
+                            // Allow wrappable columns to shrink; line-clamp handles truncation
+                            WRAPPABLE_TYPES.has(col.type) && 'whitespace-normal',
+                          )}
+                          style={columnWidths[colKey] != null ? { width: columnWidths[colKey] } : undefined}
+                        >
+                          {renderCell(colKey, col, row, {
+                            isExpanded,
+                            isFavorite,
+                            onToggleExpand: () => onToggleExpansion(rowId, colKey),
+                            onToggleFavorite: () => onToggleFavorite(rowId),
+                          })}
+                        </TableCell>
+                      )
+                    })}
+                  </TableRow>
+
+                  {/* Expansion sections for each expanded column */}
+                  {expandedColKeys.map((expColKey) => (
+                    <ExpansionSection
+                      key={`${rowId}::${expColKey}`}
+                      row={row}
+                      colKey={expColKey}
+                      visibleColumns={visibleColumns}
+                      columns={columns}
+                    />
+                  ))}
+                </React.Fragment>
+              )
+            })}
+          </TableBody>
+        </Table>
+      </div>
+      {footer && <div className="border-t border-border">{footer}</div>}
+    </div>
+  )
+}

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

@@ -0,0 +1,151 @@
+import { Search } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { useDataExplorerState } from '../hooks/use-data-explorer-state'
+import { useColumnConfig } from '../hooks/use-column-config'
+import { DOMAIN_KEYS, DATA_SOURCES } from '../constants'
+import type { DomainKey } from '../types'
+import { DataExplorerToolbar } from '../DataExplorerToolbar/DataExplorerToolbar'
+import { FilterChipGroup } from '../FilterChipGroup/FilterChipGroup'
+import { MoreFiltersPopover } from '../MoreFiltersPopover/MoreFiltersPopover'
+import { ColumnConfigPopover } from '../ColumnConfigPopover/ColumnConfigPopover'
+import { DataTableView } from '../DataTableView/DataTableView'
+import { DataListView } from '../DataListView/DataListView'
+import { DataCardView } from '../DataCardView/DataCardView'
+import { DataExplorerPagination } from '../DataExplorerPagination/DataExplorerPagination'
+
+export function DataVisualizationPage({ className }: { className?: string }) {
+  const state = useDataExplorerState()
+  const columnConfig = useColumnConfig({ activeDomain: state.activeDomain })
+
+  const visibleColumns = columnConfig.visibleColumns
+
+  return (
+    <div data-slot="data-visualization-page" className={cn('flex flex-col border border-border rounded-lg overflow-hidden bg-card', className)}>
+      <Tabs
+        value={state.activeDomain}
+        onValueChange={(v) => state.setActiveDomain(v as DomainKey)}
+      >
+        <TabsList variant="line" className="w-full justify-start border-b border-border bg-card px-6">
+          {DOMAIN_KEYS.map((dk) => (
+            <TabsTrigger key={dk} value={dk}>
+              {DATA_SOURCES[dk].label}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </Tabs>
+
+      <DataExplorerToolbar
+        viewMode={state.viewMode}
+        onViewModeChange={state.setViewMode}
+        searchTerm={state.searchTerm}
+        onSearchChange={state.setSearchTerm}
+        hasActiveFilters={state.hasActiveFilters}
+        onResetAll={state.clearAllFilters}
+        filterSlot={
+          <>
+            <FilterChipGroup
+              columns={state.domainConfig.columns}
+              filters={state.filters}
+              onToggleFilter={state.toggleFilter}
+              onClearFilter={state.clearFilter}
+              getFilterOptions={state.getFilterOptions}
+            />
+            <MoreFiltersPopover
+              columns={state.domainConfig.columns}
+              filters={state.filters}
+              onToggleFilter={state.toggleFilter}
+              onClearSecondaryFilters={state.clearSecondaryFilters}
+              getFilterOptions={state.getFilterOptions}
+            />
+          </>
+        }
+        configSlot={
+          <ColumnConfigPopover
+            columns={state.domainConfig.columns}
+            columnOrder={columnConfig.columnOrder}
+            columnVisibility={columnConfig.columnVisibility}
+            onReorderColumn={columnConfig.reorderColumn}
+            onToggleVisibility={columnConfig.toggleColumnVisibility}
+          />
+        }
+      />
+
+      {state.totalFiltered === 0 ? (
+        <div
+          data-slot="empty-state"
+          className="flex flex-col items-center justify-center px-6 py-16 text-center"
+        >
+          <Search className="size-12 text-muted-foreground/50 mb-4" />
+          <h2 className="text-base font-semibold text-foreground mb-1">
+            Keine Ergebnisse
+          </h2>
+          <p className="text-[13px] text-muted-foreground max-w-[360px]">
+            Es wurden keine Eintr&auml;ge gefunden, die den aktuellen Filtern entsprechen.
+          </p>
+        </div>
+      ) : (
+        <>
+          {state.viewMode === 'table' && (
+            <DataTableView
+              data={state.paginatedData}
+              columns={state.domainConfig.columns}
+              visibleColumns={visibleColumns}
+              sort={state.sort}
+              onToggleSort={state.toggleSort}
+              expandedRows={state.expandedRows}
+              onToggleExpansion={state.toggleExpansion}
+              favorites={state.favorites}
+              onToggleFavorite={state.toggleFavorite}
+              footer={
+                <DataExplorerPagination
+                  currentPage={state.currentPage}
+                  totalPages={state.totalPages}
+                  pageSize={state.pageSize}
+                  totalFiltered={state.totalFiltered}
+                  resultLabel={state.domainConfig.resultLabel}
+                  onPageChange={state.setPage}
+                  onPageSizeChange={state.setPageSize}
+                />
+              }
+            />
+          )}
+          {state.viewMode === 'list' && (
+            <DataListView
+              data={state.paginatedData}
+              columns={state.domainConfig.columns}
+              layout={state.domainConfig.layout.list}
+              expandedRows={state.expandedRows}
+              onToggleExpansion={state.toggleExpansion}
+              favorites={state.favorites}
+              onToggleFavorite={state.toggleFavorite}
+            />
+          )}
+          {state.viewMode === 'card' && (
+            <DataCardView
+              data={state.paginatedData}
+              columns={state.domainConfig.columns}
+              layout={state.domainConfig.layout.card}
+              expandedRows={state.expandedRows}
+              onToggleExpansion={state.toggleExpansion}
+              favorites={state.favorites}
+              onToggleFavorite={state.toggleFavorite}
+            />
+          )}
+        </>
+      )}
+
+      {state.totalFiltered > 0 && state.viewMode !== 'table' && (
+        <DataExplorerPagination
+          currentPage={state.currentPage}
+          totalPages={state.totalPages}
+          pageSize={state.pageSize}
+          totalFiltered={state.totalFiltered}
+          resultLabel={state.domainConfig.resultLabel}
+          onPageChange={state.setPage}
+          onPageSizeChange={state.setPageSize}
+        />
+      )}
+    </div>
+  )
+}