@choice-ui/react 1.7.6 → 1.7.7

package/dist/components/colors/src/libraries/libraries.js

@@ -0,0 +1,461 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { ScrollArea } from "../../../scroll-area/dist/index.js";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import Fuse from "../../../../node_modules/.pnpm/fuse.js@7.1.0/node_modules/fuse.js/dist/fuse.js";
+import { forwardRef, useState, useMemo, useRef, useEffect } from "react";
+import { VirtualizedGridRow } from "./components/virtualized-grid-row.js";
+import { VirtualizedHeader } from "./components/virtualized-header.js";
+import { useLibraryCategories } from "./hooks/use-category-options.js";
+import { LibrariesHeader } from "./libraries-header.js";
+import { LibraryItem } from "./library-item/library-item.js";
+import { getColorPickerCursor } from "../hooks/use-cursor.js";
+import { tcx } from "../../../../shared/utils/tcx/tcx.js";
+const Libraries = forwardRef(function Libraries2(props, ref) {
+  const {
+    // 数据源
+    variables = [],
+    styles = [],
+    features: userFeatures = {},
+    // 分类
+    category = "all",
+    onCategoryChange,
+    // 显示类型
+    displayType: initialDisplayType = "LIST",
+    onDisplayTypeChange,
+    // 选择和变更
+    duplicateIndex,
+    onSwatchChange,
+    onLibraryChange,
+    selectedItem,
+    // 基础属性
+    className,
+    headerActionElement
+  } = props;
+  const features = {
+    containerWidth: 240,
+    variables: true,
+    styles: true,
+    ...userFeatures
+  };
+  const [searchTerm, setSearchTerm] = useState("");
+  const [currentDisplayType, setCurrentDisplayType] = useState(initialDisplayType);
+  const categoryOptions = useLibraryCategories({
+    variables,
+    styles
+  });
+  const filteredItems = useMemo(() => {
+    if (!searchTerm) {
+      if (category === "all") {
+        return { variables, styles };
+      }
+      return {
+        variables: variables.filter((v) => {
+          const [cat] = v.masterId.split("/");
+          return cat === category;
+        }),
+        styles: styles.filter((s) => {
+          const [cat] = s.fileId.split("/");
+          return cat === category;
+        })
+      };
+    }
+    const fuseInstance = new Fuse([...variables, ...styles], {
+      keys: ["name", "value", "masterId", "fileId", "fills.color"],
+      threshold: 0.3,
+      ignoreLocation: true
+    });
+    const searchResults = fuseInstance.search(searchTerm);
+    const searchedItems = searchResults.map((result) => result.item);
+    const filteredVariables = searchedItems.filter((item) => "masterId" in item);
+    const filteredStyles = searchedItems.filter((item) => "fileId" in item);
+    if (category === "all") {
+      return { variables: filteredVariables, styles: filteredStyles };
+    }
+    return {
+      variables: filteredVariables.filter((v) => {
+        const [cat] = v.masterId.split("/");
+        return cat === category;
+      }),
+      styles: filteredStyles.filter((s) => {
+        const [cat] = s.fileId.split("/");
+        return cat === category;
+      })
+    };
+  }, [category, searchTerm, variables, styles]);
+  const virtualizedItems = useMemo(() => {
+    const { variables: variables2, styles: styles2 } = filteredItems;
+    const items = [];
+    let isFirstCategory = true;
+    if (features.variables && variables2.length > 0) {
+      const variablesByCategory = /* @__PURE__ */ new Map();
+      variables2.forEach((variable) => {
+        const [category2, subcategory] = variable.masterId.split("/");
+        if (!variablesByCategory.has(category2)) {
+          variablesByCategory.set(category2, /* @__PURE__ */ new Map());
+        }
+        const subgroup = variablesByCategory.get(category2);
+        if (!subgroup.has(subcategory)) {
+          subgroup.set(subcategory, []);
+        }
+        subgroup.get(subcategory).push(variable);
+      });
+      variablesByCategory.forEach((subcategories, categoryName) => {
+        if (category === "all") {
+          items.push({
+            type: "header",
+            title: categoryName,
+            headerType: "category",
+            isFirst: isFirstCategory
+          });
+          isFirstCategory = false;
+        }
+        if (category === "all" || categoryName === category) {
+          subcategories.forEach((variables3, subcategory) => {
+            if (subcategory) {
+              items.push({
+                type: "header",
+                title: subcategory,
+                headerType: "subcategory"
+              });
+            }
+            variables3.forEach((variable, index) => {
+              items.push({
+                type: "item",
+                item: variable,
+                itemType: "VARIABLE",
+                index
+              });
+            });
+          });
+        }
+      });
+    }
+    if (features.styles && styles2.length > 0) {
+      const stylesByCategory = /* @__PURE__ */ new Map();
+      styles2.forEach((style2) => {
+        const [category2, subcategory] = style2.fileId.split("/");
+        if (!stylesByCategory.has(category2)) {
+          stylesByCategory.set(category2, /* @__PURE__ */ new Map());
+        }
+        const subgroup = stylesByCategory.get(category2);
+        if (!subgroup.has(subcategory)) {
+          subgroup.set(subcategory, []);
+        }
+        subgroup.get(subcategory).push(style2);
+      });
+      stylesByCategory.forEach((subcategories, categoryName) => {
+        if (category === "all") {
+          items.push({
+            type: "header",
+            title: categoryName,
+            headerType: "category",
+            isFirst: isFirstCategory
+          });
+          isFirstCategory = false;
+        }
+        if (category === "all" || categoryName === category) {
+          subcategories.forEach((styles3, subcategory) => {
+            if (subcategory) {
+              items.push({
+                type: "header",
+                title: subcategory,
+                headerType: "subcategory"
+              });
+            }
+            styles3.forEach((style2, index) => {
+              items.push({
+                type: "item",
+                item: style2,
+                itemType: "STYLE",
+                index
+              });
+            });
+          });
+        }
+      });
+    }
+    return items;
+  }, [filteredItems, features.variables, features.styles, category]);
+  const gridItems = useMemo(() => {
+    const items = virtualizedItems;
+    const result = [];
+    let currentRow = [];
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      if (item.type === "header") {
+        if (currentRow.length > 0) {
+          result.push(currentRow);
+          currentRow = [];
+        }
+        result.push([item]);
+      } else if (item.type === "item") {
+        currentRow.push(item);
+        if (currentRow.length === 6) {
+          result.push(currentRow);
+          currentRow = [];
+        }
+      }
+    }
+    if (currentRow.length > 0) {
+      result.push(currentRow);
+    }
+    return result;
+  }, [virtualizedItems]);
+  const lastInternalSelectedRef = useRef(null);
+  const handleInternalSelect = (item) => {
+    lastInternalSelectedRef.current = {
+      ...item,
+      displayType: currentDisplayType
+    };
+    onLibraryChange == null ? void 0 : onLibraryChange(item);
+  };
+  useEffect(() => {
+    var _a, _b, _c;
+    if (!selectedItem || !parentRef.current) return;
+    if (((_a = lastInternalSelectedRef.current) == null ? void 0 : _a.type) === selectedItem.type && ((_b = lastInternalSelectedRef.current) == null ? void 0 : _b.item.id) === selectedItem.item.id && ((_c = lastInternalSelectedRef.current) == null ? void 0 : _c.displayType) === currentDisplayType) {
+      return;
+    }
+    const items = virtualizedItems;
+    const itemIndex = items.findIndex(
+      (item) => item.type === "item" && item.itemType === selectedItem.type && item.item.id === selectedItem.item.id
+    );
+    requestAnimationFrame(() => {
+      if (itemIndex !== -1) {
+        if (currentDisplayType === "LIST") {
+          listVirtualizer.scrollToIndex(itemIndex, { align: "center" });
+        } else {
+          const rowSize = currentDisplayType === "LARGE_GRID" ? 6 : 6;
+          const displayType = currentDisplayType;
+          if (displayType === "LARGE_GRID") {
+            const gridRows = gridItems;
+            let targetRowIndex = -1;
+            for (let i = 0; i < gridRows.length; i++) {
+              const row = gridRows[i];
+              const foundItem = row.find(
+                (item) => item.type === "item" && item.itemType === selectedItem.type && item.item.id === selectedItem.item.id
+              );
+              if (foundItem) {
+                targetRowIndex = i;
+                break;
+              }
+            }
+            if (targetRowIndex !== -1) {
+              rowVirtualizer.scrollToIndex(targetRowIndex, { align: "center" });
+            }
+          } else {
+            const rowIndex = Math.floor(itemIndex / rowSize);
+            rowVirtualizer.scrollToIndex(rowIndex, { align: "center" });
+          }
+        }
+      }
+    });
+  }, [selectedItem, currentDisplayType]);
+  useEffect(() => {
+    const scrollElement = parentRef.current;
+    if (scrollElement) {
+      scrollElement.scrollTop = 0;
+    }
+  }, [category]);
+  const allowDisplayTypeSwitch = useMemo(() => {
+    return (variables == null ? void 0 : variables.some((v) => v.type === "color")) || (styles == null ? void 0 : styles.some((s) => s.type === "PAINT"));
+  }, [variables, styles]);
+  useEffect(() => {
+    if (allowDisplayTypeSwitch && onDisplayTypeChange) {
+      onDisplayTypeChange(currentDisplayType);
+    }
+  }, [currentDisplayType, allowDisplayTypeSwitch, onDisplayTypeChange]);
+  useEffect(() => {
+    if (allowDisplayTypeSwitch && initialDisplayType !== currentDisplayType) {
+      setCurrentDisplayType(initialDisplayType);
+    }
+  }, [initialDisplayType, allowDisplayTypeSwitch]);
+  const inputRef = useRef(null);
+  const parentRef = useRef(null);
+  const virtualItemsCount = useMemo(() => {
+    return virtualizedItems.length;
+  }, [virtualizedItems, category, searchTerm]);
+  const gridItemsCount = useMemo(() => {
+    return gridItems.length;
+  }, [gridItems, category, searchTerm]);
+  const listVirtualizer = useVirtualizer({
+    count: virtualItemsCount,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (index) => {
+      const item = virtualizedItems[index];
+      if (item.type === "header") {
+        return item.headerType === "category" && !item.isFirst ? 40 : 32;
+      }
+      return 32;
+    },
+    overscan: 5,
+    measureElement: (element) => {
+      return (element == null ? void 0 : element.getBoundingClientRect().height) ?? 32;
+    }
+  });
+  const rowVirtualizer = useVirtualizer({
+    count: gridItemsCount,
+    getScrollElement: () => parentRef.current,
+    estimateSize: (index) => {
+      const row = gridItems[index];
+      const firstItem = row[0];
+      if (firstItem.type === "header") {
+        return firstItem.headerType === "category" && !firstItem.isFirst ? 48 : 32;
+      }
+      return 36;
+    },
+    overscan: 5,
+    measureElement: (element) => {
+      return (element == null ? void 0 : element.getBoundingClientRect().height) ?? 32;
+    }
+  });
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      if (listVirtualizer && rowVirtualizer) {
+        listVirtualizer.measure();
+        rowVirtualizer.measure();
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    listVirtualizer,
+    rowVirtualizer,
+    virtualItemsCount,
+    gridItemsCount,
+    category,
+    searchTerm,
+    currentDisplayType
+  ]);
+  const isItemSelected = (item, type) => {
+    if (!selectedItem) return false;
+    return selectedItem.type === type && selectedItem.item.id === item.id;
+  };
+  const cursor = getColorPickerCursor();
+  const style = useMemo(() => {
+    const measuredListHeight = listVirtualizer.getTotalSize();
+    const measuredRowHeight = rowVirtualizer.getTotalSize();
+    const estimatedListHeight = virtualItemsCount * 32;
+    const estimatedRowHeight = gridItemsCount * 36;
+    return {
+      "--color-picker-cursor": currentDisplayType === "LARGE_GRID" ? `url('${cursor}') 8 24, auto` : void 0,
+      "--height": tcx(
+        currentDisplayType === "LIST" && (measuredListHeight || estimatedListHeight) + 32 + "px",
+        currentDisplayType === "LARGE_GRID" && (measuredRowHeight || estimatedRowHeight) + 32 + "px"
+      ),
+      "--width": ((features == null ? void 0 : features.containerWidth) ?? 240) + "px"
+    };
+  }, [
+    currentDisplayType,
+    cursor,
+    features == null ? void 0 : features.containerWidth,
+    listVirtualizer,
+    rowVirtualizer,
+    virtualItemsCount,
+    gridItemsCount
+  ]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      LibrariesHeader,
+      {
+        searchValue: searchTerm,
+        onSearchChange: setSearchTerm,
+        displayType: currentDisplayType,
+        onDisplayTypeChange: setCurrentDisplayType,
+        inputRef,
+        categoryOptions,
+        value: category,
+        onChange: onCategoryChange,
+        allowDisplayTypeSwitch,
+        actionElement: headerActionElement
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ScrollArea,
+      {
+        ref,
+        className: tcx("flex h-96 flex-col", className),
+        style,
+        children: /* @__PURE__ */ jsx(
+          ScrollArea.Viewport,
+          {
+            ref: parentRef,
+            className: "relative flex h-full w-(--width) flex-col",
+            children: /* @__PURE__ */ jsx(ScrollArea.Content, { className: "h-(--height) flex-none", children: currentDisplayType === "LIST" ? listVirtualizer.getVirtualItems().map((virtualRow) => {
+              const item = virtualizedItems[virtualRow.index];
+              if (item.type === "header") {
+                return /* @__PURE__ */ jsx(
+                  VirtualizedHeader,
+                  {
+                    title: item.title,
+                    size: virtualRow.size,
+                    start: virtualRow.start,
+                    headerType: item.headerType,
+                    isFirst: item.isFirst
+                  },
+                  `header-${virtualRow.index}`
+                );
+              }
+              return /* @__PURE__ */ jsx(
+                LibraryItem,
+                {
+                  "data-item-id": item.item.id,
+                  item: item.item,
+                  libraryType: item.itemType,
+                  isSelected: isItemSelected(item.item, item.itemType),
+                  isDuplicate: duplicateIndex === item.index,
+                  onSwatchChange,
+                  onLibraryChange: handleInternalSelect,
+                  displayType: currentDisplayType,
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: `${virtualRow.size}px`,
+                    transform: `translateY(${virtualRow.start + 16}px)`
+                  }
+                },
+                item.item.id || `item-${item.itemType}-${item.index}`
+              );
+            }) : rowVirtualizer.getVirtualItems().map((virtualRow) => {
+              const row = gridItems[virtualRow.index];
+              const isHeader = row[0].type === "header";
+              if (isHeader) {
+                const headerItem = row[0];
+                return /* @__PURE__ */ jsx(
+                  VirtualizedHeader,
+                  {
+                    title: headerItem.title,
+                    size: virtualRow.size,
+                    start: virtualRow.start,
+                    headerType: headerItem.headerType,
+                    isFirst: headerItem.isFirst
+                  },
+                  `header-${virtualRow.index}`
+                );
+              }
+              return /* @__PURE__ */ jsx(
+                VirtualizedGridRow,
+                {
+                  row,
+                  size: virtualRow.size,
+                  start: virtualRow.start,
+                  duplicateIndex,
+                  onSwatchChange,
+                  onLibraryChange: handleInternalSelect,
+                  displayType: currentDisplayType,
+                  offset: 16,
+                  selectedItem
+                },
+                `row-${virtualRow.index}`
+              );
+            }) })
+          }
+        )
+      }
+    )
+  ] });
+});
+Libraries.displayName = "Libraries";
+export {
+  Libraries
+};

