@meta-1/design 0.0.159

package/src/components/uix/dialog/index.tsx

@@ -0,0 +1,70 @@
+import type * as React from "react";
+import type { FC, PropsWithChildren } from "react";
+
+import {
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Dialog as UIDialog,
+} from "@meta-1/design/components/ui/dialog";
+import { Spin } from "@meta-1/design/components/uix/spin";
+import { cn } from "@meta-1/design/lib";
+
+export type EventCallback = () => void;
+
+export interface DialogProps extends PropsWithChildren {
+  visible?: boolean;
+  onCancel?: EventCallback;
+  onOk?: EventCallback;
+  className?: string;
+  maskClosable?: boolean;
+  closable?: boolean;
+  title?: string;
+  description?: string;
+  footer?: React.ReactNode;
+  loading?: boolean;
+}
+
+export const Dialog: FC<DialogProps> = (props) => {
+  const {
+    visible,
+    onCancel,
+    maskClosable = true,
+    className,
+    closable = true,
+    title,
+    description,
+    footer,
+    loading = false,
+  } = props;
+
+  return (
+    <UIDialog open={visible}>
+      <DialogContent
+        aria-describedby={undefined}
+        autoFocus={false}
+        className={cn(className)}
+        onClick={(e) => e.stopPropagation()}
+        onCloseClick={onCancel}
+        onOverlayClick={maskClosable ? onCancel : () => {}}
+        showClose={closable}
+      >
+        {title || description ? (
+          <DialogHeader>
+            {title ? <DialogTitle>{title}</DialogTitle> : null}
+            {description ? <DialogDescription>{description}</DialogDescription> : null}
+          </DialogHeader>
+        ) : null}
+        <div className="my-2">{props.children}</div>
+        {footer ? <DialogFooter>{footer}</DialogFooter> : null}
+        {loading ? (
+          <div className={cn("absolute top-0 right-0 bottom-0 left-0 bg-white/50", "flex items-center justify-center")}>
+            <Spin />
+          </div>
+        ) : null}
+      </DialogContent>
+    </UIDialog>
+  );
+};

package/src/components/uix/divider/index.tsx

@@ -0,0 +1,23 @@
+import type { PropsWithChildren } from "react";
+
+import { cn } from "@meta-1/design/lib/utils";
+
+export interface DividerProps extends PropsWithChildren {
+  orientation: "left" | "center" | "right";
+  className?: string;
+  labelClassName?: string;
+  borderClassName?: string;
+}
+
+export const Divider = (props: DividerProps) => {
+  return (
+    <div className={cn("relative my-6", props.className)}>
+      <div className="absolute inset-0 flex items-center">
+        <span className={cn("w-full border-t", props.borderClassName)} />
+      </div>
+      <div className="relative flex justify-center text-xs uppercase">
+        <span className={cn("bg-background px-2 text-muted-foreground", props.labelClassName)}>{props.children}</span>
+      </div>
+    </div>
+  );
+};

package/src/components/uix/dropdown/index.tsx

