rw-elements-tools 1.2.0

package/shared-hooks/transforms/globalTransforms.js

@@ -0,0 +1,78 @@
+const globalTransforms = (app, args = {}) => {
+    const {
+        globalControlTypeTransforms: type,
+        globalHoverGroupTransforms: hoverGroup,
+        globalHoverGroupCustomIdTransforms: customId,
+        globalTransformsApplyTo: applyTo,
+        globalTransformOrigin: origin,
+        globalTransformScale: scale,
+        globalTransformRotate: rotate,
+        globalTransformSkewX: skewX,
+        globalTransformSkewY: skewY,
+        globalTransformTranslateX: translateX,
+        globalTransformTranslateY: translateY,
+        globalTransformScaleEnd: scaleEnd,
+        globalTransformRotateEnd: rotateEnd,
+        globalTransformSkewXEnd: skewXEnd,
+        globalTransformSkewYEnd: skewYEnd,
+        globalTransformTranslateXEnd: translateXEnd,
+        globalTransformTranslateYEnd: translateYEnd,
+    } = 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 = classnames();
+
+    if (type != "none") {
+        classes.add([
+            "transform",
+            origin,
+            scale,
+            rotate,
+            skewX,
+            skewY,
+            translateX,
+            translateY,
+        ]);
+    }
+
+    if (type == "hover") {
+        classes.add([
+            addPrefixToTailwindClasses(scaleEnd, prefix),
+            addPrefixToTailwindClasses(rotateEnd, prefix),
+            addPrefixToTailwindClasses(skewXEnd, prefix),
+            addPrefixToTailwindClasses(skewYEnd, prefix),
+            addPrefixToTailwindClasses(translateXEnd, prefix),
+            addPrefixToTailwindClasses(translateYEnd, prefix),
+        ]);
+
+        if (wantsActive) {
+            classes.add([
+                `data-[active=true]:${scaleEnd}`,
+                `data-[active=true]:${rotateEnd}`,
+                `data-[active=true]:${skewXEnd}`,
+                `data-[active=true]:${skewYEnd}`,
+                `data-[active=true]:${translateXEnd}`,
+                `data-[active=true]:${translateYEnd}`,
+            ]);
+        }
+
+        if (wantsFocus) {
+            classes.add([
+                `${prefix.replace(/hover/g, "focus")}:${scaleEnd}`,
+                `${prefix.replace(/hover/g, "focus")}:${rotateEnd}`,
+                `${prefix.replace(/hover/g, "focus")}:${skewXEnd}`,
+                `${prefix.replace(/hover/g, "focus")}:${skewYEnd}`,
+                `${prefix.replace(/hover/g, "focus")}:${translateXEnd}`,
+                `${prefix.replace(/hover/g, "focus")}:${translateYEnd}`,
+            ]);
+        }
+    }
+
+    return classes.toString();
+};

package/shared-hooks/transitions/getAlpineTransitionAttributesDesktop.js

