@fastnd/components 1.0.30 → 1.0.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastnd/components",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "license": "UNLICENSED",
   "type": "module",
   "main": "./dist/fastnd-components.js",

package/dist/examples/data-explorer/CardCarouselPanel/CardCarouselPanel.tsx

@@ -1,197 +0,0 @@
-import * as React from 'react'
-import { X, Plus } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-} from '@/components/ui/carousel'
-import { cn } from '@/lib/utils'
-import type { ColumnDef, CardLayout } from '../types'
-import { CellRenderer } from '../cells'
-import { ScoreBar } from '../cells/ScoreBar'
-
-interface CardCarouselPanelProps {
-  row: Record<string, unknown>
-  columnKey: string
-  column: ColumnDef
-  cardLayout: CardLayout
-  columns: Record<string, ColumnDef>
-  onClose: () => void
-  className?: string
-}
-
-const CardCarouselPanel = ({
-  row,
-  columnKey,
-  column,
-  cardLayout,
-  columns,
-  onClose,
-  className,
-}: CardCarouselPanelProps) => {
-  const items = row[columnKey]
-  if (!Array.isArray(items) || items.length === 0) return null
-  if (!column.expandColumns) return null
-
-  const title = column.expandTitleFn ? column.expandTitleFn(row) : column.expandLabel ?? columnKey
-  const scoreEc = column.expandColumns.find((ec) => ec.type === 'score-bar')
-
-  return (
-    <div
-      data-slot="card-carousel-panel"
-      className={cn(
-        'col-span-full bg-accent border border-border rounded-lg p-0 overflow-hidden',
-        className
-      )}
-    >
-      {/* Header */}
-      <div className="flex justify-between items-center px-4 py-3 border-b border-border">
-        <div className="flex items-center gap-2">
-          <span className="font-semibold text-sm">{title}</span>
-          <Badge variant="secondary" className="text-xs">{items.length}</Badge>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button
-            variant="ghost"
-            size="icon-xs"
-            aria-label="Schließen"
-            onClick={onClose}
-          >
-            <X className="size-4" aria-hidden="true" />
-          </Button>
-        </div>
-      </div>
-
-      {/* Carousel */}
-      <div className="px-4 py-3">
-        <Carousel
-          opts={{ align: 'start', dragFree: true }}
-          className="w-full px-10"
-        >
-          <CarouselContent className="-ml-3">
-            {items.map((item, index) => {
-              // Build virtual row by mapping expandColumns → main column keys via mapTo
-              const vRow: Record<string, unknown> = {}
-              for (const ec of column.expandColumns!) {
-                if (ec.mapTo) {
-                  vRow[ec.mapTo] = (item as Record<string, unknown>)[ec.key]
-                }
-                if (ec.secondaryKey && ec.mapTo) {
-                  const mainCol = columns[ec.mapTo]
-                  if (mainCol?.secondary) {
-                    vRow[mainCol.secondary] = (item as Record<string, unknown>)[ec.secondaryKey]
-                  }
-                }
-              }
-
-              return (
-                <CarouselItem
-                  key={index}
-                  className="pl-3 basis-[280px] shrink-0"
-                >
-                  {/* Mini card */}
-                  <div className="flex flex-col gap-2 rounded-lg border border-border bg-card p-3 h-full text-[13px]">
-                    {/* Mini card header */}
-                    <div>
-                      <div className="font-semibold text-xs line-clamp-2">
-                        {String(vRow[cardLayout.titleField] ?? '')}
-                      </div>
-                      {cardLayout.subtitleField && vRow[cardLayout.subtitleField] != null && (
-                        <div className="text-xs text-muted-foreground line-clamp-1 mt-0.5">
-                          {String(vRow[cardLayout.subtitleField])}
-                        </div>
-                      )}
-                    </div>
-
-                    {/* Badges */}
-                    {cardLayout.badgeFields && cardLayout.badgeFields.length > 0 && (
-                      <div className="flex flex-wrap gap-1.5">
-                        {cardLayout.badgeFields.map((bf) => {
-                          const bc = columns[bf]
-                          if (!bc || vRow[bf] == null) return null
-                          return (
-                            <CellRenderer
-                              key={bf}
-                              column={bc}
-                              columnKey={bf}
-                              row={vRow}
-                            />
-                          )
-                        })}
-                      </div>
-                    )}
-
-                    {/* Key-value rows */}
-                    {cardLayout.rows && cardLayout.rows.length > 0 && (
-                      <div className="flex flex-col gap-1">
-                        {cardLayout.rows.map((r) => {
-                          if (vRow[r.field] == null) return null
-                          const rc = columns[r.field]
-                          return (
-                            <div key={r.field} className="flex justify-between">
-                              <span className="text-muted-foreground shrink-0">{r.label}</span>
-                              <span className="font-medium text-right">
-                                {r.rendererOverride && rc ? (
-                                  <CellRenderer
-                                    column={{ ...rc, type: r.rendererOverride as ColumnDef['type'] }}
-                                    columnKey={r.field}
-                                    row={vRow}
-                                  />
-                                ) : rc ? (
-                                  <CellRenderer column={rc} columnKey={r.field} row={vRow} />
-                                ) : (
-                                  String(vRow[r.field] ?? '')
-                                )}
-                              </span>
-                            </div>
-                          )
-                        })}
-                      </div>
-                    )}
-
-                    {/* Score bar (expand-specific) */}
-                    {scoreEc && (
-                      <ScoreBar
-                        value={
-                          typeof (item as Record<string, unknown>)[scoreEc.key] === 'number'
-                            ? Math.round(
-                                ((item as Record<string, unknown>)[scoreEc.key] as number) * 100
-                              )
-                            : 0
-                        }
-                      />
-                    )}
-
-                    {/* Add button */}
-                    <div className="mt-auto pt-1">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="gap-1.5 text-xs h-7 font-normal w-full"
-                        onClick={(e) => e.preventDefault()}
-                      >
-                        <Plus className="size-3 shrink-0" aria-hidden="true" />
-                        Hinzufügen
-                      </Button>
-                    </div>
-                  </div>
-                </CarouselItem>
-              )
-            })}
-          </CarouselContent>
-          <CarouselPrevious className="-left-10" />
-          <CarouselNext className="-right-10" />
-        </Carousel>
-      </div>
-    </div>
-  )
-}
-
-CardCarouselPanel.displayName = 'CardCarouselPanel'
-
-export { CardCarouselPanel }
-export type { CardCarouselPanelProps }

