@maestro-js/agent-skills 1.0.0-alpha.2 → 1.0.0-alpha.21

package/skills/maestro-examples/references/cadence/cadence-web/app/components/table/headless-templated-row-table.ts

@@ -0,0 +1,553 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add table --directory app
+
+import { matchSorter, type MatchSorterOptions } from 'match-sorter'
+
+export declare namespace HeadlessTemplatedRowTable {
+  type RowData = Record<string, any>
+
+  type Feature<
+    TData extends RowData,
+    FeatureState extends Record<string, any>,
+    FeatureOptions extends Record<string, any>,
+    FeatureExtras extends Record<string, any>
+  > = (<
+    TableState extends Record<string, any>,
+    TableOptions extends Record<string, any>,
+    TableExtras extends Record<string, any>
+  >(
+    table: Table<TData, TableState, TableOptions, TableExtras>
+  ) => void) & {
+    ['~feature']: {
+      state: FeatureState
+      options: FeatureOptions
+      extras: FeatureExtras
+    }
+  }
+
+  type FeatureBase<TData extends RowData> = Feature<TData, {}, {}, {}>
+
+  type ExtractFeatureChanges<F extends FeatureBase<RowData>> =
+    F extends Feature<infer FTData, infer FState, infer FOptions, infer FExtras>
+      ? {
+          TData: FTData
+          State: FState
+          Options: FOptions
+          Extras: FExtras
+        }
+      : never
+
+  type ExtractAllFeatureChanges<Features extends FeatureBase<RowData>[]> = Features extends [
+    infer F extends FeatureBase<RowData>,
+    ...infer Rest extends FeatureBase<RowData>[]
+  ]
+    ? ExtractFeatureChanges<F> & ExtractAllFeatureChanges<Rest>
+    : {
+        TData: RowData
+        State: {}
+        Options: {}
+        Extras: {}
+      }
+
+  type ApplyFeature<T extends TableBase<RowData>, F extends FeatureBase<RowData>> =
+    T extends Table<infer TData, infer State, infer Options, infer Extras>
+      ? F extends Feature<infer FTData, infer FState, infer FOptions, infer FExtras>
+        ? Table<TData & FTData, State & FState, Options & FOptions, Extras & FExtras>
+        : never
+      : never
+
+  type ApplyFeatures<T extends TableBase<RowData>, Features extends FeatureBase<RowData>[]> = Features extends [
+    infer F extends FeatureBase<RowData>,
+    ...infer Rest extends FeatureBase<RowData>[]
+  ]
+    ? ApplyFeatures<ApplyFeature<T, F>, Rest>
+    : T
+
+  type TableOptions<TData extends RowData, Features extends FeatureBase<TData>[]> = {
+    rows: TData[]
+    features: [...Features]
+    initialState?: Partial<ExtractAllFeatureChanges<Features>['State']>
+    state?: Partial<ExtractAllFeatureChanges<Features>['State']>
+  } & ExtractAllFeatureChanges<Features>['Options']
+
+  type Table<
+    TData extends RowData,
+    State extends Record<string, any>,
+    Options extends Record<string, any>,
+    Extras extends Record<string, any>
+  > = {
+    getRows(): TData[]
+    setRows(rows: TData[]): void
+    getOptions(): Options & { state?: Partial<State>; initialState?: Partial<State> }
+    setOptions(options: Options): void
+    state: State
+    setState(update: State | ((previous: State) => State)): void
+    subscribe: (onStoreChange: () => void) => () => void
+  } & Extras
+
+  type TableBase<TData extends RowData> = Table<TData, {}, {}, {}>
+
+  type ReactTable<
+    TData extends RowData,
+    Features extends FeatureBase<TData>[] = []
+  > = HeadlessTemplatedRowTable.ApplyFeatures<HeadlessTemplatedRowTable.TableBase<TData>, Features>
+
+  type FilterPredicate<
+    TData extends RowData,
+    Name extends string = string,
+    Value = Name extends keyof TData ? TData[Name] : any
+  > = (row: TData, value: Value, name: string) => boolean
+
+  type FilterConfig<TData extends RowData, FC extends Record<string, any> = Record<string, any>> = {
+    [K in keyof FC & string]: FilterPredicate<TData, K>
+  }
+
+  type ExtractFilterValue<C extends FilterPredicate<any, any, any>> = Parameters<C>[1]
+
+  type FilterState<TData extends RowData, Config extends FilterConfig<TData>> = {
+    [key in keyof Config]: ExtractFilterValue<Config[key]> | null | undefined
+  }
+
+  type SortComparator<TData extends RowData, Name extends string = string> = (
+    row1: TData,
+    row2: TData,
+    name: string
+  ) => number
+
+  type SortConfig<TData extends RowData, SC extends Record<string, any> = Record<string, any>> = {
+    [K in keyof SC & string]: SortComparator<TData, K>
+  }
+
+  type SortState<Config extends Record<string, SortComparator<any, any>>> = (keyof Config & string) | null
+
+  type PaginationState = { limit: number; skip: number }
+
+  type FilterFeature<TData extends RowData, Config extends FilterConfig<TData>> = Feature<
+    TData,
+    { filters: FilterState<TData, Config> },
+    {
+      manualFiltering?: boolean
+      onFiltersChange?: (
+        val: FilterState<TData, Config> | ((prev: FilterState<TData, Config>) => FilterState<TData, Config>)
+      ) => void
+    },
+    {
+      getFilterConfig(): { [key in keyof Config]: ExtractFilterValue<Config[key]> }
+      setFilters: (
+        val: FilterState<TData, Config> | ((prev: FilterState<TData, Config>) => FilterState<TData, Config>)
+      ) => void
+    }
+  >
+
+  type SearchFeature<TData extends RowData> = Feature<
+    TData,
+    { search: string },
+    {
+      manualSearch?: boolean
+      onSearchChange?: (val: string | ((prev: string) => string)) => void
+    },
+    {
+      setSearch: (val: string | ((prev: string) => string)) => void
+    }
+  >
+
+  type SortFeature<TData extends RowData, Config extends SortConfig<TData>> = Feature<
+    TData,
+    { sort: SortState<Config> },
+    {
+      manualSort?: boolean
+      onSortChange?: (val: SortState<Config> | ((prev: SortState<Config>) => SortState<Config>)) => void
+    },
+    {
+      getSortConfig(): { [key in keyof Config]: null }
+      setSort: (val: SortState<Config> | ((prev: SortState<Config>) => SortState<Config>)) => void
+    }
+  >
+
+  type PaginationFeature<TData extends RowData> = Feature<
+    TData,
+    { pagination: PaginationState },
+    {
+      manualPagination?: boolean
+      onPaginationChange?: (val: PaginationState | ((prev: PaginationState) => PaginationState)) => void
+    },
+    {
+      setPagination: (val: PaginationState | ((prev: PaginationState) => PaginationState)) => void
+      getPrePaginationRows(): TData[]
+    }
+  >
+
+  type RowSelectionFeature<TData extends RowData> = Feature<
+    TData,
+    { rowSelection: Set<string> },
+    {
+      onRowSelectionChange?: (val: Set<string>) => void
+    },
+    {
+      toggleRowSelection: (row: TData) => void
+      toggleAllRowSelection: () => void
+      isRowSelected: (row: TData) => boolean
+      clearRowSelection: () => void
+    }
+  >
+
+  type RowCountFeature<TData extends RowData> = Feature<TData, {}, { rowCount?: number }, { getRowCount(): number }>
+}
+
+export const HeadlessTemplatedRowTable = {
+  createTable,
+  filtering,
+  search,
+  sort,
+  pagination,
+  rowSelection,
+  rowCount
+}
+
+// ============================================================
+// createTable
+// ============================================================
+
+function createTable<
+  TData extends HeadlessTemplatedRowTable.RowData,
+  Features extends HeadlessTemplatedRowTable.FeatureBase<TData>[]
+>(
+  initialState: HeadlessTemplatedRowTable.TableOptions<TData, Features>
+): HeadlessTemplatedRowTable.ApplyFeatures<HeadlessTemplatedRowTable.TableBase<TData>, Features> {
+  let rows = initialState.rows
+  let { rows: _rows, features: _features, ...options } = initialState
+
+  const getRows = () => rows
+  const getOptions = () => options
+
+  function setRows(updatedRows: TData[]) {
+    if (rows !== updatedRows) {
+      rows = updatedRows
+    }
+  }
+  function setOptions(updatedOptions: Omit<HeadlessTemplatedRowTable.TableOptions<TData, Features>, 'rows' | 'features'>) {
+    options = { ...options, ...updatedOptions }
+    if (updatedOptions.state) {
+      table.state = { ...table.state, ...updatedOptions.state }
+    }
+    subscription.notify()
+  }
+
+  const subscription = createSubscription()
+  let flushing = false
+  let pendingNotify = false
+
+  function setState<S>(val: S | ((previous: S) => S)) {
+    if (typeof val === 'function') {
+      // @ts-expect-error
+      table.state = val(table.state)
+    } else {
+      // @ts-expect-error
+      table.state = val
+    }
+    if (flushing) {
+      pendingNotify = true
+      return
+    }
+    flushing = true
+    subscription.notify()
+    let flushCount = 0
+    while (pendingNotify) {
+      if (++flushCount > 100) {
+        console.warn('Table setState: exceeded 100 flush iterations — possible infinite notification loop')
+        pendingNotify = false
+        break
+      }
+      pendingNotify = false
+      subscription.notify()
+    }
+
+    flushing = false
+  }
+
+  const table: HeadlessTemplatedRowTable.TableBase<TData> = {
+    getRows,
+    setRows,
+    getOptions,
+    setOptions,
+    state: {},
+    setState,
+    subscribe: subscription.subscribe
+  }
+
+  initialState.features.forEach((feature) => feature(table))
+
+  // @ts-expect-error
+  return table
+}
+
+// ============================================================
+// Client Filtering
+// ============================================================
+
+type FilterFeature<
+  TData extends HeadlessTemplatedRowTable.RowData,
+  Config extends HeadlessTemplatedRowTable.FilterConfig<TData>
+> = HeadlessTemplatedRowTable.FilterFeature<TData, Config>
+
+function filtering<
+  TData extends HeadlessTemplatedRowTable.RowData,
+  Config extends HeadlessTemplatedRowTable.FilterConfig<TData>
+>(filterConfig: Config): FilterFeature<TData, Config> {
+  const filterKeys = Object.keys(filterConfig) as (keyof Config extends string ? keyof Config : never)[]
+  const defaultFilterState = Object.fromEntries(filterKeys.map((key) => [key, null]))
+  const tableFilterConfig = defaultFilterState as { [key in keyof Config]: null }
+
+  return defineFeature<TData, FilterFeature<TData, Config>>((table) => {
+    table.state.filters = {
+      ...defaultFilterState,
+      ...table.getOptions().initialState?.['filters']
+    } as HeadlessTemplatedRowTable.FilterState<TData, Config>
+
+    const prevGetFilterConfig = table['getFilterConfig']
+    table.getFilterConfig = () => ({ ...(prevGetFilterConfig?.() ?? {}), ...tableFilterConfig })
+
+    table.setFilters = (val) => {
+      const onFiltersChange = table.getOptions().onFiltersChange
+      if (onFiltersChange) onFiltersChange(val)
+      else
+        table.setState((prev) => ({
+          ...prev,
+          filters: typeof val === 'function' ? val(prev.filters) : val
+        }))
+    }
+
+    const applyFilters = memo((rows: TData[], filters: HeadlessTemplatedRowTable.FilterState<TData, Config>) =>
+      rows.filter((row) =>
+        filterKeys.every((f) => {
+          const value = filters[f]
+          if (value == null) return true
+          return filterConfig[f]!(row, value, f)
+        })
+      )
+    )
+
+    const originalGetRows = table.getRows
+    table.getRows = () => {
+      if (table.getOptions().manualFiltering) return originalGetRows()
+      return applyFilters(originalGetRows(), table.state.filters)
+    }
+  })
+}
+
+// ============================================================
+// Client Search
+// ============================================================
+
+type SearchFeature<TData extends HeadlessTemplatedRowTable.RowData> = HeadlessTemplatedRowTable.SearchFeature<TData>
+
+function search<TData extends HeadlessTemplatedRowTable.RowData>(options: MatchSorterOptions<TData>): SearchFeature<TData> {
+  return defineFeature<TData, SearchFeature<TData>>((table) => {
+    const applySearch = memo((rows: TData[], query: string) => {
+      return query ? query.split(' ').reduce((results, term) => matchSorter(results, term, options), rows) : rows
+    })
+
+    table.state.search = (table.getOptions().initialState?.['search'] as string) ?? ''
+
+    table.setSearch = (val) => {
+      const onSearchChange = table.getOptions().onSearchChange
+      if (onSearchChange) onSearchChange(val)
+      else table.setState((prev) => ({ ...prev, search: typeof val === 'function' ? val(prev.search) : val }))
+    }
+
+    const originalGetRows = table.getRows
+    table.getRows = () => {
+      if (table.getOptions().manualSearch) return originalGetRows()
+      return applySearch(originalGetRows(), table.state.search)
+    }
+  })
+}
+
+// ============================================================
+// Client Sort
+// ============================================================
+
+type SortFeature<
+  TData extends HeadlessTemplatedRowTable.RowData,
+  Config extends HeadlessTemplatedRowTable.SortConfig<TData>
+> = HeadlessTemplatedRowTable.SortFeature<TData, Config>
+
+function sort<TData extends HeadlessTemplatedRowTable.RowData, Config extends HeadlessTemplatedRowTable.SortConfig<TData>>(
+  config: Config,
+  defaultSort?: HeadlessTemplatedRowTable.SortState<Config>
+): SortFeature<TData, Config> {
+  const tableSortConfig = Object.fromEntries(Object.keys(config).map((f) => [f, null])) as {
+    [key in keyof Config]: null
+  }
+
+  return defineFeature<TData, SortFeature<TData, Config>>((table) => {
+    table.state.sort =
+      (table.getOptions().initialState?.['sort'] as HeadlessTemplatedRowTable.SortState<Config>) ?? defaultSort ?? null
+
+    const prevGetSortConfig = table['getSortConfig']
+    table.getSortConfig = () => ({ ...(prevGetSortConfig?.() ?? {}), ...tableSortConfig })
+
+    table.setSort = (val) => {
+      const onSortChange = table.getOptions().onSortChange
+      if (onSortChange) onSortChange(val)
+      else table.setState((prev) => ({ ...prev, sort: typeof val === 'function' ? val(prev.sort) : val }))
+    }
+
+    const applySort = memo((rows: TData[], sort: HeadlessTemplatedRowTable.SortState<Config>) =>
+      sort && config[sort] ? [...rows].sort((a, b) => config[sort]!(a, b, sort)) : rows
+    )
+
+    const originalGetRows = table.getRows
+    table.getRows = () => {
+      if (table.getOptions().manualSort) return originalGetRows()
+      return applySort(originalGetRows(), table.state.sort)
+    }
+  })
+}
+
+// ============================================================
+// Client Pagination
+// ============================================================
+
+type PaginationFeature<TData extends HeadlessTemplatedRowTable.RowData> = HeadlessTemplatedRowTable.PaginationFeature<TData>
+
+function pagination<TData extends HeadlessTemplatedRowTable.RowData>(defaultLimit: number): PaginationFeature<TData> {
+  return defineFeature<TData, PaginationFeature<TData>>((table) => {
+    table.state.pagination = (table.getOptions().initialState?.[
+      'pagination'
+    ] as HeadlessTemplatedRowTable.PaginationState) ?? {
+      limit: defaultLimit,
+      skip: 0
+    }
+
+    table.setPagination = (val) => {
+      const onPaginationChange = table.getOptions().onPaginationChange
+      if (onPaginationChange) onPaginationChange(val)
+      else table.setState((prev) => ({ ...prev, pagination: typeof val === 'function' ? val(prev.pagination) : val }))
+    }
+
+    const originalGetRows = table.getRows
+    table.getPrePaginationRows = originalGetRows
+    table.getRows = () => {
+      if (table.getOptions().manualPagination) return originalGetRows()
+      const { skip, limit } = table.state.pagination
+      return originalGetRows().slice(skip, skip + limit)
+    }
+  })
+}
+
+// ============================================================
+// Client Row Selection
+// ============================================================
+
+type RowSelectionFeature<TData extends HeadlessTemplatedRowTable.RowData> =
+  HeadlessTemplatedRowTable.RowSelectionFeature<TData>
+
+function rowSelection<TData extends HeadlessTemplatedRowTable.RowData>(
+  getRowId: (row: TData) => string
+): RowSelectionFeature<TData> {
+  return defineFeature<TData, RowSelectionFeature<TData>>((table) => {
+    table.state.rowSelection = (table.getOptions().initialState?.['rowSelection'] as Set<string>) ?? new Set<string>()
+
+    const getSelection = () => table.state.rowSelection
+    const setSelection = (next: Set<string>) => {
+      const onRowSelectionChange = table.getOptions().onRowSelectionChange
+      if (onRowSelectionChange) onRowSelectionChange(next)
+      else table.setState((prev) => ({ ...prev, rowSelection: next }))
+    }
+
+    table.toggleRowSelection = (row: TData) => {
+      const id = getRowId(row)
+      const next = new Set(getSelection())
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      setSelection(next)
+    }
+
+    table.toggleAllRowSelection = () => {
+      const rows = table.getRows()
+      const rowIds = new Set(rows.map(getRowId))
+      const allSelected = rowIds.size > 0 && [...rowIds].every((id) => getSelection().has(id))
+      setSelection(allSelected ? new Set<string>() : rowIds)
+    }
+
+    table.isRowSelected = (row: TData) => {
+      return getSelection().has(getRowId(row))
+    }
+
+    table.clearRowSelection = () => {
+      setSelection(new Set<string>())
+    }
+  })
+}
+
+// ============================================================
+// Row Count
+// ============================================================
+
+type RowCountFeature<TData extends HeadlessTemplatedRowTable.RowData> = HeadlessTemplatedRowTable.RowCountFeature<TData>
+
+function rowCount<TData extends HeadlessTemplatedRowTable.RowData>(): RowCountFeature<TData> {
+  return defineFeature<TData, RowCountFeature<TData>>((table) => {
+    table.getRowCount = () => {
+      return (
+        table.getOptions().rowCount ??
+        ('getPrePaginationRows' in table ? table.getPrePaginationRows().length : table.getRows().length)
+      )
+    }
+  })
+}
+
+// ============================================================
+// Helpers
+// ============================================================
+
+function memo<TArgs extends any[], TResult>(fn: (...args: TArgs) => TResult): (...args: TArgs) => TResult {
+  let lastArgs: TArgs | undefined
+  let lastResult: TResult
+
+  return (...args: TArgs) => {
+    if (lastArgs && args.length === lastArgs.length && args.every((arg, i) => arg === lastArgs![i])) {
+      return lastResult
+    }
+    lastArgs = args
+    lastResult = fn(...args)
+    return lastResult
+  }
+}
+
+function createSubscription(callback?: () => void) {
+  type Subscriber = () => void
+  const subscribers = new Set<Subscriber>(callback ? [callback] : [])
+  function subscribe(onStoreChange: () => void) {
+    subscribers.add(onStoreChange)
+    function unsubscribe() {
+      subscribers.delete(onStoreChange)
+    }
+
+    return unsubscribe
+  }
+  function notify() {
+    subscribers.forEach((s) => s())
+  }
+  return { subscribe, notify }
+}
+
+function defineFeature<
+  TData extends HeadlessTemplatedRowTable.RowData,
+  F extends HeadlessTemplatedRowTable.Feature<TData, {}, {}, {}>
+>(
+  callback: <
+    TableState extends Record<string, any>,
+    TableOptions extends Record<string, any>,
+    TableExtras extends Record<string, any>
+  >(
+    table: HeadlessTemplatedRowTable.ApplyFeature<
+      HeadlessTemplatedRowTable.Table<TData, TableState, TableOptions, TableExtras>,
+      F
+    >
+  ) => void
+): F {
+  // @ts-expect-error
+  return (table) => callback(table)
+}

