@adobe-commerce/elsie 1.4.1 → 1.5.0-alpha100

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",
+  "version": "1.5.0-alpha100",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/InputFile/InputFile.css

@@ -0,0 +1,49 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-input-file__input {
+    display: none;
+}
+
+.dropin-input-file__label {
+    border: 0 none;
+    cursor: pointer;
+    border-radius: var(--shape-border-radius-3);
+    padding: var(--spacing-xsmall) var(--spacing-medium);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--color-brand-500);
+    color: var(--color-neutral-50);
+    font: var(--type-button-2-font);
+    letter-spacing: var(--type-button-2-letter-spacing);
+}
+
+.dropin-input-file__label:hover {
+    background-color: var(--color-button-hover);
+}
+
+.dropin-input-file__icon {
+    height: 24px;
+    margin-right: var(--spacing-xsmall);
+}
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+/* @media only screen and (min-width: 768px) { } */
+
+/* Large (landscape tablets, 1024px and up) */
+/* @media only screen and (min-width: 1024px) { } */
+
+/* XLarge (laptops/desktops, 1366px and up) */
+/* @media only screen and (min-width: 1366px) { } */
+
+/* XXlarge (large laptops and desktops, 1920px and up) */
+/* @media only screen and (min-width: 1920px) { } */

package/src/components/InputFile/InputFile.stories.tsx

