@fastnd/components 1.0.26 → 1.0.28

package/dist/examples/data-visualization/hooks/use-data-grid-columns.ts

@@ -0,0 +1,65 @@
+import { useState, useMemo, useCallback } from 'react'
+import type { ColumnConfig } from '../types'
+
+export interface DataGridColumnsState {
+  visibleColumns: Set<string>
+  columnOrder: string[]
+  columnWidths: Record<string, number>
+  toggleColumnVisibility: (columnKey: string) => void
+  reorderColumns: (newOrder: string[]) => void
+  resizeColumn: (columnKey: string, width: number) => void
+  orderedVisibleColumns: Array<[string, ColumnConfig]>
+}
+
+export function useDataGridColumns(
+  columnConfig: Record<string, ColumnConfig>,
+): DataGridColumnsState {
+  const [visibleColumns, setVisibleColumns] = useState<Set<string>>(
+    () =>
+      new Set(
+        Object.entries(columnConfig)
+          .filter(([, config]) => config.visible)
+          .map(([key]) => key),
+      ),
+  )
+  const [columnOrder, setColumnOrder] = useState<string[]>(() => Object.keys(columnConfig))
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({})
+
+  const toggleColumnVisibility = useCallback((columnKey: string) => {
+    setVisibleColumns((prev) => {
+      const next = new Set(prev)
+      if (next.has(columnKey)) {
+        next.delete(columnKey)
+      } else {
+        next.add(columnKey)
+      }
+      return next
+    })
+  }, [])
+
+  const reorderColumns = useCallback((newOrder: string[]) => {
+    setColumnOrder(newOrder)
+  }, [])
+
+  const resizeColumn = useCallback((columnKey: string, width: number) => {
+    setColumnWidths((prev) => ({ ...prev, [columnKey]: width }))
+  }, [])
+
+  const orderedVisibleColumns = useMemo<Array<[string, ColumnConfig]>>(
+    () =>
+      columnOrder
+        .filter((key) => visibleColumns.has(key) && key in columnConfig)
+        .map((key) => [key, columnConfig[key]]),
+    [columnOrder, visibleColumns, columnConfig],
+  )
+
+  return {
+    visibleColumns,
+    columnOrder,
+    columnWidths,
+    toggleColumnVisibility,
+    reorderColumns,
+    resizeColumn,
+    orderedVisibleColumns,
+  }
+}

package/dist/examples/data-visualization/hooks/use-data-grid-expansion.ts

@@ -0,0 +1,40 @@
+import { useState, useCallback } from 'react'
+
+export interface DataGridExpansionState {
+  expandedRows: Set<string>
+  toggleExpand: (rowId: string, expandKey: string) => void
+  isExpanded: (rowId: string, expandKey: string) => boolean
+  collapseAll: () => void
+}
+
+function compositeKey(rowId: string, expandKey: string): string {
+  return `${rowId}::${expandKey}`
+}
+
+export function useDataGridExpansion(): DataGridExpansionState {
+  const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set())
+
+  const toggleExpand = useCallback((rowId: string, expandKey: string) => {
+    const key = compositeKey(rowId, expandKey)
+    setExpandedRows((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) {
+        next.delete(key)
+      } else {
+        next.add(key)
+      }
+      return next
+    })
+  }, [])
+
+  const isExpanded = useCallback(
+    (rowId: string, expandKey: string) => expandedRows.has(compositeKey(rowId, expandKey)),
+    [expandedRows],
+  )
+
+  const collapseAll = useCallback(() => {
+    setExpandedRows(new Set())
+  }, [])
+
+  return { expandedRows, toggleExpand, isExpanded, collapseAll }
+}

package/dist/examples/data-visualization/hooks/use-data-grid-favorites.ts