@@ -0,0 +1,111 @@
+const alpineTransitionsDesktop = {
+    fade: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0",
+        enterEnd: "opacity-100",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100",
+        leaveEnd: "opacity-0",
+    },
+    slideDown: {
+        enter: "transition ease-out duration-300",
+        enterStart: "opacity-0 -translate-y-3",
+        enterEnd: "opacity-100 translate-y-0",
+        leave: "transition ease-in duration-300",
+        leaveStart: "opacity-100 translate-y-0",
+        leaveEnd: "opacity-0 -translate-y-3",
+    },
+    slideDownShort: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 -translate-y-3",
+        enterEnd: "opacity-100 translate-y-0",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 translate-y-0",
+        leaveEnd: "opacity-0 -translate-y-3",
+    },
+    slideUp: {
+        enter: "transition ease-out duration-300",
+        enterStart: "opacity-0 translate-y-3",
+        enterEnd: "opacity-100 translate-y-0",
+        leave: "transition ease-in duration-300",
+        leaveStart: "opacity-100 translate-y-0",
+        leaveEnd: "opacity-0 translate-y-3",
+    },
+    slideUpShort: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 translate-y-3",
+        enterEnd: "opacity-100 translate-y-0",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 translate-y-0",
+        leaveEnd: "opacity-0 translate-y-3",
+    },
+    slideLeft: {
+        enter: "transition ease-out duration-300",
+        enterStart: "opacity-0 -translate-x-3",
+        enterEnd: "opacity-100 translate-x-0",
+        leave: "transition ease-in duration-300",
+        leaveStart: "opacity-100 translate-x-0",
+        leaveEnd: "opacity-0 -translate-x-3",
+    },
+    slideLeftShort: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 translate-x-3",
+        enterEnd: "opacity-100 translate-x-0",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 translate-x-0",
+        leaveEnd: "opacity-0 translate-x-3",
+    },
+    slideRight: {
+        enter: "transition ease-out duration-300",
+        enterStart: "opacity-0 -translate-x-3",
+        enterEnd: "opacity-100 translate-x-0",
+        leave: "transition ease-in duration-300",
+        leaveStart: "opacity-100 translate-x-0",
+        leaveEnd: "opacity-0 -translate-x-3",
+    },
+    slideRightShort: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 -translate-x-3",
+        enterEnd: "opacity-100 translate-x-0",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 translate-x-0",
+        leaveEnd: "opacity-0 -translate-x-3",
+    },
+    zoom: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 scale-95",
+        enterEnd: "opacity-100 scale-100",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 scale-100",
+        leaveEnd: "opacity-0 scale-95",
+    },
+    none: {
+        enter: "duration-0",
+        enterStart: "",
+        enterEnd: "",
+        leave: "duration-0",
+        leaveStart: "",
+        leaveEnd: "",
+    },
+};
+
+const getAlpineTransitionAttributesDesktop = (transitionName) => {
+    const { enter, enterStart, enterEnd, leave, leaveStart, leaveEnd } =
+        alpineTransitionsDesktop[transitionName] ||
+        alpineTransitionsDesktop.fade;
+
+    const attributes = {
+        "x-transition:enter": enter,
+        "x-transition:enter-start": enterStart,
+        "x-transition:enter-end": enterEnd,
+        "x-transition:leave": leave,
+        "x-transition:leave-start": leaveStart,
+        "x-transition:leave-end": leaveEnd,
+    };
+
+    return Object.entries(attributes)
+        .filter(([key, value]) => value)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(" ");
+};
+

package/shared-hooks/transitions/getAlpineTransitionAttributesMobile.js

