refactor: split out ui file (#3865)

editor.planx.uk/src/@planx/components/AddressInput/Editor.tsx

@@ -1,5 +1,5 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
-import { EditorProps, ICONS } from "@planx/components/ui";
+import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import React from "react";
 import { ModalFooter } from "ui/editor/ModalFooter";
@@ -9,6 +9,7 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { ICONS } from "../shared/icons";
 import { AddressInput, parseAddressInput } from "./model";
 
 export type Props = EditorProps<TYPES.AddressInput, AddressInput>;

editor.planx.uk/src/@planx/components/AddressInput/Public.tsx

@@ -1,6 +1,6 @@
 import Card from "@planx/components/shared/Preview/Card";
 import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
-import type { PublicProps } from "@planx/components/ui";
+import type { PublicProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import React from "react";
 import InputLabel from "ui/public/InputLabel";

editor.planx.uk/src/@planx/components/Calculate/Editor.tsx

@@ -3,7 +3,7 @@ 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, ICONS } from "@planx/components/ui";
+import { EditorProps } from "@planx/components/shared/types";
 import { FormikErrors, useFormik } from "formik";
 import React from "react";
 import InputGroup from "ui/editor/InputGroup";
@@ -13,6 +13,7 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { ICONS } from "../shared/icons";
 import type { Calculate } from "./model";
 import { evaluate, getVariables, parseCalculate } from "./model";
 

editor.planx.uk/src/@planx/components/Calculate/Public.tsx

@@ -1,5 +1,5 @@
+import type { PublicProps } from "@planx/components/shared/types";
 import { makeData } from "@planx/components/shared/utils";
-import type { PublicProps } from "@planx/components/ui";
 import { useStore } from "pages/FlowEditor/lib/store";
 import { useEffect } from "react";
 

editor.planx.uk/src/@planx/components/Checklist/Editor.tsx

@@ -23,37 +23,14 @@ import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
-import { BaseNodeData, Option, parseBaseNodeData } from "../shared";
+import { Option, parseBaseNodeData } from "../shared";
+import { ICONS } from "../shared/icons";
 import PermissionSelect from "../shared/PermissionSelect";
-import { ICONS } from "../ui";
-import type { Category, Checklist, Group } from "./model";
+import type { Checklist, Group } from "./model";
 import { toggleExpandableChecklist } from "./model";
+import { ChecklistProps, OptionEditorProps } from "./types";
 
-export interface ChecklistProps extends Checklist {
-  text: string;
-  handleSubmit?: Function;
-  node?: {
-    data?: {
-      allRequired?: boolean;
-      neverAutoAnswer?: boolean;
-      categories?: Array<Category>;
-      description?: string;
-      fn?: string;
-      img?: string;
-      text: string;
-    } & BaseNodeData;
-  };
-}
-
-const OptionEditor: React.FC<{
-  index: number;
-  value: Option;
-  onChange: (newVal: Option) => void;
-  groupIndex?: number;
-  groups?: Array<string>;
-  onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
-  showValueField?: boolean;
-}> = (props) => {
+const OptionEditor: React.FC<OptionEditorProps> = (props) => {
   return (
     <div style={{ width: "100%" }}>
       <InputRow>

editor.planx.uk/src/@planx/components/Checklist/Public.tsx

@@ -22,7 +22,7 @@ import ErrorWrapper from "ui/shared/ErrorWrapper";
 import { object } from "yup";
 
 import { Option } from "../shared";
-import type { PublicProps } from "../ui";
+import type { PublicProps } from "../shared/types";
 
 export type Props = PublicProps<Checklist>;
 

editor.planx.uk/src/@planx/components/Checklist/types.ts

@@ -0,0 +1,27 @@
+import { BaseNodeData, Option } from "../shared";
+import type { Category, Checklist } from "./model";
+
+export interface ChecklistProps extends Checklist {
+  text: string;
+  handleSubmit?: Function;
+  node?: {
+    data?: {
+      allRequired?: boolean;
+      neverAutoAnswer?: boolean;
+      categories?: Array<Category>;
+      description?: string;
+      fn?: string;
+      img?: string;
+      text: string;
+    } & BaseNodeData;
+  };
+}
+export interface OptionEditorProps {
+  index: number;
+  value: Option;
+  onChange: (newVal: Option) => void;
+  groupIndex?: number;
+  groups?: Array<string>;
+  onMoveToGroup?: (itemIndex: number, groupIndex: number) => void;
+  showValueField?: boolean;
+}

editor.planx.uk/src/@planx/components/Confirmation/Editor.tsx

@@ -1,6 +1,6 @@
 import Box from "@mui/material/Box";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
-import { EditorProps, ICONS } from "@planx/components/ui";
+import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import React, { ChangeEvent } from "react";
 import ListManager, {
@@ -12,6 +12,7 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { ICONS } from "../shared/icons";
 import { Confirmation, parseNextSteps, Step } from "./model";
 
 export type Props = EditorProps<TYPES.Confirmation, Confirmation>;

editor.planx.uk/src/@planx/components/Confirmation/Public.tsx

@@ -4,7 +4,7 @@ import Typography from "@mui/material/Typography";
 import { QuestionAndResponses } from "@opensystemslab/planx-core/types";
 import Card from "@planx/components/shared/Preview/Card";
 import { SummaryListTable } from "@planx/components/shared/Preview/SummaryList";
-import { PublicProps } from "@planx/components/ui";
+import { PublicProps } from "@planx/components/shared/types";
 import { objectWithoutNullishValues } from "lib/objectHelpers";
 import { Store, useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useState } from "react";

editor.planx.uk/src/@planx/components/ContactInput/Editor.tsx

@@ -1,5 +1,5 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
-import { EditorProps, ICONS } from "@planx/components/ui";
+import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import React from "react";
 import { ModalFooter } from "ui/editor/ModalFooter";
@@ -9,6 +9,7 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { ICONS } from "../shared/icons";
 import { ContactInput, parseContactInput } from "./model";
 
 export type Props = EditorProps<TYPES.ContactInput, ContactInput>;

editor.planx.uk/src/@planx/components/ContactInput/Public.tsx

@@ -1,6 +1,6 @@
 import Card from "@planx/components/shared/Preview/Card";
 import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
-import type { PublicProps } from "@planx/components/ui";
+import type { PublicProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import React from "react";
 import InputLabel from "ui/public/InputLabel";

editor.planx.uk/src/@planx/components/Content/Editor.tsx

@@ -1,7 +1,7 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import type { Content } from "@planx/components/Content/model";
 import { parseContent } from "@planx/components/Content/model";
-import { EditorProps, ICONS } from "@planx/components/ui";
+import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import React from "react";
 import ColorPicker from "ui/editor/ColorPicker/ColorPicker";
@@ -11,6 +11,8 @@ import ModalSectionContent from "ui/editor/ModalSectionContent";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import InputRow from "ui/shared/InputRow";
 
+import { ICONS } from "../shared/icons";
+
 export type Props = EditorProps<TYPES.Content, Content>;
 
 const ContentComponent: React.FC<Props> = (props) => {

editor.planx.uk/src/@planx/components/Content/Public.tsx

@@ -5,7 +5,7 @@ import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import type { Content } from "@planx/components/Content/model";
 import Card from "@planx/components/shared/Preview/Card";
-import { PublicProps } from "@planx/components/ui";
+import { PublicProps } from "@planx/components/shared/types";
 import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";
 import React from "react";
 import { getContrastTextColor } from "styleUtils";

editor.planx.uk/src/@planx/components/DateInput/Editor.tsx

@@ -6,7 +6,7 @@ import {
   paddedDate,
   parseDateInput,
 } from "@planx/components/DateInput/model";
-import { EditorProps, ICONS } from "@planx/components/ui";
+import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import React from "react";
 import { ModalFooter } from "ui/editor/ModalFooter";
@@ -17,6 +17,8 @@ import DateInputUi from "ui/shared/DateInput/DateInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { ICONS } from "../shared/icons";
+
 export type Props = EditorProps<TYPES.DateInput, DateInput>;
 
 const DateInputComponent: React.FC<Props> = (props) => {

editor.planx.uk/src/@planx/components/DateInput/Public.tsx

@@ -7,7 +7,7 @@ import {
 } from "@planx/components/DateInput/model";
 import Card from "@planx/components/shared/Preview/Card";
 import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
-import { PublicProps } from "@planx/components/ui";
+import { PublicProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import React from "react";
 import DateInputComponent from "ui/shared/DateInput/DateInput";

editor.planx.uk/src/@planx/components/DrawBoundary/Editor.tsx

@@ -1,7 +1,7 @@
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
-import { EditorProps, ICONS } from "@planx/components/ui";
+import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import React from "react";
 import InputGroup from "ui/editor/InputGroup";
@@ -12,6 +12,7 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { ICONS } from "../shared/icons";
 import type { DrawBoundary } from "./model";
 import { parseDrawBoundary } from "./model";
 

editor.planx.uk/src/@planx/components/DrawBoundary/Public/index.tsx

@@ -11,8 +11,8 @@ import {
   MapFooter,
 } from "@planx/components/shared/Preview/MapContainer";
 import { PrivateFileUpload } from "@planx/components/shared/PrivateFileUpload/PrivateFileUpload";
+import type { PublicProps } from "@planx/components/shared/types";
 import { squareMetresToHectares } from "@planx/components/shared/utils";
-import type { PublicProps } from "@planx/components/ui";
 import buffer from "@turf/buffer";
 import { point } from "@turf/helpers";
 import { Feature } from "geojson";

editor.planx.uk/src/@planx/components/ExternalPortal/Editor.tsx

@@ -4,7 +4,7 @@ import React from "react";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 
-import { ICONS } from "../ui";
+import { ICONS } from "../shared/icons";
 
 interface Flow {
   id: string;

editor.planx.uk/src/@planx/components/Feedback/Public.tsx

@@ -4,7 +4,7 @@ import Link from "@mui/material/Link";
 import Typography from "@mui/material/Typography";
 import Card from "@planx/components/shared/Preview/Card";
 import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
-import type { PublicProps } from "@planx/components/ui";
+import type { PublicProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import React from "react";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";

editor.planx.uk/src/@planx/components/FileUpload/Editor.tsx

@@ -1,5 +1,4 @@
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
-import { ICONS } from "@planx/components/ui";
 import { useFormik } from "formik";
 import React from "react";
 import { ModalFooter } from "ui/editor/ModalFooter";
@@ -9,6 +8,8 @@ import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 
+import { ICONS } from "../shared/icons";
+
 function Component(props: any) {
   const formik = useFormik<{
     color: string;

editor.planx.uk/src/@planx/components/FileUploadAndLabel/Editor.tsx

@@ -7,7 +7,7 @@ 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, ICONS } from "@planx/components/ui";
+import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import { lowerCase, merge, upperFirst } from "lodash";
 import React from "react";
@@ -25,6 +25,7 @@ import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
+import { ICONS } from "../shared/icons";
 import {
   checkIfConditionalRule,
   Condition,

editor.planx.uk/src/@planx/components/FileUploadAndLabel/Public.tsx

@@ -6,7 +6,7 @@ import ListItem from "@mui/material/ListItem";
 import ListSubheader from "@mui/material/ListSubheader";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import { PublicProps } from "@planx/components/ui";
+import { PublicProps } from "@planx/components/shared/types";
 import { PrintButton } from "components/PrintButton";
 import capitalize from "lodash/capitalize";
 import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";

editor.planx.uk/src/@planx/components/Filter/Editor.tsx

@@ -9,7 +9,7 @@ import React from "react";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 
-import { ICONS } from "../ui";
+import { ICONS } from "../shared/icons";
 
 export interface Props {
   id?: string;

editor.planx.uk/src/@planx/components/Filter/Public.tsx

@@ -1,16 +1,14 @@
-import type { PublicProps } from "@planx/components/ui";
 import { useStore } from "pages/FlowEditor/lib/store";
 import { useEffect } from "react";
 
+import { PublicProps } from "../shared/types";
 import type { Props as Filter } from "./Editor";
 
 export type Props = PublicProps<Filter>;
 
 // Filters are always auto-answered and never seen by a user, but should still leave a breadcrumb
 export default function Component(props: Props) {
-  const autoAnswerableFlag = useStore(
-    (state) => state.autoAnswerableFlag,
-  );
+  const autoAnswerableFlag = useStore((state) => state.autoAnswerableFlag);
 
   let idThatCanBeAutoAnswered: string | undefined;
   if (props.id) idThatCanBeAutoAnswered = autoAnswerableFlag(props.id);

editor.planx.uk/src/@planx/components/FindProperty/Editor.tsx

@@ -1,7 +1,7 @@
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Switch from "@mui/material/Switch";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
-import { EditorProps, ICONS } from "@planx/components/ui";
+import { EditorProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import React from "react";
 import InputGroup from "ui/editor/InputGroup";
@@ -13,6 +13,7 @@ import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 
+import { ICONS } from "../shared/icons";
 import type { FindProperty } from "./model";
 import { parseFindProperty } from "./model";
 

editor.planx.uk/src/@planx/components/FindProperty/Public/index.tsx

@@ -5,8 +5,8 @@ import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
 import Card from "@planx/components/shared/Preview/Card";
 import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
+import { PublicProps } from "@planx/components/shared/types";
 import { squareMetresToHectares } from "@planx/components/shared/utils";
-import { PublicProps } from "@planx/components/ui";
 import area from "@turf/area";
 import DelayedLoadingIndicator from "components/DelayedLoadingIndicator/DelayedLoadingIndicator";
 import { Feature } from "geojson";

editor.planx.uk/src/@planx/components/InternalPortal/Editor.tsx

@@ -3,7 +3,7 @@ import { useFormik } from "formik";
 import React from "react";
 import InputField from "ui/editor/InputField/InputField";
 
-import { FormError } from "../ui";
+import { FormError } from "../shared/types";
 
 interface Flow {
   id: string;

editor.planx.uk/src/@planx/components/List/Editor.tsx

@@ -13,7 +13,8 @@ import InputRow from "ui/shared/InputRow";
 import InputRowItem from "ui/shared/InputRowItem";
 import InputRowLabel from "ui/shared/InputRowLabel";
 
-import { EditorProps, ICONS } from "../ui";
+import { ICONS } from "../shared/icons";
+import { EditorProps } from "../shared/types";
 import { List, parseContent, validationSchema } from "./model";
 import { ProposedAdvertisements } from "./schemas/Adverts";
 import { NonResidentialFloorspace } from "./schemas/Floorspace";