@fastnd/components 1.0.31 → 1.0.32

package/dist/components/QuickAccessCard/QuickAccessCard.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface QuickAccessCardProps extends React.ComponentProps<'a'> {
+    label: string;
+    count: number;
+    countLabel?: string;
+    icon: React.ReactNode;
+    variant?: 'default' | 'overdue';
+    isActive?: boolean;
+}
+declare const QuickAccessCard: React.ForwardRefExoticComponent<Omit<QuickAccessCardProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export { QuickAccessCard };
+export type { QuickAccessCardProps };

package/dist/components/ScoreBar/ScoreBar.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface ScoreBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    value: number;
+    showLabel?: boolean;
+}
+declare const ScoreBar: React.ForwardRefExoticComponent<ScoreBarProps & React.RefAttributes<HTMLDivElement>>;
+export { ScoreBar };
+export type { ScoreBarProps };

package/dist/components/index.d.ts

@@ -1,4 +1,6 @@
 export * from './FavoriteButton/FavoriteButton';
+export * from './QuickAccessCard/QuickAccessCard';
+export * from './ScoreBar/ScoreBar';
 export * from './ui/accordion';
 export * from './ui/alert';
 export * from './ui/alert-dialog';

package/dist/examples/dashboard/StatusDonutChart/StatusDonutChart.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Pie, PieChart, Label, Sector } from 'recharts'
+import { Pie, PieChart, Sector } from 'recharts'
 import type { PieSectorShapeProps } from 'recharts/types/polar/Pie'
 import {
   ChartContainer,
@@ -57,62 +57,47 @@ const StatusDonutChart = React.forwardRef<HTMLDivElement, StatusDonutChartProps>
         className={cn(className)}
         {...props}
       >
-        <ChartContainer config={chartConfig} className="mx-auto aspect-square max-h-[200px]">
-          <PieChart>
-            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
-            <Pie
-              data={chartData}
-              dataKey="count"
-              nameKey="status"
-              innerRadius={60}
-              outerRadius={85}
-              strokeWidth={5}
-              className="cursor-pointer"
-              onClick={handlePieClick}
-              shape={({
-                index,
-                outerRadius: or = 0,
-                ...sectorProps
-              }: PieSectorShapeProps) => (
-                <Sector
-                  {...sectorProps}
-                  outerRadius={index === activeIndex ? or + 10 : or}
-                />
-              )}
-            >
-              <Label
-                content={({ viewBox }) => {
-                  if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
-                    return (
-                      <text
-                        x={viewBox.cx}
-                        y={viewBox.cy}
-                        textAnchor="middle"
-                        dominantBaseline="middle"
-                      >
-                        <tspan
-                          x={viewBox.cx}
-                          y={viewBox.cy}
-                          className="fill-foreground text-3xl font-bold"
-                          style={{ fontFamily: 'var(--font-clash)' }}
-                        >
-                          {total.toLocaleString()}
-                        </tspan>
-                        <tspan
-                          x={viewBox.cx}
-                          y={(viewBox.cy || 0) + 24}
-                          className="fill-muted-foreground text-xs uppercase tracking-wider"
-                        >
-                          Gesamt
-                        </tspan>
-                      </text>
-                    )
-                  }
-                }}
+        {/* Relative wrapper so the center label overlay can be positioned absolutely */}
+        <div className="relative mx-auto aspect-square max-h-[200px]">
+          <ChartContainer config={chartConfig} className="size-full">
+            <PieChart>
+              <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+              <Pie
+                data={chartData}
+                dataKey="count"
+                nameKey="status"
+                innerRadius={60}
+                outerRadius={85}
+                strokeWidth={5}
+                className="cursor-pointer"
+                onClick={handlePieClick}
+                shape={({
+                  index,
+                  outerRadius: or = 0,
+                  ...sectorProps
+                }: PieSectorShapeProps) => (
+                  <Sector
+                    {...sectorProps}
+                    outerRadius={index === activeIndex ? or + 10 : or}
+                  />
+                )}
               />
-            </Pie>
-          </PieChart>
-        </ChartContainer>
+            </PieChart>
+          </ChartContainer>
+
+          {/* Center label — rendered as HTML so it is always in the DOM (recharts SVG labels are invisible in jsdom) */}
+          <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-0.5">
+            <span
+              className="text-3xl font-bold text-foreground"
+              style={{ fontFamily: 'var(--font-clash)' }}
+            >
+              {total.toLocaleString()}
+            </span>
+            <span className="text-xs uppercase tracking-wider text-muted-foreground">
+              Gesamt
+            </span>
+          </div>
+        </div>
       </div>
     )
   }

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

