rw-elements-tools 1.2.0

package/shared-hooks/background/globalBackground.js

@@ -0,0 +1,306 @@
+const globalBgColor = (app, args = {}) => {
+    const {
+        globalControlTypeBg: controlType,
+        globalBgColor: color,
+        globalBgColorOpacity: opacity,
+        globalBgColorEnd: colorEnd,
+        globalBgColorOpacityEnd: opacityEnd,
+    } = app.props;
+
+    const wantsPeer = args?.peer || false;
+    const wantsActive = args?.active || false;
+    const wantsFocus = args?.focus || false;
+
+    const classes = classnames([color, opacity, `dark:${opacity}`]);
+
+    if (controlType == "hover") {
+        if (wantsPeer) {
+            classes.add([
+                colorEnd.replace(/hover:/g, "peer-hover:"),
+                opacityEnd.replace(/hover:/g, "peer-hover:"),
+                `dark:${opacityEnd.replace(/hover:/g, "peer-hover:")}`,
+            ]);
+        } else {
+            classes.add([colorEnd, opacityEnd, `dark:${opacityEnd}`]);
+        }
+
+        if (wantsActive) {
+            classes.add([
+                colorEnd.replace(/hover:/g, "data-[active=true]:"),
+                opacityEnd.replace(/hover:/g, "data-[active=true]:"),
+                `dark:${opacityEnd.replace(/hover:/g, "data-[active=true]:")}`,
+            ]);
+        }
+
+        if (wantsFocus) {
+            classes.add([
+                colorEnd.replace(/hover:/g, "focus:"),
+                opacityEnd.replace(/hover:/g, "focus:"),
+                `dark:${opacityEnd.replace(/hover:/g, "focus:")}`,
+            ]);
+        }
+    }
+
+    return classes.toString();
+};
+
+const globalBgGradient = (app, args) => {
+    const {
+        globalControlTypeBg: controlType,
+        globalBgGradientDirection: direction,
+        globalBgGradientDirectionEnd: directionEnd,
+
+        globalBgGradientFromColor: fromColor,
+        globalBgGradientFromOpacity: fromOpacity,
+        globalBgGradientFromPosition: fromPosition,
+
+        globalBgGradientViaEnabled: viaEnabled,
+        globalBgGradientViaColor: viaColor,
+        globalBgGradientViaOpacity: viaOpacity,
+        globalBgGradientViaPosition: viaPosition,
+
+        globalBgGradientToColor: toColor,
+        globalBgGradientToOpacity: toOpacity,
+        globalBgGradientToPosition: toPosition,
+
+        globalBgGradientFromColorEnd: fromColorEnd,
+        globalBgGradientFromOpacityEnd: fromOpacityEnd,
+
+        globalBgGradientViaEnabledEnd: viaEnabledEnd,
+        globalBgGradientViaColorEnd: viaColorEnd,
+        globalBgGradientViaOpacityEnd: viaOpacityEnd,
+
+        globalBgGradientToColorEnd: toColorEnd,
+        globalBgGradientToOpacityEnd: toOpacityEnd,
+    } = app.props;
+
+    const wantsPeer = args?.peer || false;
+    const wantsActive = args?.active || false;
+    const wantsFocus = args?.focus || false;
+    const hasPrefix = (args?.prefix && args?.prefixCallback) || false;
+    const prefixCallback = args?.prefixCallback || (() => {});
+
+    const classes = classnames([
+        direction,
+        fromColor,
+        fromOpacity,
+        fromPosition,
+        toColor,
+        toOpacity,
+        toPosition,
+    ]);
+
+    if (viaEnabled == "true") {
+        classes.add([viaColor, viaOpacity, viaPosition]);
+    }
+
+    if (controlType == "hover") {
+        if (wantsPeer) {
+            classes.add([
+                directionEnd.replace(/hover:/g, "peer-hover:"),
+                fromColorEnd.replace(/hover:/g, "peer-hover:"),
+                fromOpacityEnd.replace(/hover:/g, "peer-hover:"),
+                toColorEnd.replace(/hover:/g, "peer-hover:"),
+                toOpacityEnd.replace(/hover:/g, "peer-hover:"),
+            ]);
+        } else if (hasPrefix) {
+            classes.add([
+                prefixCallback(
+                    directionEnd.replace(/hover:/g, ""),
+                    args.prefix
+                ),
+                prefixCallback(
+                    fromColorEnd.replace(/hover:/g, ""),
+                    args.prefix
+                ),
+                prefixCallback(
+                    fromOpacityEnd.replace(/hover:/g, ""),
+                    args.prefix
+                ),
+                prefixCallback(toColorEnd.replace(/hover:/g, ""), args.prefix),
+                prefixCallback(
+                    toOpacityEnd.replace(/hover:/g, ""),
+                    args.prefix
+                ),
+            ]);
+        } else {
+            classes.add([
+                directionEnd,
+                fromColorEnd,
+                fromOpacityEnd,
+                toColorEnd,
+                toOpacityEnd,
+            ]);
+        }
+
+        if (wantsActive) {
+            classes.add([
+                directionEnd.replace(/hover:/g, "data-[active=true]:"),
+                fromColorEnd.replace(/hover:/g, "data-[active=true]:"),
+                fromOpacityEnd.replace(/hover:/g, "data-[active=true]:"),
+                toColorEnd.replace(/hover:/g, "data-[active=true]:"),
+                toOpacityEnd.replace(/hover:/g, "data-[active=true]:"),
+            ]);
+        }
+
+        if (wantsFocus) {
+            classes.add([
+                directionEnd.replace(/hover:/g, "focus:"),
+                fromColorEnd.replace(/hover:/g, "focus:"),
+                fromOpacityEnd.replace(/hover:/g, "focus:"),
+                toColorEnd.replace(/hover:/g, "focus:"),
+                toOpacityEnd.replace(/hover:/g, "focus:"),
+            ]);
+        }
+
+        if (viaEnabledEnd == "true") {
+            if (wantsPeer) {
+                classes.add([
+                    viaColorEnd.replace(/hover:/g, "peer-hover:"),
+                    viaOpacityEnd.replace(/hover:/g, "peer-hover:"),
+                ]);
+            } else if (hasPrefix) {
+                classes.add([
+                    prefixCallback(
+                        viaColorEnd.replace(/hover:/g, ""),
+                        args.prefix
+                    ),
+                    prefixCallback(
+                        viaOpacityEnd.replace(/hover:/g, ""),
+                        args.prefix
+                    ),
+                ]);
+            } else {
+                classes.add([viaColorEnd, viaOpacityEnd]);
+            }
+
+            if (wantsActive) {
+                classes.add([
+                    viaColorEnd.replace(/hover:/g, "data-[active=true]:"),
+                    viaOpacityEnd.replace(/hover:/g, "data-[active=true]:"),
+                ]);
+            }
+
+            if (wantsFocus) {
+                classes.add([
+                    viaColorEnd.replace(/hover:/g, "focus:"),
+                    viaOpacityEnd.replace(/hover:/g, "focus:"),
+                ]);
+            }
+        }
+    }
+
+    return classes.toString();
+};
+
+const globalBgImage = (app, args) => {
+    const {
+        globalControlTypeBg: controlType,
+        globalBgImageType: type,
+        globalBgImageCmsField: cmsField,
+        globalBgImageResource: resource,
+        globalBgImagePosition: position,
+        globalBgImageSize: size,
+        globalBgImageRepeat: repeat,
+
+        globalBgImageResourceEnd: resourceEnd,
+        globalBgImagePositionEnd: positionEnd,
+        globalBgImageSizeEnd: sizeEnd,
+        globalBgImageRepeatEnd: repeatEnd,
+    } = app.props;
+
+    const isCms = type === "cms";
+    if (isCms) {
+        return classnames([size, repeat, position]).toString();
+    }
+
+    const wantsPeer = args?.peer || false;
+    const wantsActive = args?.active || false;
+    const wantsFocus = args?.focus || false;
+    const hasPrefix = (args?.prefix && args?.prefixCallback) || false;
+    const prefixCallback = args?.prefixCallback || (() => {});
+
+    const classes = classnames().add([
+        `bg-[url(${resource?.image})]`,
+        size,
+        repeat,
+        position,
+    ]);
+
+    if (controlType == "hover") {
+        if (wantsPeer) {
+            classes.add([
+                `peer-hover:bg-[url(${resourceEnd?.image})]`,
+                sizeEnd.replace(/hover:/g, "peer-hover:"),
+                repeatEnd.replace(/hover:/g, "peer-hover:"),
+                positionEnd.replace(/hover:/g, "peer-hover:"),
+            ]);
+        } else if (hasPrefix) {
+            classes.add([
+                prefixCallback(`bg-[url(${resourceEnd?.image})]`, args.prefix),
+                prefixCallback(sizeEnd.replace(/hover:/g, ""), args.prefix),
+                prefixCallback(repeatEnd.replace(/hover:/g, ""), args.prefix),
+                prefixCallback(positionEnd.replace(/hover:/g, ""), args.prefix),
+            ]);
+        } else {
+            classes.add([
+                `hover:bg-[url(${resourceEnd?.image})]`,
+                sizeEnd,
+                repeatEnd,
+                positionEnd,
+            ]);
+        }
+
+        if (wantsActive) {
+            classes.add([
+                `data-[active=true]:bg-[url(${resourceEnd?.image})]`,
+                sizeEnd.replace(/hover:/g, "data-[active=true]:"),
+                repeatEnd.replace(/hover:/g, "data-[active=true]:"),
+                positionEnd.replace(/hover:/g, "data-[active=true]:"),
+            ]);
+        }
+
+        if (wantsFocus) {
+            classes.add([
+                `focus:bg-[url(${resourceEnd?.image})]`,
+                sizeEnd.replace(/hover:/g, "focus:"),
+                repeatEnd.replace(/hover:/g, "focus:"),
+                positionEnd.replace(/hover:/g, "focus:"),
+            ]);
+        }
+    }
+
+    return classes.toString();
+};
+
+const globalBgVideoThumbnail = (app, args) => {
+    const { globalBgVideo: video } = app.props;
+
+    return classnames([
+        `bg-[url(${video?.image})] bg-cover bg-center`,
+    ]).toString();
+};
+
+const globalBackground = (app, args = {}) => {
+    const { globalControlTypeBg: controlType, globalBgType: type } = app.props;
+
+    if (controlType == "none") {
+        return "";
+    }
+
+    switch (type) {
+        case "color":
+            return globalBgColor(app, args);
+        case "gradient":
+            return globalBgGradient(app, args);
+        case "image":
+            return globalBgImage(app, args);
+        case "video":
+            return globalBgVideoThumbnail(app, args);
+        case "none":
+            return "";
+        default:
+            console.error("Invalid background type:", type);
+            return "";
+    }
+};

