@fastnd/components 1.0.28 → 1.0.30

package/dist/examples/data-explorer/domains/projects.ts

@@ -0,0 +1,205 @@
+import type { ColumnsConfig, DomainConfig, DomainLayout, Project } from '../types'
+
+export const PROJECT_COLUMNS: ColumnsConfig<Project> = {
+  favorite: {
+    label: 'Favorit',
+    type: 'favorite',
+    sortable: false,
+    filterable: false,
+    visible: true,
+  },
+  name: {
+    label: 'Projektname',
+    type: 'double-text',
+    sortable: true,
+    filterable: false,
+    visible: true,
+    secondary: 'customer_name',
+    searchable: true,
+  },
+  customer_name: {
+    label: 'Kunde',
+    type: 'link',
+    sortable: true,
+    filterable: true,
+    primaryFilter: true,
+    visible: true,
+    searchable: true,
+  },
+  status: {
+    label: 'Status',
+    type: 'status-badge',
+    sortable: true,
+    filterable: true,
+    primaryFilter: true,
+    visible: true,
+    hideTablet: true,
+    statusMap: {
+      Open: 'active',
+      Won: 'production',
+      Lost: 'eol',
+      Negotiation: 'nrnd',
+      Qualified: 'active',
+    },
+  },
+  expected_closing: {
+    label: 'Closing',
+    type: 'text',
+    sortable: true,
+    filterable: false,
+    visible: true,
+    hideMobile: true,
+  },
+  project_lifetime_quantity: {
+    label: 'Lifetime Qty',
+    type: 'inventory',
+    sortable: true,
+    filterable: true,
+    primaryFilter: true,
+    visible: true,
+    hideMobile: true,
+    levelFn: (v: number) => (v >= 100000 ? 'high' : v >= 10000 ? 'medium' : 'low'),
+    formatFn: (v: number) =>
+      v >= 1000 ? (v / 1000).toFixed(v >= 100000 ? 0 : 1) + 'k' : String(v),
+    labelMap: { high: 'Hoch', medium: 'Mittel', low: 'Gering' },
+    filterOptions: ['Hoch (\u2265 100k)', 'Mittel (10k\u2013100k)', 'Gering (< 10k)'],
+    filterFn: (row: Project, val: string) => {
+      if (val.startsWith('Hoch')) return row.project_lifetime_quantity >= 100000
+      if (val.startsWith('Mittel'))
+        return (
+          row.project_lifetime_quantity >= 10000 && row.project_lifetime_quantity < 100000
+        )
+      return row.project_lifetime_quantity < 10000
+    },
+  },
+}
+
+export const PROJECT_LAYOUT: DomainLayout = {
+  list: {
+    titleField: 'name',
+    metaFields: ['expected_closing'],
+    badgeFields: ['status', 'project_lifetime_quantity'],
+    valueField: null,
+  },
+  card: {
+    titleField: 'name',
+    subtitleField: 'customer_name',
+    badgeFields: ['status'],
+    rows: [
+      { label: 'Closing', field: 'expected_closing' },
+      { label: 'Lifetime Qty', field: 'project_lifetime_quantity', rendererOverride: 'inventory-label' },
+    ],
+    footerField: 'customer_name',
+  },
+}
+
+export const MOCK_PROJECTS: Project[] = [
+  {
+    id: 'pj1',
+    name: 'ADAS Kameramodul Gen3',
+    customer_name: 'Continental AG',
+    status: 'Open',
+    expected_closing: '2025-09-30',
+    project_lifetime_quantity: 250000,
+    favorite: true,
+  },
+  {
+    id: 'pj2',
+    name: 'EV Ladesteuerung 22kW',
+    customer_name: 'Webasto SE',
+    status: 'Won',
+    expected_closing: '2025-03-15',
+    project_lifetime_quantity: 80000,
+    favorite: false,
+  },
+  {
+    id: 'pj3',
+    name: 'Industrie-Gateway IoT Protokollkonverter',
+    customer_name: 'Siemens AG',
+    status: 'Negotiation',
+    expected_closing: '2025-12-01',
+    project_lifetime_quantity: 15000,
+    favorite: false,
+  },
+  {
+    id: 'pj4',
+    name: 'Patientenmonitor V5',
+    customer_name: 'Dräger AG',
+    status: 'Qualified',
+    expected_closing: '2026-02-28',
+    project_lifetime_quantity: 5000,
+    favorite: true,
+  },
+  {
+    id: 'pj5',
+    name: 'Smart Meter Modul',
+    customer_name: 'Landis+Gyr AG',
+    status: 'Open',
+    expected_closing: '2025-11-15',
+    project_lifetime_quantity: 500000,
+    favorite: false,
+  },
+  {
+    id: 'pj6',
+    name: 'Robotersteuerung R200',
+    customer_name: 'KUKA AG',
+    status: 'Won',
+    expected_closing: '2025-01-20',
+    project_lifetime_quantity: 12000,
+    favorite: false,
+  },
+  {
+    id: 'pj7',
+    name: 'BMS 48V Mild-Hybrid Batteriesystem für Nutzfahrzeuge',
+    customer_name: 'ZF Friedrichshafen AG',
+    status: 'Lost',
+    expected_closing: '2025-06-30',
+    project_lifetime_quantity: 180000,
+    favorite: false,
+  },
+  {
+    id: 'pj8',
+    name: 'Sensorknoten Agrar',
+    customer_name: 'CLAAS KGaA',
+    status: 'Open',
+    expected_closing: '2026-03-31',
+    project_lifetime_quantity: 8000,
+    favorite: false,
+  },
+  {
+    id: 'pj9',
+    name: 'Radar-Frontend 77GHz',
+    customer_name: 'Continental AG',
+    status: 'Negotiation',
+    expected_closing: '2025-10-15',
+    project_lifetime_quantity: 320000,
+    favorite: true,
+  },
+  {
+    id: 'pj10',
+    name: 'Wallbox Premium 11kW',
+    customer_name: 'Webasto SE',
+    status: 'Qualified',
+    expected_closing: '2025-08-30',
+    project_lifetime_quantity: 45000,
+    favorite: false,
+  },
+  {
+    id: 'pj11',
+    name: 'Autonomes Fahrzeug-Plattform Generation 4',
+    customer_name: 'BMW Group',
+    status: 'Negotiation',
+    expected_closing: '2027-06-30',
+    project_lifetime_quantity: 1750000,
+    favorite: false,
+  },
+]
+
+export const PROJECTS_CONFIG: DomainConfig<Project> = {
+  key: 'projects',
+  label: 'Projekte',
+  resultLabel: 'Projekten',
+  columns: PROJECT_COLUMNS,
+  layout: PROJECT_LAYOUT,
+  data: MOCK_PROJECTS,
+}

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

