@wix/editor-react-components 1.2153.0

package/dist/site/components/TestComp/manifest.js

@@ -0,0 +1,606 @@
+import { L as LAYOUT, N as NativeStateType, D as DATA, E as ELEMENTS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { m as manifestFocusable, a as manifestMouseHover, b as manifestClickable } from "../chunks/manifestSdkMixins.js";
+const DesignStates = {
+  testCompCard: {
+    hover: { displayName: "Hover", className: "test-comp-card--hover" },
+    focus: { displayName: "Focus", className: "test-comp-card--focus" },
+    disabled: {
+      displayName: "Disabled",
+      className: "test-comp-card--disabled"
+    },
+    featured: {
+      displayName: "Featured",
+      className: "test-comp-card--featured"
+    }
+  }
+};
+const manifest = {
+  id: "cb6af77a-b0d6-424f-ba09-d4944e1e35c2",
+  type: "wixEditorElements.TestComp",
+  description: "Test for Storybook",
+  installation: {
+    initialSize: {
+      width: { sizingType: LAYOUT.SIZING_TYPE.pixels, pixels: 300 },
+      height: { sizingType: LAYOUT.SIZING_TYPE.pixels, pixels: 200 }
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/TestComp/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/TestComp"
+    }
+  },
+  editorElement: {
+    selector: ".test-comp-card",
+    displayName: "Test Card",
+    archetype: Archetype.Text,
+    data: {
+      // Settings panel: a11y with all attributes
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [
+            DATA.A11Y_ATTRIBUTES.tabIndex,
+            DATA.A11Y_ATTRIBUTES.ariaPressed,
+            DATA.A11Y_ATTRIBUTES.ariaExpanded,
+            DATA.A11Y_ATTRIBUTES.ariaDisabled,
+            DATA.A11Y_ATTRIBUTES.ariaHaspopup,
+            DATA.A11Y_ATTRIBUTES.ariaLabel,
+            DATA.A11Y_ATTRIBUTES.ariaLive,
+            DATA.A11Y_ATTRIBUTES.ariaAtomic,
+            DATA.A11Y_ATTRIBUTES.ariaAutocomplete,
+            DATA.A11Y_ATTRIBUTES.ariaBusy,
+            DATA.A11Y_ATTRIBUTES.ariaControls,
+            DATA.A11Y_ATTRIBUTES.ariaCurrent,
+            DATA.A11Y_ATTRIBUTES.ariaDescribedby,
+            DATA.A11Y_ATTRIBUTES.ariaErrormessage,
+            DATA.A11Y_ATTRIBUTES.ariaHidden,
+            DATA.A11Y_ATTRIBUTES.ariaInvalid,
+            DATA.A11Y_ATTRIBUTES.ariaLabelledby,
+            DATA.A11Y_ATTRIBUTES.ariaLevel,
+            DATA.A11Y_ATTRIBUTES.ariaMultiline,
+            DATA.A11Y_ATTRIBUTES.ariaOwns,
+            DATA.A11Y_ATTRIBUTES.ariaRelevant,
+            DATA.A11Y_ATTRIBUTES.ariaRoledescription,
+            DATA.A11Y_ATTRIBUTES.role,
+            DATA.A11Y_ATTRIBUTES.tag
+          ]
+        }
+      },
+      // Settings panel: booleanValue
+      isEnabled: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: "Is Enabled",
+        defaultValue: true
+      },
+      // Settings panel: text
+      label: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: "Label Text for Button",
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 500
+        }
+      },
+      // Settings panel: number
+      count: {
+        dataType: DATA.DATA_TYPE.number,
+        displayName: "Count",
+        defaultValue: 0,
+        [DATA.DATA_TYPE.number]: {
+          min: "0",
+          max: "100",
+          multiplier: "1"
+        }
+      },
+      // Settings panel: textEnum
+      variant: {
+        dataType: DATA.DATA_TYPE.textEnum,
+        displayName: "Variant",
+        defaultValue: "primary",
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            { value: "primary", displayName: "Primary" },
+            { value: "secondary", displayName: "Secondary" },
+            { value: "tertiary", displayName: "Tertiary" }
+          ]
+        }
+      },
+      // Settings panel: link
+      buttonLink: {
+        dataType: DATA.DATA_TYPE.link,
+        displayName: "Button Link"
+      },
+      // Settings panel: webUrl
+      externalUrl: {
+        dataType: DATA.DATA_TYPE.webUrl,
+        displayName: "External URL"
+      },
+      // Settings panel: image
+      cardImage: {
+        dataType: DATA.DATA_TYPE.image,
+        displayName: "Card Image"
+      },
+      // Settings panel: video
+      cardVideo: {
+        dataType: DATA.DATA_TYPE.video,
+        displayName: "Card Video"
+      },
+      // Settings panel: vectorArt
+      icon: {
+        dataType: DATA.DATA_TYPE.vectorArt,
+        displayName: "Icon"
+      },
+      // Design panel: direction
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      // Manage panel: arrayItems
+      items: {
+        dataType: DATA.DATA_TYPE.arrayItems,
+        displayName: "Items",
+        [DATA.DATA_TYPE.arrayItems]: {
+          data: {
+            items: {
+              name: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: "Item Name"
+              },
+              description: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: "Item Description"
+              }
+            }
+          }
+        }
+      },
+      activeItem: {
+        displayName: "Active Item",
+        dataType: DATA.DATA_TYPE.number,
+        defaultValue: 0
+      },
+      // Keep menuItems for backwards compatibility
+      menuItems: { dataType: DATA.DATA_TYPE.menuItems },
+      // Settings panel: function (custom function with parameters and return type)
+      setCount: {
+        dataType: DATA.DATA_TYPE.function,
+        displayName: "Set Count",
+        [DATA.DATA_TYPE.function]: {
+          displayName: "Set Count",
+          description: "Sets the counter to a specific value",
+          parameters: [
+            {
+              dataType: DATA.DATA_TYPE.number,
+              displayName: "Value"
+            }
+          ]
+        }
+      },
+      // Settings panel: function (with return value)
+      getCountAsText: {
+        dataType: DATA.DATA_TYPE.function,
+        displayName: "Get Count As Text",
+        [DATA.DATA_TYPE.function]: {
+          displayName: "Get Count As Text",
+          description: "Returns the current count as a formatted string",
+          returns: {
+            dataType: DATA.DATA_TYPE.text,
+            displayName: "Formatted Count"
+          }
+        }
+      },
+      ...manifestClickable(),
+      ...manifestMouseHover(),
+      ...manifestFocusable()
+    },
+    cssProperties: {
+      background: {
+        displayName: "[cssProp] Background"
+      },
+      border: {
+        displayName: "[cssProp] Border"
+      },
+      borderRadius: {
+        displayName: "[cssProp] Border Radius"
+      },
+      padding: {
+        displayName: "[cssProp] Padding"
+      },
+      boxShadow: {
+        displayName: "[cssProp] Box Shadow"
+      }
+    },
+    cssCustomProperties: {
+      // Background & Color types
+      background: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.background,
+        displayName: "[cssVar] Background"
+      },
+      "background-color": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
+        displayName: "[cssVar] Background Color"
+      },
+      color: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+        displayName: "[cssVar] Text Color"
+      },
+      fill: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.fill,
+        displayName: "[cssVar] Fill Color"
+      },
+      stroke: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.stroke,
+        displayName: "[cssVar] Stroke Color"
+      },
+      // Border types
+      border: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.border,
+        displayName: "[cssVar] Border"
+      },
+      "border-color": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
+        displayName: "[cssVar] Border Color"
+      },
+      "border-width": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
+        displayName: "[cssVar] Border Width"
+      },
+      "border-style": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStyle,
+        displayName: "[cssVar] Border Style"
+      },
+      "border-radius": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderRadius,
+        displayName: "[cssVar] Border Radius"
+      },
+      "border-top": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderTop,
+        displayName: "[cssVar] Border Top"
+      },
+      "border-bottom": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderBottom,
+        displayName: "[cssVar] Border Bottom"
+      },
+      "border-inline-start": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineStart,
+        displayName: "[cssVar] Border Inline Start"
+      },
+      "border-inline-end": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineEnd,
+        displayName: "[cssVar] Border Inline End"
+      },
+      // Spacing types
+      padding: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.padding,
+        displayName: "[cssVar] Padding"
+      },
+      "padding-top": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop,
+        displayName: "[cssVar] Padding Top"
+      },
+      "padding-bottom": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingBottom,
+        displayName: "[cssVar] Padding Bottom"
+      },
+      "padding-inline-start": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineStart,
+        displayName: "[cssVar] Padding Inline Start"
+      },
+      "padding-inline-end": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineEnd,
+        displayName: "[cssVar] Padding Inline End"
+      },
+      "column-gap": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.columnGap,
+        displayName: "[cssVar] Column Gap"
+      },
+      "row-gap": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
+        displayName: "[cssVar] Row Gap"
+      },
+      "margin-bottom": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.marginBottom,
+        displayName: "[cssVar] Margin Bottom"
+      },
+      // Effects types
+      "box-shadow": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.boxShadow,
+        displayName: "[cssVar] Box Shadow"
+      },
+      "text-shadow": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.textShadow,
+        displayName: "[cssVar] Text Shadow"
+      },
+      opacity: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.opacity,
+        displayName: "[cssVar] Opacity"
+      },
+      // Typography types
+      font: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
+        displayName: "[cssVar] Font"
+      },
+      "letter-spacing": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.letterSpacing,
+        displayName: "[cssVar] Letter Spacing"
+      },
+      "line-height": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.lineHeight,
+        displayName: "[cssVar] Line Height"
+      },
+      "text-align": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.textAlign,
+        displayName: "[cssVar] Text Align"
+      },
+      "text-decoration-line": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.textDecorationLine,
+        displayName: "[cssVar] Text Decoration"
+      },
+      "text-transform": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.textTransform,
+        displayName: "[cssVar] Text Transform"
+      },
+      // Layout types
+      "justify-content": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent,
+        displayName: "[cssVar] Justify Content"
+      },
+      "flex-direction": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.flexDirection,
+        displayName: "[cssVar] Flex Direction"
+      },
+      // Size types
+      length: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.length,
+        displayName: "[cssVar] Length"
+      },
+      height: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.height,
+        displayName: "[cssVar] Height"
+      },
+      // Other types
+      angle: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.angle,
+        displayName: "[cssVar] Angle"
+      },
+      number: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.number,
+        displayName: "[cssVar] Number"
+      },
+      "stroke-width": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.strokeWidth,
+        displayName: "[cssVar] Stroke Width"
+      },
+      "stroke-opacity": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.strokeOpacity,
+        displayName: "[cssVar] Stroke Opacity"
+      },
+      "fill-opacity": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.fillOpacity,
+        displayName: "[cssVar] Fill Opacity"
+      },
+      // customEnum example
+      "custom-option": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.customEnum,
+        displayName: "[cssVar] Custom Option",
+        defaultValue: "option1",
+        customEnum: {
+          cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.string,
+          options: [
+            {
+              value: "option1",
+              displayName: "Option 1",
+              appliedStyles: [{ property: "--custom-value", value: "10px" }]
+            },
+            {
+              value: "option2",
+              displayName: "Option 2",
+              appliedStyles: [{ property: "--custom-value", value: "20px" }]
+            }
+          ]
+        }
+      }
+    },
+    customActions: {
+      // myCssPropertyAction: {
+      //   displayName: 'Background CSSProp',
+      //   execution: {
+      //     actionType: ACTIONS.ACTION_TYPE.cssProperty,
+      //     cssProperty: {
+      //       cssPropertyKey: 'background',
+      //     },
+      //   },
+      // },
+      // myCssCustomPropertyAction: {
+      //   displayName: 'Background Custom',
+      //   execution: {
+      //     actionType: ACTIONS.ACTION_TYPE.cssCustomProperty,
+      //     cssCustomProperty: {
+      //       cssCustomPropertyKey: 'background',
+      //     },
+      //   },
+      // },
+    },
+    displayGroups: {
+      // Settings panel data items
+      settingsData: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: [
+            "isEnabled",
+            "label",
+            "count",
+            "variant",
+            "buttonLink",
+            "externalUrl",
+            "cardImage",
+            "cardVideo",
+            "icon",
+            "a11y",
+            "direction",
+            "menuItems",
+            "setCount",
+            "getCountAsText"
+          ]
+        }
+      },
+      // Manage panel - array items
+      itemsGroup: {
+        displayName: "Items",
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.arrayItems,
+        arrayItems: {
+          arrayItems: "items",
+          selectedItemIndex: "activeItem"
+        }
+      },
+      // Design panel - only customEnum types can be in cssDataType groups
+      customOptions: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.cssDataType,
+        cssDataType: {
+          items: ["custom-option"]
+        }
+      }
+    },
+    elements: {
+      title: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          selector: ".card-title",
+          displayName: "Card Title",
+          data: {
+            text: {
+              dataType: DATA.DATA_TYPE.text
+            }
+          },
+          cssProperties: {
+            font: {},
+            color: {},
+            marginBottom: {}
+          }
+        }
+      },
+      description: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          selector: ".card-description",
+          displayName: "Card Description",
+          data: {
+            text: {
+              dataType: DATA.DATA_TYPE.text
+            }
+          },
+          cssProperties: {
+            font: {},
+            color: {}
+          }
+        }
+      },
+      image: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          selector: ".card-image",
+          displayName: "Card Image",
+          data: {
+            src: {
+              dataType: DATA.DATA_TYPE.text
+            },
+            alt: {
+              dataType: DATA.DATA_TYPE.text
+            }
+          },
+          cssProperties: {
+            marginBottom: {},
+            overflow: {},
+            borderRadius: {}
+          }
+        }
+      }
+    },
+    states: {
+      hover: {
+        displayName: DesignStates.testCompCard.hover.displayName,
+        className: DesignStates.testCompCard.hover.className,
+        pseudoClass: NativeStateType.hover
+      },
+      focus: {
+        displayName: DesignStates.testCompCard.focus.displayName,
+        className: DesignStates.testCompCard.focus.className,
+        pseudoClass: NativeStateType.focus
+      },
+      disabled: {
+        displayName: DesignStates.testCompCard.disabled.displayName,
+        className: DesignStates.testCompCard.disabled.className,
+        pseudoClass: NativeStateType.disabled,
+        props: {
+          isEnabled: false
+        },
+        displayFilters: {
+          cssProperties: {
+            hide: ["boxShadow"]
+          }
+        }
+      },
+      featured: {
+        displayName: DesignStates.testCompCard.featured.displayName,
+        className: DesignStates.testCompCard.featured.className,
+        props: {
+          variant: "primary"
+        }
+      }
+    },
+    presets: {
+      myLegacyPreset: {
+        displayName: "Legacy Preset",
+        presetDefaults: {
+          cssProperties: {
+            background: {
+              defaultValue: "#ffffff"
+            }
+          },
+          elements: {
+            title: {
+              cssProperties: {
+                font: {
+                  defaultValue: "Arial, sans-serif"
+                }
+              }
+            }
+          },
+          layout: {
+            resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal
+          }
+        }
+      },
+      myNewPreset: {
+        displayName: "New Preset",
+        presetDefaults: {
+          cssProperties: {
+            background: {
+              defaultValue: "#f0f0f0"
+            },
+            border: {
+              defaultValue: "1px solid #ccc"
+            }
+          },
+          elements: {
+            title: {
+              cssProperties: {
+                font: {
+                  defaultValue: "Helvetica, sans-serif"
+                }
+              }
+            }
+          },
+          layout: {
+            resizeDirection: LAYOUT.RESIZE_DIRECTION.vertical
+          }
+        }
+      }
+    },
+    helpArticle: {
+      kbId: "c5174e27-3609-4fb6-825a-83e9e0aec65a"
+    }
+  }
+};
+export {
+  manifest as default
+};