package/shared-hooks/background/globalBgImageFetchPriority.js

@@ -0,0 +1,34 @@
+const globalBgImageFetchPriority = (rw) => {
+    const {
+        globalBgImageFetchPriority,
+        globalBgType,
+        globalBgImageResource,
+        globalBgImageResourceEnd,
+    } = rw.props;
+
+    if (globalBgType != "image") {
+        return {
+            wantsFetchPriority: false,
+            linkElement: "",
+            linkElementEnd: "",
+        };
+    }
+
+    const globalBgImageFetchPriorityEnabled = globalBgImageFetchPriority != "auto";
+
+    let globalBgImageFetchPriorityLinkElement = "";
+    if (globalBgImageResource?.image) {
+        globalBgImageFetchPriorityLinkElement = `<link rel='preload' href='${globalBgImageResource?.image}' as='image' fetchpriority='${globalBgImageFetchPriority}' />`;
+    }
+
+    let globalBgImageFetchPriorityLinkElementEnd = "";
+    if (globalBgImageResourceEnd?.image) {
+        globalBgImageFetchPriorityLinkElementEnd = `<link rel='preload' href='${globalBgImageResourceEnd?.image}' as='image' fetchpriority='${globalBgImageFetchPriority}' />`;
+    }
+
+    return {
+        globalBgImageFetchPriorityEnabled,
+        globalBgImageFetchPriorityLinkElement,
+        globalBgImageFetchPriorityLinkElementEnd,
+    };
+};