package/dist/examples/data-explorer/CardView/CardView.tsx

@@ -1,168 +0,0 @@
-import * as React from 'react'
-import { Card } from '@/components/ui/card'
-import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
-import { cn } from '@/lib/utils'
-import type { ColumnDef, CardLayout } from '../types'
-import { CellRenderer } from '../cells'
-import { CardCarouselPanel } from '../CardCarouselPanel/CardCarouselPanel'
-
-interface CardViewProps {
-  data: Record<string, unknown>[]
-  columns: Record<string, ColumnDef>
-  layout: CardLayout
-  expandedRows: Set<string>
-  favorites: Set<string>
-  onToggleExpand: (rowId: string) => void
-  onToggleFavorite: (rowId: string) => void
-  className?: string
-}
-
-const CardView = ({
-  data,
-  columns,
-  layout,
-  expandedRows,
-  favorites,
-  onToggleExpand,
-  onToggleFavorite,
-  className,
-}: CardViewProps) => {
-  const expandFields = layout.expandFields ?? (layout.expandField ? [layout.expandField] : [])
-
-  return (
-    <div
-      data-slot="card-view"
-      className={cn(
-        'grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 px-6',
-        className
-      )}
-    >
-      {data.map((row) => {
-        const rowId = row['id'] as string
-        const isFavorite = favorites.has(rowId)
-        const isExpanded = expandFields.some((f) => expandedRows.has(`${rowId}::${f}`))
-
-        const activeExpandField =
-          expandFields.find((f) => expandedRows.has(`${rowId}::${f}`)) ?? null
-
-        return (
-          <React.Fragment key={rowId}>
-            <Card
-              className={cn(
-                'rounded-lg p-0 gap-0 overflow-hidden hover:shadow-md transition-shadow',
-                isExpanded && 'border-b-2 border-b-primary shadow-md'
-              )}
-            >
-              {/* Inner content padding wrapper */}
-              <div className="p-4 flex flex-col gap-3">
-                {/* Header: title + favorite */}
-                <div className="flex justify-between items-start gap-2">
-                  <div className="min-w-0">
-                    <div className="font-semibold text-sm min-h-[2.8em] line-clamp-2">
-                      {String(row[layout.titleField] ?? '')}
-                    </div>
-                    {layout.subtitleField && row[layout.subtitleField] != null && (
-                      <div className="text-xs text-muted-foreground mt-0.5">
-                        {String(row[layout.subtitleField])}
-                      </div>
-                    )}
-                  </div>
-                  <FavoriteButton
-                    pressed={isFavorite}
-                    itemName={rowId}
-                    onPressedChange={() => onToggleFavorite(rowId)}
-                    className="shrink-0 -mt-0.5 -mr-1"
-                  />
-                </div>
-
-                {/* Badge fields */}
-                {layout.badgeFields && layout.badgeFields.length > 0 && (
-                  <div className="flex flex-wrap gap-1.5">
-                    {layout.badgeFields.map((bf) => {
-                      const bc = columns[bf]
-                      if (!bc) return null
-                      return (
-                        <CellRenderer
-                          key={bf}
-                          column={bc}
-                          columnKey={bf}
-                          row={row}
-                        />
-                      )
-                    })}
-                  </div>
-                )}
-
-                {/* Key-value rows */}
-                {layout.rows && layout.rows.length > 0 && (
-                  <div className="flex flex-col gap-1.5">
-                    {layout.rows.map((r) => {
-                      const rc = columns[r.field]
-                      return (
-                        <div key={r.field} className="flex justify-between text-[13px]">
-                          <span className="text-muted-foreground">{r.label}</span>
-                          <span className="font-medium text-right">
-                            {r.rendererOverride && rc ? (
-                              <CellRenderer
-                                column={{ ...rc, type: r.rendererOverride as ColumnDef['type'] }}
-                                columnKey={r.field}
-                                row={row}
-                              />
-                            ) : rc ? (
-                              <CellRenderer column={rc} columnKey={r.field} row={row} />
-                            ) : (
-                              String(row[r.field] ?? '')
-                            )}
-                          </span>
-                        </div>
-                      )
-                    })}
-                  </div>
-                )}
-              </div>
-
-              {/* Footer — outside padding div, with border-top */}
-              {expandFields.length > 0 && (
-                <div className="mt-auto border-t border-border px-4 py-3 flex gap-2">
-                  {expandFields.map((ef) => {
-                    const ec = columns[ef]
-                    if (!ec) return null
-                    const expandKey = `${rowId}::${ef}`
-                    return (
-                      <CellRenderer
-                        key={ef}
-                        column={ec}
-                        columnKey={ef}
-                        row={row}
-                        expanded={expandedRows.has(expandKey)}
-                        onToggleExpand={() => onToggleExpand(expandKey)}
-                        className="flex-1 justify-center"
-                      />
-                    )
-                  })}
-                </div>
-              )}
-            </Card>
-
-            {/* Expansion carousel panel — spans full grid width */}
-            {activeExpandField && (
-              <CardCarouselPanel
-                row={row}
-                columnKey={activeExpandField}
-                column={columns[activeExpandField]}
-                cardLayout={layout}
-                columns={columns}
-                onClose={() => onToggleExpand(`${rowId}::${activeExpandField}`)}
-              />
-            )}
-          </React.Fragment>
-        )
-      })}
-    </div>
-  )
-}
-
-CardView.displayName = 'CardView'
-
-export { CardView }
-export type { CardViewProps }

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

