@adobe-commerce/elsie 1.1.0 → 1.2.0

package/bin/builders/build/index.js

@@ -3,8 +3,7 @@ const path = require('path');
 module.exports = async function generateResourceBuilder({ argv }) {
   const { build } = await import('vite');
 
-  const configFile =
-    argv?.config ?? path.resolve(__dirname, '../../../config/vite.mjs');
+  const configFile = argv?.config ?? path.resolve(__dirname, '../../../config/vite.mjs');
 
   const outDir = argv?.outDir ?? 'dist';
 

package/bin/builders/lint/index.js

@@ -1,5 +1,5 @@
 const cli = require('../../lib/cli');
 
 module.exports = function generateResourceBuilder() {
-  cli('eslint "*/**/*.{ts,tsx}"');
+  return cli('eslint "*/**/*.{ts,tsx}"');
 };

package/bin/builders/storybook/index.js

@@ -1,5 +1,5 @@
 const cli = require('../../lib/cli');
 
 module.exports = function generateResourceBuilder() {
-  cli('storybook dev -h localhost -p 6006 --disable-telemetry --quiet');
+  return cli('storybook dev -h localhost -p 6006 --disable-telemetry --quiet');
 };

package/bin/builders/test/index.js

@@ -1,5 +1,5 @@
 const cli = require('../../lib/cli');
 
 module.exports = function generateResourceBuilder() {
-  cli('jest');
+  return cli('jest');
 };

package/bin/lib/cli.js

@@ -4,5 +4,20 @@ module.exports = function cli(command) {
   let cmd = command;
   const argvs = process.argv.slice(3).join(' ');
   if (argvs) cmd += ` ${argvs}`;
-  return spawn(cmd, { shell: true, stdio: 'inherit' });
+  
+  return new Promise((resolve, reject) => {
+    const child = spawn(cmd, { shell: true, stdio: 'inherit' });
+    
+    child.on('close', (code) => {
+      if (code !== 0) {
+        reject(new Error(`Command failed with exit code ${code}`));
+      } else {
+        resolve(child);
+      }
+    });
+    
+    child.on('error', (err) => {
+      reject(err);
+    });
+  });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -15,7 +15,7 @@
     "dev": "concurrently 'yarn storybook' 'yarn serve'",
     "storybook": "elsie storybook",
     "serve": "elsie serve --config vite.config.mjs",
-    "lint": "elsie lint --max-warnings=0",
+    "lint": "elsie lint",
     "test": "elsie test",
     "test:ci": "jest --config jest.config.js --passWithNoTests --coverage",
     "build": "elsie build --config vite.config.mjs",

package/src/components/Header/Header.tsx

@@ -7,13 +7,13 @@
  * accompanying it. 
  *******************************************************************/
 
-import { ComponentChildren, FunctionComponent, VNode } from 'preact';
+import { ComponentChildren, FunctionComponent, VNode, JSX } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { classes, VComponent } from '@adobe-commerce/elsie/lib';
 import { Divider } from '@adobe-commerce/elsie/components';
 import '@adobe-commerce/elsie/components/Header/Header.css';
 
-export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+export interface HeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
   title: string;
   size?: 'medium' | 'large';
   divider?: boolean;

package/src/components/ImageSwatch/ImageSwatch.css

@@ -33,6 +33,7 @@
   overflow: hidden;
 }
 
+.dropin-image-swatch__span img,
 .dropin-image-swatch__content {
   width: inherit;
   position: absolute;
@@ -121,10 +122,19 @@
 }
 
 .dropin-image-swatch__span--out-of-stock > .dropin-image-swatch__content,
+.dropin-image-swatch__span--out-of-stock img,
+.dropin-image-swatch__container
+  input[type='radio']:disabled
+  ~ .dropin-image-swatch__span
+  img,
 .dropin-image-swatch__container
   input[type='radio']:disabled
   ~ .dropin-image-swatch__span
   > .dropin-image-swatch__content,
+.dropin-image-swatch__container
+  input[type='checkbox']:disabled
+  ~ .dropin-image-swatch__span
+  img,
 .dropin-image-swatch__container
   input[type='checkbox']:disabled
   ~ .dropin-image-swatch__span

package/src/components/ImageSwatch/ImageSwatch.stories.tsx

@@ -260,11 +260,11 @@ export const MultiImageSwatch: Story = {
   ),
 };
 
