@fastnd/components 1.0.31 → 1.0.33

package/dist/examples/data-visualization/hooks/use-column-config.ts

@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { DATA_SOURCES } from '../constants'
+import type { DomainKey } from '../types'
+
+interface UseColumnConfigOptions {
+  activeDomain: DomainKey
+}
+
+interface ColumnConfigState {
+  columnOrder: string[]
+  columnVisibility: Record<string, boolean>
+  visibleColumns: string[]
+  reorderColumn: (activeId: string, overId: string) => void
+  toggleColumnVisibility: (key: string) => void
+  resetColumns: () => void
+}
+
+function buildInitialState(domain: DomainKey) {
+  const columns = DATA_SOURCES[domain].columns
+  const columnOrder = Object.keys(columns)
+  const columnVisibility: Record<string, boolean> = {}
+  for (const [k, col] of Object.entries(columns)) {
+    columnVisibility[k] = col.visible !== false
+  }
+  return { columnOrder, columnVisibility }
+}
+
+export function useColumnConfig({ activeDomain }: UseColumnConfigOptions): ColumnConfigState {
+  const [columnOrder, setColumnOrder] = useState<string[]>(
+    () => buildInitialState(activeDomain).columnOrder
+  )
+  const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>(
+    () => buildInitialState(activeDomain).columnVisibility
+  )
+
+  useEffect(() => {
+    const { columnOrder: order, columnVisibility: visibility } = buildInitialState(activeDomain)
+    setColumnOrder(order)
+    setColumnVisibility(visibility)
+  }, [activeDomain])
+
+  const columns = DATA_SOURCES[activeDomain].columns
+
+  const visibleColumns = useMemo(
+    () => columnOrder.filter((k) => columnVisibility[k] && columns[k] !== undefined),
+    [columnOrder, columnVisibility, columns]
+  )
+
+  const reorderColumn = useCallback((activeId: string, overId: string) => {
+    setColumnOrder((prev) => {
+      const result = prev.filter((k) => k !== activeId)
+      const overIndex = result.indexOf(overId)
+      result.splice(overIndex, 0, activeId)
+      return result
+    })
+  }, [])
+
+  const toggleColumnVisibility = useCallback((key: string) => {
+    setColumnVisibility((prev) => ({ ...prev, [key]: !prev[key] }))
+  }, [])
+
+  const resetColumns = useCallback(() => {
+    const { columnOrder: order, columnVisibility: visibility } = buildInitialState(activeDomain)
+    setColumnOrder(order)
+    setColumnVisibility(visibility)
+  }, [activeDomain])
+
+  return {
+    columnOrder,
+    columnVisibility,
+    visibleColumns,
+    reorderColumn,
+    toggleColumnVisibility,
+    resetColumns,
+  }
+}

package/dist/examples/data-visualization/hooks/use-data-explorer-state.ts

