@zohodesk/library-platform 1.2.0-exp.4 → 1.2.0-exp.45

package/es/library/dot/components/part-wrapper/domain/entities/interfaces/Properties.js

@@ -0,0 +1,52 @@
+/**
+ * PartWrapper Domain Properties
+ * 
+ * Defines the contract for the PartWrapper component's input properties.
+ * Aligned with ADR UI-STYLE-003: Styling hooks (part="...") at ACA-controlled wrapper boundaries.
+ */
+
+/**
+ * CC-style property schema for createCustomComponent.
+ * 
+ * Follows the same format as @cc/button/Properties, @cc/text/Properties etc.
+ * `content` is typed as 'object' because React elements are objects.
+ * This allows createCustomComponent to pass it through to state.properties
+ * without stripping it (unlike `children` which is explicitly discarded).
+ */
+const PartWrapperPropertiesSchema = {
+  part: {
+    required: true,
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  tagName: {
+    required: false,
+    defaultValue: 'div',
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  className: {
+    required: false,
+    defaultValue: '',
+    typeMetadata: {
+      schema: {
+        type: 'string'
+      }
+    }
+  },
+  content: {
+    required: false,
+    typeMetadata: {
+      schema: {
+        type: 'object'
+      }
+    }
+  }
+};
+export default PartWrapperPropertiesSchema;

package/es/library/dot/components/part-wrapper/frameworks/ui/PartWrapper.js

@@ -0,0 +1,24 @@
+/**
+ * PartWrapper — ACA Boundary Wrapper Component
+ * 
+ * Entry point for the PartWrapper component.
+ * Follows the SmartActionBand.ts → SmartActionBandFactory.create() ACA pattern.
+ * 
+ * PartWrapper is created via createCustomComponent through PartWrapperFactory.
+ * It provides `part` attribute support at ACA-controlled wrapper boundaries.
+ * 
+ * Usage:
+ *   <PartWrapper part="field-container" content={<TextBox ... />} />
+ * 
+ * NOTE: Inner components are passed via the `content` property (not React children)
+ * because createCustomComponent's discardChildren() strips `children` from props
+ * and routes them through the slot system. The `content` property is a regular
+ * prop that flows through to state.properties.content in the View.
+ * 
+ * ADR: UI-STYLE-003 — Styling Strategy for Legacy Inner Components in Layouts
+ */
+import PartWrapperFactory from "./PartWrapperFactory";
+const PartWrapper = PartWrapperFactory.create({
+  name: 'PartWrapper'
+});
+export default PartWrapper;

package/es/library/dot/components/part-wrapper/frameworks/ui/PartWrapperFactory.js

@@ -0,0 +1,27 @@
+/**
+ * PartWrapperFactory
+ * 
+ * Factory class following the SmartActionBandFactory ACA pattern.
+ * Creates PartWrapper instances via createCustomComponent.
+ * 
+ * Unlike SmartActionBandFactory, PartWrapper has no behaviours, SDK, or data sources
+ * since it is a pure styling boundary wrapper (ADR UI-STYLE-003).
+ */
+import { createCustomComponent } from "../../../../../custom-component";
+import PartWrapperPropertiesSchema from "../../domain/entities/interfaces/Properties";
+import PartWrapperView from "./PartWrapperView";
+export default class PartWrapperFactory {
+  static create() {
+    let {
+      name = 'PartWrapper',
+      View = PartWrapperView
+    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return createCustomComponent({
+      name: name,
+      View: View,
+      properties: PartWrapperPropertiesSchema,
+      eventHandlers: {}
+    });
+  }
+
+}

package/es/library/dot/components/part-wrapper/frameworks/ui/PartWrapperView.js

@@ -0,0 +1,45 @@
+/**
+ * PartWrapperView
+ * 
+ * Pure rendering function for the PartWrapper component.
+ * Renders a thin HTML wrapper element with `part` and `data-part` attributes,
+ * providing a stable styling boundary per ADR UI-STYLE-003.
+ * 
+ * Follows the ACA View signature: function View({ state, helpers }, ref)
+ * - Receives properties via `state.properties` (managed by createCustomComponent)
+ * - `content` is passed as a property (not React children) because
+ *   createCustomComponent strips children via discardChildren() and routes them
+ *   through the slot system. Using a named `content` property bypasses this.
+ * 
+ * Attributes:
+ * - `part`: future Shadow DOM ::part() selector support
+ * - `data-part`: Light DOM [data-part="..."] selector support (current)
+ * - `display: contents`: makes the wrapper layout-transparent
+ * 
+ * This View does NOT modify or touch any inner component — it only wraps at the boundary.
+ */
+import React from 'react'; // @ts-ignore
+
+import style from "./css/PartWrapper.module.css";
+
+function PartWrapperView(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    part,
+    tagName = 'div',
+    className,
+    content
+  } = state.properties;
+  const Element = tagName;
+  const combinedClassName = className ? `${style.partWrapper} ${className}` : style.partWrapper;
+  return /*#__PURE__*/React.createElement(Element, {
+    ref: ref,
+    part: part,
+    "data-part": part,
+    className: combinedClassName
+  }, content);
+}
+
+export default PartWrapperView;

package/es/library/dot/components/part-wrapper/frameworks/ui/css/PartWrapper.module.css

@@ -0,0 +1,16 @@
+/**
+ * PartWrapper.module.css
+ * 
+ * Default styling for the PartWrapper boundary element.
+ * `display: contents` ensures the wrapper is layout-transparent:
+ * - It does NOT create a new box in the layout flow
+ * - Children render as if the wrapper doesn't exist visually
+ * - Spacing, flexbox, grid contexts of the parent are preserved
+ * 
+ * This allows PartWrapper to be inserted around any component
+ * without affecting existing layout behaviour.
+ */
+
+.partWrapper {
+  display: contents;
+}

package/es/library/dot/components/part-wrapper/poc/index.js

@@ -0,0 +1,9 @@
+/**
+ * POC Layout Exports
+ * 
+ * Demonstration layouts showing PartWrapper usage across different
+ * component categories as per ADR UI-STYLE-003.
+ */
+export { default as POCFormLayout } from "./layouts/POCFormLayout";
+export { default as POCTableCellLayout } from "./layouts/POCTableCellLayout";
+export { default as POCMixedLayout } from "./layouts/POCMixedLayout";

package/es/library/dot/components/part-wrapper/poc/layouts/POCFormLayout.js

@@ -0,0 +1,130 @@
+/**
+ * POC: Form Layout with PartWrapper
+ * 
+ * Demonstrates wrapping Category B components (custom component root — FieldItem)
+ * with PartWrapper to provide styling boundaries.
+ * 
+ * Components used:
+ *   - TextBox  (root: FieldItem → <div>) — from components/form-fields/textbox
+ *   - Email    (root: FieldItem → <div>) — from components/form-fields/email
+ *   - PickList (root: FieldItem → <div>) — from components/form-fields/pick-list
+ * 
+ * These are ACA components created via createCustomComponent.
+ * PartWrapper wraps them WITHOUT any modification to their internals.
+ * 
+ * CSS overrides target [data-part="..."] selectors at the wrapper boundary.
+ */
+import React from 'react';
+import PartWrapper from "../../frameworks/ui/PartWrapper";
+import TextBox from "../../../form-fields/textbox/frameworks/ui/TextBox";
+import Email from "../../../form-fields/email/frameworks/ui/Email";
+import PickList from "../../../form-fields/pick-list/frameworks/ui/PickList"; // @ts-ignore
+
+import style from "./css/poc-form-layout.module.css";
+/**
+ * POCFormLayout — Example ACA Layout View
+ * 
+ * Shows how a layout component can use PartWrapper to expose
+ * styling boundaries around form field components.
+ * 
+ * Usage pattern (content as property — required by createCustomComponent):
+ *   <PartWrapper part="field-container" content={<TextBox ...props />} />
+ * 
+ * CSS targeting:
+ *   [data-part="field-container"] { padding: 12px; }
+ *   [data-part="field-container"]:hover { background: var(--field-hover-bg); }
+ * 
+ * Future Shadow DOM migration:
+ *   my-form::part(field-container) { padding: 12px; }
+ */
+
+function POCFormLayout(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    id,
+    label,
+    value,
+    email,
+    placeholder,
+    errorMessage,
+    disabled,
+    readonly,
+    required,
+    uiConfig,
+    labelActions,
+    actions,
+    clientScripts,
+    pickListOptions
+  } = state?.properties || {};
+  const {
+    size,
+    breakRow
+  } = uiConfig || {};
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-part": "form-layout",
+    className: style.formLayout
+  }, /*#__PURE__*/React.createElement(PartWrapper, {
+    part: "field-container",
+    content: /*#__PURE__*/React.createElement(TextBox, {
+      id: `${id}_name`,
+      label: label || 'Name',
+      value: value || '',
+      placeholder: placeholder || 'Enter name',
+      errorMessage: errorMessage,
+      disabled: disabled,
+      readonly: readonly,
+      required: required,
+      uiConfig: {
+        size,
+        breakRow
+      },
+      labelActions: labelActions || [],
+      actions: actions || [],
+      clientScripts: clientScripts,
+      name: "TextBox"
+    })
+  }), /*#__PURE__*/React.createElement(PartWrapper, {
+    part: "field-container",
+    content: /*#__PURE__*/React.createElement(Email, {
+      id: `${id}_email`,
+      label: "Email Address",
+      value: email || '',
+      placeholder: "Enter email",
+      disabled: disabled,
+      readonly: readonly,
+      required: required,
+      uiConfig: {
+        size,
+        breakRow
+      },
+      labelActions: labelActions || [],
+      actions: actions || [],
+      clientScripts: clientScripts,
+      name: "Email"
+    })
+  }), /*#__PURE__*/React.createElement(PartWrapper, {
+    part: "field-container",
+    content: /*#__PURE__*/React.createElement(PickList, {
+      id: `${id}_status`,
+      label: "Status",
+      value: "",
+      options: pickListOptions || [],
+      disabled: disabled,
+      readonly: readonly,
+      required: false,
+      uiConfig: {
+        size,
+        breakRow
+      },
+      labelActions: labelActions || [],
+      actions: actions || [],
+      clientScripts: clientScripts,
+      name: "PickList"
+    })
+  }));
+}
+
+export default POCFormLayout;

