fix(lint): convert var→const, destructure useState, suppress structural LWC violations in wizard example

Author: sschupbach-salesforce

examples/03-multi-step-wizard/force-app/main/default/lwc/uswdsRequestWizard/uswdsRequestWizard.js

@@ -14,53 +14,42 @@ import { createRecord } from 'lightning/uiRecordApi';
 import BUNDLE from '@salesforce/resourceUrl/sfGpsDsUsGovReactBundle';
 
 // The three step names shown in StepIndicator.
-var STEPS = ['Topic', 'Details', 'Review'];
+const STEPS = ['Topic', 'Details', 'Review'];
 
 // Topic options shown as cards in Step 1.
-var TOPICS = [
+const TOPICS = [
   { value: 'foia',       label: 'Freedom of Information',  description: 'Request government records.' },
   { value: 'benefits',   label: 'Benefits',                description: 'Questions about benefit eligibility.' },
   { value: 'complaint',  label: 'File a Complaint',        description: 'Report an issue or concern.' }
 ];
 
 function makeFixture({ React, usGovReact, onSubmit }) {
-  var StepIndicator = usGovReact.StepIndicator;
-  var Card          = usGovReact.Card;
-  var CardGroup     = usGovReact.CardGroup;
-  var Input         = usGovReact.Input;
-  var Textarea      = usGovReact.Textarea;
-  var Button        = usGovReact.Button;
-  var SummaryBox    = usGovReact.SummaryBox;
-  var Modal         = usGovReact.Modal;
-  var Alert         = usGovReact.Alert;
+  const StepIndicator = usGovReact.StepIndicator;
+  const Card          = usGovReact.Card;
+  const CardGroup     = usGovReact.CardGroup;
+  const Input         = usGovReact.Input;
+  const Textarea      = usGovReact.Textarea;
+  const Button        = usGovReact.Button;
+  const SummaryBox    = usGovReact.SummaryBox;
+  const Modal         = usGovReact.Modal;
+  const Alert         = usGovReact.Alert;
 
   return function RequestWizard(props) {
     // All wizard state lives here in React.
     // The LWC only needs to know about submission — it handles nothing else.
-    var stepState     = React.useState(1);
-    var step          = stepState[0];
-    var setStep       = stepState[1];
-
-    var topicState    = React.useState('');
-    var topic         = topicState[0];
-    var setTopic      = topicState[1];
-
-    var subjectState  = React.useState('');
-    var subject       = subjectState[0];
-    var setSubject    = subjectState[1];
-
-    var detailState   = React.useState('');
-    var detail        = detailState[0];
-    var setDetail     = detailState[1];
-
-    var modalState    = React.useState(false);
-    var modalOpen     = modalState[0];
-    var setModalOpen  = modalState[1];
+    const [step,      setStep]      = React.useState(1);
+    const [topic,     setTopic]     = React.useState('');
+    const [subject,   setSubject]   = React.useState('');
+    const [detail,    setDetail]    = React.useState('');
+    const [modalOpen, setModalOpen] = React.useState(false);
 
     // submitting, submitted, and errorMessage come from the LWC via props.
-    var submitting    = props.submitting    || false;
-    var submitted     = props.submitted     || false;
-    var errorMessage  = props.errorMessage  || null;
+    // code-analyzer-suppress-next-line eslint:react/prop-types
+    const submitting   = props.submitting   || false;
+    // code-analyzer-suppress-next-line eslint:react/prop-types
+    const submitted    = props.submitted    || false;
+    // code-analyzer-suppress-next-line eslint:react/prop-types
+    const errorMessage = props.errorMessage || null;
 
     // Success screen — shown after the LWC sets submitted=true.
     if (submitted) {
@@ -82,7 +71,7 @@ function makeFixture({ React, usGovReact, onSubmit }) {
           CardGroup,
           null,
           TOPICS.map(function(card, i) {
-            var t = TOPICS[i];
+            const t = TOPICS[i];
             return React.createElement(
               'div',
               {
@@ -157,7 +146,7 @@ function makeFixture({ React, usGovReact, onSubmit }) {
 
     // ── Step 3: Review & Submit ─────────────────────────────────────────
     function renderStep3() {
-      var topicLabel = (TOPICS.find(function(t) { return t.value === topic; }) || {}).label || topic;
+      const topicLabel = (TOPICS.find(function(t) { return t.value === topic; }) || {}).label || topic;
 
       return React.createElement(
         'div',
@@ -250,12 +239,13 @@ export default class UswdsRequestWizard extends LightningElement {
   _mount   = null;
 
   async connectedCallback() {
-    var bundle     = await import(BUNDLE);
-    var React      = bundle.React;
-    var ReactDOM   = bundle.ReactDOM;
-    var usGovReact = bundle.usGovReact;
+    // code-analyzer-suppress-next-line eslint:@lwc/lwc-platform/no-dynamic-import-identifier
+    const bundle     = await import(BUNDLE);
+    const React      = bundle.React;
+    const ReactDOM   = bundle.ReactDOM;
+    const usGovReact = bundle.usGovReact;
 
-    var self = this;
+    const self = this;
     function onSubmit(data) {
       self._handleSubmit(data);
     }
@@ -281,7 +271,7 @@ export default class UswdsRequestWizard extends LightningElement {
       });
       this._mount.reactProps = { submitting: false, submitted: true, errorMessage: null };
     } catch (err) {
-      var msg = (err.body && err.body.message) ? err.body.message : 'Submission failed. Please try again.';
+      const msg = (err.body && err.body.message) ? err.body.message : 'Submission failed. Please try again.';
       // Pass the error back as a prop — the React component renders it as an Alert.
       // All form data is preserved so the user can fix and resubmit without re-entering.
       this._mount.reactProps = { submitting: false, submitted: false, errorMessage: msg };