@fastnd/components 1.0.28 → 1.0.30

package/dist/examples/data-explorer/cells/CellRenderer.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react'
+import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import type { ColumnDef } from '../types'
+import { TextCell } from './TextCell'
+import { DoubleTextCell } from './DoubleTextCell'
+import { LinkCell } from './LinkCell'
+import { StatusBadgeCell } from './StatusBadgeCell'
+import { CurrencyCell } from './CurrencyCell'
+import { InventoryBadgeCell } from './InventoryBadgeCell'
+import { ScoreBar } from './ScoreBar'
+import { ExpandButton } from './ExpandButton'
+
+interface CellRendererProps {
+  column: ColumnDef
+  columnKey: string
+  row: Record<string, unknown>
+  expanded?: boolean
+  onToggleExpand?: () => void
+  onToggleFavorite?: () => void
+  isFavorite?: boolean
+  className?: string
+}
+
+const CellRenderer = ({
+  column,
+  columnKey,
+  row,
+  expanded = false,
+  onToggleExpand,
+  onToggleFavorite,
+  isFavorite = false,
+  className,
+}: CellRendererProps) => {
+  const value = row[columnKey]
+
+  switch (column.type) {
+    case 'text': {
+      return (
+        <TextCell
+          value={value as string | null | undefined}
+          maxLines={column.rowLines}
+          className={className}
+        />
+      )
+    }
+
+    case 'double-text': {
+      const secondary = column.secondary ? (row[column.secondary] as string | null | undefined) : undefined
+      return (
+        <DoubleTextCell
+          primary={value as string | null | undefined}
+          secondary={secondary}
+          className={className}
+        />
+      )
+    }
+
+    case 'link': {
+      return (
+        <LinkCell
+          value={value as string | null | undefined}
+          className={className}
+        />
+      )
+    }
+
+    case 'status-badge': {
+      return (
+        <StatusBadgeCell
+          value={value as string | null | undefined}
+          statusMap={column.statusMap}
+          className={className}
+        />
+      )
+    }
+
+    case 'currency': {
+      const currency = column.currencyField
+        ? (row[column.currencyField] as string | undefined)
+        : 'EUR'
+      return (
+        <CurrencyCell
+          value={value as number | null | undefined}
+          currency={currency}
+          className={className}
+        />
+      )
+    }
+
+    case 'inventory': {
+      return (
+        <InventoryBadgeCell
+          value={value as number | null | undefined}
+          levelFn={column.levelFn as ((v: number) => string) | undefined}
+          formatFn={column.formatFn as ((v: number) => string) | undefined}
+          className={className}
+        />
+      )
+    }
+
+    case 'progress': {
+      const numValue = typeof value === 'number' ? value : 0
+      return <ScoreBar value={numValue} className={className} />
+    }
+
+    case 'favorite': {
+      return (
+        <FavoriteButton
+          pressed={isFavorite}
+          itemName={String(row['id'] ?? '')}
+          onPressedChange={() => onToggleFavorite?.()}
+          className={className}
+        />
+      )
+    }
+
+    case 'expand': {
+      const items = value
+      const count = Array.isArray(items) ? items.length : 0
+
+      if (count === 0) return null
+
+      return (
+        <ExpandButton
+          count={count}
+          label={column.expandLabel ?? columnKey}
+          icon={column.expandIcon}
+          expanded={expanded}
+          onToggle={onToggleExpand}
+          className={className}
+        />
+      )
+    }
+
+    default: {
+      const fallback = value != null ? String(value) : ''
+      return (
+        <TextCell value={fallback} className={className} />
+      )
+    }
+  }
+}
+
+CellRenderer.displayName = 'CellRenderer'
+
+export { CellRenderer }
+export type { CellRendererProps }

package/dist/examples/data-explorer/cells/CurrencyCell.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface CurrencyCellProps {
+  value: number | null | undefined
+  currency?: string
+  className?: string
+}
+
+const formatter = new Intl.NumberFormat('de-DE', {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+})
+
+const CurrencyCell = ({ value, currency = 'EUR', className }: CurrencyCellProps) => {
+  if (value == null) return null
+
+  return (
+    <span
+      data-slot="currency-cell"
+      className={cn('tabular-nums text-sm text-foreground', className)}
+    >
+      {formatter.format(value)} {currency}
+    </span>
+  )
+}
+
+CurrencyCell.displayName = 'CurrencyCell'
+
+export { CurrencyCell }
+export type { CurrencyCellProps }

