@fileverse-dev/fortune-react 1.2.98 → 1.2.99-data-validation-fix-1

package/lib/components/ConditionFormat/ConditionRules.js

@@ -20,9 +20,7 @@ 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); }
 (0, _datepickerStyles.injectDatepickerStyles)();
 var ConditionRules = function ConditionRules(_a) {
-  var rulesType = _a.type,
-    context = _a.context;
-  console.log("rulesType", rulesType);
+  var context = _a.context;
   var _b = (0, _react.useState)("greaterThan"),
     type = _b[0],
     setType = _b[1];
@@ -369,8 +367,10 @@ var ConditionRules = function ConditionRules(_a) {
         setEditConditionRange(rangeEdit);
         setEditConditionFormatValue(allConditionFormats[key].conditionValue);
       },
-      className: "group flex items-center border-b border-gray-200 condition-list-parent",
-      key: key
+      className: "group flex items-center border-b border-gray-200 condition-list-parent fortune-condition-rules__item fortune-condition-rules__item--".concat(String(key).replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-")),
+      "data-condition-key": key,
+      key: key,
+      "data-testid": "condition-rules-item-".concat(key)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "condition-list-pill",
       style: {
@@ -392,9 +392,11 @@ var ConditionRules = function ConditionRules(_a) {
         buttonClickCreateRef.current = true;
       }
     }, /*#__PURE__*/_react.default.createElement("h3", {
-      className: "condition-list-type"
+      className: "fortune-condition-rules__heading condition-list-type",
+      "data-testid": "condition-rules-heading-".concat(key)
     }, conditionformat[allConditionFormats[key].conditionName], " ", (_a = allConditionFormats[key].conditionValue) === null || _a === void 0 ? void 0 : _a[0]), /*#__PURE__*/_react.default.createElement("p", {
-      className: "condition-list-range"
+      className: "fortune-condition-rules__para condition-list-range",
+      "data-testid": "condition-rules-para-".concat(key)
     }, (_b = allConditionFormats[key].cellrange) === null || _b === void 0 ? void 0 : _b.map(function (range) {
       var startCol = (0, _helper.numberToColumn)(range.column[0] + 1);
       var endCol = (0, _helper.numberToColumn)(range.column[1] + 1);
@@ -402,12 +404,15 @@ var ConditionRules = function ConditionRules(_a) {
       var endRow = range.row[1] + 1;
       return "".concat(startCol).concat(startRow, ":").concat(endCol).concat(endRow);
     }).join(", "))), /*#__PURE__*/_react.default.createElement("div", {
-      className: "opacity-0 group-hover:opacity-100 transition-opacity"
+      className: "fortune-condition-rules__icon fortune-condition-rules__action opacity-0 group-hover:opacity-100 transition-opacity",
+      "data-condition-key": key,
+      "data-testid": "condition-rules-action-delete-".concat(key)
     }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
       elevation: 1,
       icon: "Trash2",
       size: "md",
       variant: "secondary",
+      className: "fortune-condition-rules__icon--trash",
       style: {
         border: "0px",
         boxShadow: "none",
@@ -428,6 +433,7 @@ var ConditionRules = function ConditionRules(_a) {
     leftIcon: "Plus",
     size: "md",
     variant: "secondary",
+    className: "fortune-condition-rules__cta fortune-condition-rules__cta--add",
     onClick: function onClick() {
       setType("greaterThan");
       setCreate(true);
@@ -441,11 +447,13 @@ var ConditionRules = function ConditionRules(_a) {
       });
       editKeyRef.current = null;
       buttonClickCreateRef.current = true;
-    }
+    },
+    "data-testid": "condition-rules-cta-add"
   }, "Add another rule"))) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex flex-col"
+    className: "flex flex-col fortune-condition-rules__form"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "condition-rules-value text-heading-xsm"
+    className: "fortune-condition-rules__info condition-rules-value text-heading-xsm",
+    "data-testid": "condition-rules-info-range"
   }, conditionformat.applyRange, " range"), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
     rightIcon: /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
       name: "Grid2x2",
@@ -463,7 +471,8 @@ var ConditionRules = function ConditionRules(_a) {
       dataSelectRange("conditionRules".concat(type));
     }
   })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "condition-rules-value text-heading-xsm"
