rw-elements-tools 1.2.0

package/shared-hooks/effects/globalFilters.js

@@ -0,0 +1,80 @@
+const globalFilters = (app, args = {}) => {
+    const {
+        globalControlTypeFilters: type,
+        globalHoverGroupFilters: hoverGroup,
+        globalHoverGroupCustomIdFilters: customId,
+        globalFiltersApplyTo: applyTo,
+        // filters
+        globalFiltersBlur: blur,
+        globalFiltersBrightness: brightness,
+        globalFiltersDropShadow: dropShadow,
+        globalFiltersSaturate: saturate,
+
+        // backdrop filters
+        globalFiltersBackdropBlur: backdropBlur,
+
+        // end filters
+        globalFiltersBlurEnd: blurEnd,
+        globalFiltersBrightnessEnd: brightnessEnd,
+        globalFiltersDropShadowEnd: dropShadowEnd,
+        globalFiltersSaturateEnd: saturateEnd,
+
+        // end backdrop filters
+        globalFiltersBackdropBlurEnd: backdropBlurEnd,
+    } = 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);
+
+    if (type == "none") {
+        return "";
+    }
+
+    const wantsBlur = !blur.endsWith("[0px]") || !blurEnd.endsWith("[0px]");
+    const wantsBackdropBlur =
+        !backdropBlur.endsWith("[0px]") || !backdropBlurEnd.endsWith("[0px]");
+
+    const classes = [
+        wantsBlur ? blur : "",
+        brightness,
+        dropShadow,
+        saturate,
+        wantsBackdropBlur ? backdropBlur : "",
+    ];
+
+    if (type == "hover") {
+        classes.push(
+            wantsBlur ? `${prefix}:${blurEnd}` : "",
+            `${prefix}:${brightnessEnd}`,
+            `${prefix}:${dropShadowEnd}`,
+            `${prefix}:${saturateEnd}`,
+            wantsBackdropBlur ? `${prefix}:${backdropBlurEnd}` : ""
+        );
+
+        if (wantsActive) {
+            classes.push(
+                `data-[active=true]:${blurEnd}`,
+                `data-[active=true]:${brightnessEnd}`,
+                `data-[active=true]:${dropShadowEnd}`,
+                `data-[active=true]:${saturateEnd}`,
+                `data-[active=true]:${backdropBlurEnd}`
+            );
+        }
+
+        if (wantsFocus) {
+            classes.push(
+                `${prefix.replace(/hover/g, "focus")}:${blurEnd}`,
+                `${prefix.replace(/hover/g, "focus")}:${brightnessEnd}`,
+                `${prefix.replace(/hover/g, "focus")}:${dropShadowEnd}`,
+                `${prefix.replace(/hover/g, "focus")}:${saturateEnd}`,
+                `${prefix.replace(/hover/g, "focus")}:${backdropBlurEnd}`
+            );
+        }
+    }
+
+    return classnames(classes).toString();
+};

package/shared-hooks/effects/globalOverlay.js

