@salesforce/afv-skills 1.8.0 → 1.9.0

package/skills/generating-lwc-components/assets/record-picker/recordPicker.js

@@ -0,0 +1,199 @@
+/**
+ * Enhanced Record Picker Component Template
+ *
+ * Wraps lightning-record-picker with additional features:
+ * - Single and multi-select modes
+ * - Display of selected records as pills
+ * - Custom display fields
+ * - Filter support
+ * - Validation support
+ *
+ * @see https://developer.salesforce.com/docs/component-library/bundle/lightning-record-picker
+ */
+import { LightningElement, api, track } from 'lwc';
+
+export default class RecordPicker extends LightningElement {
+    // Public API - Configuration
+    @api label = 'Select Record';
+    @api objectApiName = 'Account';
+    @api placeholder = 'Search...';
+    @api required = false;
+    @api disabled = false;
+    @api multiSelect = false;
+    @api maxSelections = 10;
+
+    // Public API - Display configuration
+    @api displayInfo = {
+        primaryField: 'Name',
+        additionalFields: []
+    };
+
+    // Public API - Matching configuration
+    @api matchingInfo = {
+        primaryField: { fieldPath: 'Name' },
+        additionalFields: []
+    };
+
+    // Public API - Filter (optional)
+    @api filter;
+
+    // Private state
+    @track _selectedRecords = [];
+    _messageWhenBadInput = 'Please select a valid record';
+
+    /**
+     * Get the selected value(s)
+     * Returns single ID for single-select, array for multi-select
+     */
+    @api
+    get value() {
+        if (this.multiSelect) {
+            return this._selectedRecords.map(r => r.id);
+        }
+        return this._selectedRecords.length > 0 ? this._selectedRecords[0].id : null;
+    }
+
+    /**
+     * Set the selected value(s)
+     * Accepts single ID or array of IDs
+     */
+    set value(val) {
+        if (val === null || val === undefined) {
+            this._selectedRecords = [];
+            return;
+        }
+
+        if (Array.isArray(val)) {
+            // For arrays, create placeholder records (names will be fetched)
+            this._selectedRecords = val.map(id => ({ id, name: id }));
+        } else {
+            this._selectedRecords = [{ id: val, name: val }];
+        }
+    }
+
+    /**
+     * Get array of selected record IDs
+     */
+    @api
+    get selectedIds() {
+        return this._selectedRecords.map(r => r.id);
+    }
+
+    /**
+     * Check validity
+     */
+    @api
+    checkValidity() {
+        if (this.required && this._selectedRecords.length === 0) {
+            return false;
+        }
+        return true;
+    }
+
+    /**
+     * Report validity with error message
+     */
+    @api
+    reportValidity() {
+        const isValid = this.checkValidity();
+        const picker = this.template.querySelector('lightning-record-picker');
+        if (picker && !isValid) {
+            picker.setCustomValidity(this._messageWhenBadInput);
+            picker.reportValidity();
+        }
+        return isValid;
+    }
+
+    /**
+     * Clear all selections
+     */
+    @api
+    clear() {
+        this._selectedRecords = [];
+        const picker = this.template.querySelector('lightning-record-picker');
+        if (picker) {
+            picker.clearSelection();
+        }
+        this._dispatchChangeEvent();
+    }
+
+    // Computed properties
+    get hasSelections() {
+        return this._selectedRecords.length > 0;
+    }
+
+    get showPills() {
+        return this.multiSelect && this.hasSelections;
+    }
+
+    get isMaxSelectionsReached() {
+        return this.multiSelect && this._selectedRecords.length >= this.maxSelections;
+    }
+
+    get pickerDisabled() {
+        return this.disabled || this.isMaxSelectionsReached;
+    }
+
+    get selectionCountMessage() {
+        if (!this.multiSelect) return '';
+        return `${this._selectedRecords.length} of ${this.maxSelections} selected`;
+    }
+
+    // Event handlers
+    handleChange(event) {
+        const recordId = event.detail.recordId;
+
+        if (!recordId) {
+            // Selection cleared
+            if (!this.multiSelect) {
+                this._selectedRecords = [];
+            }
+        } else {
+            // New selection made
+            const recordName = event.detail.recordName || recordId;
+
+            if (this.multiSelect) {
+                // Add to selections if not already present
+                if (!this._selectedRecords.some(r => r.id === recordId)) {
+                    this._selectedRecords = [
+                        ...this._selectedRecords,
+                        { id: recordId, name: recordName }
+                    ];
+
+                    // Clear the picker for next selection
+                    const picker = this.template.querySelector('lightning-record-picker');
+                    if (picker) {
+                        // Small delay to allow event to complete
+                        // eslint-disable-next-line @lwc/lwc/no-async-operation
+                        setTimeout(() => picker.clearSelection(), 0);
+                    }
+                }
+            } else {
+                // Single select - replace selection
+                this._selectedRecords = [{ id: recordId, name: recordName }];
+            }
+        }
+
+        this._dispatchChangeEvent();
+    }
+
+    handleRemove(event) {
+        const idToRemove = event.target.dataset.id;
+        this._selectedRecords = this._selectedRecords.filter(r => r.id !== idToRemove);
+        this._dispatchChangeEvent();
+    }
+
+    handleClearAll() {
+        this.clear();
+    }
+
+    _dispatchChangeEvent() {
+        this.dispatchEvent(new CustomEvent('change', {
+            detail: {
+                value: this.value,
+                selectedIds: this.selectedIds,
+                selectedRecords: [...this._selectedRecords]
+            }
+        }));
+    }
+}

