@salesforce/afv-skills 1.7.5 → 1.9.0

package/skills/generating-lwc-components/assets/basic-component/basicComponent.css

@@ -0,0 +1,72 @@
+/**
+ * BASIC LWC COMPONENT TEMPLATE - CSS
+ *
+ * CSS in LWC is automatically scoped to the component.
+ * Use SLDS (Salesforce Lightning Design System) classes when possible.
+ *
+ * CSS Custom Properties (variables) can be exposed for theming.
+ */
+
+/* Host element styling */
+:host {
+    display: block;
+}
+
+/* Custom properties for theming */
+:host {
+    --card-background: var(--lwc-colorBackground, #ffffff);
+    --card-border-radius: var(--lwc-borderRadiusMedium, 0.25rem);
+    --item-hover-background: var(--lwc-colorBackgroundRowHover, #f3f3f3);
+}
+
+/* List item hover effect */
+.slds-item:hover {
+    background-color: var(--item-hover-background);
+    cursor: pointer;
+}
+
+/* Smooth transitions */
+.slds-tile {
+    transition: background-color 0.2s ease;
+}
+
+/* Loading state fade */
+.slds-spinner {
+    opacity: 0.8;
+}
+
+/* Error state styling */
+.slds-alert_error {
+    border-radius: var(--card-border-radius);
+}
+
+/* Empty state styling */
+.empty-state {
+    padding: 2rem;
+    text-align: center;
+}
+
+/* Responsive adjustments */
+@media (max-width: 480px) {
+    .slds-tile__detail {
+        padding: 0.5rem;
+    }
+
+    .slds-text-heading_small {
+        font-size: 0.875rem;
+    }
+}
+
+/* Focus states for accessibility */
+a:focus {
+    outline: 2px solid var(--lwc-colorBorderBrand, #1589ee);
+    outline-offset: 2px;
+    border-radius: 0.25rem;
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .slds-item:hover {
+        background-color: highlight;
+    }
+}

package/skills/generating-lwc-components/assets/basic-component/basicComponent.html

@@ -0,0 +1,111 @@
+<!--
+    BASIC LWC COMPONENT TEMPLATE - HTML
+
+    Template demonstrates:
+    - Conditional rendering (lwc:if / lwc:elseif / lwc:else)
+    - Iteration (for:each)
+    - Event binding (onclick)
+    - Data binding ({property})
+    - Slots for composition
+-->
+<template>
+    <lightning-card title={cardTitle} icon-name="standard:record">
+        <!-- Card Actions Slot -->
+        <lightning-button-icon
+            slot="actions"
+            icon-name="utility:refresh"
+            alternative-text="Refresh"
+            onclick={handleRefresh}>
+        </lightning-button-icon>
+
+        <!-- Loading State -->
+        <template lwc:if={isLoading}>
+            <div class="slds-p-around_medium slds-align_absolute-center">
+                <lightning-spinner
+                    alternative-text="Loading"
+                    size="small">
+                </lightning-spinner>
+            </div>
+        </template>
+
+        <!-- Error State -->
+        <template lwc:elseif={error}>
+            <div class="slds-p-around_medium">
+                <div class="slds-notify slds-notify_alert slds-alert_error" role="alert">
+                    <lightning-icon
+                        icon-name="utility:error"
+                        alternative-text="Error"
+                        size="x-small"
+                        class="slds-m-right_x-small">
+                    </lightning-icon>
+                    <span class="slds-assistive-text">Error</span>
+                    <h2>{error}</h2>
+                </div>
+            </div>
+        </template>
+
+        <!-- Empty State -->
+        <template lwc:elseif={isEmpty}>
+            <div class="slds-p-around_medium slds-text-align_center">
+                <lightning-icon
+                    icon-name="utility:info"
+                    alternative-text="Info"
+                    size="small"
+                    class="slds-m-bottom_small">
+                </lightning-icon>
+                <p class="slds-text-body_regular slds-text-color_weak">
+                    No records found
+                </p>
+            </div>
+        </template>
+
+        <!-- Records List -->
+        <template lwc:else>
+            <ul class="slds-has-dividers_around-space">
+                <template for:each={records} for:item="record">
+                    <li key={record.Id} class="slds-item">
+                        <article class="slds-tile slds-tile_board">
+                            <div class="slds-tile__detail">
+                                <button
+                                    type="button"
+                                    data-id={record.Id}
+                                    data-name={record.Name}
+                                    onclick={handleRecordClick}
+                                    class="slds-button slds-button_reset slds-text-link_reset">
+                                    <div class="slds-grid slds-grid_align-spread">
+                                        <div class="slds-col">
+                                            <p class="slds-text-heading_small">
+                                                {record.Name}
+                                            </p>
+                                            <template lwc:if={record.Description}>
+                                                <p class="slds-text-body_small slds-text-color_weak">
+                                                    {record.Description}
+                                                </p>
+                                            </template>
+                                        </div>
+                                        <div class="slds-col slds-no-flex">
+                                            <lightning-icon
+                                                icon-name="utility:chevronright"
+                                                alternative-text="View"
+                                                size="x-small">
+                                            </lightning-icon>
+                                        </div>
+                                    </div>
+                                </button>
+                            </div>
+                        </article>
+                    </li>
+                </template>
+            </ul>
+        </template>
+
+        <!-- Footer Slot -->
+        <div slot="footer">
+            <template lwc:if={hasRecords}>
+                <p class="slds-text-body_small slds-text-color_weak">
+                    Showing {recordCount} records
+                </p>
+            </template>
+        </div>
+    </lightning-card>
+</template>

package/skills/generating-lwc-components/assets/basic-component/basicComponent.js

@@ -0,0 +1,163 @@
+/**
+ * BASIC LWC COMPONENT TEMPLATE
+ *
+ * This template demonstrates a standard LWC component with:
+ * - Wire service for data fetching
+ * - Loading and error states
+ * - Event dispatching
+ * - Proper lifecycle management
+ *
+ * Replace: basicComponent → yourComponentName
+ * Replace: BasicComponent → YourComponentName
+ * Replace: Account → YourObject
+ */
+
+import { LightningElement, api, wire } from 'lwc';
+import getRecords from '@salesforce/apex/BasicComponentController.getRecords';
+import { ShowToastEvent } from 'lightning/platformShowToastEvent';
+
+export default class BasicComponent extends LightningElement {
+    // ═══════════════════════════════════════════════════════════════════════
+    // PUBLIC API (@api) - Properties set by parent or App Builder
+    // ═══════════════════════════════════════════════════════════════════════
+
+    @api recordId;           // Automatically populated on record pages
+    @api objectApiName;      // Automatically populated on record pages
+    @api title = 'Records';  // Configurable in App Builder
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // PRIVATE REACTIVE PROPERTIES
+    // ═══════════════════════════════════════════════════════════════════════
+
+    records = [];
+    error;
+    isLoading = true;
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // WIRE SERVICE - Reactive data fetching
+    // ═══════════════════════════════════════════════════════════════════════
+
+    /**
+     * Wire service automatically calls Apex when recordId changes.
+     * The '$recordId' syntax makes it reactive to changes.
+     */
+    @wire(getRecords, { parentId: '$recordId' })
+    wiredRecords({ error, data }) {
+        this.isLoading = false;
+        if (data) {
+            this.records = data;
+            this.error = undefined;
+        } else if (error) {
+            this.error = this.reduceErrors(error);
+            this.records = [];
+        }
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // GETTERS - Computed properties for template
+    // ═══════════════════════════════════════════════════════════════════════
+
+    get hasRecords() {
+        return this.records && this.records.length > 0;
+    }
+
+    get isEmpty() {
+        return !this.isLoading && !this.error && !this.hasRecords;
+    }
+
+    get recordCount() {
+        return this.records ? this.records.length : 0;
+    }
+
+    get cardTitle() {
+        return `${this.title} (${this.recordCount})`;
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // LIFECYCLE HOOKS
+    // ═══════════════════════════════════════════════════════════════════════
+
+    connectedCallback() {
+        // Component inserted into DOM
+        // Good for: event listeners, subscriptions
+        console.log('BasicComponent connected');
+    }
+
+    renderedCallback() {
+        // DOM has been rendered
+        // Warning: Runs after every render - avoid heavy operations
+        // Use a flag to run once if needed
+    }
+
+    disconnectedCallback() {
+        // Component removed from DOM
+        // Good for: cleanup, unsubscribe, remove event listeners
+        console.log('BasicComponent disconnected');
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // EVENT HANDLERS
+    // ═══════════════════════════════════════════════════════════════════════
+
+    handleRecordClick(event) {
+        const recordId = event.currentTarget.dataset.id;
+        const recordName = event.currentTarget.dataset.name;
+
+        // Dispatch custom event for parent components
+        this.dispatchEvent(new CustomEvent('recordselected', {
+            detail: {
+                recordId,
+                recordName
+            },
+            bubbles: true,      // Event bubbles up through DOM
+            composed: true      // Event crosses shadow DOM boundary
+        }));
+    }
+
+    handleRefresh() {
+        // Force refresh by triggering wire service
+        // Note: Wire with cacheable=true caches results
+        // Use refreshApex() for explicit refresh
+        this.isLoading = true;
+        // Wire will re-execute when recordId changes
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // UTILITY METHODS
+    // ═══════════════════════════════════════════════════════════════════════
+
+    showToast(title, message, variant = 'info') {
+        this.dispatchEvent(new ShowToastEvent({
+            title,
+            message,
+            variant  // 'success', 'warning', 'error', 'info'
+        }));
+    }
+
+    reduceErrors(errors) {
+        if (!Array.isArray(errors)) {
+            errors = [errors];
+        }
+
+        return errors
+            .filter(error => !!error)
+            .map(error => {
+                if (typeof error === 'string') {
+                    return error;
+                }
+                if (error.body) {
+                    if (typeof error.body.message === 'string') {
+                        return error.body.message;
+                    }
+                    if (Array.isArray(error.body)) {
+                        return error.body.map(e => e.message).join(', ');
+                    }
+                }
+                if (error.message) {
+                    return error.message;
+                }
+                return JSON.stringify(error);
+            })
+            .join(', ');
+    }
+}

package/skills/generating-lwc-components/assets/basic-component/basicComponent.js-meta.xml

@@ -0,0 +1,137 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+    BASIC LWC COMPONENT TEMPLATE - METADATA
+
+    This file configures where and how the component can be used.
+
+    targets: Where the component is available
+    targetConfigs: Configuration for each target
+    properties: Configurable attributes in App Builder
+-->
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>66.0</apiVersion>
+    <isExposed>true</isExposed>
+    <masterLabel>Basic Component</masterLabel>
+    <description>A reusable component that displays a list of records with loading, error, and empty states.</description>
+
+    <!-- Where this component can be used -->
+    <targets>
+        <!-- Standard Salesforce pages -->
+        <target>lightning__RecordPage</target>
+        <target>lightning__AppPage</target>
+        <target>lightning__HomePage</target>
+
+        <!-- Flow integration -->
+        <target>lightning__FlowScreen</target>
+
+        <!-- Experience Cloud (Communities) -->
+        <target>lightningCommunity__Page</target>
+        <target>lightningCommunity__Default</target>
+
+        <!-- Utility Bar -->
+        <target>lightning__UtilityBar</target>
+    </targets>
+
+    <!-- Configuration for each target -->
+    <targetConfigs>
+        <!-- Record Page Configuration -->
+        <targetConfig targets="lightning__RecordPage">
+            <!-- Limit to specific objects (optional) -->
+            <objects>
+                <object>Account</object>
+                <object>Contact</object>
+                <object>Opportunity</object>
+            </objects>
+
+            <!-- Configurable properties in App Builder -->
+            <property
+                name="title"
+                type="String"
+                label="Card Title"
+                description="Title displayed on the card header"
+                default="Related Records"/>
+
+            <property
+                name="maxRecords"
+                type="Integer"
+                label="Maximum Records"
+                description="Maximum number of records to display"
+                default="10"
+                min="1"
+                max="100"/>
+
+            <property
+                name="showRefreshButton"
+                type="Boolean"
+                label="Show Refresh Button"
+                description="Display the refresh button in the header"
+                default="true"/>
+        </targetConfig>
+
+        <!-- App Page / Home Page Configuration -->
+        <targetConfig targets="lightning__AppPage,lightning__HomePage">
+            <property
+                name="title"
+                type="String"
+                label="Card Title"
+                default="My Records"/>
+
+            <property
+                name="objectApiName"
+                type="String"
+                label="Object API Name"
+                description="API name of the object to display"
+                default="Account"
+                datasource="apex://ObjectPicklistProvider"/>
+        </targetConfig>
+
+        <!-- Flow Screen Configuration -->
+        <targetConfig targets="lightning__FlowScreen">
+            <!-- Input properties (from Flow to component) -->
+            <property
+                name="recordId"
+                type="String"
+                label="Record ID"
+                description="ID of the parent record"
+                role="inputOnly"/>
+
+            <property
+                name="title"
+                type="String"
+                label="Title"
+                role="inputOnly"
+                default="Select a Record"/>
+
+            <!-- Output properties (from component to Flow) -->
+            <property
+                name="selectedRecordId"
+                type="String"
+                label="Selected Record ID"
+                description="ID of the selected record"
+                role="outputOnly"/>
+
+            <property
+                name="selectedRecordName"
+                type="String"
+                label="Selected Record Name"
+                role="outputOnly"/>
+        </targetConfig>
+
+        <!-- Experience Cloud Configuration -->
+        <targetConfig targets="lightningCommunity__Default">
+            <property
+                name="title"
+                type="String"
+                label="Title"
+                default="Records"/>
+
+            <!-- Community-specific theme property -->
+            <property
+                name="variant"
+                type="String"
+                label="Visual Variant"
+                default="standard"
+                datasource="standard,compact,minimal"/>
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>

package/skills/generating-lwc-components/assets/datatable-component/datatableComponent.html

@@ -0,0 +1,111 @@
+<!--
+    DATATABLE LWC COMPONENT TEMPLATE - HTML
+
+    Features demonstrated:
+    - Column sorting
+    - Row selection
+    - Inline editing
+    - Row actions
+    - Infinite scrolling
+    - Bulk actions
+-->
+<template>
+    <lightning-card title={tableTitle} icon-name="standard:account">
+        <!-- Card Actions -->
+        <div slot="actions">
+            <!-- Bulk Delete Button (shown when rows selected) -->
+            <template if:true={hasSelection}>
+                <lightning-button
+                    variant="destructive"
+                    label={selectedCount}
+                    icon-name="utility:delete"
+                    onclick={handleBulkDelete}
+                    class="slds-m-right_x-small">
+                </lightning-button>
+            </template>
+
+            <!-- Refresh Button -->
+            <lightning-button-icon
+                icon-name="utility:refresh"
+                alternative-text="Refresh"
+                onclick={handleRefresh}>
+            </lightning-button-icon>
+        </div>
+
+        <!-- Loading Spinner -->
+        <template if:true={isLoading}>
+            <div class="slds-is-relative" style="height: 100px;">
+                <lightning-spinner
+                    alternative-text="Loading"
+                    size="medium">
+                </lightning-spinner>
+            </div>
+        </template>
+
+        <!-- Error State -->
+        <template if:true={error}>
+            <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>
+                    <h2>{error}</h2>
+                </div>
+            </div>
+        </template>
+
+        <!-- Data Table -->
+        <template if:true={hasData}>
+            <div class="slds-p-around_small">
+                <lightning-datatable
+                    key-field="Id"
+                    data={data}
+                    columns={columns}
+                    sorted-by={sortBy}
+                    sorted-direction={sortDirection}
+                    onsort={handleSort}
+                    onrowselection={handleRowSelection}
+                    onrowaction={handleRowAction}
+                    oncellchange={handleCellChange}
+                    onsave={handleSave}
+                    oncancel={handleCancel}
+                    draft-values={draftValues}
+                    show-row-number-column={showRowNumbers}
+                    enable-infinite-loading={enableInfiniteScroll}
+                    onloadmore={loadMoreData}
+                    max-row-selection="100"
+                    hide-checkbox-column="false">
+                </lightning-datatable>
+
+                <!-- Load More Status -->
+                <template if:true={loadMoreStatus}>
+                    <div class="slds-text-align_center slds-p-top_small">
+                        <span class="slds-text-color_weak">{loadMoreStatus}</span>
+                    </div>
+                </template>
+            </div>
+        </template>
+
+        <!-- Empty State -->
+        <template if:false={hasData}>
+            <template if:false={isLoading}>
+                <template if:false={error}>
+                    <div class="slds-p-around_medium slds-text-align_center">
+                        <div class="slds-illustration slds-illustration_small">
+                            <lightning-icon
+                                icon-name="utility:info"
+                                size="large"
+                                alternative-text="No data"
+                                class="slds-m-bottom_small">
+                            </lightning-icon>
+                            <div class="slds-text-longform">
+                                <h3 class="slds-text-heading_medium">No Records Found</h3>
+                                <p class="slds-text-body_regular slds-text-color_weak">
+                                    There are no records to display.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </template>
+        </template>
+    </lightning-card>
+</template>