refactor: extract FilterSphereProvider

.changeset/rich-dryers-rhyme.md

@@ -0,0 +1,14 @@
+---
+"@fn-sphere/filter": minor
+---
+
+Add new `FilterSphereProvider` component to provide filter context to children components.
+
+Add `useFilterSphere` hook to access filter predicate.
+
+The `FilterBuilder` component no longer adds a provider to its child components.
+
+```ts
+const { filterRule, schema, predicate } = useFilterSphere<YourData>();
+const filteredData = data.filter(predicate);
+```

packages/filter/src/filter-sphere-provider.tsx

@@ -0,0 +1,66 @@
+import { Fragment, type PropsWithChildren } from "react";
+import { FilterSchemaProvider } from "./hooks/use-filter-schema-context.js";
+import {
+  FilterThemeProvider,
+  presetTheme,
+  type ThemeSpec,
+} from "./theme/index.js";
+import type { BasicFilterSphereInput } from "./types.js";
+
+export type FilterThemeInput = {
+  dataInputViews?: ThemeSpec["dataInputViews"];
+  components?: Partial<ThemeSpec["components"]>;
+  primitives?: Partial<ThemeSpec["primitives"]>;
+  templates?: Partial<ThemeSpec["templates"]>;
+};
+
+export interface FilterSphereProviderProps<Data>
+  extends BasicFilterSphereInput<Data> {
+  theme?: FilterThemeInput;
+}
+
+export const FilterSphereProvider = <Data,>({
+  schema,
+  filterList,
+  filterRule,
+  onRuleChange,
+  mapFieldName,
+  mapFilterName,
+  fieldDeepLimit,
+  theme,
+  children,
+}: PropsWithChildren<FilterSphereProviderProps<Data>>) => {
+  const MaybeThemeProviderWithChildren = theme ? (
+    <FilterThemeProvider
+      theme={{
+        dataInputViews: [
+          ...(theme.dataInputViews ?? []),
+          ...presetTheme.dataInputViews,
+        ],
+        components: { ...presetTheme.components, ...theme.components },
+        primitives: { ...presetTheme.primitives, ...theme.primitives },
+        templates: { ...presetTheme.templates, ...theme.templates },
+      }}
+    >
+      {children}
+    </FilterThemeProvider>
+  ) : (
+    <Fragment>{children}</Fragment>
+  );
+
+  return (
+    <FilterSchemaProvider
+      value={{
+        schema,
+        filterList,
+        filterRule,
+        onRuleChange,
+        mapFieldName,
+        mapFilterName,
+        fieldDeepLimit,
+      }}
+    >
+      {MaybeThemeProviderWithChildren}
+    </FilterSchemaProvider>
+  );
+};

packages/filter/src/hooks/use-filter-group.ts

@@ -4,7 +4,7 @@ import { createFilterGroup, createSingleFilter } from "../utils.js";
 import { useFilterSchemaContext } from "./use-filter-schema-context.js";
 
 export const useFilterGroup = (ruleGroup: FilterGroup) => {
-  const { filterMap, onRuleChange } = useFilterSchemaContext();
+  const { filterMap, onFilterMapChange } = useFilterSchemaContext();
   const ruleNode = filterMap[ruleGroup.id];
   if (!ruleNode) {
     console.error("Rule not found in filterMap", ruleGroup, filterMap);
@@ -33,7 +33,7 @@ export const useFilterGroup = (ruleGroup: FilterGroup) => {
     if (oldOp === newOp) {
       return;
     }
-    onRuleChange({
+    onFilterMapChange({
       ...filterMap,
       [ruleGroup.id]: {
         ...ruleNode,
@@ -46,7 +46,7 @@ export const useFilterGroup = (ruleGroup: FilterGroup) => {
     newRule: SingleFilter = createSingleFilter(),
     index = Infinity,
   ) => {
-    onRuleChange({
+    onFilterMapChange({
       ...filterMap,
       [ruleNode.id]: {
         ...ruleNode,
@@ -71,7 +71,7 @@ export const useFilterGroup = (ruleGroup: FilterGroup) => {
     }),
     index = Infinity,
   ) => {
-    onRuleChange({
+    onFilterMapChange({
       ...filterMap,
       [ruleNode.id]: {
         ...ruleNode,
@@ -97,7 +97,7 @@ export const useFilterGroup = (ruleGroup: FilterGroup) => {
       delete newFilterMap[id];
     });
     delete newFilterMap[ruleNode.id];
-    onRuleChange(newFilterMap);
+    onFilterMapChange(newFilterMap);
   };
 
   return {

packages/filter/src/hooks/use-filter-sphere.tsx

@@ -9,8 +9,8 @@ import { useFilterSchemaContext } from "./use-filter-schema-context.js";
  * Must be used within a `FilterSchemaProvider` or `FilterSphereProvider` component.
  *
  * @example
- * ```
- * const { rule, schema, predicate } = useFilterSphere<YourData>();
+ * ```ts
+ * const { filterRule, schema, predicate } = useFilterSphere<YourData>();
  * const filteredData = data.filter(predicate);
  * ```
  */

packages/filter/src/index.ts

@@ -1,12 +1,16 @@
-export { FilterBuilder } from "./filter-builder.js";
+export {
+  FilterSphereProvider,
+  type FilterSphereProviderProps,
+  type FilterThemeInput,
+} from "./filter-sphere-provider.js";
 export { FlattenFilterBuilder } from "./flatten-filter-builder.js";
 export { useFilterGroup } from "./hooks/use-filter-group.js";
 export { useFilterRule } from "./hooks/use-filter-rule.js";
 export { useFilterSelect } from "./hooks/use-filter-select.js";
 export { useRootRule } from "./hooks/use-root-rule.js";
 export * from "./theme/index.js";
 export type {
-BasicFilterSphereInput,
+  BasicFilterSphereInput,
   BasicFilterSphereProps,
 } from "./types.js";
 export {
@@ -15,10 +19,13 @@ export {
   defaultMapFieldName,
   defaultMapFilterName,
 } from "./utils.js";
+export { FilterBuilder } from "./views/filter-builder.js";
 
 export {
   booleanFilter,
   commonFilters,
+  countNumberOfRules,
+  createFilterPredicate,
   dateFilter,
   genericFilter,
   numberFilter,

packages/filter/src/theme/context.tsx

@@ -13,14 +13,14 @@ export const useFilterTheme = () => {
 };
 
 export const FilterThemeProvider = ({
-  spec,
+  theme,
   children,
 }: {
-  spec: ThemeSpec;
-  children: ReactNode;
+  theme: ThemeSpec;
+  children?: ReactNode;
 }) => {
   return (
-    <FilterThemeContext.Provider value={spec}>
+    <FilterThemeContext.Provider value={theme}>
       {children}
     </FilterThemeContext.Provider>
   );

packages/filter/src/views/filter-builder.tsx

@@ -0,0 +1,8 @@
+import { useFilterSchemaContext } from "../hooks/use-filter-schema-context.js";
+import { useView } from "../theme/hooks.js";
+
+export const FilterBuilder = () => {
+  const { FilterGroup } = useView("templates");
+  const { filterRule } = useFilterSchemaContext();
+  return <FilterGroup rule={filterRule} />;
+};