feat: add getLocaleText API

.changeset/metal-toes-leave.md

@@ -0,0 +1,5 @@
+---
+"@fn-sphere/filter": patch
+---
+
+Add `getLocaleText` API

packages/filter/src/hooks/use-filter-schema-context.tsx

@@ -8,7 +8,12 @@ import { createContext, type ReactNode, useContext } from "react";
 import { z } from "zod";
 import { type FilterMap, fromFilterMap, toFilterMap } from "../filter-map.js";
 import type { BasicFilterSphereInput } from "../types.js";
-import { defaultMapFieldName, defaultMapFilterName, noop } from "../utils.js";
+import {
+  defaultGetLocaleText,
+  defaultMapFieldName,
+  defaultMapFilterName,
+  noop,
+} from "../utils.js";
 
 export interface FilterSchemaContext<Data = unknown>
   extends Readonly<Required<BasicFilterSphereInput<Data>>> {
@@ -32,6 +37,7 @@ const defaultContext: InternalFilterContextType = {
   fieldDeepLimit: 1,
   mapFieldName: defaultMapFieldName,
   mapFilterName: defaultMapFilterName,
+  getLocaleText: defaultGetLocaleText,
 
   filterMap: {},
   filterableFields: [],

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

@@ -8,8 +8,13 @@ import { useFilterRule } from "./use-filter-rule.js";
 import { useFilterSchemaContext } from "./use-filter-schema-context.js";
 
 export const useFilterSelect = (rule: SingleFilter) => {
-  const { filterMap, filterableFields, mapFieldName, mapFilterName } =
-    useFilterSchemaContext();
+  const {
+    filterMap,
+    filterableFields,
+    mapFieldName,
+    mapFilterName,
+    getLocaleText,
+  } = useFilterSchemaContext();
   const { updateRule } = useFilterRule(rule);
 
   const ruleNode = filterMap[rule.id];
@@ -29,15 +34,15 @@ export const useFilterSelect = (rule: SingleFilter) => {
     : undefined;
 
   const fieldOptions = filterableFields.map((field) => ({
-    label: mapFieldName(field),
+    label: getLocaleText(mapFieldName(field)),
     value: field,
   }));
 
   const selectedFilter = selectedField?.filterFnList.find(
     (filter) => filter.name === rule.name,
   );
   const filterOptions = selectedField?.filterFnList.map((filter) => ({
-    label: mapFilterName(filter, selectedField),
+    label: getLocaleText(mapFilterName(filter, selectedField)),
     value: filter,
   }));
 

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

@@ -9,7 +9,12 @@ import {
 import { useState } from "react";
 import { z } from "zod";
 import type { BasicFilterSphereInput } from "../types.js";
-import { defaultMapFieldName, defaultMapFilterName, noop } from "../utils.js";
+import {
+  defaultGetLocaleText,
+  defaultMapFieldName,
+  defaultMapFilterName,
+  noop,
+} from "../utils.js";
 import type { FilterSchemaContext } from "./use-filter-schema-context.js";
 
 export interface FilterSphereInput<Data> extends BasicFilterSphereInput<Data> {
@@ -40,6 +45,7 @@ export const defaultContext: FilterSchemaContext = {
   fieldDeepLimit: 1,
   mapFieldName: defaultMapFieldName,
   mapFilterName: defaultMapFilterName,
+  getLocaleText: defaultGetLocaleText,
   onRuleChange: noop,
 };
 

packages/filter/src/hooks/use-root-rule.ts

@@ -9,6 +9,7 @@ export const useRootRule = () => {
     filterMap,
     mapFieldName,
     mapFilterName,
+    getLocaleText,
     onFilterMapChange,
   } = useFilterSchemaContext();
 
@@ -31,6 +32,7 @@ export const useRootRule = () => {
 
     mapFieldName,
     mapFilterName,
+    getLocaleText,
     getRootRule,
     updateRootRule,
   };

packages/filter/src/types.ts

@@ -48,7 +48,7 @@ export interface BasicFilterSphereInput<Data = unknown> {
     field: FilterField,
   ) => string;
   /**
-   * The callback when the filter rule changes.
+   * Returns the translation for the key.
    */
-  // onRuleChange?: (rule: FilterGroup) => void;
+  getLocaleText?: (key: string) => string;
 }

packages/filter/src/utils.ts

@@ -18,3 +18,5 @@ export const defaultMapFilterName: (
 ) => string = (filterSchema) => {
   return filterSchema.name;
 };
+
+export const defaultGetLocaleText = (key: string) => key;

packages/filter/src/views/data-input-views.tsx

@@ -1,5 +1,6 @@
 import { forwardRef } from "react";
 import { z } from "zod";
+import { useRootRule } from "../hooks/use-root-rule.js";
 import { useView } from "../theme/hooks.js";
 import type { DataInputViewSpec } from "../theme/types.js";
 
@@ -108,12 +109,13 @@ export const presetDataInputSpecs: DataInputViewSpec[] = [
     },
     view: function LiteralSelect({ requiredDataSchema, rule, updateInput }) {
       const { Select: SelectView } = useView("components");
+      const { getLocaleText } = useRootRule();
       const unionSchema = requiredDataSchema[0] as z.ZodUnion<
         [z.ZodLiteral<unknown>]
       >;
       const options = unionSchema.options.map(
         (item: z.ZodLiteral<unknown>) => ({
-          label: item.description ?? String(item.value),
+          label: getLocaleText(item.description ?? String(item.value)),
           value: item.value,
         }),
       );

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

@@ -1,5 +1,6 @@
 import type { FilterGroup } from "@fn-sphere/core";
 import type { ReactNode } from "react";
+import { useRootRule } from "../hooks/use-root-rule.js";
 
 export type FilterGroupContainerProps = {
   filterGroup: FilterGroup;
@@ -10,13 +11,15 @@ export const FilterGroupContainer = ({
   filterGroup,
   children,
 }: FilterGroupContainerProps) => {
+  const { getLocaleText } = useRootRule();
   // const {
   //   ruleState: { isRoot },
   // } = useFilterGroup(filterGroup);
   // if (isRoot) {
   //   return children;
   // }
-  const text = filterGroup.op === "or" ? "Or" : "And";
+  const text =
+    filterGroup.op === "or" ? getLocaleText("Or") : getLocaleText("And");
   return (
     <div
       className="filter-group-container"

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

@@ -1,6 +1,7 @@
 import type { FilterGroup } from "@fn-sphere/core";
 import { Fragment } from "react";
 import { useFilterGroup } from "../hooks/use-filter-group.js";
+import { useRootRule } from "../hooks/use-root-rule.js";
 import { useView } from "../theme/hooks.js";
 
 export type FilterGroupProps = {
@@ -10,6 +11,7 @@ export type FilterGroupProps = {
 export const FilterGroupView = ({ rule: filterGroup }: FilterGroupProps) => {
   const { appendChildRule, appendChildGroup } = useFilterGroup(filterGroup);
   const { Button: ButtonView } = useView("components");
+  const { getLocaleText } = useRootRule();
   const {
     FilterGroupContainer,
     SingleFilter: FilterRuleView,
@@ -24,14 +26,14 @@ export const FilterGroupView = ({ rule: filterGroup }: FilterGroupProps) => {
             appendChildRule();
           }}
         >
-          Add Filter
+          {getLocaleText("Add Filter")}
         </ButtonView>
         <ButtonView
           onClick={() => {
             appendChildGroup();
           }}
         >
-          Add Group
+          {getLocaleText("Add Group")}
         </ButtonView>
       </FilterGroupContainer>
     );

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

@@ -17,15 +17,15 @@ export const SingleFilterView = ({ rule }: SingleFilterRuleProps) => {
     removeRule,
     appendRule,
   } = useFilterRule(rule);
-  const { getRootRule, updateRootRule } = useRootRule();
+  const { getLocaleText, getRootRule, updateRootRule } = useRootRule();
   const { Button: ButtonView } = useView("components");
   const { FieldSelect, FilterSelect, FilterDataInput, SingleFilterContainer } =
     useView("templates");
 
   return (
     <SingleFilterContainer rule={rule}>
       <FieldSelect rule={rule} />
-      {isInvert ? "Not" : null}
+      {isInvert ? getLocaleText("Not") : null}
       <FilterSelect rule={rule} />
       <FilterDataInput rule={rule} />
       {isValid ? null : "!"}
@@ -34,7 +34,7 @@ export const SingleFilterView = ({ rule }: SingleFilterRuleProps) => {
           appendRule();
         }}
       >
-        And
+        {getLocaleText("And")}
       </ButtonView>
       <ButtonView
         onClick={() => {
@@ -48,10 +48,10 @@ export const SingleFilterView = ({ rule }: SingleFilterRuleProps) => {
           updateRootRule(rootRule);
         }}
       >
-        Or
+        {getLocaleText("Or")}
       </ButtonView>
       <ButtonView aria-label="delete" onClick={() => removeRule(true)}>
-        Delete
+        {getLocaleText("Delete")}
       </ButtonView>
     </SingleFilterContainer>
   );