feat: support customize style for components

.changeset/three-cups-protect.md

@@ -0,0 +1,5 @@
+---
+"@fn-sphere/filter": patch
+---
+
+Support custom style for components

packages/filter/src/views/field-select.tsx

@@ -4,14 +4,18 @@ import {
   type UpdateFieldOptions,
 } from "../hooks/use-filter-select.js";
 import { useView } from "../theme/index.js";
+import type { CommonProps } from "./types.js";
 
 export type FieldSelectProps = {
   rule: SingleFilter;
-} & UpdateFieldOptions;
+} & UpdateFieldOptions &
+  CommonProps;
 
 export const FieldSelect = ({
   rule,
-  ...updateFieldOptions
+  tryRetainArgs,
+  tryRetainFilter,
+  ...props
 }: FieldSelectProps) => {
   const { Select: SelectView } = useView("components");
   const { selectedField, fieldOptions, setField } = useFilterSelect(rule);
@@ -20,7 +24,13 @@ export const FieldSelect = ({
     <SelectView
       value={selectedField}
       options={fieldOptions}
-      onChange={(field) => setField(field, updateFieldOptions)}
+      onChange={(field) =>
+        setField(field, {
+          tryRetainArgs: !!tryRetainArgs,
+          tryRetainFilter: !!tryRetainFilter,
+        })
+      }
+      {...props}
     />
   );
 };

packages/filter/src/views/filter-group-container.tsx

@@ -3,15 +3,17 @@ import { useCallback, type ReactNode } from "react";
 import { useFilterGroup } from "../hooks/use-filter-group.js";
 import { useRootRule } from "../hooks/use-root-rule.js";
 import { useView } from "../theme/hooks.js";
+import type { CommonProps } from "./types.js";
 
 export type FilterGroupContainerProps = {
   rule: FilterGroup;
   children?: ReactNode;
-};
+} & CommonProps;
 
 export const FilterGroupContainer = ({
   rule,
   children,
+  ...props
 }: FilterGroupContainerProps) => {
   const { getLocaleText } = useRootRule();
   const {
@@ -56,6 +58,7 @@ export const FilterGroupContainer = ({
         gap: 8,
         background: "rgba(0, 0, 0, 0.05)",
       }}
+      {...props}
     >
       <Button onClick={handleToggleGroupOp}>{text}</Button>
       {children}

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

@@ -1,27 +1,28 @@
 import type { FilterGroup } from "@fn-sphere/core";
 import { Fragment } from "react";
 import { useView } from "../theme/hooks.js";
+import type { CommonProps } from "./types.js";
 
 export type FilterGroupProps = {
   rule: FilterGroup;
-};
+} & CommonProps;
 
-export const FilterGroupView = ({ rule: filterGroup }: FilterGroupProps) => {
+export const FilterGroupView = ({ rule, ...props }: FilterGroupProps) => {
   const {
     FilterGroupContainer,
     SingleFilter: FilterRuleView,
     RuleJoiner,
   } = useView("templates");
 
   return (
-    <FilterGroupContainer rule={filterGroup}>
-      {filterGroup.conditions.map((childRule, groupIdx) => {
+    <FilterGroupContainer rule={rule} {...props}>
+      {rule.conditions.map((childRule, groupIdx) => {
         return (
           <Fragment key={childRule.id}>
             {groupIdx > 0 && (
               <RuleJoiner
-                parent={filterGroup}
-                joinBetween={[filterGroup.conditions[groupIdx - 1]!, childRule]}
+                parent={rule}
+                joinBetween={[rule.conditions[groupIdx - 1]!, childRule]}
               />
             )}
             {childRule.type === "Filter" ? (

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

@@ -4,14 +4,17 @@ import {
   type UpdateFilterOptions,
 } from "../hooks/use-filter-select.js";
 import { useView } from "../theme/index.js";
+import type { CommonProps } from "./types.js";
 
 export type FilterSelectProps = {
   rule: SingleFilter;
-} & UpdateFilterOptions;
+} & UpdateFilterOptions &
+  CommonProps;
 
 export const FilterSelect = ({
   rule,
-  ...updateFilterOptions
+  tryRetainArgs,
+  ...props
 }: FilterSelectProps) => {
   const { Select: SelectView } = useView("components");
   const { selectedField, selectedFilter, filterOptions, setFilter } =
@@ -22,7 +25,12 @@ export const FilterSelect = ({
       value={selectedFilter}
       disabled={!selectedField}
       options={filterOptions}
-      onChange={(val) => setFilter(val, updateFilterOptions)}
+      onChange={(val) =>
+        setFilter(val, {
+          tryRetainArgs: !!tryRetainArgs,
+        })
+      }
+      {...props}
     />
   );
 };

packages/filter/src/views/rule-joiner.tsx

@@ -1,9 +1,10 @@
 import type { FilterGroup, FilterRule } from "@fn-sphere/core";
+import type { CommonProps } from "./types.js";
 
 export type RuleJoinerProps = {
   parent: FilterGroup;
   joinBetween: [FilterRule, FilterRule];
-};
+} & CommonProps;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const RuleJoiner = (_props: RuleJoinerProps) => {

packages/filter/src/views/single-filter-container.tsx

@@ -1,13 +1,17 @@
 import type { SingleFilter } from "@fn-sphere/core";
 import type { ReactNode } from "react";
+import type { CommonProps } from "./types.js";
 
 export type SingleFilterContainerProps = {
   rule: SingleFilter;
   children?: ReactNode;
-};
+} & CommonProps;
 
 export const SingleFilterContainer = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  rule: _rule,
   children,
+  ...props
 }: SingleFilterContainerProps) => {
   return (
     <div
@@ -17,8 +21,10 @@ export const SingleFilterContainer = ({
         alignItems: "center",
         gap: 8,
       }}
+      {...props}
     >
       {children}
     </div>
   );
 };
+SingleFilterContainer.displayName = "SingleFilterContainer";

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

@@ -2,12 +2,13 @@ import { type SingleFilter } from "@fn-sphere/core";
 import { useFilterRule } from "../hooks/use-filter-rule.js";
 import { useRootRule } from "../hooks/use-root-rule.js";
 import { useView } from "../theme/index.js";
+import type { CommonProps } from "./types.js";
 
 export type SingleFilterRuleProps = {
   rule: SingleFilter;
-};
+} & CommonProps;
 
-export const SingleFilterView = ({ rule }: SingleFilterRuleProps) => {
+export const SingleFilterView = ({ rule, ...props }: SingleFilterRuleProps) => {
   const {
     ruleState: { isInvert },
     removeRule,
@@ -18,7 +19,7 @@ export const SingleFilterView = ({ rule }: SingleFilterRuleProps) => {
     useView("templates");
 
   return (
-    <SingleFilterContainer rule={rule}>
+    <SingleFilterContainer rule={rule} {...props}>
       <FieldSelect rule={rule} />
       {isInvert ? getLocaleText("operatorNot") : null}
       <FilterSelect rule={rule} />

packages/filter/src/views/types.ts

@@ -0,0 +1,6 @@
+import type { CSSProperties } from "react";
+
+export type CommonProps = {
+  className?: string;
+  style?: CSSProperties;
+};