@fileverse-dev/fortune-react 1.0.4 → 1.0.6

package/es/components/ZoomControl/index.js

@@ -0,0 +1,111 @@
+import React, { useCallback, useContext, useRef, useState } from "react";
+import { MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, getSheetIndex } from "@fileverse-dev/fortune-core";
+import WorkbookContext from "../../context";
+import SVGIcon from "../SVGIcon";
+import { useOutsideClick } from "../../hooks/useOutsideClick";
+import "./index.css";
+var presets = [{
+  text: "10%",
+  value: 0.1
+}, {
+  text: "30%",
+  value: 0.3
+}, {
+  text: "50%",
+  value: 0.5
+}, {
+  text: "70%",
+  value: 0.7
+}, {
+  text: "100%",
+  value: 1
+}, {
+  text: "150%",
+  value: 1.5
+}, {
+  text: "200%",
+  value: 2
+}, {
+  text: "300%",
+  value: 3
+}, {
+  text: "400%",
+  value: 4
+}];
+var ZoomControl = function ZoomControl() {
+  var _a = useContext(WorkbookContext),
+    context = _a.context,
+    setContext = _a.setContext;
+  var menuRef = useRef(null);
+  var _b = useState(false),
+    radioMenuOpen = _b[0],
+    setRadioMenuOpen = _b[1];
+  useOutsideClick(menuRef, function () {
+    setRadioMenuOpen(false);
+  }, []);
+  var zoomTo = useCallback(function (val) {
+    val = parseFloat(val.toFixed(1));
+    if (val > MAX_ZOOM_RATIO || val < MIN_ZOOM_RATIO) {
+      return;
+    }
+    setContext(function (ctx) {
+      var index = getSheetIndex(ctx, ctx.currentSheetId);
+      if (index == null) {
+        return;
+      }
+      ctx.luckysheetfile[index].zoomRatio = val;
+      ctx.zoomRatio = val;
+    }, {
+      noHistory: true
+    });
+  }, [setContext]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fortune-zoom-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-zoom-button",
+    onClick: function onClick(e) {
+      zoomTo(context.zoomRatio - 0.1);
+      e.stopPropagation();
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: "minus",
+    width: 16,
+    height: 16
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-zoom-ratio"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fortune-zoom-ratio-current fortune-zoom-button",
+    onClick: function onClick() {
+      return setRadioMenuOpen(true);
+    },
+    tabIndex: 0
+  }, (context.zoomRatio * 100).toFixed(0), "%"), radioMenuOpen && (/*#__PURE__*/React.createElement("div", {
+    className: "fortune-zoom-ratio-menu",
+    ref: menuRef
+  }, presets.map(function (v) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "fortune-zoom-ratio-item",
+      key: v.text,
+      onClick: function onClick(e) {
+        zoomTo(v.value);
+        e.preventDefault();
+      },
+      tabIndex: 0
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "fortune-zoom-ratio-text"
+    }, v.text));
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "fortune-zoom-button",
+    onClick: function onClick(e) {
+      zoomTo(context.zoomRatio + 0.1);
+      e.stopPropagation();
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(SVGIcon, {
+    name: "plus",
+    width: 16,
+    height: 16
+  })));
+};
+export default ZoomControl;

package/{dist/packages/react/src → es}/components/index.d.ts

@@ -1,4 +1,4 @@
-import Workbook from "./Workbook";
-export { Workbook };
-export type { WorkbookInstance } from "./Workbook";
-export * from "@fileverse-dev/formulajs/crypto-constants";
+import Workbook from "./Workbook";
+export { Workbook };
+export type { WorkbookInstance } from "./Workbook";
+export * from "@fileverse-dev/formulajs/crypto-constants";

package/es/components/index.js

@@ -0,0 +1,3 @@
+import Workbook from "./Workbook";
+export { Workbook };
+export * from "@fileverse-dev/formulajs/crypto-constants";

package/{dist/packages/react/src → es}/constants.d.ts

@@ -1 +1 @@
-export declare const API_KEY_PLACEHOLDER: Record<string, string>;
+export declare const API_KEY_PLACEHOLDER: Record<string, string>;

package/es/constants.js

@@ -0,0 +1,4 @@
+import { SERVICE_API_KEY } from "@fileverse-dev/formulajs/crypto-constants";
+export var API_KEY_PLACEHOLDER = Object.fromEntries(Object.values(SERVICE_API_KEY).map(function (key) {
+  return [key, "".concat(key.replace(/_/g, " ").replace(/\bAPI\b/, "API key"))];
+}));

package/{dist/packages/react/src → es}/context/index.d.ts

