feat: Use shared Switch component instead of MUISwitch directly (#3929

)
theopensystemslab · Nov 11, 2024 · 304490d · 304490d
1 parent 5bbec23
commit 304490d
Show file tree

Hide file tree

Showing 15 changed files with 191 additions and 219 deletions.
diff --git a/editor.planx.uk/.eslintrc b/editor.planx.uk/.eslintrc
@@ -53,6 +53,10 @@
               "styled"
             ],
             "message": "Please import styled from '@mui/material/styles'. Reason: https://mui.com/system/styled/#what-problems-does-it-solve"
+          },
+          {
+            "name": "@mui/material/Switch",
+            "message": "Please import shared Switch component from 'ui/shared/Switch' instead of the MUI Switch component directly"
           }
         ],
         "patterns": [

diff --git a/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx b/editor.planx.uk/src/@planx/components/Calculate/Editor.tsx
@@ -1,6 +1,4 @@
-import FormControlLabel from "@mui/material/FormControlLabel";
 import { styled } from "@mui/material/styles";
-import Switch from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { EditorProps } from "@planx/components/shared/types";
@@ -12,6 +10,7 @@ import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
+import { Switch } from "ui/shared/Switch";
 
 import { ICONS } from "../shared/icons";
 import type { Calculate } from "./model";
@@ -135,20 +134,16 @@ export default function Component(props: Props) {
             />
           </InputRow>
           <InputRow>
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={formik.values.formatOutputForAutomations}
-                  onChange={() =>
-                    formik.setFieldValue(
-                      "formatOutputForAutomations",
-                      !formik.values.formatOutputForAutomations,
-                    )
-                  }
-                />
-              }
-              label="Format the output to automate a future Question or Checklist only"
-            />
+          <Switch            
+            checked={formik.values.formatOutputForAutomations}
+            onChange={() =>
+              formik.setFieldValue(
+                "formatOutputForAutomations",
+                !formik.values.formatOutputForAutomations
+              )
+            }
+            label="Format the output to automate a future Question or Checklist only"
+          />
           </InputRow>
         </ModalSectionContent>
         <ModalSectionContent title="Formula">

diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor.tsx
@@ -3,7 +3,6 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import IconButton from "@mui/material/IconButton";
-import Switch from "@mui/material/Switch";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { FormikErrors, FormikValues, useFormik } from "formik";
 import adjust from "ramda/src/adjust";
@@ -22,6 +21,7 @@ import SimpleMenu from "ui/editor/SimpleMenu";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
+import { Switch } from "ui/shared/Switch";
 
 import { Option, parseBaseNodeData } from "../shared";
 import { FlagsSelect } from "../shared/FlagsSelect";
@@ -377,52 +377,40 @@ export const ChecklistComponent: React.FC<ChecklistProps> = (props) => {
               />
             </InputRow>
             <InputRow>
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={!!formik.values.groupedOptions}
-                    onChange={() =>
-                      formik.setValues({
-                        ...formik.values,
-                        ...toggleExpandableChecklist({
-                          options: formik.values.options,
-                          groupedOptions: formik.values.groupedOptions,
-                        }),
-                      })
-                    }
-                  />
-                }
-                label="Expandable"
-              />
+            <Switch
+              checked={!!formik.values.groupedOptions}
+              onChange={() =>
+                formik.setValues({
+                  ...formik.values,
+                  ...toggleExpandableChecklist({
+                    options: formik.values.options,
+                    groupedOptions: formik.values.groupedOptions,
+                  }),
+                })
+              }
+              label="Expandable"
+            />
             </InputRow>
             <InputRow>
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={formik.values.allRequired}
-                    onChange={() =>
-                      formik.setFieldValue(
-                        "allRequired",
-                        !formik.values.allRequired,
-                      )
-                    }
-                  />
+              <Switch
+                checked={formik.values.allRequired}
+                onChange={() =>
+                  formik.setFieldValue(
+                    "allRequired",
+                    !formik.values.allRequired,
+                  )
                 }
-                label="All required"
-              />
+              label="All required"
+            />
             </InputRow>
             <InputRow>
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={formik.values.neverAutoAnswer}
-                    onChange={() =>
-                      formik.setFieldValue(
-                        "neverAutoAnswer",
-                        !formik.values.neverAutoAnswer,
-                      )
-                    }
-                  />
+              <Switch
+                checked={formik.values.neverAutoAnswer}
+                onChange={() => 
+                  formik.setFieldValue(
+                    "neverAutoAnswer",
+                    !formik.values.neverAutoAnswer
+                  )
                 }
                 label="Always put to user (forgo automation)"
               />

diff --git a/editor.planx.uk/src/@planx/components/DrawBoundary/Editor.tsx b/editor.planx.uk/src/@planx/components/DrawBoundary/Editor.tsx
@@ -1,5 +1,3 @@
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Switch from "@mui/material/Switch";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
@@ -11,6 +9,7 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
+import { Switch } from "ui/shared/Switch";
 
 import { ICONS } from "../shared/icons";
 import type { DrawBoundary } from "./model";
@@ -99,17 +98,13 @@ function DrawBoundaryComponent(props: Props) {
             />
           </InputRow>
           <InputRow>
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={formik.values.hideFileUpload}
-                  onChange={() =>
-                    formik.setFieldValue(
-                      "hideFileUpload",
-                      !formik.values.hideFileUpload,
-                    )
-                  }
-                />
+            <Switch
+              checked={formik.values.hideFileUpload}
+              onChange={() =>
+                formik.setFieldValue(
+                  "hideFileUpload",
+                  !formik.values.hideFileUpload,
+                )
               }
               label="Hide file upload and allow user to continue without data"
             />

diff --git a/editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.tsx b/editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.tsx
@@ -1,5 +1,3 @@
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Switch from "@mui/material/Switch";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { ICONS } from "@planx/components/shared/icons";
 import { EditorProps } from "@planx/components/shared/types";
@@ -13,6 +11,7 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
+import { Switch } from "ui/shared/Switch";
 
 import {
   descriptionPlaceholder,
@@ -96,17 +95,13 @@ export const FeedbackEditor = (props: FeedbackEditorProps) => {
               </InputLabel>
             </InputRow>
             <InputRow>
-              <FormControlLabel
-                control={
-                  <Switch
-                    checked={formik.values.feedbackRequired}
-                    onChange={() =>
-                      formik.setFieldValue(
-                        "feedbackRequired",
-                        !formik.values.feedbackRequired,
-                      )
-                    }
-                  />
+              <Switch
+                checked={formik.values.feedbackRequired}
+                onChange={() =>
+                  formik.setFieldValue(
+                    "feedbackRequired",
+                    !formik.values.feedbackRequired,
+                  )
                 }
                 label="Feedback required"
               />

diff --git a/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx b/editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx
@@ -1,10 +1,8 @@
 import RuleIcon from "@mui/icons-material/Rule";
 import Box from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
-import FormControlLabel from "@mui/material/FormControlLabel";
 import MenuItem from "@mui/material/MenuItem";
 import { styled } from "@mui/material/styles";
-import Switch from "@mui/material/Switch";
 import Typography from "@mui/material/Typography";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { EditorProps } from "@planx/components/shared/types";
@@ -24,6 +22,7 @@ import SelectInput from "ui/editor/SelectInput/SelectInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
+import { Switch } from "ui/shared/Switch";
 
 import { ICONS } from "../shared/icons";
 import {
@@ -90,17 +89,13 @@ function FileUploadAndLabelComponent(props: Props) {
             />
           </InputRow>
           <InputRow>
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={formik.values.hideDropZone}
-                  onChange={() =>
-                    formik.setFieldValue(
-                      "hideDropZone",
-                      !formik.values.hideDropZone,
-                    )
-                  }
-                />
+            <Switch
+              checked={formik.values.hideDropZone}
+              onChange={() =>
+                formik.setFieldValue(
+                  "hideDropZone",
+                  !formik.values.hideDropZone,
+                )
               }
               label="Hide the drop zone and show files list for information only"
             />

diff --git a/editor.planx.uk/src/@planx/components/FindProperty/Editor.tsx b/editor.planx.uk/src/@planx/components/FindProperty/Editor.tsx
@@ -1,5 +1,3 @@
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Switch from "@mui/material/Switch";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
@@ -12,6 +10,7 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
+import { Switch } from "ui/shared/Switch";
 
 import { ICONS } from "../shared/icons";
 import type { FindProperty } from "./model";
@@ -58,17 +57,13 @@ function FindPropertyComponent(props: Props) {
         </ModalSectionContent>
         <ModalSectionContent>
           <InputRow>
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={formik.values.allowNewAddresses}
-                  onChange={() =>
-                    formik.setFieldValue(
-                      "allowNewAddresses",
-                      !formik.values.allowNewAddresses,
-                    )
-                  }
-                />
+            <Switch
+              checked={formik.values.allowNewAddresses}
+              onChange={() =>
+                formik.setFieldValue(
+                  "allowNewAddresses",
+                  !formik.values.allowNewAddresses,
+                )
               }
               label="Allow users to plot new addresses without a UPRN"
             />

diff --git a/editor.planx.uk/src/@planx/components/Notice/Editor.tsx b/editor.planx.uk/src/@planx/components/Notice/Editor.tsx
@@ -1,5 +1,3 @@
-import FormControlLabel from "@mui/material/FormControlLabel";
-import Switch from "@mui/material/Switch";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import type { Notice } from "@planx/components/Notice/model";
 import { parseNotice } from "@planx/components/Notice/model";
@@ -12,6 +10,7 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
+import { Switch } from "ui/shared/Switch";
 
 import { InternalNotes } from "../../../ui/editor/InternalNotes";
 import { MoreInformation } from "../../../ui/editor/MoreInformation/MoreInformation";
@@ -70,17 +69,13 @@ const NoticeEditor: React.FC<NoticeEditorProps> = (props) => {
             }}
           />
           <InputRow>
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={Boolean(props.value.resetButton)}
-                  onChange={() =>
-                    props.onChange({
-                      ...props.value,
-                      resetButton: !props.value.resetButton,
-                    })
-                  }
-                />
+            <Switch
+              checked={Boolean(props.value.resetButton)}
+              onChange={() =>
+                props.onChange({
+                  ...props.value,
+                  resetButton: !props.value.resetButton,
+                })
               }
               label="Reset to start of service"
             />