package/shared-hooks/borders/globalBorders.js

@@ -0,0 +1,85 @@
+const globalBorders = (app, args = {}) => {
+  const {
+    globalControlTypeBorders: type,
+    globalBordersColor: color,
+    globalBordersColorOpacity: colorOpacity,
+    globalBordersWidth: width,
+    globalBordersRadius: radius,
+    globalBordersStyle: style,
+    globalBordersColorEnd: colorEnd,
+    globalBordersColorOpacityEnd: colorOpacityEnd,
+    globalBordersWidthEnd: widthEnd,
+    globalBordersRadiusEnd: radiusEnd,
+    globalBordersStyleEnd: styleEnd,
+  } = app.props;
+
+  const classes = [];
+
+  const { node } = app;
+  node.isContainer = args.isContainer || false;
+  const wantsActive = args.active || false;
+  const wantsFocus = args.focus || false;
+
+  if (type == 'none') {
+    return '';
+  }
+
+  classes.push(
+    width,
+    style,
+    radius,
+    color.split(' ')
+        .filter(Boolean)  // Remove empty strings
+        .map(c => `${c.trim()}/${colorOpacity}`)
+        .join(' '),
+  );
+
+  const prefix = getHoverPrefix(node, 'background', 'self');
+  if (type == 'hover') {
+    classes.push(
+      widthEnd,
+      radiusEnd,
+      `${prefix}:${styleEnd}`,
+      colorEnd.split(' ')
+          .filter(Boolean)
+          .map(c => `${prefix}:${c.trim()}/${colorOpacityEnd}`)
+          .join(' '),
+    );
+  }
+
+  if (wantsActive) {
+    const endColor = type == 'hover' ? colorEnd : color;
+    const endWidth = type == 'hover' ? widthEnd : width;
+    const endRadius = type == 'hover' ? radiusEnd : radius;
+    const endStyle = type == 'hover' ? styleEnd : style;
+
+    classes.push(
+      endWidth.replace(/hover/g, 'data-[active=true]'),
+      endRadius.replace(/hover/g, 'data-[active=true]'),
+      `data-[active=true]:${endStyle}`,
+      endColor.split(' ')
+          .filter(Boolean)
+          .map(c => `data-[active=true]:${c.trim()}/${colorOpacityEnd}`)
+          .join(' '),
+    );
+  }
+
+  if (wantsFocus) {
+    const endColor = type == 'hover' ? colorEnd : color;
+    const endWidth = type == 'hover' ? widthEnd : width;
+    const endRadius = type == 'hover' ? radiusEnd : radius;
+    const endStyle = type == 'hover' ? styleEnd : style;
+
+    classes.push(
+      endWidth.replace(/hover/g, 'focus'),
+      endRadius.replace(/hover/g, 'focus'),
+      `${prefix.replace(/hover/g, "focus")}:${endStyle}`,
+      endColor.split(' ')
+          .filter(Boolean)
+          .map(c => `${prefix.replace(/hover/g, "focus")}:${c.trim()}/${colorOpacityEnd}`)
+          .join(' '),
+    );
+  }
+
+  return classnames(classes).toString();
+}

