MWPW-139915: Delivery of Spectrum Web Components (#1663) (#1721)

* MWPW-139915: Delivery of Spectrum Web Components (#1663)

* MWPW-139915: Spectrum Web Components delivery

for commerce

* add README

* muted eslint errors for src/dist folders

* Update merch.js

* Update merch.js

* exclude swc from codecov

* PR feedbacks incorporated.

.eslintrc.js

@@ -49,6 +49,7 @@ module.exports = {
   ignorePatterns: [
     '/libs/deps/*',
     '/tools/loc/*',
+    '/libs/features/spectrum-web-components/*',
   ],
   plugins: [
     'chai-friendly',

libs/features/spectrum-web-components/.gitignore

@@ -0,0 +1,8 @@
+.hlx/*
+.aem/*
+coverage/*
+logs/*
+node_modules/**
+.DS_Store
+.idea
+.iml

libs/features/spectrum-web-components/README.md

@@ -0,0 +1,16 @@
+# Spectrum Web Components
+
+This repository provides individual Spectrum Web Components for consumption in SPA like pages.<br>
+This feature is mainly designed for consumption by the different merch blocks.
+
+Please know that SWC is heavy, impacts page performance and is not suitable for cases where a Consonant component is already available in Milo, e.g: button.
+
+To load SWC components, do as follows:
+
+```
+await Promise.all([
+  import(`${miloLibs}/features/spectrum-web-components/dist/theme.js`),
+  import(`${miloLibs}/features/spectrum-web-components/dist/button.js`),
+  import(`${miloLibs}/features/spectrum-web-components/dist/search.js`),
+]);
+```

libs/features/spectrum-web-components/build.mjs

@@ -0,0 +1,113 @@
+import fs from 'fs';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { build } from 'esbuild';
+
+const BANNER = `/* eslint-disable */
+/* Generated by Milo */
+`;
+
+const ICONS = [
+  'asterisk', 'chevron', 'checkmark', 'dash',
+];
+
+const LIT_PATH_PATTERN = /^lit(\/.*)?$/;
+const ICON_PATH_PATTERN = /^@spectrum-web-components\/icon\/src\/spectrum-icon-(.*).css.js/;
+const SWC_BASE_PATH = '/libs/features/spectrum-web-components';
+
+const IGNORE_PATHS = [
+  '@spectrum-web-components/modal/src/modal-wrapper.css.js',
+  '@spectrum-web-components/modal/src/modal.css.js',
+];
+
+const TARGET = 'es2021';
+
+const DEFINE = { 'process.env.NODE_ENV': '"development"' };
+
+function rewriteImports() {
+  return {
+    name: 'rewrite-imports',
+    // eslint-disable-next-line no-shadow
+    setup(build) {
+      // eslint-disable-next-line consistent-return
+      build.onResolve({ filter: /.*/ }, (args) => {
+        /* Spectrum Web Components */
+        // if path is for another module, rewrite it as external
+        let [entry] = build.initialOptions.entryPoints;
+        ([entry] = entry.replace('./src/', '').split('.'));
+
+        if (LIT_PATH_PATTERN.test(args.path)) {
+          return {
+            path: '/libs/deps/lit-all.min.js',
+            external: true,
+          };
+        }
+        if (ICON_PATH_PATTERN.test(args.path)) {
+          const iconName = args.path.match(ICON_PATH_PATTERN)[1];
+          return {
+            path: `${SWC_BASE_PATH}/dist/icons/${iconName}.js`,
+            external: true,
+          };
+        }
+
+        if (/@spectrum-web-components/.test(args.path) && args.path.indexOf(`@spectrum-web-components/${entry}`) < 0 && !IGNORE_PATHS.includes(args.path)) {
+          // get the first folder after @spectrum-web-components
+          const [, module] = args.path.split('/');
+          return {
+            path: `${SWC_BASE_PATH}/dist/${module}.js`,
+            external: true,
+          };
+        }
+        return undefined;
+      });
+    },
+  };
+}
+
+const mods = fs.readdirSync('./src');
+
+build({
+  define: DEFINE,
+  bundle: true,
+  banner: { js: BANNER },
+  entryPoints: ['./src/lit.js'],
+  platform: 'browser',
+  format: 'esm',
+  sourcemap: false,
+  target: TARGET,
+  minify: true,
+  outfile: '../../deps/lit-all.min.js',
+});
+
+mods.forEach((mod) => {
+  if (mod === 'lit.js') return;
+  build({
+    define: DEFINE,
+    bundle: true,
+    banner: { js: BANNER },
+    entryPoints: [`./src/${mod}`],
+    platform: 'browser',
+    format: 'esm',
+    sourcemap: false,
+    legalComments: 'none',
+    target: TARGET,
+    minify: true,
+    plugins: [rewriteImports()],
+    outfile: `./dist/${mod}`,
+  });
+});
+
+ICONS.forEach((icon) => {
+  build({
+    define: DEFINE,
+    bundle: true,
+    banner: { js: BANNER },
+    entryPoints: [`./node_modules/@spectrum-web-components/icon/src/spectrum-icon-${icon}.css.js/`],
+    platform: 'browser',
+    format: 'esm',
+    sourcemap: false,
+    legalComments: 'none',
+    target: TARGET,
+    minify: true,
+    outfile: `./dist/icons/${icon}.js`,
+  });
+});

libs/features/spectrum-web-components/dist/alert-dialog.js

@@ -0,0 +1,98 @@
+/* eslint-disable */
+/* Generated by Milo */
+
+import{html as a,SpectrumElement as w}from"/libs/features/spectrum-web-components/dist/base.js";import{property as z,query as x}from"/libs/features/spectrum-web-components/dist/base.js";import"/libs/features/spectrum-web-components/dist/button.js";import{FocusVisiblePolyfillMixin as C}from"/libs/features/spectrum-web-components/dist/shared.js";import{conditionAttributeWithId as c}from"/libs/features/spectrum-web-components/dist/base.js";var n=class{constructor(t,{target:e,config:r,callback:i,skipInitial:o}){this.t=new Set,this.o=!1,this.i=!1,this.h=t,e!==null&&this.t.add(e??t),this.l=r,this.o=o??this.o,this.callback=i,window.ResizeObserver?(this.u=new ResizeObserver(l=>{this.handleChanges(l),this.h.requestUpdate()}),t.addController(this)):console.warn("ResizeController error: browser does not support ResizeObserver.")}handleChanges(t){this.value=this.callback?.(t,this.u)}hostConnected(){for(let t of this.t)this.observe(t)}hostDisconnected(){this.disconnect()}async hostUpdated(){!this.o&&this.i&&this.handleChanges([]),this.i=!1}observe(t){this.t.add(t),this.u.observe(t,this.l),this.i=!0,this.h.requestUpdate()}unobserve(t){this.t.delete(t),this.u.unobserve(t)}disconnect(){this.u.disconnect()}};import{css as v}from"/libs/features/spectrum-web-components/dist/base.js";var b=v`
+:host{--spectrum-alert-dialog-min-width:var(
+--spectrum-alert-dialog-minimum-width
+);--spectrum-alert-dialog-max-width:var(
+--spectrum-alert-dialog-maximum-width
+);--spectrum-alert-dialog-icon-size:var(--spectrum-workflow-icon-size-100);--spectrum-alert-dialog-warning-icon-color:var(
+--spectrum-notice-visual-color
+);--spectrum-alert-dialog-error-icon-color:var(
+--spectrum-negative-visual-color
+);--spectrum-alert-dialog-title-font-family:var(
+--spectrum-sans-font-family-stack
+);--spectrum-alert-dialog-title-font-weight:var(
+--spectrum-heading-sans-serif-font-weight
+);--spectrum-alert-dialog-title-font-style:var(
+--spectrum-heading-sans-serif-font-style
+);--spectrum-alert-dialog-title-font-size:var(
+--spectrum-alert-dialog-title-size
+);--spectrum-alert-dialog-title-line-height:var(
+--spectrum-heading-line-height
+);--spectrum-alert-dialog-title-color:var(--spectrum-heading-color);--spectrum-alert-dialog-body-font-family:var(
+--spectrum-sans-font-family-stack
+);--spectrum-alert-dialog-body-font-weight:var(
+--spectrum-body-sans-serif-font-weight
+);--spectrum-alert-dialog-body-font-style:var(
+--spectrum-body-sans-serif-font-style
+);--spectrum-alert-dialog-body-font-size:var(
+--spectrum-alert-dialog-description-size
+);--spectrum-alert-dialog-body-line-height:var(--spectrum-line-height-100);--spectrum-alert-dialog-body-color:var(--spectrum-body-color);--spectrum-alert-dialog-title-to-divider:var(--spectrum-spacing-200);--spectrum-alert-dialog-divider-to-description:var(--spectrum-spacing-300);--spectrum-alert-dialog-title-to-icon:var(--spectrum-spacing-300);--mod-buttongroup-justify-content:flex-end}:host{box-sizing:border-box;display:flex;inline-size:-moz-fit-content;inline-size:fit-content;max-inline-size:var(
+--mod-alert-dialog-max-width,var(--spectrum-alert-dialog-max-width)
+);max-height:inherit;min-inline-size:var(
+--mod-alert-dialog-min-width,var(--spectrum-alert-dialog-min-width)
+);outline:none;padding:var(
+--mod-alert-dialog-padding,var(--spectrum-alert-dialog-padding)
+)}.icon{block-size:var(
+--mod-alert-dialog-icon-size,var(--spectrum-alert-dialog-icon-size)
+);flex-shrink:0;inline-size:var(
+--mod-alert-dialog-icon-size,var(--spectrum-alert-dialog-icon-size)
+);margin-left:var(
+--mod-alert-dialog-title-to-icon,var(--spectrum-alert-dialog-title-to-icon)
+)}:host([variant=warning]){--mod-icon-color:var(
+--mod-alert-dialog-warning-icon-color,var(--spectrum-alert-dialog-warning-icon-color)
+)}:host([variant=error]){--mod-icon-color:var(
+--mod-alert-dialog-error-icon-color,var(--spectrum-alert-dialog-error-icon-color)
+)}.grid{display:grid}.header{align-items:baseline;display:flex;justify-content:space-between}::slotted([slot=heading]){color:var(
+--mod-alert-dialog-title-color,var(--spectrum-alert-dialog-title-color)
+);font-family:var(
+--mod-alert-dialog-title-font-family,var(--spectrum-alert-dialog-title-font-family)
+);font-size:var(
+--mod-alert-dialog-title-font-size,var(--spectrum-alert-dialog-title-font-size)
+);font-style:var(
+--mod-alert-dialog-title-font-style,var(--spectrum-alert-dialog-title-font-style)
+);font-weight:var(
+--mod-alert-dialog-title-font-weight,var(--spectrum-alert-dialog-title-font-weight)
+);line-height:var(
+--mod-alert-dialog-title-line-height,var(--spectrum-alert-dialog-title-line-height)
+);margin:0;margin-block-end:var(
+--mod-alert-dialog-title-to-divider,var(--spectrum-alert-dialog-title-to-divider)
+)}.content{-webkit-overflow-scrolling:touch;color:var(
+--mod-alert-dialog-body-color,var(--spectrum-alert-dialog-body-color)
+);font-family:var(
+--mod-alert-dialog-body-font-family,var(--spectrum-alert-dialog-body-font-family)
+);font-size:var(
+--mod-alert-dialog-body-font-size,var(--spectrum-alert-dialog-body-font-size)
+);font-style:var(
+--mod-alert-dialog-body-font-style,var(--spectrum-alert-dialog-body-font-style)
+);font-weight:var(
+--mod-alert-dialog-body-font-weight,var(--spectrum-alert-dialog-body-font-weight)
+);line-height:var(
+--mod-alert-dialog-body-line-height,var(--spectrum-alert-dialog-body-line-height)
+);margin:0;margin-block-end:var(
+--mod-alert-dialog-description-to-buttons,var(--spectrum-alert-dialog-description-to-buttons)
+);margin-block-start:var(
+--mod-alert-dialog-divider-to-description,var(--spectrum-alert-dialog-divider-to-description)
+);overflow-y:auto}@media (forced-colors:active){:host{border:solid}}
+`,m=b;var f=Object.defineProperty,y=Object.getOwnPropertyDescriptor,g=(s,t,e,r)=>{for(var i=r>1?void 0:r?y(t,e):t,o=s.length-1,l;o>=0;o--)(l=s[o])&&(i=(r?l(t,e,i):l(i))||i);return r&&i&&f(t,e,i),i},k=["confirmation","information","warning","error","destructive","secondary"],E=0;function u(s,t){let e=s.assignedElements(),r=[];return e.forEach(i=>{if(i.id)r.push(i.id);else{let o=t+`-${E++}`;i.id=o,r.push(o)}}),r}var d=class h extends C(w){constructor(){super(...arguments),this.resizeController=new n(this,{callback:()=>{this.shouldManageTabOrderForScrolling()}}),this._variant="",this.labelledbyId=`sp-dialog-label-${h.instanceCount++}`,this.shouldManageTabOrderForScrolling=()=>{if(!this.contentElement)return;let{offsetHeight:t,scrollHeight:e}=this.contentElement;t<e?this.contentElement.tabIndex=0:this.contentElement.removeAttribute("tabindex")},this.describedbyId=`sp-dialog-description-${h.instanceCount++}`}static get styles(){return[m]}set variant(t){if(t===this.variant)return;let e=this.variant;k.includes(t)?(this.setAttribute("variant",t),this._variant=t):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",e)}get variant(){return this._variant}renderIcon(){switch(this.variant){case"warning":case"error":return a`
+                    <sp-icon-alert class="icon"></sp-icon-alert>
+                `;default:return a``}}renderHeading(){return a`
+            <slot name="heading" @slotchange=${this.onHeadingSlotchange}></slot>
+        `}renderContent(){return a`
+            <div class="content">
+                <slot @slotchange=${this.onContentSlotChange}></slot>
+            </div>
+        `}onHeadingSlotchange({target:t}){this.conditionLabelledby&&(this.conditionLabelledby(),delete this.conditionLabelledby);let e=u(t,this.labelledbyId);e.length&&(this.conditionLabelledby=c(this,"aria-labelledby",e))}onContentSlotChange({target:t}){requestAnimationFrame(()=>{this.resizeController.unobserve(this.contentElement),this.resizeController.observe(this.contentElement)}),this.conditionDescribedby&&(this.conditionDescribedby(),delete this.conditionDescribedby);let e=u(t,this.describedbyId);if(e.length&&e.length<4)this.conditionDescribedby=c(this,"aria-describedby",e);else if(!e.length){let r=!!this.id;r||(this.id=this.describedbyId);let i=c(this,"aria-describedby",this.id);this.conditionDescribedby=()=>{i(),r||this.removeAttribute("id")}}}renderButtons(){return a`
+            <sp-button-group class="button-group">
+                <slot name="button"></slot>
+            </sp-button-group>
+        `}render(){return a`
+            <div class="grid">
+                <div class="header">
+                    ${this.renderHeading()} ${this.renderIcon()}
+                </div>
+                <sp-divider size="m" class="divider"></sp-divider>
+                ${this.renderContent()} ${this.renderButtons()}
+            </div>
+        `}};d.instanceCount=0,g([x(".content")],d.prototype,"contentElement",2),g([z({type:String,reflect:!0})],d.prototype,"variant",1);var p=d;import{defineElement as D}from"/libs/features/spectrum-web-components/dist/base.js";D("sp-alert-dialog",p);export{p as AlertDialog,k as alertDialogVariants};