@@ -0,0 +1,371 @@
+import { useReducer, useMemo, useCallback } from 'react'
+import type {
+  DataExplorerState,
+  DataExplorerActions,
+  DataExplorerDerived,
+  DomainKey,
+  ViewMode,
+  ColumnDef,
+  DomainConfig,
+} from '../types'
+import { DATA_SOURCES } from '../domains'
+
+// --- Action types ---
+
+type Action =
+  | { type: 'SWITCH_DOMAIN'; domain: DomainKey }
+  | { type: 'SWITCH_VIEW'; mode: ViewMode }
+  | { type: 'TOGGLE_SORT'; column: string }
+  | { type: 'SET_FILTER'; column: string; values: string[] }
+  | { type: 'TOGGLE_FILTER_OPTION'; column: string; value: string }
+  | { type: 'CLEAR_FILTER'; column: string }
+  | { type: 'RESET_ALL_FILTERS' }
+  | { type: 'RESET_SECONDARY_FILTERS' }
+  | { type: 'SET_SEARCH_TERM'; term: string }
+  | { type: 'TOGGLE_EXPAND'; rowId: string }
+  | { type: 'TOGGLE_FAVORITE'; rowId: string }
+  | { type: 'TOGGLE_COLUMN_VISIBILITY'; column: string }
+  | { type: 'REORDER_COLUMNS'; newOrder: string[] }
+  | { type: 'SET_CURRENT_PAGE'; page: number }
+  | { type: 'SET_PAGE_SIZE'; size: number }
+
+// --- Helpers ---
+
+function initDomainState(domain: DomainKey): DataExplorerState {
+  const source = DATA_SOURCES[domain]
+  const columns = source.columns
+  const columnOrder = Object.keys(columns)
+  const columnVisibility: Record<string, boolean> = {}
+  for (const [key, col] of Object.entries(columns)) {
+    columnVisibility[key] = col.visible !== false
+  }
+  const favorites = new Set<string>()
+  for (const row of source.data) {
+    const r = row as Record<string, unknown>
+    if (r.favorite) favorites.add(r.id as string)
+  }
+  return {
+    activeDomain: domain,
+    viewMode: 'table',
+    sortColumn: null,
+    sortDirection: 'asc',
+    filters: {},
+    searchTerm: '',
+    columnOrder,
+    columnVisibility,
+    expandedRows: new Set(),
+    favorites,
+    currentPage: 1,
+    pageSize: 25,
+  }
+}
+
+function reducer(state: DataExplorerState, action: Action): DataExplorerState {
+  switch (action.type) {
+    case 'SWITCH_DOMAIN': {
+      const newState = initDomainState(action.domain)
+      newState.viewMode = state.viewMode
+      return newState
+    }
+
+    case 'SWITCH_VIEW':
+      return { ...state, viewMode: action.mode }
+
+    case 'TOGGLE_SORT': {
+      if (state.sortColumn === action.column) {
+        if (state.sortDirection === 'asc') {
+          return { ...state, sortDirection: 'desc', currentPage: 1 }
+        }
+        return { ...state, sortColumn: null, sortDirection: 'asc', currentPage: 1 }
+      }
+      return { ...state, sortColumn: action.column, sortDirection: 'asc', currentPage: 1 }
+    }
+
+    case 'SET_FILTER':
+      return {
+        ...state,
+        filters: { ...state.filters, [action.column]: action.values },
+        currentPage: 1,
+      }
+
+    case 'TOGGLE_FILTER_OPTION': {
+      const current = state.filters[action.column] ?? []
+      const has = current.includes(action.value)
+      const next = has
+        ? current.filter((v) => v !== action.value)
+        : [...current, action.value]
+      return {
+        ...state,
+        filters: { ...state.filters, [action.column]: next },
+        currentPage: 1,
+      }
+    }
+
+    case 'CLEAR_FILTER': {
+      const { [action.column]: _, ...rest } = state.filters
+      return { ...state, filters: rest, currentPage: 1 }
+    }
+
+    case 'RESET_ALL_FILTERS':
+      return { ...state, filters: {}, searchTerm: '', currentPage: 1 }
+
+    case 'RESET_SECONDARY_FILTERS': {
+      const source = DATA_SOURCES[state.activeDomain]
+      const cols = source.columns
+      const primaryKeys = new Set(
+        Object.entries(cols)
+          .filter(([, c]) => c.primaryFilter)
+          .map(([k]) => k),
+      )
+      const newFilters: Record<string, string[]> = {}
+      for (const [key, values] of Object.entries(state.filters)) {
+        if (primaryKeys.has(key)) newFilters[key] = values
+      }
+      return { ...state, filters: newFilters, currentPage: 1 }
+    }
+
+    case 'SET_SEARCH_TERM':
+      return { ...state, searchTerm: action.term, currentPage: 1 }
+
+    case 'TOGGLE_EXPAND': {
+      const next = new Set(state.expandedRows)
+      if (next.has(action.rowId)) next.delete(action.rowId)
+      else next.add(action.rowId)
+      return { ...state, expandedRows: next }
+    }
+
+    case 'TOGGLE_FAVORITE': {
+      const next = new Set(state.favorites)
+      if (next.has(action.rowId)) next.delete(action.rowId)
+      else next.add(action.rowId)
+      return { ...state, favorites: next }
+    }
+
+    case 'TOGGLE_COLUMN_VISIBILITY':
+      return {
+        ...state,
+        columnVisibility: {
+          ...state.columnVisibility,
+          [action.column]: !state.columnVisibility[action.column],
+        },
+      }
+
+    case 'REORDER_COLUMNS':
+      return { ...state, columnOrder: action.newOrder }
+
+    case 'SET_CURRENT_PAGE':
+      return { ...state, currentPage: action.page }
+
+    case 'SET_PAGE_SIZE':
+      return { ...state, pageSize: action.size, currentPage: 1 }
+  }
+}
+
+// --- Hook ---
+
+export interface UseDataExplorerReturn {
+  state: DataExplorerState
+  derived: DataExplorerDerived
+  actions: DataExplorerActions
+}
+
+export function useDataExplorerState(
+  initialDomain: DomainKey = 'products',
+): UseDataExplorerReturn {
+  const [state, dispatch] = useReducer(reducer, initialDomain, initDomainState)
+
+  const domainConfig = useMemo<DomainConfig>(
+    () => DATA_SOURCES[state.activeDomain],
+    [state.activeDomain],
+  )
+
+  const visibleColumns = useMemo(
+    () =>
+      state.columnOrder.filter(
+        (k) => state.columnVisibility[k] && domainConfig.columns[k],
+      ),
+    [state.columnOrder, state.columnVisibility, domainConfig],
+  )
+
+  const filteredData = useMemo(() => {
+    const columns = domainConfig.columns
+    const term = state.searchTerm.toLowerCase()
+
+    return domainConfig.data.filter((row) => {
+      const r = row as Record<string, unknown>
+
+      // Search filter
+      if (term) {
+        let matchesSearch = false
+        for (const [key, col] of Object.entries(columns)) {
+          if (!col.searchable) continue
+          const v = r[key]
+          if (v != null && String(v).toLowerCase().includes(term)) {
+            matchesSearch = true
+            break
+          }
+          if (col.secondary) {
+            const sv = r[col.secondary]
+            if (sv != null && String(sv).toLowerCase().includes(term)) {
+              matchesSearch = true
+              break
+            }
+          }
+        }
+        if (!matchesSearch) return false
+      }
+
+      // Column filters
+      for (const [colKey, selected] of Object.entries(state.filters)) {
+        if (!selected || selected.length === 0) continue
+        const col = columns[colKey]
+        if (!col) continue
+        if (col.filterFn) {
+          const match = selected.some((val) =>
+            (col.filterFn as (row: Record<string, unknown>, val: string) => boolean)(r, val),
+          )
+          if (!match) return false
+        } else {
+          const val = String(r[colKey] ?? '')
+          if (!selected.includes(val)) return false
+        }
+      }
+
+      return true
+    })
+  }, [domainConfig, state.searchTerm, state.filters])
+
+  const sortedData = useMemo(() => {
+    const data = [...filteredData]
+    if (!state.sortColumn) return data
+    const col = domainConfig.columns[state.sortColumn]
+    if (!col) return data
+    const key = state.sortColumn
+    const dir = state.sortDirection === 'asc' ? 1 : -1
+    data.sort((a, b) => {
+      const ra = a as Record<string, unknown>
+      const rb = b as Record<string, unknown>
+      let va = ra[key] as string | number | null | undefined
+      let vb = rb[key] as string | number | null | undefined
+      if (va == null) va = ''
+      if (vb == null) vb = ''
+      if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir
+      return String(va).localeCompare(String(vb), 'de') * dir
+    })
+    return data
+  }, [filteredData, state.sortColumn, state.sortDirection, domainConfig])
+
+  const totalFiltered = filteredData.length
+
+  const totalPages = useMemo(
+    () => Math.max(1, Math.ceil(totalFiltered / state.pageSize)),
+    [totalFiltered, state.pageSize],
+  )
+
+  const paginatedData = useMemo(() => {
+    const start = (state.currentPage - 1) * state.pageSize
+    return sortedData.slice(start, start + state.pageSize)
+  }, [sortedData, state.currentPage, state.pageSize])
+
+  const hasActiveFilters = useMemo(() => {
+    if (state.searchTerm) return true
+    return Object.values(state.filters).some((v) => v && v.length > 0)
+  }, [state.searchTerm, state.filters])
+
+  const totalActiveFilterCount = useMemo(() => {
+    let count = 0
+    for (const v of Object.values(state.filters)) {
+      if (v) count += v.length
+    }
+    return count
+  }, [state.filters])
+
+  const primaryFilterColumns = useMemo<[string, ColumnDef][]>(
+    () =>
+      Object.entries(domainConfig.columns).filter(
+        ([, c]) => c.filterable && c.primaryFilter,
+      ) as [string, ColumnDef][],
+    [domainConfig],
+  )
+
+  const secondaryFilterColumns = useMemo<[string, ColumnDef][]>(
+    () =>
+      Object.entries(domainConfig.columns).filter(
+        ([, c]) => c.filterable && !c.primaryFilter,
+      ) as [string, ColumnDef][],
+    [domainConfig],
+  )
+
+  const getFilterOptions = useCallback(
+    (columnKey: string): string[] => {
+      const col = domainConfig.columns[columnKey]
+      if (!col) return []
+      if (col.filterOptions) return col.filterOptions
+      const vals = new Set<string>()
+      for (const row of domainConfig.data) {
+        const v = (row as Record<string, unknown>)[columnKey]
+        if (v != null && v !== '') vals.add(String(v))
+      }
+      return [...vals].sort((a, b) => a.localeCompare(b, 'de'))
+    },
+    [domainConfig],
+  )
+
+  // --- Actions ---
+
+  const actions = useMemo<DataExplorerActions>(
+    () => ({
+      switchDomain: (domain) => dispatch({ type: 'SWITCH_DOMAIN', domain }),
+      switchView: (mode) => dispatch({ type: 'SWITCH_VIEW', mode }),
+      toggleSort: (column) => dispatch({ type: 'TOGGLE_SORT', column }),
+      setFilter: (column, values) => dispatch({ type: 'SET_FILTER', column, values }),
+      toggleFilterOption: (column, value) =>
+        dispatch({ type: 'TOGGLE_FILTER_OPTION', column, value }),
+      clearFilter: (column) => dispatch({ type: 'CLEAR_FILTER', column }),
+      resetAllFilters: () => dispatch({ type: 'RESET_ALL_FILTERS' }),
+      resetSecondaryFilters: () => dispatch({ type: 'RESET_SECONDARY_FILTERS' }),
+      setSearchTerm: (term) => dispatch({ type: 'SET_SEARCH_TERM', term }),
+      toggleExpand: (rowId) => dispatch({ type: 'TOGGLE_EXPAND', rowId }),
+      toggleFavorite: (rowId) => dispatch({ type: 'TOGGLE_FAVORITE', rowId }),
+      toggleColumnVisibility: (column) =>
+        dispatch({ type: 'TOGGLE_COLUMN_VISIBILITY', column }),
+      reorderColumns: (newOrder) => dispatch({ type: 'REORDER_COLUMNS', newOrder }),
+      setCurrentPage: (page) => dispatch({ type: 'SET_CURRENT_PAGE', page }),
+      setPageSize: (size) => dispatch({ type: 'SET_PAGE_SIZE', size }),
+    }),
+    [],
+  )
+
+  const derived = useMemo<DataExplorerDerived>(
+    () => ({
+      domainConfig,
+      visibleColumns,
+      filteredData: filteredData as Record<string, unknown>[],
+      sortedData: sortedData as Record<string, unknown>[],
+      paginatedData: paginatedData as Record<string, unknown>[],
+      totalFiltered,
+      totalPages,
+      hasActiveFilters,
+      totalActiveFilterCount,
+      primaryFilterColumns,
+      secondaryFilterColumns,
+      getFilterOptions,
+    }),
+    [
+      domainConfig,
+      visibleColumns,
+      filteredData,
+      sortedData,
+      paginatedData,
+      totalFiltered,
+      totalPages,
+      hasActiveFilters,
+      totalActiveFilterCount,
+      primaryFilterColumns,
+      secondaryFilterColumns,
+      getFilterOptions,
+    ],
+  )
+
+  return { state, derived, actions }
+}

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

@@ -0,0 +1,3 @@
+export { DataExplorerPage } from './DataExplorerPage/DataExplorerPage'
+export type { DomainKey, ViewMode, DataExplorerState } from './types'
+export { useDataExplorerState } from './hooks/use-data-explorer-state'