package/dist/site/components/TextEffects3d/component.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TextEffectsSharedBuilderProps as TextEffects3dBuilderProps } from '../TextEffectsShared/TextEffectsShared.types';
+export type TextEffects3dProps = TextEffects3dBuilderProps;
+declare const TextEffects3d: React.FC<TextEffects3dBuilderProps>;
+export default TextEffects3d;

package/dist/site/components/TextEffects3d/component.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import { T as TextEffectsShared } from "../chunks/TextEffectsShared.js";
+import { T as TestIds } from "../chunks/constants15.js";
+import { u as usePatterns, P as Patterns } from "../chunks/Patterns.js";
+import { c as cn } from "../chunks/index8.js";
+const container = "container__kUr-I";
+const block = "block__EMDF3";
+const styles = {
+  container,
+  block
+};
+const TextEffects3d$1 = (props) => {
+  const { content, arePatternsDisabled } = usePatterns(props);
+  return /* @__PURE__ */ jsx(
+    TextEffectsShared,
+    {
+      ...props,
+      arePatternsDisabled,
+      tagProps: {
+        "data-testid": TestIds.viewer.container
+      },
+      "data-effect-type": "3d",
+      children: /* @__PURE__ */ jsx(
+        Patterns,
+        {
+          content,
+          arePatternsDisabled,
+          patternScope: props.patternScope,
+          unitProps: () => ({
+            className: styles.container,
+            disabledPattern: arePatternsDisabled
+          }),
+          unitPredicate: (data) => /* @__PURE__ */ jsx("span", { className: styles.block, "data-testid": TestIds.viewer.text, children: data })
+        }
+      )
+    }
+  );
+};
+const textEffects3d = "textEffects3d__1BhaT";
+const style = {
+  textEffects3d
+};
+const TextEffects3d = (props) => {
+  const {
+    text,
+    link,
+    tagName = "div",
+    direction,
+    patternScope = "none",
+    a11y
+  } = props;
+  return /* @__PURE__ */ jsx(
+    TextEffects3d$1,
+    {
+      id: props.id,
+      className: cn(
+        props.className,
+        "text-effects-3d",
+        style.textEffects3d
+      ),
+      text,
+      link,
+      isDecorative: !!(a11y == null ? void 0 : a11y.ariaHidden),
+      tagName: (a11y == null ? void 0 : a11y.tag) ?? tagName ?? "div",
+      textDirection: direction,
+      patternScope,
+      language: "en",
+      initialReducedMotion: false,
+      customClassNames: []
+    }
+  );
+};
+TextEffects3d.displayName = "TextEffects3d";
+export {
+  TextEffects3d as default
+};

package/dist/site/components/TextEffects3d/components/TextEffects3d.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TextEffectsSharedProps } from '../../TextEffectsShared/TextEffectsShared.types';
+export type TextEffects3dProps = TextEffectsSharedProps;
+declare const TextEffects3d: React.FC<TextEffectsSharedProps>;
+export default TextEffects3d;