chore: Page boilerplate

editor.planx.uk/package.json

@@ -15,7 +15,7 @@
     "@mui/material": "^5.15.10",
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "1.0.0-alpha.3",
-    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#bea2192",
+    "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#e6040d9",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",

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

@@ -0,0 +1,28 @@
+import { ComponentType as TYPES } from "@opensystemslab/planx-core/types";
+import { useFormik } from "formik";
+import React from "react";
+
+import { EditorProps } from "../ui";
+import { Page, parsePage } from "./model";
+
+type Props = EditorProps<TYPES.Page, Page>;
+
+export default PageComponent;
+
+function PageComponent(props: Props) {
+  const formik = useFormik({
+    initialValues: parsePage(props.node?.data),
+    onSubmit: (newValues) => {
+      props.handleSubmit?.({
+        type: TYPES.Page,
+        data: newValues,
+      });
+    },
+  });
+
+  return (
+    <form onSubmit={formik.handleSubmit} id="modal">
+      //...
+    </form>
+  );
+}

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

@@ -0,0 +1,22 @@
+import { PublicProps } from "@planx/components/ui";
+import React from "react";
+
+import Card from "../shared/Preview/Card";
+import CardHeader from "../shared/Preview/CardHeader";
+import { Page } from "./model";
+
+type Props = PublicProps<Page>;
+
+function PageComponent(props: Props) {
+  return (
+    <Card handleSubmit={props.handleSubmit} isValid>
+      <CardHeader
+        info={props.info}
+        policyRef={props.policyRef}
+        howMeasured={props.howMeasured}
+      />
+    </Card>
+  );
+}
+
+export default PageComponent;

editor.planx.uk/src/@planx/components/Page/model.ts

@@ -0,0 +1,10 @@
+import { MoreInformation, parseMoreInformation } from "../shared";
+
+export interface Page extends MoreInformation {
+  fn: string;
+}
+
+export const parsePage = (data: Record<string, any> | undefined): Page => ({
+  fn: data?.fn || "",
+  ...parseMoreInformation(data),
+});

editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx

@@ -108,6 +108,8 @@ const presentationalComponents: {
   [TYPES.Notice]: undefined,
   [TYPES.NextSteps]: undefined,
   [TYPES.NumberInput]: NumberInput,
+  // TODO!
+  [TYPES.Page]: undefined,
   [TYPES.Pay]: undefined,
   [TYPES.PlanningConstraints]: undefined,
   [TYPES.PropertyInformation]: undefined,

editor.planx.uk/src/@planx/components/ui.tsx

@@ -1,4 +1,5 @@
 import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import Article from "@mui/icons-material/Article";
 import BorderColorIcon from "@mui/icons-material/BorderColor";
 import CallSplit from "@mui/icons-material/CallSplit";
 import CheckBoxOutlined from "@mui/icons-material/CheckBoxOutlined";
@@ -81,6 +82,7 @@ export const ICONS: {
   [TYPES.Notice]: ReportProblemOutlined,
   [TYPES.NextSteps]: ArrowForwardIcon,
   [TYPES.NumberInput]: Pin,
+  [TYPES.Page]: Article,
   [TYPES.Pay]: PaymentOutlined,
   [TYPES.PlanningConstraints]: Map,
   [TYPES.PropertyInformation]: LocationOnOutlined,

editor.planx.uk/src/pages/FlowEditor/components/Flow/components/Node.tsx

@@ -77,6 +77,8 @@ const Node: React.FC<any> = (props) => {
       return <Question {...allProps} text={node?.data?.title ?? "Notice"} />;
     case TYPES.NumberInput:
       return <Question {...allProps} text={node?.data?.title ?? "Number"} />;
+    case TYPES.Page:
+      return <Question {...allProps} text={node?.data?.title ?? "Page"} />;
     case TYPES.Pay:
       return <Question {...allProps} text={node?.data?.title ?? "Pay"} />;
     case TYPES.PlanningConstraints:

editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx

@@ -62,6 +62,7 @@ const NodeTypeSelect: React.FC<{
         <option value={TYPES.AddressInput}>Address Input</option>
         <option value={TYPES.ContactInput}>Contact Input</option>
         <option value={TYPES.List}>List</option>
+        <option value={TYPES.Page}>Page</option>
         <option value={TYPES.MapAndLabel}>Map and Label (Testing only)</option>
       </optgroup>
       <optgroup label="Information">

editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts

@@ -18,6 +18,7 @@ import MapAndLabel from "@planx/components/MapAndLabel/Editor";
 import NextSteps from "@planx/components/NextSteps/Editor";
 import Notice from "@planx/components/Notice/Editor";
 import NumberInput from "@planx/components/NumberInput/Editor";
+import Page from "@planx/components/Page/Editor";
 import Pay from "@planx/components/Pay/Editor";
 import PlanningConstraints from "@planx/components/PlanningConstraints/Editor";
 import PropertyInformation from "@planx/components/PropertyInformation/Editor";
@@ -58,6 +59,7 @@ const components: {
   "next-steps": NextSteps,
   notice: Notice,
   "number-input": NumberInput,
+  page: Page,
   pay: Pay,
   "planning-constraints": PlanningConstraints,
   "property-information": PropertyInformation,

editor.planx.uk/src/pages/FlowEditor/data/types.ts

@@ -23,6 +23,7 @@ export const SLUGS: {
   [TYPES.NextSteps]: "next-steps",
   [TYPES.Notice]: "notice",
   [TYPES.NumberInput]: "number-input",
+  [TYPES.Page]: "page",
   [TYPES.Pay]: "pay",
   [TYPES.PlanningConstraints]: "planning-constraints",
   [TYPES.PropertyInformation]: "property-information",

editor.planx.uk/src/pages/Preview/Node.tsx

@@ -18,6 +18,7 @@ import MapAndLabel from "@planx/components/MapAndLabel/Public";
 import NextSteps from "@planx/components/NextSteps/Public";
 import Notice from "@planx/components/Notice/Public";
 import NumberInput from "@planx/components/NumberInput/Public";
+import Page from "@planx/components/Page/Public";
 import Pay from "@planx/components/Pay/Public";
 import PlanningConstraints from "@planx/components/PlanningConstraints/Public";
 import PropertyInformation from "@planx/components/PropertyInformation/Public";
@@ -144,6 +145,9 @@ const Node: React.FC<Props> = (props) => {
     case TYPES.NumberInput:
       return <NumberInput {...allProps} />;
 
+    case TYPES.Page:
+      return <Page {...allProps} />;
+
     case TYPES.Pay:
       return <Pay {...allProps} />;