package/es/library/dot/components/part-wrapper/poc/layouts/POCMixedLayout.js

@@ -0,0 +1,128 @@
+/**
+ * POC: Mixed Layout with PartWrapper
+ * 
+ * Demonstrates wrapping BOTH root element categories:
+ * 
+ * Category A — HTML root elements:
+ *   - ErrorState    (root: <div>)                — legacy-to-new-arch
+ *   - Breadcrumb    (root: <div>)                — legacy-to-new-arch
+ *   - CommonEmptyState (root: <span>)            — legacy-to-new-arch
+ * 
+ * Category B — Custom component root elements:
+ *   - Button        (root: <Button> component)   — legacy-to-new-arch
+ *   - ActionIcon    (root: <ActionIcon> component) — legacy-to-new-arch
+ *   - Text          (root: <Typography> component) — legacy-to-new-arch
+ * 
+ * This proves that PartWrapper handles both categories uniformly
+ * because it wraps at the BOUNDARY — it doesn't care about the inner root.
+ * 
+ * ADR UI-STYLE-003 Point 4: "Wrapper exposes styling surface"
+ */
+import React from 'react';
+import PartWrapper from "../../frameworks/ui/PartWrapper";
+import Button from "../../../../legacy-to-new-arch/button/frameworks/ui/Button";
+import ActionIcon from "../../../../legacy-to-new-arch/action-icon/frameworks/ui/ActionIcon";
+import Text from "../../../../legacy-to-new-arch/text/frameworks/ui/Text"; // @ts-ignore
+
+import style from "./css/poc-mixed-layout.module.css";
+/**
+ * POCMixedLayout — Example ACA Layout View
+ * 
+ * Shows how a page layout can use PartWrapper to expose consistent
+ * styling boundaries regardless of inner component root type.
+ * 
+ * Key demonstration:
+ *   - Category A (HTML root: div, span) — wrapped identically
+ *   - Category B (Custom root: Button, Typography) — wrapped identically
+ *   - PartWrapper is agnostic to inner component implementation
+ * 
+ * Usage pattern (content as property — required by createCustomComponent):
+ *   <PartWrapper part="page-header" content={<div>...</div>} />
+ * 
+ * CSS targeting:
+ *   [data-part="page-header"]  { background: var(--header-bg); }
+ *   [data-part="action-bar"]   { display: flex; gap: 8px; }
+ *   [data-part="content-area"] { flex: 1; }
+ */
+
+function POCMixedLayout(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    pageTitle,
+    pageDescription,
+    primaryButtonText,
+    secondaryButtonText,
+    contentText,
+    iconName,
+    iconTooltip
+  } = state?.properties || {};
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-part": "page-layout",
+    className: style.pageLayout
+  }, /*#__PURE__*/React.createElement(PartWrapper, {
+    part: "page-header",
+    content: /*#__PURE__*/React.createElement("div", {
+      className: style.headerContent
+    }, /*#__PURE__*/React.createElement(PartWrapper, {
+      part: "page-title",
+      content: /*#__PURE__*/React.createElement(Text, {
+        text: pageTitle || 'Page Title',
+        size: "24",
+        weight: "bold"
+      })
+    }), /*#__PURE__*/React.createElement(PartWrapper, {
+      part: "page-description",
+      content: /*#__PURE__*/React.createElement(Text, {
+        text: pageDescription || 'Page description text goes here',
+        size: "14",
+        weight: "regular"
+      })
+    }))
+  }), /*#__PURE__*/React.createElement(PartWrapper, {
+    part: "action-bar",
+    content: /*#__PURE__*/React.createElement("div", {
+      className: style.actionBarContent
+    }, /*#__PURE__*/React.createElement(PartWrapper, {
+      part: "primary-action",
+      content: /*#__PURE__*/React.createElement(Button, {
+        text: primaryButtonText || 'Create',
+        palette: "primaryFilled",
+        size: "medium"
+      })
+    }), /*#__PURE__*/React.createElement(PartWrapper, {
+      part: "secondary-action",
+      content: /*#__PURE__*/React.createElement(Button, {
+        text: secondaryButtonText || 'Export',
+        palette: "secondary",
+        size: "medium"
+      })
+    }), /*#__PURE__*/React.createElement(PartWrapper, {
+      part: "icon-action",
+      content: /*#__PURE__*/React.createElement(ActionIcon, {
+        name: iconName || 'filter',
+        tooltip: iconTooltip || 'Filter'
+      })
+    }))
+  }), /*#__PURE__*/React.createElement(PartWrapper, {
+    part: "content-area",
+    content: /*#__PURE__*/React.createElement(Text, {
+      text: contentText || 'Content area — displays data from inner components',
+      size: "14"
+    })
+  }), /*#__PURE__*/React.createElement(PartWrapper, {
+    part: "page-footer",
+    tagName: "footer",
+    content: /*#__PURE__*/React.createElement("div", {
+      className: style.footerContent
+    }, /*#__PURE__*/React.createElement(Text, {
+      text: "Footer content",
+      size: "12",
+      weight: "regular"
+    }))
+  }));
+}
+
+export default POCMixedLayout;

