@adobe-commerce/elsie 1.4.1-alpha008 → 1.5.0-alpha1

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.5.0-alpha1",
   "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.1",
     "@adobe-commerce/fetch-graphql": "~1.1.0",
     "@adobe-commerce/recaptcha": "~1.0.1",
     "@adobe-commerce/storefront-design": "~1.0.0",

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/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/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';