@fastnd/components 1.0.31 → 1.0.33

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

@@ -0,0 +1,171 @@
+import React from 'react'
+import { ChevronDown, ArrowLeftRight, Sparkles } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { ScoreBar } from '@/components/ScoreBar/ScoreBar'
+import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import { cn } from '@/lib/utils'
+import type { ColumnDef, RenderCellOptions } from '../types'
+
+export type { RenderCellOptions }
+
+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',
+}
+
+const INVENTORY_COLORS: Record<string, string> = {
+  high: 'bg-[var(--inventory-high-bg)] text-[var(--inventory-high)] border-transparent',
+  medium: 'bg-[var(--inventory-medium-bg)] text-[var(--inventory-medium)] border-transparent',
+  low: 'bg-[var(--inventory-low-bg)] text-[var(--inventory-low)] border-transparent',
+}
+
+const EXPAND_ICONS: Record<string, React.ElementType> = {
+  arrowLeftRight: ArrowLeftRight,
+  sparkles: Sparkles,
+}
+
+export function renderCell(
+  colKey: string,
+  col: ColumnDef,
+  row: Record<string, unknown>,
+  options: RenderCellOptions = {},
+): React.ReactNode {
+  const { mode = 'default', isExpanded = false, isFavorite = false, onToggleExpand, onToggleFavorite } = options
+  const val = row[colKey]
+
+  if (col.render) return col.render(val, row, options)
+
+  switch (col.type) {
+    case 'text': {
+      // col.rowLines drives the clamp; default 2 so columns can shrink without growing rows
+      const clamp = col.rowLines === 3 ? 'line-clamp-3' : 'line-clamp-2'
+      return (
+        <span className={cn(clamp, 'text-[13px]')}>
+          {val != null ? String(val) : ''}
+        </span>
+      )
+    }
+
+    case 'double-text': {
+      const secondary = col.secondary != null ? row[col.secondary] : undefined
+      return (
+        <>
+          <span className="font-medium text-[13px] line-clamp-2">
+            {val != null ? String(val) : ''}
+          </span>
+          <span className="text-muted-foreground text-xs line-clamp-1">
+            {secondary != null ? String(secondary) : ''}
+          </span>
+        </>
+      )
+    }
+
+    case 'link': {
+      return (
+        <a
+          href="#"
+          className="text-primary hover:underline font-medium text-[13px] line-clamp-3"
+          onClick={(e) => e.preventDefault()}
+        >
+          {val != null ? String(val) : ''}
+        </a>
+      )
+    }
+
+    case 'status-badge': {
+      if (val == null || !col.statusMap) return <span className="text-[13px]">{val != null ? String(val) : ''}</span>
+      const status = col.statusMap[String(val)] ?? 'active'
+      return (
+        <Badge className={STATUS_COLORS[status]}>
+          {String(val)}
+        </Badge>
+      )
+    }
+
+    case 'inventory': {
+      if (val == null || !col.levelFn) return null
+      const level = col.levelFn(Number(val))
+      if (mode === 'inventory-label') {
+        const label = col.labelMap?.[level] ?? level
+        return (
+          <Badge className={cn(INVENTORY_COLORS[level])}>
+            {label}
+          </Badge>
+        )
+      }
+      const formatted = col.formatFn ? col.formatFn(Number(val)) : String(val)
+      return (
+        <Badge className={cn(INVENTORY_COLORS[level])}>
+          {formatted}
+        </Badge>
+      )
+    }
+
+    case 'currency': {
+      if (val == null) return null
+      const currency = col.currencyField != null ? String(row[col.currencyField] ?? '') : ''
+      const formatted = Number(val).toLocaleString('de-DE', {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+      })
+      return (
+        <span className="tabular-nums font-medium text-[13px] whitespace-nowrap">
+          {formatted} {currency}
+        </span>
+      )
+    }
+
+    case 'score-bar': {
+      return <ScoreBar value={val != null ? Number(val) : 0} />
+    }
+
+    case 'favorite': {
+      const itemName = String(row['name'] ?? row['title'] ?? '')
+      return (
+        <FavoriteButton
+          pressed={isFavorite}
+          itemName={itemName}
+          onPressedChange={() => onToggleFavorite?.()}
+        />
+      )
+    }
+
+    case 'expand': {
+      const items = val as unknown[]
+      const count = Array.isArray(items) ? items.length : 0
+      if (count === 0) {
+        return <span className="text-[13px] text-muted-foreground">—</span>
+      }
+
+      const ExpandIcon = col.expandIcon ? EXPAND_ICONS[col.expandIcon] : null
+
+      return (
+        <Button
+          variant="outline"
+          size="sm"
+          aria-expanded={isExpanded}
+          aria-label={col.expandLabel ?? colKey}
+          onClick={onToggleExpand}
+          className={cn(
+            'gap-1.5',
+            isExpanded && 'border-primary text-primary bg-primary/5',
+          )}
+        >
+          {ExpandIcon && <ExpandIcon className="size-3.5" aria-hidden="true" />}
+          {count}
+          <ChevronDown
+            className={cn('size-3.5 transition-transform duration-200', isExpanded && 'rotate-180')}
+            aria-hidden="true"
+          />
+        </Button>
+      )
+    }
+
+    default: {
+      return <span className="text-[13px]">{val != null ? String(val) : ''}</span>
+    }
+  }
+}

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