@@ -0,0 +1,318 @@
+import { useState, useMemo, useCallback } from 'react'
+import type { DomainKey, DomainConfig, ViewMode, SortState, FilterState } from '../types'
+import { DATA_SOURCES } from '../constants'
+
+export interface DataExplorerState {
+  // Domain
+  activeDomain: DomainKey
+  setActiveDomain: (domain: DomainKey) => void
+  domainConfig: DomainConfig
+
+  // View
+  viewMode: ViewMode
+  setViewMode: (mode: ViewMode) => void
+
+  // Sorting
+  sort: SortState
+  toggleSort: (column: string) => void
+
+  // Filtering
+  filters: FilterState
+  toggleFilter: (column: string, value: string) => void
+  clearFilter: (column: string) => void
+  clearAllFilters: () => void
+  clearSecondaryFilters: () => void
+  hasActiveFilters: boolean
+  activeFilterCount: number
+  getFilterOptions: (colKey: string) => string[]
+
+  // Search
+  searchTerm: string
+  setSearchTerm: (term: string) => void
+
+  // Expansion
+  expandedRows: Set<string>
+  toggleExpansion: (rowId: string, field: string) => void
+
+  // Favorites
+  favorites: Set<string>
+  toggleFavorite: (id: string) => void
+
+  // Pagination
+  currentPage: number
+  pageSize: number
+  setPage: (page: number) => void
+  setPageSize: (size: number) => void
+  totalFiltered: number
+  totalPages: number
+
+  // Derived data
+  paginatedData: Record<string, unknown>[]
+  visibleColumns: string[]
+}
+
+function initFavorites(data: Record<string, unknown>[]): Set<string> {
+  const favs = new Set<string>()
+  for (const row of data) {
+    if (row.favorite) favs.add(row.id as string)
+  }
+  return favs
+}
+
+export function useDataExplorerState(
+  initialDomain: DomainKey = 'products',
+): DataExplorerState {
+  const [activeDomain, setActiveDomainRaw] = useState<DomainKey>(initialDomain)
+  const [viewMode, setViewModeRaw] = useState<ViewMode>('table')
+  const [sort, setSort] = useState<SortState>({ column: null, direction: 'asc' })
+  const [filters, setFilters] = useState<FilterState>({})
+  const [searchTerm, setSearchTermRaw] = useState('')
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
+  const [favorites, setFavorites] = useState<Set<string>>(() =>
+    initFavorites(DATA_SOURCES[initialDomain].data),
+  )
+  const [currentPage, setCurrentPage] = useState(1)
+  const [pageSize, setPageSizeRaw] = useState(25)
+
+  const domainConfig = useMemo<DomainConfig>(
+    () => DATA_SOURCES[activeDomain],
+    [activeDomain],
+  )
+
+  const setViewMode = useCallback((mode: ViewMode) => {
+    setViewModeRaw(mode)
+    setSort({ column: null, direction: 'asc' })
+  }, [])
+
+  const setActiveDomain = useCallback((domain: DomainKey) => {
+    setActiveDomainRaw(domain)
+    setSort({ column: null, direction: 'asc' })
+    setFilters({})
+    setSearchTermRaw('')
+    setExpandedRows(new Set())
+    setCurrentPage(1)
+    setFavorites(initFavorites(DATA_SOURCES[domain].data))
+  }, [])
+
+  const toggleSort = useCallback((column: string) => {
+    setSort((prev) => {
+      if (prev.column === column) {
+        return { column, direction: prev.direction === 'asc' ? 'desc' : 'asc' }
+      }
+      return { column, direction: 'asc' }
+    })
+    setCurrentPage(1)
+  }, [])
+
+  const toggleFilter = useCallback((column: string, value: string) => {
+    setFilters((prev) => {
+      const current = prev[column] ?? []
+      const next = current.includes(value)
+        ? current.filter((v) => v !== value)
+        : [...current, value]
+      return { ...prev, [column]: next }
+    })
+    setCurrentPage(1)
+  }, [])
+
+  const clearFilter = useCallback((column: string) => {
+    setFilters((prev) => {
+      const next = { ...prev }
+      delete next[column]
+      return next
+    })
+    setCurrentPage(1)
+  }, [])
+
+  const clearAllFilters = useCallback(() => {
+    setFilters({})
+    setSearchTermRaw('')
+    setCurrentPage(1)
+  }, [])
+
+  const clearSecondaryFilters = useCallback(() => {
+    setFilters((prev) => {
+      const cols = DATA_SOURCES[activeDomain].columns
+      const next: FilterState = {}
+      for (const [k, v] of Object.entries(prev)) {
+        if (cols[k]?.primaryFilter) next[k] = v
+      }
+      return next
+    })
+    setCurrentPage(1)
+    // activeDomain is stable within a single render; callback captures it via closure
+  }, [activeDomain])
+
+  const setSearchTerm = useCallback((term: string) => {
+    setSearchTermRaw(term)
+    setCurrentPage(1)
+  }, [])
+
+  const toggleExpansion = useCallback((rowId: string, field: string) => {
+    const key = `${rowId}::${field}`
+    setExpandedRows((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) {
+        next.delete(key)
+      } else {
+        next.add(key)
+      }
+      return next
+    })
+  }, [])
+
+  const toggleFavorite = useCallback((id: string) => {
+    setFavorites((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) {
+        next.delete(id)
+      } else {
+        next.add(id)
+      }
+      return next
+    })
+  }, [])
+
+  const setPage = useCallback((page: number) => {
+    setCurrentPage(page)
+  }, [])
+
+  const setPageSize = useCallback((size: number) => {
+    setPageSizeRaw(size)
+    setCurrentPage(1)
+  }, [])
+
+  const getFilterOptions = useCallback(
+    (colKey: string): string[] => {
+      const col = DATA_SOURCES[activeDomain].columns[colKey]
+      if (!col) return []
+      if (col.filterOptions) return col.filterOptions
+      const vals = new Set<string>()
+      for (const row of DATA_SOURCES[activeDomain].data) {
+        const v = row[colKey]
+        if (v != null && v !== '') vals.add(String(v))
+      }
+      return [...vals].sort((a, b) => a.localeCompare(b, 'de'))
+    },
+    [activeDomain],
+  )
+
+  const filteredData = useMemo(() => {
+    const { data, columns } = DATA_SOURCES[activeDomain]
+    const term = searchTerm.toLowerCase()
+
+    return data.filter((row) => {
+      // search
+      if (term) {
+        let matched = false
+        for (const [k, col] of Object.entries(columns)) {
+          if (!col.searchable) continue
+          const v = row[k]
+          if (v != null && String(v).toLowerCase().includes(term)) {
+            matched = true
+            break
+          }
+          if (col.secondary) {
+            const sv = row[col.secondary]
+            if (sv != null && String(sv).toLowerCase().includes(term)) {
+              matched = true
+              break
+            }
+          }
+        }
+        if (!matched) return false
+      }
+
+      // filters
+      for (const [colKey, selected] of Object.entries(filters)) {
+        if (!selected || selected.length === 0) continue
+        const col = columns[colKey]
+        if (!col) continue
+        if (col.filterFn) {
+          if (!selected.some((val) => col.filterFn!(row, val))) return false
+        } else {
+          if (!selected.includes(String(row[colKey] ?? ''))) return false
+        }
+      }
+
+      return true
+    })
+  }, [activeDomain, filters, searchTerm])
+
+  const sortedData = useMemo(() => {
+    if (!sort.column) return filteredData
+    const col = DATA_SOURCES[activeDomain].columns[sort.column]
+    if (!col) return filteredData
+
+    const key = sort.column
+    const dir = sort.direction === 'asc' ? 1 : -1
+
+    return [...filteredData].sort((a, b) => {
+      let va = a[key] ?? ''
+      let vb = b[key] ?? ''
+      if (typeof va === 'number' && typeof vb === 'number') {
+        return (va - vb) * dir
+      }
+      return String(va).localeCompare(String(vb), 'de') * dir
+    })
+  }, [filteredData, sort, activeDomain])
+
+  const totalFiltered = useMemo(() => filteredData.length, [filteredData])
+
+  const totalPages = useMemo(
+    () => Math.max(1, Math.ceil(totalFiltered / pageSize)),
+    [totalFiltered, pageSize],
+  )
+
+  const paginatedData = useMemo(() => {
+    const start = (currentPage - 1) * pageSize
+    return sortedData.slice(start, start + pageSize)
+  }, [sortedData, currentPage, pageSize])
+
+  const visibleColumns = useMemo(() => {
+    const { columns } = DATA_SOURCES[activeDomain]
+    return Object.keys(columns).filter((k) => columns[k].visible !== false)
+  }, [activeDomain])
+
+  const hasActiveFilters = useMemo(() => {
+    if (searchTerm) return true
+    return Object.values(filters).some((v) => v && v.length > 0)
+  }, [filters, searchTerm])
+
+  const activeFilterCount = useMemo(
+    () => Object.values(filters).reduce((acc, v) => acc + (v?.length ?? 0), 0),
+    [filters],
+  )
+
+  return {
+    activeDomain,
+    setActiveDomain,
+    domainConfig,
+    viewMode,
+    setViewMode,
+    sort,
+    toggleSort,
+    filters,
+    toggleFilter,
+    clearFilter,
+    clearAllFilters,
+    clearSecondaryFilters,
+    hasActiveFilters,
+    activeFilterCount,
+    getFilterOptions,
+    searchTerm,
+    setSearchTerm,
+    expandedRows,
+    toggleExpansion,
+    favorites,
+    toggleFavorite,
+    currentPage,
+    pageSize,
+    setPage,
+    setPageSize,
+    totalFiltered,
+    totalPages,
+    paginatedData,
+    visibleColumns,
+  }
+}