package/es/library/dot/components/part-wrapper/poc/layouts/POCTableCellLayout.js

@@ -0,0 +1,105 @@
+/**
+ * POC: Table Cell Layout with PartWrapper
+ * 
+ * Demonstrates wrapping Category B components (custom component root)
+ * used in table cells, with PartWrapper to provide styling boundaries.
+ * 
+ * Components used (from legacy-to-new-arch):
+ *   - Text   (root: Typography — custom component)
+ *   - Tags   (root: TagList — custom component)
+ *   - Switch (root: Switch — custom component)
+ *   - Link   (root: TableLink — custom component)
+ *   - Email  (root: TableEmail — custom component)
+ * 
+ * All are legacy-to-new-arch ACA components created via createCustomComponent.
+ * PartWrapper wraps them WITHOUT any modification to their internals.
+ * 
+ * Each cell type gets a unique part name for granular CSS targeting.
+ */
+import React from 'react';
+import PartWrapper from "../../frameworks/ui/PartWrapper";
+import Text from "../../../../legacy-to-new-arch/text/frameworks/ui/Text";
+import Tags from "../../../../legacy-to-new-arch/tags/frameworks/ui/Tags";
+import Switch from "../../../../legacy-to-new-arch/switch/frameworks/ui/Switch";
+import Link from "../../../../legacy-to-new-arch/link/frameworks/ui/Link";
+import Email from "../../../../legacy-to-new-arch/email/frameworks/ui/Email"; // @ts-ignore
+
+import style from "./css/poc-table-cell-layout.module.css";
+/**
+ * POCTableCellLayout — Example ACA Layout View
+ * 
+ * Shows how a table row layout can use PartWrapper to expose
+ * per-cell-type styling boundaries around table field components.
+ * 
+ * Usage pattern (content as property — required by createCustomComponent):
+ *   <PartWrapper part="cell-text" content={<Text text={value} />} />
+ * 
+ * CSS targeting:
+ *   [data-part="cell-text"]   { text-align: left; }
+ *   [data-part="cell-tags"]   { max-width: 200px; }
+ *   [data-part="cell-switch"] { justify-content: center; }
+ */
+
+function POCTableCellLayout(_ref, ref) {
+  let {
+    state
+  } = _ref;
+  const {
+    textValue,
+    tags,
+    switchChecked,
+    switchDisabled,
+    linkText,
+    linkHref,
+    emailValue,
+    textOverflowMode
+  } = state?.properties || {};
+  const isDotted = textOverflowMode === 'clip';
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    "data-part": "table-row",
+    className: style.tableRow
+  }, /*#__PURE__*/React.createElement(PartWrapper, {
+    part: "cell-text",
+    content: /*#__PURE__*/React.createElement(Text, {
+      text: textValue || 'Sample text',
+      tooltip: textValue || 'Sample text',
+      isDotted: isDotted
+    })
+  }), /*#__PURE__*/React.createElement(PartWrapper, {
+    part: "cell-tags",
+    content: /*#__PURE__*/React.createElement(Tags, {
+      tags: tags || [{
+        id: '1',
+        label: 'Tag A'
+      }, {
+        id: '2',
+        label: 'Tag B'
+      }],
+      isWrapped: !isDotted
+    })
+  }), /*#__PURE__*/React.createElement(PartWrapper, {
+    part: "cell-switch",
+    content: /*#__PURE__*/React.createElement(Switch, {
+      checked: switchChecked || false,
+      disabled: switchDisabled || false
+    })
+  }), /*#__PURE__*/React.createElement(PartWrapper, {
+    part: "cell-link",
+    content: /*#__PURE__*/React.createElement(Link, {
+      text: linkText || 'View Details',
+      href: linkHref || '#',
+      variant: "secondary",
+      isDotted: isDotted
+    })
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(PartWrapper, {
+    part: "cell-email",
+    content: /*#__PURE__*/React.createElement(Email, {
+      email: emailValue || 'user@example.com',
+      isDotted: isDotted,
+      tooltip: emailValue || 'user@example.com'
+    })
+  }));
+}
+
+export default POCTableCellLayout;