@@ -0,0 +1,41 @@
+import { useState, useCallback, useEffect } from 'react'
+import type { DataRow } from '../types'
+
+export interface DataGridFavoritesState {
+  favorites: Set<string>
+  toggleFavorite: (rowId: string) => void
+  isFavorite: (rowId: string) => boolean
+}
+
+function buildInitialFavorites(data: DataRow[]): Set<string> {
+  return new Set(data.filter((row) => row.favorite).map((row) => row.id))
+}
+
+export function useDataGridFavorites(initialData: DataRow[]): DataGridFavoritesState {
+  const [favorites, setFavorites] = useState<Set<string>>(() =>
+    buildInitialFavorites(initialData),
+  )
+
+  // Re-initialize when the dataset changes (e.g. domain switch via parent key remount).
+  // This useEffect handles cases where the same hook instance receives new data without
+  // remounting — keeps the hook correct in both key-based and prop-based reset scenarios.
+  useEffect(() => {
+    setFavorites(buildInitialFavorites(initialData))
+  }, [initialData])
+
+  const toggleFavorite = useCallback((rowId: string) => {
+    setFavorites((prev) => {
+      const next = new Set(prev)
+      if (next.has(rowId)) {
+        next.delete(rowId)
+      } else {
+        next.add(rowId)
+      }
+      return next
+    })
+  }, [])
+
+  const isFavorite = useCallback((rowId: string) => favorites.has(rowId), [favorites])
+
+  return { favorites, toggleFavorite, isFavorite }
+}

package/dist/examples/data-visualization/hooks/use-data-grid-filters.ts

@@ -0,0 +1,61 @@
+import { useState, useMemo, useCallback } from 'react'
+import type { ColumnConfig, DataGridFilters } from '../types'
+
+export interface DataGridFiltersState {
+  filters: DataGridFilters
+  searchQuery: string
+  setFilter: (columnKey: string, values: string[] | null) => void
+  setSearchQuery: (query: string) => void
+  resetFilters: () => void
+  hasActiveFilters: boolean
+  activeFilterCount: number
+}
+
+function buildInitialFilters(columnConfig: Record<string, ColumnConfig>): DataGridFilters {
+  return Object.entries(columnConfig).reduce<DataGridFilters>((acc, [key, config]) => {
+    if (config.filterable) acc[key] = null
+    return acc
+  }, {})
+}
+
+export function useDataGridFilters(
+  columnConfig: Record<string, ColumnConfig>,
+): DataGridFiltersState {
+  const [filters, setFilters] = useState<DataGridFilters>(() =>
+    buildInitialFilters(columnConfig),
+  )
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const setFilter = useCallback((columnKey: string, value: string | null) => {
+    setFilters((prev) => ({ ...prev, [columnKey]: value }))
+  }, [])
+
+  const handleSetSearchQuery = useCallback((query: string) => {
+    setSearchQuery(query)
+  }, [])
+
+  const resetFilters = useCallback(() => {
+    setFilters(buildInitialFilters(columnConfig))
+    setSearchQuery('')
+  }, [columnConfig])
+
+  const activeFilterCount = useMemo(
+    () => Object.values(filters).filter((v) => v !== null && v.length > 0).length,
+    [filters],
+  )
+
+  const hasActiveFilters = useMemo(
+    () => activeFilterCount > 0 || searchQuery !== '',
+    [activeFilterCount, searchQuery],
+  )
+
+  return {
+    filters,
+    searchQuery,
+    setFilter,
+    setSearchQuery: handleSetSearchQuery,
+    resetFilters,
+    hasActiveFilters,
+    activeFilterCount,
+  }
+}

package/dist/examples/data-visualization/hooks/use-data-grid-pagination.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from 'react'
+import type { DataRow } from '../types'
+
+export type PageSize = 25 | 50 | 100
+
+export interface PaginationState {
+  pageSize: PageSize
+  setPageSize: (size: PageSize) => void
+  currentPage: number
+  setCurrentPage: (page: number) => void
+  totalPages: number
+  pagedData: DataRow[]
+}
+
+export function useDataGridPagination(filteredData: DataRow[]): PaginationState {
+  const [pageSize, setPageSize] = useState<PageSize>(25)
+  const [currentPage, setCurrentPage] = useState(1)
+
+  // Reset to page 1 whenever the filtered result set changes size
+  useEffect(() => {
+    setCurrentPage(1)
+  }, [filteredData.length])
+
+  const totalPages = Math.max(1, Math.ceil(filteredData.length / pageSize))
+  const safeCurrentPage = Math.min(currentPage, totalPages)
+  const pagedData = filteredData.slice(
+    (safeCurrentPage - 1) * pageSize,
+    safeCurrentPage * pageSize,
+  )
+
+  return { pageSize, setPageSize, currentPage: safeCurrentPage, setCurrentPage, totalPages, pagedData }
+}

package/dist/examples/data-visualization/hooks/use-data-grid-sort.ts

