@adobe-commerce/elsie 1.0.0-alpha04071347

package/config/vite.mjs

@@ -0,0 +1,306 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+import { glob } from 'glob';
+import { createRequire } from 'node:module';
+import path from 'path';
+import { loadEnv } from 'vite';
+
+// Plugins
+import preact from '@preact/preset-vite';
+import { visualizer } from 'rollup-plugin-visualizer';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import dts from 'vite-plugin-dts';
+import svgr from 'vite-plugin-svgr';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import banner from 'vite-plugin-banner';
+
+// Load .env files
+const env = loadEnv('', process.cwd());
+
+// Load Elsie Config
+const elsieConfig = await import(
+  path.resolve(process.cwd(), './.elsie.js')
+).then((m) => m.default);
+
+// Paths
+const paths = {
+  api: elsieConfig.api?.root
+    ? path.resolve(process.cwd(), elsieConfig.api.root)
+    : undefined,
+
+  containers: elsieConfig.containers?.root
+    ? path.resolve(process.cwd(), elsieConfig.containers.root)
+    : undefined,
+
+  fragments: elsieConfig.api?.fragments
+    ? path.resolve(
+        process.cwd(),
+        elsieConfig.api.root,
+        elsieConfig.api.fragments
+      )
+    : undefined,
+};
+
+const isProd = process.env.NODE_ENV !== 'development';
+
+const currentYear = new Date().getFullYear();
+const input = {
+  // render.js
+  render: path.resolve(process.cwd(), './src/render/index.ts'),
+
+  // containers/*.js
+  ...(paths.containers
+    ? glob
+        .sync(path.resolve(paths.containers, '**/*/index.ts'))
+        .reduce((entries, entry) => {
+          const containerRegEx = new RegExp(
+            `${paths.containers}/(.*)/index.ts`
+          );
+          const key = RegExp(containerRegEx).exec(entry)[1];
+
+          return {
+            ...entries,
+            [`containers/${key}`]: entry,
+          };
+        }, {})
+    : {}),
+};
+
+if (paths.api) {
+  input.api = path.resolve(paths.api, 'index.ts');
+}
+
+if (paths.fragments) {
+  input.fragments = path.resolve(paths.fragments);
+}
+
+export default {
+  preview: {
+    host: true,
+    port: env.PORT ?? 3002,
+    strictPort: true,
+    cors: {
+      origin: '*',
+      methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
+      allowedHeaders: ['X-Requested-With', 'content-type', 'Authorization'],
+    },
+  },
+
+  resolve: {
+    alias: {
+      react: 'preact/compat',
+      'react-dom/test-utils': 'preact/test-utils',
+      'react-dom': 'preact/compat', // Must be below test-utils
+      'react/jsx-runtime': 'preact/jsx-runtime',
+      '@adobe-commerce/elsie/config': '@adobe-commerce/elsie/config', // storybook
+      '@adobe-commerce/elsie': '@adobe-commerce/elsie/src',
+    },
+  },
+
+  build: {
+    rollupOptions: {
+      preserveEntrySignatures: 'allow-extension',
+
+      input,
+
+      output: {
+        format: 'esm',
+        minifyInternalExports: true,
+        entryFileNames: '[name].js',
+        assetFileNames: '[name].[ext]',
+        chunkFileNames: 'chunks/[name].js',
+
+        manualChunks: (id) => {
+          if (id.includes(paths.fragments)) {
+            // Fragments file does not accept chunking
+            return 'no-chunk';
+          }
+          return undefined;
+        },
+
+        paths: {
+          // Preact
+          preact: '@dropins/tools/preact.js',
+          'preact/compat': '@dropins/tools/preact-compat.js',
+          'preact/hooks': '@dropins/tools/preact-hooks.js',
+          'preact/jsx-runtime': '@dropins/tools/preact-jsx-runtime.js',
+          'preact-i18n': '@dropins/tools/i18n.js',
+
+          // Signals
+          '@preact/signals': '@dropins/tools/signals.js',
+
+          // SDK Tools
+          '@adobe-commerce/event-bus': '@dropins/tools/event-bus.js',
+          '@adobe-commerce/fetch-graphql': '@dropins/tools/fetch-graphql.js',
+          '@adobe-commerce/recaptcha': '@dropins/tools/recaptcha.js',
+
+          // Lib
+          '@adobe-commerce/elsie/lib': '@dropins/tools/lib.js',
+
+          // Components
+          '@adobe-commerce/elsie/components': '@dropins/tools/components.js',
+        },
+      },
+
+      external: [
+        // Preact
+        'preact',
+        'preact/compat',
+        'preact/hooks',
+        'preact/jsx-runtime',
+        'preact-i18n',
+
+        // Signals
+        '@preact/signals',
+
+        // SDK Tools
+        '@adobe-commerce/event-bus',
+        '@adobe-commerce/fetch-graphql',
+        '@adobe-commerce/recaptcha',
+
+        // Lib
+        '@adobe-commerce/elsie/lib',
+
+        // Components
+        '@adobe-commerce/elsie/components',
+      ],
+    },
+
+    modulePreload: false,
+    commonjsOptions: { transformMixedEsModules: true },
+    minify: !!isProd,
+    sourcemap: !isProd,
+  },
+
+  optimizeDeps: {},
+
+  esbuild: {
+    jsx: 'automatic',
+  },
+
+  plugins: [
+    banner(`Copyright ${currentYear} Adobe\nAll Rights Reserved.`),
+
+    tsconfigPaths(),
+
+    cssInjectedByJsPlugin({
+      styleId: `${elsieConfig.name}`,
+      injectionCodeFormat: 'esm',
+
+      jsAssetsFilterFunction: function jsAssetsFilterFunction(asset) {
+        // include CSS injection code in the render
+        return (
+          // for dropins
+          asset.fileName.endsWith('render.js') ||
+          // for storybook
+          asset.fileName.startsWith('assets/UIProvider')
+        );
+      },
+
+      injectCodeFunction: function injectCodeCustomRunTimeFunction(
+        cssCode,
+        options
+      ) {
+        try {
+          if (typeof document != 'undefined') {
+            const elem = document.createElement('style');
+            const name = options.styleId;
+
+            // SET ALL ATTRIBUTES
+            for (const attribute in options.attributes) {
+              elem.setAttribute(attribute, options.attributes[attribute]);
+            }
+
+            elem.setAttribute('data-dropin', name);
+
+            elem.appendChild(document.createTextNode(cssCode));
+
+            const sdk = document.querySelector('style[data-dropin="sdk"]');
+
+            if (sdk) {
+              // add after sdk
+              sdk.after(elem);
+            } else {
+              // Inject in head before the first <link> or <style> tag.
+              const base = document.querySelector(
+                'link[rel="stylesheet"], style'
+              );
+
+              if (base) {
+                // add before base
+                base.before(elem);
+              } else {
+                // inject at the top of head
+                document.head.append(elem);
+              }
+            }
+          }
+        } catch (e) {
+          console.error('dropin-styles (injectCodeFunction)', e);
+        }
+      },
+    }),
+
+    preact(),
+
+    svgr({ include: '**/*.svg' }),
+
+    dts({
+      logLevel: 'silent',
+      clearPureImport: true,
+      insertTypesEntry: true,
+      include: [
+        path.resolve(process.cwd(), 'src'),
+        path.resolve(process.cwd(), 'types'),
+      ],
+      exclude: [
+        '**/*.stories.tsx',
+        '**/*.test.tsx',
+        '**/*.stories.ts',
+        '**/*.test.ts',
+        'node_modules',
+      ],
+
+      beforeWriteFile: (filePath, content) => {
+        // Don't include d.t.s maps for prod builds.
+        if (isProd && filePath.endsWith('.d.ts.map')) return false;
+
+        // Normalize elsie imports to point to the correct paths
+        content = content.replace(
+          /'(.*@adobe\/elsie\/src\/)/g,
+          "'@dropins/tools/types/elsie/src/"
+        );
+
+        content = content.replace(
+          /'(@adobe\/elsie\/icons)'/g,
+          "'@dropins/tools/types/elsie/src/icons'"
+        );
+
+        return { filePath, content };
+      },
+    }),
+
+    process.env.ANALYZE
+      ? visualizer({
+          title: `${elsieConfig.name} Dropin Bundle Analysis`,
+          filename: 'dist/stats.html',
+          open: true,
+          template: 'treemap',
+        })
+      : null,
+  ],
+};
+
+export function getPathFromModule(module, pathname = '.') {
+  const require = createRequire(import.meta.url);
+  const pkgJSON = require.resolve(`${module}/package.json`);
+  const pkgPath = path.dirname(pkgJSON);
+  return path.resolve(pkgPath, pathname);
+}