package/dist/components/colors/src/libraries/library-color-swatch.d.ts

@@ -0,0 +1,21 @@
+import { RGB, Style, Variable, LibrariesType } from '../types';
+interface IfLibraryColorSwatchProps {
+    category?: string;
+    className?: string;
+    onCategoryChange?: (category: string) => void;
+    onLibraryChange?: (value: {
+        item: Variable | Style;
+        type: LibrariesType;
+    }) => void;
+    onSwatchChange?: (value: {
+        alpha: number;
+        color: RGB;
+    }) => void;
+    selectedItem?: {
+        item: Variable | Style;
+        type: LibrariesType;
+    } | null;
+    variables?: Variable[];
+}
+export declare const IfLibraryColorSwatch: import('react').ForwardRefExoticComponent<IfLibraryColorSwatchProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/colors/src/libraries/library-item/index.d.ts

@@ -0,0 +1,4 @@
+export * from './library-item';
+export * from './library-list-item';
+export * from './style-items';
+export * from './variable-items';

package/dist/components/colors/src/libraries/library-item/library-item.d.ts

@@ -0,0 +1,21 @@
+import { HTMLProps } from 'react';
+import { RGB, Style, Variable, LibrariesDisplayType, LibrariesType } from '../../types';
+interface LibraryItemProps extends Omit<HTMLProps<HTMLDivElement>, "onSelect"> {
+    displayType: LibrariesDisplayType;
+    isDuplicate?: boolean;
+    isSelected?: boolean;
+    item: Variable | Style;
+    libraryType: LibrariesType;
+    onLibraryChange?: (value: {
+        item: Variable | Style;
+        type: LibrariesType;
+    }) => void;
+    onSetupPreferencesClick?: (id: string) => void;
+    onSwatchChange?: (value: {
+        alpha: number;
+        color: RGB;
+    }) => void;
+    setupPreferencesState$?: string | null;
+}
+export declare const LibraryItem: import('react').ForwardRefExoticComponent<Omit<LibraryItemProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/colors/src/libraries/library-item/library-item.js

