@adobe-commerce/elsie 1.4.1-alpha009 → 1.4.1-alpha101

package/bin/builders/gql/index.js

@@ -77,24 +77,20 @@ module.exports = async function generateResourceBuilder(yargs) {
                     alias: 's',
                     describe: 'Path to the source code containing GraphQL operations',
                     type: 'array',
+                    string: true,
                     demandOption: true,
                 })
-                .option('excluded', {
-                    alias: 'x',
-                    describe: 'Paths to exclude from validation',
-                    type: 'array',
-                    demandOption: false,
-                })
                 .option('endpoints', {
                     alias: 'e',
                     describe: 'Path to GraphQL endpoints',
                     type: 'array',
+                    string: true,
                     demandOption: true,
                 });
         },
         async (argv) => {
-            const { source, excluded, endpoints } = argv;
-            await validate(source, endpoints, excluded);
+            const { source, endpoints } = argv;
+            await validate(source, endpoints);
         },
     )
     .demandCommand(1, 1, 'choose a command: types, mocks or validate');

package/bin/builders/gql/validate.js

@@ -5,20 +5,17 @@ const parser = require('@babel/parser');
 const traverse = require('@babel/traverse');
 const { getIntrospectionQuery, buildClientSchema, parse, validate } = require('graphql');
 