@@ -0,0 +1,171 @@
+import React from 'react'
+import { Plus } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+} from '@/components/ui/carousel'
+import { ScoreBar } from '@/components/ScoreBar/ScoreBar'
+import { renderCell } from '../CellRenderers/CellRenderers'
+import { cn } from '@/lib/utils'
+import type { CardLayout, ColumnDef, ExpandColumnDef } from '../types'
+
+export interface CardCarouselPanelProps {
+  title: string
+  items: Record<string, unknown>[]
+  expandColumns: ExpandColumnDef[]
+  columns: Record<string, ColumnDef>
+  layout: CardLayout
+  className?: string
+}
+
+function buildVirtualRow(
+  item: Record<string, unknown>,
+  expandColumns: ExpandColumnDef[],
+  columns: Record<string, ColumnDef>,
+): Record<string, unknown> {
+  const virtualRow: Record<string, unknown> = {}
+  for (const ec of expandColumns) {
+    if (ec.mapTo) {
+      virtualRow[ec.mapTo] = item[ec.key]
+      if (ec.secondaryKey) {
+        const mainCol = columns[ec.mapTo]
+        if (mainCol?.secondary) {
+          virtualRow[mainCol.secondary] = item[ec.secondaryKey]
+        }
+      }
+    }
+  }
+  return virtualRow
+}
+
+function CardCarouselPanel({
+  title,
+  items,
+  expandColumns,
+  columns,
+  layout,
+  className,
+}: CardCarouselPanelProps) {
+  const scoreEc = expandColumns.find((ec) => ec.type === 'score-bar')
+
+  return (
+    <div
+      data-slot="card-carousel-panel"
+      className={cn('border border-border rounded-lg bg-card', className)}
+    >
+      <Carousel opts={{ align: 'start' }}>
+        <div className="flex items-center justify-between p-3 border-b border-border">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-semibold">{title}</span>
+            <Badge variant="secondary" className="text-xs">
+              {items.length}
+            </Badge>
+          </div>
+          <div className="flex items-center gap-1">
+            <CarouselPrevious className="static translate-y-0 size-7 rounded-md" />
+            <CarouselNext className="static translate-y-0 size-7 rounded-md" />
+          </div>
+        </div>
+
+        <CarouselContent className="p-3 -ml-3">
+          {items.map((item, index) => {
+            const virtualRow = buildVirtualRow(item, expandColumns, columns)
+            const titleValue = virtualRow[layout.titleField]
+            const subtitleValue = layout.subtitleField
+              ? virtualRow[layout.subtitleField]
+              : undefined
+
+            return (
+              <CarouselItem
+                key={index}
+                className="basis-1/3 pl-3 max-lg:basis-1/2 max-sm:basis-[85%]"
+              >
+                <div className="border border-border rounded-lg p-4 flex flex-col gap-3 h-full">
+                  {/* Header — single-line truncate for carousel mini-card per spec */}
+                  <div>
+                    <div className="text-[13px] font-semibold truncate">
+                      {titleValue != null ? String(titleValue) : ''}
+                    </div>
+                    {subtitleValue != null && (
+                      <div className="text-xs text-muted-foreground mt-0.5 flex items-center gap-1">
+                        {String(subtitleValue)}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Badges */}
+                  {layout.badgeFields.length > 0 && (
+                    <div className="flex flex-wrap gap-1">
+                      {layout.badgeFields.map((bf) => {
+                        const col = columns[bf]
+                        if (!col || virtualRow[bf] == null) return null
+                        return (
+                          <React.Fragment key={bf}>
+                            {renderCell(bf, col, virtualRow)}
+                          </React.Fragment>
+                        )
+                      })}
+                    </div>
+                  )}
+
+                  {/* Rows */}
+                  {layout.rows.length > 0 && (
+                    <div className="flex flex-col gap-1.5 flex-1">
+                      {layout.rows.map((r) => {
+                        if (virtualRow[r.field] == null) return null
+                        const col = columns[r.field]
+                        const valueNode = col
+                          ? renderCell(
+                              r.field,
+                              col,
+                              virtualRow,
+                              r.rendererOverride === 'inventory-label'
+                                ? { mode: 'inventory-label' }
+                                : {},
+                            )
+                          : String(virtualRow[r.field] ?? '')
+                        return (
+                          <div
+                            key={r.field}
+                            className="flex justify-between items-center text-[13px]"
+                          >
+                            <span className="text-muted-foreground">{r.label}</span>
+                            <span className="font-medium">{valueNode}</span>
+                          </div>
+                        )
+                      })}
+                    </div>
+                  )}
+
+                  {/* Score bar */}
+                  {scoreEc && (
+                    <ScoreBar
+                      value={
+                        typeof item[scoreEc.key] === 'number'
+                          ? (item[scoreEc.key] as number)
+                          : 0
+                      }
+                    />
+                  )}
+
+                  {/* Footer */}
+                  <Button variant="outline" size="sm" className="w-full gap-1.5">
+                    <Plus className="size-3.5" aria-hidden="true" />
+                    Hinzufügen
+                  </Button>
+                </div>
+              </CarouselItem>
+            )
+          })}
+        </CarouselContent>
+      </Carousel>
+    </div>
+  )
+}
+
+export { CardCarouselPanel }

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

@@ -0,0 +1,175 @@
+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 } from '../types'
+
+export interface RenderCellOptions {
+  mode?: 'default' | 'compact' | 'inventory-label'
+  isExpanded?: boolean
+  isFavorite?: boolean
+  onToggleExpand?: () => void
+  onToggleFavorite?: () => void
+}
+
+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]
+
+  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>
+  )
+}