@salesforce/afv-skills 1.8.0 → 1.9.0

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

@@ -0,0 +1,367 @@
+/**
+ * DATATABLE LWC COMPONENT TEMPLATE
+ *
+ * This template demonstrates lightning-datatable with:
+ * - Column configuration
+ * - Row selection (single/multi)
+ * - Inline editing
+ * - Sorting
+ * - Infinite scrolling
+ * - Row actions
+ *
+ * Replace: datatableComponent → yourComponentName
+ */
+
+import { LightningElement, api, wire, track } from 'lwc';
+import { refreshApex } from '@salesforce/apex';
+import { ShowToastEvent } from 'lightning/platformShowToastEvent';
+import { NavigationMixin } from 'lightning/navigation';
+import getRecords from '@salesforce/apex/DatatableController.getRecords';
+import updateRecords from '@salesforce/apex/DatatableController.updateRecords';
+import deleteRecords from '@salesforce/apex/DatatableController.deleteRecords';
+
+// Row actions
+const actions = [
+    { label: 'View', name: 'view' },
+    { label: 'Edit', name: 'edit' },
+    { label: 'Delete', name: 'delete' }
+];
+
+// Column definitions
+const COLUMNS = [
+    {
+        label: 'Account Name',
+        fieldName: 'nameUrl',
+        type: 'url',
+        typeAttributes: {
+            label: { fieldName: 'Name' },
+            target: '_blank'
+        },
+        sortable: true
+    },
+    {
+        label: 'Industry',
+        fieldName: 'Industry',
+        type: 'text',
+        sortable: true,
+        editable: true
+    },
+    {
+        label: 'Annual Revenue',
+        fieldName: 'AnnualRevenue',
+        type: 'currency',
+        typeAttributes: {
+            currencyCode: 'USD',
+            minimumFractionDigits: 0
+        },
+        sortable: true,
+        editable: true,
+        cellAttributes: { alignment: 'right' }
+    },
+    {
+        label: 'Phone',
+        fieldName: 'Phone',
+        type: 'phone',
+        editable: true
+    },
+    {
+        label: 'Created Date',
+        fieldName: 'CreatedDate',
+        type: 'date',
+        typeAttributes: {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit'
+        },
+        sortable: true
+    },
+    {
+        label: 'Active',
+        fieldName: 'IsActive__c',
+        type: 'boolean',
+        editable: true
+    },
+    {
+        type: 'action',
+        typeAttributes: { rowActions: actions }
+    }
+];
+
+export default class DatatableComponent extends NavigationMixin(LightningElement) {
+    // ═══════════════════════════════════════════════════════════════════════
+    // PUBLIC API
+    // ═══════════════════════════════════════════════════════════════════════
+
+    @api recordId;
+    @api maxRows = 50;
+    @api enableInfiniteScroll = false;
+    @api showRowNumbers = false;
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // PRIVATE PROPERTIES
+    // ═══════════════════════════════════════════════════════════════════════
+
+    columns = COLUMNS;
+    @track data = [];
+    error;
+    isLoading = true;
+
+    // Sorting
+    sortBy;
+    sortDirection = 'asc';
+
+    // Selection
+    selectedRows = [];
+    draftValues = [];
+
+    // Infinite scroll
+    offset = 0;
+    loadMoreStatus;
+    totalRecords = 0;
+
+    // Wire result for refresh
+    wiredRecordsResult;
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // WIRE SERVICE
+    // ═══════════════════════════════════════════════════════════════════════
+
+    @wire(getRecords, {
+        parentId: '$recordId',
+        limitSize: '$maxRows',
+        offset: '$offset',
+        sortBy: '$sortBy',
+        sortDirection: '$sortDirection'
+    })
+    wiredRecords(result) {
+        this.wiredRecordsResult = result;
+        this.isLoading = false;
+
+        const { data, error } = result;
+
+        if (data) {
+            // Add URL field for navigation
+            this.data = data.records.map(record => ({
+                ...record,
+                nameUrl: `/${record.Id}`
+            }));
+            this.totalRecords = data.totalCount;
+            this.error = undefined;
+        } else if (error) {
+            this.error = this.reduceErrors(error);
+            this.data = [];
+        }
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // GETTERS
+    // ═══════════════════════════════════════════════════════════════════════
+
+    get hasData() {
+        return this.data && this.data.length > 0;
+    }
+
+    get hasSelection() {
+        return this.selectedRows && this.selectedRows.length > 0;
+    }
+
+    get selectedCount() {
+        return this.selectedRows.length;
+    }
+
+    get tableTitle() {
+        return `Accounts (${this.totalRecords})`;
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // SORTING
+    // ═══════════════════════════════════════════════════════════════════════
+
+    handleSort(event) {
+        this.sortBy = event.detail.fieldName;
+        this.sortDirection = event.detail.sortDirection;
+        this.isLoading = true;
+        // Wire will automatically refetch with new sort params
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // SELECTION
+    // ═══════════════════════════════════════════════════════════════════════
+
+    handleRowSelection(event) {
+        this.selectedRows = event.detail.selectedRows;
+
+        // Dispatch event for parent
+        this.dispatchEvent(new CustomEvent('selection', {
+            detail: {
+                selectedRows: this.selectedRows,
+                selectedIds: this.selectedRows.map(row => row.Id)
+            }
+        }));
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // ROW ACTIONS
+    // ═══════════════════════════════════════════════════════════════════════
+
+    handleRowAction(event) {
+        const actionName = event.detail.action.name;
+        const row = event.detail.row;
+
+        switch (actionName) {
+            case 'view':
+                this.navigateToView(row.Id);
+                break;
+            case 'edit':
+                this.navigateToEdit(row.Id);
+                break;
+            case 'delete':
+                this.handleDeleteRow(row);
+                break;
+            default:
+                break;
+        }
+    }
+
+    navigateToView(recordId) {
+        this[NavigationMixin.Navigate]({
+            type: 'standard__recordPage',
+            attributes: {
+                recordId: recordId,
+                objectApiName: 'Account',
+                actionName: 'view'
+            }
+        });
+    }
+
+    navigateToEdit(recordId) {
+        this[NavigationMixin.Navigate]({
+            type: 'standard__recordPage',
+            attributes: {
+                recordId: recordId,
+                objectApiName: 'Account',
+                actionName: 'edit'
+            }
+        });
+    }
+
+    async handleDeleteRow(row) {
+        if (!confirm(`Delete ${row.Name}?`)) {
+            return;
+        }
+
+        this.isLoading = true;
+        try {
+            await deleteRecords({ recordIds: [row.Id] });
+            this.showToast('Success', 'Record deleted', 'success');
+            await this.refresh();
+        } catch (error) {
+            this.showToast('Error', this.reduceErrors(error), 'error');
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // INLINE EDITING
+    // ═══════════════════════════════════════════════════════════════════════
+
+    handleCellChange(event) {
+        this.draftValues = event.detail.draftValues;
+    }
+
+    async handleSave(event) {
+        const updatedFields = event.detail.draftValues;
+        this.isLoading = true;
+
+        try {
+            await updateRecords({ records: updatedFields });
+            this.showToast('Success', 'Records updated', 'success');
+            this.draftValues = [];
+            await this.refresh();
+        } catch (error) {
+            this.showToast('Error', this.reduceErrors(error), 'error');
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    handleCancel() {
+        this.draftValues = [];
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // INFINITE SCROLLING
+    // ═══════════════════════════════════════════════════════════════════════
+
+    loadMoreData(event) {
+        if (!this.enableInfiniteScroll) return;
+
+        const { target } = event;
+        target.isLoading = true;
+
+        if (this.data.length >= this.totalRecords) {
+            target.enableInfiniteLoading = false;
+            this.loadMoreStatus = 'All records loaded';
+            target.isLoading = false;
+            return;
+        }
+
+        this.offset = this.data.length;
+        // Wire will load more data
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // BULK ACTIONS
+    // ═══════════════════════════════════════════════════════════════════════
+
+    async handleBulkDelete() {
+        if (!this.hasSelection) return;
+
+        const selectedIds = this.selectedRows.map(row => row.Id);
+
+        if (!confirm(`Delete ${selectedIds.length} records?`)) {
+            return;
+        }
+
+        this.isLoading = true;
+        try {
+            await deleteRecords({ recordIds: selectedIds });
+            this.showToast('Success', `${selectedIds.length} records deleted`, 'success');
+            this.selectedRows = [];
+            await this.refresh();
+        } catch (error) {
+            this.showToast('Error', this.reduceErrors(error), 'error');
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    // ═══════════════════════════════════════════════════════════════════════
+    // UTILITIES
+    // ═══════════════════════════════════════════════════════════════════════
+
+    async refresh() {
+        this.isLoading = true;
+        await refreshApex(this.wiredRecordsResult);
+        this.isLoading = false;
+    }
+
+    handleRefresh() {
+        this.refresh();
+    }
+
+    showToast(title, message, variant) {
+        this.dispatchEvent(new ShowToastEvent({ title, message, variant }));
+    }
+
+    reduceErrors(errors) {
+        if (!Array.isArray(errors)) errors = [errors];
+        return errors
+            .filter(e => !!e)
+            .map(e => e.body?.message || e.message || JSON.stringify(e))
+            .join(', ');
+    }
+}

package/skills/generating-lwc-components/assets/flow-screen-component/flowScreenComponent.css

@@ -0,0 +1,63 @@
+/**
+ * Flow Screen Component Styles
+ * Uses SLDS 2 global styling hooks for dark mode compatibility
+ */
+
+/* Record Tile - Interactive Selection */
+.record-tile {
+    cursor: pointer;
+    transition: all 0.2s ease;
+    position: relative;
+    border: 2px solid var(--slds-g-color-border-base-1, #e5e5e5);
+    background-color: var(--slds-g-color-neutral-base-100, #ffffff);
+}
+
+.record-tile:hover {
+    border-color: var(--slds-g-color-brand-base-50, #0176d3);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.record-tile:focus {
+    outline: none;
+    border-color: var(--slds-g-color-brand-base-50, #0176d3);
+    box-shadow: 0 0 0 3px var(--slds-g-color-brand-base-30, #aacbff);
+}
+
+/* Selected State */
+.record-tile[aria-pressed="true"],
+.record-tile.slds-is-selected {
+    border-color: var(--slds-g-color-brand-base-50, #0176d3);
+    background-color: var(--slds-g-color-brand-base-10, #e5f2ff);
+}
+
+/* Selection Check Icon */
+.selected-icon {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    color: var(--slds-g-color-brand-base-50, #0176d3);
+}
+
+/* Card Footer Spacing */
+.slds-card__footer {
+    border-top: 1px solid var(--slds-g-color-border-base-1, #e5e5e5);
+    padding: var(--slds-g-spacing-medium, 1rem);
+    background-color: var(--slds-g-color-neutral-base-95, #f3f3f3);
+}
+
+/* Selection Summary Box */
+.slds-theme_info {
+    background-color: var(--slds-g-color-brand-base-10, #e5f2ff);
+    border: 1px solid var(--slds-g-color-brand-base-30, #aacbff);
+}
+
+/* Loading Spinner Container */
+.slds-align_absolute-center {
+    min-height: 200px;
+}
+
+/* Keyboard Focus Visible */
+.record-tile:focus-visible {
+    outline: 2px solid var(--slds-g-color-brand-base-50, #0176d3);
+    outline-offset: 2px;
+}

package/skills/generating-lwc-components/assets/flow-screen-component/flowScreenComponent.html

@@ -0,0 +1,154 @@
+<template>
+    <div class="slds-card">
+        <!-- Header -->
+        <div class="slds-card__header slds-grid">
+            <header class="slds-media slds-media_center slds-has-flexi-truncate">
+                <div class="slds-media__body">
+                    <h2 class="slds-card__header-title">
+                        <span>{inputLabel}</span>
+                    </h2>
+                </div>
+            </header>
+        </div>
+
+        <!-- Body -->
+        <div class="slds-card__body slds-card__body_inner">
+
+            <!-- Loading State -->
+            <template lwc:if={isLoading}>
+                <div class="slds-align_absolute-center slds-p-around_large">
+                    <lightning-spinner alternative-text="Loading" size="medium"></lightning-spinner>
+                </div>
+            </template>
+
+            <!-- Error State -->
+            <template lwc:if={error}>
+                <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" size="small" alternative-text="Error"></lightning-icon>
+                    <h2 class="slds-m-left_x-small">{error}</h2>
+                </div>
+            </template>
+
+            <!-- Validation Error -->
+            <template lwc:if={errorMessage}>
+                <div class="slds-notify slds-notify_alert slds-alert_warning slds-m-bottom_small" role="alert">
+                    <span class="slds-assistive-text">Warning</span>
+                    <lightning-icon icon-name="utility:warning" size="small" alternative-text="Warning"></lightning-icon>
+                    <h2 class="slds-m-left_x-small">{errorMessage}</h2>
+                </div>
+            </template>
+
+            <!-- Empty State -->
+            <template lwc:if={!isLoading}>
+                <template lwc:if={!hasRecords}>
+                    <div class="slds-illustration slds-illustration_small">
+                        <div class="slds-text-longform">
+                            <h3 class="slds-text-heading_medium">No Records Found</h3>
+                            <p class="slds-text-body_regular">There are no records to display.</p>
+                        </div>
+                    </div>
+                </template>
+
+                <!-- Record List -->
+                <template lwc:if={hasRecords}>
+                    <div class="slds-grid slds-wrap slds-gutters_small">
+                        <template for:each={records} for:item="record">
+                            <div key={record.id} class="slds-col slds-size_1-of-1 slds-medium-size_1-of-2 slds-large-size_1-of-3 slds-m-bottom_small">
+                                <!-- Record Tile (clickable) -->
+                                <div
+                                    class="record-tile slds-box slds-box_link"
+                                    data-id={record.id}
+                                    data-name={record.name}
+                                    onclick={handleRecordSelect}
+                                    role="button"
+                                    tabindex="0"
+                                    aria-pressed={record.isSelected}>
+
+                                    <article class="slds-tile">
+                                        <h3 class="slds-tile__title slds-truncate" title={record.name}>
+                                            <span>{record.name}</span>
+                                        </h3>
+                                        <div class="slds-tile__detail">
+                                            <p class="slds-text-body_small slds-text-color_weak">
+                                                {record.description}
+                                            </p>
+                                        </div>
+                                    </article>
+
+                                    <!-- Selection Indicator -->
+                                    <template lwc:if={record.isSelected}>
+                                        <lightning-icon
+                                            icon-name="utility:check"
+                                            size="small"
+                                            class="selected-icon"
+                                            alternative-text="Selected">
+                                        </lightning-icon>
+                                    </template>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+
+                    <!-- Selection Summary -->
+                    <template lwc:if={hasSelection}>
+                        <div class="slds-m-top_medium slds-p-around_small slds-theme_info slds-box">
+                            <p class="slds-text-body_regular">
+                                <lightning-icon icon-name="utility:check" size="x-small" alternative-text="Selected" class="slds-m-right_x-small"></lightning-icon>
+                                <strong>Selected:</strong> {selectedRecordName}
+                            </p>
+                        </div>
+                    </template>
+                </template>
+            </template>
+        </div>
+
+        <!-- Footer with Navigation Buttons -->
+        <footer class="slds-card__footer">
+            <div class="slds-grid slds-grid_align-spread">
+                <!-- Back Button (left aligned) -->
+                <div>
+                    <template lwc:if={showBackButton}>
+                        <lightning-button
+                            label="Back"
+                            onclick={handleBack}
+                            icon-name="utility:back">
+                        </lightning-button>
+                    </template>
+                </div>
+
+                <!-- Next/Finish Buttons (right aligned) -->
+                <div class="slds-grid slds-grid_align-end slds-gutters_x-small">
+                    <template lwc:if={canPause}>
+                        <lightning-button
+                            label="Pause"
+                            onclick={handlePause}
+                            icon-name="utility:pause">
+                        </lightning-button>
+                    </template>
+
+                    <template lwc:if={showNextButton}>
+                        <lightning-button
+                            label="Next"
+                            variant="brand"
+                            onclick={handleNext}
+                            icon-name="utility:forward"
+                            icon-position="right"
+                            disabled={!hasSelection}>
+                        </lightning-button>
+                    </template>
+
+                    <template lwc:if={showFinishButton}>
+                        <lightning-button
+                            label="Finish"
+                            variant="brand"
+                            onclick={handleFinish}
+                            icon-name="utility:check"
+                            disabled={!hasSelection}>
+                        </lightning-button>
+                    </template>
+                </div>
+            </div>
+        </footer>
+    </div>
+</template>