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

package/bin/builders/gql/index.js

@@ -77,20 +77,24 @@ 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, endpoints } = argv;
-            await validate(source, endpoints);
+            const { source, excluded, endpoints } = argv;
+            await validate(source, endpoints, excluded);
         },
     )
     .demandCommand(1, 1, 'choose a command: types, mocks or validate');

package/bin/builders/gql/validate.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.4.1-alpha008",
+  "version": "1.4.1-alpha009",
   "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.1-beta1",
+    "@adobe-commerce/event-bus": "~1.0.0",
     "@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,7 +36,6 @@ export interface CartItemProps
   totalExcludingTax?: VNode;
   sku?: VNode;
   quantity?: number;
-  quantityContent?: VNode;
   description?: VNode;
   attributes?: VNode;
   footer?: VNode;
@@ -46,7 +45,6 @@ export interface CartItemProps
   discount?: VNode;
   savings?: VNode;
   actions?: VNode;
-  removeContent?: VNode;
   loading?: boolean;
   updating?: boolean;
   onRemove?: () => void;
@@ -73,9 +71,7 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
   discount,
   savings,
   actions,
-  removeContent,
   quantity,
-  quantityContent,
   description,
   attributes,
   footer,
@@ -308,20 +304,18 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
             ['dropin-cart-item__quantity--edit', !!onQuantity],
           ])}
         >
-          {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>
-            )
-          )}
+          {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 && (
@@ -438,17 +432,12 @@ 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 */}
-      {removeContent ? (
-        <VComponent node={removeContent} />
-      ) : onRemove ? (
+      {onRemove && (
         <Button
           data-testid="cart-item-remove-button"
           className={classes(['dropin-cart-item__remove'])}
@@ -470,7 +459,7 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
           }
           disabled={updating}
         />
-      ) : null}
+      )}
     </div>
   );
 };

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

@@ -5,265 +5,48 @@ import { Meta, Unstyled } from '@storybook/blocks';
 
 # Event Bus
 
-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
+## Usage
 
 ```ts
+// from drop-in project (SDK)
 import { events } from '@adobe-commerce/elsie/lib';
-```
-
 
-From integration project (storefront)
-
-```js
+// from host site
 import { events } from '@dropins/tools/event-bus.js';
 ```
 
-## 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();
-```
+## Methods
 
-**Example:**
+### Listener
 ```ts
-// 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();
-  }
+const onEvent = events.on('<event>', (payload) => {
+  //...handle payload
 });
 
-// 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);
+// Stop listening to event
+onEvent.off();
 ```
 
-### Get Last Event Payload
-
-Retrieve the most recent payload for a specific event.
-
-```ts
-const lastPayload = events.lastPayload('<event>');
-```
+### Emit
 
-**Example:**
 ```ts
-// 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);
-}
+events.emit('<event>', <payload>);
 ```
 
-### Enable Debug Logging
-
-Turn on console logging to debug event flow.
+### Logging
 
 ```ts
-// Enable logging to see all events in console
+// Enable logging
 events.enableLogger(true);
-```
 
-## 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 });
+// Disable logging
+events.enableLogger(false);
 ```
 
-**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.
+### Get Latest Payload
 
 ```ts
-// Subscribe to a scoped event with eager loading
-const listener = events.on('locale', (locale) => {
-  console.log('Current locale:', locale);
-}, { 
-  eager: true, 
-  scope: 'user-preferences' 
-});
+events.lastPayload('<event>'): EventPayload | undefined;
 ```
 
-## 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>