package/dist/examples/data-visualization/index.ts

@@ -0,0 +1 @@
+export { DataVisualizationPage } from './DataVisualizationPage/DataVisualizationPage'

package/dist/examples/data-visualization/types.ts

@@ -0,0 +1,110 @@
+import type React from 'react'
+
+export type DomainKey = 'products' | 'projects' | 'customers' | 'applications'
+
+export type CellType =
+  | 'text'
+  | 'double-text'
+  | 'link'
+  | 'status-badge'
+  | 'currency'
+  | 'inventory'
+  | 'favorite'
+  | 'expand'
+  | 'score-bar'
+
+export type ViewMode = 'table' | 'list' | 'card'
+
+export type SortDirection = 'asc' | 'desc'
+
+export interface SortState {
+  column: string | null
+  direction: SortDirection
+}
+
+export type FilterState = Record<string, string[]>
+
+export interface ExpandColumnDef {
+  key: string
+  label: string
+  mapTo?: string
+  secondaryKey?: string
+  bold?: boolean
+  muted?: boolean
+  type?: CellType
+}
+
+export interface RenderCellOptions {
+  mode?: 'default' | 'compact' | 'inventory-label'
+  isExpanded?: boolean
+  isFavorite?: boolean
+  onToggleExpand?: () => void
+  onToggleFavorite?: () => void
+}
+
+export interface ColumnDef {
+  label: string
+  type: CellType
+  sortable: boolean
+  filterable: boolean
+  primaryFilter?: boolean
+  visible: boolean
+  searchable?: boolean
+  secondary?: string
+  currencyField?: string
+  statusMap?: Record<string, string>
+  levelFn?: (v: number) => 'high' | 'medium' | 'low'
+  formatFn?: (v: number) => string
+  labelMap?: Record<string, string>
+  filterOptions?: string[]
+  filterFn?: (row: Record<string, unknown>, val: string) => boolean
+  expandColumns?: ExpandColumnDef[]
+  expandTitleFn?: (row: Record<string, unknown>) => string
+  expandLabel?: string
+  expandIcon?: string
+  headerIcon?: string
+  headerTooltip?: string
+  hideTablet?: boolean
+  hideMobile?: boolean
+  rowLines?: number
+  render?: (val: unknown, row: Record<string, unknown>, opts: RenderCellOptions) => React.ReactNode
+}
+
+export interface ListLayout {
+  titleField: string
+  metaFields: string[]
+  badgeFields: string[]
+  valueField: string | null
+  expandFields?: string[]
+  expandField?: string
+}
+
+export interface CardRow {
+  label: string
+  field: string
+  rendererOverride?: string
+}
+
+export interface CardLayout {
+  titleField: string
+  subtitleField: string
+  badgeFields: string[]
+  rows: CardRow[]
+  footerField: string
+  expandFields?: string[]
+  expandField?: string
+}
+
+export interface DomainLayout {
+  list: ListLayout
+  card: CardLayout
+}
+
+export interface DomainConfig {
+  key: DomainKey
+  label: string
+  resultLabel: string
+  columns: Record<string, ColumnDef>
+  layout: DomainLayout
+  data: Record<string, unknown>[]
+}

