From 323af7faf0f3fc00bb9bfb412f98f0eb0c8e1014 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Fri, 3 May 2024 18:33:36 +0100
Subject: [PATCH] chore: Boilerplate for new component

---
 editor.planx.uk/package.json                  |  2 +-
 editor.planx.uk/pnpm-lock.yaml                | 29 +++++--------------
 .../src/@planx/components/List/Editor.tsx     | 29 +++++++++++++++++++
 .../@planx/components/List/Public.test.tsx    | 10 +++++++
 .../src/@planx/components/List/Public.tsx     | 27 +++++++++++++++++
 .../src/@planx/components/List/model.ts       | 10 +++++++
 .../components/shared/Preview/SummaryList.tsx |  1 +
 editor.planx.uk/src/@planx/components/ui.tsx  |  2 ++
 .../components/Flow/components/Node.tsx       |  2 ++
 .../FlowEditor/components/forms/FormModal.tsx |  4 +++
 .../FlowEditor/components/forms/index.ts      |  2 ++
 .../src/pages/FlowEditor/data/types.ts        |  1 +
 editor.planx.uk/src/pages/Preview/Node.tsx    |  4 +++
 13 files changed, 100 insertions(+), 23 deletions(-)
 create mode 100644 editor.planx.uk/src/@planx/components/List/Editor.tsx
 create mode 100644 editor.planx.uk/src/@planx/components/List/Public.test.tsx
 create mode 100644 editor.planx.uk/src/@planx/components/List/Public.tsx
 create mode 100644 editor.planx.uk/src/@planx/components/List/model.ts

diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json
index e87ab3859a..f660f9e01c 100644
--- a/editor.planx.uk/package.json
+++ b/editor.planx.uk/package.json
@@ -12,7 +12,7 @@
     "@mui/material": "^5.15.2",
     "@mui/utils": "^5.15.2",
     "@opensystemslab/map": "^0.8.1",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#722e1c7",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#46a3ee4",
     "@tiptap/core": "^2.0.3",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",
diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml
index 43d80a5258..cee5f4172a 100644
--- a/editor.planx.uk/pnpm-lock.yaml
+++ b/editor.planx.uk/pnpm-lock.yaml
@@ -38,8 +38,8 @@ dependencies:
     specifier: ^0.8.1
     version: 0.8.1
   '@opensystemslab/planx-core':
-    specifier: git+https://github.com/theopensystemslab/planx-core#722e1c7
-    version: github.com/theopensystemslab/planx-core/722e1c7(@types/react@18.2.45)
+    specifier: git+https://github.com/theopensystemslab/planx-core#46a3ee4
+    version: github.com/theopensystemslab/planx-core/46a3ee4(@types/react@18.2.45)
   '@tiptap/core':
     specifier: ^2.0.3
     version: 2.0.3(@tiptap/pm@2.0.3)
@@ -6216,7 +6216,7 @@ packages:
       '@storybook/preview-api': 7.6.7
       '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0)
       '@storybook/types': 7.6.7
-      '@types/lodash': 4.14.202
+      '@types/lodash': 4.17.0
       color-convert: 2.0.1
       dequal: 2.0.3
       lodash: 4.17.21
@@ -7150,20 +7150,6 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
-  /@testing-library/dom@8.20.1:
-    resolution: {integrity: sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==}
-    engines: {node: '>=12'}
-    dependencies:
-      '@babel/code-frame': 7.24.2
-      '@babel/runtime': 7.24.5
-      '@types/aria-query': 5.0.4
-      aria-query: 5.1.3
-      chalk: 4.1.2
-      dom-accessibility-api: 0.5.16
-      lz-string: 1.5.0
-      pretty-format: 27.5.1
-    dev: true
-
   /@testing-library/dom@9.3.4:
     resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==}
     engines: {node: '>=14'}
@@ -7201,7 +7187,7 @@ packages:
       react-dom: ^18.0.0
     dependencies:
       '@babel/runtime': 7.24.5
-      '@testing-library/dom': 8.20.1
+      '@testing-library/dom': 9.3.4
       '@types/react-dom': 18.2.18
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
@@ -7769,7 +7755,6 @@ packages:
 
   /@types/lodash@4.17.0:
     resolution: {integrity: sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==}
-    dev: false
 
   /@types/mdast@3.0.15:
     resolution: {integrity: sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==}
@@ -21305,9 +21290,9 @@ packages:
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
-  github.com/theopensystemslab/planx-core/722e1c7(@types/react@18.2.45):
-    resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/722e1c7}
-    id: github.com/theopensystemslab/planx-core/722e1c7
+  github.com/theopensystemslab/planx-core/46a3ee4(@types/react@18.2.45):
+    resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/46a3ee4}
+    id: github.com/theopensystemslab/planx-core/46a3ee4
     name: '@opensystemslab/planx-core'
     version: 1.0.0
     prepare: true