+    className: "fortune-condition-rules__heading-sm condition-rules-value text-heading-xsm",
+    "data-testid": "condition-rules-heading-format"
   }, "Format cells if"), /*#__PURE__*/_react.default.createElement(_ui.Select, {
     value: type,
     onValueChange: function onValueChange(value) {

package/lib/components/ConditionFormat/index.js

@@ -129,7 +129,7 @@ var ConditionalFormat = function ConditionalFormat(_a) {
           onClick: function onClick() {
             setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
             showDialog(/*#__PURE__*/_react.default.createElement(_ConditionRules.default, {
-              type: v.text
+              context: context
             }), undefined, conditionformat["conditionformat_".concat(v.text)]);
           },
           tabIndex: 0
@@ -176,7 +176,7 @@ var ConditionalFormat = function ConditionalFormat(_a) {
           onClick: function onClick() {
             setOpen === null || setOpen === void 0 ? void 0 : setOpen(false);
             showDialog(/*#__PURE__*/_react.default.createElement(_ConditionRules.default, {
-              type: v.text
+              context: context
             }), undefined, conditionformat["conditionformat_".concat(v.text)]);
           },
           tabIndex: 0

package/lib/components/DataVerification/RangeDialog.js

@@ -47,7 +47,8 @@ var RangeDialog = function RangeDialog() {
   }, [context, context.luckysheet_select_save]);
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "range-dialog",
-    className: "fortune-dialog",
+    className: "fortune-dialog fortune-range-dialog",
+    "data-testid": "range-dialog",
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
@@ -65,32 +66,41 @@ var RangeDialog = function RangeDialog() {
     },
     tabIndex: 0
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _ui.cn)("flex items-center justify-between border-b color-border-default py-3 px-6")
+    className: (0, _ui.cn)("fortune-range-dialog__header flex items-center justify-between border-b color-border-default py-3 px-6"),
+    "data-testid": "range-dialog-header"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-heading-sm"
+    className: "fortune-range-dialog__heading text-heading-sm",
+    "data-testid": "range-dialog-heading"
   }, dataVerification.selectCellRange), /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
     icon: "X",
     variant: "ghost",
     onClick: close,
-    tabIndex: 0
+    tabIndex: 0,
+    className: "fortune-range-dialog__icon fortune-range-dialog__icon--close",
+    "data-testid": "range-dialog-icon-close"
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "px-6 pb-6 pt-4 text-body-sm"
+    className: "fortune-range-dialog__para px-6 pb-6 pt-4 text-body-sm",
+    "data-testid": "range-dialog-para"
   }, /*#__PURE__*/_react.default.createElement(_ui.TextField, {
     className: "w-full",
     readOnly: true,
     placeholder: dataVerification.selectCellRange2,
     value: rangeTxt2
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "px-6 pb-6 flex flex-row gap-2 justify-end"
+    className: "fortune-range-dialog__actions px-6 pb-6 flex flex-row gap-2 justify-end",
+    "data-testid": "range-dialog-actions"
   }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     variant: "secondary",
+    className: "fortune-range-dialog__cta fortune-range-dialog__cta--close",
     style: {
       minWidth: "80px"
     },
     onClick: close,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "range-dialog-cta-close"
   }, button.close), /*#__PURE__*/_react.default.createElement(_ui.Button, {
     variant: "default",
+    className: "fortune-range-dialog__cta fortune-range-dialog__cta--confirm",
     style: {
       minWidth: "80px"
     },
@@ -100,7 +110,8 @@ var RangeDialog = function RangeDialog() {
       });
       close();
     },
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "range-dialog-cta-confirm"
   }, button.confirm)));
 };
 var _default = exports.default = RangeDialog;

package/lib/components/DataVerification/helpers.d.ts

@@ -0,0 +1,9 @@
+import { Context } from "@fileverse-dev/fortune-core";
+export declare function findMatchingCells(ctx: Context, currentRow: number, currentCol: number): {
+    row: number;
+    col: number;
+}[];
+export declare function cellsToRangeString(ctx: Context, cells: {
+    row: number;
+    col: number;
+}[]): string;

