@fastnd/components 1.0.26 → 1.0.28

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

@@ -0,0 +1,136 @@
+import * as React from 'react'
+import { useMemo } from 'react'
+import { SearchX } from 'lucide-react'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
+import { cn } from '@/lib/utils'
+import { useDataGridState } from '../hooks/use-data-grid-state'
+import { DataGridToolbar } from '../DataGridToolbar/DataGridToolbar'
+import { DataGridTableView } from '../DataGridTableView/DataGridTableView'
+import { DataGridListView } from '../DataGridListView/DataGridListView'
+import { DataGridCardView } from '../DataGridCardView/DataGridCardView'
+import { DataGridPagination } from '../DataGridPagination/DataGridPagination'
+import type { DomainConfig } from '../types'
+
+interface DataGridProps extends React.ComponentProps<'div'> {
+  domainConfig: DomainConfig
+}
+
+const DataGrid = React.forwardRef<HTMLDivElement, DataGridProps>(
+  ({ domainConfig, className, ...props }, ref) => {
+    const state = useDataGridState(domainConfig)
+
+    const filterOptions = useMemo(() => {
+      const opts: Record<string, string[]> = {}
+      for (const [key, config] of Object.entries(domainConfig.columns)) {
+        if (!config.filterable) continue
+        const uniqueValues = [
+          ...new Set(
+            domainConfig.data
+              .map((row) => String(row[key] ?? ''))
+              .filter(Boolean)
+          ),
+        ].sort()
+        opts[key] = uniqueValues
+      }
+      return opts
+    }, [domainConfig])
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-grid"
+        className={cn('flex flex-col border border-border rounded-lg', className)}
+        {...props}
+      >
+        <DataGridToolbar
+          currentView={state.currentView}
+          onViewChange={state.setCurrentView}
+          columns={state.columnConfig}
+          columnOrder={state.columnOrder}
+          visibleColumns={state.visibleColumns}
+          filters={state.filters}
+          filterOptions={filterOptions}
+          onFilterChange={state.setFilter}
+          searchQuery={state.searchQuery}
+          onSearchChange={state.setSearchQuery}
+          hasActiveFilters={state.hasActiveFilters}
+          onResetFilters={state.resetFilters}
+          onToggleColumnVisibility={state.toggleColumnVisibility}
+          onReorderColumns={state.reorderColumns}
+        />
+
+        {state.filteredData.length === 0 ? (
+          <Empty className="py-16">
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <SearchX />
+              </EmptyMedia>
+              <EmptyTitle>Keine Ergebnisse</EmptyTitle>
+              <EmptyDescription>
+                Es wurden keine Einträge gefunden, die den aktuellen Filtern entsprechen.
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <>
+            {state.currentView === 'table' && (
+              <DataGridTableView
+                data={state.pagedData}
+                columns={state.orderedVisibleColumns}
+                sortColumn={state.sortColumn}
+                sortDirection={state.sortDirection}
+                onToggleSort={state.toggleSort}
+                expandedRows={state.expandedRows}
+                onToggleExpand={state.toggleExpand}
+                favorites={state.favorites}
+                onToggleFavorite={state.toggleFavorite}
+                columnWidths={state.columnWidths}
+                onResizeColumn={state.resizeColumn}
+              />
+            )}
+            {state.currentView === 'list' && (
+              <DataGridListView
+                data={state.pagedData}
+                columnConfig={state.columnConfig}
+                layout={state.layout.list}
+                visibleColumns={state.visibleColumns}
+                columnOrder={state.columnOrder}
+                favorites={state.favorites}
+                onToggleFavorite={state.toggleFavorite}
+                expandedRows={state.expandedRows}
+                onToggleExpand={state.toggleExpand}
+              />
+            )}
+            {state.currentView === 'cards' && (
+              <DataGridCardView
+                data={state.pagedData}
+                columnConfig={state.columnConfig}
+                layout={state.layout.card}
+                visibleColumns={state.visibleColumns}
+                favorites={state.favorites}
+                onToggleFavorite={state.toggleFavorite}
+                expandedRows={state.expandedRows}
+                onToggleExpand={state.toggleExpand}
+              />
+            )}
+          </>
+        )}
+
+        <DataGridPagination
+          currentPage={state.currentPage}
+          totalPages={state.totalPages}
+          pageSize={state.pageSize}
+          totalFiltered={state.filteredCount}
+          label={domainConfig.resultLabel}
+          onPageChange={state.setCurrentPage}
+          onPageSizeChange={state.setPageSize}
+        />
+      </div>
+    )
+  }
+)
+
+DataGrid.displayName = 'DataGrid'
+
+export { DataGrid }
+export type { DataGridProps }

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

