@meta-1/design 0.0.159

package/src/hooks/resize.ts

@@ -0,0 +1,29 @@
+import { type RefObject, useCallback, useEffect, useState } from "react";
+
+export interface Size {
+  width: number;
+  height: number;
+}
+
+export const useSize = (ref: RefObject<HTMLElement | null>) => {
+  const [size, setSize] = useState<Size>({ width: 0, height: 0 });
+
+  const resize = useCallback(() => {
+    setSize({
+      width: ref.current?.offsetWidth || 0,
+      height: ref.current?.offsetHeight || 0,
+    });
+  }, [ref]);
+
+  useEffect(() => {
+    const ro = new ResizeObserver(resize);
+    if (ref.current) {
+      ro.observe(ref.current);
+    }
+    return () => {
+      ro.disconnect();
+    };
+  }, [ref, resize]);
+
+  return size;
+};

package/src/hooks/use.outside.ts

@@ -0,0 +1,30 @@
+import { useEffect } from "react";
+
+/**
+ * Hook that alerts clicks outside of the passed ref
+ */
+
+// biome-ignore lint/suspicious/noExplicitAny: <refs>
+export const useOutside = (call: () => void, refs: any) => {
+  useEffect(() => {
+    /**
+     * Alert if clicked on outside of element
+     */
+
+    // biome-ignore lint/suspicious/noExplicitAny: <event>
+    const handleClickOutside = (event: any) => {
+      if (!refs) return;
+      // biome-ignore lint/suspicious/noExplicitAny: <hit>
+      const hit = refs.filter((ref: any) => !ref.current.contains(event.target));
+      if (hit.length === refs.length) {
+        call();
+      }
+    };
+    // Bind the event listener
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [refs, call]);
+};

package/src/index.ts

@@ -0,0 +1,159 @@
+// utils
+
+export { toast } from "sonner";
+
+export {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from "@meta-1/design/components/ui/input-otp";
+export { Badge } from "./components/ui/badge";
+export {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "./components/ui/breadcrumb";
+export { Calendar } from "./components/ui/calendar";
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "./components/ui/command";
+export * from "./components/ui/dropdown-menu";
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "./components/ui/hover-card";
+export { Input } from "./components/ui/input";
+export * from "./components/ui/navigation-menu";
+export {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "./components/ui/popover";
+export { Progress } from "./components/ui/progress";
+export {
+  RadioGroup,
+  RadioGroupItem,
+} from "./components/ui/radio-group";
+export {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "./components/ui/resizable";
+export { ScrollArea, ScrollBar } from "./components/ui/scroll-area";
+export { Separator } from "./components/ui/separator";
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./components/ui/sheet";
+export { Skeleton } from "./components/ui/skeleton";
+// base
+export { Toaster } from "./components/ui/sonner";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./components/ui/table";
+export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
+export { Textarea } from "./components/ui/textarea";
+export type { ActionProps } from "./components/uix/action";
+export { Action } from "./components/uix/action";
+export type { AlertProps } from "./components/uix/alert";
+// extend
+export { Alert } from "./components/uix/alert";
+export type { ConfirmProps } from "./components/uix/alert-dialog";
+export { useAlert } from "./components/uix/alert-dialog";
+export type { AvatarProps } from "./components/uix/avatar";
+export { Avatar } from "./components/uix/avatar";
+export type { BreadcrumbsItemProps, BreadcrumbsProps } from "./components/uix/breadcrumbs";
+export { Breadcrumbs, BreadcrumbsItem } from "./components/uix/breadcrumbs";
+export type { BroadcastChannelProviderProps } from "./components/uix/broadcast-channel-context";
+export { BroadcastChannelProvider, useBroadcastChannel } from "./components/uix/broadcast-channel-context";
+export type { ButtonProps } from "./components/uix/button";
+export { Button } from "./components/uix/button";
+export type { CardProps } from "./components/uix/card";
+export { Card } from "./components/uix/card";
+export type { CheckboxProps } from "./components/uix/checkbox";
+export { Checkbox } from "./components/uix/checkbox";
+export type { CheckboxGroupOptionProps, CheckboxGroupProps } from "./components/uix/checkbox-group";
+export { CheckboxGroup } from "./components/uix/checkbox-group";
+export type { ComboSelectOptionProps, ComboSelectProps } from "./components/uix/combo-select";
+export { ComboSelect } from "./components/uix/combo-select";
+export type { ConfigProviderProps } from "./components/uix/config-provider";
+export { ConfigProvider } from "./components/uix/config-provider";
+export type { DataTableColumn, DataTableProps } from "./components/uix/data-table";
+export { DataTable } from "./components/uix/data-table";
+export type { DatePickerProps } from "./components/uix/date-picker";
+export { DatePicker } from "./components/uix/date-picker";
+export type { DateRangePickerProps } from "./components/uix/date-range-picker";
+export { DateRangePicker } from "./components/uix/date-range-picker";
+export type { DialogProps } from "./components/uix/dialog";
+export { Dialog } from "./components/uix/dialog";
+export type { DividerProps } from "./components/uix/divider";
+export { Divider } from "./components/uix/divider";
+export type { DropdownMenuItemProps, DropdownProps } from "./components/uix/dropdown";
+export { Dropdown } from "./components/uix/dropdown";
+export type { EmptyProps } from "./components/uix/empty";
+export { Empty } from "./components/uix/empty";
+export type { FilterItemProps, FiltersProps } from "./components/uix/filters";
+export { Filters } from "./components/uix/filters";
+export type { FieldItem, FormInstance, FormProps, RenderProps } from "./components/uix/form";
+export { Form, FormItem } from "./components/uix/form";
+export type { ImageProps } from "./components/uix/image";
+export { Image } from "./components/uix/image";
+export type { LoadingProps } from "./components/uix/loading";
+export { Loading } from "./components/uix/loading";
+export { useMessage } from "./components/uix/message";
+export type { PaginationProps } from "./components/uix/pagination";
+export { Pagination } from "./components/uix/pagination";
+export type { SimpleRadioGroupOptionProps, SimpleRadioGroupProps } from "./components/uix/radio-group";
+export { SimpleRadioGroup } from "./components/uix/radio-group";
+export type { ResultProps } from "./components/uix/result";
+export { Result } from "./components/uix/result";
+export type { SelectOptionProps, SelectProps } from "./components/uix/select";
+export { Select } from "./components/uix/select";
+export { Space } from "./components/uix/space";
+export type { SpinProps } from "./components/uix/spin";
+export { Spin } from "./components/uix/spin";
+export type { StepsItemProps, StepsProps } from "./components/uix/steps";
+export { Steps, StepsItem } from "./components/uix/steps";
+export type { SwitchProps } from "./components/uix/switch";
+export { Switch } from "./components/uix/switch";
+export type { TooltipProps } from "./components/uix/tooltip";
+export { Tooltip } from "./components/uix/tooltip";
+export type { TreeData, TreeProps } from "./components/uix/tree";
+export { Tree } from "./components/uix/tree";
+export type { TreeSelectProps } from "./components/uix/tree-select";
+export { TreeSelect } from "./components/uix/tree-select";
+export type { TreeTableColumn, TreeTableProps } from "./components/uix/tree-table";
+export { TreeTable } from "./components/uix/tree-table";
+export type { UploaderProps } from "./components/uix/uploader";
+export { Uploader } from "./components/uix/uploader";
+export type { HandleProps, UploadFile } from "./components/uix/uploader/type";
+export type { ValueFormatterProps } from "./components/uix/value-formatter";
+export { register, ValueFormatter } from "./components/uix/value-formatter";
+// hooks
+export * from "./hooks";
+export * from "./lib";

package/src/lib/formatters.ts

@@ -0,0 +1,13 @@
+import day from "dayjs";
+
+// biome-ignore lint/suspicious/noExplicitAny: <v>
+export const time = (v: any, format = "YYYY-MM-DD HH:mm:ss") => {
+  if (!v) return "--";
+  const d = day(v);
+  return d.isValid() ? d.format(format) : "--";
+};
+
+// biome-ignore lint/suspicious/noExplicitAny: <v>
+export const defaultValue = (v: any) => {
+  return v === 0 ? v : v || "--";
+};

package/src/lib/index.ts

@@ -0,0 +1,4 @@
+export * from "./formatters";
+export * from "./is";
+export * from "./react-dom";
+export * from "./utils";

package/src/lib/is.ts

@@ -0,0 +1,6 @@
+const opt = Object.prototype.toString;
+
+// biome-ignore lint/suspicious/noExplicitAny: <isObject>
+export function isObject(obj: any): obj is { [key: string]: any } {
+  return opt.call(obj) === "[object Object]";
+}

package/src/lib/react-dom.ts

@@ -0,0 +1,98 @@
+/** biome-ignore-all lint/suspicious/noExplicitAny: <any> */
+
+import type { ReactElement } from "react";
+import ReactDOM from "react-dom";
+import { createRoot as reactDOMCreateRoot } from "react-dom/client";
+
+import { isObject } from "./is";
+
+type CreateRootFnType = (container: Element | DocumentFragment) => {
+  render: (container: ReactElement) => void;
+  unmount: () => void;
+  _unmount: () => void;
+};
+
+const reactDOMCreateRootCopy = reactDOMCreateRoot as CreateRootFnType;
+
+const __SECRET_INTERNALS__ = "__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED";
+
+const CopyReactDOM = ReactDOM as typeof ReactDOM & {
+  createRoot: CreateRootFnType;
+  // https://github.com/facebook/react/blob/4ff5f5719b348d9d8db14aaa49a48532defb4ab7/packages/react-dom/src/client/ReactDOM.js#L181
+  [__SECRET_INTERNALS__]: {
+    usingClientEntryPoint?: boolean;
+  };
+};
+
+let copyRender: (
+  app: ReactElement,
+  container: Element | DocumentFragment,
+) => {
+  render: (container: ReactElement) => void;
+  _unmount: () => void;
+};
+
+const isReact18 = Number(CopyReactDOM.version?.split(".")[0]) > 17;
+const isReact19 = Number(CopyReactDOM.version?.split(".")[0]) > 18;
+
+const updateUsingClientEntryPoint = (skipWarning?: boolean) => {
+  // https://github.com/facebook/react/blob/17806594cc28284fe195f918e8d77de3516848ec/packages/react-dom/npm/client.js#L10
+  // Avoid console warning
+  if (isObject(CopyReactDOM[__SECRET_INTERNALS__])) {
+    CopyReactDOM[__SECRET_INTERNALS__].usingClientEntryPoint = skipWarning;
+  }
+};
+
+let createRoot: CreateRootFnType;
+try {
+  createRoot = CopyReactDOM.createRoot;
+} catch (_) {
+  //
+}
+
+if (isReact19) {
+  copyRender = (app: ReactElement, container: Element | DocumentFragment) => {
+    updateUsingClientEntryPoint(true);
+    const root = reactDOMCreateRootCopy(container);
+    updateUsingClientEntryPoint(false);
+
+    root.render(app);
+
+    root._unmount = () => {
+      setTimeout(() => {
+        root?.unmount?.();
+      });
+    };
+    return root;
+  };
+} else if (isReact18) {
+  copyRender = (app: ReactElement, container: Element | DocumentFragment) => {
+    updateUsingClientEntryPoint(true);
+    const root = createRoot(container);
+    updateUsingClientEntryPoint(false);
+
+    root.render(app);
+
+    root._unmount = () => {
+      setTimeout(() => {
+        root?.unmount?.();
+      });
+    };
+    return root;
+  };
+} else {
+  copyRender = (app: ReactElement, container: Element | DocumentFragment) => {
+    (CopyReactDOM as any).render(app, container);
+
+    return {
+      render: (app: ReactElement) => {
+        (CopyReactDOM as any).render(app, container);
+      },
+      _unmount() {
+        (CopyReactDOM as any).unmountComponentAtNode(container);
+      },
+    };
+  };
+}
+
+export const render = copyRender;

package/src/lib/utils.ts

@@ -0,0 +1,39 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// 简单的MD5实现（用于生成存储key）
+export function md5Hash(text: string): string {
+  // 简化版MD5哈希算法
+  let hash = 0;
+  if (text.length === 0) return hash.toString();
+
+  for (let i = 0; i < text.length; i++) {
+    const char = text.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash &= hash; // 转换为32位整数
+  }
+
+  // 转换为16进制并确保长度
+  return Math.abs(hash).toString(16).padStart(8, "0");
+}
+
+// 生成DataTable列配置的存储key
+export function generateColumnStorageKey(
+  columns: Array<{ accessorKey?: string | number | symbol; id?: string }>,
+): string {
+  const keys = columns
+    .map((col) => {
+      const accessorKey = col.accessorKey ? String(col.accessorKey) : "";
+      const id = col.id || "";
+      return accessorKey || id;
+    })
+    .filter((key) => key)
+    .sort()
+    .join(",");
+
+  return md5Hash(keys);
+}