@@ -1,25 +1,25 @@
-import React from "react";
-import { Context, Settings, GlobalCache, PatchOptions } from "@fileverse-dev/fortune-core";
-export type RefValues = {
-    globalCache: GlobalCache;
-    cellInput: React.MutableRefObject<HTMLDivElement | null>;
-    fxInput: React.MutableRefObject<HTMLDivElement | null>;
-    canvas: React.MutableRefObject<HTMLCanvasElement | null>;
-    scrollbarX: React.MutableRefObject<HTMLDivElement | null>;
-    scrollbarY: React.MutableRefObject<HTMLDivElement | null>;
-    cellArea: React.MutableRefObject<HTMLDivElement | null>;
-    workbookContainer: React.MutableRefObject<HTMLDivElement | null>;
-};
-export type SetContextOptions = {
-    noHistory?: boolean;
-    logPatch?: boolean;
-} & PatchOptions;
-declare const WorkbookContext: React.Context<{
-    context: Context;
-    setContext: (recipe: (ctx: Context) => void, options?: SetContextOptions) => void;
-    settings: Required<Settings>;
-    refs: RefValues;
-    handleUndo: () => void;
-    handleRedo: () => void;
-}>;
-export default WorkbookContext;
+import React from "react";
+import { Context, Settings, GlobalCache, PatchOptions } from "@fileverse-dev/fortune-core";
+export type RefValues = {
+    globalCache: GlobalCache;
+    cellInput: React.MutableRefObject<HTMLDivElement | null>;
+    fxInput: React.MutableRefObject<HTMLDivElement | null>;
+    canvas: React.MutableRefObject<HTMLCanvasElement | null>;
+    scrollbarX: React.MutableRefObject<HTMLDivElement | null>;
+    scrollbarY: React.MutableRefObject<HTMLDivElement | null>;
+    cellArea: React.MutableRefObject<HTMLDivElement | null>;
+    workbookContainer: React.MutableRefObject<HTMLDivElement | null>;
+};
+export type SetContextOptions = {
+    noHistory?: boolean;
+    logPatch?: boolean;
+} & PatchOptions;
+declare const WorkbookContext: React.Context<{
+    context: Context;
+    setContext: (recipe: (ctx: Context) => void, options?: SetContextOptions) => void;
+    settings: Required<Settings>;
+    refs: RefValues;
+    handleUndo: () => void;
+    handleRedo: () => void;
+}>;
+export default WorkbookContext;

package/es/context/index.js

@@ -0,0 +1,34 @@
+import React from "react";
+import { defaultContext, defaultSettings } from "@fileverse-dev/fortune-core";
+var defaultRefs = {
+  globalCache: {
+    undoList: [],
+    redoList: []
+  },
+  cellInput: /*#__PURE__*/React.createRef(),
+  fxInput: /*#__PURE__*/React.createRef(),
+  canvas: /*#__PURE__*/React.createRef(),
+  cellArea: /*#__PURE__*/React.createRef(),
+  workbookContainer: /*#__PURE__*/React.createRef()
+};
+var WorkbookContext = /*#__PURE__*/React.createContext({
+  context: defaultContext(defaultRefs),
+  setContext: function setContext() {},
+  settings: defaultSettings,
+  handleUndo: function handleUndo() {},
+  handleRedo: function handleRedo() {},
+  refs: {
+    globalCache: {
+      undoList: [],
+      redoList: []
+    },
+    cellInput: /*#__PURE__*/React.createRef(),
+    fxInput: /*#__PURE__*/React.createRef(),
+    canvas: /*#__PURE__*/React.createRef(),
+    scrollbarX: /*#__PURE__*/React.createRef(),
+    scrollbarY: /*#__PURE__*/React.createRef(),
+    cellArea: /*#__PURE__*/React.createRef(),
+    workbookContainer: /*#__PURE__*/React.createRef()
+  }
+});
+export default WorkbookContext;

package/{dist/packages/react/src → es}/context/modal.d.ts

@@ -1,10 +1,10 @@
-import React from "react";
-declare const ModalContext: React.Context<{
-    component: React.ReactNode;
-    showModal: (c: React.ReactNode) => void;
-    hideModal: () => void;
-}>;
-declare const ModalProvider: React.FC<{
-    children?: React.ReactNode;
-}>;
-export { ModalContext, ModalProvider };
+import React from "react";
+declare const ModalContext: React.Context<{
+    component: React.ReactNode;
+    showModal: (c: React.ReactNode) => void;
+    hideModal: () => void;
+}>;
+declare const ModalProvider: React.FC<{
+    children?: React.ReactNode;
+}>;
+export { ModalContext, ModalProvider };