package/lib/components/DataVerification/helpers.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cellsToRangeString = cellsToRangeString;
+exports.findMatchingCells = findMatchingCells;
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+function findMatchingCells(ctx, currentRow, currentCol) {
+  var _a;
+  var sheetIndex = (0, _fortuneCore.getSheetIndex)(ctx, ctx.currentSheetId);
+  var dataVerification = (_a = ctx.luckysheetfile[sheetIndex].dataVerification) !== null && _a !== void 0 ? _a : {};
+  var currentValidation = dataVerification["".concat(currentRow, "_").concat(currentCol)];
+  if (!currentValidation) return [];
+  var matchingCells = [];
+  Object.keys(dataVerification).forEach(function (key) {
+    var _a = key.split("_").map(Number),
+      r = _a[0],
+      c = _a[1];
+    var validation = dataVerification[key];
+    if (validation.type === currentValidation.type && validation.type2 === currentValidation.type2 && validation.value1 === currentValidation.value1 && validation.value2 === currentValidation.value2 && validation.color === currentValidation.color && validation.validity === currentValidation.validity && validation.remote === currentValidation.remote && validation.prohibitInput === currentValidation.prohibitInput && validation.hintShow === currentValidation.hintShow && validation.hintValue === currentValidation.hintValue) {
+      matchingCells.push({
+        row: r,
+        col: c
+      });
+    }
+  });
+  return matchingCells;
+}
+function cellsToRangeString(ctx, cells) {
+  if (cells.length === 0) return "";
+  if (cells.length === 1) {
+    return (0, _fortuneCore.indexToColumnChar)(cells[0].col) + (cells[0].row + 1);
+  }
+  var sorted = __spreadArray([], cells, true).sort(function (a, b) {
+    return a.row === b.row ? a.col - b.col : a.row - b.row;
+  });
+  var ranges = [];
+  var startRow = sorted[0].row;
+  var endRow = sorted[0].row;
+  var startCol = sorted[0].col;
+  var endCol = sorted[0].col;
+  for (var i = 1; i < sorted.length; i++) {
+    var _a = sorted[i],
+      row = _a.row,
+      col = _a.col;
+    if (col === startCol && col === endCol && row === endRow + 1) {
+      endRow = row;
+    } else if (row === startRow && row === endRow && col === endCol + 1) {
+      endCol = col;
+    } else {
+      var range_1 = (0, _fortuneCore.getRangetxt)(ctx, ctx.currentSheetId, {
+        row: [startRow, endRow],
+        column: [startCol, endCol]
+      });
+      ranges.push(range_1);
+      startRow = endRow = row;
+      startCol = endCol = col;
+    }
+  }
+  var range = (0, _fortuneCore.getRangetxt)(ctx, ctx.currentSheetId, {
+    row: [startRow, endRow],
+    column: [startCol, endCol]
+  });
+  ranges.push(range);
+  return ranges.join(",");
+}

package/lib/components/DataVerification/index.js

@@ -12,6 +12,7 @@ var _DropdownOption = _interopRequireDefault(require("./DropdownOption"));
 var _context = _interopRequireDefault(require("../../context"));
 var _useDialog = require("../../hooks/useDialog");
 var _datepickerStyles = require("../../utils/datepickerStyles");
+var _helpers = require("./helpers");
 require("./index.css");
 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); }
@@ -42,7 +43,7 @@ var DataVerification = function DataVerification() {
     button = _r.button,
     generalDialog = _r.generalDialog;
   var dateCondition = (0, _react.useState)(["between", "notBetween", "equal", "notEqualTo", "earlierThan", "noEarlierThan", "laterThan", "noLaterThan"])[0];
-  function getSheetIndex() {
+  var getSheetIndex = (0, _react.useCallback)(function () {
     var _a;
     for (var i = 0; i < context.luckysheetfile.length; i += 1) {
       if (((_a = context.luckysheetfile[i]) === null || _a === void 0 ? void 0 : _a.id) === context.currentSheetId) {
@@ -50,7 +51,7 @@ var DataVerification = function DataVerification() {
       }
     }
     return null;
-  }
+  }, [context.luckysheetfile, context.currentSheetId]);
   var _s = (0, _react.useState)([]),
     optionItems = _s[0],
     setOptionItems = _s[1];
@@ -101,45 +102,68 @@ var DataVerification = function DataVerification() {
       ctx.rangeDialog.rangeTxt = value;
     });
   }, [hideDialog, setContext]);