package/es/library/dot/components/part-wrapper/poc/layouts/css/poc-form-layout.module.css

@@ -0,0 +1,46 @@
+/**
+ * POC: Form Layout — CSS Overrides via [data-part] selectors
+ * 
+ * These styles target the PartWrapper boundaries ONLY.
+ * No legacy/inner component CSS is modified.
+ * 
+ * Light DOM (current):  [data-part="field-container"] { ... }
+ * Shadow DOM (future):  my-form::part(field-container) { ... }
+ */
+
+/* --- Form Layout Container --- */
+.formLayout {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zd_size16) ;
+  padding: var(--zd_size24) ;
+  background: var(--form-bg, #ffffff);
+  border-radius: var(--form-border-radius, 8px);
+  box-shadow: var(--form-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
+}
+
+/* --- Field Container: Wrapper Boundary Styling --- */
+/* Targets the PartWrapper <div data-part="field-container"> */
+.formLayout [data-part="field-container"] {
+  transition: background-color 0.15s ease;
+  padding: var(--zd_size12) var(--zd_size16) ;
+  border-bottom: 1px solid var(--field-separator-color, #f0f0f0);
+  background-color: red !important;
+}
+
+.formLayout [data-part="field-container"]:last-child {
+  border-bottom: 1px solid thick;
+}
+
+/* Hover: applied at the WRAPPER boundary, not inside the component */
+.formLayout [data-part="field-container"]:hover {
+  background-color: var(--field-hover-bg, #f8f9fa);
+}
+
+/* Focus-within: highlights the field container when any inner element is focused */
+.formLayout [data-part="field-container"]:focus-within {
+  outline: 2px solid var(--field-focus-border, #4a90d9);
+  outline-offset: -2px;
+  background-color: var(--field-focus-bg, #f0f4ff);
+  border-radius: 4px;
+}

package/es/library/dot/components/part-wrapper/poc/layouts/css/poc-mixed-layout.module.css

@@ -0,0 +1,89 @@
+/**
+ * POC: Mixed Layout — CSS Overrides via [data-part] selectors
+ * 
+ * Demonstrates styling boundaries for a full page layout
+ * with header, action bar, content, and footer sections.
+ * 
+ * ALL styles target [data-part] selectors — zero inner component CSS touched.
+ * 
+ * Light DOM (current):  [data-part="page-header"] { ... }
+ * Shadow DOM (future):  my-page::part(page-header) { ... }
+ */
+
+/* --- Page Layout Container --- */
+.pageLayout {
+  display: flex;
+  flex-direction: column;
+  height: 100% ;
+  background: var(--page-bg, #f5f6f8);
+}
+
+/* --- Page Header --- */
+.pageLayout [data-part="page-header"] {
+  padding: var(--zd_size24) var(--zd_size32) var(--zd_size16) ;
+  background: var(--header-bg, #ffffff);
+  border-bottom: 1px solid var(--header-border, #e5e5e5);
+}
+
+.headerContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zd_size4) ;
+}
+
+.pageLayout [data-part="page-title"] {
+  display: contents; /* Title boundary — styled via wrapper, Typography component untouched */
+}
+
+.pageLayout [data-part="page-description"] {
+  opacity: 0.7;
+}
+
+/* --- Action Bar --- */
+.pageLayout [data-part="action-bar"] {
+  padding: var(--zd_size12) var(--zd_size32) ;
+  background: var(--action-bar-bg, #ffffff);
+  border-bottom: 1px solid var(--action-bar-border, #eeeeee);
+}
+
+.actionBarContent {
+  display: flex;
+  align-items: center;
+  gap: var(--zd_size8) ;
+}
+
+.pageLayout [data-part="primary-action"] {
+  display: contents; /* Primary button boundary */
+}
+
+.pageLayout [data-part="secondary-action"] {
+  display: contents; /* Secondary button boundary */
+}
+
+[dir=ltr] .pageLayout [data-part="icon-action"] {
+  margin-left: auto ;
+}
+
+[dir=rtl] .pageLayout [data-part="icon-action"] {
+  margin-right: auto ;
+}
+
+/* --- Content Area --- */
+.pageLayout [data-part="content-area"] {
+  flex: 1 ;
+  overflow: auto;
+  padding: var(--zd_size24) var(--zd_size32) ;
+}
+
+/* --- Page Footer --- */
+.pageLayout [data-part="page-footer"] {
+  padding: var(--zd_size12) var(--zd_size32) ;
+  background: var(--footer-bg, #fafafa);
+  border-top: 1px solid var(--footer-border, #e5e5e5);
+}
+
+.footerContent {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}