package/skills/maestro-examples/references/cadence/cadence-web/app/components/table/index.tsx

@@ -0,0 +1,44 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add table --directory app
+
+import { createServerTable } from './server-table'
+import { TableContainer } from './table-container'
+import { TableSelectFilter } from './table-filters/select-filter'
+import { TableSelectSort } from './table-filters/sort'
+import {
+  TableBody,
+  TableCell,
+  TableDescription,
+  TableFooter,
+  TableMain,
+  TableRow,
+  TableTitle,
+  TableTitleLink
+} from './table-primitives'
+import { TableActions, TableHeader, TableSearch } from './table-toolbar'
+import { TableActionButton, TableMenu, TableSelectionActions, TableSelectionAction } from './table-actions'
+import { useClientTable } from './use-client-table'
+import { useServerTable } from './use-server-table'
+
+export const Table = Object.assign(TableContainer, {
+  useClientTable,
+  useServerTable,
+  createServerTable,
+  Main: TableMain,
+  Search: TableSearch,
+  Body: TableBody,
+  Row: TableRow,
+  Cell: TableCell,
+  Header: TableHeader,
+  Footer: TableFooter,
+  Title: TableTitle,
+  TitleLink: TableTitleLink,
+  Description: TableDescription,
+  SelectFilter: TableSelectFilter,
+  SelectSort: TableSelectSort,
+  ActionButton: TableActionButton,
+  Menu: TableMenu,
+  SelectionActions: TableSelectionActions,
+  SelectionAction: TableSelectionAction,
+  Actions: TableActions
+})