@salesforcedevs/arch-components 1.20.17-alpha1 → 1.20.17-alpha11

package/lwc.config.json

@@ -2,6 +2,8 @@
     "modules": [
         { "dir": "src/modules" }
     ],
-    "expose": []
+    "expose": [
+        "arch/context"
+    ]
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/arch-components",
-    "version": "1.20.17-alpha1",
+    "version": "1.20.17-alpha11",
     "description": "Architecture Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -10,7 +10,50 @@
     "publishConfig": {
         "access": "public"
     },
-    "dependencies": {},
+    "dependencies": {
+        "@a11y/focus-trap": "^1.0.5",
+        "@popperjs/core": "^2.11.8",
+        "@salesforcedevs/docs-components": "1.18.0",
+        "@salesforcedevs/dw-components": "1.18.2",
+        "@salesforcedevs/dx-components": "1.18.4",
+        "@salesforcedevs/dx-css-variables": "0.3.43",
+        "@salesforcedevs/mrkt-components": "1.14.2",
+        "algolia-indexing": "^1.3.0",
+        "algoliasearch": "^4.22.1",
+        "chart.js": "^4.4.2",
+        "child-process": "^1.0.2",
+        "classnames": "^2.5.1",
+        "compression": "^1.7.4",
+        "connect": "^3.7.0",
+        "copy-dir": "^1.3.0",
+        "cors": "^2.8.5",
+        "cpx": "^1.5.0",
+        "crypto-js": "^4.2.0",
+        "date-fns": "^2.30.0",
+        "dotenv": "^10.0.0",
+        "esm": "^3.2.25",
+        "gray-matter": "^4.0.3",
+        "gulp": "^4.0.2",
+        "gulp-run-command": "^0.0.10",
+        "gulp-sass": "^5.1.0",
+        "helmet": "^4.6.0",
+        "i18n-js": "^3.9.2",
+        "ip": "^1.1.9",
+        "jsdom": "^18.1.1",
+        "jsonwebtoken": "^9.0.2",
+        "jspdf": "^2.5.1",
+        "lwc": "^6.3.3",
+        "lwr": "0.11.15",
+        "node-cron": "^3.0.3",
+        "node-fetch": "^3.3.2",
+        "perfect-express-sanitizer": "^2.0.2",
+        "promisify": "^0.0.3",
+        "rss": "^1.2.2",
+        "rss-to-json": "^2.1.1",
+        "sass": "^1.72.0",
+        "sharp": "^0.29.3",
+        "sitemap": "^7.1.1"
+    },
     "devDependencies": {},
     "volta": {
         "node": "20.19.0",

package/src/modules/{common → arch}/context/context.ts

@@ -9,11 +9,11 @@ import {
 
 import { EffectAdapter } from 'common/effectAdapter';
 
-export interface ContextWireAdapter<Value, Config extends Record<string, any>, Context extends Record<string, any>>
-    extends WireAdapter<Config, Context> {
+export interface ContextWireAdapter<Value, Config, Context>
+    extends WireAdapter<Value, Config, Context> {
     value: Value;
 }
-export interface ContextWireAdapterConstructor<Value, Config extends Record<string, any>, Context extends Record<string, any>> {
+export interface ContextWireAdapterConstructor<Value, Config, Context> {
     new (setValue: (value: Value) => void): ContextWireAdapter<
         Value,
         Config,
@@ -23,7 +23,7 @@ export interface ContextWireAdapterConstructor<Value, Config extends Record<stri
     setDefaultValue(value: Value): void;
 }
 
-export function createContextAdapter<Value, Config extends Record<string, any>, Context extends Record<string, any>>(
+export function createContextAdapter<Value, Config, Context>(
     initDefaultValue: () => Value,
     schema: Record<keyof Context, string>
 ): ContextWireAdapterConstructor<Value, Config, Context> {
@@ -91,20 +91,20 @@ function compactConfig<T>(config?: T) {
     );
 }
 
-export function createBaseContextProviderElement<Value, Config extends Record<string, any>, Context extends Record<string, any>>(
+export function createBaseContextProviderElement<Value, Config, Context>(
     adapterClass: ContextWireAdapterConstructor<Value, Config, Context>
 ) {
-    const contextualizer = createContextProvider(adapterClass as any);
+    const contextualizer = createContextProvider(adapterClass);
 
     return class ProviderElement extends BaseProvider<Context> {
         public get contextualizer() {
-            return contextualizer as Contextualizer<Context>;
+            return contextualizer;
         }
     };
 }
 
-class BaseProvider<Context extends Record<string, any>> extends LightningElement {
-    public consumers = new Set<ContextConsumer<Context>>();
+class BaseProvider<Context> extends LightningElement {
+    private consumers = new Set<ContextConsumer<Context>>();
 
     public get contextualizer(): Contextualizer<Context> {
         throw new Error('contextualizer not implenented');
@@ -113,7 +113,7 @@ class BaseProvider<Context extends Record<string, any>> extends LightningElement
     @wire(EffectAdapter, {
         localContext: '$localContext'
     })
-    public updateConsumers({ localContext }: { localContext: Context }) {
+    private updateConsumers({ localContext }: { localContext: Context }) {
         for (let consumer of this.consumers) {
             consumer.provide(localContext);
         }

package/src/modules/common/effectAdapter/__tests__/effectAdapter.test.ts

@@ -1,12 +0,0 @@
-import { EffectAdapter } from '../effectAdapter';
-
-describe('EffectAdapter', () => {
-    it('calls the handler', async () => {
-        let value = Symbol();
-        let setValue = jest.fn();
-        let adapter = new EffectAdapter(setValue);
-        let config = { value: value };
-        adapter.update(config);
-        expect(setValue).toHaveBeenCalledWith(config);
-    });
-});

package/src/modules/common/effectAdapter/effectAdapter.html

@@ -1 +0,0 @@
-<template></template>

package/src/modules/common/effectAdapter/effectAdapter.ts

@@ -1,18 +0,0 @@
-import { WireAdapter } from 'lwc';
-
-export type EffectAdapterConfig<T> = {};
-
-export class EffectAdapter<T>
-    implements
-        WireAdapter<EffectAdapterConfig<T>, Record<string, any>>
-{
-    constructor(private setValue: (value: EffectAdapterConfig<T>) => void) {}
-
-    connect() {}
-
-    disconnect() {}
-
-    update(config: EffectAdapterConfig<T>) {
-        this.setValue(config);
-    }
-}

package/src/modules/common/reflectedElement/__tests__/modules/test/select/select.html

@@ -1,3 +0,0 @@
-<template>
-    <select lwc:dom="manual"></select>
-</template>

package/src/modules/common/reflectedElement/__tests__/modules/test/select/select.ts

@@ -1,7 +0,0 @@
-import { ReflectedElement } from 'common/reflectedElement';
-
-export default class extends ReflectedElement {
-    get contentElement() {
-        return this.template.querySelector('select') as HTMLSelectElement;
-    }
-}

package/src/modules/common/reflectedElement/__tests__/modules/test/selectTransform/selectTransform.html

@@ -1,3 +0,0 @@
-<template>
-    <select lwc:dom="manual"></select>
-</template>

package/src/modules/common/reflectedElement/__tests__/modules/test/selectTransform/selectTransform.ts

@@ -1,18 +0,0 @@
-import { ReflectedElement } from '../../../../reflectedElement';
-
-export default class extends ReflectedElement {
-    get contentElement() {
-        return this.template.querySelector('select') as HTMLSelectElement;
-    }
-
-    innerHTMLSetCallback() {
-        this.contentElement.setAttribute(
-            'data-count',
-            String(this.contentElement.querySelectorAll('option').length)
-        );
-    }
-
-    transformHTML(html: string) {
-        return `${html}  <option value="last">Last</option>`;
-    }
-}

package/src/modules/common/reflectedElement/__tests__/reflectedElement.test.ts

@@ -1,75 +0,0 @@
-import { html, renderIntoBody } from 'shared/testutils';
-
-import Select from './modules/test/select/select';
-import SelectTransform from './modules/test/selectTransform/selectTransform';
-
-customElements.define('test-select', Select.CustomElementConstructor);
-customElements.define(
-    'test-select-transform',
-    SelectTransform.CustomElementConstructor
-);
-
-describe('reflected-element', () => {
-    afterEach(() => {
-        document.body.innerHTML = '';
-    });
-
-    // Skip these snapshot tests as LWC slot content doesn't render consistently in tests
-    it.skip('reflects the innerHTML', async () => {
-        let element = renderIntoBody(
-            html`
-                <test-select>
-                    <option value="a">A</option>
-                    <option value="b">B</option>
-                </test-select>
-            `
-        );
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        expect(
-            element.shadowRoot!.querySelector('select')!.innerHTML
-        ).toMatchHTMLSnapshot();
-    }, 10000);
-
-    it.skip('transforms the innerHTML', async () => {
-        let element = renderIntoBody(
-            html`
-                <test-select-transform>
-                    <option value="a">A</option>
-                    <option value="b">B</option>
-                </test-select-transform>
-            `
-        );
-        await new Promise((resolve) => setTimeout(resolve, 100));
-        expect(
-            element.shadowRoot!.querySelector('select')!.innerHTML
-        ).toMatchHTMLSnapshot();
-    }, 10000);
-
-    it('renders components with reflected innerHTML', async () => {
-        let element = renderIntoBody(html`<test-select></test-select>`);
-        await new Promise((resolve) => setTimeout(resolve, 50));
-        expect(element).toBeTruthy();
-        expect(element.shadowRoot!.querySelector('select')).toBeTruthy();
-    }, 10000);
-
-    it('calls innerHTMLSetCallback', async () => {
-        let element = renderIntoBody(
-            html`
-                <test-select-transform>
-                    <option value="a">A</option>
-                    <option value="b">B</option>
-                    <option value="b">C</option>
-                </test-select-transform>
-            `
-        );
-        await new Promise((resolve) => setTimeout(resolve, 100));
-
-        const select = element.shadowRoot!.querySelector('select')!;
-        const count = select.getAttribute('data-count');
-
-        // Due to LWC slot limitations, the count might be 1 or 4
-        // Just verify the callback was called (count attribute exists)
-        expect(select).toHaveAttribute('data-count');
-        expect(parseInt(count!)).toBeGreaterThan(0);
-    }, 10000);
-});

package/src/modules/common/reflectedElement/reflectedElement.ts

@@ -1,50 +0,0 @@
-/**
- * @file
- * This element copies the innerHTML of the host (Light DOM)
- * to the innerHTML of the element (Shadow DOM) returned by
- * contentElement() (which must use the lwc:dom="manual" directive).
- */
-import { LightningElement } from 'lwc';
-
-export class ReflectedElement extends LightningElement {
-    private observer!: MutationObserver;
-    private didSetContent = false;
-
-    get contentElement(): Element {
-        throw new Error('Not Implemented');
-    }
-
-    connectedCallback() {
-        this.observer = new MutationObserver((e) => {
-            this.setContent();
-        });
-        this.observer.observe(this.template.host, {
-            characterData: true,
-            childList: true,
-            subtree: true
-        });
-    }
-
-    disconnectedCallback() {
-        this.observer.disconnect();
-    }
-
-    innerHTMLSetCallback() {}
-
-    renderedCallback() {
-        if (!this.didSetContent) {
-            this.didSetContent = true;
-            this.setContent();
-        }
-    }
-
-    transformHTML(html: string): string {
-        return html;
-    }
-
-    private setContent() {
-        const element = this.contentElement;
-        element.innerHTML = this.transformHTML(this.template.host.innerHTML);
-        this.innerHTMLSetCallback();
-    }
-}

package/src/modules/common/slot/__tests__/slot.test.ts

@@ -1,96 +0,0 @@
-import { html, renderIntoBody } from 'shared/testutils';
-
-import { assignedSlotNames, isSlotAssigned } from '../slot';
-
-customElements.define(
-    'test-a',
-    class extends HTMLElement {
-        connectedCallback() {
-            this.attachShadow({ mode: 'open' });
-            this.shadowRoot!.innerHTML = `
-        <test-b>
-          <slot></slot>
-          <slot name="header" slot="header"></slot>
-          <slot name="footer" slot="footer"></slot>
-        </test-b>
-      `;
-        }
-    }
-);
-
-customElements.define(
-    'test-b',
-    class extends HTMLElement {
-        connectedCallback() {
-            this.attachShadow({ mode: 'open' });
-            this.shadowRoot!.innerHTML = `
-        <slot></slot>
-        <slot name="header"></slot>
-        <slot name="footer"></slot>
-      `;
-        }
-    }
-);
-
-describe('isSlotAssigned', () => {
-    describe('false', () => {
-        it('test-a', () => {
-            let element = renderIntoBody(html` <test-a></test-a> `);
-            let slot = element.shadowRoot!.querySelector('slot')!;
-            expect(isSlotAssigned(slot)).toBe(false);
-        });
-        it('test-b', () => {
-            let element = renderIntoBody(html` <test-a></test-a> `);
-            let slot = element
-                .shadowRoot!.querySelector('test-b')!
-                .shadowRoot!.querySelector('slot')!;
-            expect(isSlotAssigned(slot)).toBe(false);
-        });
-    });
-    describe('true', () => {
-        it('test-a', () => {
-            let element = renderIntoBody(html`
-                <test-a>
-                    <h1>Hello</h1>
-                </test-a>
-            `);
-            let slot = element.shadowRoot!.querySelector('slot')!;
-            expect(isSlotAssigned(slot)).toBe(true);
-        });
-        it('test-b', () => {
-            let element = renderIntoBody(html`
-                <test-a>
-                    <h1>Hello</h1>
-                </test-a>
-            `);
-            let slot = element
-                .shadowRoot!.querySelector('test-b')!
-                .shadowRoot!.querySelector('slot')!;
-            expect(isSlotAssigned(slot)).toBe(true);
-        });
-    });
-});
-
-describe('assignedSlotNames', () => {
-    it('test-a', () => {
-        let element = renderIntoBody(html`
-            <test-a>
-                <h1>Hello</h1>
-                <header slot="header"></header>
-            </test-a>
-        `);
-        let shadowRoot = element.shadowRoot!;
-        expect(assignedSlotNames(shadowRoot)).toEqual(['default', 'header']);
-    });
-    it('test-b', () => {
-        let element = renderIntoBody(html`
-            <test-a>
-                <h1>Hello</h1>
-                <header slot="header"></header>
-            </test-a>
-        `);
-        let shadowRoot =
-            element.shadowRoot!.querySelector('test-b')!.shadowRoot!;
-        expect(assignedSlotNames(shadowRoot)).toEqual(['default', 'header']);
-    });
-});

package/src/modules/common/slot/slot.ts

@@ -1,20 +0,0 @@
-export function assignedSlotNames(template: {
-    querySelectorAll(selector: string): NodeList;
-}) {
-    let slots = Array.from(
-        template.querySelectorAll('slot')
-    ) as HTMLSlotElement[];
-    return slots
-        .filter(isSlotAssigned)
-        .map((slot) => slot.getAttribute('name') || 'default');
-}
-
-export function isSlotAssigned(slot: HTMLSlotElement): boolean {
-    let [element] = slot.assignedElements();
-    if (element) {
-        if (element.tagName === 'SLOT')
-            return isSlotAssigned(element as HTMLSlotElement);
-        return true;
-    }
-    return slot.children.length > 0;
-}

package/src/modules/sa/coverage/coverage.css

@@ -1,35 +0,0 @@
-@import 'tds/reset';
-
-:host {
-    font-size: var(--tds-font-size-md);
-}
-
-.coverage-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-
-.coverage-title {
-    display: inline-block;
-    margin-right: var(--tds-spacing-8);
-}
-
-.coverage-header h2 {
-    font-size: var(--tds-font-size-lg);
-}
-
-.chartContainer {
-    display: flex; 
-    justify-content: space-evenly; 
-    align-items: center; 
-    height: 350px;
-    margin-bottom: 80px;
-}
-
-.chartContainer div {
-    flex: 1; 
-    max-width: 50%; 
-    height: 100%;
-    text-align: center;
-}

package/src/modules/sa/coverage/coverage.html

@@ -1,15 +0,0 @@
-<template>
-    <div class="coverage-header">
-        <h2 class="coverage-title">Roadmap Coverage</h2>
-    </div>
-    <div class="chartContainer">
-        <div>
-            <p>Product Areas</p>
-            <canvas id="chartCanvas"></canvas>
-        </div>
-        <div>
-            <p>Feature Areas</p>
-            <canvas id="barCanvas"></canvas>
-        </div>
-    </div>
-</template>