@@ -1,157 +0,0 @@
-import * as React from 'react'
-import { GripVertical, SlidersHorizontal } from 'lucide-react'
-import {
-  DndContext,
-  closestCenter,
-  KeyboardSensor,
-  PointerSensor,
-  useSensor,
-  useSensors,
-  type DragEndEvent,
-} from '@dnd-kit/core'
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-  arrayMove,
-} from '@dnd-kit/sortable'
-import { CSS } from '@dnd-kit/utilities'
-import { Button } from '@/components/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { Switch } from '@/components/ui/switch'
-import type { ColumnDef } from '../types'
-import { cn } from '@/lib/utils'
-
-// --- Sortable item ---
-
-interface SortableColumnItemProps {
-  id: string
-  label: string
-  visible: boolean
-  onToggleVisibility: () => void
-}
-
-function SortableColumnItem({ id, label, visible, onToggleVisibility }: SortableColumnItemProps) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id })
-
-  const style: React.CSSProperties = {
-    transform: CSS.Transform.toString(transform),
-    transition,
-    opacity: isDragging ? 0.5 : 1,
-  }
-
-  return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className="flex items-center gap-2 rounded px-2 py-1.5 text-sm hover:bg-accent"
-    >
-      <button
-        {...attributes}
-        {...listeners}
-        className="cursor-grab touch-none text-muted-foreground hover:text-foreground focus-visible:outline-none active:cursor-grabbing"
-        aria-label={`${label} verschieben`}
-        tabIndex={0}
-      >
-        <GripVertical className="size-4" />
-      </button>
-      <span className="flex-1 leading-snug">{label}</span>
-      <Switch
-        checked={visible}
-        onCheckedChange={onToggleVisibility}
-        size="sm"
-        aria-label={visible ? `${label} ausblenden` : `${label} einblenden`}
-      />
-    </div>
-  )
-}
-
-// --- Main component ---
-
-export interface ColumnConfigPopoverProps {
-  columns: Record<string, ColumnDef>
-  columnOrder: string[]
-  columnVisibility: Record<string, boolean>
-  onToggleVisibility: (columnKey: string) => void
-  onReorder: (newOrder: string[]) => void
-  className?: string
-}
-
-export function ColumnConfigPopover({
-  columns,
-  columnOrder,
-  columnVisibility,
-  onToggleVisibility,
-  onReorder,
-  className,
-}: ColumnConfigPopoverProps) {
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-  )
-
-  // Exclude 'favorite' columns from config list
-  const configurableKeys = columnOrder.filter(
-    (key) => columns[key] && columns[key].type !== 'favorite',
-  )
-
-  function handleDragEnd(event: DragEndEvent) {
-    const { active, over } = event
-    if (!over || active.id === over.id) return
-
-    const oldIndex = columnOrder.indexOf(active.id as string)
-    const newIndex = columnOrder.indexOf(over.id as string)
-    if (oldIndex === -1 || newIndex === -1) return
-
-    onReorder(arrayMove(columnOrder, oldIndex, newIndex))
-  }
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          data-slot="column-config-popover"
-          variant="outline"
-          size="sm"
-          aria-haspopup="dialog"
-          aria-label="Spalten konfigurieren"
-          className={cn('h-8 gap-1.5 text-sm', className)}
-        >
-          <SlidersHorizontal className="size-3.5" />
-          <span>Konfigurieren</span>
-        </Button>
-      </PopoverTrigger>
-
-      <PopoverContent
-        align="end"
-        sideOffset={4}
-        role="dialog"
-        aria-label="Spalten konfigurieren"
-        className="w-72 p-0"
-      >
-        <div className="border-b px-3 py-2">
-          <span className="text-sm font-medium">Spalten konfigurieren</span>
-        </div>
-
-        <div className="max-h-[400px] overflow-y-auto p-2">
-          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-            <SortableContext items={configurableKeys} strategy={verticalListSortingStrategy}>
-              {configurableKeys.map((key) => (
-                <SortableColumnItem
-                  key={key}
-                  id={key}
-                  label={columns[key].label}
-                  visible={columnVisibility[key] ?? true}
-                  onToggleVisibility={() => onToggleVisibility(key)}
-                />
-              ))}
-            </SortableContext>
-          </DndContext>
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-ColumnConfigPopover.displayName = 'ColumnConfigPopover'

