@fastnd/components 1.0.31 → 1.0.32

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

@@ -0,0 +1,223 @@
+import React, { useLayoutEffect, useRef } from 'react'
+import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import { renderCell } from '../CellRenderers/CellRenderers'
+import { CardCarouselPanel } from '../CardCarouselPanel/CardCarouselPanel'
+import { cn } from '@/lib/utils'
+import type { CardLayout, ColumnDef } from '../types'
+
+export interface DataCardViewProps {
+  data: Record<string, unknown>[]
+  columns: Record<string, ColumnDef>
+  layout: CardLayout
+  expandedRows: Set<string>
+  onToggleExpansion: (rowId: string, field: string) => void
+  favorites: Set<string>
+  onToggleFavorite: (id: string) => void
+  className?: string
+}
+
+function getExpandFields(layout: CardLayout): string[] {
+  if (layout.expandFields && layout.expandFields.length > 0) return layout.expandFields
+  if (layout.expandField) return [layout.expandField]
+  return []
+}
+
+function positionCarouselPanels(
+  gridEl: HTMLElement,
+  data: Record<string, unknown>[],
+  expandedRows: Set<string>,
+  expandFields: string[],
+): void {
+  const colWidths = getComputedStyle(gridEl).gridTemplateColumns.split(' ')
+  const numCols = colWidths.length
+
+  // First pass: which logical rows (0-indexed) have at least one expanded card?
+  const expandedInLogicalRow = new Map<number, boolean>()
+  data.forEach((row, idx) => {
+    const logicalRow = Math.floor(idx / numCols)
+    if (expandFields.some((f) => expandedRows.has(`${row.id}::${f}`))) {
+      expandedInLogicalRow.set(logicalRow, true)
+    }
+  })
+
+  // Second pass: assign explicit grid positions to card wrappers and panels
+  let gridRow = 1
+  let col = 1
+  const children = Array.from(gridEl.children) as HTMLElement[]
+  let childIdx = 0
+
+  data.forEach((row, idx) => {
+    // Card wrapper
+    const cardWrapperEl = children[childIdx++]
+    if (cardWrapperEl) {
+      cardWrapperEl.style.gridRow = String(gridRow)
+      cardWrapperEl.style.gridColumn = String(col)
+    }
+
+    // Panel wrappers (one per expanded field)
+    expandFields.forEach((f) => {
+      if (expandedRows.has(`${row.id}::${f}`)) {
+        const panelEl = children[childIdx++]
+        if (panelEl) {
+          panelEl.style.gridRow = String(gridRow + 1)
+          panelEl.style.gridColumn = '1 / -1'
+        }
+      }
+    })
+
+    col++
+    if (col > numCols) {
+      col = 1
+      const logicalRow = Math.floor(idx / numCols)
+      gridRow += expandedInLogicalRow.has(logicalRow) ? 2 : 1
+    }
+  })
+}
+
+function DataCardView({
+  data,
+  columns,
+  layout,
+  expandedRows,
+  onToggleExpansion,
+  favorites,
+  onToggleFavorite,
+  className,
+}: DataCardViewProps) {
+  const gridRef = useRef<HTMLDivElement>(null)
+  const expandFields = getExpandFields(layout)
+
+  useLayoutEffect(() => {
+    if (gridRef.current) {
+      positionCarouselPanels(gridRef.current, data, expandedRows, expandFields)
+    }
+  })
+
+  return (
+    <div
+      ref={gridRef}
+      data-slot="data-card-view"
+      className={cn('grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-3', className)}
+    >
+      {data.map((row) => {
+        const rowId = String(row.id ?? '')
+        const isAnyExpanded = expandFields.some((f) => expandedRows.has(`${rowId}::${f}`))
+        const titleValue = row[layout.titleField]
+        const subtitleValue = layout.subtitleField ? row[layout.subtitleField] : undefined
+
+        return (
+          <React.Fragment key={rowId}>
+            {/* Card wrapper — grid position assigned by positionCarouselPanels */}
+            <div className="flex flex-col">
+              <div
+                className={cn(
+                  'flex flex-col border border-border rounded-lg overflow-hidden hover:shadow-md transition-shadow bg-card text-card-foreground',
+                  isAnyExpanded && 'border-b-2 border-b-primary',
+                )}
+              >
+                {/* Header */}
+                <div className="p-4 pb-0 flex items-start justify-between gap-2">
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-semibold line-clamp-2 min-h-[calc(2*1.4em)]">
+                      {titleValue != null ? String(titleValue) : ''}
+                    </div>
+                    {subtitleValue != null && (
+                      <div className="text-xs text-muted-foreground line-clamp-2 mt-0.5">
+                        {String(subtitleValue)}
+                      </div>
+                    )}
+                  </div>
+                  <FavoriteButton
+                    pressed={favorites.has(rowId)}
+                    itemName={titleValue != null ? String(titleValue) : ''}
+                    onPressedChange={() => onToggleFavorite(rowId)}
+                  />
+                </div>
+
+                {/* Badges */}
+                {layout.badgeFields.length > 0 && (
+                  <div className="px-4 pt-2 flex gap-2 flex-wrap">
+                    {layout.badgeFields.map((bf) => {
+                      const col = columns[bf]
+                      if (!col || row[bf] == null) return null
+                      return (
+                        <React.Fragment key={bf}>
+                          {renderCell(bf, col, row)}
+                        </React.Fragment>
+                      )
+                    })}
+                  </div>
+                )}
+
+                {/* Rows */}
+                {layout.rows.length > 0 && (
+                  <div className="px-4 pt-3 flex flex-col gap-1.5">
+                    {layout.rows.map((r) => {
+                      const col = columns[r.field]
+                      const valueNode = col
+                        ? renderCell(
+                            r.field,
+                            col,
+                            row,
+                            r.rendererOverride === 'inventory-label' ? { mode: 'inventory-label' } : {},
+                          )
+                        : String(row[r.field] ?? '')
+                      return (
+                        <div key={r.field} className="flex justify-between items-center">
+                          <span className="text-xs text-muted-foreground">{r.label}</span>
+                          <span className="text-[13px] font-medium">{valueNode}</span>
+                        </div>
+                      )
+                    })}
+                  </div>
+                )}
+
+                {/* Footer — expand buttons */}
+                {expandFields.length > 0 && (
+                  <div className="p-4 pt-3">
+                    <div className="flex gap-2">
+                      {expandFields.map((ef) => {
+                        const col = columns[ef]
+                        if (!col) return null
+                        const expansionKey = `${rowId}::${ef}`
+                        return (
+                          <React.Fragment key={ef}>
+                            {renderCell(ef, col, row, {
+                              isExpanded: expandedRows.has(expansionKey),
+                              onToggleExpand: () => onToggleExpansion(rowId, ef),
+                            })}
+                          </React.Fragment>
+                        )
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Carousel panels — one per expanded field, grid position assigned by positionCarouselPanels */}
+            {expandFields.map((ef) => {
+              if (!expandedRows.has(`${rowId}::${ef}`)) return null
+              const col = columns[ef]
+              if (!col || !col.expandColumns) return null
+              const items = row[ef]
+              return (
+                <div key={`${rowId}::${ef}::panel`}>
+                  <CardCarouselPanel
+                    title={col.expandTitleFn?.(row) ?? col.expandLabel ?? col.label}
+                    items={Array.isArray(items) ? (items as Record<string, unknown>[]) : []}
+                    expandColumns={col.expandColumns}
+                    columns={columns}
+                    layout={layout}
+                  />
+                </div>
+              )
+            })}
+          </React.Fragment>
+        )
+      })}
+    </div>
+  )
+}
+
+export { DataCardView }

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

@@ -0,0 +1,143 @@
+import React from 'react'
+import { cn } from '@/lib/utils'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+
+export interface DataExplorerPaginationProps {
+  currentPage: number
+  totalPages: number
+  pageSize: number
+  totalFiltered: number
+  resultLabel: string
+  onPageChange: (page: number) => void
+  onPageSizeChange: (size: number) => void
+  className?: string
+}
+
+function getPageRange(current: number, total: number): (number | null)[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1)
+  const pages: (number | null)[] = []
+  if (current <= 4) {
+    for (let i = 1; i <= 5; i++) pages.push(i)
+    pages.push(null, total)
+  } else if (current >= total - 3) {
+    pages.push(1, null)
+    for (let i = total - 4; i <= total; i++) pages.push(i)
+  } else {
+    pages.push(1, null, current - 1, current, current + 1, null, total)
+  }
+  return pages
+}
+
+export function DataExplorerPagination({
+  currentPage,
+  totalPages,
+  pageSize,
+  totalFiltered,
+  resultLabel,
+  onPageChange,
+  onPageSizeChange,
+  className,
+}: DataExplorerPaginationProps) {
+  const start = totalFiltered === 0 ? 0 : (currentPage - 1) * pageSize + 1
+  const end = Math.min(currentPage * pageSize, totalFiltered)
+  const pageRange = getPageRange(currentPage, totalPages)
+  const atFirst = currentPage <= 1
+  const atLast = currentPage >= totalPages
+
+  return (
+    <div
+      data-slot="data-explorer-pagination"
+      className={cn(
+        'flex items-center justify-between border-t border-border px-6 py-3',
+        className
+      )}
+    >
+      {/* Left: info + page size */}
+      <div className="flex items-center gap-3 text-xs text-muted-foreground">
+        <span>
+          {start}–{end} von {totalFiltered} {resultLabel}
+        </span>
+        <Select
+          value={String(pageSize)}
+          onValueChange={(v) => onPageSizeChange(Number(v))}
+        >
+          <SelectTrigger aria-label="Zeilen pro Seite" className="h-7 w-16 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="25">25</SelectItem>
+            <SelectItem value="50">50</SelectItem>
+            <SelectItem value="100">100</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Right: page navigation */}
+      <Pagination className="w-auto mx-0">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              href="#"
+              aria-disabled={atFirst}
+              tabIndex={atFirst ? -1 : undefined}
+              className={cn(atFirst && 'pointer-events-none opacity-50')}
+              onClick={(e) => {
+                e.preventDefault()
+                if (!atFirst) onPageChange(currentPage - 1)
+              }}
+            />
+          </PaginationItem>
+
+          {pageRange.map((page, idx) =>
+            page === null ? (
+              <PaginationItem key={`ellipsis-${idx}`}>
+                <PaginationEllipsis />
+              </PaginationItem>
+            ) : (
+              <PaginationItem key={page}>
+                <PaginationLink
+                  href="#"
+                  isActive={page === currentPage}
+                  onClick={(e) => {
+                    e.preventDefault()
+                    onPageChange(page)
+                  }}
+                >
+                  {page}
+                </PaginationLink>
+              </PaginationItem>
+            )
+          )}
+
+          <PaginationItem>
+            <PaginationNext
+              href="#"
+              aria-disabled={atLast}
+              tabIndex={atLast ? -1 : undefined}
+              className={cn(atLast && 'pointer-events-none opacity-50')}
+              onClick={(e) => {
+                e.preventDefault()
+                if (!atLast) onPageChange(currentPage + 1)
+              }}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  )
+}

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,246 @@
+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
+  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>
+}
+
+function DataListView({
+  data,
+  columns,
+  layout,
+  expandedRows,
+  onToggleExpansion,
+  favorites,
+  onToggleFavorite,
+  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(
+        'border border-border rounded-lg overflow-hidden divide-y divide-border',
+        className,
+      )}
+    >
+      {data.map((row) => {
+        const rowId = String(row.id ?? '')
+        const titleValue = row[layout.titleField]
+        const subtitleValue = isDoubleText && titleCol.secondary ? row[titleCol.secondary] : undefined
+
+        return (
+          <div
+            key={rowId}
+            className="grid grid-cols-[36px_1fr_auto_auto] sm:grid-cols-[36px_1fr_auto_auto] items-start gap-x-3 px-4 py-3 hover:bg-accent transition-colors"
+          >
+            {/* Col 1: Favorite */}
+            <div className="flex items-center justify-center pt-0.5">
+              <FavoriteButton
+                pressed={favorites.has(rowId)}
+                itemName={titleValue != null ? String(titleValue) : ''}
+                onPressedChange={() => onToggleFavorite(rowId)}
+              />
+            </div>
+
+            {/* Col 2: Title block */}
+            <div className="min-w-0">
+              <div className="font-semibold text-sm truncate max-w-[280px] sm:max-w-none">
+                {titleValue != null ? String(titleValue) : ''}
+              </div>
+              <div className="flex flex-wrap items-center gap-2 mt-0.5">
+                {subtitleValue != null && (
+                  <span className="text-xs text-muted-foreground truncate max-w-[320px] sm:max-w-none">
+                    {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-2 py-0.5 text-xs max-w-[180px] truncate"
+                    >
+                      {String(v)}
+                    </span>
+                  )
+                })}
+              </div>
+            </div>
+
+            {/* Col 3: Badges */}
+            <div className="flex items-center gap-2 pt-0.5 max-sm:col-start-2 max-sm:col-end-3 max-sm:row-start-2">
+              {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>
+                )
+              })}
+            </div>
+
+            {/* Col 4: Expand buttons */}
+            <div className="flex items-center gap-2 pt-0.5 max-sm:col-start-2 max-sm:col-end-3 max-sm:row-start-3">
+              {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 content — full width */}
+            {expandFields.map((field) => {
+              const expandKey = `${rowId}::${field}`
+              if (!expandedRows.has(expandKey)) return null
+              return (
+                <div
+                  key={field}
+                  className="col-span-full border-t border-border pt-3 mt-1 max-sm:col-start-1 max-sm:row-start-4"
+                  data-slot="expansion-content"
+                >
+                  <ExpansionTable row={row} colKey={field} columns={columns} />
+                </div>
+              )
+            })}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export { DataListView }