@fastnd/components 1.0.31 → 1.0.33

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

@@ -0,0 +1,88 @@
+import React from 'react'
+import { LayoutGrid, List, RotateCcw, Search, Table2 } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { cn } from '@/lib/utils'
+import type { ViewMode } from '../types'
+
+interface DataExplorerToolbarProps {
+  viewMode: ViewMode
+  onViewModeChange: (mode: ViewMode) => void
+  searchTerm: string
+  onSearchChange: (term: string) => void
+  hasActiveFilters: boolean
+  onResetAll: () => void
+  filterSlot: React.ReactNode
+  configSlot: React.ReactNode
+  className?: string
+}
+
+export function DataExplorerToolbar({
+  viewMode,
+  onViewModeChange,
+  searchTerm,
+  onSearchChange,
+  hasActiveFilters,
+  onResetAll,
+  filterSlot,
+  configSlot,
+  className,
+}: DataExplorerToolbarProps) {
+  return (
+    <div
+      role="toolbar"
+      aria-label="Daten-Toolbar"
+      className={cn('flex flex-col gap-3 px-6 py-4 border-b border-border', className)}
+    >
+      {/* Row 1: view switcher + config */}
+      <div className="flex items-center justify-between">
+        <Tabs value={viewMode} onValueChange={(v) => onViewModeChange(v as ViewMode)}>
+          <TabsList>
+            <TabsTrigger value="table">
+              <Table2 className="size-4" />
+              <span className="max-sm:hidden">Tabelle</span>
+            </TabsTrigger>
+            <TabsTrigger value="list">
+              <List className="size-4" />
+              <span className="max-sm:hidden">Liste</span>
+            </TabsTrigger>
+            <TabsTrigger value="card">
+              <LayoutGrid className="size-4" />
+              <span className="max-sm:hidden">Karten</span>
+            </TabsTrigger>
+          </TabsList>
+        </Tabs>
+        {configSlot}
+      </div>
+
+      {/* Row 2: filter chips + search */}
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2 flex-wrap">
+          {filterSlot}
+          {hasActiveFilters && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="text-destructive"
+              onClick={onResetAll}
+            >
+              <RotateCcw className="size-4" />
+              Zurücksetzen
+            </Button>
+          )}
+        </div>
+        <div className="relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
+          <Input
+            placeholder="Suchen..."
+            value={searchTerm}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-9 min-w-[240px] max-sm:min-w-[160px]"
+            aria-label="Datensätze durchsuchen"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,283 @@
+import React from 'react'
+import { Plus } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { ScoreBar } from '@/components/ScoreBar/ScoreBar'
+import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import { renderCell } from '../CellRenderers/CellRenderers'
+import { cn } from '@/lib/utils'
+import type { ColumnDef, ExpandColumnDef, ListLayout } from '../types'
+
+export interface DataListViewProps {
+  data: Record<string, unknown>[]
+  columns: Record<string, ColumnDef>
+  layout: ListLayout
+  expandedRows: Set<string>
+  onToggleExpansion: (rowId: string, field: string) => void
+  favorites: Set<string>
+  onToggleFavorite: (id: string) => void
+  showHeader?: boolean
+  className?: string
+}
+
+interface ExpansionTableProps {
+  row: Record<string, unknown>
+  colKey: string
+  columns: Record<string, ColumnDef>
+}
+
+function ExpansionTable({ row, colKey, columns }: ExpansionTableProps) {
+  const col = columns[colKey]
+  if (!col?.expandColumns) return null
+
+  const items = row[colKey]
+  if (!Array.isArray(items) || items.length === 0) return null
+
+  const title = col.expandTitleFn ? col.expandTitleFn(row) : colKey
+
+  return (
+    <div>
+      <div className="text-sm font-semibold mb-2">{title}</div>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {col.expandColumns.map((ec: ExpandColumnDef) => (
+              <TableHead key={ec.key} className="text-xs h-8 px-2">
+                {ec.label}
+              </TableHead>
+            ))}
+            <TableHead className="w-10" />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {(items as Record<string, unknown>[]).map((item, index) => (
+            <TableRow key={index}>
+              {col.expandColumns!.map((ec: ExpandColumnDef) => {
+                const v = item[ec.key]
+                return (
+                  <TableCell key={ec.key} className="px-2 py-1.5 text-xs">
+                    <ExpansionCell ec={ec} value={v} />
+                  </TableCell>
+                )
+              })}
+              <TableCell className="px-2 py-1.5">
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  title="Hinzufügen"
+                  aria-label="Hinzufügen"
+                  onClick={(e) => e.preventDefault()}
+                >
+                  <Plus className="size-3.5" aria-hidden="true" />
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+interface ExpansionCellProps {
+  ec: ExpandColumnDef
+  value: unknown
+}
+
+function ExpansionCell({ ec, value }: ExpansionCellProps) {
+  if (ec.type === 'score-bar') {
+    return <ScoreBar value={typeof value === 'number' ? value : 0} />
+  }
+
+  const text = value != null ? String(value) : ''
+
+  if (ec.muted) {
+    const hasAI = text.includes('AI') || text.includes('Ki')
+    return (
+      <span className="text-muted-foreground text-xs line-clamp-3">
+        {text}
+        {hasAI && (
+          <span className="ml-1 text-[10px] font-medium bg-primary/10 text-primary rounded px-1">
+            KI
+          </span>
+        )}
+      </span>
+    )
+  }
+
+  if (ec.bold) {
+    return <span className="font-semibold text-[13px] line-clamp-3">{text}</span>
+  }
+
+  if (typeof value === 'boolean') {
+    return <span>{value ? 'Ja' : 'Nein'}</span>
+  }
+
+  return <span>{text}</span>
+}
+
+interface ListHeaderProps {
+  columns: Record<string, ColumnDef>
+  layout: ListLayout
+}
+
+function ListHeader({ columns, layout }: ListHeaderProps) {
+  const titleCol = columns[layout.titleField]
+  const expandFields = layout.expandFields ?? (layout.expandField ? [layout.expandField] : [])
+  const secondaryLabel =
+    titleCol?.type === 'double-text' && titleCol.secondary
+      ? columns[titleCol.secondary]?.label
+      : undefined
+  const titleLabel = secondaryLabel
+    ? `${titleCol!.label} / ${secondaryLabel}`
+    : (titleCol?.label ?? '')
+
+  return (
+    <div className="flex items-center gap-3 px-4 py-2 border-b border-border">
+      {/* Placeholder matching FavoriteButton size */}
+      <div className="size-[28px] flex-none" aria-hidden="true" />
+      <div className="flex-1 min-w-0 text-xs font-medium text-muted-foreground">
+        {titleLabel}
+      </div>
+      {layout.badgeFields.map((field) => (
+        <span key={field} className="shrink-0 text-xs font-medium text-muted-foreground">
+          {columns[field]?.label ?? ''}
+        </span>
+      ))}
+      {expandFields.map((field) => (
+        <span key={field} className="shrink-0 text-xs font-medium text-muted-foreground">
+          {columns[field]?.expandLabel ?? columns[field]?.label ?? ''}
+        </span>
+      ))}
+    </div>
+  )
+}
+
+function DataListView({
+  data,
+  columns,
+  layout,
+  expandedRows,
+  onToggleExpansion,
+  favorites,
+  onToggleFavorite,
+  showHeader = false,
+  className,
+}: DataListViewProps) {
+  const expandFields = layout.expandFields ?? (layout.expandField ? [layout.expandField] : [])
+  const titleCol = columns[layout.titleField]
+  const isDoubleText = titleCol?.type === 'double-text'
+
+  return (
+    <div
+      data-slot="data-list-view"
+      className={cn('divide-y divide-border', className)}
+    >
+      {showHeader && <ListHeader columns={columns} layout={layout} />}
+      {data.map((row) => {
+        const rowId = String(row.id ?? '')
+        const titleValue = row[layout.titleField]
+        const subtitleValue = isDoubleText && titleCol.secondary ? row[titleCol.secondary] : undefined
+        const hasBadges = layout.badgeFields.length > 0
+        const hasExpand = expandFields.length > 0
+
+        return (
+          <div key={rowId}>
+            {/* Single slim row: Fav | Title block | Badges | Expand */}
+            <div className="flex items-center gap-3 px-4 py-2 hover:bg-accent transition-colors">
+              <div className="flex-none">
+                <FavoriteButton
+                  pressed={favorites.has(rowId)}
+                  itemName={titleValue != null ? String(titleValue) : ''}
+                  onPressedChange={() => onToggleFavorite(rowId)}
+                />
+              </div>
+
+              {/* Title block grows to fill space — no fixed width */}
+              <div className="flex-1 min-w-0">
+                <div className="font-semibold text-sm truncate">
+                  {titleValue != null ? String(titleValue) : ''}
+                </div>
+                {/* Secondary line: subtitle + meta chips inline */}
+                {(subtitleValue != null || layout.metaFields.length > 0) && (
+                  <div className="flex items-center gap-1.5 mt-0.5 min-w-0">
+                    {subtitleValue != null && (
+                      <span className="text-xs text-muted-foreground truncate shrink">
+                        {String(subtitleValue)}
+                      </span>
+                    )}
+                    {layout.metaFields.map((field) => {
+                      const v = row[field]
+                      if (v == null || v === '') return null
+                      return (
+                        <span
+                          key={field}
+                          className="shrink-0 bg-secondary rounded-md px-1.5 py-px text-xs truncate max-w-[140px]"
+                        >
+                          {String(v)}
+                        </span>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+
+              {/* Badges — shrink-0, sizes to content, no fixed column */}
+              {layout.badgeFields.map((field) => {
+                const col = columns[field]
+                if (!col) return null
+                return (
+                  <React.Fragment key={field}>
+                    {renderCell(field, col, row, {
+                      mode: col.type === 'inventory' ? 'inventory-label' : 'default',
+                    })}
+                  </React.Fragment>
+                )
+              })}
+
+              {/* Expand buttons — trailing edge */}
+              {expandFields.map((field) => {
+                const col = columns[field]
+                if (!col) return null
+                const expandKey = `${rowId}::${field}`
+                return (
+                  <React.Fragment key={field}>
+                    {renderCell(field, col, row, {
+                      mode: 'compact',
+                      isExpanded: expandedRows.has(expandKey),
+                      onToggleExpand: () => onToggleExpansion(rowId, field),
+                    })}
+                  </React.Fragment>
+                )
+              })}
+            </div>
+
+            {/* Expansion panels — full width, below the row */}
+            {expandFields.map((field) => {
+              const expandKey = `${rowId}::${field}`
+              if (!expandedRows.has(expandKey)) return null
+              return (
+                <div
+                  key={field}
+                  className="px-4 pb-3 pt-3 border-t border-border"
+                  data-slot="expansion-content"
+                >
+                  <ExpansionTable row={row} colKey={field} columns={columns} />
+                </div>
+              )
+            })}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export { DataListView }