@@ -0,0 +1,32 @@
+import { useState, useCallback } from 'react'
+import type { SortDirection } from '../types'
+
+export interface DataGridSortState {
+  sortColumn: string | null
+  sortDirection: SortDirection
+  toggleSort: (columnKey: string) => void
+  resetSort: () => void
+}
+
+export function useDataGridSort(): DataGridSortState {
+  const [sortColumn, setSortColumn] = useState<string | null>(null)
+  const [sortDirection, setSortDirection] = useState<SortDirection>('asc')
+
+  const toggleSort = useCallback((columnKey: string) => {
+    setSortColumn((prevColumn) => {
+      if (prevColumn === columnKey) {
+        setSortDirection((prevDir) => (prevDir === 'asc' ? 'desc' : 'asc'))
+        return columnKey
+      }
+      setSortDirection('asc')
+      return columnKey
+    })
+  }, [])
+
+  const resetSort = useCallback(() => {
+    setSortColumn(null)
+    setSortDirection('asc')
+  }, [])
+
+  return { sortColumn, sortDirection, toggleSort, resetSort }
+}

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

@@ -0,0 +1,133 @@
+import { useState } from 'react'
+import type { DomainConfig, ColumnConfig, DataGridFilters, SortDirection, ViewMode, DataRow, ViewLayoutConfig } from '../types'
+import { useDataGridSort } from './use-data-grid-sort'
+import { useDataGridFilters } from './use-data-grid-filters'
+import { useDataGridColumns } from './use-data-grid-columns'
+import { useDataGridExpansion } from './use-data-grid-expansion'
+import { useDataGridFavorites } from './use-data-grid-favorites'
+import { useFilteredData } from './use-filtered-data'
+import { useDataGridPagination, type PageSize } from './use-data-grid-pagination'
+
+export interface DataGridState {
+  // View
+  currentView: ViewMode
+  setCurrentView: (view: ViewMode) => void
+  // Sort
+  sortColumn: string | null
+  sortDirection: SortDirection
+  toggleSort: (columnKey: string) => void
+  // Filters
+  filters: DataGridFilters
+  searchQuery: string
+  setFilter: (columnKey: string, value: string[] | null) => void
+  setSearchQuery: (query: string) => void
+  resetFilters: () => void
+  hasActiveFilters: boolean
+  activeFilterCount: number
+  // Columns
+  visibleColumns: Set<string>
+  columnOrder: string[]
+  columnWidths: Record<string, number>
+  toggleColumnVisibility: (columnKey: string) => void
+  reorderColumns: (newOrder: string[]) => void
+  resizeColumn: (columnKey: string, width: number) => void
+  orderedVisibleColumns: Array<[string, ColumnConfig]>
+  // Expansion
+  expandedRows: Set<string>
+  toggleExpand: (rowId: string, expandKey: string) => void
+  isExpanded: (rowId: string, expandKey: string) => boolean
+  // Favorites
+  favorites: Set<string>
+  toggleFavorite: (rowId: string) => void
+  isFavorite: (rowId: string) => boolean
+  // Data
+  filteredData: DataRow[]
+  pagedData: DataRow[]
+  totalCount: number
+  filteredCount: number
+  // Pagination
+  pageSize: PageSize
+  setPageSize: (size: PageSize) => void
+  currentPage: number
+  setCurrentPage: (page: number) => void
+  totalPages: number
+  // Domain config pass-through
+  columnConfig: Record<string, ColumnConfig>
+  layout: ViewLayoutConfig
+}
+
+/**
+ * Orchestrates all data-grid sub-hooks for a given domain configuration.
+ *
+ * Domain switching:
+ * The cleanest reset strategy is to mount the component that calls this hook
+ * with `key={domainConfig.key}`. React will unmount and remount the component
+ * when the key changes, naturally resetting all hook state. No useEffect or
+ * manual reset logic is needed inside this hook for domain switches.
+ */
+export function useDataGridState(domainConfig: DomainConfig): DataGridState {
+  const [currentView, setCurrentView] = useState<ViewMode>('table')
+
+  const sort = useDataGridSort()
+  const filters = useDataGridFilters(domainConfig.columns)
+  const columns = useDataGridColumns(domainConfig.columns)
+  const expansion = useDataGridExpansion()
+  const favorites = useDataGridFavorites(domainConfig.data)
+  const data = useFilteredData(
+    domainConfig.data,
+    domainConfig.columns,
+    filters.filters,
+    filters.searchQuery,
+    sort.sortColumn,
+    sort.sortDirection,
+  )
+  const pagination = useDataGridPagination(data.filteredData)
+
+  return {
+    // View
+    currentView,
+    setCurrentView,
+    // Sort
+    sortColumn: sort.sortColumn,
+    sortDirection: sort.sortDirection,
+    toggleSort: sort.toggleSort,
+    // Filters
+    filters: filters.filters,
+    searchQuery: filters.searchQuery,
+    setFilter: filters.setFilter,
+    setSearchQuery: filters.setSearchQuery,
+    resetFilters: filters.resetFilters,
+    hasActiveFilters: filters.hasActiveFilters,
+    activeFilterCount: filters.activeFilterCount,
+    // Columns
+    visibleColumns: columns.visibleColumns,
+    columnOrder: columns.columnOrder,
+    columnWidths: columns.columnWidths,
+    toggleColumnVisibility: columns.toggleColumnVisibility,
+    reorderColumns: columns.reorderColumns,
+    resizeColumn: columns.resizeColumn,
+    orderedVisibleColumns: columns.orderedVisibleColumns,
+    // Expansion
+    expandedRows: expansion.expandedRows,
+    toggleExpand: expansion.toggleExpand,
+    isExpanded: expansion.isExpanded,
+    // Favorites
+    favorites: favorites.favorites,
+    toggleFavorite: favorites.toggleFavorite,
+    isFavorite: favorites.isFavorite,
+    // Data
+    filteredData: data.filteredData,
+    pagedData: pagination.pagedData,
+    totalCount: data.totalCount,
+    filteredCount: data.filteredCount,
+    // Pagination
+    pageSize: pagination.pageSize,
+    setPageSize: pagination.setPageSize,
+    currentPage: pagination.currentPage,
+    setCurrentPage: pagination.setCurrentPage,
+    totalPages: pagination.totalPages,
+    // Domain config pass-through
+    columnConfig: domainConfig.columns,
+    layout: domainConfig.layout,
+  }
+}