package/shared-hooks/borders/globalOutline.js

@@ -0,0 +1,39 @@
+const globalOutline = (rw) => {
+    const {
+        globalControlTypeOutline,
+        globalOutlineStyle,
+        globalOutlineColor,
+        globalOutlineColorOpacity,
+        globalOutlineWidth,
+        globalOutlineOffset,
+
+        globalOutlineColorFocus,
+        globalOutlineColorOpacityFocus,
+        globalOutlineWidthFocus,
+        globalOutlineOffsetFocus,
+    } = rw.props;
+    
+    const classes = classnames();
+    if (globalControlTypeOutline == 'none') {
+        return '';
+    }
+
+    if (globalControlTypeOutline != 'none') {
+        classes.add([
+            `${globalOutlineStyle}`,
+            `${globalOutlineColor}/${globalOutlineColorOpacity}`,
+            globalOutlineWidth,
+            globalOutlineOffset,
+        ]);
+    }
+
+    if (globalControlTypeOutline == 'focus') {
+        classes.add([
+            `${globalOutlineColorFocus}/${globalOutlineColorOpacityFocus}`,
+            globalOutlineWidthFocus,
+            globalOutlineOffsetFocus,
+        ]);
+    }
+    
+    return classes.toString();
+}

package/shared-hooks/core/addPrefixToTailwindClasses.js

