From e05bcbe2daa6989a004dffebccdd7a9003441ed8 Mon Sep 17 00:00:00 2001
From: lawvs <18554747+lawvs@users.noreply.github.com>
Date: Thu, 8 Aug 2024 19:18:12 +0800
Subject: [PATCH] refactor: update FilterSphereProvider theme prop

---
 .changeset/silent-jars-suffer.md              | 15 ++++++++++
 .../filter/src/filter-sphere-provider.tsx     | 30 ++-----------------
 packages/filter/src/index.ts                  |  1 -
 packages/filter/src/theme/context.tsx         |  5 ++++
 .../filter/src/theme/create-filter-theme.ts   | 26 ++++++++++++++++
 packages/filter/src/theme/index.ts            |  4 +++
 .../src/filter/flatten-filter-builder.tsx     | 18 +++++------
 7 files changed, 62 insertions(+), 37 deletions(-)
 create mode 100644 .changeset/silent-jars-suffer.md
 create mode 100644 packages/filter/src/theme/create-filter-theme.ts

diff --git a/.changeset/silent-jars-suffer.md b/.changeset/silent-jars-suffer.md
new file mode 100644
index 0000000..97b6834
--- /dev/null
+++ b/.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}>
+```
diff --git a/packages/filter/src/filter-sphere-provider.tsx b/packages/filter/src/filter-sphere-provider.tsx
index 591ee77..4ed67bc 100644
--- a/packages/filter/src/filter-sphere-provider.tsx
+++ b/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>
   );
diff --git a/packages/filter/src/index.ts b/packages/filter/src/index.ts
index 4d44042..c6d2662 100644
--- a/packages/filter/src/index.ts
+++ b/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";
diff --git a/packages/filter/src/theme/context.tsx b/packages/filter/src/theme/context.tsx
index 2af0ca9..62c6d6c 100644
--- a/packages/filter/src/theme/context.tsx
+++ b/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,
diff --git a/packages/filter/src/theme/create-filter-theme.ts b/packages/filter/src/theme/create-filter-theme.ts
new file mode 100644
index 0000000..1502853
--- /dev/null
+++ b/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 },
+  };
+};
diff --git a/packages/filter/src/theme/index.ts b/packages/filter/src/theme/index.ts
index 4a96d39..2f2ce2a 100644
--- a/packages/filter/src/theme/index.ts
+++ b/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";
diff --git a/packages/playground/src/filter/flatten-filter-builder.tsx b/packages/playground/src/filter/flatten-filter-builder.tsx
index 531b835..11df1fc 100644
--- a/packages/playground/src/filter/flatten-filter-builder.tsx
+++ b/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>
   );