-export const CustomImageNodeSwatch: Story = {
+export const CustomImageNodeVNodeSwatch: Story = {
   args: {
     name: 'customImageSwatch',
     id: 'customImageSwatch1',
-    label: 'Custom Image Node Example',
+    label: 'Custom Image Node VNode Example',
     groupAriaLabel: 'Custom Image Swatches',
     value: 'customImageNode',
     src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`, // fallback, not used with imageNode
@@ -277,7 +277,7 @@ export const CustomImageNodeSwatch: Story = {
       <div style="position: relative; width: 100%; height: 100%;">
         <img
           src={`https://picsum.photos/${defaultWidth}/${defaultHeight}?grayscale`}
-          alt="Custom grayscale image"
+          alt="Custom grayscale image - VNode"
           style="width: 100%; height: 100%; object-fit: cover;"
         />
         <div style="position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.7); padding: 4px 8px; border-radius: 0 0 8px 0;">
@@ -295,7 +295,56 @@ export const CustomImageNodeSwatch: Story = {
       'div[style*="position: relative"]'
     );
     const customImage = canvasElement.querySelector(
-      'img[alt="Custom grayscale image"]'
+      'img[alt="Custom grayscale image - VNode"]'
+    );
+    const customLabel = canvasElement.querySelector(
+      'span[style*="font-weight: bold"]'
+    );
+
+    expect(imageSwatch).toBeInTheDocument();
+    expect(customImageContainer).toBeInTheDocument();
+    expect(customImage).toBeInTheDocument();
+    expect(customLabel).toBeInTheDocument();
+    expect(customLabel?.textContent).toBe('Custom');
+  },
+};
+
+export const CustomImageNodeRenderFunctionSwatch: Story = {
+  args: {
+    name: 'customImageSwatch',
+    id: 'customImageSwatch2',
+    label: 'Custom Image Node Render Function Example',
+    groupAriaLabel: 'Custom Image Swatches',
+    value: 'customImageNode',
+    src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`, // fallback, not used with imageNode
+    alt: 'Custom Image Node',
+    selected: false,
+    disabled: false,
+    outOfStock: false,
+    onValue: action('onValue'),
+    imageNode: () => (
+      <div style="position: relative; width: 100%; height: 100%;">
+        <img
+          src={`https://picsum.photos/${defaultWidth}/${defaultHeight}?grayscale`}
+          alt="Custom grayscale image - Render Function"
+          style="width: 100%; height: 100%; object-fit: cover;"
+        />
+        <div style="position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.7); padding: 4px 8px; border-radius: 0 0 8px 0;">
+          <span style="font-size: 12px; font-weight: bold; color: #333;">
+            Custom
+          </span>
+        </div>
+      </div>
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const imageSwatch = await canvas.findByRole('radio');
+    const customImageContainer = canvasElement.querySelector(
+      'div[style*="position: relative"]'
+    );
+    const customImage = canvasElement.querySelector(
+      'img[alt="Custom grayscale image - Render Function"]'
     );
     const customLabel = canvasElement.querySelector(
       'span[style*="font-weight: bold"]'

package/src/components/ImageSwatch/ImageSwatch.tsx

@@ -8,11 +8,26 @@
  *******************************************************************/
 
 import { FunctionComponent, VNode } from 'preact';
-import { HTMLAttributes, useCallback } from 'preact/compat';
+import { HTMLAttributes, useCallback, JSX, useMemo } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/ImageSwatch/ImageSwatch.css';
-import { Image } from '@adobe-commerce/elsie/components/Image';
+import { Image, ImageProps } from '@adobe-commerce/elsie/components/Image';
 import { useText } from '@adobe-commerce/elsie/i18n';
+
+export interface ImageNodeRenderProps extends ImageProps {
+  imageSwatchContext: {
+    disabled?: boolean;
+    outOfStock?: boolean;
+    multi?: boolean;
+    selected?: boolean;
+    value?: string;
+    label?: string;
+    groupAriaLabel?: string;
+    name?: string;
+    id?: string;
+  };
+}
+
 export interface ImageSwatchProps
   extends Omit<HTMLAttributes<HTMLInputElement>, 'label'> {
   name?: string;
@@ -26,7 +41,7 @@ export interface ImageSwatchProps
   selected?: boolean;
   outOfStock?: boolean;
   multi?: boolean;
-  imageNode?: VNode;
+  imageNode?: VNode | ((props: ImageNodeRenderProps) => JSX.Element);
   onValue?: (value: any) => void;
   onUpdateError?: (error: Error) => void;
 }
@@ -80,6 +95,16 @@ export const ImageSwatch: FunctionComponent<ImageSwatchProps> = ({
     return `${groupAriaLabel}: ${label} ${swatchLabel}`;
   };
 
+  const imageProps: ImageProps = useMemo(() => {
+    return {
+      src,
+      alt,
+      loading: 'lazy',
+      params: { width: 100, fit: 'bounds', crop: true },
+      onError: (e: any) => (e.target.style.display = 'none'),
+    };
+  }, [src, alt]);
+
   return (
     <label className={classes(['dropin-image-swatch__container', className])}>
       <input
@@ -107,14 +132,24 @@ export const ImageSwatch: FunctionComponent<ImageSwatchProps> = ({
           className,
         ])}
       >
-        {imageNode || (
+        {typeof imageNode === 'function' ? (
+          imageNode({
+            ...imageProps,
+            imageSwatchContext: {
+              disabled,
+              outOfStock,
+              selected,
+              value,
+              label,
+              groupAriaLabel,
+              name,
+              id,
+            },
+          })
+        ) : imageNode || (
           <Image
-            src={src}
+            {...imageProps}
             className={classes(['dropin-image-swatch__content'])}
-            params={{ width: 100, fit: 'bounds', crop: true }}
-            alt={alt}
-            loading={'lazy'}
-            onError={(e: any) => (e.target.style.display = 'none')}
           />
         )}
       </span>

package/src/components/Incrementer/Incrementer.tsx

@@ -8,7 +8,7 @@
  *******************************************************************/
 
 import { FunctionComponent } from 'preact';
-import { useState, useCallback } from 'preact/hooks';
+import { useState, useCallback, useEffect } from 'preact/hooks';
 import { HTMLAttributes } from 'preact/compat';
 import { classes, debounce } from '@adobe-commerce/elsie/lib';
 import { Add, Minus } from '@adobe-commerce/elsie/icons';
@@ -56,6 +56,15 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
         ? 'Dropin.Incrementer.maxQuantityMessage'
         : 'Dropin.Incrementer.errorMessage';
 
+  // Add this effect to synchronize internal state with external value prop
+  useEffect(() => {
+    const propValue = Number(value);
+    if (propValue !== currentValue) {
+      setCurrentValue(propValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedOnValueHandler = useCallback(
     debounce(async (newValue: any) => {

package/src/components/Tag/Tag.stories.tsx

@@ -48,6 +48,7 @@ const Template: StoryObj<TagProps> = {
     <Tag {...args}>
       {/* This workaround allows children to be edited as plain text in Storybook */}
       {args.children && typeof args.children === 'string' ? (
+        // eslint-disable-next-line react/no-danger
         <span dangerouslySetInnerHTML={{ __html: args.children }} />
       ) : undefined}
     </Tag>

package/src/lib/slot.tsx

@@ -25,6 +25,7 @@ import '@adobe-commerce/elsie/components/UIProvider/debugger.css';
 
 type MutateElement = (elem: HTMLElement) => void;
 
+
 interface State {
   get: (key: string) => void;
   set: (key: string, value: any) => void;
@@ -42,6 +43,7 @@ interface PrivateContext<T> {
   _registerMethod: (
     cb: (next: T & DefaultSlotContext<T>, state: State) => void
   ) => void;
+  // eslint-disable-next-line no-undef
   _htmlElementToVNode: (element: HTMLElement, tag: keyof HTMLElementTagNameMap) => VNode;
 }
 
@@ -76,6 +78,7 @@ export function useSlot<K, V extends HTMLElement>(
   callback?: SlotProps<K>,
   children?: ComponentChildren,
   render?: Function,
+  // eslint-disable-next-line no-undef
   contentTag: keyof HTMLElementTagNameMap = 'div'
 ): [RefObject<V>, Record<string, any>] {
   const slotsQueue = useContext(SlotQueueContext);
@@ -319,7 +322,7 @@ export function useSlot<K, V extends HTMLElement>(
       status.current = 'loading';
 
       log(`🟩 "${name}" Slot Initialized`);
-      await callback(context as K & DefaultSlotContext<K>, elementRef.current);
+      await callback(context as K & DefaultSlotContext<K>, elementRef.current as HTMLDivElement | null);
     } catch (error) {
       console.error(`Error in "${callback.name}" Slot callback`, error);
     } finally {
@@ -359,7 +362,9 @@ interface SlotPropsComponent<T>
   slot?: SlotProps<T>;
   context?: Context<T>;
   render?: (props: Record<string, any>) => VNode | VNode[];
+  // eslint-disable-next-line no-undef
   slotTag?: keyof HTMLElementTagNameMap; // The tag for the slot wrapper itself
+  // eslint-disable-next-line no-undef
   contentTag?: keyof HTMLElementTagNameMap; // The tag for dynamically inserted content
   children?: ComponentChildren;
 }
@@ -373,7 +378,11 @@ export function Slot<T>({
   slotTag = 'div',
   contentTag = 'div',
   ...props
-}: Readonly<SlotPropsComponent<T>>) {
+}: Readonly<SlotPropsComponent<T>>): VNode<{
+  ref: RefObject<HTMLElement>;
+  'data-slot': string;
+  [key: string]: any;
+}> {
   const slotsQueue = useContext(SlotQueueContext);
 
   const [elementRef, slotProps] = useSlot<T, HTMLElement>(