package/skills/generating-lwc-components/assets/state-store/store.js

@@ -0,0 +1,282 @@
+/**
+ * STATE STORE TEMPLATE
+ *
+ * Singleton store for cross-component state management in LWC.
+ * Provides reactive state with subscription-based updates.
+ *
+ * Features:
+ * - Cross-component state sharing
+ * - Subscription-based reactivity
+ * - Automatic cleanup utilities
+ * - Debug mode for development
+ *
+ * Usage:
+ * import store from 'c/store';
+ *
+ * // In connectedCallback:
+ * this.cart = store.initState('cart', { items: [], total: 0 });
+ * this._unsubscribe = store.subscribe('cart', (cart) => { this.cart = cart; });
+ *
+ * // In disconnectedCallback:
+ * if (this._unsubscribe) this._unsubscribe();
+ *
+ * // Update state anywhere:
+ * store.setState('cart', { ...store.getState('cart'), items: [...items, newItem] });
+ */
+
+// ═══════════════════════════════════════════════════════════════════════════
+// CONFIGURATION
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Enable debug mode for state change logging.
+ * Set to false in production.
+ */
+const DEBUG_MODE = false;
+
+// ═══════════════════════════════════════════════════════════════════════════
+// PRIVATE STATE
+// ═══════════════════════════════════════════════════════════════════════════
+
+/** @type {Map<string, any>} State container */
+const state = new Map();
+
+/** @type {Map<string, Array<Function>>} Subscribers by key */
+const subscribers = new Map();
+
+/** @type {Map<string, any>} Initial values for reset */
+const initialValues = new Map();
+
+// ═══════════════════════════════════════════════════════════════════════════
+// CORE API
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Get current state for a key.
+ *
+ * @param {string} key - State key
+ * @returns {any} Current state value, or undefined if not set
+ *
+ * @example
+ * const cart = store.getState('cart');
+ */
+function getState(key) {
+    return state.get(key);
+}
+
+/**
+ * Set state and notify all subscribers.
+ *
+ * @param {string} key - State key
+ * @param {any} value - New state value
+ *
+ * @example
+ * store.setState('cart', { items: [...cart.items, newItem], total: newTotal });
+ */
+function setState(key, value) {
+    const oldValue = state.get(key);
+    state.set(key, value);
+
+    if (DEBUG_MODE) {
+        console.log(`[Store] ${key} updated:`, { old: oldValue, new: value });
+    }
+
+    // Notify all subscribers for this key
+    const keySubscribers = subscribers.get(key) || [];
+    keySubscribers.forEach(callback => {
+        try {
+            callback(value, oldValue);
+        } catch (e) {
+            console.error(`[Store] Subscriber error for "${key}":`, e);
+        }
+    });
+}
+
+/**
+ * Subscribe to state changes for a key.
+ *
+ * @param {string} key - State key to watch
+ * @param {Function} callback - Called with (newValue, oldValue) on change
+ * @returns {Function} Unsubscribe function - MUST be called in disconnectedCallback
+ *
+ * @example
+ * // In connectedCallback:
+ * this._unsubscribe = store.subscribe('cart', (cart) => {
+ *     this.cart = cart;
+ * });
+ *
+ * // In disconnectedCallback:
+ * if (this._unsubscribe) this._unsubscribe();
+ */
+function subscribe(key, callback) {
+    if (!subscribers.has(key)) {
+        subscribers.set(key, []);
+    }
+    subscribers.get(key).push(callback);
+
+    if (DEBUG_MODE) {
+        console.log(`[Store] Subscribed to "${key}", total: ${subscribers.get(key).length}`);
+    }
+
+    // Return unsubscribe function
+    return () => {
+        const keySubscribers = subscribers.get(key) || [];
+        const index = keySubscribers.indexOf(callback);
+        if (index > -1) {
+            keySubscribers.splice(index, 1);
+            if (DEBUG_MODE) {
+                console.log(`[Store] Unsubscribed from "${key}", remaining: ${keySubscribers.length}`);
+            }
+        }
+    };
+}
+
+/**
+ * Initialize state with a default value if not already set.
+ *
+ * @param {string} key - State key
+ * @param {any} defaultValue - Default value if key doesn't exist
+ * @returns {any} Current state value (existing or newly set default)
+ *
+ * @example
+ * // Safe initialization - won't overwrite existing state
+ * const cart = store.initState('cart', { items: [], total: 0 });
+ */
+function initState(key, defaultValue) {
+    if (!state.has(key)) {
+        state.set(key, defaultValue);
+        initialValues.set(key, JSON.parse(JSON.stringify(defaultValue)));
+    }
+    return state.get(key);
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// UTILITY METHODS
+// ═══════════════════════════════════════════════════════════════════════════
+
+/**
+ * Reset a state key to its initial value.
+ *
+ * @param {string} key - State key to reset
+ *
+ * @example
+ * store.resetState('cart'); // Resets to initial { items: [], total: 0 }
+ */
+function resetState(key) {
+    if (initialValues.has(key)) {
+        const initial = JSON.parse(JSON.stringify(initialValues.get(key)));
+        setState(key, initial);
+    }
+}
+
+/**
+ * Clear all state (useful for testing or logout).
+ */
+function clearAll() {
+    state.clear();
+    subscribers.clear();
+    initialValues.clear();
+
+    if (DEBUG_MODE) {
+        console.log('[Store] All state cleared');
+    }
+}
+
+/**
+ * Get all current state keys.
+ *
+ * @returns {Array<string>} Array of state keys
+ */
+function getKeys() {
+    return Array.from(state.keys());
+}
+
+/**
+ * Check if a state key exists.
+ *
+ * @param {string} key - State key
+ * @returns {boolean} True if key exists
+ */
+function hasState(key) {
+    return state.has(key);
+}
+
+/**
+ * Get subscriber count for a key (useful for debugging).
+ *
+ * @param {string} key - State key
+ * @returns {number} Number of active subscribers
+ */
+function getSubscriberCount(key) {
+    return (subscribers.get(key) || []).length;
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// BATCH UPDATES
+// ═══════════════════════════════════════════════════════════════════════════
+
+let batchUpdates = [];
+let isBatching = false;
+
+/**
+ * Batch multiple state updates to reduce re-renders.
+ *
+ * @param {Function} updateFn - Function containing multiple setState calls
+ *
+ * @example
+ * store.batch(() => {
+ *     store.setState('user', newUser);
+ *     store.setState('preferences', newPrefs);
+ *     store.setState('cart', newCart);
+ * }); // Subscribers notified once after all updates
+ */
+function batch(updateFn) {
+    isBatching = true;
+    batchUpdates = [];
+
+    try {
+        updateFn();
+    } finally {
+        isBatching = false;
+
+        // Notify subscribers for all changed keys
+        const changedKeys = new Set(batchUpdates.map(u => u.key));
+        changedKeys.forEach(key => {
+            const lastUpdate = batchUpdates.filter(u => u.key === key).pop();
+            if (lastUpdate) {
+                const keySubscribers = subscribers.get(key) || [];
+                keySubscribers.forEach(callback => {
+                    try {
+                        callback(lastUpdate.value, lastUpdate.oldValue);
+                    } catch (e) {
+                        console.error(`[Store] Batch subscriber error for "${key}":`, e);
+                    }
+                });
+            }
+        });
+
+        batchUpdates = [];
+    }
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// EXPORTS
+// ═══════════════════════════════════════════════════════════════════════════
+
+export default {
+    // Core API
+    getState,
+    setState,
+    subscribe,
+    initState,
+
+    // Utilities
+    resetState,
+    clearAll,
+    getKeys,
+    hasState,
+    getSubscriberCount,
+
+    // Batch operations
+    batch
+};

package/skills/generating-lwc-components/assets/typescript-component/typescriptComponent.css

@@ -0,0 +1,65 @@
+/**
+ * TypeScript Component Styles
+ *
+ * Uses SLDS 2 global styling hooks for dark mode compatibility.
+ * All colors are CSS variables - no hardcoded values.
+ */
+
+/* Container styling */
+:host {
+    display: block;
+}
+
+/* List item hover effect */
+.slds-item {
+    transition: background-color 0.15s ease-in-out;
+    border-radius: var(--slds-g-radius-border-2, 0.25rem);
+}
+
+.slds-item:hover {
+    background-color: var(--slds-g-color-surface-container-1, #f3f3f3);
+}
+
+/* Link reset enhancement */
+.slds-text-link_reset:hover {
+    text-decoration: none;
+}
+
+/* Selected state */
+.slds-item.is-selected {
+    background-color: var(--slds-g-color-brand-1, #0176d3);
+    color: var(--slds-g-color-on-brand, #ffffff);
+}
+
+/* Revenue formatting */
+.revenue-positive {
+    color: var(--slds-g-color-success-1, #2e844a);
+}
+
+.revenue-negative {
+    color: var(--slds-g-color-error-1, #ba0517);
+}
+
+/* Loading overlay */
+.loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--slds-g-color-surface-1, rgba(255, 255, 255, 0.8));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+}
+
+/* Description list styling */
+.slds-list_horizontal dt {
+    min-width: 5rem;
+}
+
+/* Empty state icon */
+.empty-state-icon {
+    color: var(--slds-g-color-on-surface-2, #706e6b);
+}

package/skills/generating-lwc-components/assets/typescript-component/typescriptComponent.html

@@ -0,0 +1,95 @@
+<template>
+    <lightning-card title="TypeScript Component" icon-name="standard:account">
+        <!-- Loading State -->
+        <template lwc:if={isLoading}>
+            <div class="slds-p-around_medium slds-align_absolute-center">
+                <lightning-spinner alternative-text="Loading..." size="medium"></lightning-spinner>
+            </div>
+        </template>
+
+        <!-- Error State -->
+        <template lwc:elseif={hasError}>
+            <div class="slds-p-around_medium">
+                <div class="slds-notify slds-notify_alert slds-alert_error" role="alert">
+                    <span class="slds-assistive-text">Error</span>
+                    <lightning-icon icon-name="utility:error" alternative-text="Error" size="small"></lightning-icon>
+                    <span class="slds-m-left_small">{errorMessage}</span>
+                </div>
+            </div>
+        </template>
+
+        <!-- Content -->
+        <template lwc:else>
+            <!-- Account List -->
+            <template lwc:if={hasAccounts}>
+                <ul class="slds-has-dividers_bottom-space slds-p-horizontal_medium">
+                    <template for:each={accounts} for:item="account">
+                        <li key={account.Id} class="slds-item slds-p-vertical_small">
+                            <a
+                                href="#"
+                                data-id={account.Id}
+                                onclick={handleAccountSelect}
+                                class="slds-text-link_reset">
+                                <div class="slds-grid slds-grid_vertical-align-center">
+                                    <div class="slds-col slds-grow">
+                                        <span class="slds-text-heading_small">{account.Name}</span>
+                                        <template lwc:if={account.Industry}>
+                                            <span class="slds-text-body_small slds-text-color_weak slds-m-left_small">
+                                                {account.Industry}
+                                            </span>
+                                        </template>
+                                    </div>
+                                    <div class="slds-col slds-shrink">
+                                        <lightning-icon
+                                            icon-name="utility:chevronright"
+                                            size="x-small"
+                                            alternative-text="View">
+                                        </lightning-icon>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                    </template>
+                </ul>
+            </template>
+
+            <!-- Empty State -->
+            <template lwc:else>
+                <div class="slds-p-around_medium slds-text-align_center">
+                    <lightning-icon
+                        icon-name="utility:info"
+                        alternative-text="Info"
+                        size="large"
+                        class="slds-m-bottom_small">
+                    </lightning-icon>
+                    <p class="slds-text-color_weak">No accounts found</p>
+                </div>
+            </template>
+
+            <!-- Selected Account Details -->
+            <template lwc:if={_selectedAccount}>
+                <div class="slds-box slds-m-around_medium slds-theme_shade">
+                    <h3 class="slds-text-heading_small slds-m-bottom_small">
+                        Selected Account
+                    </h3>
+                    <dl class="slds-list_horizontal slds-wrap">
+                        <dt class="slds-item_label slds-text-color_weak">Name:</dt>
+                        <dd class="slds-item_detail">{selectedAccountName}</dd>
+                        <dt class="slds-item_label slds-text-color_weak">Revenue:</dt>
+                        <dd class="slds-item_detail">{formattedRevenue}</dd>
+                    </dl>
+                </div>
+            </template>
+        </template>
+
+        <!-- Footer Actions -->
+        <div slot="footer">
+            <lightning-button
+                label="Refresh"
+                icon-name="utility:refresh"
+                onclick={handleRefresh}
+                disabled={isLoading}>
+            </lightning-button>
+        </div>
+    </lightning-card>
+</template>