package/dist/examples/data-visualization/hooks/use-filtered-data.ts

@@ -0,0 +1,84 @@
+import { useMemo } from 'react'
+import type { DataRow, ColumnConfig, DataGridFilters, SortDirection } from '../types'
+
+export interface FilteredDataState {
+  filteredData: DataRow[]
+  totalCount: number
+  filteredCount: number
+}
+
+function applySearch(
+  data: DataRow[],
+  columnConfig: Record<string, ColumnConfig>,
+  query: string,
+): DataRow[] {
+  if (query === '') return data
+  const lower = query.toLowerCase()
+  return data.filter((row) =>
+    Object.entries(columnConfig).some(([key, config]) => {
+      if (!config.searchable) return false
+      const primary = String(row[key] ?? '').toLowerCase()
+      if (primary.includes(lower)) return true
+      // Also check secondary field for double-text cells
+      if (config.secondary) {
+        const secondary = String(row[config.secondary] ?? '').toLowerCase()
+        return secondary.includes(lower)
+      }
+      return false
+    }),
+  )
+}
+
+function applyFilters(
+  data: DataRow[],
+  columnConfig: Record<string, ColumnConfig>,
+  filters: DataGridFilters,
+): DataRow[] {
+  return data.filter((row) =>
+    Object.entries(filters).every(([key, values]) => {
+      if (!values || values.length === 0) return true
+      const config = columnConfig[key]
+      if (!config) return true
+      if (config.filterFn) return values.some((v) => config.filterFn!(row, v))
+      return values.includes(String(row[key] ?? ''))
+    }),
+  )
+}
+
+function compareValues(a: unknown, b: unknown): number {
+  if (typeof a === 'number' && typeof b === 'number') return a - b
+  return String(a ?? '').localeCompare(String(b ?? ''))
+}
+
+function applySort(
+  data: DataRow[],
+  sortColumn: string | null,
+  sortDirection: SortDirection,
+): DataRow[] {
+  if (!sortColumn) return data
+  return [...data].sort((a, b) => {
+    const result = compareValues(a[sortColumn], b[sortColumn])
+    return sortDirection === 'asc' ? result : -result
+  })
+}
+
+export function useFilteredData(
+  data: DataRow[],
+  columnConfig: Record<string, ColumnConfig>,
+  filters: DataGridFilters,
+  searchQuery: string,
+  sortColumn: string | null,
+  sortDirection: SortDirection,
+): FilteredDataState {
+  const totalCount = useMemo(() => data.length, [data])
+
+  const filteredData = useMemo(() => {
+    const searched = applySearch(data, columnConfig, searchQuery)
+    const filtered = applyFilters(searched, columnConfig, filters)
+    return applySort(filtered, sortColumn, sortDirection)
+  }, [data, columnConfig, searchQuery, filters, sortColumn, sortDirection])
+
+  const filteredCount = useMemo(() => filteredData.length, [filteredData])
+
+  return { filteredData, totalCount, filteredCount }
+}

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