package/package.json

@@ -0,0 +1,113 @@
+{
+  "name": "@adobe-commerce/elsie",
+  "version": "1.0.0-alpha04071347",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "description": "Domain Package SDK",
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": false,
+  "main": "./package.json",
+  "bin": {
+    "elsie": "./bin/index.js"
+  },
+  "scripts": {
+    "dev": "concurrently 'yarn storybook' 'yarn serve'",
+    "storybook": "elsie storybook",
+    "serve": "elsie serve --config vite.config.mjs",
+    "lint": "elsie lint --max-warnings=0",
+    "test": "elsie test",
+    "test:ci": "jest --config jest.config.js --passWithNoTests --coverage",
+    "build": "elsie build --config vite.config.mjs",
+    "analyze": "ANALYZE=true elsie build --config vite.config.mjs",
+    "build-storybook": "storybook build --disable-telemetry",
+    "test-storybook": "test-storybook",
+    "test-storybook-ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"npx http-server storybook-static --port 6006 --silent\" \"npx wait-on tcp:127.0.0.1:6006 && test-storybook\"",
+    "cleanup": "rimraf dist"
+  },
+  "devDependencies": {
+    "@adobe-commerce/event-bus": "~1.0.0",
+    "@adobe-commerce/fetch-graphql": "~1.0.0",
+    "@adobe-commerce/recaptcha": "~1.0.0",
+    "@adobe-commerce/storefront-design": "~1.0.0",
+    "@dropins/build-tools": "~1.0.0",
+    "preact": "~10.22.1",
+    "vite-plugin-banner": "^0.8.0"
+  },
+  "dependencies": {
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
+    "@babel/preset-typescript": "^7.24.7",
+    "@chromatic-com/storybook": "^1",
+    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/client-preset": "^4.1.0",
+    "@graphql-codegen/typescript-operations": "^4.0.1",
+    "@preact/preset-vite": "^2.8.2",
+    "@preact/signals": "1.3.0",
+    "@storybook/addon-a11y": "^8.2.3",
+    "@storybook/addon-actions": "^8.2.3",
+    "@storybook/addon-coverage": "^1.0.1",
+    "@storybook/addon-essentials": "^8.2.3",
+    "@storybook/addon-interactions": "^8.2.3",
+    "@storybook/addon-links": "^8.2.3",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.2.3",
+    "@storybook/manager-api": "^8.2.3",
+    "@storybook/preact": "^8.2.3",
+    "@storybook/preact-vite": "^8.2.3",
+    "@storybook/preact-webpack5": "^8.2.3",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/test": "^8.2.3",
+    "@storybook/test-runner": "^0.19.1",
+    "@storybook/theming": "^8.2.3",
+    "@svgr/webpack": "^8.1.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/preact": "^3.2.4",
+    "@types/css-modules": "^1.0.2",
+    "@types/jest": "^29.5.12",
+    "@types/preact-i18n": "^2.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.32.0",
+    "@typescript-eslint/parser": "^5.32.0",
+    "axe-playwright": "^2.0.1",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-tsconfig-paths": "^1.0.3",
+    "common-tags": "^1.8.2",
+    "concurrently": "^7.3.0",
+    "core-js": "^3.24.0",
+    "cssnano": "^6.0.1",
+    "deepmerge": "^4.2.2",
+    "detect-package-manager": "^3.0.2",
+    "dotenv": "^16.0.1",
+    "eslint": "^8.21.0",
+    "eslint-config-preact": "^1.3.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-mdx": "^2.1.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "glob": "^10.3.15",
+    "graphql": "^16.7.1",
+    "graphql-codegen-typescript-mock-data": "^3.5.0",
+    "graphql-config": "^5.0.2",
+    "jest": "^29.7.0",
+    "jest-preset-preact": "^4.1.1",
+    "optimize-plugin": "^1.3.1",
+    "postcss": "^8.4.39",
+    "preact-i18n": "2.4.0-preactx",
+    "preact-render-to-string": "^5.1.4",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "storybook": "^8.2.3",
+    "typescript": "^4.7.3",
+    "vite": "^5.2.10",
+    "vite-plugin-banner": "^0.8.0",
+    "vite-plugin-css-injected-by-js": "^3.5.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2",
+    "webpack": "^5.93.0",
+    "yargs": "^17.5.1"
+  }
+}

