refactor: update FilterSphereProvider theme prop

.changeset/silent-jars-suffer.md

@@ -0,0 +1,15 @@
+---
+"@fn-sphere/filter": minor
+---
+
+Removed inline theme merging logic from `FilterSphereProvider`.
+
+Introduced `createFilterTheme` for theme merging.
+
+Migration guide:
+
+```tsx
+-  <FilterSphereProvider theme={customTheme}>
++ const theme = createFilterTheme(customTheme);
++  <FilterSphereProvider theme={theme}>
+```

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

@@ -3,22 +3,10 @@ import {
   FilterSchemaProvider,
   type FilterSchemaContext,
 } from "./hooks/use-filter-schema-context.js";
-import {
-  FilterThemeProvider,
-  presetTheme,
-  type ThemeSpec,
-} from "./theme/index.js";
-
-export type FilterThemeInput = {
-  dataInputViews?: ThemeSpec["dataInputViews"];
-  components?: Partial<ThemeSpec["components"]>;
-  primitives?: Partial<ThemeSpec["primitives"]>;
-  templates?: Partial<ThemeSpec["templates"]>;
-};
-
+import { FilterThemeProvider, type ThemeSpec } from "./theme/index.js";
 export interface FilterSphereProviderProps<Data> {
   context: FilterSchemaContext<Data>;
-  theme?: FilterThemeInput;
+  theme?: ThemeSpec;
 }
 
 export const FilterSphereProvider = <Data,>({
@@ -27,19 +15,7 @@ export const FilterSphereProvider = <Data,>({
   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>
+    <FilterThemeProvider theme={theme}>{children}</FilterThemeProvider>
   ) : (
     <Fragment>{children}</Fragment>
   );

packages/filter/src/index.ts

@@ -2,7 +2,6 @@ export { createFilterGroup, createSingleFilter } from "@fn-sphere/core";
 export {
   FilterSphereProvider,
   type FilterSphereProviderProps,
-  type FilterThemeInput,
 } from "./filter-sphere-provider.js";
 export { useFilterGroup } from "./hooks/use-filter-group.js";
 export { useFilterRule } from "./hooks/use-filter-rule.js";

packages/filter/src/theme/context.tsx

@@ -12,6 +12,11 @@ export const useFilterTheme = () => {
   return useContext(FilterThemeContext);
 };
 
+/**
+ * This component takes a theme prop and applies it to the children.
+ *
+ * It should preferably be used at the root of your filter component tree.
+ */
 export const FilterThemeProvider = ({
   theme,
   children,

packages/filter/src/theme/create-filter-theme.ts

@@ -0,0 +1,26 @@
+import { presetTheme } from "./preset.js";
+import type { ThemeSpec } from "./types.js";
+
+export type FilterThemeInput = {
+  dataInputViews?: ThemeSpec["dataInputViews"];
+  components?: Partial<ThemeSpec["components"]>;
+  primitives?: Partial<ThemeSpec["primitives"]>;
+  templates?: Partial<ThemeSpec["templates"]>;
+};
+
+/**
+ * Takes an incomplete theme object and generates a complete theme object
+ *
+ * The returned `ThemeSpec` should be passed to `FilterThemeProvider` or `FilterSphereProvider`
+ */
+export const createFilterTheme = (theme: FilterThemeInput): ThemeSpec => {
+  return {
+    dataInputViews: [
+      ...(theme.dataInputViews ?? []),
+      ...presetTheme.dataInputViews,
+    ],
+    components: { ...presetTheme.components, ...theme.components },
+    primitives: { ...presetTheme.primitives, ...theme.primitives },
+    templates: { ...presetTheme.templates, ...theme.templates },
+  };
+};

packages/filter/src/theme/index.ts

@@ -1,4 +1,8 @@
 export { FilterThemeProvider } from "./context.js";
+export {
+  createFilterTheme,
+  type FilterThemeInput,
+} from "./create-filter-theme.js";
 export { useDataInputView, useView } from "./hooks.js";
 export { presetTheme } from "./preset.js";
 export type * from "./types.js";

packages/playground/src/filter/flatten-filter-builder.tsx

@@ -6,6 +6,7 @@ import type {
 } from "@fn-sphere/filter";
 import {
   createFilterGroup,
+  createFilterTheme,
   createSingleFilter,
   FilterSphereProvider,
   useFilterSphere,
@@ -59,6 +60,13 @@ export const createFlattenFilterGroup = () =>
     ],
   });
 
+const theme = createFilterTheme({
+  templates: {
+    FilterGroupContainer: FlattenFilterGroupContainer,
+    SingleFilter: FlattenSingleFilterView,
+  },
+});
+
 export const FlattenFilterBuilder = <Data,>({
   filterRule,
   ...props
@@ -101,15 +109,7 @@ export const FlattenFilterBuilder = <Data,>({
   }
 
   return (
-    <FilterSphereProvider
-      context={context}
-      theme={{
-        templates: {
-          FilterGroupContainer: FlattenFilterGroupContainer,
-          SingleFilter: FlattenSingleFilterView,
-        },
-      }}
-    >
+    <FilterSphereProvider context={context} theme={theme}>
       <FilterGroup rule={filterRule} />
     </FilterSphereProvider>
   );