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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/arch-components",
-    "version": "1.20.17-alpha1",
+    "version": "1.20.17-alpha10",
     "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 → common}/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 → common}/effectAdapter/effectAdapter.ts

@@ -4,7 +4,7 @@ export type EffectAdapterConfig<T> = {};
 
 export class EffectAdapter<T>
     implements
-        WireAdapter<EffectAdapterConfig<T>, Record<string, any>>
+        WireAdapter<EffectAdapterConfig<T>, EffectAdapterConfig<T>, void>
 {
     constructor(private setValue: (value: EffectAdapterConfig<T>) => void) {}
 

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>

package/src/modules/sa/coverage/coverage.ts

@@ -1,406 +0,0 @@
-import { LightningElement, api, track } from 'lwc';
-import { ProductArea, FeatureArea, RoadmapFeature } from './types';
-
-export default class coverage extends LightningElement {
-
-    // get the inputs from the config
-    _portfolio: any;
-    _covered: any;
-    _selected: any;
-
-    // hold the coverage data
-    portfolioData: ProductArea[] = [];
-    roadmapData: RoadmapFeature[] = [];
-    totalProductAreas: number = 0;
-    totalFeatureAreas: number = 0;
-    paCoverageCount: number = 0;
-    faCoverageCount: number = 0;
-    paCoveragePct: number = 0;
-    faCoveragePct: number = 0;
-
-    // used to check if the chartjs script loaded
-    scriptLoaded = false;
-
-    // holds the chartjs components 
-    donutChart: any;
-    barChart: any;
-    @track productAreaTitle: string = '';
-    @track featureAreaTitle: string = '';
-
-    // chart settings
-    xlightCloudBlue: string = '#eaf5fe';
-    lightCloudBlue: string = '#90d0fe';
-    medCloudBlue: string = '#0d9dda';
-    inactiveBg: string = '#dbdbdb';
-    inactiveHover: string = '#d3d3d3';
-    selectedPA: ProductArea | undefined;
-
-    constructor() {
-        super();
-    }
-
-    /// this function fires when a component is inserted into the DOM
-    /// we use this function to collect initial data and set up the page:
-    /// gets product and feature json data
-    /// gets roadmap feature data
-    /// adds the chartjs library 
-    async connectedCallback() {
-        
-    }
-
-    setupCharts() {
-        if (this._covered && this._portfolio) {
-            try {
-                
-                this.portfolioData = [...this._portfolio] as ProductArea[];
-                this.portfolioData.sort((a, b) => a.name.localeCompare(b.name));
-                this.roadmapData = [...this._covered] as RoadmapFeature[];
-    
-                this.totalProductAreas = this.portfolioData.length;
-                this.totalFeatureAreas = this.portfolioData.reduce((total, productArea) => {
-                    return total + productArea.feature_areas.length;
-                }, 0);
-
-                // now update the coverage values in the portfolio data
-                this.paCoverageCount = this.portfolioData.filter(pa => pa.covered == true).length;
-                this.paCoveragePct = this.paCoverageCount / this.totalProductAreas * 100;
-    
-                // add the chartsjs library to the dom
-                var script = document.createElement('script');
-                script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
-                document.head.appendChild(script);
-                script.onload = () => {
-                    this.scriptLoaded = true;
-                    this.registerCenterLabelPlugin();
-                    this.initializeProductAreaChart();
-                    this.initializeFeatureAreaChart();
-                    this.updateSelectedProductArea(this.donutChart);
-                };
-                
-            } catch (error: any) {
-                console.error("An error occurred getting the portfolio data:", error?.message || String(error));
-            }
-        }
-    }
-
-    /// set up the donut chart for product areas
-    initializeProductAreaChart() {
-
-        // Data for the donut chart
-        const dataDonut = {
-            labels: this.portfolioData.map(area => area.name),
-            datasets: [{
-                data: Array.from({ length: this.totalProductAreas }, () => 100/this.totalProductAreas),
-                backgroundColor: this.portfolioData.map(area => area.covered ? area.colors.light : this.inactiveBg),
-                hoverBackgroundColor: this.portfolioData.map(area => area.covered ? area.colors.xlight : this.inactiveHover),
-                hoverOffset: 10,
-                cutout: "25%"
-            }]
-        };
-
-        // options for donut chart
-        const optionsDonut = {
-            responsive: true,
-            maintainAspectRatio: false,
-            autoPadding: false,
-            hover: false,
-            layout: {
-                padding: {
-                    bottom: 15
-                }
-            },
-            plugins: {
-                legend: {
-                    display: true,
-                    position: "left",
-                    onClick: () => {}
-                },
-                title: {
-                    display: false,
-                    anchor: 'center',
-                    clamp: true,
-                    align: 'center',
-                    fullSize: true,
-                    font: {
-                        family: "Salesforce Sans",
-                        size: 15,
-                        weight: 'normal'
-                    } 
-                },
-                tooltip: {
-                    enabled: true,
-                    label: {
-                        display: false
-                    },
-                    callbacks: {
-                        title: function(context: any) {
-                            return context.label;
-                        },
-                        label: function(context: any) {
-                            return '';
-                        }
-                    }
-                }
-            }
-        };
-        
-        // config for donut
-        const configDonut = {
-            type: 'doughnut',
-            data: dataDonut,
-            options: optionsDonut
-        };
-
-        // Create the Donut chart
-        const chartCanvas = this.template.querySelector("#chartCanvas") as HTMLCanvasElement;
-        if (chartCanvas) {
-            this.donutChart = new (window as any).Chart(chartCanvas, configDonut);
-        } 
-    }
-
-    // set up the plugin to place the % at the center of the donut
-    registerCenterLabelPlugin() {
-        (window as any).Chart.register({
-            id: 'center-label',
-            afterDatasetsDraw: function(chart: any) {
-                if (chart.config.type == 'doughnut') {
-                    var text = chart.config.options.plugins.title.text;
-                    const ctx = chart.ctx;
-                    ctx.save();
-                    const x = chart.getDatasetMeta(0).data[0].x;
-                    const y = chart.getDatasetMeta(0).data[0].y;
-                    ctx.textAlign = 'center';
-                    ctx.textBaseline = 'middle';
-                    ctx.font = '18px Salesforce Sans';
-                    ctx.fillText(text, x, y); 
-                }
-            }
-        });
-    }
-
-    // build the datasets for the bar chart when All Product Areas is selected
-    getFeatureAreaChartForEntirePortfolio() {
-        return {
-            labels: this.portfolioData.map(pa => pa.name),     
-            datasets: [{
-                data: this.portfolioData.map(pa => pa.feature_area_coverage),
-                backgroundColor: this.portfolioData.map(pa => (pa.covered) ? pa.colors.light : this.inactiveBg)
-            }]            
-        }; 
-    }
-
-    // build the datasets for the bar chart when one Prod Area is selected
-    getFeatureAreaChartForSelectedProductArea() {
-        if (!this.selectedPA) {
-            return this.getFeatureAreaChartForEntirePortfolio();
-        }
-
-        let dataVal = 100/this.selectedPA.feature_areas.length;
-        return {
-            labels: [`${this.selectedPA.feature_areas_covered} of ${this.selectedPA.feature_areas.length}`],     
-            datasets: this.selectedPA.feature_areas.map(fa => ({
-                data: [dataVal],
-                label: fa.name,
-                backgroundColor: (fa.covered) ? this.selectedPA!.colors.light : this.inactiveBg,
-                borderWidth: 2,
-                borderColor: 'white'
-            }))
-       };
-    }
-
-    // set up the bar chart for feature area coverage
-    initializeFeatureAreaChart() {
-
-        // options for feature bar
-        const optionsBar = {
-            indexAxis: 'y',
-            hover: false,
-            scales: {
-                x: {
-                    display: true,
-                    begingAtZero: true,
-                    min: 0,
-                    max: 100,
-                    stacked: true,
-                    ticks: {
-                        // forces step size to be 50 units
-                        stepSize: 25,
-                        callback: function (value: any) {
-                            return value + '%'; // Appending '%' to the tick value
-                        }
-                    }
-                },
-                y: {
-                    stacked: true,
-                    display: true,
-                    begingAtZero: true,
-                    grouped: false
-                }
-            },
-            plugins: {
-                legend: {
-                    display: false
-                },
-                title: {
-                    display: false,
-                    text: `${this.faCoveragePct.toFixed(0)}% of all feature areas are in this roadmap`,
-                    fullSize: true,
-                    align: 'end',
-                    font: {
-                        family: "Salesforce Sans",
-                        size: 16,
-                        weight: 'normal'
-                    } 
-                }
-                ,tooltip: {
-                    enabled: true,
-                    label: {
-                        display: false
-                    },
-                    callbacks: {
-                        title: function(context: any) {
-                            if (context[0].label.includes(' of ')){
-                                return context[0].dataset.label;
-                            } else {
-                                return context.label;
-                            }
-                        },
-                        label: function(context: any) {
-                            if (context.dataset.label) {
-                                return ''; 
-                            } else {
-                                return `${context.formattedValue}%`;
-                            }
-                        }
-                    }
-                }
-            }
-        };
-
-        // config for features bar
-        const configBar = {
-            type: 'bar',
-            data: this.getFeatureAreaChartForEntirePortfolio(),
-            options: optionsBar
-        };
-
-        const barCanvas = this.template.querySelector("#barCanvas") as HTMLCanvasElement;
-        if (barCanvas) {
-            this.featureAreaTitle = `${this.faCoveragePct.toFixed(0)}% of all feature areas are in this roadmap`;
-            this.barChart = new (window as any).Chart(barCanvas, configBar);
-        }
-
-    }
-
-    // handle product area selection change event
-    updateSelectedProductArea(chart: any) {
-
-        // reset the Donut chart
-        if (chart.getActiveElements().length > 0) {
-            chart.setActiveElements([]);
-            chart.tooltip.setActiveElements([]);
-        }
-
-        // now lets mimic a hover based on the selected product area
-        // first get the selected product area
-        let selectedIndex = -1;
-        selectedIndex = chart.config.data.labels.indexOf(this._selected) as number;
-
-        // check if there is a selection
-        if (selectedIndex != -1) {      
-            // hide the center value
-            chart.config.options.plugins.title.text = '';
-
-            // now lets set the active settings on the selected prod area
-            this.selectedPA = this.portfolioData.find(area => area.name === this._selected);
-            if (this.selectedPA) {
-
-                // update the non active items 
-                chart.config.data.datasets[0].backgroundColor = this.portfolioData.map(area => area.covered ? area.colors.xlight : this.inactiveBg);
-                chart.config.data.datasets[0].backgroundColor[selectedIndex] = this.selectedPA.colors.light;   
-                chart.legend.legendItems[selectedIndex].fillStyle = this.selectedPA.colors.light;
-
-                // update the selected offset and tooltip
-                chart.setActiveElements([
-                    { 
-                        datasetIndex: 0, 
-                        index: selectedIndex 
-                    }
-                ]);
-                chart.tooltip.setActiveElements([
-                    { 
-                        datasetIndex: 0, 
-                        index: selectedIndex 
-                    }
-                ]);
-            }
-
-        } else {
-            // show the center value
-            chart.config.options.plugins.title.text = `${this.paCoveragePct.toFixed(0)}%`;
-            // update the all the items to active 
-            chart.config.data.datasets[0].backgroundColor = this.portfolioData.map(area => area.covered ? area.colors.light : this.inactiveBg);
-        }
-
-        // now update the donut chart and the bar chart
-        chart.update(); 
-        this.updateSelectedFeatureArea(this.barChart);
-    }
-
-    // update the bar chart when product area selection changes
-    updateSelectedFeatureArea(chart: any) {
-
-        // reset the chart
-        if (chart.getActiveElements().length > 0) {
-            chart.setActiveElements([]);
-            chart.tooltip.setActiveElements([]);
-        }  
-        
-        // check if there is a product area selected
-        if (this.selectedPA && this._selected != '') { 
-            chart.config.data = this.getFeatureAreaChartForSelectedProductArea();
-        } else {
-            chart.config.data = this.getFeatureAreaChartForEntirePortfolio();
-        }
-
-        // always update the bar
-        chart.update();
-        
-    }
-
-    /// Below is the getters and setters for inputs
-    @api
-    set portfolio(value: any) {
-        if(this._portfolio !== value && value.length > 0) {
-            this._portfolio = [...value];
-            this.setupCharts();
-        }
-    }
-    get portfolio() {
-        return this._portfolio;
-    }
-
-    @api
-    set covered(value: any) {
-        if(this._covered !== value && value.length > 0) {
-            this._covered = [...value];
-            this.setupCharts();
-        }
-    }
-    get covered() {
-        return this._covered;
-    }
-
-    @api
-    set selected(value: any) {
-        if(this._selected !== value) {
-            this._selected = value;
-            if (this.scriptLoaded) {
-                this.updateSelectedProductArea(this.donutChart);
-            }     
-        }
-    }
-    get selected() {
-        return this._selected;
-    }
-}

package/src/modules/sa/coverage/types.d.ts

@@ -1,26 +0,0 @@
-export type ProductArea = {
-    name: string;
-    colors: Colors;
-    covered: boolean;
-    feature_areas_covered: number;
-    feature_area_coverage: number;
-    feature_areas: FeatureArea[];
-};
-
-export type FeatureArea = {
-    name: string;
-    covered: boolean;
-    productArea: string;
-    activeColor: string;
-    inactiveColor: string;
-    features: string[];
-}
-
-export type Colors = {
-    xlight: string;
-    light: string;
-}
-
-export type RoadmapFeature = {
-    [key: string]: any;
-};

package/src/modules/sa/expandableSection/expandableSection.css

@@ -1,24 +0,0 @@
-@import 'tds/reset';
-
-.section-title {
-    display: flex;
-    align-items: center;
-}
-
-.section-content {
-    display: none;
-}
-
-.is-open .section-content {
-    padding-top: 0.5rem;
-    display: block;
-}
-
-.icon {
-    transform: rotate(-90deg);
-    transition: transform 300ms;
-}
-
-.is-open .icon {
-    transform: rotate(0deg);
-}

package/src/modules/sa/expandableSection/expandableSection.html

@@ -1,20 +0,0 @@
-<template>
-    <div class={sectionClass}>
-        <h3 class="section-title">
-            <tds-button-icon
-                size="small"
-                aria-label="Expand/Collapse"
-                variant="bare"
-                aria-controls="expand"
-                aria-expanded={_isOpen}
-                onclick={handleExpandClick}
-            >
-                <tds-icon class="icon" size="small" symbol="switch"></tds-icon>
-            </tds-button-icon>
-            <slot name="title"></slot>
-        </h3>
-        <div aria-hidden={isClosed} class="section-content" id="expand">
-            <slot></slot>
-        </div>
-    </div>
-</template>