diff --git a/editor.planx.uk/src/@planx/components/List/Editor.tsx b/editor.planx.uk/src/@planx/components/List/Editor.tsx
new file mode 100644
index 0000000000..080e07a605
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/List/Editor.tsx
@@ -0,0 +1,29 @@
+import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import { useFormik } from "formik";
+import React from "react";
+import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
+
+import { EditorProps } from "../ui";
+import { List, parseContent } from "./model";
+
+type Props = EditorProps<TYPES.List, List>;
+
+function ListComponent(props: Props) {
+  const formik = useFormik({
+    initialValues: parseContent(props.node?.data),
+    onSubmit: (newValues) => {
+      props.handleSubmit?.({
+        type: TYPES.List,
+        data: newValues,
+      });
+    },
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit} id="modal">
+      <FeaturePlaceholder title="Under development" />
+    </form>
+  );
+}
+
+export default ListComponent;
diff --git a/editor.planx.uk/src/@planx/components/List/Public.test.tsx b/editor.planx.uk/src/@planx/components/List/Public.test.tsx
new file mode 100644
index 0000000000..316d17a08f
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/List/Public.test.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { axe, setup } from "testUtils";
+
+import ListComponent from "./Editor";
+
+it("should not have any accessibility violations", async () => {
+  const { container } = setup(<ListComponent />);
+  const results = await axe(container);
+  expect(results).toHaveNoViolations();
+});
diff --git a/editor.planx.uk/src/@planx/components/List/Public.tsx b/editor.planx.uk/src/@planx/components/List/Public.tsx
new file mode 100644
index 0000000000..f147d5c2a9
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/List/Public.tsx
@@ -0,0 +1,27 @@
+import { PublicProps } from "@planx/components/ui";
+import { hasFeatureFlag } from "lib/featureFlags";
+import React from "react";
+import { FeaturePlaceholder } from "ui/editor/FeaturePlaceholder";
+
+import Card from "../shared/Preview/Card";
+import QuestionHeader from "../shared/Preview/QuestionHeader";
+import { List } from "./model";
+
+type Props = PublicProps<List>;
+
+function ListComponent(props: Props) {
+  if (!hasFeatureFlag("LIST_COMPONENT")) return null;
+
+  return (
+    <Card handleSubmit={props.handleSubmit} isValid>
+      <QuestionHeader
+        info={props.info}
+        policyRef={props.policyRef}
+        howMeasured={props.howMeasured}
+      />
+      <FeaturePlaceholder title="Under development" />
+    </Card>
+  );
+}
+
+export default ListComponent;
diff --git a/editor.planx.uk/src/@planx/components/List/model.ts b/editor.planx.uk/src/@planx/components/List/model.ts
new file mode 100644
index 0000000000..f2139bc96e
--- /dev/null
+++ b/editor.planx.uk/src/@planx/components/List/model.ts
@@ -0,0 +1,10 @@
+import { MoreInformation, parseMoreInformation } from "../shared";
+
+export interface List extends MoreInformation {
+  fn: string;
+}
+
+export const parseContent = (data: Record<string, any> | undefined): List => ({
+  fn: data?.fn || "",
+  ...parseMoreInformation(data),
+});
diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
index eba2d82db3..d94ba08972 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
@@ -100,6 +100,7 @@ const presentationalComponents: {
   [TYPES.Flow]: undefined,
   [TYPES.InternalPortal]: undefined,
   [TYPES.FileUploadAndLabel]: FileUploadAndLabel,
+  [TYPES.List]: undefined,
   [TYPES.Notice]: undefined,
   [TYPES.NextSteps]: undefined,
   [TYPES.NumberInput]: NumberInput,
diff --git a/editor.planx.uk/src/@planx/components/ui.tsx b/editor.planx.uk/src/@planx/components/ui.tsx
index 262e49dd30..f19148de9e 100644
--- a/editor.planx.uk/src/@planx/components/ui.tsx
+++ b/editor.planx.uk/src/@planx/components/ui.tsx
@@ -12,6 +12,7 @@ import FunctionsIcon from "@mui/icons-material/Functions";
 import Home from "@mui/icons-material/Home";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
 import List from "@mui/icons-material/List";
+import ListAlt from "@mui/icons-material/ListAlt";
 import LocationOnOutlined from "@mui/icons-material/LocationOnOutlined";
 import Map from "@mui/icons-material/Map";
 import PaymentOutlined from "@mui/icons-material/PaymentOutlined";
@@ -72,6 +73,7 @@ export const ICONS: {
   [TYPES.FindProperty]: SearchOutlined,
   [TYPES.Flow]: undefined,
   [TYPES.InternalPortal]: undefined,
+  [TYPES.List]: ListAlt,
   [TYPES.Notice]: ReportProblemOutlined,
   [TYPES.NextSteps]: ArrowForwardIcon,
   [TYPES.NumberInput]: Pin,
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx
index 271fe92ffd..bdeee2659d 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx
@@ -64,6 +64,8 @@ const Node: React.FC<any> = (props) => {
       return <Filter {...allProps} text="(Flags Filter)" />;
     case TYPES.FindProperty:
       return <Question {...allProps} text="Find property" />;
+    case TYPES.List:
+      return <Question {...allProps} text="List" />;
     case TYPES.NextSteps:
       return <Question {...allProps} text="Next steps" />;
     case TYPES.Notice:
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
index 7c9fe0f2c4..fb12ce623b 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
+++ b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx
@@ -10,6 +10,7 @@ import { styled } from "@mui/material/styles";
 import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
 import { parseFormValues } from "@planx/components/shared";
 import ErrorFallback from "components/ErrorFallback";
+import { hasFeatureFlag } from "lib/featureFlags";
 import React from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useNavigation } from "react-navi";
@@ -60,6 +61,9 @@ const NodeTypeSelect: React.FC<{
         <option value={TYPES.DateInput}>Date Input</option>
         <option value={TYPES.AddressInput}>Address Input</option>
         <option value={TYPES.ContactInput}>Contact Input</option>
+        {hasFeatureFlag("LIST_COMPONENT") && (
+          <option value={TYPES.List}>List</option>
+        )}
       </optgroup>
       <optgroup label="Information">
         <option value={TYPES.TaskList}>Task List</option>
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts b/editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts
index 97a3085793..ea89e890bb 100644
--- a/editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts
@@ -13,6 +13,7 @@ import FileUploadAndLabel from "@planx/components/FileUploadAndLabel/Editor";
 import Filter from "@planx/components/Filter/Editor";
 import FindProperty from "@planx/components/FindProperty/Editor";
 import InternalPortal from "@planx/components/InternalPortal/Editor";
+import List from "@planx/components/List/Editor";
 import NextSteps from "@planx/components/NextSteps/Editor";
 import Notice from "@planx/components/Notice/Editor";
 import NumberInput from "@planx/components/NumberInput/Editor";
@@ -51,6 +52,7 @@ const components: {
   flow: EmptyComponent,
   "internal-portal": InternalPortal,
   "file-upload-and-label": FileUploadAndLabel,
+  list: List,
   "next-steps": NextSteps,
   notice: Notice,
   "number-input": NumberInput,
diff --git a/editor.planx.uk/src/pages/FlowEditor/data/types.ts b/editor.planx.uk/src/pages/FlowEditor/data/types.ts
index 7672021d03..d613fe0f9e 100644
--- a/editor.planx.uk/src/pages/FlowEditor/data/types.ts
+++ b/editor.planx.uk/src/pages/FlowEditor/data/types.ts
@@ -18,6 +18,7 @@ export const SLUGS: {
   [TYPES.Flow]: "flow",
   [TYPES.InternalPortal]: "internal-portal",
   [TYPES.FileUploadAndLabel]: "file-upload-and-label",
+  [TYPES.List]: "list",
   [TYPES.NextSteps]: "next-steps",
   [TYPES.Notice]: "notice",
   [TYPES.NumberInput]: "number-input",
diff --git a/editor.planx.uk/src/pages/Preview/Node.tsx b/editor.planx.uk/src/pages/Preview/Node.tsx
index 229b59d1aa..b2a22b4dec 100644
--- a/editor.planx.uk/src/pages/Preview/Node.tsx
+++ b/editor.planx.uk/src/pages/Preview/Node.tsx
@@ -15,6 +15,7 @@ import DrawBoundary from "@planx/components/DrawBoundary/Public";
 import FileUpload from "@planx/components/FileUpload/Public";
 import FileUploadAndLabel from "@planx/components/FileUploadAndLabel/Public";
 import FindProperty from "@planx/components/FindProperty/Public";
+import List from "@planx/components/List/Public";
 import NextSteps from "@planx/components/NextSteps/Public";
 import Notice from "@planx/components/Notice/Public";
 import NumberInput from "@planx/components/NumberInput/Public";
@@ -167,6 +168,9 @@ const Node: React.FC<any> = (props: Props) => {
     case TYPES.FindProperty:
       return <FindProperty {...allProps} />;
 
+    case TYPES.List:
+      return <List {...allProps} />;
+
     case TYPES.NextSteps:
       return <NextSteps {...allProps} />;