@adobe-commerce/elsie 1.4.0-beta3 → 1.4.1-alpha002

package/bin/builders/gql/index.js

@@ -1,7 +1,6 @@
 const path = require('path');
 const createOrClearDirectory = require('./createOrClearDirectory');
 const getSchemaRef = require('./getSchemaRef');
-const validate = require('./validate');
 require('dotenv').config();
 
 const generate = require('@graphql-codegen/cli').generate;
@@ -68,30 +67,5 @@ module.exports = async function generateResourceBuilder(yargs) {
         },
       });
     })
-    .command(
-        'validate',
-        'Validate GraphQL operations',
-        async (yargs) => {
-            return yargs
-                .option('source', {
-                    alias: 's',
-                    describe: 'Path to the source code containing GraphQL operations',
-                    type: 'array',
-                    string: true,
-                    demandOption: true,
-                })
-                .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);
-        },
-    )
-    .demandCommand(1, 1, 'choose a command: types, mocks or validate');
+    .demandCommand(1, 1, 'choose a command: types or mocks');
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.4.0-beta3",
+  "version": "1.4.1-alpha002",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -36,10 +36,8 @@
   },
   "dependencies": {
     "@babel/core": "^7.24.9",
-    "@babel/parser": "^7.24.0",
     "@babel/preset-env": "^7.24.8",
     "@babel/preset-typescript": "^7.24.7",
-    "@babel/traverse": "^7.24.0",
     "@chromatic-com/storybook": "^1",
     "@graphql-codegen/cli": "^5.0.0",
     "@graphql-codegen/client-preset": "^4.1.0",

package/src/components/Price/Price.tsx

@@ -9,13 +9,13 @@
 
 import { FunctionComponent } from 'preact';
 import { HTMLAttributes, useMemo } from 'preact/compat';
-import { classes, getGlobalLocale } from '@adobe-commerce/elsie/lib';
+import { classes } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/Price/Price.css';
 
 export interface PriceProps
   extends Omit<HTMLAttributes<HTMLSpanElement>, 'size'> {
   amount?: number;
-  currency?: string | null;
+  currency?: string;
   locale?: string;
   formatOptions?: {
     [key: string]: any;
@@ -29,7 +29,7 @@ export interface PriceProps
 export const Price: FunctionComponent<PriceProps> = ({
   amount = 0,
   currency,
-  locale,
+  locale = process.env.LOCALE ?? undefined,
   variant = 'default',
   weight = 'bold',
   className,
@@ -39,37 +39,17 @@ export const Price: FunctionComponent<PriceProps> = ({
   size = 'small',
   ...props
 }) => {
-  // Determine the locale to use: prop locale > global locale > browser locale
-  const effectiveLocale = useMemo(() => {
-    if (locale) {
-      return locale;
-    }
-    const globalLocale = getGlobalLocale();
-    if (globalLocale) {
-      return globalLocale;
-    }
-    // Fallback to browser locale or default
-    return process.env.LOCALE && process.env.LOCALE !== 'undefined' ? process.env.LOCALE : 'en-US';
-  }, [locale]);
-
   const formatter = useMemo(
-    () => {
-      const params: Intl.NumberFormatOptions = {
+    () =>
+      new Intl.NumberFormat(locale, {
         style: 'currency',
         currency: currency || 'USD',
         // These options are needed to round to whole numbers if that's what you want.
         minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
         maximumFractionDigits: 2, // (causes 2500.99 to be printed as $2,501)
         ...formatOptions,
-      }
-      try {
-        return new Intl.NumberFormat(effectiveLocale, params);
-      } catch (error) {
-        console.error(`Error creating Intl.NumberFormat instance for locale ${effectiveLocale}. Falling back to en-US.`, error);
-        return new Intl.NumberFormat('en-US', params);
-      }
-    },
-    [effectiveLocale, currency, formatOptions]
+      }),
+    [locale, currency, formatOptions]
   );
 
   const formattedAmount = useMemo(

package/src/components/ProductItemCard/ProductItemCard.css

@@ -23,7 +23,7 @@
 }
 
 .dropin-product-item-card__image-container {
-  overflow: hidden;
+  overflow: visible;
   width: 100%;
   height: auto;
 }
@@ -74,6 +74,27 @@
   width: 100%;
 }
 
+.dropin-product-item-card__image a:focus {
+  outline: 1px solid var(--color-neutral-400);
+  outline-offset: 1px;
+}
+
+.dropin-product-item-card__image {
+  display: inline-block;
+  border-radius: var(--border-radius-xsmall, 4px);
+  outline: none;
+}
+
+.dropin-product-item-card__image:focus-visible {
+  outline: 2px solid var(--color-interactive-focus, #005fcc);
+  outline-offset: 2px;
+  z-index: 2;
+}
+
+.dropin-product-item-card__image-container {
+  overflow: visible;
+}
+
 /* Medium (portrait tablets and large phones, 768px and up) */
 /* @media only screen and (min-width: 768px) { } */
 

package/src/docs/API/initializer.mdx

@@ -81,9 +81,13 @@ initializers.setImageParamKeys({
   extraParam: () => ['extraParam', 'extraValue'],
 });
 
-initializers.mountImmediately(pkg.initialize, {
-  langDefinitions
+// Register Initializers
+initializers.register(pkg.initialize, {
+  langDefinitions,
 });
+
+// Mount Initializers
+initializers.mount();
 ```
 
 Now, when a dropin uses the Image component to render an image with a width of 300 pixels and quality value of 0.8:
@@ -112,70 +116,4 @@ It renders the following image element:
 />
 ```
 
-In this example, the width parameter is mapped to imgWidth and the value of the quality parameter is modified and mapped to imgQuality.
-
-## `setGlobalLocale(locale)`
-
-The `setGlobalLocale` method is part of the initializers module in the `@dropins/tools` package.
-It allows you to set a global locale for all drop-ins that use locale-sensitive components like the Price component.
-
-### Default Behavior
-
-By default, components use the browser's locale or fallback to 'en-US' if no global locale is set.
-
-### Parameters
-
-- `locale` - `string` - The locale string (e.g., 'en-US', 'es-MX', 'fr-FR', 'de-DE').
-
-### Functionality
-
-- If a global locale is set via `setGlobalLocale`, it will be used by components that support locale configuration.
-- Component-specific locale props will take precedence over the global locale.
-- If no global locale is set, components will fall back to the browser's locale or a default locale.
-
-### Usage
-
-Call the `setGlobalLocale()` function before the `mountImmediately()` function in the application layer.
-
-```javascript
-// Set global locale for consistent formatting across all drop-ins
-initializers.setGlobalLocale('fr-FR');
-
-// Register and Mount Initializers immediately
-initializers.mountImmediately(pkg.initialize, {});
-```
-
-Now, when a dropin uses the Price component without specifying a locale prop:
-
-```jsx
-<Price
-  amount={100}
-  currency="EUR"
-/>
-```
-
-It will render with the global locale (fr-FR) formatting:
-
-```html
-<span class="dropin-price dropin-price--default dropin-price--small dropin-price--bold">
-  100,00 €
-</span>
-```
-
-If the same component is used with a specific locale prop, that will take precedence:
-
-```jsx
-<Price
-  amount={100}
-  currency="EUR"
-  locale="en-US"
-/>
-```
-
-It will render with the specified locale (en-US) formatting:
-
-```html
-<span class="dropin-price dropin-price--default dropin-price--small dropin-price--bold">
-  €100.00
-</span>
-```
+In this example, the width parameter is mapped to imgWidth and the value of the quality parameter is modified and mapped to imgQuality.

package/src/lib/index.ts

@@ -20,7 +20,6 @@ export * from '@adobe-commerce/elsie/lib/types';
 export * from '@adobe-commerce/elsie/lib/slot';
 export * from '@adobe-commerce/elsie/lib/vcomponent';
 export * from '@adobe-commerce/elsie/lib/image-params-keymap';
-export * from '@adobe-commerce/elsie/lib/locale-config';
 export * from '@adobe-commerce/elsie/lib/is-number';
 export * from '@adobe-commerce/elsie/lib/deviceUtils';
 export * from '@adobe-commerce/elsie/lib/get-path-value';

package/src/lib/initializer.ts

@@ -10,7 +10,6 @@
 import {
   Config,
   setImageParamsKeyMap,
-  setGlobalLocale,
 } from '@adobe-commerce/elsie/lib';
 
 type Listener = { off(): void };
@@ -52,11 +51,10 @@ export class Initializer<T> {
     };
 
     this.init = (options) => {
-      const { imageParamsKeyMap, globalLocale, ...rest } =
+      const { imageParamsKeyMap, ...rest } =
         options as any;
       this.config.setConfig({ ...this.config.getConfig(), ...rest });
       setImageParamsKeyMap(imageParamsKeyMap);
-      setGlobalLocale(globalLocale);
       return init(options);
     };
   }
@@ -77,7 +75,6 @@ export class initializers {
   static _initializers: Initializers = [];
   static _mounted: boolean = false;
   static _imageParamsKeyMap: { [key: string]: string } | undefined = undefined;
-  static _globalLocale: string | undefined = undefined;
   /**
    * Registers a new initializer. If the initializers have already been mounted,it immediately binds the event listeners and initializes the API for the new initializer.
    * @param initializer - The initializer to register.
@@ -102,11 +99,10 @@ export class initializers {
     options?: { [key: string]: any }
   ) {
     initializer.listeners?.(options);
-          await initializer.init?.({
-        imageParamsKeyMap: initializers._imageParamsKeyMap,
-        globalLocale: initializers._globalLocale,
-        ...options,
-      });
+    await initializer.init?.({
+      imageParamsKeyMap: initializers._imageParamsKeyMap,
+      ...options,
+    });
   }
 
   /**
@@ -124,7 +120,6 @@ export class initializers {
     initializers._initializers?.forEach(([initializer, options]) => {
       initializer.init?.({
         imageParamsKeyMap: initializers._imageParamsKeyMap,
-        globalLocale: initializers._globalLocale,
         ...options,
       });
     });
@@ -136,12 +131,4 @@ export class initializers {
   static setImageParamKeys(params: { [key: string]: any }) {
     initializers._imageParamsKeyMap = params;
   }
-
-  /**
-   * Sets the global locale. This locale is used by components that need consistent formatting regardless of the user's browser locale.
-   * @param locale - The locale string (e.g., 'en-US', 'es-MX', 'fr-FR').
-   */
-  static setGlobalLocale(locale: string) {
-    initializers._globalLocale = locale;
-  }
 }

package/bin/builders/gql/validate.js

@@ -1,135 +0,0 @@
-#!/usr/bin/env node
-const fsPromises = require('node:fs/promises');
-const path = require('node:path');
-const parser = require('@babel/parser');
-const traverse = require('@babel/traverse');
-const { getIntrospectionQuery, buildClientSchema, parse, validate } = require('graphql');
-
-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()) {
-            // skip node_modules and “hidden” folders such as .git
-            if (d.name === 'node_modules' || d.name.startsWith('.')) continue;
-            await walk(full, collected);
-        } else if (/\.(c?m?js|ts|tsx)$/.test(d.name)) {
-            collected.push(full);
-        }
-    }
-    return collected;
-}
-
-function extractConstants(code) {
-    const ast = parser.parse(code, {
-        sourceType: 'unambiguous',
-        plugins: [
-            'typescript',
-            'jsx',
-            'classProperties',
-            'objectRestSpread',
-            'dynamicImport',
-            'optionalChaining',
-            'nullishCoalescingOperator',
-        ],
-    });
-    const found = [];
-    traverse.default(ast, {
-        VariableDeclaration(path) {
-            if (path.node.kind !== 'const') return;
-            for (const decl of path.node.declarations) {
-                const { id, init } = decl;
-                if (!init || id.type !== 'Identifier') continue;
-                let text = null;
-                switch (init.type) {
-                    case 'TemplateLiteral': {
-                        // join all raw chunks; ignores embedded ${expr} for simplicity
-                        text = init.quasis.map(q => q.value.cooked).join('');
-                        break;
-                    }
-                    case 'StringLiteral':
-                        text = init.value;
-                        break;
-                }
-                if (text) {
-                    const match = text.match(/\b(query|mutation|fragment)\b/i);
-                    if (match) {
-                        found.push(text.trim());
-                    }
-                }
-            }
-        },
-    });
-
-    return found;
-}
-
-async function fetchSchema(endpoint) {
-    const body = JSON.stringify({ query: getIntrospectionQuery() });
-    const res  = await fetch(endpoint, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body
-    });
-    if (!res.ok) throw new Error(`Introspection query failed: ${res.statusText}`);
-    const { data, errors } = await res.json();
-    if (errors?.length) throw new Error(`Server returned errors: ${JSON.stringify(errors)}`);
-    return buildClientSchema(data);
-}
-
-async function validateGqlOperations(endpoint, operation) {
-    console.log(`\nValidating against endpoint: ${endpoint}`);
-    try {
-        const document = parse(operation);
-        const errors = validate(await fetchSchema(endpoint), document);
-        if (errors.length) {
-            console.error('❌  Operation is NOT valid for this schema:');
-            errors.forEach(e => console.error('-', e.message));
-            process.exitCode = 1;
-        } else {
-            console.log('✅  Operation is valid!');
-        }
-    } catch (e) {
-        console.error(e);
-        process.exitCode = 1;
-    }
-}
-
-async function getAllOperations(directories) {
-    let fullContent = '';
-    for (const directory of directories) {
-        const files = await walk(path.resolve(directory));
-        for (const f of files) {
-            const code = await fsPromises.readFile(f, 'utf8');
-
-            let extracted;
-            try {
-                extracted = extractConstants(code);      // may throw on bad syntax
-            } catch (err) {
-                console.error(
-                    `⚠️  Skipping ${path.relative(process.cwd(), f)}\n` +
-                    `    ${err.message}`
-                );
-                continue;
-            }
-            fullContent += extracted;
-        }
-    }
-    return fullContent;
-}
-
-
-
-module.exports = async function main(sources, endpoints) {
-    for (const endpoint of endpoints) {
-        const operations = await getAllOperations(sources);
-        if (!operations) {
-            console.error('No GraphQL operations found in the specified directories.');
-            process.exitCode = 0;
-            return;
-        }
-        await validateGqlOperations(endpoint, operations);
-    }
-}

package/src/lib/locale-config.ts

@@ -1,34 +0,0 @@
-/********************************************************************
- *  Copyright 2024 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. 
- *******************************************************************/
-
-class LocaleConfig {
-  private _locale?: string | undefined;
-
-  get locale() {
-    return this._locale;
-  }
-
-  set locale(value: typeof this._locale) {
-    this._locale = value;
-  }
-
-  public getMethods() {
-    return {
-      setLocale: (value: typeof this._locale) => {
-        this.locale = value;
-      },
-      getLocale: () => this.locale,
-    };
-  }
-}
-
-const localeConfig = new LocaleConfig();
-
-export const { setLocale: setGlobalLocale, getLocale: getGlobalLocale } =
-  localeConfig.getMethods();