feat: create LWC recipes (Hello & Dynamic Target sObject) for lightning-record-picker

.npmrc

@@ -0,0 +1 @@
+registry=https://registry.npmjs.org/

force-app/main/default/applications/LWC_Recipes.app-meta.xml

@@ -40,6 +40,7 @@
     <tabs>Wire</tabs>
     <tabs>GraphQL</tabs>
     <tabs>Navigation</tabs>
+    <tabs>Record_Picker</tabs>
     <tabs>Misc_Techniques</tabs>
     <tabs>X3rd_Party_Libs</tabs>
     <uiType>Lightning</uiType>

force-app/main/default/flexipages/Record_Picker.flexipage-meta.xml

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
+    <flexiPageRegions>
+        <name>region1</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <flexiPageRegions>
+        <itemInstances>
+            <componentInstance>
+                <componentName>recordPickerHello</componentName>
+                <identifier>c_recordPickerHello</identifier>
+            </componentInstance>
+        </itemInstances>
+        <name>region2</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <flexiPageRegions>
+        <itemInstances>
+            <componentInstance>
+                <componentName>recordPickerDynamicTarget</componentName>
+                <identifier>c_recordPickerDynamicTarget</identifier>
+            </componentInstance>
+        </itemInstances>
+        <name>region3</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <flexiPageRegions>
+        <name>region4</name>
+        <type>Region</type>
+    </flexiPageRegions>
+    <masterLabel>Record Picker</masterLabel>
+    <template>
+        <name>flexipage:appHomeTemplateHeaderThreeColumns</name>
+    </template>
+    <type>AppPage</type>
+</FlexiPage>

force-app/main/default/lwc/recordPickerDynamicTarget/__tests__/recordPickerDynamicTarget.test.js

@@ -0,0 +1,110 @@
+import { createElement } from 'lwc';
+import RecordPickerDynamicTarget from 'c/recordPickerDynamicTarget';
+
+describe('recordPickerDynamicTarget', () => {
+    let element;
+    beforeEach(() => {
+        // Create component
+        element = createElement('c-record-picker-dynamic-target', {
+            is: RecordPickerDynamicTarget
+        });
+        element.objectApiName = 'Account';
+        element.label = 'Account';
+        document.body.appendChild(element);
+    });
+
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+        // Prevent data saved on mocks from leaking between tests
+        jest.clearAllMocks();
+    });
+
+    // Helper function to wait until the microtask queue is empty. This is needed for promise
+    // timing when calling imperative Apex.
+    async function flushPromises() {
+        return Promise.resolve();
+    }
+
+    it('renders a lightning-record-picker component', () => {
+        const recordPickerElement = element.shadowRoot.querySelector(
+            'lightning-record-picker'
+        );
+        expect(recordPickerElement).toBeTruthy();
+    });
+
+    it('is accessible', async () => {
+        expect(element).toBeAccessible();
+    });
+
+    it('changes the target object of the record picker', async () => {
+        // Change the target object
+        const targetSelector = element.shadowRoot.querySelector(
+            '[data-id="targetSelector"]'
+        );
+        targetSelector.value = 'Case';
+        targetSelector.dispatchEvent(new CustomEvent('change'));
+
+        // Wait for any asynchronous DOM updates
+        await flushPromises();
+
+        // Check that the target object of the record picker has been updated
+        const recordPickerElement = element.shadowRoot.querySelector(
+            'lightning-record-picker'
+        );
+        expect(recordPickerElement.objectApiName).toBe('Case');
+    });
+
+    it('hides the target selector when a record is selected', async () => {
+        const recordPickerElement = element.shadowRoot.querySelector(
+            'lightning-record-picker'
+        );
+
+        // Simulate a record selection in the record picker
+        recordPickerElement.dispatchEvent(
+            new CustomEvent('change', {
+                detail: { recordId: '0017a00002PJIloAAH' }
+            })
+        );
+
+        // Wait for any asynchronous DOM updates
+        await flushPromises();
+
+        // Check that the target selector is not displayed anymore
+        const targetSelector = element.shadowRoot.querySelector(
+            '[data-id="targetSelector"]'
+        );
+        expect(targetSelector).toBeFalsy();
+    });
+
+    it('displays the target selector again after clearing the selected record', async () => {
+        const recordPickerElement = element.shadowRoot.querySelector(
+            'lightning-record-picker'
+        );
+        // Simulate a record selection in the record picker
+        recordPickerElement.dispatchEvent(
+            new CustomEvent('change', {
+                detail: { recordId: '0017a00002PJIloAAH' }
+            })
+        );
+
+        // Wait for any asynchronous DOM updates
+        await flushPromises();
+
+        // Simulate clearing the selected record' in the record picker
+        recordPickerElement.dispatchEvent(
+            new CustomEvent('change', { detail: { recordId: null } })
+        );
+
+        // Wait for any asynchronous DOM updates
+        await flushPromises();
+
+        // Check that the target selector is not displayed anymore
+        const targetSelector = element.shadowRoot.querySelector(
+            '[data-id="targetSelector"]'
+        );
+        expect(targetSelector).toBeTruthy();
+    });
+});