@@ -0,0 +1,90 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+  
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { InputFile, InputFileProps } from '@adobe-commerce/elsie/components/InputFile';
+import { action } from '@storybook/addon-actions';
+import { IconsList } from '@adobe-commerce/elsie/components/Icon/Icon.stories.helpers';
+
+/**
+ * Use InputFile to upload files.
+ */
+const meta: Meta<InputFileProps> = {
+  title: 'Components/InputFile',
+  component: InputFile,
+  argTypes: {
+    label: {
+      description: 'Label for the input file.',
+      type: 'string',
+    },
+    accept: {
+      description: 'Restrict selectable file types',
+      type: 'string',
+    },
+    multiple: {
+      description: 'Allow multiple files selection.',
+      type: { 
+        name: 'boolean', 
+        required: false 
+      },
+    },
+    id: {
+      description: 'id',
+      type: { 
+        required: false, 
+        name: 'string' 
+      },
+      control: 'text',
+    },
+    onChange: {
+      description: 'Handler for when the file selection changes.',
+      control: false,
+      table: {
+        type: { 
+          summary: 'function' 
+        },
+      },
+    },
+    icon: {
+      description: 'Optional icon.',
+      table: {
+        type: { summary: 'FunctionComponent' },
+      },
+      options: Object.keys(IconsList),
+      mapping: IconsList,
+      control: 'select',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<InputFileProps>;
+
+export const Default: Story = {
+  args: {
+    label: 'Upload File',
+    id: 'single-file-input',
+    accept: ".pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt, .csv, .jpg, .jpeg, .png, .gif, .bmp, .tiff, .ico, .webp",
+    onChange: action('onChange'),
+    icon: 'none' as any,
+  },
+};
+
+export const MultipleFiles: Story = {
+  args: {
+    label: 'Upload Multiple Files',
+    id: 'multiple-files-input',
+    accept: ".pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt, .csv, .jpg, .jpeg, .png, .gif, .bmp, .tiff, .ico, .webp",
+    multiple: true,
+    onChange: action('onChange'),
+    icon: 'none' as any,
+  },
+};

package/src/components/InputFile/InputFile.tsx

@@ -0,0 +1,59 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import { FunctionComponent, VNode } from 'preact';
+import { useId } from 'preact/hooks';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe-commerce/elsie/lib';
+import '@adobe-commerce/elsie/components/InputFile/InputFile.css';
+
+export interface InputFileProps extends Omit<HTMLAttributes<HTMLInputElement>, 'type' | 'icon'> {
+  accept?: string;
+  onChange?: (event: Event) => void;
+  label?: string;
+  multiple?: boolean;
+  icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+}
+
+export const InputFile: FunctionComponent<InputFileProps> = ({
+  accept,
+  onChange,
+  label = 'Upload Document',
+  icon,
+  className,
+  multiple,
+  id: providedId,
+  ...props
+}) => {
+  
+  const generatedId = useId();
+  const id = providedId || generatedId;
+
+  const handleChange = (e: Event) => {
+    onChange?.(e);
+  };
+
+  return (
+    <div className={classes(['dropin-input-file', className])}>
+      <label htmlFor={id} className="dropin-input-file__label">
+        {icon && <span className="dropin-input-file__icon">{icon}</span>}
+        {label}
+      </label>
+      <input
+        id={id}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleChange}
+        className="dropin-input-file__input"
+        {...props}
+      />
+    </div>
+  );
+};

package/src/components/InputFile/index.ts

@@ -0,0 +1,11 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+  
+export * from '@adobe-commerce/elsie/components/InputFile/InputFile';
+export { InputFile as default } from '@adobe-commerce/elsie/components/InputFile/InputFile';

package/src/components/Picker/Picker.tsx

@@ -8,13 +8,12 @@
  *******************************************************************/
 
 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 {
@@ -69,10 +68,9 @@ export const Picker: FunctionComponent<PickerProps> = ({
   defaultOption,
   icon,
   className,
-  id,
   ...props
 }) => {
-  const uniqueId = id ?? name ?? `dropin-picker-${Math.random().toString(36)}`;
+  const id = props?.id || name || `dropin-picker-${Math.random().toString(36)}`;
   const isRequired = !!props?.required;
 
   // find the first option that is not disabled
@@ -156,7 +154,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
       )}
 
       <select
-        id={uniqueId}
+        id={id}
         className={classes([
           'dropin-picker__select',
           `dropin-picker__select--${variant}`,

package/src/components/TextSwatch/TextSwatch.tsx

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

package/src/components/index.ts

@@ -48,3 +48,4 @@ export * from '@adobe-commerce/elsie/components/Tag';
 export * from '@adobe-commerce/elsie/components/ContentGrid';
 export * from '@adobe-commerce/elsie/components/Pagination';
 export * from '@adobe-commerce/elsie/components/ProductItemCard';
+export * from '@adobe-commerce/elsie/components/InputFile';

package/src/docs/API/render.mdx

@@ -121,21 +121,5 @@ button.addEventListener('click', () => {
 });
 ```
 
-### Unmounting components without instance access
-
-The `Render.unmount` static method provides a way to unmount components from the DOM when you don't have direct access to the component instance. 
-This is particularly useful in scenarios where components are rendered inside modals, dialogs, or other temporary containers that need to be cleaned up.
-
-#### Example
-
-```js
-// Close the dialog
-dialog.close();
-
-// Unmount any dropin containers rendered in the modal
-dialog.querySelectorAll('[data-dropin-container]').forEach(Render.unmount);
-```
-
-This approach ensures that all dropin components are properly cleaned up when their container elements are removed from the DOM, preventing memory leaks and maintaining application performance.
 </Unstyled>
 

package/src/lib/aem/configs.ts

@@ -40,7 +40,7 @@ function resetConfig() {
  * @param {Object} [configObj=config] - The config object.
  * @returns {string} - The root path.
  */
-function getRootPath(configObj: Config | null = config): string {
+function getRootPath(configObj: Config | null = config, options: { match?: (key: string) => boolean }): string {
   if (!configObj) {
     console.warn('No config found. Please call initializeConfig() first.');
     return '/';
@@ -56,7 +56,7 @@ function getRootPath(configObj: Config | null = config): string {
     .find(
       (key) =>
         window.location.pathname === key ||
-        window.location.pathname.startsWith(key)
+        (options?.match?.(key) ?? window.location.pathname.startsWith(key))
     );
 
   return value ?? '/';
@@ -126,11 +126,14 @@ function applyConfigOverrides(
 
 /**
  * Initializes the configuration system.
+ * @param {Object} configObj - The config object.
+ * @param {Object} [options] - The options object.
+ * @param {Function} [options.match] - The function to match the path to the config.
  * @returns {Object} The initialized root configuration
  */
-function initializeConfig(configObj: Config): ConfigRoot {
+function initializeConfig(configObj: Config, options?: { match?: (key: string) => boolean }): ConfigRoot {
   config = configObj;
-  rootPath = getRootPath(config);
+  rootPath = getRootPath(config, { match: options?.match });
   rootConfig = applyConfigOverrides(config, rootPath);
   return rootConfig;
 }

package/src/lib/render.tsx

@@ -71,21 +71,17 @@ export class Render {
       rootElement.innerHTML = '';
 
       // clone the root element to initialize rendering on the background
-      const root = document.createElement('div');
+      const tmp = document.createElement('div');
 
       // apply base design tokens and global styles to the root element
       rootElement.classList.add('dropin-design');
-      rootElement.setAttribute('data-dropin-container', Component.name);
 
-      // store the virtual root element
-      (rootElement as any).__rootElement = root;
-
-      render(<Root next={state} />, root);
+      render(<Root next={state} />, tmp);
 
       // API object to control the rendered component
       const API: RenderAPI = {
         remove: () => {
-          render(null, root);
+          render(null, tmp);
         },
         setProps: (cb: (prev: T) => T) => {
           const next = cb(state.peek());
@@ -101,7 +97,7 @@ export class Render {
             rootElement.classList.add('dropin-design');
 
             // append the rendered component to the DOM only when all slots are resolved
-            rootElement.appendChild(root.firstChild ?? root);
+            rootElement.appendChild(tmp.firstChild ?? tmp);
 
             return resolve(API);
           }
@@ -110,24 +106,14 @@ export class Render {
     };
   }
 
-  /**
-   * Unmounts a container from a root element.
-   * @param rootElement - The root element to unmount the container from.
-   */
-  static unmount(rootElement: HTMLElement) {
-    const root = (rootElement as any)?.__rootElement;
-    if (!root) throw new Error('Root element is not defined');
-    render(null, root);
-  }
-
   /**
    * UnRenders a component from a root element.
    * @param rootElement - The root element to unmount the component from.
-   * @deprecated Use `remove` method from the returned object of the `mount` method instead or `unmount` method from the `Render` class.
+   * @deprecated Use `remove` method from the returned object of the `mount` method instead.
    */
   unmount(rootElement: HTMLElement) {
     if (!rootElement) throw new Error('Root element is not defined');
-    rootElement.firstChild?.remove();  
+    rootElement.firstChild?.remove();
   }
 
   /**
@@ -149,4 +135,4 @@ export class Render {
       { ...options }
     );
   }
-}
+}