@@ -0,0 +1,151 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { IconButton } from "../../../../icon-button/dist/index.js";
+import { SetupPreferences } from "@choiceform/icons-react";
+import { forwardRef, useMemo } from "react";
+import { colorLibrariesItemTv } from "../tv.js";
+import { StyleEffectItem, StyleTextItem, StylePaintItem } from "./style-items.js";
+import { VariableEnumItem, VariableStringItem, VariableBooleanItem, VariableNumberItem, VariableColorItem } from "./variable-items.js";
+import { usePaletteColor } from "../hooks/use-palette-color.js";
+const LibraryItem = forwardRef(
+  function LibraryItem2(props, ref) {
+    const {
+      item,
+      isSelected,
+      isDuplicate,
+      displayType,
+      libraryType,
+      onLibraryChange,
+      onSwatchChange,
+      setupPreferencesState$,
+      onSetupPreferencesClick,
+      ...rest
+    } = props;
+    const variableType = useMemo(() => item.type, [item]);
+    const styleType = useMemo(() => item.type, [item]);
+    const shouldColorPreview = useMemo(() => {
+      return libraryType === "VARIABLE" && variableType === "color" || libraryType === "STYLE" && styleType === "PAINT";
+    }, [libraryType, variableType, styleType]);
+    const { paletteColor } = usePaletteColor({
+      item,
+      libraryType
+    });
+    const styles = colorLibrariesItemTv({
+      displayType,
+      isDuplicate,
+      libraryType,
+      isSelected
+    });
+    const paletteSize = useMemo(() => displayType === "LARGE_GRID" ? 28 : 16, [displayType]);
+    const handleLibraryClick = () => {
+      onLibraryChange == null ? void 0 : onLibraryChange({ type: libraryType, item });
+    };
+    const handleSetupPreferencesClick = () => {
+      onSetupPreferencesClick == null ? void 0 : onSetupPreferencesClick(item.id);
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: styles.container(),
+        onClick: displayType === "SMALL_GRID" ? () => onSwatchChange == null ? void 0 : onSwatchChange(paletteColor) : handleLibraryClick,
+        ...rest,
+        children: [
+          (() => {
+            if (libraryType === "VARIABLE") {
+              switch (variableType) {
+                case "color":
+                  return /* @__PURE__ */ jsx(
+                    VariableColorItem,
+                    {
+                      item,
+                      libraryType,
+                      displayType,
+                      onSwatchChange,
+                      paletteSize,
+                      isSelected,
+                      isDuplicate
+                    }
+                  );
+                case "number":
+                  return /* @__PURE__ */ jsx(VariableNumberItem, {});
+                case "boolean":
+                  return /* @__PURE__ */ jsx(VariableBooleanItem, {});
+                case "string":
+                  return /* @__PURE__ */ jsx(VariableStringItem, {});
+                case "enum":
+                  return /* @__PURE__ */ jsx(VariableEnumItem, {});
+                default:
+                  return null;
+              }
+            }
+            if (libraryType === "STYLE") {
+              switch (styleType) {
+                case "PAINT":
+                  return /* @__PURE__ */ jsx(
+                    StylePaintItem,
+                    {
+                      item,
+                      libraryType,
+                      displayType,
+                      paletteSize,
+                      isSelected,
+                      isDuplicate
+                    }
+                  );
+                case "TEXT":
+                  return /* @__PURE__ */ jsx(StyleTextItem, { item });
+                case "EFFECT":
+                  return /* @__PURE__ */ jsx(StyleEffectItem, { item });
+                default:
+                  return null;
+              }
+            }
+            return null;
+          })(),
+          displayType === "LIST" && /* @__PURE__ */ jsxs("div", { className: styles.wrapper(), children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: libraryType === "VARIABLE" ? styles.variableName() : styles.styleName(),
+                children: item.name
+              }
+            ),
+            !shouldColorPreview && (() => {
+              if (libraryType === "VARIABLE") {
+                return /* @__PURE__ */ jsx("span", { className: styles.variableValue(), children: String(item.value) });
+              }
+              if (libraryType === "STYLE" && styleType === "TEXT") {
+                const textStyle = item;
+                return /* @__PURE__ */ jsxs("span", { className: styles.styleValue(), children: [
+                  ` · `,
+                  textStyle.fontSize,
+                  `/`,
+                  textStyle.lineHeight.number
+                ] });
+              }
+              return null;
+            })()
+          ] }),
+          libraryType === "STYLE" && displayType === "LIST" && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              tooltip: {
+                content: "Setup Preferences"
+              },
+              className: styles.itemSetup(),
+              onClick: (e) => {
+                e.stopPropagation();
+                handleSetupPreferencesClick();
+              },
+              children: /* @__PURE__ */ jsx(SetupPreferences, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+LibraryItem.displayName = "LibraryItem";
+export {
+  LibraryItem
+};

package/dist/components/colors/src/libraries/library-item/library-list-item.d.ts

@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+type Props = ComponentProps<"div"> & {
+    isSelected: boolean;
+};
+export declare const LibraryListItem: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/colors/src/libraries/library-item/style-items.d.ts

@@ -0,0 +1,17 @@
+import { EffectStyle, Style, LibrariesDisplayType, LibrariesType } from '../../types';
+interface StyleItemProps {
+    displayType?: LibrariesDisplayType;
+    isDuplicate?: boolean;
+    isSelected?: boolean;
+    item: Style;
+    libraryType?: LibrariesType;
+    paletteSize?: number;
+    previewUrl?: string;
+}
+export declare const StylePaintItem: ({ item, libraryType, displayType, paletteSize, isSelected, isDuplicate, }: StyleItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StyleTextItem: ({ item, previewUrl }: StyleItemProps) => import("react/jsx-runtime").JSX.Element;
+interface StyleEffectItemProps extends StyleItemProps {
+    item: EffectStyle;
+}
+export declare const StyleEffectItem: ({ item }: StyleEffectItemProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};