force-app/main/default/lwc/recordPickerDynamicTarget/recordPickerDynamicTarget.html

@@ -0,0 +1,40 @@
+<template>
+    <lightning-card
+        title="RecordPickerDynamicTarget"
+        class="slds-card__body_inner"
+        icon-name="standard:search"
+    >
+        <div class="slds-form-element">
+            <label class="slds-form-element__label">Select a record</label>
+            <div class="slds-form-element__control slds-combobox-group">
+                <template if:true={showTargetSelector}>
+                    <lightning-combobox
+                        data-id="targetSelector"
+                        label="Select a target sObject"
+                        variant="label-hidden"
+                        options={targetObjects}
+                        value={selectedTarget}
+                        onchange={handleTargetSelection}
+                        class="slds-combobox_object-switcher slds-combobox-addon_start"
+                    >
+                    </lightning-combobox>
+                </template>
+                <lightning-record-picker
+                    lwc:ref="recordPicker"
+                    object-api-name={selectedTarget}
+                    placeholder="Search..."
+                    label="Select a record"
+                    variant="label-hidden"
+                    display-info={displayInfo}
+                    matching-info={matchingInfo}
+                    onchange={handleRecordSelect}
+                    class="slds-size_full slds-combobox-addon_end"
+                >
+                </lightning-record-picker>
+            </div>
+        </div>
+        <c-view-source source="lwc/recordPickerDynamicTarget" slot="footer">
+            Select a target sObject. Type a search term and select a record.
+        </c-view-source>
+    </lightning-card>
+</template>

force-app/main/default/lwc/recordPickerDynamicTarget/recordPickerDynamicTarget.js

@@ -0,0 +1,55 @@
+import { LightningElement } from 'lwc';
+
+export default class RecordPickerDynamicTarget extends LightningElement {
+    targetObjects = [
+        {
+            label: 'Account',
+            value: 'Account'
+        },
+        {
+            label: 'Contact',
+            value: 'Contact'
+        }
+    ];
+    selectedTarget = 'Account';
+    currentSelectedRecordId = null;
+
+    displayInfos = {
+        Account: {
+            additionalFields: ['Type']
+        },
+        Contact: {
+            additionalFields: ['Phone']
+        }
+    };
+
+    matchingInfos = {
+        Account: {
+            additionalFields: [{ fieldPath: 'Type' }]
+        },
+        Contact: {
+            additionalFields: [{ fieldPath: 'Phone' }]
+        }
+    };
+
+    get displayInfo() {
+        return this.displayInfos[this.selectedTarget];
+    }
+
+    get matchingInfo() {
+        return this.matchingInfos[this.selectedTarget];
+    }
+
+    get showTargetSelector() {
+        return this.currentSelectedRecordId === null;
+    }
+
+    handleTargetSelection(event) {
+        this.selectedTarget = event.target.value;
+        this.refs.recordPicker.clearSelection();
+    }
+
+    handleRecordSelect(event) {
+        this.currentSelectedRecordId = event.detail.recordId;
+    }
+}

force-app/main/default/lwc/recordPickerDynamicTarget/recordPickerDynamicTarget.js-meta.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>59.0</apiVersion>
+    <isExposed>true</isExposed>
+    <targets>
+        <target>lightning__RecordAction</target>
+        <target>lightning__AppPage</target>
+        <target>lightning__RecordPage</target>
+        <target>lightning__HomePage</target>
+        <target>lightning__Tab</target>
+        <target>lightningCommunity__Page</target>
+        <target>lightningCommunity__Default</target>
+    </targets>
+    <targetConfigs>
+        <targetConfig targets="lightning__RecordAction">
+            <actionType>ScreenAction</actionType>
+        </targetConfig>
+        <targetConfig targets="lightning__RecordPage">
+           <supportedFormFactors>
+                <supportedFormFactor type="Small" />
+                <supportedFormFactor type="Large" />
+            </supportedFormFactors>
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>

force-app/main/default/lwc/recordPickerHello/__tests__/data/graphqlContactEmptyResult.json

@@ -0,0 +1,9 @@
+{
+    "uiapi": {
+        "query": {
+            "Contact": {
+                "edges": []
+            }
+        }
+    }
+}

force-app/main/default/lwc/recordPickerHello/__tests__/data/graphqlContactResult.json

@@ -0,0 +1,30 @@
+{
+    "uiapi": {
+        "query": {
+            "Contact": {
+                "edges": [
+                    {
+                        "node": {
+                            "Id": "001xx000016QpSqAAK",
+                            "Name": {
+                                "value": "Amy Taylor"
+                            },
+                            "Title": {
+                                "value": "VP of Engineering"
+                            },
+                            "Phone": {
+                                "value": "4152568563"
+                            },
+                            "Email": {
+                                "value": "amy@demo.net"
+                            },
+                            "Picture__c": {
+                                "value": "https://s3-us-west-2.amazonaws.com/dev-or-devrl-s3-bucket/sample-apps/people/amy_taylor.jpg"
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    }
+}