@@ -0,0 +1,10 @@
+export { DataGridPage } from './DataGridPage/DataGridPage'
+export type { DataGridPageProps } from './DataGridPage/DataGridPage'
+export { DataGrid } from './DataGrid/DataGrid'
+export type { DataGridProps } from './DataGrid/DataGrid'
+export { DomainSwitcher } from './DomainSwitcher/DomainSwitcher'
+export type { DomainSwitcherProps } from './DomainSwitcher/DomainSwitcher'
+// Types
+export type { DomainConfig, ColumnConfig, DataRow, ViewMode, CellType } from './types'
+// Constants for consumers
+export { DATA_SOURCES, DOMAIN_KEYS } from './constants'

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

@@ -0,0 +1,103 @@
+export type CellType =
+  | 'text'
+  | 'double-text'
+  | 'link'
+  | 'status-badge'
+  | 'currency'
+  | 'inventory'
+  | 'inventory-label'
+  | 'progress'
+  | 'favorite'
+  | 'expand'
+
+export type ViewMode = 'table' | 'list' | 'cards'
+
+export type SortDirection = 'asc' | 'desc'
+
+export type DataRow = Record<string, unknown> & { id: string; favorite?: boolean }
+
+export interface ExpandColumnConfig {
+  key: string
+  label: string
+  type?: 'score-bar'
+  bold?: boolean
+  muted?: boolean
+}
+
+export interface ColumnConfig {
+  label: string
+  type: CellType
+  sortable?: boolean
+  filterable?: boolean
+  primaryFilter?: boolean
+  visible?: boolean
+  searchable?: boolean
+  hideTablet?: boolean
+  hideMobile?: boolean
+  secondary?: string                                                    // for 'double-text'
+  statusMap?: Record<string, string>                                    // for 'status-badge' - maps value to CSS class
+  currencyField?: string                                                // for 'currency'
+  levelFn?: (value: number) => 'high' | 'medium' | 'low'              // for 'inventory'
+  formatFn?: (value: number) => string                                  // for 'inventory'
+  labelMap?: Record<string, string>                                     // for 'inventory-label'
+  rowLines?: 1 | 2 | 3
+  filterOptions?: string[]
+  filterFn?: (row: DataRow, selectedValue: string) => boolean
+  expandLabel?: string                                                  // for 'expand'
+  expandColumns?: ExpandColumnConfig[]                                  // for 'expand'
+  expandTitleFn?: (row: DataRow) => string                             // for 'expand'
+}
+
+export interface ListLayoutConfig {
+  titleField: string
+  metaFields: string[]
+  badgeFields: string[]
+  valueField: string | null
+  expandField: string | null
+}
+
+export interface CardRowConfig {
+  label: string
+  field: string
+  rendererOverride?: CellType
+}
+
+export interface CardLayoutConfig {
+  titleField: string
+  subtitleField?: string
+  badgeFields: string[]
+  rows: CardRowConfig[]
+  footerField: string | null
+  expandField: string | null
+}
+
+export interface ViewLayoutConfig {
+  list: ListLayoutConfig
+  card: CardLayoutConfig
+}
+
+export interface DomainConfig {
+  key: string
+  label: string
+  resultLabel: string
+  columns: Record<string, ColumnConfig>
+  layout: ViewLayoutConfig
+  data: DataRow[]
+}
+
+export interface DataGridFilters {
+  [columnKey: string]: string[] | null
+}
+
+export interface DataGridState {
+  currentView: ViewMode
+  searchQuery: string
+  filters: DataGridFilters
+  sortColumn: string | null
+  sortDirection: SortDirection
+  expandedRows: Set<string>    // composite key: `${rowId}::${expandKey}`
+  favorites: Set<string>
+  visibleColumns: Set<string>
+  columnOrder: string[]
+  columnWidths: Record<string, number>
+}