feat: implement new advanced search by filter-sphere

app/components/filter-sphere/filter.tsx

@@ -0,0 +1,37 @@
+import {
+  FilterSphereProvider,
+  FilterBuilder,
+  useFilterSphere,
+  FilterGroup,
+} from "@fn-sphere/filter";
+import { filterFnList, filterSchema, getLocaleText } from "./schema";
+import { filterTheme } from "./theme";
+import { filterRuleToQueryString } from "./transform";
+import { cacheFilterRule, getCachedFilterRule } from "./utils";
+
+export interface Props {
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+const AdvancedFilterBuilder = (props: Props) => {
+  const defaultRule = getCachedFilterRule(props.value ?? "") ?? undefined;
+  const { context } = useFilterSphere({
+    schema: filterSchema,
+    defaultRule,
+    filterFnList,
+    getLocaleText,
+    onRuleChange: ({ filterRule }) => {
+      const query = filterRuleToQueryString(filterRule);
+      props.onChange?.(query);
+      cacheFilterRule(query, filterRule);
+    },
+  });
+  return (
+    <FilterSphereProvider context={context} theme={filterTheme}>
+      <FilterBuilder />
+    </FilterSphereProvider>
+  );
+};
+
+export default AdvancedFilterBuilder;

app/components/filter-sphere/index.ts

@@ -0,0 +1,4 @@
+import AdvancedFilterBuilder from "./filter";
+export { getCachedFilterRule } from "./utils";
+
+export default AdvancedFilterBuilder;

app/components/filter-sphere/schema.ts

@@ -0,0 +1,51 @@
+import { defineTypedFn, FnSchema, presetFilter } from "@fn-sphere/filter";
+import { z } from "zod";
+import { zhCN } from "@fn-sphere/filter/locales";
+
+export const filterSchema = z.object({
+  title: z.string().describe("文章标题"),
+  author: z.array(z.string()).describe("文章作者"),
+  tags: z.array(z.string()).describe("文章标签"),
+  content: z.string().describe("文章内容"),
+  date: z.date().describe("发布时间"),
+  link: z.string().describe("文章链接"),
+  content_length: z.number().describe("文章字数"),
+  id: z.string().describe("ID"),
+  id_feed: z.number().describe("Feed ID"),
+});
+
+const notStartsWithFilter = defineTypedFn({
+  name: "notStartsWith",
+  define: z.function().args(z.string(), z.coerce.string()).returns(z.boolean()),
+  // Just a placeholder since we don't need filter data at frontend.
+  implement: () => false,
+});
+
+const filterPriority = [
+  "contains",
+  "notContains",
+  "startsWith",
+  "notStartsWith",
+];
+
+export const filterFnList: FnSchema[] = [
+  ...presetFilter.filter((fn) => fn.name !== "endsWith"),
+  notStartsWithFilter,
+].sort((a, b) => {
+  const indexA = filterPriority.indexOf(a.name);
+  const indexB = filterPriority.indexOf(b.name);
+  return (
+    (indexA === -1 ? Infinity : indexA) - (indexB === -1 ? Infinity : indexB)
+  );
+});
+
+const locale: Record<string, string> = {
+  ...zhCN,
+  startsWith: "以...开始",
+  notStartsWith: "不以...开始",
+};
+
+export const getLocaleText = (key: string): string => {
+  if (!(key in locale)) return key;
+  return locale[key];
+};

app/components/filter-sphere/theme.tsx

@@ -0,0 +1,135 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import {
+  type FilterTheme,
+  createFilterTheme,
+  presetTheme,
+  useFilterGroup,
+  useRootRule,
+  useView,
+} from "@fn-sphere/filter";
+import { type ChangeEvent, useCallback } from "react";
+
+// See http://www.waterwater.moe/fn-sphere/customization/theme/
+
+const componentsSpec = {
+  Button: (props) => {
+    return <Button variant="noShadow" {...props} />;
+  },
+  Input: ({ onChange, ...props }) => {
+    const handleChange = useCallback(
+      (e: ChangeEvent<HTMLInputElement>) => {
+        onChange?.(e.target.value);
+      },
+      [onChange]
+    );
+    return <Input className="h-10" onChange={handleChange} {...props} />;
+  },
+  Select: ({ value, onChange, options = [], className, disabled }) => {
+    const selectedIdx = options.findIndex((option) => option.value === value);
+    const handleChange = useCallback(
+      (value: string) => {
+        const index = Number(value);
+        onChange?.(options[index].value);
+      },
+      [options, onChange]
+    );
+    return (
+      <Select
+        value={String(selectedIdx)}
+        onValueChange={handleChange}
+        disabled={disabled}
+      >
+        <SelectTrigger className="min-w-28">
+          <SelectValue className={className} />
+        </SelectTrigger>
+        <SelectContent>
+          {options?.map((option, index) => (
+            <SelectItem key={option.label} value={String(index)}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  },
+} satisfies Partial<FilterTheme["components"]>;
+
+const templatesSpec = {
+  FilterGroupContainer: ({ rule, children, ...props }) => {
+    const { getLocaleText } = useRootRule();
+    const {
+      ruleState: { isRoot, depth },
+      toggleGroupOp,
+      appendChildRule,
+      appendChildGroup,
+      removeGroup,
+    } = useFilterGroup(rule);
+
+    const text =
+      rule.op === "or"
+        ? getLocaleText("operatorOr")
+        : getLocaleText("operatorAnd");
+
+    const handleToggleGroupOp = useCallback(() => {
+      toggleGroupOp();
+    }, [toggleGroupOp]);
+
+    const handleAddCondition = useCallback(() => {
+      appendChildRule();
+    }, [appendChildRule]);
+
+    const handleAddGroup = useCallback(() => {
+      appendChildGroup();
+    }, [appendChildGroup]);
+
+    const handleDeleteGroup = useCallback(() => {
+      removeGroup();
+    }, [removeGroup]);
+
+    return (
+      <div
+        className={cn(
+          "relative flex flex-col items-start rounded-base border-2 border-border px-3 py-2 gap-2 bg-opacity pt-8",
+          isRoot ? "mt-8" : "mt-6 mb-2"
+        )}
+        {...props}
+      >
+        <div className="flex gap-2 absolute top-0 -translate-y-1/2">
+          <Button onClick={handleToggleGroupOp}>{text}</Button>
+          <Button variant="neutral" onClick={handleAddCondition}>
+            {getLocaleText("addRule")}
+          </Button>
+          {depth < 3 && (
+            <Button variant="neutral" onClick={handleAddGroup}>
+              {getLocaleText("addGroup")}
+            </Button>
+          )}
+          {!isRoot && (
+            <Button variant="neutral" onClick={handleDeleteGroup}>
+              {getLocaleText("deleteGroup")}
+            </Button>
+          )}
+        </div>
+        {children}
+      </div>
+    );
+  },
+  FilterSelect: (props) => {
+    const PresetFilterSelect = presetTheme.templates.FilterSelect;
+    return <PresetFilterSelect tryRetainArgs {...props} />;
+  },
+} satisfies Partial<FilterTheme["templates"]>;
+
+export const filterTheme = createFilterTheme({
+  components: componentsSpec,
+  templates: templatesSpec,
+});