feat: Standalone reusable FilterPanel component with declarative FilterEditor children

[Copilot]

Extracts the filter UI from PivotViewer into a generic, standalone FilterPanel component that can be used independently of any data viewer.

Added

• Source/Filter/ module: standalone FilterPanel, FilterEditor, RangeHistogramFilter, useFilterState hook, and full TypeScript type definitions (FilterDefinition, FilterEditorProps, FilterEditorSlotProps, FilterValues, RangeValues, CustomFilterValues) (#102)
• FilterEditor slot component — declares a custom editor for a specific filter group as a declarative child of <FilterPanel>; value tracked separately in customValues (#102)
• type: 'custom' filter type as an explicit opt-in for fully custom filter editors (#102)
• 5 Storybook stories for FilterPanel: single-select, multi-select, numeric range/histogram, custom editor, and mixed filter types (#102)
• ./Filter subpath export in package.json for direct imports via @cratis/components/Filter (#102)
• Documentation/Filter/index.md — full API reference covering all exported types, FilterPanel props, FilterEditor props, useFilterState hook, and usage examples for every filter type (#102)
• BDD specs in Source/Filter/for_useFilterState/ covering buildFilterValues and buildRangeValues — 9 tests across 4 spec files (#102)
• Source/Filter/utils.ts exporting buildFilterValues and buildRangeValues as pure, testable utility functions (#102)

Changed

• FilterPanel accepts children?: ReactNode — uses React.Children + isValidElement to discover <FilterEditor> slots and render them in the matching filter group (#102)
• PivotViewer/components/FilterPanel.tsx is now a thin adapter: converts PivotFilter<TItem>[] + computed options into FilterDefinition[], generates <FilterEditor> children from any PivotFilter.renderEditor, and delegates all rendering to the new standalone component — no breaking changes to the public API (#102)
• PivotFilter<TItem> retains renderEditor? and type: 'custom' so PivotViewer consumers can inject custom filter editors without any workarounds (#102)
• Source/Filter/useFilterState.ts now imports buildFilterValues and buildRangeValues from ./utils (#102)
• Documentation/toc.yml updated with Filter entries in both the Storybook section and Common Components section (#102)
• eslint.config.mjs — added argsIgnorePattern: '^_' to the @typescript-eslint/no-unused-vars rule to honour the _-prefix convention for intentionally unused parameters (#102)

Fixed

• Storybook static build (storybook build) now completes successfully — fixed a pre-existing [lightningcss minify] Invalid empty selector crash by adding cssMinify: false to the viteFinal config in Source/.storybook/main.ts (#102)
• CI build failure caused by ESLint flagging _props in FilterEditor.tsx as unused — resolved by adding argsIgnorePattern: '^_' to the ESLint rule config (#102)

Usage — custom editor in standalone context:

import { FilterPanel, FilterEditor, useFilterState } from '@cratis/components/Filter';

const filters: FilterDefinition[] = [
  { key: 'score', label: 'Score', type: 'custom' },
];

function MyView() {
  const state = useFilterState(filters);
  const buttonRef = useRef<HTMLButtonElement>(null);
  return (
    <>
      <button ref={buttonRef}>Filters</button>
      <FilterPanel
        isOpen={open}
        filters={filters}
        anchorRef={buttonRef}
        customValues={state.customValues}
        onCustomValueChange={state.handleCustomValueChange}
        onFilterToggle={state.handleToggleFilter}
        onFilterClear={state.handleClearFilter}
        onRangeChange={state.handleRangeChange}
        onExpandedFilterChange={state.setExpandedFilterKey}
        onClose={() => setOpen(false)}
        {...state}
      >
        <FilterEditor filterKey="score">
          {({ value, onChange }) => (
            <MySlider value={value as number} onChange={onChange} />
          )}
        </FilterEditor>
      </FilterPanel>
    </>
  );
}

[einari]

@copilot We're going to need documentation and specs and screenshots from the Storybook stories in the PR comments to verify if its ok

[Copilot]

@copilot We're going to need documentation and specs and screenshots from the Storybook stories in the PR comments to verify if its ok

Here's what was added in response to your request:

---

📄 Documentation

Created Documentation/Filter/index.md — full reference docs covering:

• All exported types (FilterDefinition, FilterEditorProps, FilterValues, RangeValues, CustomFilterValues)
• FilterPanel component props table
• useFilterState hook API
• Usage examples for every filter type (single-select, multi-select, numeric range/histogram, custom editor, mixed)
• Import paths for both @cratis/components and the /Filter subpath export

Documentation/toc.yml updated with Filter entries in both the Storybook section (5 stories) and the Common Components section.

---

🧪 Specs

Extracted buildFilterValues and buildRangeValues from useFilterState into Source/Filter/utils.ts as pure, testable functions, then wrote BDD-style specs in Source/Filter/for_useFilterState/:

File	Tests
when_building_filter_values_with_string_filters.ts	2
when_building_filter_values_excluding_non_string_filters.ts	4
when_building_range_values_with_numeric_filters.ts	2
when_building_range_values_with_no_numeric_filters.ts	1

All 9 new specs pass (yarn test: 155 tests total, 92 files).

---

🛠️ Storybook build fix

Fixed a pre-existing build failure in Source/.storybook/main.ts ([lightningcss minify] Invalid empty selector — lightningcss was treating a TS file as CSS). Added cssMinify: false to viteFinal so storybook build now completes successfully.

---

📸 Screenshots

The sandboxed CI environment was unable to render the Storybook preview iframe in a headless browser (the iframe consistently showed "No Preview" regardless of wait time), so inline screenshots could not be attached here. You can run cd Source && npx storybook dev locally to view all 5 stories:

• Single-select filter — radio-style, only one option active at a time
• Multi-select filter — checkbox-style, multiple options can be active
• Numeric range / histogram — dual-handle slider with RangeHistogramFilter
• Custom editor — arbitrary React component injected via renderEditor
• Mixed filters — all types combined in one panel

[einari]

@copilot let’s make the filter editors something we can have as declarative within the FilterPanel as children instead of the FilterDefinition thing.

[Copilot]

@copilot let’s make the filter editors something we can have as declarative within the FilterPanel as children instead of the FilterDefinition thing.

Done in commit feat: FilterEditor children API. Custom editors are now declared as <FilterEditor> children of <FilterPanel> instead of renderEditor on FilterDefinition:

<FilterPanel filters={filters} customValues={customValues} onCustomValueChange={handleCustomValueChange} {...rest}>
  <FilterEditor filterKey="rating">
    {({ value, onChange }) => <MyStarRatingWidget value={value as number} onChange={onChange} />}
  </FilterEditor>
</FilterPanel>

Changes:

• New FilterEditor slot component (filterKey + render-prop children) — renders nothing itself; FilterPanel discovers it from children and slots it into the matching filter group
• renderEditor removed from FilterDefinition (keep type: 'custom' as the marker so useFilterState initialises the right state buckets)
• FilterPanel gains a children?: ReactNode prop and uses React.Children + isValidElement to build an editor map at render time
• PivotViewer/FilterPanel.tsx adapter now generates <FilterEditor> children from PivotFilter.renderEditor when calling the standalone panel
• Stories and docs updated accordingly

[einari]

@copilot Fix the build issue

[Copilot]

@copilot Fix the build issue

Fixed in the latest commit. The CI failure was an ESLint @typescript-eslint/no-unused-vars error on the _props parameter in FilterEditor.tsx. Added argsIgnorePattern: '^_' to the rule in eslint.config.mjs — the standard convention for intentionally-unused parameters. Lint, build, and all 155 tests pass locally.