+  var applyValidation = (0, _react.useCallback)(function (rangeString) {
+    setContext(function (ctx) {
+      var _a;
+      var range = (0, _fortuneCore.getRangeByTxt)(ctx, rangeString);
+      if (range.length === 0) {
+        return;
+      }
+      var regulation = ctx.dataVerification.dataRegulation;
+      var verifacationT = regulation === null || regulation === void 0 ? void 0 : regulation.type;
+      var value1 = regulation.value1;
+      var item = __assign(__assign({}, regulation), {
+        checked: false
+      });
+      if (verifacationT === "dropdown") {
+        var list = (0, _fortuneCore.getDropdownList)(ctx, value1);
+        item.value1 = list.join(",");
+      }
+      var currentDataVerification = (_a = ctx.luckysheetfile[getSheetIndex()].dataVerification) !== null && _a !== void 0 ? _a : {};
+      var d = (0, _fortuneCore.getFlowdata)(ctx);
+      if (!d) return;
+      for (var ri = 0; ri < range.length; ri += 1) {
+        var str = range[ri].row[0];
+        var edr = range[ri].row[1];
+        var stc = range[ri].column[0];
+        var edc = range[ri].column[1];
+        for (var r = str; r <= edr; r += 1) {
+          for (var c = stc; c <= edc; c += 1) {
+            var key = "".concat(r, "_").concat(c);
+            currentDataVerification[key] = item;
+            if (regulation.type === "checkbox") {
+              (0, _fortuneCore.setCellValue)(ctx, r, c, d, item.value2);
+            }
+          }
+        }
+      }
+      ctx.luckysheetfile[getSheetIndex()].dataVerification = currentDataVerification;
+      ctx.dataVerification.updateScope = undefined;
+      ctx.dataVerification.sourceCell = undefined;
+    });
+  }, [getSheetIndex, setContext]);
   var btn = (0, _react.useCallback)(function (type) {
+    var _a, _b, _c;
     if (type === "confirm") {
-      setContext(function (ctx) {
-        var _a, _b, _c;
-        var isPass = (0, _fortuneCore.confirmMessage)(ctx, generalDialog, dataVerification);
-        if (isPass) {
-          var range = (0, _fortuneCore.getRangeByTxt)(ctx, (_b = (_a = ctx.dataVerification) === null || _a === void 0 ? void 0 : _a.dataRegulation) === null || _b === void 0 ? void 0 : _b.rangeTxt);
-          if (range.length === 0) {
-            return;
-          }
-          var regulation = ctx.dataVerification.dataRegulation;
-          var verifacationT = regulation === null || regulation === void 0 ? void 0 : regulation.type;
-          var value1 = regulation.value1;
-          var item = __assign(__assign({}, regulation), {
-            checked: false
+      var isValid = (0, _fortuneCore.confirmMessage)(context, generalDialog, dataVerification);
+      if (!isValid) return;
+      var sourceCell = (_a = context.dataVerification) === null || _a === void 0 ? void 0 : _a.sourceCell;
+      var modalRangeString_1 = (_c = (_b = context.dataVerification) === null || _b === void 0 ? void 0 : _b.dataRegulation) === null || _c === void 0 ? void 0 : _c.rangeTxt;
+      if (sourceCell) {
+        var matchingCells = (0, _helpers.findMatchingCells)(context, sourceCell.row, sourceCell.col);
+        if (matchingCells.length > 1) {
+          var allMatchingRange_1 = (0, _helpers.cellsToRangeString)(context, matchingCells);
+          showDialog("Found ".concat(matchingCells.length, " cells with matching validation. Apply changes to:"), "yesno", "Apply Changes", "All Matching Cells", "Just Selected Range", function () {
+            applyValidation(allMatchingRange_1);
+            hideDialog();
+          }, function () {
+            applyValidation(modalRangeString_1);
+            hideDialog();
           });
-          if (verifacationT === "dropdown") {
-            var list = (0, _fortuneCore.getDropdownList)(ctx, value1);
-            item.value1 = list.join(",");
-          }
-          var currentDataVerification = (_c = ctx.luckysheetfile[getSheetIndex()].dataVerification) !== null && _c !== void 0 ? _c : {};
-          var str = range[range.length - 1].row[0];
-          var edr = range[range.length - 1].row[1];
-          var stc = range[range.length - 1].column[0];
-          var edc = range[range.length - 1].column[1];
-          var d = (0, _fortuneCore.getFlowdata)(ctx);
-          if (!d) return;
-          for (var r = str; r <= edr; r += 1) {
-            for (var c = stc; c <= edc; c += 1) {
-              var key = "".concat(r, "_").concat(c);
-              currentDataVerification[key] = item;
-              if (regulation.type === "checkbox") {
-                (0, _fortuneCore.setCellValue)(ctx, r, c, d, item.value2);
-              }
-            }
-          }
-          ctx.luckysheetfile[getSheetIndex()].dataVerification = currentDataVerification;
+          return;
         }
-      });
+      }
+      applyValidation(modalRangeString_1);
     } else if (type === "delete") {
       setContext(function (ctx) {
         var _a, _b, _c;
@@ -158,17 +182,26 @@ var DataVerification = function DataVerification() {
             delete currentDataVerification["".concat(r, "_").concat(c)];
           }
         }
+        ctx.dataVerification.updateScope = undefined;
       });
     }
     hideDialog();
-  }, [dataVerification, generalDialog, hideDialog, setContext, showDialog]);
+  }, [applyValidation, context, dataVerification, generalDialog, getSheetIndex, hideDialog, setContext, showDialog]);
   (0, _react.useEffect)(function () {
     setContext(function (ctx) {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       var rangeT = "";
+      var updateScope = ((_a = ctx.dataVerification) === null || _a === void 0 ? void 0 : _a.updateScope) || "current";
       if (ctx.luckysheet_select_save) {
         var range = ctx.luckysheet_select_save[ctx.luckysheet_select_save.length - 1];
-        rangeT = (0, _fortuneCore.getRangetxt)(context, context.currentSheetId, range, context.currentSheetId);
+        var rowIndex = range.row_focus;
+        var colIndex = range.column_focus;
+        if (updateScope === "all" && rowIndex != null && colIndex != null) {
+          var matchingCells = (0, _helpers.findMatchingCells)(ctx, rowIndex, colIndex);
+          rangeT = (0, _helpers.cellsToRangeString)(ctx, matchingCells);
+        } else {
+          rangeT = (0, _fortuneCore.getRangetxt)(context, context.currentSheetId, range, context.currentSheetId);
+        }
       }
       var index = getSheetIndex();
       var ctxDataVerification = ctx.luckysheetfile[index].dataVerification;
@@ -178,13 +211,17 @@ var DataVerification = function DataVerification() {
         var rowIndex = last.row_focus;
         var colIndex = last.column_focus;
         if (rowIndex == null || colIndex == null) return;
+        ctx.dataVerification.sourceCell = {
+          row: rowIndex,
+          col: colIndex
+        };
         var item = ctxDataVerification["".concat(rowIndex, "_").concat(colIndex)];
         var defaultItem = item !== null && item !== void 0 ? item : {};
-        var rangValue = (_a = defaultItem.value1) !== null && _a !== void 0 ? _a : "";
-        if (((_b = ctx.rangeDialog) === null || _b === void 0 ? void 0 : _b.type) === "dropDown" && ctx.dataVerification && ctx.dataVerification.dataRegulation && ctx.dataVerification.dataRegulation.rangeTxt) {
+        var rangValue = (_b = defaultItem.value1) !== null && _b !== void 0 ? _b : "";
+        if (((_c = ctx.rangeDialog) === null || _c === void 0 ? void 0 : _c.type) === "dropDown" && ctx.dataVerification && ctx.dataVerification.dataRegulation && ctx.dataVerification.dataRegulation.rangeTxt) {
           rangeT = ctx.dataVerification.dataRegulation.rangeTxt;
           rangValue = ctx.rangeDialog.rangeTxt;
-        } else if (((_c = ctx.rangeDialog) === null || _c === void 0 ? void 0 : _c.type) === "rangeTxt" && ctx.dataVerification && ctx.dataVerification.dataRegulation && ctx.dataVerification.dataRegulation.value1) {
+        } else if (((_d = ctx.rangeDialog) === null || _d === void 0 ? void 0 : _d.type) === "rangeTxt" && ctx.dataVerification && ctx.dataVerification.dataRegulation && ctx.dataVerification.dataRegulation.value1) {
           rangValue = ctx.dataVerification.dataRegulation.value1;
           rangeT = ctx.rangeDialog.rangeTxt;
         }

package/lib/components/Dialog/index.js

@@ -36,46 +36,60 @@ var Dialog = function Dialog(_a) {
   var button = (0, _fortuneCore.locale)(context).button;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "fortune-dialog",
+    "data-testid": "dialog",
     style: __assign(__assign({}, containerStyle), ["Data validation", "Split text to columns", "Resize column"].includes(title) ? {
       maxWidth: "unset"
     } : {})
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _ui.cn)("flex items-center justify-between border-b color-border-default py-3 px-6")
+    className: (0, _ui.cn)("fortune-dialog__header flex items-center justify-between border-b color-border-default py-3 px-6"),
+    "data-testid": "dialog-header"
   }, title ? (/*#__PURE__*/_react.default.createElement("div", {
-    className: "text-heading-sm"
+    className: "fortune-dialog__heading text-heading-sm",
+    "data-testid": "dialog-heading"
   }, title)) : (/*#__PURE__*/_react.default.createElement("div", {
-    className: "text-heading-sm"
+    className: "fortune-dialog__heading text-heading-sm",
+    "data-testid": "dialog-heading"
   }, "Oops! Something went wrong")), /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
     icon: "X",
     variant: "ghost",
     onClick: onCancel,
-    tabIndex: 0
+    tabIndex: 0,
+    className: "fortune-dialog__icon fortune-dialog__icon--close",
+    "data-testid": "dialog-icon-close"
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: "px-6 pb-6 pt-4 text-body-sm",
-    style: contentStyle
+    className: "fortune-dialog__para px-6 pb-6 pt-4 text-body-sm",
+    style: contentStyle,
+    "data-testid": "dialog-para"
   }, children), type != null && (/*#__PURE__*/_react.default.createElement("div", {
-    className: "px-6 pb-6 flex flex-row gap-2 justify-end"
+    className: "fortune-dialog__actions px-6 pb-6 flex flex-row gap-2 justify-end",
+    "data-testid": "dialog-actions"
   }, type === "ok" ? (/*#__PURE__*/_react.default.createElement(_ui.Button, {
     variant: "default",
+    className: "fortune-dialog__cta fortune-dialog__cta--confirm",
     style: {
       minWidth: "80px"
     },
     onClick: onOk,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "dialog-cta-confirm"
   }, okLabel || button.confirm)) : (/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ui.Button, {
     variant: "secondary",
+    className: "fortune-dialog__cta fortune-dialog__cta--cancel",
     style: {
       minWidth: "80px"
     },
     onClick: onCancel,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "dialog-cta-cancel"
   }, cancelLabel || button.cancel), /*#__PURE__*/_react.default.createElement(_ui.Button, {
     variant: "default",
+    className: "fortune-dialog__cta fortune-dialog__cta--confirm",
     style: {
       minWidth: "80px"
     },
     onClick: onOk,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-testid": "dialog-cta-confirm"
   }, okLabel || button.confirm))))));
 };
 var _default = exports.default = Dialog;

