@fastnd/components 1.0.30 → 1.0.32

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

@@ -1,305 +0,0 @@
-import * as React from 'react'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
-import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
-import { cn } from '@/lib/utils'
-import type { ColumnDef, ListLayout } from '../types'
-import { CellRenderer } from '../cells'
-import { ScoreBar } from '../cells'
-
-interface ListViewProps {
-  data: Record<string, unknown>[]
-  columns: Record<string, ColumnDef>
-  layout: ListLayout
-  expandedRows: Set<string>
-  favorites: Set<string>
-  onToggleExpand: (rowId: string) => void
-  onToggleFavorite: (rowId: string) => void
-  className?: string
-}
-
-// ---------------------------------------------------------------------------
-// Expansion table rendered inline below a list item when a field is expanded
-// ---------------------------------------------------------------------------
-
-interface ExpansionTableProps {
-  row: Record<string, unknown>
-  columnKey: string
-  column: ColumnDef
-}
-
-const ExpansionTable = ({ row, columnKey, column }: ExpansionTableProps) => {
-  if (!column.expandColumns || column.expandColumns.length === 0) return null
-
-  const items = row[columnKey]
-  if (!Array.isArray(items) || items.length === 0) return null
-
-  const title = column.expandTitleFn
-    ? column.expandTitleFn(row)
-    : column.expandLabel ?? columnKey
-
-  return (
-    <div data-slot="expansion-table" className="border rounded-lg overflow-hidden bg-muted/30">
-      <div className="px-3 py-2 border-b bg-muted/50">
-        <span className="text-xs font-medium text-foreground">{title}</span>
-        <span className="ml-2 text-xs text-muted-foreground">({items.length})</span>
-      </div>
-      <Table>
-        <TableHeader>
-          <TableRow>
-            {column.expandColumns.map((ec) => (
-              <TableHead key={ec.key} className="text-xs h-8 px-3">
-                {ec.label}
-              </TableHead>
-            ))}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {(items as Record<string, unknown>[]).map((item, idx) => (
-            <TableRow key={idx}>
-              {column.expandColumns!.map((ec) => {
-                const value = item[ec.key]
-
-                if (ec.type === 'score-bar') {
-                  const numValue = typeof value === 'number' ? value : 0
-                  return (
-                    <TableCell key={ec.key} className="px-3 py-1.5">
-                      <ScoreBar value={numValue} />
-                    </TableCell>
-                  )
-                }
-
-                let display: React.ReactNode
-
-                if (ec.bold) {
-                  display = (
-                    <span className="font-medium text-xs text-foreground">
-                      {value != null ? String(value) : '—'}
-                    </span>
-                  )
-                } else if (ec.muted) {
-                  display = (
-                    <span className="text-xs text-muted-foreground">
-                      {value != null ? String(value) : '—'}
-                    </span>
-                  )
-                } else {
-                  display = (
-                    <span className="text-xs">
-                      {typeof value === 'boolean'
-                        ? value
-                          ? 'Ja'
-                          : 'Nein'
-                        : value != null
-                          ? String(value)
-                          : '—'}
-                    </span>
-                  )
-                }
-
-                return (
-                  <TableCell key={ec.key} className="px-3 py-1.5">
-                    {display}
-                  </TableCell>
-                )
-              })}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  )
-}
-
-ExpansionTable.displayName = 'ExpansionTable'
-
-// ---------------------------------------------------------------------------
-// Single list item — CSS Grid row, no Card
-// ---------------------------------------------------------------------------
-
-interface ListItemProps {
-  row: Record<string, unknown>
-  columns: Record<string, ColumnDef>
-  layout: ListLayout
-  expandedRows: Set<string>
-  isFavorite: boolean
-  isLast: boolean
-  onToggleExpand: (rowId: string) => void
-  onToggleFavorite: (rowId: string) => void
-}
-
-const ListItem = ({
-  row,
-  columns,
-  layout,
-  expandedRows,
-  isFavorite,
-  isLast,
-  onToggleExpand,
-  onToggleFavorite,
-}: ListItemProps) => {
-  const rowId = row['id'] as string
-  const expandFields = layout.expandFields ?? (layout.expandField ? [layout.expandField] : [])
-
-  const activeExpandField = expandFields.find((f) => expandedRows.has(`${rowId}::${f}`))
-
-  const titleCol = columns[layout.titleField]
-  const subtitle =
-    titleCol?.type === 'double-text' && titleCol.secondary
-      ? (row[titleCol.secondary] as string | null | undefined)
-      : undefined
-
-  const borderClass = isLast && !activeExpandField ? '' : 'border-b border-border'
-
-  return (
-    <>
-      {/* Main grid row */}
-      <div
-        data-slot="list-item"
-        className={cn(
-          'grid grid-cols-[36px_1fr_auto_auto] gap-x-3 items-center py-3 px-4 hover:bg-accent transition-colors',
-          borderClass,
-        )}
-      >
-        {/* Col 1 (row-span-2): Favorite */}
-        <div className="row-span-2 self-center">
-          <FavoriteButton
-            pressed={isFavorite}
-            itemName={String(row[layout.titleField] ?? rowId)}
-            onPressedChange={() => onToggleFavorite(rowId)}
-          />
-        </div>
-
-        {/* Col 2 Row 1: Title */}
-        <div className="font-semibold text-sm max-w-[280px] truncate">
-          {row[layout.titleField] != null ? String(row[layout.titleField]) : '—'}
-        </div>
-
-        {/* Col 3 (row-span-2): Badges */}
-        <div className="row-span-2 flex gap-1.5 items-center self-center">
-          {layout.badgeFields?.map((field) => {
-            const col = columns[field]
-            if (!col) return null
-            return (
-              <CellRenderer
-                key={field}
-                column={col}
-                columnKey={field}
-                row={row}
-              />
-            )
-          })}
-        </div>
-
-        {/* Col 4 (row-span-2): Expand actions */}
-        <div className="row-span-2 flex gap-1 items-center self-center">
-          {expandFields.map((field) => {
-            const col = columns[field]
-            if (!col) return null
-            const expansionKey = `${rowId}::${field}`
-            return (
-              <CellRenderer
-                key={field}
-                column={col}
-                columnKey={field}
-                row={row}
-                expanded={expandedRows.has(expansionKey)}
-                onToggleExpand={() => onToggleExpand(expansionKey)}
-              />
-            )
-          })}
-        </div>
-
-        {/* Col 2 Row 2: Subtitle + meta chips */}
-        <div className="flex gap-1.5 items-center mt-0.5 min-w-0">
-          {subtitle && (
-            <span className="text-xs text-muted-foreground max-w-[320px] truncate">
-              {subtitle}
-            </span>
-          )}
-          {layout.metaFields?.map((field) => {
-            const value = row[field]
-            if (value == null || value === '') return null
-            return (
-              <span
-                key={field}
-                className="bg-secondary rounded-sm px-2 py-0.5 text-xs text-muted-foreground shrink-0"
-              >
-                {String(value)}
-              </span>
-            )
-          })}
-        </div>
-      </div>
-
-      {/* Expansion content */}
-      {activeExpandField && columns[activeExpandField] && (
-        <div
-          data-slot="expansion-row"
-          className={cn(
-            'py-3 pl-[52px] pr-4',
-            isLast ? '' : 'border-b border-border',
-          )}
-        >
-          <ExpansionTable
-            row={row}
-            columnKey={activeExpandField}
-            column={columns[activeExpandField]}
-          />
-        </div>
-      )}
-    </>
-  )
-}
-
-ListItem.displayName = 'ListItem'
-
-// ---------------------------------------------------------------------------
-// ListView — single bordered container, items separated by border-bottom
-// ---------------------------------------------------------------------------
-
-const ListView = ({
-  data,
-  columns,
-  layout,
-  expandedRows,
-  favorites,
-  onToggleExpand,
-  onToggleFavorite,
-  className,
-}: ListViewProps) => {
-  return (
-    <div
-      data-slot="list-view"
-      className={cn('border border-border rounded-lg mx-6 overflow-hidden', className)}
-    >
-      {data.map((row, index) => {
-        const rowId = row['id'] as string
-        return (
-          <ListItem
-            key={rowId}
-            row={row}
-            columns={columns}
-            layout={layout}
-            expandedRows={expandedRows}
-            isFavorite={favorites.has(rowId)}
-            isLast={index === data.length - 1}
-            onToggleExpand={onToggleExpand}
-            onToggleFavorite={onToggleFavorite}
-          />
-        )
-      })}
-    </div>
-  )
-}
-
-ListView.displayName = 'ListView'
-
-export { ListView }
-export type { ListViewProps }

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

@@ -1,113 +0,0 @@
-import { ChevronDown, ListFilter } from 'lucide-react'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { FilterPopoverContent } from '../FilterPopoverContent/FilterPopoverContent'
-import type { ColumnDef } from '../types'
-import { cn } from '@/lib/utils'
-
-export interface MoreFiltersPopoverProps {
-  columns: [string, ColumnDef][]
-  filters: Record<string, string[]>
-  getFilterOptions: (columnKey: string) => string[]
-  onToggleOption: (columnKey: string, value: string) => void
-  onResetSecondary: () => void
-  totalSecondaryCount: number
-  className?: string
-}
-
-export function MoreFiltersPopover({
-  columns,
-  filters,
-  getFilterOptions,
-  onToggleOption,
-  onResetSecondary,
-  totalSecondaryCount,
-  className,
-}: MoreFiltersPopoverProps) {
-  if (columns.length === 0) return null
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          data-slot="more-filters-popover"
-          variant="outline"
-          size="sm"
-          aria-haspopup="dialog"
-          aria-label="Weitere Filter"
-          className={cn(
-            'h-8 gap-1.5 text-sm',
-            totalSecondaryCount > 0 && 'border-primary/50 bg-primary/5 text-primary hover:bg-primary/10',
-            className,
-          )}
-        >
-          <ListFilter className="size-3.5" />
-          <span>Weitere Filter</span>
-          {totalSecondaryCount > 0 && (
-            <Badge variant="default" className="h-4.5 min-w-4 px-1.5 py-0 text-[10px]">
-              {totalSecondaryCount}
-            </Badge>
-          )}
-        </Button>
-      </PopoverTrigger>
-
-      <PopoverContent
-        align="start"
-        sideOffset={4}
-        role="dialog"
-        aria-label="Weitere Filter"
-        className="w-80 p-0"
-      >
-        <div className="flex items-center justify-between border-b px-3 py-2">
-          <span className="text-sm font-medium">Weitere Filter</span>
-          {totalSecondaryCount > 0 && (
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={onResetSecondary}
-              className="h-7 px-2 text-xs text-muted-foreground hover:text-destructive"
-            >
-              Alle zurücksetzen
-            </Button>
-          )}
-        </div>
-
-        <div className="max-h-[420px] overflow-y-auto">
-          {columns.map(([colKey, col]) => {
-            const selected = filters[colKey] ?? []
-            const options = getFilterOptions(colKey)
-            return (
-              <Collapsible key={colKey} defaultOpen>
-                <CollapsibleTrigger className="group flex w-full items-center justify-between px-3 py-2 text-left text-sm font-medium hover:bg-accent">
-                  <span className="flex items-center gap-2">
-                    {col.label}
-                    {selected.length > 0 && (
-                      <Badge variant="default" className="h-4 min-w-4 px-1.5 py-0 text-[10px]">
-                        {selected.length}
-                      </Badge>
-                    )}
-                  </span>
-                  <ChevronDown className="size-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
-                </CollapsibleTrigger>
-                <CollapsibleContent>
-                  <div className="px-3 pb-3 pt-1">
-                    <FilterPopoverContent
-                      options={options}
-                      selectedValues={selected}
-                      onToggleOption={(value) => onToggleOption(colKey, value)}
-                      labelMap={col.labelMap}
-                    />
-                  </div>
-                </CollapsibleContent>
-              </Collapsible>
-            )
-          })}
-        </div>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-MoreFiltersPopover.displayName = 'MoreFiltersPopover'

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

@@ -1,193 +0,0 @@
-import * as React from 'react'
-import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import {
-  Table,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-  TableCell,
-} from '@/components/ui/table'
-import { CellRenderer } from '../cells'
-import { ExpansionRows } from '../ExpansionRows/ExpansionRows'
-import type { ColumnDef, SortDirection } from '../types'
-
-interface TableViewProps {
-  data: Record<string, unknown>[]
-  columns: Record<string, ColumnDef>
-  visibleColumns: string[]
-  sortColumn: string | null
-  sortDirection: SortDirection
-  expandedRows: Set<string>
-  favorites: Set<string>
-  onToggleSort: (column: string) => void
-  onToggleExpand: (rowId: string) => void
-  onToggleFavorite: (rowId: string) => void
-  className?: string
-}
-
-const SortIcon = ({
-  columnKey,
-  sortColumn,
-  sortDirection,
-}: {
-  columnKey: string
-  sortColumn: string | null
-  sortDirection: SortDirection
-}) => {
-  if (sortColumn !== columnKey) {
-    return <ChevronsUpDown className="size-3.5 text-muted-foreground/60" aria-hidden />
-  }
-  return sortDirection === 'asc' ? (
-    <ChevronUp className="size-3.5" aria-hidden />
-  ) : (
-    <ChevronDown className="size-3.5" aria-hidden />
-  )
-}
-
-const TableView = ({
-  data,
-  columns,
-  visibleColumns,
-  sortColumn,
-  sortDirection,
-  expandedRows,
-  favorites,
-  onToggleSort,
-  onToggleExpand,
-  onToggleFavorite,
-  className,
-}: TableViewProps) => {
-  return (
-    <div
-      data-slot="table-view"
-      className={cn('border border-border rounded-lg mx-6 overflow-hidden', className)}
-    >
-      <div
-        role="region"
-        aria-label="Datentabelle"
-        tabIndex={0}
-        className="overflow-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
-      >
-      <Table>
-        <TableHeader className="bg-accent">
-          <TableRow className="hover:bg-transparent">
-            {visibleColumns.map((columnKey) => {
-              const column = columns[columnKey]
-              if (!column) return null
-
-              const isSorted = sortColumn === columnKey
-              const ariaSortValue: React.AriaAttributes['aria-sort'] = isSorted
-                ? sortDirection === 'asc'
-                  ? 'ascending'
-                  : 'descending'
-                : undefined
-
-              return (
-                <TableHead
-                  key={columnKey}
-                  scope="col"
-                  aria-sort={ariaSortValue}
-                  onClick={column.sortable ? () => onToggleSort(columnKey) : undefined}
-                  className={cn(
-                    'text-xs font-semibold uppercase tracking-wide text-muted-foreground px-3 py-2.5 h-auto',
-                    column.sortable && 'cursor-pointer select-none',
-                    column.hideMobile && 'hidden sm:table-cell',
-                    column.hideTablet && 'hidden lg:table-cell',
-                  )}
-                >
-                  <span className="inline-flex items-center gap-1">
-                    {column.label}
-                    {column.sortable && (
-                      <SortIcon
-                        columnKey={columnKey}
-                        sortColumn={sortColumn}
-                        sortDirection={sortDirection}
-                      />
-                    )}
-                  </span>
-                </TableHead>
-              )
-            })}
-          </TableRow>
-        </TableHeader>
-
-        <TableBody>
-          {data.map((row) => {
-            const rowId = row['id'] as string
-
-            // Collect which expand columns are currently expanded for this row
-            const expandedColumnKeys = visibleColumns.filter((columnKey) => {
-              const column = columns[columnKey]
-              return column?.type === 'expand' && expandedRows.has(`${rowId}::${columnKey}`)
-            })
-
-            const isExpanded = expandedColumnKeys.length > 0
-
-            return (
-              <React.Fragment key={rowId}>
-                <TableRow className={cn(isExpanded && 'bg-primary/[0.03]')}>
-                  {visibleColumns.map((columnKey) => {
-                    const column = columns[columnKey]
-                    if (!column) return null
-
-                    const expandKey = `${rowId}::${columnKey}`
-                    const isExpandedCell = expandedRows.has(expandKey)
-
-                    return (
-                      <TableCell
-                        key={columnKey}
-                        className={cn(
-                          'px-3 py-2.5 text-[13px]',
-                          column.hideMobile && 'hidden sm:table-cell',
-                          column.hideTablet && 'hidden lg:table-cell',
-                        )}
-                      >
-                        <CellRenderer
-                          column={column}
-                          columnKey={columnKey}
-                          row={row}
-                          expanded={isExpandedCell}
-                          onToggleExpand={
-                            column.type === 'expand'
-                              ? () => onToggleExpand(expandKey)
-                              : undefined
-                          }
-                          onToggleFavorite={
-                            column.type === 'favorite'
-                              ? () => onToggleFavorite(rowId)
-                              : undefined
-                          }
-                          isFavorite={favorites.has(rowId)}
-                        />
-                      </TableCell>
-                    )
-                  })}
-                </TableRow>
-
-                {expandedColumnKeys.map((columnKey) => (
-                  <ExpansionRows
-                    key={`${rowId}::${columnKey}::expansion`}
-                    row={row}
-                    columnKey={columnKey}
-                    column={columns[columnKey]}
-                    visibleColumns={visibleColumns}
-                    columns={columns}
-                    colSpan={visibleColumns.length}
-                  />
-                ))}
-              </React.Fragment>
-            )
-          })}
-        </TableBody>
-      </Table>
-    </div>
-    </div>
-  )
-}
-
-TableView.displayName = 'TableView'
-
-export { TableView }
-export type { TableViewProps }