@@ -0,0 +1,117 @@
+import type { FC, MouseEvent, PropsWithChildren, ReactNode } from "react";
+
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@meta-1/design/components/ui/dropdown-menu";
+import { cn } from "@meta-1/design/lib";
+
+type Align = "start" | "center" | "end";
+type Side = "top" | "bottom" | "left" | "right";
+
+export type onDropdownMenuClick = (item: DropdownMenuItemProps, e: MouseEvent) => void;
+export type onCheckedChange = (item: DropdownMenuItemProps, checked: boolean) => void;
+
+export interface DropdownMenuItemProps {
+  label?: ReactNode;
+  id: string;
+  type: "label" | "separator" | "item" | "checkbox";
+  checked?: boolean;
+  shortcut?: string;
+  disabled?: boolean;
+  children?: DropdownMenuItemProps[];
+  onItemClick?: onDropdownMenuClick;
+  onCheckedChange?: onCheckedChange;
+  hidden?: boolean;
+}
+
+export interface DropdownProps extends PropsWithChildren {
+  items?: DropdownMenuItemProps[];
+  className?: string;
+  onItemClick?: onDropdownMenuClick;
+  onCheckedChange?: onCheckedChange;
+  align?: Align;
+  side?: Side;
+  asChild?: boolean;
+  hideOnEmpty?: boolean;
+  modal?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+type Callback = {
+  onItemClick?: onDropdownMenuClick;
+  onCheckedChange?: onCheckedChange;
+};
+
+const renderItem = (item: DropdownMenuItemProps, call: Callback) => {
+  const clickCall = item.onItemClick || call.onItemClick;
+  const checkedCall = item.onCheckedChange || call.onCheckedChange;
+  if (item.type === "label") {
+    return <DropdownMenuLabel key={item.id}>{item.label}</DropdownMenuLabel>;
+  }
+  if (item.type === "separator") {
+    return <DropdownMenuSeparator key={item.id} />;
+  }
+  if (item.type === "checkbox") {
+    return (
+      <DropdownMenuCheckboxItem
+        checked={item.checked}
+        className="capitalize"
+        key={item.id}
+        onCheckedChange={(value) => checkedCall?.(item, value)}
+      >
+        {item.label}
+      </DropdownMenuCheckboxItem>
+    );
+  }
+  if (item.children?.length) {
+    return (
+      <DropdownMenuSub key={item.id}>
+        <DropdownMenuSubTrigger>{item.label}</DropdownMenuSubTrigger>
+        <DropdownMenuPortal>
+          <DropdownMenuSubContent>{item.children.map((child) => renderItem(child, call))}</DropdownMenuSubContent>
+        </DropdownMenuPortal>
+      </DropdownMenuSub>
+    );
+  }
+  return (
+    <DropdownMenuItem disabled={item.disabled} key={item.id} onClick={(e) => clickCall?.(item, e)}>
+      {item.label}
+      {item.shortcut && <DropdownMenuShortcut>{item.shortcut}</DropdownMenuShortcut>}
+    </DropdownMenuItem>
+  );
+};
+
+export const Dropdown: FC<DropdownProps> = (props) => {
+  const {
+    items = [],
+    onItemClick,
+    onCheckedChange,
+    align,
+    asChild,
+    hideOnEmpty = true,
+    open,
+    modal = false,
+    side,
+  } = props;
+  if (!items?.length && hideOnEmpty) return null;
+  return (
+    <DropdownMenu modal={modal} onOpenChange={props.onOpenChange} open={open}>
+      <DropdownMenuTrigger asChild={asChild}>{props.children}</DropdownMenuTrigger>
+      <DropdownMenuContent align={align} className={cn(props.className)} side={side}>
+        {items.filter((item) => !item.hidden).map((child) => renderItem(child, { onItemClick, onCheckedChange }))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

package/src/components/uix/empty/index.tsx

@@ -0,0 +1,29 @@
+import { type FC, type ReactNode, useContext } from "react";
+import classNames from "classnames";
+import get from "lodash/get";
+
+import { Empty as IconEmpty } from "@meta-1/design/components/icons";
+import { UIXContext } from "@meta-1/design/components/uix/config-provider";
+
+export type EmptyProps = {
+  text?: ReactNode;
+  icon?: ReactNode;
+  className?: string;
+  textClassName?: string;
+  iconClassName?: string;
+};
+
+export const Empty: FC<EmptyProps> = (props) => {
+  const { className, iconClassName, textClassName } = props;
+  const config = useContext(UIXContext);
+  const text = props.text || get(config.locale, "Empty.text");
+
+  return (
+    <div className={classNames("flex flex-col items-center justify-center p-4", className)}>
+      <div className={iconClassName}>
+        {props.icon || <IconEmpty className="text-6xl text-muted-foreground opacity-60" />}
+      </div>
+      <div className={classNames("text-secondary-foreground/70 text-xs", textClassName)}>{text}</div>
+    </div>
+  );
+};

package/src/components/uix/filters/index.tsx

@@ -0,0 +1,105 @@
+import { cloneElement, type FC, type PropsWithChildren, type ReactElement, useContext } from "react";
+import get from "lodash/get";
+import pick from "lodash/pick";
+import type { Control } from "react-hook-form";
+import { Controller, type SubmitHandler, useForm } from "react-hook-form";
+
+import { Button } from "@meta-1/design/components/uix/button";
+import { UIXContext } from "@meta-1/design/components/uix/config-provider";
+
+export interface FilterItemProps {
+  field: string;
+  render: () => ReactElement;
+  label?: string;
+}
+
+export interface FiltersProps extends PropsWithChildren {
+  items?: FilterItemProps[];
+  // biome-ignore lint/suspicious/noExplicitAny: <defaultValues>
+  defaultValues?: any;
+  // biome-ignore lint/suspicious/noExplicitAny: <query>
+  query?: any;
+  loading?: boolean;
+  load?: (params?: unknown) => Promise<unknown> | unknown;
+  searchText?: string;
+  resetText?: string;
+}
+
+const renderItem = (item: FilterItemProps, form: { control: Control }) => {
+  const ele = item.render();
+
+  return (
+    <div className="m-2 my-1" key={item.field}>
+      <div className="mb-1 text-muted-foreground text-sm">{item.label}</div>
+      <div>
+        <Controller
+          control={form.control}
+          name={item.field}
+          render={({ field }) =>
+            // biome-ignore lint/suspicious/noExplicitAny: <cloneElement>
+            cloneElement<any>(ele, {
+              // biome-ignore lint/suspicious/noExplicitAny: <props>
+              ...(ele as any).props,
+              ...field,
+              value: field.value === 0 ? 0 : field.value || "", // a component is changing an uncontrolled input to be controlled
+            })
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+export const Filters: FC<FiltersProps> = (props) => {
+  const { items = [], defaultValues = null, loading, load, query } = props;
+  const fields = items.map((item) => item.field);
+  const { reset, control, handleSubmit } = useForm({
+    defaultValues: pick(query, fields),
+  });
+
+  const config = useContext(UIXContext);
+  const searchText = props.searchText || get(config.locale, "Filters.searchText");
+  const resetText = props.resetText || get(config.locale, "Filters.resetText");
+
+  // biome-ignore lint/suspicious/noExplicitAny: <data>
+  const onSubmit: SubmitHandler<any> = (data) => {
+    load?.({
+      ...pick(data, fields),
+      page: 1,
+    });
+  };
+
+  return (
+    <div className="relative">
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <div className="-mx-2 flex flex-wrap items-end justify-start">
+          {items.map((item) => renderItem(item, { control }))}
+          {items?.length ? (
+            <div className="m-2 my-1 flex flex-1 items-center justify-start">
+              <Button disabled={loading} type="submit">
+                {searchText}
+              </Button>
+              <Button
+                className="ml-2"
+                disabled={loading}
+                onClick={() => {
+                  const filteredDefaultValues = pick(defaultValues, fields);
+                  load?.({
+                    ...filteredDefaultValues,
+                    page: 1,
+                  });
+                  reset(filteredDefaultValues);
+                }}
+                type="reset"
+                variant="secondary"
+              >
+                {resetText}
+              </Button>
+            </div>
+          ) : null}
+        </div>
+      </form>
+      {loading ? <div className="dark:!bg-black/5 absolute top-0 right-0 bottom-0 left-0 bg-white/50" /> : null}
+    </div>
+  );
+};

package/src/components/uix/form/index.tsx

@@ -0,0 +1,274 @@
+import {
+  Children,
+  cloneElement,
+  type FC,
+  type FormHTMLAttributes,
+  forwardRef,
+  type PropsWithChildren,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import classNames from "classnames";
+import isObject from "lodash/isObject";
+import type { Control, FieldValues, Resolver, WatchObserver } from "react-hook-form";
+import {
+  type ControllerRenderProps,
+  type DefaultValues,
+  type SubmitHandler,
+  type UseFormReturn,
+  useForm as useFormHook,
+} from "react-hook-form";
+import type { ZodType } from "zod";
+
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormLabel,
+  FormMessage,
+  Form as UIForm,
+  FormItem as UIFormItem,
+} from "@meta-1/design/components/ui/form";
+import { cn } from "@meta-1/design/lib";
+
+// 类型安全的 zodResolver 包装器，处理 zod 4.x 版本兼容性
+const safeZodResolver = <T extends FieldValues>(schema: ZodType<T>): Resolver<T> => {
+  // @ts-expect-error - zod 4.x 版本兼容性问题，zodResolver 类型基于 zod 3.x
+  return zodResolver(schema);
+};
+
+export interface RenderProps extends ControllerRenderProps {
+  placeholder?: string;
+}
+
+export interface FieldItem<T extends FieldValues> extends PropsWithChildren {
+  name: string;
+  label?: string | ReactNode;
+  description?: string;
+  control?: Control<T>;
+  className?: string;
+}
+
+export type FormInstance<T extends FieldValues> = UseFormReturn<T> & {
+  _setForm?: (ref: UseFormReturn<T> | null) => void;
+  submit: () => void;
+};
+
+export type FormProps<T extends FieldValues> = Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> & {
+  schema?: ZodType<T>;
+  defaultValues?: DefaultValues<T>;
+  onSubmit?: SubmitHandler<T>;
+  className?: string;
+  onValuesChange?: WatchObserver<T>;
+  stopPropagation?: boolean;
+  form?: FormInstance<T>;
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: <props>
+export const FormItem: FC<FieldItem<any>> = (props) => {
+  const render = (field: ControllerRenderProps) => {
+    if (Children.count(props.children) === 1) {
+      const ele = props.children as ReactElement;
+      // biome-ignore lint/suspicious/noExplicitAny: <props>
+      const onChangeOrigin = (ele as any).props.onChange;
+      const onChange = field.onChange;
+      // biome-ignore lint/suspicious/noExplicitAny: <e>
+      const onChangeWrap = (e: any) => {
+        onChange(e);
+        onChangeOrigin?.(e);
+      };
+      // biome-ignore lint/suspicious/noExplicitAny: <cloneElement>
+      return cloneElement<any>(ele, {
+        // biome-ignore lint/suspicious/noExplicitAny: <props>
+        ...(ele as any).props,
+        ...field,
+        onChange: onChangeWrap,
+        value: field.value === 0 ? 0 : field.value || "", // a component is changing an uncontrolled input to be controlled
+      });
+    }
+    return props.children;
+  };
+
+  return (
+    <FormField
+      control={props.control}
+      name={props.name}
+      render={(p) => {
+        const { field } = p;
+        return (
+          <UIFormItem className={classNames("flex flex-col", props.className)}>
+            {props.label ? <FormLabel>{props.label}</FormLabel> : null}
+            <FormControl>{render(field)}</FormControl>
+            {props.description ? <FormDescription>{props.description}</FormDescription> : null}
+            <FormMessage />
+          </UIFormItem>
+        );
+      }}
+    />
+  );
+};
+
+function FormInner<T extends FieldValues>(props: FormProps<T>, ref: Ref<FormInstance<T> | undefined>) {
+  const {
+    schema = null,
+    defaultValues,
+    onSubmit,
+    className,
+    onValuesChange,
+    stopPropagation = true,
+    form: formInstance,
+    ...rest
+  } = props;
+
+  const form = useFormHook<T>({
+    resolver: schema ? safeZodResolver(schema) : undefined,
+    defaultValues: defaultValues,
+  });
+  form.watch(onValuesChange!);
+
+  // 使用 useRef 来保持稳定的 innerInstance 引用
+  const innerInstanceRef = useRef<FormInstance<T> | null>(null);
+
+  if (!innerInstanceRef.current) {
+    // 创建稳定的实例引用，只创建一次
+    innerInstanceRef.current = {
+      ...form,
+      submit: () => {
+        if (onSubmit) {
+          form.handleSubmit(onSubmit)();
+        }
+      },
+    };
+  }
+
+  // 当 form 或 onSubmit 变化时，更新实例的方法，但保持引用不变
+  useEffect(() => {
+    if (innerInstanceRef.current) {
+      Object.assign(innerInstanceRef.current, form, {
+        submit: () => {
+          if (onSubmit) {
+            form.handleSubmit(onSubmit)();
+          }
+        },
+      });
+    }
+  }, [form, onSubmit]);
+
+  useEffect(() => {
+    if (formInstance?._setForm && innerInstanceRef.current) {
+      formInstance._setForm(innerInstanceRef.current);
+    }
+  }, [formInstance]);
+
+  const children = useMemo<ReactNode>(() => {
+    return Children.map(props.children, (child) => {
+      if (isObject(child) && "type" in (child as ReactElement)) {
+        const ele = child as ReactElement;
+        if (ele.type === FormItem) {
+          // biome-ignore lint/suspicious/noExplicitAny: <cloneElement>
+          return cloneElement<any>(ele, {
+            // biome-ignore lint/suspicious/noExplicitAny: <props>
+            ...(ele as any).props,
+            control: form.control,
+          });
+        }
+      }
+      return child;
+    });
+  }, [form.control, props.children]);
+
+  useImperativeHandle(ref, () => innerInstanceRef.current!, []);
+
+  return (
+    <UIForm {...form}>
+      <form
+        {...rest}
+        className={cn("space-y-4", className)}
+        onSubmit={(e) => {
+          stopPropagation && e.stopPropagation();
+          if (onSubmit) {
+            form.handleSubmit(onSubmit)(e);
+          }
+        }}
+      >
+        {children}
+      </form>
+    </UIForm>
+  );
+}
+
+const useForm = <T extends FieldValues = FieldValues>(): FormInstance<T> => {
+  // 使用 useRef 来保持稳定的引用
+  const formRef = useRef<UseFormReturn<T> | null>(null);
+  const instanceRef = useRef<FormInstance<T> | null>(null);
+
+  // 稳定的 _setForm 函数引用
+  const _setForm = useCallback((form: UseFormReturn<T> | null) => {
+    formRef.current = form;
+    if (form && instanceRef.current) {
+      // 直接更新实例属性，无需强制重新渲染
+      Object.assign(instanceRef.current, form, { _setForm });
+    }
+  }, []);
+
+  if (!instanceRef.current) {
+    // 创建稳定的实例引用
+    instanceRef.current = {
+      _setForm,
+      submit: () => {
+        // 动态获取当前的 form 实例
+      },
+    } as FormInstance<T>;
+  }
+
+  return instanceRef.current;
+};
+
+const useWatch = <T extends FieldValues = FieldValues>(name: string, form: FormInstance<T>) => {
+  const [value, setValue] = useState<unknown>(undefined);
+
+  useEffect(() => {
+    if (!form?.watch) return;
+
+    const subscription = form.watch((data) => {
+      const fieldValue = (data as Record<string, unknown>)[name];
+      setValue(fieldValue);
+    });
+
+    // 初始化时获取一次值
+    if (form.getValues) {
+      try {
+        const currentValue = form.getValues();
+        setValue((currentValue as Record<string, unknown>)[name]);
+      } catch {
+        // ignore error
+      }
+    }
+
+    return () => {
+      if (subscription && typeof subscription.unsubscribe === "function") {
+        subscription.unsubscribe();
+      }
+    };
+  }, [form, name]);
+
+  return value;
+};
+
+export const Form = Object.assign(
+  forwardRef(FormInner) as <T extends FieldValues>(
+    props: FormProps<T> & { ref?: Ref<UseFormReturn<T> | undefined> },
+  ) => ReactElement,
+  {
+    useForm,
+    useWatch,
+  },
+);

package/src/components/uix/image/index.tsx

@@ -0,0 +1,13 @@
+import type { FC, ImgHTMLAttributes } from "react";
+
+export type ImageProps = ImgHTMLAttributes<HTMLImageElement>;
+
+export const Image: FC<ImageProps> = (props) => {
+  const { height, width, className } = props;
+
+  return (
+    <div className={className} style={{ height, width }}>
+      <img alt={props.alt} className="h-full w-full" src={props.src} />
+    </div>
+  );
+};

package/src/components/uix/loading/index.tsx

@@ -0,0 +1,24 @@
+import type { FC, PropsWithChildren } from "react";
+
+import { Spin } from "@meta-1/design/components/uix/spin";
+import { cn } from "@meta-1/design/lib";
+
+export interface LoadingProps extends PropsWithChildren {
+  loading?: boolean;
+  className?: string;
+}
+
+export const Loading: FC<LoadingProps> = (props) => {
+  const { loading } = props;
+
+  return (
+    <div className={cn("relative", props.className)}>
+      {props.children}
+      {loading ? (
+        <div className="dark:!bg-black/5 absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center bg-white/50">
+          <Spin />
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/components/uix/message/index.tsx

@@ -0,0 +1,21 @@
+import { type ReactNode, useMemo } from "react";
+import { type ExternalToast, toast } from "sonner";
+
+export const useMessage = () => {
+  return useMemo(() => {
+    return {
+      success: (message?: ReactNode, options?: ExternalToast) => {
+        toast.success(message, options);
+      },
+      error: (message?: ReactNode, options?: ExternalToast) => {
+        toast.error(message, options);
+      },
+      warning: (message?: ReactNode, options?: ExternalToast) => {
+        toast.warning(message, options);
+      },
+      info: (message?: ReactNode, options?: ExternalToast) => {
+        toast.info(message, options);
+      },
+    };
+  }, []);
+};