@@ -0,0 +1,166 @@
+const globalOverlayColor = (app, prefix) => {
+  const {
+    globalControlTypeOverlay: controlType,
+    globalOverlayColor: color,
+    globalOverlayColorOpacity: opacity,
+    globalOverlayColorEnd: colorEnd,
+    globalOverlayColorOpacityEnd: opacityEnd,
+  } = app.props;
+
+  const classes = classnames([color, `${opacity} dark:${opacity}`]);
+
+  if (controlType == "hover") {
+    classes.add([
+      injectPrefixOnDarkModeColors(prefix, `${prefix}:${colorEnd}`),
+      `${prefix}:${opacityEnd}`,
+      `dark:${prefix}:${opacityEnd}`,
+    ]);
+  }
+
+  return classes.toString();
+}
+
+const globalOverlayGradient = (app, prefix) => {
+  const {
+    globalControlTypeOverlay: controlType,
+    globalOverlayGradientDirection: direction,
+    globalOverlayGradientDirectionEnd: directionEnd,
+
+    globalOverlayGradientFromColor: fromColor,
+    globalOverlayGradientFromOpacity: fromOpacity,
+    globalOverlayGradientFromPosition: fromPosition,
+
+    globalOverlayGradientViaEnabled: viaEnabled,
+    globalOverlayGradientViaColor: viaColor,
+    globalOverlayGradientViaOpacity: viaOpacity,
+    globalOverlayGradientViaPosition: viaPosition,
+
+    globalOverlayGradientToColor: toColor,
+    globalOverlayGradientToOpacity: toOpacity,
+    globalOverlayGradientToPosition: toPosition,
+
+    globalOverlayGradientFromColorEnd: fromColorEnd,
+    globalOverlayGradientFromOpacityEnd: fromOpacityEnd,
+    globalOverlayGradientFromPositionEnd: fromPositionEnd,
+
+    globalOverlayGradientViaEnabledEnd: viaEnabledEnd,
+    globalOverlayGradientViaColorEnd: viaColorEnd,
+    globalOverlayGradientViaOpacityEnd: viaOpacityEnd,
+    globalOverlayGradientViaPositionEnd: viaPositionEnd,
+
+    globalOverlayGradientToColorEnd: toColorEnd,
+    globalOverlayGradientToOpacityEnd: toOpacityEnd,
+    globalOverlayGradientToPositionEnd: toPositionEnd,
+  } = app.props;
+
+  const classes = classnames([
+    direction,
+    `${fromColor}/${fromOpacity}`,
+    fromPosition,
+    `${toColor}/${toOpacity}`,
+    toPosition,
+  ])
+
+  if (viaEnabled == 'true') {
+    classes.add([
+      `${viaColor}/${viaOpacity}`,
+      viaPosition,
+    ])
+  }
+
+  if (controlType == "hover") {
+    classes.add([
+      `${prefix}:${directionEnd}`,
+      `${prefix}:${fromColorEnd}/${fromOpacityEnd}`,
+      `${prefix}:${fromPositionEnd}`,
+      `${prefix}:${toColorEnd}/${toOpacityEnd}`,
+      `${prefix}:${toPositionEnd}`,
+    ])
+
+    if (viaEnabledEnd == 'true') {
+      classes.add([
+        `${prefix}:${viaColorEnd}/${viaOpacityEnd}`,
+        `${prefix}:${viaPositionEnd}`,
+      ])
+    }
+  }
+
+  return classes.toString();
+};
+
+const globalOverlayImage = (app, prefix) => {
+  const {
+    globalControlTypeOverlay: controlType,
+    globalOverlayImageResource: resource,
+    globalOverlayImagePositionX: x,
+    globalOverlayImagePositionY: y,
+    globalOverlayImageSize: size,
+    globalOverlayImageRepeat: repeat,
+
+    globalOverlayImageResourceEnd: resourceEnd,
+    globalOverlayImagePositionXEnd: xEnd,
+    globalOverlayImagePositionYEnd: yEnd,
+    globalOverlayImageSizeEnd: sizeEnd,
+    globalOverlayImageRepeatEnd: repeatEnd,
+  } = app.props;
+
+  // @TODO: add responsive image support
+  // loop over breakpoints, resize image, and add {breakpoint}:bg-[url()] classes
+
+  const bgPosition = (horizontal, vertical) => {
+    const mappings = {
+      "center-top": "bg-top",
+      "center-bottom": "bg-bottom",
+      "left-center": "bg-left",
+      "right-center": "bg-right",
+      "center-center": "bg-center",
+    };
+
+    const key = `${horizontal}-${vertical}`;
+    return mappings[key] || `bg-${key}`;
+  };
+
+  const classes = classnames().add([
+    `bg-[url(${app.getResource(resource, 1200)})]`,
+    size,
+    repeat,
+    bgPosition(x, y),
+  ]);
+
+  if (controlType == "hover") {
+    classes.add([
+      `${prefix}:bg-[url(${app.getResource(resourceEnd, 1200)})]`,
+      `${prefix}:${sizeEnd}`,
+      `${prefix}:${repeatEnd}`,
+      `${prefix}:${bgPosition(xEnd, yEnd)}`,
+    ]);
+  }
+
+  return classes.toString();
+};
+
+const globalOverlay = (app, isContainer = false) => {
+  const { globalControlTypeOverlay: controlType, globalOverlayType: type } = app.props;
+
+  const { node } = app;
+
+  node.isContainer = isContainer;
+  const prefix = getHoverPrefix(node, 'background', 'self');
+  if (controlType == "none") {
+    return "";
+  }
+
+  switch (type) {
+    case "color":
+      return globalOverlayColor(app, prefix);
+    case "gradient":
+      return globalOverlayGradient(app, prefix);
+    case "image":
+      return globalOverlayImage(app, prefix);
+    case "none":
+      return "";
+    default:
+      console.error("Invalid background type:", type);
+      return "";
+  }
+}

package/shared-hooks/interactive/globalFilter.js