package/dist/examples/data-explorer/DataExplorerEmpty/DataExplorerEmpty.tsx

@@ -1,56 +0,0 @@
-import { Search } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import {
-  Empty,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-  EmptyDescription,
-} from '@/components/ui/empty'
-import { cn } from '@/lib/utils'
-
-export interface DataExplorerEmptyProps {
-  searchTerm: string
-  hasActiveFilters: boolean
-  onResetAll: () => void
-  className?: string
-}
-
-function buildDescription(searchTerm: string, hasActiveFilters: boolean): string {
-  const hasTerm = searchTerm.length > 0
-  if (hasTerm && hasActiveFilters) {
-    return `Für '${searchTerm}' mit den aktiven Filtern wurden keine Ergebnisse gefunden.`
-  }
-  if (hasTerm) {
-    return `Für '${searchTerm}' wurden keine Ergebnisse gefunden.`
-  }
-  return 'Die aktiven Filter liefern keine Ergebnisse.'
-}
-
-export function DataExplorerEmpty({
-  searchTerm,
-  hasActiveFilters,
-  onResetAll,
-  className,
-}: DataExplorerEmptyProps) {
-  const showReset = hasActiveFilters || searchTerm.length > 0
-
-  return (
-    <Empty data-slot="data-explorer-empty" className={cn(className)}>
-      <EmptyHeader>
-        <EmptyMedia variant="icon">
-          <Search />
-        </EmptyMedia>
-        <EmptyTitle>Keine Ergebnisse gefunden</EmptyTitle>
-        <EmptyDescription>{buildDescription(searchTerm, hasActiveFilters)}</EmptyDescription>
-      </EmptyHeader>
-      {showReset && (
-        <Button variant="outline" size="sm" onClick={onResetAll}>
-          Filter zurücksetzen
-        </Button>
-      )}
-    </Empty>
-  )
-}
-
-DataExplorerEmpty.displayName = 'DataExplorerEmpty'