@@ -0,0 +1,110 @@
+const alpineTransitionsMobile = {
+    fade: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0",
+        enterEnd: "opacity-100",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100",
+        leaveEnd: "opacity-0",
+    },
+    slideDown: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 -translate-y-full",
+        enterEnd: "opacity-100 translate-y-0",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 translate-y-0",
+        leaveEnd: "opacity-0 -translate-y-full",
+    },
+    slideDownShort: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 -translate-y-3",
+        enterEnd: "opacity-100 translate-y-0",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 translate-y-0",
+        leaveEnd: "opacity-0 -translate-y-3",
+    },
+    slideUp: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 translate-y-full",
+        enterEnd: "opacity-100 translate-y-0",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 translate-y-0",
+        leaveEnd: "opacity-0 translate-y-full",
+    },
+    slideUpShort: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 translate-y-3",
+        enterEnd: "opacity-100 translate-y-0",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 translate-y-0",
+        leaveEnd: "opacity-0 translate-y-3",
+    },
+    slideLeft: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 translate-x-full",
+        enterEnd: "opacity-100 translate-x-0",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 translate-x-0",
+        leaveEnd: "opacity-0 translate-x-full",
+    },
+    slideLeftShort: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 translate-x-3",
+        enterEnd: "opacity-100 translate-x-0",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 translate-x-0",
+        leaveEnd: "opacity-0 translate-x-3",
+    },
+    slideRight: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 -translate-x-full",
+        enterEnd: "opacity-100 translate-x-0",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 translate-x-0",
+        leaveEnd: "opacity-0 -translate-x-full",
+    },
+    slideRightShort: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 -translate-x-3",
+        enterEnd: "opacity-100 translate-x-0",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 translate-x-0",
+        leaveEnd: "opacity-0 -translate-x-3",
+    },
+    zoom: {
+        enter: "transition ease-out",
+        enterStart: "opacity-0 scale-95",
+        enterEnd: "opacity-100 scale-100",
+        leave: "transition ease-in",
+        leaveStart: "opacity-100 scale-100",
+        leaveEnd: "opacity-0 scale-95",
+    },
+    none: {
+        enter: "duration-0",
+        enterStart: "",
+        enterEnd: "",
+        leave: "duration-0",
+        leaveStart: "",
+        leaveEnd: "",
+    },
+};
+
+const getAlpineTransitionAttributesMobile = (transitionName) => {
+    const { enter, enterStart, enterEnd, leave, leaveStart, leaveEnd } =
+        alpineTransitionsMobile[transitionName] || alpineTransitionsMobile.fade;
+
+    const attributes = {
+        "x-transition:enter": enter,
+        "x-transition:enter-start": enterStart,
+        "x-transition:enter-end": enterEnd,
+        "x-transition:leave": leave,
+        "x-transition:leave-start": leaveStart,
+        "x-transition:leave-end": leaveEnd,
+    };
+
+    return Object.entries(attributes)
+        .filter(([key, value]) => value)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(" ");
+};
+

package/shared-hooks/transitions/globalTransitions.js

@@ -0,0 +1,48 @@
+const globalTransitions = (app, alwaysWantsHover = false) => {
+  const {
+    globalControlTypeTransforms,
+    globalControlTypeEffects,
+    globalControlTypeFilters,
+    globalFilterEnable,
+    globalControlTypeBorders,
+    globalControlTypeBg,
+    globalControlTypeOverlay,
+    globalControlTypeSVGFill,
+    globalControlTypeSVGStroke,
+    globalControlTypeOutline,
+    globalTransitionsProperty: property,
+    globalTransitionsDuration: duration,
+    globalTransitionsDelay: delay,
+    globalTransitionsTimingFunction: timingFunction,
+    globalTransitionsTimingFunctionCustom: customTimingFunction,
+  } = app.props;
+
+  const customTimingFunctionFormatted = customTimingFunction?.replace(/,\s/g, ',_');
+
+  const aControlWantsHover = () => {
+    return alwaysWantsHover || globalFilterEnable || [
+      globalControlTypeTransforms,
+      globalControlTypeEffects,
+      globalControlTypeFilters,
+      globalControlTypeBorders,
+      globalControlTypeBg,
+      globalControlTypeSVGFill,
+      globalControlTypeSVGStroke,
+      globalControlTypeOverlay,
+      globalControlTypeOutline,
+    ].some(prop => {
+        const validValues = ['none', 'static', '', undefined, null];
+        return !validValues.includes(prop);
+    });
+  }
+
+  return aControlWantsHover()
+    ? classnames([
+      // `transform-gpu will-change-transform`,
+      property === 'transition-default' ? 'transition' : property,
+      duration,
+      delay,
+      timingFunction === 'custom' ? customTimingFunctionFormatted : timingFunction,
+    ]).toString()
+    : '';
+};

package/shared-hooks/typography/globalButtonFontAndTextStyles.js