package/lib/components/ErrorState/index.js

@@ -31,11 +31,14 @@ var ErrorBoxes = function ErrorBoxes() {
       zIndex: 100,
       borderRadius: "4px"
     },
-    className: "shadow-lg flex flex-col gap-2 break-all"
+    className: "fortune-error-state shadow-lg flex flex-col gap-2 break-all",
+    "data-testid": "error-state"
   }, /*#__PURE__*/_react.default.createElement("h3", {
-    className: "text-heading-xsm color-text-danger"
+    className: "fortune-error-state__heading text-heading-xsm color-text-danger",
+    "data-testid": "error-state-heading"
   }, title), /*#__PURE__*/_react.default.createElement("div", {
-    className: "color-text-default text-body-sm"
+    className: "fortune-error-state__para color-text-default text-body-sm",
+    "data-testid": "error-state-para"
   }, message));
 };
 var _default = exports.default = ErrorBoxes;

package/lib/components/LinkEidtCard/index.js

@@ -105,10 +105,13 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
     };
   }, [refs.globalCache, isButtonDisabled]);
   var renderToolbarButton = (0, _react.useCallback)(function (iconId, onClick) {
+    var iconIdClass = iconId.replace(/[^a-zA-Z0-9-]/g, "-").replace(/-+/g, "-");
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: "fortune-toolbar-button",
+      className: "fortune-link-card__icon fortune-link-card__action fortune-link-card__action--".concat(iconIdClass, " fortune-toolbar-button"),
+      "data-icon-id": iconId,
       onClick: onClick,
-      tabIndex: 0
+      tabIndex: 0,
+      "data-testid": "link-card-action-".concat(iconId)
     }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
       name: iconId,
       style: {
@@ -161,19 +164,21 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
       onKeyDown: function onKeyDown(e) {
         e.stopPropagation();
       },
-      className: "fortune-link-modify-modal link-toolbar",
+      className: "fortune-link-card fortune-link-modify-modal link-toolbar",
       style: {
         left: position.cellLeft + 20,
         top: position.cellBottom - 5
-      }
+      },
+      "data-testid": "link-card"
     }), /*#__PURE__*/_react.default.createElement("div", {
-      className: "link-content",
+      className: "fortune-link-card__info link-content",
       onClick: function onClick() {
         setContext(function (draftCtx) {
           return (0, _fortuneCore.goToLink)(draftCtx, r, c, linkType, linkAddress, refs.scrollbarX.current, refs.scrollbarY.current);
         });
       },
-      tabIndex: 0
+      tabIndex: 0,
+      "data-testid": "link-card-info-open"
     }, linkType === "webpage" ? insertLink.openLink : (0, _fortuneCore.replaceHtml)(insertLink.goTo, {
       linkAddress: linkAddress
     })), context.allowEdit === true && /*#__PURE__*/_react.default.createElement("div", {
@@ -197,13 +202,15 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
     }));
   }
   return /*#__PURE__*/_react.default.createElement("div", __assign({
-    className: "fortune-link-card",
+    className: "fortune-link-card fortune-link-card--editing",
     ref: cardRef,
     style: {
       left: position.cellLeft + 20,
       top: cardTop
     }
-  }, containerEvent), /*#__PURE__*/_react.default.createElement(_ui.Select, {
+  }, containerEvent, {
+    "data-testid": "link-card-editing"
+  }), /*#__PURE__*/_react.default.createElement(_ui.Select, {
     value: linkType,
     onValueChange: function onValueChange(value) {
       if (value === "sheet") {
@@ -228,9 +235,10 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
       value: type.value
     }, type.text);
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "fortune-input-with-icon"
+    className: "fortune-link-card__para fortune-input-with-icon",
+    "data-testid": "link-card-para-text"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "input-icon"
+    className: "fortune-link-card__icon input-icon"
   }, /*#__PURE__*/_react.default.createElement(_ui.LucideIcon, {
     name: "ALargeSmall"
   })), /*#__PURE__*/_react.default.createElement(_ui.TextField, {
@@ -283,7 +291,7 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
       value: sheet.name
     }, sheet.name);
   }))))), /*#__PURE__*/_react.default.createElement(_ui.Button, {
-    className: "fortune-insert-button",
+    className: "fortune-link-card__cta fortune-insert-button",
     disabled: isButtonDisabled,
     onClick: function onClick() {
       if (isButtonDisabled) return;
@@ -291,7 +299,8 @@ var LinkEditCard = exports.LinkEditCard = function LinkEditCard(_a) {
       setContext(function (draftCtx) {
         return (0, _fortuneCore.saveHyperlink)(draftCtx, r, c, linkText, linkType, linkAddress);
       });
-    }
+    },
+    "data-testid": "link-card-cta-insert"
   }, "Insert link"));
 };
 var _default = exports.default = LinkEditCard;