@@ -0,0 +1,124 @@
+import React from 'react'
+import { Settings, GripVertical } from 'lucide-react'
+import {
+  DndContext,
+  closestCenter,
+  DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { Switch } from '@/components/ui/switch'
+import { cn } from '@/lib/utils'
+import type { ColumnDef } from '../types'
+
+export interface ColumnConfigPopoverProps {
+  columns: Record<string, ColumnDef>
+  columnOrder: string[]
+  columnVisibility: Record<string, boolean>
+  onReorderColumn: (activeId: string, overId: string) => void
+  onToggleVisibility: (key: string) => void
+  className?: string
+}
+
+interface SortableColumnItemProps {
+  colKey: string
+  label: string
+  visible: boolean
+  onToggle: (key: string) => void
+}
+
+function SortableColumnItem({ colKey, label, visible, onToggle }: SortableColumnItemProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: colKey,
+  })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'flex items-center gap-2 px-3 py-2 rounded-md',
+        isDragging && 'bg-accent shadow-md z-10 relative',
+      )}
+    >
+      <button
+        {...attributes}
+        {...listeners}
+        className="cursor-grab active:cursor-grabbing text-muted-foreground shrink-0"
+        aria-label={`${label} verschieben`}
+        tabIndex={0}
+      >
+        <GripVertical className="size-4" />
+      </button>
+      <span className="flex-1 text-sm">{label}</span>
+      <Switch
+        checked={visible}
+        onCheckedChange={() => onToggle(colKey)}
+        aria-label={visible ? 'Spalte ausblenden' : 'Spalte einblenden'}
+      />
+    </div>
+  )
+}
+
+export function ColumnConfigPopover({
+  columns,
+  columnOrder,
+  columnVisibility,
+  onReorderColumn,
+  onToggleVisibility,
+  className,
+}: ColumnConfigPopoverProps) {
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (over && active.id !== over.id) {
+      onReorderColumn(active.id as string, over.id as string)
+    }
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className={className}>
+          <Settings className="size-4" />
+          <span className="max-sm:hidden">Konfigurieren</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64 p-0" align="end">
+        <div className="p-3 border-b border-border">
+          <span className="text-sm font-semibold">Spalten konfigurieren</span>
+        </div>
+        <DndContext
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+          modifiers={[restrictToVerticalAxis]}
+        >
+          <SortableContext items={columnOrder} strategy={verticalListSortingStrategy}>
+            <div className="p-1">
+              {columnOrder.map((key) => (
+                <SortableColumnItem
+                  key={key}
+                  colKey={key}
+                  label={columns[key]?.label ?? key}
+                  visible={columnVisibility[key] ?? true}
+                  onToggle={onToggleVisibility}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
+      </PopoverContent>
+    </Popover>
+  )
+}

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-4', 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 flex-1 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-1.5 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-start gap-4">
+                          <span className="text-xs text-muted-foreground shrink-0">{r.label}</span>
+                          <span className="text-[13px] font-medium min-w-0 text-right">{valueNode}</span>
+                        </div>
+                      )
+                    })}
+                  </div>
+                )}
+
+                {/* Footer — expand buttons */}
+                {expandFields.length > 0 && (
+                  <div className="mt-auto p-4 pt-3 border-t border-border">
+                    <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>
+  )
+}