@@ -0,0 +1,179 @@
+import * as React from 'react'
+import { ChevronDown } from 'lucide-react'
+import { Card } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import { cellRenderers } from '../cell-renderers'
+import { cn } from '@/lib/utils'
+import type { CardLayoutConfig, CellType, ColumnConfig, DataRow } from '../types'
+
+const BADGE_TYPES = new Set<CellType>(['status-badge', 'inventory', 'inventory-label'])
+const SKIP_TYPES = new Set<CellType>(['favorite'])
+
+interface DataGridCardViewProps extends React.ComponentProps<'div'> {
+  data: DataRow[]
+  columnConfig: Record<string, ColumnConfig>
+  layout: CardLayoutConfig
+  visibleColumns: Set<string>
+  favorites: Set<string>
+  onToggleFavorite: (rowId: string) => void
+  expandedRows: Set<string>
+  onToggleExpand: (rowId: string, expandKey: string) => void
+}
+
+// Finds extra visible badge columns not already listed in layout.badgeFields.
+function deriveExtraBadgeFields(
+  columnConfig: Record<string, ColumnConfig>,
+  visibleColumns: Set<string>,
+  layout: CardLayoutConfig
+): string[] {
+  const layoutFields = new Set([
+    layout.titleField,
+    ...(layout.subtitleField ? [layout.subtitleField] : []),
+    ...layout.badgeFields,
+    ...layout.rows.map((r) => r.field),
+    ...(layout.footerField ? [layout.footerField] : []),
+    ...(layout.expandField ? [layout.expandField] : []),
+  ])
+
+  const extra: string[] = []
+  for (const key of visibleColumns) {
+    if (layoutFields.has(key)) continue
+    const config = columnConfig[key]
+    if (!config) continue
+    if (SKIP_TYPES.has(config.type)) continue
+    if (BADGE_TYPES.has(config.type)) {
+      extra.push(key)
+    }
+  }
+  return extra
+}
+
+const DataGridCardView = React.forwardRef<HTMLDivElement, DataGridCardViewProps>(
+  (
+    {
+      data,
+      columnConfig,
+      layout,
+      visibleColumns,
+      favorites,
+      onToggleFavorite,
+      expandedRows,
+      onToggleExpand,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const extraBadgeFields = deriveExtraBadgeFields(columnConfig, visibleColumns, layout)
+    const allBadgeFields = [...layout.badgeFields, ...extraBadgeFields]
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-grid-card-view"
+        className={cn(
+          'grid grid-cols-1 sm:grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 p-5',
+          className
+        )}
+        {...props}
+      >
+        {data.map((row) => {
+          const titleValue = String(row[layout.titleField] ?? '')
+          const expandKey = layout.expandField
+          const expandItems = expandKey && Array.isArray(row[expandKey])
+            ? (row[expandKey] as unknown[])
+            : []
+          const compositeKey = expandKey ? `${row.id}::${expandKey}` : ''
+          const isExpanded = compositeKey ? expandedRows.has(compositeKey) : false
+
+          return (
+            <Card
+              key={row.id}
+              className="flex flex-col gap-3 p-4 hover:shadow-md transition-shadow"
+            >
+              {/* Header */}
+              <div className="flex items-start justify-between">
+                <div className="min-w-0">
+                  <div className="font-medium text-sm truncate">{titleValue}</div>
+                  {layout.subtitleField && (
+                    <div className="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+                      {String(row[layout.subtitleField] ?? '')}
+                    </div>
+                  )}
+                </div>
+                <FavoriteButton
+                  pressed={favorites.has(row.id)}
+                  projectName={titleValue}
+                  onPressedChange={() => onToggleFavorite(row.id)}
+                />
+              </div>
+
+              {/* Badges */}
+              {allBadgeFields.length > 0 && (
+                <div className="flex gap-1.5 flex-wrap">
+                  {allBadgeFields.map((field) => {
+                    const config = columnConfig[field]
+                    if (!config) return null
+                    const rendererType: CellType =
+                      config.type === 'inventory' ? 'inventory-label' : config.type
+                    return (
+                      <React.Fragment key={field}>
+                        {cellRenderers[rendererType]?.(row[field], row, config)}
+                      </React.Fragment>
+                    )
+                  })}
+                </div>
+              )}
+
+              {/* Data rows */}
+              {layout.rows.map((rowConfig) => {
+                const config = columnConfig[rowConfig.field]
+                if (!config) return null
+                const rendererType: CellType = rowConfig.rendererOverride ?? config.type
+                return (
+                  <div key={rowConfig.field} className="flex justify-between items-center">
+                    <span className="text-xs uppercase tracking-wider text-muted-foreground">
+                      {rowConfig.label}
+                    </span>
+                    <span className="text-sm font-medium font-[family-name:var(--font-grotesk)]">
+                      {cellRenderers[rendererType]?.(row[rowConfig.field], row, config)}
+                    </span>
+                  </div>
+                )
+              })}
+
+              {/* Footer */}
+              {layout.footerField && (
+                <div className="flex items-center justify-between pt-2.5 border-t border-border">
+                  <span className="text-xs text-primary font-medium">
+                    {String(row[layout.footerField] ?? '')}
+                  </span>
+                  {expandKey && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onToggleExpand(row.id, expandKey)}
+                      aria-expanded={isExpanded}
+                    >
+                      <ChevronDown
+                        className={cn('transition-transform', isExpanded && 'rotate-180')}
+                        size={14}
+                      />
+                      {expandItems.length}
+                    </Button>
+                  )}
+                </div>
+              )}
+            </Card>
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+DataGridCardView.displayName = 'DataGridCardView'
+
+export { DataGridCardView }
+export type { DataGridCardViewProps }

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

@@ -0,0 +1,190 @@
+import * as React from 'react'
+import { ChevronDown } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { FavoriteButton } from '@/components/FavoriteButton/FavoriteButton'
+import { cellRenderers } from '../cell-renderers'
+import { cn } from '@/lib/utils'
+import type { ColumnConfig, DataRow, ListLayoutConfig } from '../types'
+
+const BADGE_TYPES = new Set(['status-badge', 'inventory', 'inventory-label'])
+const SKIP_TYPES = new Set(['favorite'])
+
+interface DataGridListViewProps extends React.ComponentProps<'div'> {
+  data: DataRow[]
+  columnConfig: Record<string, ColumnConfig>
+  layout: ListLayoutConfig
+  visibleColumns: Set<string>
+  columnOrder: string[]
+  favorites: Set<string>
+  onToggleFavorite: (rowId: string) => void
+  expandedRows: Set<string>
+  onToggleExpand: (rowId: string, expandKey: string) => void
+}
+
+// Derives the extra visible columns not already covered by the layout fields.
+function deriveExtraFields(
+  columnConfig: Record<string, ColumnConfig>,
+  visibleColumns: Set<string>,
+  columnOrder: string[],
+  layout: ListLayoutConfig
+): { extraMeta: string[]; extraBadge: string[]; extraExpand: string[] } {
+  const layoutFields = new Set([
+    layout.titleField,
+    ...layout.metaFields,
+    ...layout.badgeFields,
+    ...(layout.valueField ? [layout.valueField] : []),
+    ...(layout.expandField ? [layout.expandField] : []),
+  ])
+
+  const extraMeta: string[] = []
+  const extraBadge: string[] = []
+  const extraExpand: string[] = []
+
+  for (const key of columnOrder) {
+    if (!visibleColumns.has(key) || layoutFields.has(key)) continue
+    const config = columnConfig[key]
+    if (!config) continue
+    if (SKIP_TYPES.has(config.type)) continue
+    if (BADGE_TYPES.has(config.type)) {
+      extraBadge.push(key)
+    } else if (config.type === 'expand') {
+      extraExpand.push(key)
+    } else {
+      extraMeta.push(key)
+    }
+  }
+
+  return { extraMeta, extraBadge, extraExpand }
+}
+
+const DataGridListView = React.forwardRef<HTMLDivElement, DataGridListViewProps>(
+  (
+    {
+      data,
+      columnConfig,
+      layout,
+      visibleColumns,
+      columnOrder,
+      favorites,
+      onToggleFavorite,
+      expandedRows,
+      onToggleExpand,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const { extraMeta, extraBadge, extraExpand } = deriveExtraFields(
+      columnConfig,
+      visibleColumns,
+      columnOrder,
+      layout
+    )
+
+    const allMetaFields = [...layout.metaFields, ...extraMeta]
+    const allBadgeFields = [...layout.badgeFields, ...extraBadge]
+    const allExpandFields = [
+      ...(layout.expandField ? [layout.expandField] : []),
+      ...extraExpand,
+    ]
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-grid-list-view"
+        className={cn('divide-y divide-border', className)}
+        {...props}
+      >
+        {data.map((row) => {
+          const titleValue = String(row[layout.titleField] ?? '')
+
+          return (
+            <div
+              key={row.id}
+              className="flex items-center gap-3 px-5 py-3 hover:bg-muted/50 transition-colors"
+            >
+              <FavoriteButton
+                pressed={favorites.has(row.id)}
+                projectName={titleValue}
+                onPressedChange={() => onToggleFavorite(row.id)}
+              />
+
+              <div className="flex-1 min-w-0">
+                <div className="font-medium text-sm truncate">{titleValue}</div>
+
+                {allMetaFields.length > 0 && (
+                  <div className="flex items-center gap-1 text-xs text-muted-foreground flex-wrap">
+                    {allMetaFields.map((field, index) => {
+                      const config = columnConfig[field]
+                      if (!config) return null
+                      const rendered = cellRenderers[config.type]?.(
+                        row[field],
+                        row,
+                        config
+                      )
+                      return (
+                        <React.Fragment key={field}>
+                          {index > 0 && <span aria-hidden="true">·</span>}
+                          <span>{rendered}</span>
+                        </React.Fragment>
+                      )
+                    })}
+                  </div>
+                )}
+              </div>
+
+              {allBadgeFields.length > 0 && (
+                <div className="flex items-center gap-1.5 shrink-0">
+                  {allBadgeFields.map((field) => {
+                    const config = columnConfig[field]
+                    if (!config) return null
+                    // Use inventory-label instead of inventory in list view for readability
+                    const rendererType =
+                      config.type === 'inventory' ? 'inventory-label' : config.type
+                    return (
+                      <React.Fragment key={field}>
+                        {cellRenderers[rendererType]?.(row[field], row, config)}
+                      </React.Fragment>
+                    )
+                  })}
+                </div>
+              )}
+
+              {allExpandFields.length > 0 && (
+                <div className="shrink-0 flex items-center gap-1">
+                  {allExpandFields.map((expandKey) => {
+                    const config = columnConfig[expandKey]
+                    if (!config) return null
+                    const items = Array.isArray(row[expandKey]) ? (row[expandKey] as unknown[]) : []
+                    const compositeKey = `${row.id}::${expandKey}`
+                    const isExpanded = expandedRows.has(compositeKey)
+                    return (
+                      <Button
+                        key={expandKey}
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => onToggleExpand(row.id, expandKey)}
+                        aria-expanded={isExpanded}
+                      >
+                        <ChevronDown
+                          className={cn('transition-transform', isExpanded && 'rotate-180')}
+                          size={14}
+                        />
+                        {items.length}
+                      </Button>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+DataGridListView.displayName = 'DataGridListView'
+
+export { DataGridListView }
+export type { DataGridListViewProps }

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

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { useState } from 'react'
+import { cn } from '@/lib/utils'
+import { DomainSwitcher } from '../DomainSwitcher/DomainSwitcher'
+import { DataGrid } from '../DataGrid/DataGrid'
+import type { DomainConfig } from '../types'
+
+interface DataGridPageProps extends React.ComponentProps<'div'> {
+  domains: DomainConfig[]
+}
+
+const DataGridPage = React.forwardRef<HTMLDivElement, DataGridPageProps>(
+  ({ domains, className, ...props }, ref) => {
+    const [activeDomain, setActiveDomain] = useState(domains[0]?.key ?? '')
+    const activeDomainConfig = domains.find((d) => d.key === activeDomain) ?? domains[0]
+
+    return (
+      <div
+        ref={ref}
+        data-slot="data-grid-page"
+        className={cn('flex flex-col gap-4', className)}
+        {...props}
+      >
+        <DomainSwitcher
+          domains={domains.map((d) => ({ key: d.key, label: d.label }))}
+          activeDomain={activeDomain}
+          onDomainChange={setActiveDomain}
+        />
+        {activeDomainConfig && (
+          <DataGrid
+            key={activeDomainConfig.key}
+            domainConfig={activeDomainConfig}
+          />
+        )}
+      </div>
+    )
+  }
+)
+
+DataGridPage.displayName = 'DataGridPage'
+
+export { DataGridPage }
+export type { DataGridPageProps }

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

@@ -0,0 +1,111 @@
+import * as React from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { cn } from '@/lib/utils'
+import type { PageSize } from '../hooks/use-data-grid-pagination'
+
+interface DataGridPaginationProps extends React.ComponentProps<'div'> {
+  currentPage: number
+  totalPages: number
+  pageSize: PageSize
+  totalFiltered: number
+  label: string
+  onPageChange: (page: number) => void
+  onPageSizeChange: (size: PageSize) => void
+}
+
+const DataGridPagination = React.forwardRef<HTMLDivElement, DataGridPaginationProps>(
+  (
+    {
+      currentPage,
+      totalPages,
+      pageSize,
+      totalFiltered,
+      label,
+      onPageChange,
+      onPageSizeChange,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        data-slot="data-grid-pagination"
+        role="navigation"
+        aria-label="Pagination"
+        className={cn(
+          'flex items-center justify-between border-t border-border px-5 py-2 text-xs text-muted-foreground',
+          className
+        )}
+        {...props}
+      >
+        {/* Left: page size selector */}
+        <div className="flex items-center gap-2">
+          <span>Zeilen pro Seite</span>
+          <Select
+            value={String(pageSize)}
+            onValueChange={(val) => onPageSizeChange(Number(val) as PageSize)}
+          >
+            <SelectTrigger
+              className="h-7 w-[70px] text-xs"
+              aria-label="Zeilen pro Seite"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="25">25</SelectItem>
+              <SelectItem value="50">50</SelectItem>
+              <SelectItem value="100">100</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Center: page info */}
+        <span aria-live="polite">
+          Seite {currentPage} von {totalPages}
+          {' · '}
+          <span className="font-[family-name:var(--font-grotesk)] font-semibold">{totalFiltered}</span>
+          {' '}{label}
+        </span>
+
+        {/* Right: prev / next */}
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 px-2"
+            disabled={currentPage <= 1}
+            onClick={() => onPageChange(currentPage - 1)}
+            aria-label="Vorherige Seite"
+          >
+            <ChevronLeft className="size-4" aria-hidden="true" />
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 px-2"
+            disabled={currentPage >= totalPages}
+            onClick={() => onPageChange(currentPage + 1)}
+            aria-label="Nächste Seite"
+          >
+            <ChevronRight className="size-4" aria-hidden="true" />
+          </Button>
+        </div>
+      </div>
+    )
+  }
+)
+
+DataGridPagination.displayName = 'DataGridPagination'
+
+export { DataGridPagination }
+export type { DataGridPaginationProps }