-async function walk(dir, excludedPaths = [], collected = []) {
-    if (excludedPaths.includes(dir)) return collected;
-
+async function walk(dir, collected = []) {
     const dirents = await fsPromises.readdir(dir, { withFileTypes: true });
 
     for (const d of dirents) {
         const full = path.resolve(dir, d.name);
 
         if (d.isDirectory()) {
-            if (excludedPaths.includes(full)) continue;
+            // skip node_modules and “hidden” folders such as .git
             if (d.name === 'node_modules' || d.name.startsWith('.')) continue;
-            await walk(full, excludedPaths, collected);
+            await walk(full, collected);
         } else if (/\.(c?m?js|ts|tsx)$/.test(d.name)) {
-            if (excludedPaths.includes(full)) continue;
             collected.push(full);
         }
     }
@@ -100,10 +97,10 @@ async function validateGqlOperations(endpoint, operation) {
     }
 }
 
-async function getAllOperations(directories, excludedPaths = []) {
+async function getAllOperations(directories) {
     let fullContent = '';
     for (const directory of directories) {
-        const files = await walk(path.resolve(directory), excludedPaths.map(p => path.resolve(p)));
+        const files = await walk(path.resolve(directory));
         for (const f of files) {
             const code = await fsPromises.readFile(f, 'utf8');
 
@@ -123,9 +120,11 @@ async function getAllOperations(directories, excludedPaths = []) {
     return fullContent;
 }
 
-module.exports = async function main(sources, endpoints, excluded) {
+
+
+module.exports = async function main(sources, endpoints) {
     for (const endpoint of endpoints) {
-        const operations = await getAllOperations(sources, excluded);
+        const operations = await getAllOperations(sources);
         if (!operations) {
             console.error('No GraphQL operations found in the specified directories.');
             process.exitCode = 0;
@@ -133,4 +132,4 @@ module.exports = async function main(sources, endpoints, excluded) {
         }
         await validateGqlOperations(endpoint, operations);
     }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.4.1-alpha009",
+  "version": "1.4.1-alpha101",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -26,7 +26,7 @@
     "cleanup": "rimraf dist"
   },
   "devDependencies": {
-    "@adobe-commerce/event-bus": "~1.0.0",
+    "@adobe-commerce/event-bus": "~1.0.1",
     "@adobe-commerce/fetch-graphql": "~1.1.0",
     "@adobe-commerce/recaptcha": "~1.0.1",
     "@adobe-commerce/storefront-design": "~1.0.0",

package/src/components/CartItem/CartItem.tsx

@@ -36,6 +36,7 @@ export interface CartItemProps
   totalExcludingTax?: VNode;
   sku?: VNode;
   quantity?: number;
+  quantityContent?: VNode;
   description?: VNode;
   attributes?: VNode;
   footer?: VNode;
@@ -45,6 +46,7 @@ export interface CartItemProps
   discount?: VNode;
   savings?: VNode;
   actions?: VNode;
+  removeContent?: VNode;
   loading?: boolean;
   updating?: boolean;
   onRemove?: () => void;
@@ -71,7 +73,9 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
   discount,
   savings,
   actions,
+  removeContent,
   quantity,
+  quantityContent,
   description,
   attributes,
   footer,
@@ -304,18 +308,20 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
             ['dropin-cart-item__quantity--edit', !!onQuantity],
           ])}
         >
-          {onQuantity
-            ? quantityComponent
-            : quantity && (
-                <span
-                  className={classes(['dropin-cart-item__quantity__value'])}
-                >
-                  {labels.quantity}:{' '}
-                  <strong className="dropin-cart-item__quantity__number">
-                    {Number(quantity).toLocaleString(locale)}
-                  </strong>
-                </span>
-              )}
+          {quantityContent ? (
+            <VComponent node={quantityContent} />
+          ) : onQuantity ? (
+            quantityComponent
+          ) : (
+            quantity && (
+              <span className={classes(['dropin-cart-item__quantity__value'])}>
+                {labels.quantity}:{' '}
+                <strong className="dropin-cart-item__quantity__number">
+                  {Number(quantity).toLocaleString(locale)}
+                </strong>
+              </span>
+            )
+          )}
 
           {/* Warning */}
           {warning && (
@@ -432,12 +438,17 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
 
         {/* Footer */}
         {footer && (
-            <VComponent node={footer} className={classes(['dropin-cart-item__footer'])} />
+          <VComponent
+            node={footer}
+            className={classes(['dropin-cart-item__footer'])}
+          />
         )}
       </div>
 
       {/* Remove Item */}
-      {onRemove && (
+      {removeContent ? (
+        <VComponent node={removeContent} />
+      ) : onRemove ? (
         <Button
           data-testid="cart-item-remove-button"
           className={classes(['dropin-cart-item__remove'])}
@@ -459,7 +470,7 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
           }
           disabled={updating}
         />
-      )}
+      ) : null}
     </div>
   );
 };

package/src/components/Picker/Picker.tsx

@@ -8,12 +8,13 @@
  *******************************************************************/
 
 import { Icon } from '@adobe-commerce/elsie/components';
-import '@adobe-commerce/elsie/components/Picker/Picker.css';
 import { ChevronDown } from '@adobe-commerce/elsie/icons';
 import { classes } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes, useEffect, useState } from 'preact/compat';
 
+import '@adobe-commerce/elsie/components/Picker/Picker.css';
+
 type PickerValue = string | null;
 
 export interface PickerOption {
@@ -68,9 +69,10 @@ export const Picker: FunctionComponent<PickerProps> = ({
   defaultOption,
   icon,
   className,
+  id,
   ...props
 }) => {
-  const id = props?.id || name || `dropin-picker-${Math.random().toString(36)}`;
+  const uniqueId = id ?? name ?? `dropin-picker-${Math.random().toString(36)}`;
   const isRequired = !!props?.required;
 
   // find the first option that is not disabled
@@ -154,7 +156,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
       )}
 
       <select
-        id={id}
+        id={uniqueId}
         className={classes([
           'dropin-picker__select',
           `dropin-picker__select--${variant}`,

package/src/components/ProductItemCard/ProductItemCardSkeleton.css

@@ -9,23 +9,10 @@
 
 /* https://cssguidelin.es/#bem-like-naming */
 
-.dropin-product-item-card__skeleton {
-  gap: var(--spacing-small);
-}
-
 .dropin-product-item-card__skeleton__image {
-  height: 375px;
-}
-
-.dropin-product-item-card__skeleton__content {
-  grid-column: 1/-1;
-}
-
-/* .dropin-product-item-card__skeleton__image {
   width: 100%;
-  height: auto;
+  height: 370px;
 }
-*/
 
 /* Medium (portrait tablets and large phones, 768px and up) */
 /* @media only screen and (min-width: 768px) { } */

package/src/components/ProductItemCard/ProductItemCardSkeleton.tsx

@@ -19,10 +19,11 @@ export const ProductItemCardSkeleton: FunctionComponent = () => {
           fullWidth={true}
           className="dropin-product-item-card__skeleton__image"
         />
-        <div className="dropin-product-item-card__content dropin-product-item-card__skeleton__content">
+      </Skeleton>
+      <Skeleton className="dropin-product-item-card__content dropin-product-item-card__skeleton__content">
           <SkeletonRow
             fullWidth={true}
-            size="large"
+            size="xsmall"
             className="dropin-product-item-card__skeleton__item"
           />
           <SkeletonRow
@@ -32,11 +33,10 @@ export const ProductItemCardSkeleton: FunctionComponent = () => {
           />
           <SkeletonRow
             fullWidth={true}
-            size="small"
+            size="xsmall"
             className="dropin-product-item-card__skeleton__item"
           />
-        </div>{' '}
-      </Skeleton>
+        </Skeleton>
     </div>
   );
 };

package/src/components/TextSwatch/TextSwatch.tsx

@@ -14,6 +14,7 @@ import {
   useEffect,
   useRef,
   useCallback,
+  useMemo,
 } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/TextSwatch/TextSwatch.css';
@@ -93,6 +94,8 @@ export const TextSwatch: FunctionComponent<TextSwatchProps> = ({
     }
   }, [label]);
 
+  const uniqueId = useMemo(() => id ?? `${name}_${id}_${Math.random().toString(36)}`, [name, id]);
+
   return (
     <div
       className="dropin-text-swatch__container"
@@ -101,7 +104,7 @@ export const TextSwatch: FunctionComponent<TextSwatchProps> = ({
       <input
         type={multi ? 'checkbox' : 'radio'}
         name={name}
-        id={id}
+        id={uniqueId}
         value={value}
         aria-label={handleAriaLabel()}
         checked={selected}
@@ -116,7 +119,7 @@ export const TextSwatch: FunctionComponent<TextSwatchProps> = ({
         ])}
       />
       <label
-        htmlFor={id}
+        htmlFor={uniqueId}
         ref={spanRef}
         className={classes([
           'dropin-text-swatch__label',

package/src/docs/API/event-bus.mdx

@@ -5,48 +5,265 @@ import { Meta, Unstyled } from '@storybook/blocks';
 
 # Event Bus
 
-## Usage
+The Event Bus provides a communication system for different parts of your application to exchange messages and stay synchronized. It enables event-driven architecture for drop-ins, allowing Containers to react to changes from other Containers and communicate data changes to the storefront.
+
+## Import
+
+From drop-in project using the SDK
 
 ```ts
-// from drop-in project (SDK)
 import { events } from '@adobe-commerce/elsie/lib';
+```
+
 
-// from host site
+From integration project (storefront)
+
+```js
 import { events } from '@dropins/tools/event-bus.js';
 ```
 
-## Methods
+## Core Methods
+
+### Subscribe to Events
+
+Subscribe to events and receive notifications when they occur.
+
+```ts
+const eventListener = events.on('<event>', (payload) => {
+  // Handle the event payload
+  console.log('Event received:', payload);
+});
+
+// Stop listening to the event
+eventListener.off();
+```
 
-### Listener
+**Example:**
 ```ts
-const onEvent = events.on('<event>', (payload) => {
-  //...handle payload
+// Listen for cart updates
+const cartListener = events.on('cart/data', (cartData) => {
+  if (cartData) {
+    console.log(`Cart has ${cartData.totalQuantity} items`);
+    updateCartUI(cartData);
+  } else {
+    console.log('Cart is empty');
+    showEmptyCart();
+  }
 });
 
-// Stop listening to event
-onEvent.off();
+// Later, when you want to stop listening
+cartListener.off();
+```
+
+### Emit Events
+
+Broadcast events to all listeners across your application.
+
+```ts
+events.emit('<event>', payload);
+```
+
+**Examples:**
+```ts
+// Emit cart data
+const cartData = {
+  id: 'cart-123',
+  totalQuantity: 2,
+  items: [
+    { uid: 'item-1', quantity: 1, sku: 'PROD-001', name: 'Product Name' }
+  ]
+};
+
+events.emit('cart/data', cartData);
 ```
 
-### Emit
+### Get Last Event Payload
+
+Retrieve the most recent payload for a specific event.
+
+```ts
+const lastPayload = events.lastPayload('<event>');
+```
 
+**Example:**
 ```ts
-events.emit('<event>', <payload>);
+// Get the current cart state without waiting for an event
+const currentCart = events.lastPayload('cart/data');
+
+if (currentCart) {
+  console.log('Current cart total:', currentCart.totalQuantity);
+}
 ```
 
-### Logging
+### Enable Debug Logging
+
+Turn on console logging to debug event flow.
 
 ```ts
-// Enable logging
+// Enable logging to see all events in console
 events.enableLogger(true);
+```
 
-// Disable logging
-events.enableLogger(false);
+## Advanced Features
+
+### Eager Loading
+
+Execute the event handler immediately with the last known payload when subscribing. This is useful for getting the current state without waiting for the next event.
+
+```ts
+// Handler will execute immediately if there's a previous payload
+const listener = events.on('cart/data', (cartData) => {
+  console.log('Cart data received:', cartData);
+}, { eager: true });
 ```
 
-### Get Latest Payload
+**Use Cases:**
+- Initialize UI components with current state
+- Avoid waiting for the first event emission
+- Ensure components have the latest data on mount
+
+### Event Scoping
+
+Create namespaced events to avoid conflicts between different parts of your application.
+
+```ts
+// Subscribe to a scoped event
+const scopedListener = events.on('data/update', (data) => {
+  console.log('Scoped data received:', data);
+}, { scope: 'feature-a' });
+
+// Emit a scoped event
+events.emit('data/update', payload, { scope: 'feature-a' });
+
+// Get last payload for a scoped event
+const lastScopedData = events.lastPayload('data/update', { scope: 'feature-a' });
+```
+
+**Scoped Event Names:**
+When using scopes, the actual event name becomes `scope/event`. For example:
+- `'feature-a/data/update'` instead of `'data/update'`
+- `'module-b/user/action'` instead of `'user/action'`
+
+**Use Cases:**
+- Separate different features or modules
+- Different contexts within the same application
+- Component-specific event handling
+
+### Combining Options
+
+Use both eager loading and scoping together for powerful event handling.
 
 ```ts
-events.lastPayload('<event>'): EventPayload | undefined;
+// Subscribe to a scoped event with eager loading
+const listener = events.on('locale', (locale) => {
+  console.log('Current locale:', locale);
+}, { 
+  eager: true, 
+  scope: 'user-preferences' 
+});
 ```
 
+## Event-Driven Drop-ins
+
+The Event Bus enables drop-ins to be truly event-driven, allowing for loose coupling between components and seamless communication across the application.
+
+### Container-to-Container Communication
+
+Containers can react to changes from other Containers, enabling complex interactions without direct dependencies.
+
+```ts
+// Product Container: Emits when a product is added to cart
+function ProductContainer() {
+  const handleAddToCart = (product) => {
+    // Add to cart logic...
+    
+    // Notify other containers about the cart change
+    events.emit('cart/data', updatedCartData);
+  };
+  
+  return (
+    <button onClick={() => handleAddToCart(product)}>
+      Add to Cart
+    </button>
+  );
+}
+
+// Cart Container: Reacts to cart changes from any source
+function CartContainer() {
+  useEffect(() => {
+    const cartListener = events.on('cart/data', (cartData) => {
+      updateCartDisplay(cartData);
+      updateCartBadge(cartData.totalQuantity);
+    }, { eager: true });
+    
+    return () => cartListener.off();
+  }, []);
+  
+  return <CartDisplay />;
+}
+
+// Mini Cart Container: Also reacts to the same cart changes
+function MiniCartContainer() {
+  useEffect(() => {
+    const cartListener = events.on('cart/data', (cartData) => {
+      updateMiniCart(cartData);
+    }, { eager: true });
+    
+    return () => cartListener.off();
+  }, []);
+  
+  return <MiniCart />;
+}
+```
+
+### Storefront Communication
+
+Drop-ins can communicate data changes to the storefront, enabling seamless integration with the host application.
+
+```ts
+// Authentication Container: Notifies storefront of login/logout
+function AuthContainer() {
+  const handleLogin = (userData) => {
+    // Login logic...
+    
+    // Notify storefront of authentication change
+    events.emit('authenticated', true);
+  };
+  
+  const handleLogout = () => {
+    // Logout logic...
+    
+    // Notify storefront of authentication change
+    events.emit('authenticated', false);
+  };
+  
+  return <AuthForm onLogin={handleLogin} onLogout={handleLogout} />;
+}
+
+// Storefront can listen for authentication changes
+// This would be in the host application
+const authListener = events.on('authenticated', (isAuthenticated) => {
+  if (isAuthenticated) {
+    showUserMenu();
+    enableCheckout();
+  } else {
+    hideUserMenu();
+    disableCheckout();
+  }
+}, { eager: true });
+```
+
+
+
+## Best Practices
+
+1. **Always unsubscribe** from events when components unmount to prevent memory leaks
+2. **Use scopes** to organize events by feature or component
+3. **Enable eager loading** when you need immediate access to current state
+4. **Use descriptive event names** that clearly indicate what data they contain
+5. **Handle null/undefined payloads** gracefully in your event handlers
+6. **Enable logging during development** to debug event flow
+7. **Keep event payloads lightweight** to avoid performance issues
+8. **Document your event contracts** so other developers know what to expect
+
 </Unstyled>