package/es/context/modal.js

@@ -0,0 +1,43 @@
+import React, { useCallback, useState, useMemo } from "react";
+var ModalContext = /*#__PURE__*/React.createContext({
+  component: null,
+  showModal: function showModal() {},
+  hideModal: function hideModal() {}
+});
+var ModalProvider = function ModalProvider(_a) {
+  var children = _a.children;
+  var _b = useState(null),
+    component = _b[0],
+    setComponent = _b[1];
+  var showModal = useCallback(function (c) {
+    setComponent(c);
+  }, []);
+  var hideModal = useCallback(function () {
+    setComponent(null);
+  }, []);
+  var providerValue = useMemo(function () {
+    return {
+      component: null,
+      showModal: showModal,
+      hideModal: hideModal
+    };
+  }, [hideModal, showModal]);
+  return /*#__PURE__*/React.createElement(ModalContext.Provider, {
+    value: providerValue
+  }, children, component && (/*#__PURE__*/React.createElement("div", {
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    },
+    onMouseMove: function onMouseMove(e) {
+      return e.stopPropagation();
+    },
+    onMouseUp: function onMouseUp(e) {
+      return e.stopPropagation();
+    },
+    onContextMenu: function onContextMenu(e) {
+      return e.stopPropagation();
+    },
+    className: "fortune-popover-backdrop fortune-modal-container"
+  }, component)));
+};
+export { ModalContext, ModalProvider };

package/{dist/packages/react/src → es}/hooks/useAlert.d.ts

@@ -1,4 +1,4 @@
-export declare function useAlert(): {
-    showAlert: (message: string, type?: "ok" | "yesno", onOk?: () => void, onCancel?: () => void) => void;
-    hideAlert: () => void;
-};
+export declare function useAlert(): {
+    showAlert: (message: string, type?: "ok" | "yesno", onOk?: () => void, onCancel?: () => void) => void;
+    hideAlert: () => void;
+};

package/es/hooks/useAlert.js

@@ -0,0 +1,28 @@
+import React, { useContext, useCallback } from "react";
+import MessageBox from "../components/MessageBox";
+import { ModalContext } from "../context/modal";
+export function useAlert() {
+  var _a = useContext(ModalContext),
+    showModal = _a.showModal,
+    hideModal = _a.hideModal;
+  var showAlert = useCallback(function (message, type, onOk, onCancel) {
+    if (type === void 0) {
+      type = "ok";
+    }
+    if (onOk === void 0) {
+      onOk = hideModal;
+    }
+    if (onCancel === void 0) {
+      onCancel = hideModal;
+    }
+    showModal(/*#__PURE__*/React.createElement(MessageBox, {
+      type: type,
+      onOk: onOk,
+      onCancel: onCancel
+    }, message));
+  }, [hideModal, showModal]);
+  return {
+    showAlert: showAlert,
+    hideAlert: hideModal
+  };
+}

package/{dist/packages/react/src → es}/hooks/useDialog.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-export declare function useDialog(): {
-    showDialog: (content: string | React.ReactNode, type?: "ok" | "yesno", title?: string | React.ReactNode, okLabel?: string, cancelLabel?: string, onOk?: () => void, onCancel?: () => void) => void;
-    hideDialog: () => void;
-};
+import React from "react";
+export declare function useDialog(): {
+    showDialog: (content: string | React.ReactNode, type?: "ok" | "yesno", title?: string | React.ReactNode, okLabel?: string, cancelLabel?: string, onOk?: () => void, onCancel?: () => void) => void;
+    hideDialog: () => void;
+};

package/es/hooks/useDialog.js

@@ -0,0 +1,28 @@
+import React, { useContext, useCallback } from "react";
+import Dialog from "../components/Dialog";
+import { ModalContext } from "../context/modal";
+export function useDialog() {
+  var _a = useContext(ModalContext),
+    showModal = _a.showModal,
+    hideModal = _a.hideModal;
+  var showDialog = useCallback(function (content, type, title, okLabel, cancelLabel, onOk, onCancel) {
+    if (onOk === void 0) {
+      onOk = hideModal;
+    }
+    if (onCancel === void 0) {
+      onCancel = hideModal;
+    }
+    showModal(/*#__PURE__*/React.createElement(Dialog, {
+      type: type,
+      onOk: onOk,
+      onCancel: onCancel,
+      title: title,
+      okLabel: okLabel,
+      cancelLabel: cancelLabel
+    }, content));
+  }, [hideModal, showModal]);
+  return {
+    showDialog: showDialog,
+    hideDialog: hideModal
+  };
+}

