@lark-apaas/miaoda-inspector 0.1.0-alpha.1 → 0.1.0-alpha.2

package/dist/es/MiaodaInspector/MiaodaInspector.js

@@ -1,397 +0,0 @@
-function _define_property(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _object_spread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    var ownKeys2 = Object.keys(source);
-    if (typeof Object.getOwnPropertySymbols === "function") {
-      ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
-    }
-    ownKeys2.forEach(function(key) {
-      _define_property(target, key, source[key]);
-    });
-  }
-  return target;
-}
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) {
-      symbols = symbols.filter(function(sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-    keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _object_spread_props(target, source) {
-  source = source != null ? source : {};
-  if (Object.getOwnPropertyDescriptors) {
-    Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-  } else {
-    ownKeys(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-  return target;
-}
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState, useRef, useCallback, useEffect } from "react";
-import { Inspector } from "../Inspector";
-import { ClickOverlay } from "../Inspector/Overlay";
-import { cx, postMessage, isIncomingMessage, calculateFontSizeInfo, calculateFontWeightInfo, calculateBorderRadiusInfo, calculateBorderWidthInfo, calculateTextAlignInfo, calculatePaddingInfo, calculateMarginInfo, calculateColorInfo, calculateBackgroundColorInfo, calculateBorderColorInfo } from "../utils";
-import "./MiaodaInspector.css";
-import { getAllStyleConfigs } from "../utils/config-mapper";
-function safeClassName(el) {
-  const cn = el === null || el === void 0 ? void 0 : el.className;
-  if (typeof cn === "string") {
-    return cn;
-  }
-  if (typeof (cn === null || cn === void 0 ? void 0 : cn.baseVal) === "string") {
-    return cn.baseVal;
-  }
-  return "";
-}
-function analyzeTextOnlyNode(element, componentName, canUseNewInspector) {
-  if (!element || componentName && componentName[0] === componentName[0].toUpperCase() || !canUseNewInspector || element instanceof SVGElement) {
-    return {
-      hasOnlyTextNodes: false,
-      textContent: null
-    };
-  }
-  try {
-    const childNodes = Array.from(element.childNodes);
-    const textNodes = childNodes.filter((node) => node.nodeType === Node.TEXT_NODE);
-    const hasOnlyText = childNodes.length > 0 && textNodes.length === childNodes.length;
-    return {
-      hasOnlyTextNodes: hasOnlyText,
-      textContent: hasOnlyText ? element.textContent : null
-    };
-  } catch (e) {
-    console.error("Error analyzing text-only node:", e);
-  }
-  return {
-    hasOnlyTextNodes: false,
-    textContent: null
-  };
-}
-const getElementCoordinates = (element) => {
-  const boundingClientRect = element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
-  const computedStyle = element ? window.getComputedStyle(element) : null;
-  const marginLeft = computedStyle ? parseFloat(computedStyle.marginLeft) || 0 : 0;
-  const marginRight = computedStyle ? parseFloat(computedStyle.marginRight) || 0 : 0;
-  const marginTop = computedStyle ? parseFloat(computedStyle.marginTop) || 0 : 0;
-  const marginBottom = computedStyle ? parseFloat(computedStyle.marginBottom) || 0 : 0;
-  const totalWidth = boundingClientRect ? boundingClientRect.width + marginLeft + marginRight : 0;
-  const totalHeight = boundingClientRect ? boundingClientRect.height + marginTop + marginBottom : 0;
-  const adjustedTop = boundingClientRect ? boundingClientRect.top - marginTop : 0;
-  const adjustedLeft = boundingClientRect ? boundingClientRect.left - marginLeft : 0;
-  const adjustedRight = boundingClientRect ? boundingClientRect.right + marginRight : 0;
-  const adjustedBottom = boundingClientRect ? boundingClientRect.bottom + marginBottom : 0;
-  return {
-    width: totalWidth,
-    height: totalHeight,
-    top: adjustedTop,
-    left: adjustedLeft,
-    right: adjustedRight,
-    bottom: adjustedBottom
-  };
-};
-const selectedElementMap = /* @__PURE__ */ new Map();
-function elementInfoToKey(relativePath, lineNumber, columnNumber) {
-  return `${relativePath}_${lineNumber}_${columnNumber}`;
-}
-const enableInner = (() => {
-  var _localStorage;
-  return ((_localStorage = localStorage) === null || _localStorage === void 0 ? void 0 : _localStorage.getItem("miaoda-inspector-inner")) === "true";
-})();
-export function MiaodaInspector(props) {
-  const [_active, setActive] = useState(false);
-  const [inBody, setInBody] = useState(true);
-  const active = (_active || enableInner) && inBody;
-  const canUseNewInspector = useRef(false);
-  const clickOverlayRef = useRef(null);
-  const defaultUIConfig = props.theme.themeToken;
-  const styleConfigs = getAllStyleConfigs(defaultUIConfig);
-  const mouseleave = useCallback(() => {
-    setInBody(false);
-  }, []);
-  const mouseenter = useCallback(() => {
-    setInBody(true);
-  }, []);
-  const handleMessage = useCallback((event) => {
-    const { data } = event;
-    if (isIncomingMessage(data, "InitConfig")) {
-      const { inspectorActive, userToken, appId, inspectorVersion } = data.data;
-      if (inspectorActive !== void 0) {
-        setActive(inspectorActive);
-        if (inspectorActive === false) {
-          var _clickOverlayRef_current;
-          (_clickOverlayRef_current = clickOverlayRef.current) === null || _clickOverlayRef_current === void 0 ? void 0 : _clickOverlayRef_current.remove();
-          clickOverlayRef.current = null;
-        }
-      }
-      if (userToken !== void 0) {
-        window.MIAODA_BUILTIN_TTT = userToken;
-      }
-      if (appId !== void 0) {
-        window.MIAODA_APP_ID = appId;
-      }
-      postMessage({
-        type: "InspectorUIConfig",
-        data: defaultUIConfig
-      });
-      if (inspectorVersion === "2") {
-        canUseNewInspector.current = true;
-      }
-    } else if (isIncomingMessage(data, "ClearSelected")) {
-      var _clickOverlayRef_current1;
-      const { keepModifications = false } = data.data;
-      (_clickOverlayRef_current1 = clickOverlayRef.current) === null || _clickOverlayRef_current1 === void 0 ? void 0 : _clickOverlayRef_current1.remove();
-      clickOverlayRef.current = null;
-      if (canUseNewInspector.current && !keepModifications) {
-        for (const [_, selectedElement] of selectedElementMap.entries()) {
-          if (selectedElement.element) {
-            if (selectedElement.originalState.textContent) {
-              selectedElement.element.textContent = selectedElement.originalState.textContent;
-            }
-            if (selectedElement.originalState.className && !(selectedElement.element instanceof SVGElement)) {
-              selectedElement.element.className = selectedElement.originalState.className;
-            }
-          }
-          if (selectedElement.dispose) {
-            selectedElement.dispose();
-          }
-        }
-        selectedElementMap.clear();
-      }
-    } else if (isIncomingMessage(data, "EditText")) {
-      const { elementId, textContent } = data.data;
-      const selectedElement = selectedElementMap.get(elementId);
-      if (selectedElement && selectedElement.element) {
-        selectedElement.element.textContent = textContent;
-      }
-    } else if (isIncomingMessage(data, "EditStyle")) {
-      const { elementId, styles } = data.data;
-      const selectedElement = selectedElementMap.get(elementId);
-      if (selectedElement && selectedElement.element) {
-        const { element } = selectedElement;
-        for (const [property] of Object.entries(styles)) {
-          if (!(property in selectedElement.originalState.styles)) {
-            selectedElement.originalState.styles[property] = element.style.getPropertyValue(property);
-          }
-        }
-        for (const [property, value] of Object.entries(styles)) {
-          element.style.setProperty(property, value);
-        }
-        const existingDispose = selectedElement.dispose;
-        const styleDispose = () => {
-          for (const [property, value] of Object.entries(selectedElement.originalState.styles)) {
-            if (value) {
-              element.style.setProperty(property, value);
-            } else {
-              element.style.removeProperty(property);
-            }
-          }
-        };
-        selectedElement.dispose = () => {
-          styleDispose();
-          if (existingDispose) {
-            existingDispose();
-          }
-        };
-      }
-    } else if (isIncomingMessage(data, "EditClassName")) {
-      const { elementId, className } = data.data;
-      const selectedElement = selectedElementMap.get(elementId);
-      if (selectedElement && selectedElement.element) {
-        const { element } = selectedElement;
-        if (selectedElement.originalState.className === void 0) {
-          selectedElement.originalState.className = safeClassName(element);
-        }
-        element.className = cx(element.className, className);
-        const existingDispose = selectedElement.dispose;
-        const classDispose = () => {
-          if (selectedElement.originalState.className) {
-            element.className = selectedElement.originalState.className;
-          }
-        };
-        selectedElement.dispose = () => {
-          classDispose();
-          if (existingDispose) {
-            existingDispose();
-          }
-        };
-      }
-    }
-  }, [
-    defaultUIConfig
-  ]);
-  useEffect(() => {
-    document.body.addEventListener("mouseleave", mouseleave, false);
-    document.body.addEventListener("mouseenter", mouseenter, false);
-    const handleScroll = () => {
-      var _clickOverlayRef_current;
-      (_clickOverlayRef_current = clickOverlayRef.current) === null || _clickOverlayRef_current === void 0 ? void 0 : _clickOverlayRef_current.remove();
-      clickOverlayRef.current = null;
-      postMessage({
-        type: "PageScroll",
-        data: {}
-      });
-    };
-    window.addEventListener("scroll", handleScroll, true);
-    return () => {
-      document.body.removeEventListener("mouseleave", mouseleave, false);
-      document.body.removeEventListener("mouseenter", mouseenter, false);
-      window.removeEventListener("scroll", handleScroll, true);
-    };
-  }, []);
-  useEffect(() => {
-    window.addEventListener("message", handleMessage);
-    return () => {
-      window.removeEventListener("message", handleMessage);
-    };
-  }, []);
-  useEffect(() => {
-    postMessage({
-      type: "PageMounted",
-      data: {
-        version: "0.1.0",
-        theme: props.theme
-      }
-    });
-  }, []);
-  const selectInspectorElement = useCallback((params) => {
-    var _clickOverlayRef_current;
-    const { codeInfo, element, name, title } = params;
-    const coords = getElementCoordinates(element);
-    const textInfo = analyzeTextOnlyNode(element, name, canUseNewInspector.current);
-    const fontSizeInfo = calculateFontSizeInfo(element, name, canUseNewInspector.current, styleConfigs);
-    const fontWeightInfo = calculateFontWeightInfo(element, name, canUseNewInspector.current, styleConfigs);
-    const borderRadiusInfo = calculateBorderRadiusInfo(element, name, canUseNewInspector.current, styleConfigs);
-    const borderWidthInfo = calculateBorderWidthInfo(element, name, canUseNewInspector.current, styleConfigs);
-    const textAlignInfo = calculateTextAlignInfo(element, name, canUseNewInspector.current, styleConfigs);
-    const paddingInfo = calculatePaddingInfo(element, name, canUseNewInspector.current, styleConfigs);
-    const marginInfo = calculateMarginInfo(element, name, canUseNewInspector.current, styleConfigs);
-    const colorInfo = calculateColorInfo(element, name, canUseNewInspector.current, styleConfigs);
-    const backgroundColorInfo = calculateBackgroundColorInfo(element, name, canUseNewInspector.current, styleConfigs);
-    const borderColorInfo = calculateBorderColorInfo(element, name, canUseNewInspector.current, styleConfigs);
-    const id = elementInfoToKey(codeInfo.relativePath, codeInfo.lineNumber, codeInfo.columnNumber);
-    const selectElement = selectedElementMap.has(id);
-    if (!selectElement) {
-      selectedElementMap.set(id, {
-        elementId: id,
-        element,
-        originalState: {
-          textContent: textInfo.textContent,
-          className: safeClassName(element),
-          styles: {}
-        }
-      });
-    }
-    if (textInfo.hasOnlyTextNodes && canUseNewInspector.current) {
-      element.setAttribute("contenteditable", "true");
-      element.focus();
-      const TextUpdate = () => {
-        postMessage({
-          type: "TextUpdate",
-          data: {
-            elementId: id,
-            textContent: element.textContent
-          }
-        });
-      };
-      const dispose = () => {
-        element.removeAttribute("contenteditable");
-        element.removeEventListener("input", TextUpdate);
-      };
-      element.addEventListener("input", TextUpdate);
-      const _selectElement = selectedElementMap.get(id);
-      if (_selectElement) {
-        selectedElementMap.set(id, _object_spread_props(_object_spread({}, _selectElement), {
-          dispose
-        }));
-      }
-    }
-    var _element_id;
-    postMessage({
-      type: "SelectInspectorElement",
-      data: _object_spread_props(_object_spread({}, codeInfo), {
-        // 移除打头的 /
-        relativePath: codeInfo.relativePath,
-        tagName: element === null || element === void 0 ? void 0 : element.tagName,
-        componentName: name,
-        className: safeClassName(element),
-        id: (_element_id = element === null || element === void 0 ? void 0 : element.id) !== null && _element_id !== void 0 ? _element_id : "",
-        x: coords.left,
-        y: coords.top,
-        width: coords.width,
-        height: coords.height,
-        top: coords.top,
-        right: coords.right,
-        bottom: coords.bottom,
-        left: coords.left,
-        elementId: id,
-        textContent: textInfo.hasOnlyTextNodes ? textInfo.textContent : null,
-        fontSize: fontSizeInfo,
-        fontWeight: fontWeightInfo,
-        borderRadius: borderRadiusInfo,
-        borderWidth: borderWidthInfo,
-        textAlign: textAlignInfo,
-        padding: paddingInfo,
-        margin: marginInfo,
-        color: colorInfo,
-        backgroundColor: backgroundColorInfo,
-        borderColor: borderColorInfo,
-        metadata: codeInfo.metadata
-      })
-    });
-    (_clickOverlayRef_current = clickOverlayRef.current) === null || _clickOverlayRef_current === void 0 ? void 0 : _clickOverlayRef_current.remove();
-    clickOverlayRef.current = null;
-    const clickOverlay = new ClickOverlay(() => {
-      const _coords = getElementCoordinates(element);
-      postMessage({
-        type: "ElementResize",
-        data: _object_spread({
-          elementId: id
-        }, _coords)
-      });
-    });
-    clickOverlayRef.current = clickOverlay;
-    clickOverlay.highlight(element, title);
-  }, []);
-  const handleCodeInfo = useCallback((name, info) => {
-    const relativePath = (info === null || info === void 0 ? void 0 : info.startsWith(props.cwd)) ? info.replace(props.cwd, "") : info;
-    var _relativePath_replace;
-    return [
-      name,
-      (_relativePath_replace = relativePath === null || relativePath === void 0 ? void 0 : relativePath.replace(/^\//, "")) !== null && _relativePath_replace !== void 0 ? _relativePath_replace : ""
-    ];
-  }, [
-    props.cwd
-  ]);
-  return /* @__PURE__ */ _jsx(Inspector, {
-    disable: false,
-    active,
-    onClickElement: selectInspectorElement,
-    handleCodeInfo,
-    onActiveChange: (newActive) => {
-      setActive(newActive);
-    }
-  });
-}

package/dist/es/MiaodaInspector/index.js

@@ -1 +0,0 @@
-export { MiaodaInspector } from "./MiaodaInspector";

package/dist/es/index.js

@@ -1,2 +0,0 @@
-export { MiaodaInspector } from "./MiaodaInspector";
-export { isOutgoingMessage } from "./utils";

package/dist/es/types/iframe-events.js

@@ -1 +0,0 @@
-export {};

package/dist/es/types/index.js

@@ -1 +0,0 @@
-export { InitConfigMessage, ClearSelectedMessage, EditTextMessage, EditStyleMessage, EditClassNameMessage, OutgoingMessage, PageMountedMessage, TextUpdateMessage, SelectInspectorElementMessage, IncomingMessage, InspectorInfo } from "./iframe-events";

package/dist/es/utils/index.js

@@ -1,3 +0,0 @@
-export { getPreviewParentOrigin, postMessage, isIncomingMessage, isOutgoingMessage } from "./origin";
-export { cx } from "./css";
-export { calculateFontSizeInfo, calculateFontWeightInfo, calculateBorderRadiusInfo, calculateBorderWidthInfo, calculateTextAlignInfo, calculatePaddingInfo, calculateMarginInfo, calculateColorInfo, calculateBackgroundColorInfo, calculateBorderColorInfo } from "./style-calculator";

package/dist/es/utils/origin.js

@@ -1,19 +0,0 @@
-export function getPreviewParentOrigin() {
-  const { origin } = window.location;
-  if (origin.includes("feishuapp.cn")) {
-    return "https://miaoda.feishu.cn";
-  }
-  if (origin.includes("fsapp.kundou.cn")) {
-    return "https://miaoda.feishu-pre.cn";
-  }
-  return "https://miaoda.feishu-boe.cn";
-}
-export function postMessage(message, targetOrigin) {
-  window.parent.postMessage(message, targetOrigin !== null && targetOrigin !== void 0 ? targetOrigin : getPreviewParentOrigin());
-}
-export function isOutgoingMessage(msg, type) {
-  return msg.type === type;
-}
-export function isIncomingMessage(msg, type) {
-  return msg.type === type;
-}

package/dist/es/utils/style-calculator.js

@@ -1,158 +0,0 @@
-function _define_property(obj, key, value) {
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-function _object_spread(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-    var ownKeys2 = Object.keys(source);
-    if (typeof Object.getOwnPropertySymbols === "function") {
-      ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-      }));
-    }
-    ownKeys2.forEach(function(key) {
-      _define_property(target, key, source[key]);
-    });
-  }
-  return target;
-}
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) {
-      symbols = symbols.filter(function(sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-    }
-    keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _object_spread_props(target, source) {
-  source = source != null ? source : {};
-  if (Object.getOwnPropertyDescriptors) {
-    Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-  } else {
-    ownKeys(Object(source)).forEach(function(key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-    });
-  }
-  return target;
-}
-export function rgbaToHex(rgba) {
-  const match = rgba.match(/rgba?\(([^)]+)\)/);
-  if (!match)
-    return rgba;
-  const values = match[1].split(",").map((v) => v.trim());
-  const r = parseInt(values[0], 10);
-  const g = parseInt(values[1], 10);
-  const b = parseInt(values[2], 10);
-  const toHex = (n) => {
-    const hex = n.toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-  };
-  if (values.length === 4) {
-    const a = parseFloat(values[3]);
-    if (!Number.isNaN(a) && a < 1) {
-      const alphaHex = Math.round(a * 255).toString(16);
-      const alphaHexStr = alphaHex.length === 1 ? `0${alphaHex}` : alphaHex;
-      return `#${toHex(r)}${toHex(g)}${toHex(b)}${alphaHexStr}`;
-    }
-  }
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-function isValidElement(element, componentName, canUseNewInspector) {
-  return !!(element && componentName && componentName[0] !== componentName[0].toUpperCase() && canUseNewInspector && !(element instanceof SVGElement));
-}
-function isValidElementWithComponent(element, componentName, canUseNewInspector) {
-  return !!(element && componentName && canUseNewInspector && !(element instanceof SVGElement));
-}
-function shouldBeInherited(element, cssProperty, tailwindPattern) {
-  const hasDirectStyle = element.style[cssProperty] !== "";
-  const hasTailwindClass = element.className.match(tailwindPattern);
-  return !hasDirectStyle && !hasTailwindClass;
-}
-function findClosestMatch(value, map, tolerance = 2) {
-  let closestClass = Object.values(map)[0];
-  let minDiff = Infinity;
-  for (const [px, className] of Object.entries(map)) {
-    const diff = Math.abs(value - Number(px));
-    if (diff < minDiff) {
-      minDiff = diff;
-      closestClass = className;
-    }
-  }
-  return {
-    className: minDiff <= tolerance ? closestClass : `raw:${value}`,
-    isExact: minDiff <= tolerance
-  };
-}
-function calculateStyleProperty(element, config) {
-  const computedStyle = window.getComputedStyle(element);
-  const currentValue = computedStyle[config.cssProperty];
-  if (!currentValue) {
-    return null;
-  }
-  let tailwindClassName;
-  if (config.cssProperty === "textAlign" || config.skipTailwind) {
-    tailwindClassName = config.map[currentValue] || `raw:${currentValue}`;
-  } else if (config.cssProperty === "color" || config.cssProperty === "backgroundColor" || config.cssProperty === "borderColor") {
-    const normalizedColor = rgbaToHex(currentValue);
-    const colorValue = config.transformValue ? config.transformValue(normalizedColor) : normalizedColor;
-    tailwindClassName = config.map[colorValue] || `raw:${normalizedColor}`;
-  } else {
-    const numericValue = config.transformValue ? config.transformValue(currentValue) : parseFloat(currentValue);
-    const { className } = findClosestMatch(numericValue, config.map, config.tolerance);
-    tailwindClassName = className;
-  }
-  const inherited = config.tailwindPattern ? shouldBeInherited(element, config.cssProperty, config.tailwindPattern) : false;
-  return {
-    value: currentValue,
-    inherited,
-    tailwindClassName
-  };
-}
-export function calculateStyle(styleName, element, componentName, canUseNewInspector, styleConfigs) {
-  if ((styleName === "fontSize" || styleName === "fontWeight" || styleName === "color" || styleName === "textAlign") && !isValidElement(element, componentName, canUseNewInspector)) {
-    return null;
-  }
-  if (!isValidElementWithComponent(element, componentName, canUseNewInspector)) {
-    return null;
-  }
-  const config = styleConfigs[styleName];
-  const tailwindPattern = new RegExp(`\\b${config.tailwindPrefix}-(${Object.keys(config.map).join("|")})\\b`);
-  return calculateStyleProperty(element, _object_spread_props(_object_spread({}, config), {
-    tailwindPattern
-  }));
-}
-export const calculateFontSizeInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("fontSize", element, componentName, canUseNewInspector, styleConfigs);
-export const calculateFontWeightInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("fontWeight", element, componentName, canUseNewInspector, styleConfigs);
-export const calculateBorderRadiusInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("borderRadius", element, componentName, canUseNewInspector, styleConfigs);
-export const calculateBorderWidthInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("borderWidth", element, componentName, canUseNewInspector, styleConfigs);
-export const calculateTextAlignInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("textAlign", element, componentName, canUseNewInspector, styleConfigs);
-export const calculatePaddingInfo = (element, componentName, canUseNewInspector, styleConfigs) => {
-  if (!isValidElementWithComponent(element, componentName, canUseNewInspector)) {
-    return null;
-  }
-  return calculateStyleProperty(element, styleConfigs.padding);
-};
-export const calculateMarginInfo = (element, componentName, canUseNewInspector, styleConfigs) => {
-  if (!isValidElementWithComponent(element, componentName, canUseNewInspector)) {
-    return null;
-  }
-  return calculateStyleProperty(element, styleConfigs.margin);
-};
-export const calculateColorInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("color", element, componentName, canUseNewInspector, styleConfigs);
-export const calculateBackgroundColorInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("backgroundColor", element, componentName, canUseNewInspector, styleConfigs);
-export const calculateBorderColorInfo = (element, componentName, canUseNewInspector, styleConfigs) => calculateStyle("borderColor", element, componentName, canUseNewInspector, styleConfigs);