package/dist/examples/quickaccess/QuickAccess/QuickAccess.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react'
+import { ChevronDown } from 'lucide-react'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
+import { QuickAccessCard } from '@/components/QuickAccessCard/QuickAccessCard'
+import { cn } from '@/lib/utils'
+import type { QuickAccessItem } from '../types'
+
+interface QuickAccessProps extends React.ComponentProps<'section'> {
+  items: QuickAccessItem[]
+  defaultOpen?: boolean
+  activeItemId?: string
+  onSelect?: (item: QuickAccessItem) => void
+}
+
+const QuickAccess = React.forwardRef<HTMLElement, QuickAccessProps>(
+  ({ items, defaultOpen = true, activeItemId, onSelect, className, ...props }, ref) => {
+    const titleId = React.useId()
+
+    return (
+      <section
+        ref={ref}
+        data-slot="quick-access"
+        aria-labelledby={titleId}
+        className={cn(
+          'bg-background border border-border rounded-lg overflow-hidden shadow-[var(--shadow-card)]',
+          className,
+        )}
+        {...props}
+      >
+        <Collapsible defaultOpen={defaultOpen}>
+          {/* Header */}
+          <div className="flex items-center gap-2 px-5 py-3 border-b border-border select-none">
+            <CollapsibleTrigger
+              className={cn(
+                'group inline-flex items-center justify-center h-7 w-7 rounded-sm',
+                'text-muted-foreground bg-transparent border-none cursor-pointer',
+                'transition-[background-color,color] duration-150',
+                'hover:bg-muted hover:text-foreground',
+                'focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2',
+              )}
+              aria-label="Schnellzugriffe ein-/ausklappen"
+            >
+              <ChevronDown
+                size={16}
+                className="transition-transform duration-300 group-data-[state=closed]:-rotate-90"
+              />
+            </CollapsibleTrigger>
+
+            <h2
+              id={titleId}
+              className="text-[0.8125rem] font-medium tracking-[0.06em] uppercase text-foreground"
+              style={{ fontFamily: 'var(--font-clash)' }}
+            >
+              Schnellzugriffe
+            </h2>
+          </div>
+
+          {/* Cards */}
+          <CollapsibleContent>
+            <div
+              role="list"
+              className="flex flex-wrap gap-3 p-4 md:flex-nowrap md:gap-4 md:p-5"
+            >
+              {items.map((item) => (
+                <QuickAccessCard
+                  key={item.id}
+                  role="listitem"
+                  label={item.label}
+                  count={item.count}
+                  countLabel={item.countLabel}
+                  icon={item.icon}
+                  variant={item.variant}
+                  isActive={activeItemId === item.id}
+                  href={item.href ?? `#${item.id}`}
+                  className="flex-[1_1_100%] min-[480px]:flex-[1_1_calc(50%_-_0.375rem)] md:flex-1"
+                  onClick={
+                    onSelect
+                      ? (e) => {
+                          e.preventDefault()
+                          onSelect(item)
+                        }
+                      : undefined
+                  }
+                />
+              ))}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </section>
+    )
+  },
+)
+
+QuickAccess.displayName = 'QuickAccess'
+
+export { QuickAccess }
+export type { QuickAccessProps }

package/dist/examples/quickaccess/index.ts

@@ -0,0 +1,2 @@
+export * from './QuickAccess/QuickAccess'
+export type * from './types'

package/dist/examples/quickaccess/types.ts

@@ -0,0 +1,11 @@
+import type * as React from 'react'
+
+export interface QuickAccessItem {
+  id: string
+  label: string
+  count: number
+  countLabel?: string // defaults to 'Projekte'
+  href?: string
+  variant?: 'default' | 'overdue'
+  icon: React.ReactNode
+}