package/{dist/packages/react/src → es}/hooks/useOutsideClick.d.ts

@@ -1,2 +1,2 @@
-import React from "react";
-export declare function useOutsideClick(containerRef: React.RefObject<HTMLElement | null>, handler: () => void, deps?: React.DependencyList, optionalContainerRef?: React.RefObject<HTMLElement>): void;
+import React from "react";
+export declare function useOutsideClick(containerRef: React.RefObject<HTMLElement | null>, handler: () => void, deps?: React.DependencyList, optionalContainerRef?: React.RefObject<HTMLElement>): void;

package/es/hooks/useOutsideClick.js

@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+export function useOutsideClick(containerRef, handler, deps, optionalContainerRef) {
+  useEffect(function () {
+    function handleClickOutside(e) {
+      var _a;
+      if (containerRef && containerRef.current && !containerRef.current.contains(e.target) && (!optionalContainerRef || !((_a = optionalContainerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)))) {
+        handler();
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, deps);
+}

package/{dist/packages/react/src → es}/hooks/usePrevious.d.ts

@@ -1,2 +1,2 @@
-declare function usePrevious<T>(value: T): T | null;
-export default usePrevious;
+declare function usePrevious<T>(value: T): T | null;
+export default usePrevious;

package/es/hooks/usePrevious.js

@@ -0,0 +1,9 @@
+import { useEffect, useRef } from "react";
+function usePrevious(value) {
+  var ref = useRef(null);
+  useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+export default usePrevious;

package/{dist/packages/react/src → es}/index.d.ts

@@ -1 +1 @@
-export * from "./components";
+export * from "./components";

package/es/index.js

@@ -0,0 +1 @@
+export * from "./components";

package/{dist/packages/react/src → es}/utils/datepickerStyles.d.ts

@@ -1,2 +1,2 @@
-export declare const datepickerStyles = "\n  .datepicker-toggle {\n    display: inline-block;\n    position: relative;\n    width: 100%;\n  }\n  \n  .datepicker-toggle-button {\n    opacity: 0.3;\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 16px;\n    height: 16px;\n    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjE2IiB5MT0iMiIgeDI9IjE2IiB5Mj0iNiI+PC9saW5lPjxsaW5lIHgxPSI4IiB5MT0iMiIgeDI9IjgiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSIxMCIgeDI9IjIxIiB5Mj0iMTAiPjwvbGluZT48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-position: center;\n    pointer-events: none;\n  }\n  \n  .datepicker-input {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #1a202c;\n    background-color: #fff;\n    cursor: pointer;\n  }\n  \n  .datepicker-input::-webkit-calendar-picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n  }\n  \n  .datepicker-input:focus {\n    outline: none;\n    border-color: #4299e1;\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);\n  }\n";
-export declare const injectDatepickerStyles: () => void;
+export declare const datepickerStyles = "\n  .datepicker-toggle {\n    display: inline-block;\n    position: relative;\n    width: 100%;\n  }\n  \n  .datepicker-toggle-button {\n    opacity: 0.3;\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 16px;\n    height: 16px;\n    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjE2IiB5MT0iMiIgeDI9IjE2IiB5Mj0iNiI+PC9saW5lPjxsaW5lIHgxPSI4IiB5MT0iMiIgeDI9IjgiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSIxMCIgeDI9IjIxIiB5Mj0iMTAiPjwvbGluZT48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-position: center;\n    pointer-events: none;\n  }\n  \n  .datepicker-input {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #1a202c;\n    background-color: #fff;\n    cursor: pointer;\n  }\n  \n  .datepicker-input::-webkit-calendar-picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n  }\n  \n  .datepicker-input:focus {\n    outline: none;\n    border-color: #4299e1;\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);\n  }\n";
+export declare const injectDatepickerStyles: () => void;

package/es/utils/datepickerStyles.js

@@ -0,0 +1,8 @@
+export var datepickerStyles = "\n  .datepicker-toggle {\n    display: inline-block;\n    position: relative;\n    width: 100%;\n  }\n  \n  .datepicker-toggle-button {\n    opacity: 0.3;\n    position: absolute;\n    right: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 16px;\n    height: 16px;\n    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjQiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGxpbmUgeDE9IjE2IiB5MT0iMiIgeDI9IjE2IiB5Mj0iNiI+PC9saW5lPjxsaW5lIHgxPSI4IiB5MT0iMiIgeDI9IjgiIHkyPSI2Ij48L2xpbmU+PGxpbmUgeDE9IjMiIHkxPSIxMCIgeDI9IjIxIiB5Mj0iMTAiPjwvbGluZT48L3N2Zz4=');\n    background-repeat: no-repeat;\n    background-position: center;\n    pointer-events: none;\n  }\n  \n  .datepicker-input {\n    width: 100%;\n    padding: 8px 12px;\n    border: 1px solid #e2e8f0;\n    border-radius: 6px;\n    font-size: 14px;\n    line-height: 1.5;\n    color: #1a202c;\n    background-color: #fff;\n    cursor: pointer;\n  }\n  \n  .datepicker-input::-webkit-calendar-picker-indicator {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    margin: 0;\n    padding: 0;\n    cursor: pointer;\n    opacity: 0;\n  }\n  \n  .datepicker-input:focus {\n    outline: none;\n    border-color: #4299e1;\n    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);\n  }\n";
+export var injectDatepickerStyles = function injectDatepickerStyles() {
+  if (typeof document !== "undefined") {
+    var styleSheet = document.createElement("style");
+    styleSheet.textContent = datepickerStyles;
+    document.head.appendChild(styleSheet);
+  }
+};

package/lib/components/ChangeColor/index.css

@@ -0,0 +1,76 @@
+#fortune-change-color {
+  min-width: 164px;
+  background: hsl(var(--color-bg-default));
+  position: absolute;
+  top: -100px;
+  left: 232px;
+  border-radius: 6px;
+  padding: 8px;
+  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
+  border: 1px solid hsl(var(--color-border-default));
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+#fortune-change-color .color-reset {
+  position: relative;
+  color: hsl(var(--color-text-default));
+  cursor: pointer;
+  list-style: none;
+  padding: 4px 8px;
+  white-space: nowrap;
+  vertical-align: middle;
+  padding-right: 24px;
+  user-select: none;
+  border-radius: 4px;
+  background: hsl(var(--color-bg-default));
+  height: 30px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+#fortune-change-color .color-reset:hover {
+  background: hsl(var(--color-bg-default-hover));
+  transition: all 0.2s ease-in-out;
+}
+
+#fortune-change-color .custom-color {
+  position: relative;
+  margin: auto;
+  padding: 10px;
+  border-radius: 6px;
+  background: white;
+  display: flex;
+  align-items: center;
+  margin: 1px 0px;
+  display: flex;
+  justify-content: space-around;
+}
+
+.button-basic {
+  display: inline-block;
+  margin-bottom: 0;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+  touch-action: manipulation;
+  cursor: pointer;
+  white-space: nowrap;
+  padding: 4px 8px;
+  font-size: 12px;
+  line-height: 1.42857143;
+  border-radius: 2px;
+  user-select: none;
+}
+
+.button-primary {
+  background: #0188fb;
+  border: 1px solid #0188fb;
+  color: #fff;
+  margin-right: -4px;
+}

package/lib/components/ChangeColor/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./index.css";
+type Props = {
+    triggerParentUpdate: (state: boolean) => void;
+};
+export declare const ChangeColor: React.FC<Props>;
+export {};

package/lib/components/ChangeColor/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChangeColor = void 0;
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _react = _interopRequireWildcard(require("react"));
+var _context = _interopRequireDefault(require("../../context"));
+var _ColorPicker = _interopRequireDefault(require("../Toolbar/ColorPicker"));
+require("./index.css");
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var ChangeColor = exports.ChangeColor = function ChangeColor(_a) {
+  var triggerParentUpdate = _a.triggerParentUpdate;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    setContext = _b.setContext;
+  var _c = (0, _react.useState)(context.luckysheetfile[(0, _fortuneCore.getSheetIndex)(context, context.currentSheetId)].color),
+    selectColor = _c[0],
+    setSelectColor = _c[1];
+  (0, _react.useEffect)(function () {
+    setContext(function (ctx) {
+      if (ctx.allowEdit === false) return;
+      var index = (0, _fortuneCore.getSheetIndex)(ctx, ctx.currentSheetId);
+      ctx.luckysheetfile[index].color = selectColor;
+    });
+  }, [selectColor, setContext]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "fortune-change-color"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "color-reset",
+    onClick: function onClick() {
+      return setSelectColor(undefined);
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "reset-color",
+    width: 16,
+    height: 16
+  }), "Reset"), /*#__PURE__*/_react.default.createElement(_ColorPicker.default, {
+    onPick: function onPick(color) {
+      triggerParentUpdate(true);
+      setSelectColor(color);
+      triggerParentUpdate(false);
+    }
+  }));
+};

package/lib/components/ConditionFormat/ConditionRules.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import "./index.css";
+declare const ConditionRules: React.FC<{
+    type: string;
+}>;
+export default ConditionRules;