package/dist/examples/data-explorer/cells/DoubleTextCell.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface DoubleTextCellProps {
+  primary: string | null | undefined
+  secondary: string | null | undefined
+  className?: string
+}
+
+const DoubleTextCell = ({ primary, secondary, className }: DoubleTextCellProps) => (
+  <span
+    data-slot="double-text-cell"
+    className={cn('flex flex-col gap-0.5', className)}
+  >
+    <span className="font-medium text-sm text-foreground leading-snug">
+      {primary ?? ''}
+    </span>
+    <span className="text-xs text-muted-foreground leading-snug">
+      {secondary ?? ''}
+    </span>
+  </span>
+)
+
+DoubleTextCell.displayName = 'DoubleTextCell'
+
+export { DoubleTextCell }
+export type { DoubleTextCellProps }

package/dist/examples/data-explorer/cells/ExpandButton.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react'
+import { ChevronDown, ArrowLeftRight, Sparkles } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+interface ExpandButtonProps {
+  count: number
+  label: string
+  icon?: string
+  expanded?: boolean
+  onToggle?: () => void
+  className?: string
+}
+
+const iconComponents: Record<string, React.ElementType> = {
+  arrowLeftRight: ArrowLeftRight,
+  sparkles: Sparkles,
+}
+
+const ExpandButton = ({
+  count,
+  label,
+  icon,
+  expanded = false,
+  onToggle,
+  className,
+}: ExpandButtonProps) => {
+  const LeadIcon = icon ? iconComponents[icon] : null
+
+  return (
+    <Button
+      data-slot="expand-button"
+      variant="outline"
+      aria-expanded={expanded}
+      aria-label={label}
+      onClick={onToggle}
+      className={cn(
+        'h-8 px-2.5 text-[13px] font-medium gap-1.5 whitespace-nowrap',
+        expanded && 'border-primary text-primary bg-primary/[0.06]',
+        className
+      )}
+    >
+      {LeadIcon && (
+        <LeadIcon
+          size={16}
+          className={cn('text-muted-foreground', expanded && 'text-primary')}
+          aria-hidden="true"
+        />
+      )}
+      <span>{label}</span>
+      <span className="text-muted-foreground">{count}</span>
+      <ChevronDown
+        size={14}
+        className={cn(
+          'text-muted-foreground transition-transform duration-200',
+          expanded && 'rotate-180 text-primary'
+        )}
+        aria-hidden="true"
+      />
+    </Button>
+  )
+}
+
+ExpandButton.displayName = 'ExpandButton'
+
+export { ExpandButton }
+export type { ExpandButtonProps }

package/dist/examples/data-explorer/cells/InventoryBadgeCell.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+
+interface InventoryBadgeCellProps {
+  value: number | null | undefined
+  levelFn?: (value: number) => string
+  formatFn?: (value: number) => string
+  className?: string
+}
+
+const inventoryColorMap: 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 defaultLevelFn = (value: number): string => {
+  if (value > 500) return 'high'
+  if (value > 100) return 'medium'
+  return 'low'
+}
+
+const defaultFormatter = new Intl.NumberFormat('de-DE')
+const defaultFormatFn = (value: number): string => defaultFormatter.format(value)
+
+const InventoryBadgeCell = ({
+  value,
+  levelFn = defaultLevelFn,
+  formatFn = defaultFormatFn,
+  className,
+}: InventoryBadgeCellProps) => {
+  if (value == null) return null
+
+  const level = levelFn(value)
+  const colorClass = inventoryColorMap[level] ?? inventoryColorMap['medium']
+
+  return (
+    <Badge
+      data-slot="inventory-badge-cell"
+      variant="outline"
+      className={cn(colorClass, 'font-semibold tabular-nums', className)}
+    >
+      {formatFn(value)}
+    </Badge>
+  )
+}
+
+InventoryBadgeCell.displayName = 'InventoryBadgeCell'
+
+export { InventoryBadgeCell }
+export type { InventoryBadgeCellProps }

package/dist/examples/data-explorer/cells/LinkCell.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface LinkCellProps {
+  value: string | null | undefined
+  href?: string
+  className?: string
+}
+
+const linkClasses = 'text-sm text-primary hover:underline cursor-pointer underline-offset-4'
+
+const LinkCell = ({ value, href, className }: LinkCellProps) => {
+  const text = value ?? ''
+
+  if (href) {
+    return (
+      <a
+        data-slot="link-cell"
+        href={href}
+        className={cn(linkClasses, className)}
+      >
+        {text}
+      </a>
+    )
+  }
+
+  return (
+    <span
+      data-slot="link-cell"
+      role="link"
+      tabIndex={0}
+      className={cn(linkClasses, className)}
+    >
+      {text}
+    </span>
+  )
+}
+
+LinkCell.displayName = 'LinkCell'
+
+export { LinkCell }
+export type { LinkCellProps }

