@wix/editor-react-components 1.2153.0

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

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+import { MenuItemType } from '../Menu/Menu.types';
+import { A11y, Direction } from '@wix/editor-react-types';
+import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+type TestCompProps = {
+    id: string;
+    className?: string;
+    customClassNames?: Array<string>;
+    wix?: {
+        presetsWrapperProps?: Record<string, any>;
+    };
+    elementProps?: {
+        title?: {
+            text?: string;
+        };
+        description?: {
+            text?: string;
+        };
+        image?: {
+            src?: string;
+            alt?: string;
+        };
+    };
+    a11y?: A11y;
+    isEnabled?: boolean;
+    label?: string;
+    count?: number;
+    variant?: string;
+    buttonLink?: {
+        href?: string;
+        target?: string;
+    };
+    externalUrl?: string;
+    cardImage?: {
+        uri?: string;
+        alt?: string;
+        width?: number;
+        height?: number;
+    };
+    cardVideo?: {
+        videoId?: string;
+        videoUrl?: string;
+    };
+    icon?: {
+        svgId?: string;
+        svgContent?: string;
+    };
+    direction?: Direction;
+    items?: Array<{
+        name?: string;
+        description?: string;
+    }>;
+    activeItem?: number;
+    menuItems?: Array<MenuItemType>;
+    setCount?: (value: number) => void;
+    getCountAsText?: () => string;
+} & SdkFunctionClickableProps & SdkFunctionMouseHoverProps & SdkFunctionFocusableProps;
+declare const TestComp: React.FC<TestCompProps>;
+export default TestComp;

package/dist/site/components/TestComp/TestComp.semanticClassNames.d.ts

@@ -0,0 +1,7 @@
+declare const semanticClassNames: {
+    root: string;
+    title: string;
+    description: string;
+    image: string;
+};
+export default semanticClassNames;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const _default: (props: any) => React.JSX.Element;
+export default _default;

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

