@salesforce/afv-skills 1.8.0 → 1.9.0

package/skills/generating-lwc-components/assets/message-channel/lmsSubscriber.js

@@ -0,0 +1,181 @@
+/**
+ * LIGHTNING MESSAGE SERVICE - SUBSCRIBER TEMPLATE
+ *
+ * This component demonstrates subscribing to messages via LMS.
+ * The subscriber listens for messages published on a channel
+ * and reacts to them.
+ *
+ * Replace: lmsSubscriber → yourComponentName
+ */
+
+import { LightningElement, wire } from 'lwc';
+import {
+    subscribe,
+    unsubscribe,
+    APPLICATION_SCOPE,
+    MessageContext
+} from 'lightning/messageService';
+import RECORD_SELECTED_CHANNEL from '@salesforce/messageChannel/RecordSelected__c';
+
+export default class LmsSubscriber extends LightningElement {
+    // ═══════════════════════════════════════════════════════════════════════
+    // STATE
+    // ═══════════════════════════════════════════════════════════════════════
+
+    subscription = null;
+    receivedMessage = null;
+
+    // Store received data for display
+    selectedRecordId;
+    selectedRecordName;
+    sourceComponent;
+    timestamp;
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // MESSAGE CONTEXT
+    // ═══════════════════════════════════════════════════════════════════════
+
+    @wire(MessageContext)
+    messageContext;
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // LIFECYCLE HOOKS
+    // ═══════════════════════════════════════════════════════════════════════
+
+    /**
+     * Subscribe to the message channel when component connects
+     */
+    connectedCallback() {
+        this.subscribeToMessageChannel();
+    }
+
+    /**
+     * Unsubscribe when component disconnects to prevent memory leaks
+     */
+    disconnectedCallback() {
+        this.unsubscribeToMessageChannel();
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // SUBSCRIPTION MANAGEMENT
+    // ═══════════════════════════════════════════════════════════════════════
+
+    /**
+     * Subscribe to the message channel
+     *
+     * Options:
+     * - No scope: Only receive messages from same page
+     * - APPLICATION_SCOPE: Receive messages across the entire application
+     */
+    subscribeToMessageChannel() {
+        // Avoid duplicate subscriptions
+        if (this.subscription) {
+            return;
+        }
+
+        // Subscribe with APPLICATION_SCOPE to receive messages from anywhere
+        this.subscription = subscribe(
+            this.messageContext,
+            RECORD_SELECTED_CHANNEL,
+            (message) => this.handleMessage(message),
+            { scope: APPLICATION_SCOPE }
+        );
+
+        console.log('Subscribed to RecordSelected channel');
+    }
+
+    /**
+     * Unsubscribe from the message channel
+     */
+    unsubscribeToMessageChannel() {
+        if (this.subscription) {
+            unsubscribe(this.subscription);
+            this.subscription = null;
+            console.log('Unsubscribed from RecordSelected channel');
+        }
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // MESSAGE HANDLING
+    // ═══════════════════════════════════════════════════════════════════════
+
+    /**
+     * Handle incoming messages
+     * This is called whenever a message is published to the channel
+     */
+    handleMessage(message) {
+        console.log('Received message:', message);
+
+        // Store the raw message for debugging
+        this.receivedMessage = message;
+
+        // Extract fields from the message
+        this.selectedRecordId = message.recordId;
+        this.selectedRecordName = message.recordName;
+        this.sourceComponent = message.sourceComponent;
+        this.timestamp = message.timestamp;
+
+        // Handle complex payload if present
+        if (message.payload) {
+            try {
+                const additionalData = JSON.parse(message.payload);
+                this.handleAdditionalData(additionalData);
+            } catch (e) {
+                console.error('Failed to parse payload:', e);
+            }
+        }
+
+        // Ignore messages from self (optional)
+        if (message.sourceComponent === 'lmsSubscriber') {
+            console.log('Ignoring self-published message');
+            return;
+        }
+
+        // React to the message
+        this.onRecordSelected(message.recordId, message.recordName);
+    }
+
+    /**
+     * Handle additional data from complex payload
+     */
+    handleAdditionalData(data) {
+        console.log('Additional data:', data);
+        // Process additional data as needed
+    }
+
+    /**
+     * Custom logic when a record is selected
+     */
+    onRecordSelected(recordId, recordName) {
+        // Example: Refresh child component data
+        // Example: Update URL parameters
+        // Example: Fetch related records
+
+        console.log(`Record selected: ${recordName} (${recordId})`);
+
+        // Dispatch event for any parent components
+        this.dispatchEvent(new CustomEvent('recordchange', {
+            detail: {
+                recordId,
+                recordName
+            }
+        }));
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // GETTERS FOR TEMPLATE
+    // ═══════════════════════════════════════════════════════════════════════
+
+    get hasSelection() {
+        return !!this.selectedRecordId;
+    }
+
+    get formattedTimestamp() {
+        if (!this.timestamp) return '';
+        return new Date(this.timestamp).toLocaleString();
+    }
+
+    get debugInfo() {
+        return JSON.stringify(this.receivedMessage, null, 2);
+    }
+}

package/skills/generating-lwc-components/assets/modal-component/modalComponent.html

@@ -0,0 +1,85 @@
+<template>
+    <!-- Backdrop -->
+    <div class={backdropClass}></div>
+
+    <!-- Modal Container -->
+    <section
+        role="dialog"
+        tabindex="-1"
+        aria-modal="true"
+        aria-hidden={modalAriaHidden}
+        aria-labelledby="modal-heading"
+        aria-describedby="modal-content"
+        class={modalContainerClass}>
+
+        <div class="slds-modal__container outerModalContent" onclick={handleBackdropClick}>
+            <!-- Modal Content Box -->
+            <div class="slds-modal__content slds-p-around_medium" id="modal-content">
+
+                <!-- Header -->
+                <template lwc:if={showHeader}>
+                    <header class="slds-modal__header slds-p-bottom_medium">
+                        <lightning-button-icon
+                            class="slds-modal__close"
+                            icon-name="utility:close"
+                            alternative-text="Close"
+                            onclick={handleCancel}>
+                        </lightning-button-icon>
+
+                        <template lwc:if={modalHeader}>
+                            <h2 id="modal-heading" class="slds-text-heading_medium slds-hyphenate">
+                                {modalHeader}
+                            </h2>
+                        </template>
+
+                        <template lwc:if={modalTagline}>
+                            <p class="slds-m-top_x-small slds-text-color_weak">
+                                {modalTagline}
+                            </p>
+                        </template>
+                    </header>
+                </template>
+
+                <!-- Close button when no header -->
+                <template lwc:elseif={isOpen}>
+                    <lightning-button-icon
+                        class="slds-modal__close"
+                        icon-name="utility:close"
+                        alternative-text="Close"
+                        onclick={handleCancel}>
+                    </lightning-button-icon>
+                </template>
+
+                <!-- Slotted Body Content -->
+                <div class="slds-modal__body">
+                    <slot name="body"></slot>
+                </div>
+
+                <!-- Footer -->
+                <template lwc:if={!hideFooter}>
+                    <footer class="slds-modal__footer slds-p-top_medium">
+                        <slot name="footer">
+                            <!-- Default footer buttons -->
+                            <lightning-button
+                                label="Cancel"
+                                onclick={handleCancel}
+                                class="slds-m-right_x-small focusable">
+                            </lightning-button>
+                            <lightning-button
+                                variant="brand"
+                                label="Save"
+                                onclick={handleSave}
+                                class="focusable">
+                            </lightning-button>
+                        </slot>
+                    </footer>
+                </template>
+            </div>
+        </div>
+    </section>
+
+    <!-- Background content (hidden when modal is open) -->
+    <div aria-hidden={isOpen}>
+        <slot name="background"></slot>
+    </div>
+</template>

package/skills/generating-lwc-components/assets/modal-component/modalComponent.js

@@ -0,0 +1,199 @@
+/**
+ * Composable Modal Component Template
+ *
+ * Based on James Simone's composable modal pattern with:
+ * - Focus trap implementation
+ * - ESC key to close
+ * - Backdrop click to close
+ * - Slot-based composition
+ * - ARIA accessibility attributes
+ * - Proper cleanup on disconnect
+ *
+ * @see https://www.jamessimone.net/blog/joys-of-apex/lwc-composable-modal/
+ */
+import { LightningElement, api } from 'lwc';
+
+const OUTER_MODAL_CLASS = 'outerModalContent';
+const ESCAPE_KEY = 'Escape';
+const TAB_KEY = 'Tab';
+
+export default class ModalComponent extends LightningElement {
+    // Public API properties
+    @api modalHeader;
+    @api modalTagline;
+    @api modalSaveHandler;
+    @api hideFooter = false;
+    @api size = 'medium'; // small, medium, large
+
+    // Private state
+    _isOpen = false;
+    _focusableElements = [];
+    _boundHandleKeyUp;
+
+    constructor() {
+        super();
+        // Bind the handler once to ensure we can remove it later
+        this._boundHandleKeyUp = this._handleKeyUp.bind(this);
+    }
+
+    /**
+     * Public method to toggle modal visibility
+     * Called by parent component to open/close the modal
+     */
+    @api
+    toggleModal() {
+        this._isOpen = !this._isOpen;
+
+        if (this._isOpen) {
+            this._onOpen();
+        } else {
+            this._onClose();
+        }
+    }
+
+    /**
+     * Public method to explicitly open the modal
+     */
+    @api
+    open() {
+        if (!this._isOpen) {
+            this._isOpen = true;
+            this._onOpen();
+        }
+    }
+
+    /**
+     * Public method to explicitly close the modal
+     */
+    @api
+    close() {
+        if (this._isOpen) {
+            this._isOpen = false;
+            this._onClose();
+        }
+    }
+
+    // Computed properties for template
+    get isOpen() {
+        return this._isOpen;
+    }
+
+    get modalAriaHidden() {
+        return String(!this._isOpen);
+    }
+
+    get modalContainerClass() {
+        const sizeClass = this.size === 'large' ? 'slds-modal_large' :
+                          this.size === 'small' ? 'slds-modal_small' : '';
+        return this._isOpen
+            ? `slds-modal slds-fade-in-open ${sizeClass}`
+            : 'slds-modal slds-hidden';
+    }
+
+    get backdropClass() {
+        return this._isOpen
+            ? 'slds-backdrop slds-backdrop_open'
+            : 'slds-backdrop';
+    }
+
+    get showHeader() {
+        return this.modalHeader || this.modalTagline;
+    }
+
+    // Lifecycle hooks
+    disconnectedCallback() {
+        // Clean up window event listener to prevent memory leaks
+        window.removeEventListener('keyup', this._boundHandleKeyUp);
+    }
+
+    // Private methods
+    _onOpen() {
+        // Collect all focusable elements within the modal
+        // Elements must have the 'focusable' class
+        this._focusableElements = [
+            ...this.querySelectorAll('.focusable'),
+            ...this.template.querySelectorAll(
+                'lightning-button, lightning-button-icon, lightning-input, button, [tabindex="0"]'
+            )
+        ].filter(el => !el.disabled);
+
+        // Focus the first focusable element
+        this._focusFirstElement();
+
+        // Add window-level keyboard listener for ESC and Tab
+        window.addEventListener('keyup', this._boundHandleKeyUp);
+
+        // Dispatch open event
+        this.dispatchEvent(new CustomEvent('modalopen'));
+    }
+
+    _onClose() {
+        // Remove keyboard listener
+        window.removeEventListener('keyup', this._boundHandleKeyUp);
+
+        // Dispatch close event
+        this.dispatchEvent(new CustomEvent('modalclose'));
+    }
+
+    _handleKeyUp(event) {
+        if (event.code === ESCAPE_KEY || event.key === ESCAPE_KEY) {
+            this.close();
+        } else if (event.code === TAB_KEY || event.key === TAB_KEY) {
+            this._handleTabNavigation(event);
+        }
+    }
+
+    _handleTabNavigation(event) {
+        // Implement focus trap - keep focus within modal
+        if (this._focusableElements.length === 0) return;
+
+        const activeElement = this.template.activeElement || document.activeElement;
+        const lastIndex = this._focusableElements.length - 1;
+        const currentIndex = this._focusableElements.indexOf(activeElement);
+
+        if (event.shiftKey && currentIndex <= 0) {
+            // Shift+Tab on first element - wrap to last
+            event.preventDefault();
+            this._focusableElements[lastIndex]?.focus();
+        } else if (!event.shiftKey && currentIndex >= lastIndex) {
+            // Tab on last element - wrap to first
+            event.preventDefault();
+            this._focusFirstElement();
+        }
+    }
+
+    _focusFirstElement() {
+        // Small delay to ensure modal is fully rendered
+        // eslint-disable-next-line @lwc/lwc/no-async-operation
+        setTimeout(() => {
+            if (this._focusableElements.length > 0) {
+                this._focusableElements[0].focus();
+            }
+        }, 0);
+    }
+
+    // Event handlers
+    handleBackdropClick(event) {
+        // Close modal if clicking on the backdrop (outside modal content)
+        if (event.target.classList.contains(OUTER_MODAL_CLASS)) {
+            this.close();
+        }
+    }
+
+    handleCancel() {
+        this.close();
+    }
+
+    handleSave() {
+        // If a save handler was provided, call it
+        if (typeof this.modalSaveHandler === 'function') {
+            this.modalSaveHandler();
+        }
+
+        // Dispatch save event for parent components
+        this.dispatchEvent(new CustomEvent('modalsave'));
+
+        // Close the modal
+        this.close();
+    }
+}

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

@@ -0,0 +1,55 @@
+<template>
+    <div class="slds-form-element">
+        <!-- Record Picker -->
+        <lightning-record-picker
+            label={label}
+            placeholder={placeholder}
+            object-api-name={objectApiName}
+            display-info={displayInfo}
+            matching-info={matchingInfo}
+            filter={filter}
+            disabled={pickerDisabled}
+            required={required}
+            onchange={handleChange}>
+        </lightning-record-picker>
+
+        <!-- Multi-select Pills -->
+        <template lwc:if={showPills}>
+            <div class="slds-m-top_x-small">
+                <!-- Selection count -->
+                <div class="slds-text-body_small slds-text-color_weak slds-m-bottom_xx-small">
+                    {selectionCountMessage}
+                </div>
+
+                <!-- Pills container -->
+                <lightning-pill-container>
+                    <template for:each={_selectedRecords} for:item="record">
+                        <lightning-pill
+                            key={record.id}
+                            label={record.name}
+                            data-id={record.id}
+                            onremove={handleRemove}>
+                        </lightning-pill>
+                    </template>
+                </lightning-pill-container>
+
+                <!-- Clear All button -->
+                <template lwc:if={hasSelections}>
+                    <lightning-button
+                        label="Clear All"
+                        variant="base"
+                        class="slds-m-top_xx-small"
+                        onclick={handleClearAll}>
+                    </lightning-button>
+                </template>
+            </div>
+        </template>
+
+        <!-- Max selections warning -->
+        <template lwc:if={isMaxSelectionsReached}>
+            <div class="slds-text-color_weak slds-text-body_small slds-m-top_xx-small">
+                Maximum selections reached. Remove a selection to add more.
+            </div>
+        </template>
+    </div>
+</template>