package/post-release.sh

@@ -0,0 +1,5 @@
+# This script runs from elsie/dist folder in npm-publish.
+# Reason for the removal of pre-release.sh is so that when npm-publish is called again in workflow/publish.yaml,
+# it releases to adobe-commerce instead of dropins.
+
+rm -f ../pre-release.sh

package/src/components/Accordion/Accordion.css

@@ -0,0 +1,88 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-accordion-section__heading {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+}
+
+.dropin-accordion-section p {
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+  color: var(--color-neutral-700);
+  margin: 0;
+}
+
+.dropin-accordion-section__flex {
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+  align-items: center;
+}
+
+.dropin-accordion-section__title-container,
+.dropin-accordion-section__secondary-text-container {
+  display: flex;
+  gap: var(--spacing-xsmall);
+  align-items: center;
+}
+
+.dropin-accordion-section__secondary-text-container h4 {
+  margin: 0;
+}
+
+.dropin-accordion-section__title-container h3 {
+  margin: 0;
+}
+
+.dropin-accordion-section__title {
+  color: var(--color-neutral-800);
+  font: var(--type-body-1-strong-font);
+  letter-spacing: var(--type-body-1-strong-letter-spacing);
+  cursor: pointer;
+}
+
+.dropin-accordion-section__secondary-text {
+  color: var(--color-neutral-700);
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+.dropin-accordion-section__secondary-text a {
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+}
+
+.dropin-accordion-section svg {
+  cursor: pointer;
+}
+
+.dropin-accordion-section__content-container {
+  display: grid;
+  margin: var(--spacing-medium) 0;
+  gap: var(--spacing-medium);
+}
+
+.dropin-accordion-section__content-container:empty {
+  margin: 0;
+}
+
+/* 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) { } */