@@ -0,0 +1,205 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c as clsx } from "../chunks/clsx.js";
+import { f as formatClassNames } from "../chunks/classNames.js";
+import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
+const semanticClassNames = {
+  root: "test-comp-card"
+};
+const root = "root__IWjkn";
+const imageWrapper = "imageWrapper__aSpta";
+const image = "image__ZJUGa";
+const title = "title__cnkUK";
+const description = "description__nM9YF";
+const settingsSection = "settingsSection__dcnh6";
+const sectionTitle = "sectionTitle__ufqkd";
+const valueRow = "valueRow__THTHW";
+const valueLabel = "valueLabel__-XJYc";
+const valueContent = "valueContent__BqKX9";
+const itemsList = "itemsList__LeegW";
+const item = "item__KoXT4";
+const activeItem = "activeItem__f7Dcz";
+const emptyState = "emptyState__Wc-ze";
+const functionBtn = "functionBtn__9OquA";
+const styles = {
+  root,
+  imageWrapper,
+  image,
+  title,
+  description,
+  settingsSection,
+  sectionTitle,
+  valueRow,
+  valueLabel,
+  valueContent,
+  itemsList,
+  item,
+  activeItem,
+  emptyState,
+  functionBtn
+};
+const TestComp = (props) => {
+  var _a, _b, _c;
+  const {
+    id,
+    className,
+    customClassNames = [],
+    wix,
+    elementProps = {},
+    a11y = {},
+    isEnabled,
+    label,
+    count,
+    variant,
+    buttonLink,
+    externalUrl,
+    cardImage,
+    cardVideo,
+    icon,
+    direction,
+    items = [],
+    activeItem: activeItem2,
+    menuItems = [],
+    setCount,
+    getCountAsText,
+    onClick,
+    onDblClick,
+    onMouseIn,
+    onMouseOut,
+    onFocus,
+    onBlur
+  } = props;
+  const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
+  const ValueRow = ({
+    label: rowLabel,
+    value
+  }) => /* @__PURE__ */ jsxs("div", { className: styles.valueRow, children: [
+    /* @__PURE__ */ jsxs("span", { className: styles.valueLabel, children: [
+      rowLabel,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: styles.valueContent, children: value ?? /* @__PURE__ */ jsx("em", { children: "not set" }) })
+  ] });
+  const FunctionRow = ({
+    label: rowLabel,
+    fn
+  }) => /* @__PURE__ */ jsxs("div", { className: styles.valueRow, children: [
+    /* @__PURE__ */ jsxs("span", { className: styles.valueLabel, children: [
+      rowLabel,
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: styles.functionBtn,
+        onClick: () => {
+          fn == null ? void 0 : fn();
+          console.log(`[TestComp] ${rowLabel} called`);
+        },
+        children: "invoke"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx("div", { className: presetWrapperStyles.presetWrapper, ...presetsWrapperProps, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      className: clsx(
+        className,
+        styles.root,
+        formatClassNames(semanticClassNames.root, ...customClassNames),
+        "test-comp-card"
+      ),
+      ...a11y,
+      dir: direction,
+      onClick,
+      onDoubleClick: onDblClick,
+      onMouseEnter: onMouseIn,
+      onMouseLeave: onMouseOut,
+      onFocus,
+      onBlur,
+      children: [
+        /* @__PURE__ */ jsx("h3", { className: clsx(styles.title, "card-title"), children: ((_a = elementProps.title) == null ? void 0 : _a.text) || "Test Component" }),
+        /* @__PURE__ */ jsx("p", { className: clsx(styles.description, "card-description"), children: ((_b = elementProps.description) == null ? void 0 : _b.text) || "Edit the settings to see values change" }),
+        ((_c = elementProps.image) == null ? void 0 : _c.src) && /* @__PURE__ */ jsx("div", { className: clsx(styles.imageWrapper, "card-image"), children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: styles.image,
+            src: elementProps.image.src,
+            alt: elementProps.image.alt ?? "Card Image"
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.settingsSection, children: [
+          /* @__PURE__ */ jsx("h4", { className: styles.sectionTitle, children: "Settings Panel Values" }),
+          /* @__PURE__ */ jsx(ValueRow, { label: "isEnabled (boolean)", value: String(isEnabled) }),
+          /* @__PURE__ */ jsx(ValueRow, { label: "label (text)", value: label }),
+          /* @__PURE__ */ jsx(ValueRow, { label: "count (number)", value: count }),
+          /* @__PURE__ */ jsx(ValueRow, { label: "variant (textEnum)", value: variant }),
+          /* @__PURE__ */ jsx(ValueRow, { label: "externalUrl (webUrl)", value: externalUrl }),
+          /* @__PURE__ */ jsx(
+            ValueRow,
+            {
+              label: "buttonLink (link)",
+              value: (buttonLink == null ? void 0 : buttonLink.href) ? `${buttonLink.href} (target: ${buttonLink.target || "_self"})` : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ValueRow,
+            {
+              label: "cardImage (image)",
+              value: (cardImage == null ? void 0 : cardImage.uri) ? `${cardImage.uri} (${cardImage.width}x${cardImage.height})` : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ValueRow,
+            {
+              label: "cardVideo (video)",
+              value: (cardVideo == null ? void 0 : cardVideo.videoUrl) || (cardVideo == null ? void 0 : cardVideo.videoId)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ValueRow,
+            {
+              label: "icon (vectorArt)",
+              value: (icon == null ? void 0 : icon.svgId) || ((icon == null ? void 0 : icon.svgContent) ? "SVG content set" : void 0)
+            }
+          ),
+          /* @__PURE__ */ jsx(ValueRow, { label: "direction", value: direction })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.settingsSection, children: [
+          /* @__PURE__ */ jsx("h4", { className: styles.sectionTitle, children: "Manage Panel - Items (arrayItems)" }),
+          /* @__PURE__ */ jsx(ValueRow, { label: "activeItem", value: activeItem2 }),
+          items.length > 0 ? /* @__PURE__ */ jsx("ul", { className: styles.itemsList, children: items.map((item2, index) => /* @__PURE__ */ jsxs(
+            "li",
+            {
+              className: clsx(
+                styles.item,
+                index === activeItem2 && styles.activeItem
+              ),
+              children: [
+                /* @__PURE__ */ jsx("strong", { children: item2.name || `Item ${index + 1}` }),
+                item2.description && /* @__PURE__ */ jsxs("span", { children: [
+                  ": ",
+                  item2.description
+                ] })
+              ]
+            },
+            index
+          )) }) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: "No items added yet" })
+        ] }),
+        menuItems.length > 0 && /* @__PURE__ */ jsxs("div", { className: styles.settingsSection, children: [
+          /* @__PURE__ */ jsx("h4", { className: styles.sectionTitle, children: "Menu Items" }),
+          /* @__PURE__ */ jsx("ul", { className: styles.itemsList, children: menuItems.map((item2) => /* @__PURE__ */ jsx("li", { children: item2.label }, item2.id)) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: styles.settingsSection, children: [
+          /* @__PURE__ */ jsx("h4", { className: styles.sectionTitle, children: "Function Data Types" }),
+          /* @__PURE__ */ jsx(FunctionRow, { label: "setCount (function)", fn: () => setCount == null ? void 0 : setCount(42) }),
+          /* @__PURE__ */ jsx(FunctionRow, { label: "getCountAsText (function)", fn: getCountAsText })
+        ] })
+      ]
+    }
+  ) });
+};
+const component = (props) => /* @__PURE__ */ jsx(TestComp, { ...props });
+export {
+  component as default
+};

package/dist/site/components/TestComp/constants.d.ts

@@ -0,0 +1,20 @@
+export declare const DesignStates: {
+    readonly testCompCard: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "test-comp-card--hover";
+        };
+        readonly focus: {
+            readonly displayName: "Focus";
+            readonly className: "test-comp-card--focus";
+        };
+        readonly disabled: {
+            readonly displayName: "Disabled";
+            readonly className: "test-comp-card--disabled";
+        };
+        readonly featured: {
+            readonly displayName: "Featured";
+            readonly className: "test-comp-card--featured";
+        };
+    };
+};

package/dist/site/components/TestComp/css.css

@@ -0,0 +1,208 @@
+/*
+ * TestComp styles - Uses CSS variables from manifest cssCustomProperties
+ * All --variable-name correspond to cssCustomProperties keys
+ */
+.root__IWjkn {
+  display: flex;
+  width: 100%;
+  max-width: 400px;
+  /* Layout - cssVar */
+  flex-direction: var(--flex-direction, column);
+  justify-content: var(--justify-content, flex-start);
+  gap: var(--row-gap, 0) var(--column-gap, 0);
+  /* Sizing - cssVar */
+  height: var(--height, auto);
+  /* Background - cssVar */
+  background: var(--background, #ffffff);
+  background-color: var(--background-color, transparent);
+  /* Border - cssVar */
+  border: var(--border, 1px solid #cccccc);
+  border-color: var(--border-color, inherit);
+  border-width: var(--border-width, inherit);
+  border-style: var(--border-style, inherit);
+  border-radius: var(--border-radius, 4px);
+  border-top: var(--border-top, inherit);
+  border-bottom: var(--border-bottom, inherit);
+  border-inline-start: var(--border-inline-start, inherit);
+  border-inline-end: var(--border-inline-end, inherit);
+  /* Padding - cssVar */
+  padding: var(--padding, 16px);
+  padding-top: var(--padding-top, inherit);
+  padding-bottom: var(--padding-bottom, inherit);
+  padding-inline-start: var(--padding-inline-start, inherit);
+  padding-inline-end: var(--padding-inline-end, inherit);
+  /* Effects - cssVar */
+  box-shadow: var(--box-shadow, 0 2px 4px rgba(0, 0, 0, 0.1));
+  opacity: var(--opacity, 1);
+  /* Margin - cssVar */
+  margin-bottom: var(--margin-bottom, 0);
+  overflow: hidden;
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.root__IWjkn.test-comp-card--hover,
+.root__IWjkn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.root__IWjkn.test-comp-card--focus,
+.root__IWjkn:focus {
+  outline: 2px solid #0070f3;
+  outline-offset: 2px;
+}
+
+.root__IWjkn.test-comp-card--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.root__IWjkn.test-comp-card--featured {
+  border: 2px solid #f5a623;
+  background: #fffbea;
+}
+
+.imageWrapper__aSpta {
+  margin-bottom: 16px;
+  overflow: hidden;
+  border-radius: 4px 4px 0 0;
+  width: 100%;
+}
+
+.image__ZJUGa {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.content__33vE3 {
+  display: flex;
+  flex-direction: column;
+}
+
+.title__cnkUK {
+  /* Typography - cssVar */
+  font: var(--font, bold 18px/1.2 sans-serif);
+  color: var(--color, #333333);
+  letter-spacing: var(--letter-spacing, normal);
+  line-height: var(--line-height, 1.2);
+  text-align: var(--text-align, left);
+  text-decoration-line: var(--text-decoration-line, none);
+  text-transform: var(--text-transform, none);
+  text-shadow: var(--text-shadow, none);
+  margin-bottom: 8px;
+}
+
+.description__nM9YF {
+  font: var(--font, normal 14px/1.4 sans-serif);
+  color: var(--color, #666666);
+  margin: 0;
+}
+
+/* SVG/Vector styles - cssVar */
+.svgIcon__czZzs {
+  fill: var(--fill, currentColor);
+  fill-opacity: var(--fill-opacity, 1);
+  stroke: var(--stroke, none);
+  stroke-width: var(--stroke-width, 1);
+  stroke-opacity: var(--stroke-opacity, 1);
+}
+
+/* Demo element for misc CSS vars */
+.demoElement__HIEsA {
+  /* Other types - cssVar */
+  transform: rotate(var(--angle, 0deg));
+  --custom-number: var(--number, 0);
+  --length-value: var(--length, 0px);
+  --custom-value: var(--custom-option, 10px);
+}
+
+.menuItems__jm38S {
+  display: flex;
+  gap: 5px;
+  margin-bottom: 10px;
+}
+
+.settingsSection__dcnh6 {
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #eee;
+}
+
+.sectionTitle__ufqkd {
+  font-size: 12px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 8px 0;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.valueRow__THTHW {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 4px 0;
+  font-size: 12px;
+  line-height: 1.4;
+  border-bottom: 1px solid #f5f5f5;
+}
+.valueRow__THTHW:last-child {
+  border-bottom: none;
+}
+
+.valueLabel__-XJYc {
+  color: #666;
+  font-weight: 500;
+  min-width: 140px;
+}
+
+.valueContent__BqKX9 {
+  color: #333;
+  word-break: break-word;
+}
+.valueContent__BqKX9 em {
+  color: #999;
+  font-style: italic;
+}
+
+.itemsList__LeegW {
+  margin: 8px 0 0 0;
+  padding: 0 0 0 16px;
+  font-size: 12px;
+}
+
+.item__KoXT4 {
+  padding: 4px 0;
+  color: #333;
+}
+
+.activeItem__f7Dcz {
+  background-color: #e3f2fd;
+  margin: 0 -8px;
+  padding: 4px 8px;
+  border-radius: 4px;
+}
+
+.emptyState__Wc-ze {
+  font-size: 12px;
+  color: #999;
+  font-style: italic;
+  padding: 8px 0;
+}
+
+.functionBtn__9OquA {
+  padding: 2px 10px;
+  font-size: 11px;
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  background: #f9f9f9;
+  cursor: pointer;
+}
+.functionBtn__9OquA:hover {
+  background: #eee;
+}
+.presetWrapper__J1yzj {
+  display: contents;
+}

package/dist/site/components/TestComp/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as TestComp } from './component';

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

@@ -0,0 +1,6 @@
+'use client';
+
+import TestComp from './component.js';
+
+export { TestComp };
+export default TestComp;

package/dist/site/components/TestComp/manifest.d.ts

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;