@@ -0,0 +1,24 @@
+const globalFilter = (rw) => {
+    const {
+        globalFilterEnable: wantsFilter,
+        globalFilterGroup: group,
+        globalFilterCustomGroupId: groupId,
+        globalFilterTransition: transition = null,
+    } = rw.props;
+
+    const { parent } = rw.node;
+
+    const filterGroupId = group == "parent" ? parent.id : groupId;
+
+    return {
+        wantsFilter,
+        filterGroupId,
+        transition,
+        args: wantsFilter
+            ? {
+                  "data-filter-group": filterGroupId,
+                  "data-filter-transition": transition,
+              }
+            : {},
+    };
+};

package/shared-hooks/interactive/globalLink.js

@@ -0,0 +1,23 @@
+const globalLink = (app) => {
+  const { globalLink: link = null } = app.props;
+  const hasLink = typeof link === 'object' && Object.keys(link).length > 0 && link.href.length > 0;
+
+  let linkAttributes = {
+    hasLink,
+    args: {}
+  };
+
+  if (!hasLink) return linkAttributes;
+
+  const { href, title, target } = link;
+  const attrs = link.attributes?.reduce((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+
+  linkAttributes.args = {
+    ...attrs,
+    href,
+    title,
+    target,
+  };
+
+  return linkAttributes;
+};

package/shared-hooks/layout/globalActAsGridOrFlexItem.js

@@ -0,0 +1,66 @@
+const globalActAsGridOrFlexItem = (app) => {
+  const {
+    globalGridOrFlexDisplayAs: displayAs,
+    globalGridOrFlexItemSettings: settingsType,
+
+    // Grid Item
+    globalGridItemColSpan: colSpan,
+    globlaGridItemColStart: colStart,
+    globalGridItemColEnd: colEnd,
+    globalGridItemRowSpan: rowSpan,
+    globalGridItemRowStart: rowStart,
+    globalGridItemRowEnd: rowEnd,
+
+    // Flex Item
+    globalFlexItemFlex: flex,
+    globalFlexItemShrink: shrink,
+    globalFlexItemGrow: grow,
+    globalFlexItemBasis: basis,
+    globalFlexItemBasisCustom: basisCustom,
+
+    // General
+    globalGridOrFlexItemAlignSelf: alignSelf,
+    globalGridOrFlexItemJustifySelf: justifySelf,
+    globalGridOrFlexItemOrder: order,
+    globalGridOrFlexItemOrderCustom: orderCustom
+  } = app.props;
+
+  if (displayAs == "default") {
+    return false;
+  }
+
+  const classes = [];
+
+  if (displayAs == "flex") {
+    classes.push(
+      alignSelf,
+      justifySelf,
+      ...(settingsType === "advanced" ? [
+        flex,
+        shrink,
+        grow,
+        basis == "custom" ? basisCustom : basis,
+        order == "custom" ? orderCustom : order
+      ] : [])
+    );
+  }
+
+  if (displayAs == "grid") {
+    classes.push(
+      colSpan,
+      rowSpan,
+      ...(settingsType === "advanced" ? [
+        colStart !== "col-start-auto" ? colStart : undefined,
+        colEnd !== "col-end-auto" ? colEnd : undefined,
+        rowStart !== "row-start-auto" ? rowStart : undefined,
+        rowEnd !== "row-end-auto" ? rowEnd : undefined,
+        alignSelf,
+        justifySelf,
+        order == "custom" ? orderCustom : order
+      ] : [])
+    );
+  }
+
+  return classnames(classes).toString();
+}
+

package/shared-hooks/layout/globalLayout.js

@@ -0,0 +1,50 @@
+const getHiddenClasses = (hidden = {}, defaultDisplay = "block") => {
+    if (Object.keys(hidden).length === 0) {
+        return defaultDisplay;
+    }
+
+    return Object.entries(hidden).reduce((classes, [breakpoint, isHidden]) => {
+        const modifier = breakpoint === "base" ? "" : `${breakpoint}:`;
+        const className = isHidden
+            ? `${modifier}hidden`
+            : `${modifier}${defaultDisplay}`;
+        return classes ? `${classes} ${className}` : className;
+    }, "");
+};
+
+const globalLayout = (app, args = {}) => {
+    const {
+        globalLayoutPosition: position,
+        globalLayoutZIndexType: zIndexType,
+        globalLayoutZIndex: zIndex,
+
+        globalLayoutTopRightBottomLeftType: topRightBottomLeftType,
+        globalLayoutInset: inset,
+        globalLayoutTop: top,
+        globalLayoutRight: right,
+        globalLayoutBottom: bottom,
+        globalLayoutLeft: left,
+
+        globalLayoutOverflow: overflow,
+        globalLayoutIsolation: isolation,
+        globalLayoutVisibility: visibility,
+    } = app.props;
+
+    const { globalLayoutHidden } = app.responsiveProps;
+    const { defaultDisplay } = args;
+
+    const hidden = getHiddenClasses(globalLayoutHidden, defaultDisplay);
+
+    return classnames([
+        position,
+        zIndexType !== "custom" ? zIndexType : zIndex,
+        topRightBottomLeftType === "uniform" && inset,
+        ...(topRightBottomLeftType === "individual"
+            ? [top, right, bottom, left].filter(Boolean)
+            : []),
+        overflow,
+        isolation,
+        visibility,
+        hidden,
+    ]).toString();
+};

package/shared-hooks/navigation/globalMenuItem.js

@@ -0,0 +1,35 @@
+const globalMenuItem = (rw) => {
+    const {
+        globalMenuItemFontFamily,
+        globalMenuItemTextStyles,
+        globalMenuItemFontWeight,
+        globalMenuItemLetterSpacing,
+        globalMenuItemItalic,
+        globalMenuItemState,
+        globalMenuItemColor,
+        globalMenuItemOpacity,
+        globalMenuItemTextShadow,
+        globalMenuItemUnderline,
+        globalMenuItemHoverColor,
+        globalMenuItemHoverOpacity,
+        globalMenuItemHoverTextShadow,
+        globalMenuItemHoverUnderline,
+    } = rw.props;
+
+    return classnames([
+        globalMenuItemFontFamily,
+        globalMenuItemTextStyles,
+        globalMenuItemFontWeight,
+        globalMenuItemLetterSpacing,
+        globalMenuItemItalic,
+        globalMenuItemState,
+        globalMenuItemColor,
+        globalMenuItemOpacity,
+        globalMenuItemTextShadow,
+        globalMenuItemUnderline,
+        globalMenuItemHoverColor,
+        globalMenuItemHoverOpacity,
+        globalMenuItemHoverTextShadow,
+        globalMenuItemHoverUnderline,
+    ]).toString();
+};

package/shared-hooks/navigation/globalNavItems.js

@@ -0,0 +1,60 @@
+const globalNavItems = (rw, isActive = false) => {
+  const {
+    globalNavItemsTextColor: textColor,
+    globalNavItemsTextColorOpacity: textColorOpacity,
+    globalNavItemsFont: font,
+    globalNavItemsFontSize: fontSize,
+    globalNavItemsTextShadow: textShadow,
+    globalNavItemsFontWeight: fontWeight,
+    globalNavItemsLetterSpacing: letterSpacing,
+    globalNavItemsItalic: italic,
+    globalNavItemsUnderline: underline,
+
+    globalNavItemsTextColorHover: textColorHover,
+    globalNavItemsTextColorOpacityHover: textColorOpacityHover,
+    globalNavItemsTextShadowHover: textShadowHover,
+    globalNavItemsUnderlineHover: underlineHover,
+  } = rw.props;
+
+  console.log({ fontWeight });
+
+  const inactiveStyles = {
+    textColor,
+    textColorOpacity,
+    font,
+    fontSize,
+    textShadow,
+    fontWeight,
+    letterSpacing,
+    italic,
+    underline,
+  };
+
+  const activeStyles = {
+    ...inactiveStyles,
+    textColor: textColorHover,
+    textColorOpacity: textColorOpacityHover,
+    textShadow: textShadowHover,
+    underline: underlineHover,
+
+  };
+
+  // remove hover: prefix from all active styles
+  const activeStylesFormatted = Object.fromEntries(
+    Object.entries(activeStyles).map(([key, value]) => [key, value.replace(/hover:/g, '')])
+  );
+
+  const hoverStyles = {
+    textColorHover,
+    textColorOpacityHover,
+    textShadowHover,
+    underlineHover,
+  };
+
+  const currentStyles = isActive ? activeStylesFormatted : inactiveStyles;
+
+  return classnames([
+    ...Object.values(currentStyles),
+    ...Object.values(hoverStyles),
+  ]).toString();
+};

package/shared-hooks/navigation/globalNavTitle.js

@@ -0,0 +1,23 @@
+const globalNavTitle = (rw) => {
+  const {
+    globalNavTitleTextColor,
+    globalNavTitleTextColorOpacity,
+    globalNavTitleFont,
+    globalNavTitleFontSize,
+    globalNavTitleTextShadow,
+    globalNavTitleFontWeight,
+    globalNavTitleFontLetterSpacing,
+    globalNavTitleItalic,
+    globalNavTitleUnderline,
+  } = rw.props;
+  return classnames([
+    `${globalNavTitleTextColor}/${globalNavTitleTextColorOpacity}`,
+    globalNavTitleFont,
+    globalNavTitleFontSize,
+    globalNavTitleTextShadow,
+    globalNavTitleFontWeight,
+    globalNavTitleFontLetterSpacing,
+    globalNavTitleItalic,
+    globalNavTitleUnderline,
+  ]).toString();
+};

package/shared-hooks/sizing/aspectRatioClasses.js

@@ -0,0 +1,20 @@
+/**
+ * Generates aspect ratio classes based on props.
+ *
+ * @param {Object} props - The properties object containing aspect ratio definitions.
+ * @param {string} [modifier=""] - Optional CSS modifier (e.g., 'hover', 'focus').
+ * @returns {string} The generated class string.
+ */
+const aspectRatioClasses = (rw) => {
+    const { aspectRatio, aspectRatioCustom } = rw.props;
+
+    const aspectRatioClasses = {
+        "aspect-[auto]":
+            rw.component.title == "Video" ? "aspect-video" : "aspect-[auto]",
+        "aspect-[custom]": aspectRatioCustom,
+    };
+
+    return classnames()
+        .add(aspectRatioClasses[aspectRatio] || aspectRatio)
+        .toString();
+};

package/shared-hooks/sizing/globalSizing.js

@@ -0,0 +1,19 @@
+const globalSizing = (app) => {
+  const {
+    globalHeight: height,
+    globalWidth: width,
+    globalSizingMinMaxEnabled: minMaxEnabled,
+    globalMinWidth: minWidth,
+    globalMaxWidth: maxWidth,
+    globalMinHeight: minHeight,
+    globalMaxHeight: maxHeight,
+  } = app.props;
+
+  const classes = classnames([width, height]);
+
+  if (minMaxEnabled == 'true') {
+    classes.add([minWidth, minHeight, maxWidth, maxHeight]);
+  }
+
+  return classes.toString();
+}

package/shared-hooks/sizing/globalSizingContainer.js

@@ -0,0 +1,40 @@
+const globalSizingContainer = (app) => {
+  const {
+    globalWidthType: widthType,
+    globalWidth: width,
+    globalHeightType: heightType,
+    globalHeight: height,
+
+    globalSizingMinMaxEnabled: minMaxEnabled,
+    globalMinWidth: minWidth,
+    globalMaxWidth: maxWidth,
+    globalMinHeight: minHeight,
+    globalMaxHeight: maxHeight,
+  } = app.props
+
+  const widthClasses = {
+    'auto': 'w-auto',
+    'full': 'w-full',
+    'screen': 'w-screen',
+    'container': 'container w-full',
+    'theme': width
+  };
+
+  const heightClasses = {
+    'auto': 'h-auto',
+    'full': 'h-full',
+    'screen': 'h-screen',
+    'theme': height
+  };
+
+  const classes = classnames([
+    widthClasses[widthType],
+    heightClasses[heightType]
+  ]);
+
+  if (minMaxEnabled == 'true') {
+    classes.add([minWidth, minHeight, maxWidth, maxHeight]);
+  }
+
+  return classes.toString();
+}

package/shared-hooks/sizing/objectClasses.js

@@ -0,0 +1,9 @@
+const objectClasses = (rw) => {
+    const { aspectRatio, objectFit, objectPosition } = rw.props;
+
+    return classnames([
+        aspectRatio !== "aspect-[auto]" ? objectFit : "",
+        objectPosition,
+    ]).toString();
+};
+

package/shared-hooks/spacing/globalSpacing.js

@@ -0,0 +1,13 @@
+const globalSpacing = (app) => {
+  const {
+    globalSpacingEnabled: enabled,
+    globalMargin: margin,
+    globalPadding: padding,
+  } = app.props;
+
+  if (enabled == 'false') {
+    return false;
+  }
+
+  return classnames([margin, padding]).toString();
+}

package/shared-hooks/spacing/globalSpacingMargin.js

@@ -0,0 +1,11 @@
+const globalSpacingMargin = (app) => {
+  const {
+    globalSpacingEnabled: enabled,
+    globalMargin: margin,
+  } = app.props;
+
+  return enabled == 'false'
+    ? false
+    : margin;
+}
+

package/shared-hooks/spacing/globalSpacingPadding.js

@@ -0,0 +1,11 @@
+const globalSpacingPadding = (app) => {
+  const {
+    globalSpacingEnabled: enabled,
+    globalPadding: padding,
+  } = app.props;
+
+  return enabled == 'false'
+    ? false
+    : padding;
+}
+