@@ -0,0 +1,65 @@
+/**
+ * Generates border classes based on props.
+ *
+ * @param {Object} props - The properties object containing style definitions.
+ * @returns {string} The generated class string.
+ */
+const globalButtonFontAndTextStyles = (rw, args = {}) => {
+  const {
+    globalButtonFontAndTextStylesTextAlign,
+    globalButtonFontAndTextStylesColor,
+    globalButtonFontAndTextStylesColorOpacity,
+    globalButtonFontAndTextStylesFont,
+    globalButtonFontAndTextStylesFontSize,
+    globalButtonFontAndTextStylesTextShadow,
+    globalButtonFontAndTextStylesFontWeight,
+    globalButtonFontAndTextStylesLineHeight,
+    globalButtonFontAndTextStylesLetterSpacing,
+    globalButtonFontAndTextStylesItalic,
+    globalButtonFontAndTextStylesUnderline,
+    globalButtonFontAndTextStylesTextTransform,
+    globalButtonFontAndTextStylesColorHover,
+    globalButtonFontAndTextStylesColorOpacityHover,
+    globalButtonFontAndTextStylesTextShadowHover,
+  } = rw.props;
+
+  const wantsFocus = args.focus || false;
+  const wantsActive = args.active || false;
+
+  const classes = classnames([
+    globalButtonFontAndTextStylesTextAlign,
+    globalButtonFontAndTextStylesColor,
+    globalButtonFontAndTextStylesColorOpacity,
+    globalButtonFontAndTextStylesFont,
+    globalButtonFontAndTextStylesFontSize,
+    globalButtonFontAndTextStylesTextShadow,
+    globalButtonFontAndTextStylesFontWeight,
+    globalButtonFontAndTextStylesLineHeight,
+    globalButtonFontAndTextStylesLetterSpacing,
+    globalButtonFontAndTextStylesItalic,
+    globalButtonFontAndTextStylesUnderline,
+    globalButtonFontAndTextStylesTextTransform,
+    globalButtonFontAndTextStylesColorHover,
+    globalButtonFontAndTextStylesColorOpacityHover,
+    globalButtonFontAndTextStylesTextShadowHover,
+  ]);
+
+  if (wantsFocus) {
+    classes.add([
+      globalButtonFontAndTextStylesColorHover.replace('hover:', 'focus:'),
+      globalButtonFontAndTextStylesColorOpacityHover.replace('hover:', 'focus:'),
+      globalButtonFontAndTextStylesTextShadowHover.replace('hover:', 'focus:'),
+    ]);
+  }
+
+  if (wantsActive) {
+    classes.add([
+      globalButtonFontAndTextStylesColorHover.replace('hover:', 'data-[active=true]:'),
+      globalButtonFontAndTextStylesColorOpacityHover.replace('hover:', 'data-[active=true]:'),
+      globalButtonFontAndTextStylesTextShadowHover.replace('hover:', 'data-[active=true]:'),
+    ]);
+  }
+    
+  return classes.toString();
+};
+

package/shared-hooks/typography/globalHeadingColor.js

@@ -0,0 +1,69 @@
+const globalHeadingTextColor = (rw, type, prefix) => {
+    const {
+        globalTextColor: color,
+        globalTextColorOpacity: opacity,
+        globalTextColorHover: colorHover,
+        globalTextColorOpacityHover: opacityHover,
+    } = rw.props;
+
+    return classnames([
+        color,
+        opacity,
+        ...(type == "hover"
+            ? [
+                  addPrefixToTailwindClasses(colorHover, prefix),
+                  addPrefixToTailwindClasses(opacityHover, prefix),
+              ]
+            : []),
+    ]).toString();
+};
+
+const globalHeadingColor = (rw) => {
+    const {
+        globalBgType,
+        globalControlTypeBg: type,
+        globalHoverGroupBg: hoverGroup,
+        globalHoverGroupCustomIdBg: customId,
+    } = rw.props;
+    const { mode } = rw.project;
+    const { node } = rw;
+
+    const prefix = getHoverPrefix(node, "", hoverGroup, customId);
+
+    let classes = classnames([]);
+    switch (globalBgType) {
+        case "color":
+            classes.add(globalHeadingTextColor(rw, type, prefix));
+            break;
+        case "gradient":
+            classes
+                .add([
+                    "bg-clip-text",
+                    "text-[transparent]",
+                    ...globalBgGradient(rw, {
+                        prefix: prefix,
+                        prefixCallback: addPrefixToTailwindClasses,
+                    })
+                        .split(" ")
+                        .filter(Boolean),
+                ])
+                .modifier(mode == "edit" ? "[&_span]" : "");
+            break;
+        case "image":
+            classes
+                .add([
+                    "bg-clip-text",
+                    "text-[transparent]",
+                    ...globalBgImage(rw, {
+                        prefix: prefix,
+                        prefixCallback: addPrefixToTailwindClasses,
+                    })
+                        .split(" ")
+                        .filter(Boolean),
+                ])
+                .modifier(mode == "edit" ? "[&_span]" : "");
+            break;
+    }
+
+    return classes.toString();
+};