@@ -0,0 +1,24 @@
+/**
+ * Adds a prefix (like "hover:" or "group-hover:") to Tailwind classes.
+ * Handles classes that already have modifiers by inserting the prefix after the existing modifier.
+ */
+function addPrefixToTailwindClasses(classString, prefix) {
+    return classString
+        .split(/\s+/)
+        .map((cls) => {
+            // Remove "hover:" from the class string to avoid duplication
+            cls = cls.replace(/hover:/g, "");
+
+            // If already has prefix after modifier, skip
+            if (cls.includes(`${prefix}:`)) return cls;
+            // If has modifier (e.g. md:), insert prefix after modifier
+            const match = cls.match(/^([a-z0-9]+:)(.+)$/i);
+            if (match) {
+                return `${match[1]}${prefix}:${match[2]}`;
+            }
+            // Otherwise, just add prefix at start
+            return `${prefix}:${cls}`;
+        })
+        .join(" ");
+}
+

package/shared-hooks/core/advancedClasses.js

@@ -0,0 +1,5 @@
+const advancedClasses = (rw) => {
+    const { display, cssClasses, overflow, zIndex } = rw.props;
+
+    return classnames([display, cssClasses, overflow, zIndex]).toString();
+};

package/shared-hooks/core/classnames.js

@@ -0,0 +1,92 @@
+/**
+ * A function to manage CSS class names with optional modifiers.
+ *
+ * @param {string|string[]} [initialClasses=''] - Initial space-separated class names or an array of class names.
+ * @returns {Object} An object with methods to manipulate the class names.
+ */
+const classnames = (initialClasses = "") => {
+  // Handle both string and array input for initial classes
+  let initialClassArray = Array.isArray(initialClasses)
+    ? initialClasses
+    : initialClasses.split(" ").filter(Boolean);
+
+  let classes = new Set(initialClassArray);
+  let currentModifier = "";
+
+  return {
+    /**
+     * Adds one or more class names.
+     *
+     * @param {string|string[]} className - A single class name or an array of class names to add.
+     * @returns {Object} The classnames instance for chaining.
+     */
+    add(className) {
+      const classesToAdd = Array.isArray(className)
+        ? className
+        : [className];
+      classesToAdd.forEach((cls) => classes.add(cls));
+      return this;
+    },
+    /**
+     * Removes one or more class names.
+     *
+     * @param {string|string[]} className - A single class name or an array of class names to remove.
+     * @returns {Object} The classnames instance for chaining.
+     */
+    remove(className) {
+      const classesToRemove = Array.isArray(className)
+        ? className
+        : [className];
+      classesToRemove.forEach((cls) => classes.delete(cls));
+      return this;
+    },
+    /**
+     * Toggles one or more class names.
+     *
+     * @param {string|string[]} classToToggle - A single class name or an array of class names to toggle.
+     * @returns {Object} The classnames instance for chaining.
+     */
+    toggle(className) {
+      const classesToToggle = Array.isArray(className)
+        ? className
+        : [className];
+      classesToToggle.forEach((cls) => {
+        classes.has(cls) ? classes.delete(cls) : classes.add(cls);
+      });
+      return this;
+    },
+    /**
+     * Sets a CSS modifier (e.g., 'hover', 'focus').
+     *
+     * @param {string} modifier - The modifier to set, with or without a trailing colon.
+     * @returns {Object} The classnames instance for chaining.
+     */
+    modifier(modifier) {
+      if (!modifier) {
+        return this;
+      }
+
+      currentModifier = modifier.replace(/:$/, "").trim();
+      return this;
+    },
+    /**
+     * Gets the final class string with the current modifier applied.
+     *
+     * @returns {string} The final class string.
+     */
+    getClasses() {
+      const classArray = Array.from(classes);
+      return currentModifier
+        ? classArray.map((cls) => `${currentModifier}:${cls}`).join(" ")
+        : classArray.filter(Boolean).join(" ");
+    },
+    /**
+     * Returns the class string when the classnames instance is coerced to a string.
+     *
+     * @returns {string} The final class string.
+     */
+    toString() {
+      return this.getClasses();
+    },
+  };
+};