package/dist/examples/data-explorer/DataExplorerPage/DataExplorerPage.tsx

@@ -1,101 +0,0 @@
-import * as React from 'react'
-import { cn } from '@/lib/utils'
-import { useDataExplorerState } from '../hooks/use-data-explorer-state'
-import { DomainSwitcher } from '../DomainSwitcher/DomainSwitcher'
-import { DataExplorerToolbar } from '../DataExplorerToolbar/DataExplorerToolbar'
-import { TableView } from '../TableView/TableView'
-import { ListView } from '../ListView/ListView'
-import { CardView } from '../CardView/CardView'
-import { DataExplorerEmpty } from '../DataExplorerEmpty/DataExplorerEmpty'
-import { DataExplorerPagination } from '../DataExplorerPagination/DataExplorerPagination'
-import type { DomainKey } from '../types'
-
-export interface DataExplorerPageProps extends React.ComponentProps<'main'> {
-  initialDomain?: DomainKey
-}
-
-export function DataExplorerPage({
-  initialDomain,
-  className,
-  ...props
-}: DataExplorerPageProps) {
-  const { state, derived, actions } = useDataExplorerState(initialDomain)
-  const { domainConfig, paginatedData, visibleColumns, totalFiltered, totalPages } = derived
-
-  const isEmpty = paginatedData.length === 0
-  const showEmpty = isEmpty && (derived.hasActiveFilters || state.searchTerm.length > 0)
-
-  return (
-    <main
-      data-slot="data-explorer-page"
-      className={cn('flex flex-col gap-4', className)}
-      {...props}
-    >
-      <DomainSwitcher
-        activeDomain={state.activeDomain}
-        onDomainChange={actions.switchDomain}
-      />
-
-      <DataExplorerToolbar
-        state={state}
-        derived={derived}
-        actions={actions}
-      />
-
-      {showEmpty ? (
-        <DataExplorerEmpty
-          searchTerm={state.searchTerm}
-          hasActiveFilters={derived.hasActiveFilters}
-          onResetAll={actions.resetAllFilters}
-        />
-      ) : state.viewMode === 'table' ? (
-        <TableView
-          data={paginatedData}
-          columns={domainConfig.columns}
-          visibleColumns={visibleColumns}
-          sortColumn={state.sortColumn}
-          sortDirection={state.sortDirection}
-          expandedRows={state.expandedRows}
-          favorites={state.favorites}
-          onToggleSort={actions.toggleSort}
-          onToggleExpand={actions.toggleExpand}
-          onToggleFavorite={actions.toggleFavorite}
-        />
-      ) : state.viewMode === 'list' ? (
-        <ListView
-          data={paginatedData}
-          columns={domainConfig.columns}
-          layout={domainConfig.layout.list}
-          expandedRows={state.expandedRows}
-          favorites={state.favorites}
-          onToggleExpand={actions.toggleExpand}
-          onToggleFavorite={actions.toggleFavorite}
-        />
-      ) : (
-        <CardView
-          data={paginatedData}
-          columns={domainConfig.columns}
-          layout={domainConfig.layout.card}
-          expandedRows={state.expandedRows}
-          favorites={state.favorites}
-          onToggleExpand={actions.toggleExpand}
-          onToggleFavorite={actions.toggleFavorite}
-        />
-      )}
-
-      {totalFiltered > 0 && (
-        <DataExplorerPagination
-          currentPage={state.currentPage}
-          totalPages={totalPages}
-          pageSize={state.pageSize}
-          totalFiltered={totalFiltered}
-          totalData={domainConfig.data.length}
-          onPageChange={actions.setCurrentPage}
-          onPageSizeChange={actions.setPageSize}
-        />
-      )}
-    </main>
-  )
-}
-
-DataExplorerPage.displayName = 'DataExplorerPage'