package/shared-hooks/typography/globalInputFontAndTextStyles.js

@@ -0,0 +1,40 @@
+/**
+ * Generates border classes based on props.
+ *
+ * @param {Object} props - The properties object containing style definitions.
+ * @returns {string} The generated class string.
+ */
+const globalInputFontAndTextStyles = (rw) => {
+    const {
+        globalInputFontAndTextStylesColor,
+        globalInputFontAndTextStylesColorOpacity,
+        globalInputFontAndTextStylesTextShadow,
+        globalInputFontAndTextStylesTextAlign,
+        globalInputFontAndTextStylesFont,
+        globalInputFontAndTextStylesFontSize,
+        globalInputFontAndTextStylesFontWeight,
+        globalInputFontAndTextStylesLineHeight,
+        globalInputFontAndTextStylesLetterSpacing,
+        globalInputFontAndTextStylesTextTransform,
+        globalInputFontAndTextStylesItalic,
+        globalInputFontAndTextStylesUnderline,
+    } = rw.props;
+  
+    const classes = classnames([
+        globalInputFontAndTextStylesColor,
+        globalInputFontAndTextStylesColorOpacity,
+        globalInputFontAndTextStylesTextShadow,
+        globalInputFontAndTextStylesTextAlign,
+        globalInputFontAndTextStylesFont,
+        globalInputFontAndTextStylesFontSize,
+        globalInputFontAndTextStylesFontWeight,
+        globalInputFontAndTextStylesLineHeight,
+        globalInputFontAndTextStylesLetterSpacing,
+        globalInputFontAndTextStylesTextTransform,
+        globalInputFontAndTextStylesItalic,
+        globalInputFontAndTextStylesUnderline,
+    ]);
+      
+    return classes.toString();
+  };
+  

package/shared-hooks/typography/globalTextFontsAndTextStyles.js

@@ -0,0 +1,47 @@
+/**
+ * @param {Object} app - The properties object containing style definitions.
+ * @returns {string} The generated class string.
+ */
+const globalTextFontsAndTextStyles = (app) => {
+    const {
+        globalTextFontFamily,
+        globalTextFontSize,
+        globalTextFontWeight,
+        globalTextLetterSpacing,
+        globalTextLineHeight,
+        globalTextItalic,
+        globalTextTextShadow,
+        globalTextTextTransform,
+        globalTextWhiteSpace,
+        globalTextTextDecoration,
+        globalTextTextDecorationStyle,
+        globalTextTextDecorationOffset,
+        globalTextTextDecorationColor,
+        globalTextTextDecorationOpacity,
+    } = app.props;
+
+    return classnames()
+        .add([
+            globalTextFontFamily,
+            globalTextFontSize,
+            globalTextFontWeight,
+            globalTextLetterSpacing,
+            globalTextLineHeight,
+            globalTextItalic,
+            globalTextTextShadow,
+            globalTextTextTransform,
+            globalTextWhiteSpace,
+        ])
+        .add(
+            globalTextTextDecoration !== "no-underline"
+                ? [
+                      globalTextTextDecoration,
+                      globalTextTextDecorationOffset,
+                      globalTextTextDecorationStyle,
+                      `${globalTextTextDecorationColor}/${globalTextTextDecorationOpacity}`,
+                  ]
+                : []
+        )
+        .toString();
+};
+