package/dist/examples/data-explorer/cells/ScoreBar.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface ScoreBarProps {
+  value: number
+  className?: string
+}
+
+const getIndicatorColor = (value: number): string => {
+  if (value >= 70) return 'var(--color-success)'
+  if (value >= 40) return 'var(--color-warning)'
+  return 'var(--color-alert)'
+}
+
+const ScoreBar = ({ value, className }: ScoreBarProps) => {
+  const clamped = Math.max(0, Math.min(100, value))
+  const indicatorColor = getIndicatorColor(clamped)
+
+  return (
+    <div
+      data-slot="score-bar"
+      className={cn('flex items-center gap-2', className)}
+    >
+      {/* Custom progress track — shadcn Progress locks indicator to bg-primary, so we render directly */}
+      <div
+        role="progressbar"
+        aria-valuenow={clamped}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        className="flex-1 max-w-[120px] h-1.5 rounded-full bg-border overflow-hidden"
+      >
+        <div
+          className="h-full rounded-full transition-all"
+          style={{
+            width: `${clamped}%`,
+            backgroundColor: indicatorColor,
+          }}
+        />
+      </div>
+      <span className="tabular-nums text-xs font-semibold w-9 text-right">
+        {clamped}%
+      </span>
+    </div>
+  )
+}
+
+ScoreBar.displayName = 'ScoreBar'
+
+export { ScoreBar }
+export type { ScoreBarProps }

package/dist/examples/data-explorer/cells/StatusBadgeCell.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+
+interface StatusBadgeCellProps {
+  value: string | null | undefined
+  statusMap?: Record<string, string>
+  className?: string
+}
+
+const statusColorMap: 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 StatusBadgeCell = ({ value, statusMap, className }: StatusBadgeCellProps) => {
+  if (value == null || value === '') return null
+
+  const statusKey = statusMap?.[value] ?? value.toLowerCase()
+  const colorClass = statusColorMap[statusKey] ?? statusColorMap['active']
+
+  return (
+    <Badge
+      data-slot="status-badge-cell"
+      variant="outline"
+      className={cn(colorClass, 'gap-1.5 px-2.5 py-1', className)}
+    >
+      <span className="size-1.5 rounded-full bg-current" aria-hidden="true" />
+      {value}
+    </Badge>
+  )
+}
+
+StatusBadgeCell.displayName = 'StatusBadgeCell'
+
+export { StatusBadgeCell }
+export type { StatusBadgeCellProps }

package/dist/examples/data-explorer/cells/TextCell.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import { cn } from '@/lib/utils'
+
+interface TextCellProps {
+  value: string | null | undefined
+  maxLines?: number
+  className?: string
+}
+
+const lineClampMap: Record<number, string> = {
+  1: 'line-clamp-1',
+  2: 'line-clamp-2',
+  3: 'line-clamp-3',
+  4: 'line-clamp-4',
+  5: 'line-clamp-5',
+  6: 'line-clamp-6',
+}
+
+const TextCell = ({ value, maxLines, className }: TextCellProps) => (
+  <span
+    data-slot="text-cell"
+    className={cn(
+      'text-sm text-foreground',
+      maxLines != null && lineClampMap[maxLines],
+      className
+    )}
+  >
+    {value ?? ''}
+  </span>
+)
+
+TextCell.displayName = 'TextCell'
+
+export { TextCell }
+export type { TextCellProps }

package/dist/examples/data-explorer/cells/index.ts

@@ -0,0 +1,26 @@
+export { TextCell } from './TextCell'
+export type { TextCellProps } from './TextCell'
+
+export { DoubleTextCell } from './DoubleTextCell'
+export type { DoubleTextCellProps } from './DoubleTextCell'
+
+export { LinkCell } from './LinkCell'
+export type { LinkCellProps } from './LinkCell'
+
+export { StatusBadgeCell } from './StatusBadgeCell'
+export type { StatusBadgeCellProps } from './StatusBadgeCell'
+
+export { CurrencyCell } from './CurrencyCell'
+export type { CurrencyCellProps } from './CurrencyCell'
+
+export { InventoryBadgeCell } from './InventoryBadgeCell'
+export type { InventoryBadgeCellProps } from './InventoryBadgeCell'
+
+export { ScoreBar } from './ScoreBar'
+export type { ScoreBarProps } from './ScoreBar'
+
+export { ExpandButton } from './ExpandButton'
+export type { ExpandButtonProps } from './ExpandButton'
+
+export { CellRenderer } from './CellRenderer'
+export type { CellRendererProps } from './CellRenderer'