package/shared-hooks/core/getHoverPrefix.js

@@ -0,0 +1,21 @@
+const getHoverPrefix = (
+    node = {},
+    applyTo = "",
+    hoverGroup = "self",
+    customId = ""
+) => {
+    const needsPeerPrefix =
+        node.isContainer && ["background", "content"].includes(applyTo);
+
+    if (hoverGroup === "parent") return `group-hover/${node.parent.id}`;
+    if (hoverGroup === "custom") return `group-hover/${customId}`;
+    if (needsPeerPrefix && hoverGroup === "self")
+        return `group-hover/${node.id}`;
+
+    return hoverGroup === "self"
+        ? needsPeerPrefix
+            ? `peer-hover`
+            : "hover"
+        : `group-hover/${hoverGroup}`;
+};
+

package/shared-hooks/core/globalHTMLTag.js

@@ -0,0 +1,17 @@
+const globalHTMLTag = (app, fallback = "div") => {
+    const { globalHTMLTag, globalHTMLTagCustom } = app.props;
+
+    if (globalHTMLTag === "custom") {
+        return globalHTMLTagCustom
+            .replace(/</g, "")
+            .replace(/>/g, "")
+            .replace(/[^a-zA-Z0-9]/g, "");
+    }
+
+    if (globalHTMLTag == "default") {
+        return fallback;
+    }
+
+    return globalHTMLTag || fallback;
+};
+

package/shared-hooks/core/injectPrefixOnDarkModeColors.js

@@ -0,0 +1,6 @@
+const injectPrefixOnDarkModeColors = (prefix, classes) => {
+    // give a string like `bg-surface-50 dark:bg-surface-400`
+    // make sure all dark: prefixed colors get the prefix prepended to them
+    return classes.replace(/dark:(.*)/g, `dark:${prefix}:$1`);
+};
+

package/shared-hooks/effects/globalEffects.js

@@ -0,0 +1,45 @@
+const globalEffects = (app, args = {}) => {
+    const {
+        globalEffectsApplyTo: applyTo,
+        globalControlTypeEffects: type,
+        globalHoverGroupEffects: hoverGroup,
+        globalHoverGroupCustomIdEffects: customId,
+        globalBoxShadow: boxShadow,
+        globalOpacity: opacity,
+        globalBoxShadowEnd: boxShadowEnd,
+        globalOpacityEnd: opacityEnd,
+    } = app.props;
+
+    const { node } = app;
+
+    node.isContainer = args.isContainer || false;
+    const wantsActive = args.active || false;
+    const wantsFocus = args.focus || false;
+    const prefix = getHoverPrefix(node, applyTo, hoverGroup, customId);
+
+    const classes = [];
+
+    if (type != "none") {
+        classes.push(boxShadow, opacity);
+    }
+
+    if (type == "hover") {
+        classes.push(`${prefix}:${boxShadowEnd}`, `${prefix}:${opacityEnd}`);
+
+        if (wantsActive) {
+            classes.push(
+                `data-[active=true]:${boxShadowEnd}`,
+                `data-[active=true]:${opacityEnd}`
+            );
+        }
+
+        if (wantsFocus) {
+            classes.push(
+                `${prefix.replace(/hover/g, "focus")}:${boxShadowEnd}`,
+                `${prefix.replace(/hover/g, "focus")}:${opacityEnd}`
+            );
+        }
+    }
+
+    return classnames(classes).toString();
+};