From ac046693b290a88ebb0b535f585cd4185a689af9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= Date: Sat, 14 Sep 2024 16:39:24 +0100 Subject: [PATCH] chore: Page boilerplate --- editor.planx.uk/package.json | 2 +- editor.planx.uk/pnpm-lock.yaml | 10 +++---- .../src/@planx/components/Page/Editor.tsx | 28 +++++++++++++++++++ .../@planx/components/Page/Public.test.tsx | 0 .../src/@planx/components/Page/Public.tsx | 22 +++++++++++++++ .../src/@planx/components/Page/model.ts | 10 +++++++ .../components/shared/Preview/SummaryList.tsx | 2 ++ editor.planx.uk/src/@planx/components/ui.tsx | 2 ++ .../components/Flow/components/Node.tsx | 2 ++ .../FlowEditor/components/forms/FormModal.tsx | 1 + .../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, 80 insertions(+), 6 deletions(-) create mode 100644 editor.planx.uk/src/@planx/components/Page/Editor.tsx create mode 100644 editor.planx.uk/src/@planx/components/Page/Public.test.tsx create mode 100644 editor.planx.uk/src/@planx/components/Page/Public.tsx create mode 100644 editor.planx.uk/src/@planx/components/Page/model.ts diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json index 9d83a1a725..622801495b 100644 --- a/editor.planx.uk/package.json +++ b/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", diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml index 151b3d3a3b..4d4a8b1c43 100644 --- a/editor.planx.uk/pnpm-lock.yaml +++ b/editor.planx.uk/pnpm-lock.yaml @@ -47,8 +47,8 @@ dependencies: specifier: 1.0.0-alpha.3 version: 1.0.0-alpha.3 '@opensystemslab/planx-core': - specifier: git+https://github.com/theopensystemslab/planx-core#bea2192 - version: github.com/theopensystemslab/planx-core/bea2192(@types/react@18.2.45) + specifier: git+https://github.com/theopensystemslab/planx-core#e6040d9 + version: github.com/theopensystemslab/planx-core/e6040d9(@types/react@18.2.45) '@tiptap/core': specifier: ^2.4.0 version: 2.4.0(@tiptap/pm@2.0.3) @@ -21360,9 +21360,9 @@ packages: use-sync-external-store: 1.2.0(react@18.2.0) dev: false - github.com/theopensystemslab/planx-core/bea2192(@types/react@18.2.45): - resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/bea2192} - id: github.com/theopensystemslab/planx-core/bea2192 + github.com/theopensystemslab/planx-core/e6040d9(@types/react@18.2.45): + resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/e6040d9} + id: github.com/theopensystemslab/planx-core/e6040d9 name: '@opensystemslab/planx-core' version: 1.0.0 prepare: true diff --git a/editor.planx.uk/src/@planx/components/Page/Editor.tsx b/editor.planx.uk/src/@planx/components/Page/Editor.tsx new file mode 100644 index 0000000000..ac96bbe804 --- /dev/null +++ b/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; + +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 ( + + ); +} diff --git a/editor.planx.uk/src/@planx/components/Page/Public.test.tsx b/editor.planx.uk/src/@planx/components/Page/Public.test.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/editor.planx.uk/src/@planx/components/Page/Public.tsx b/editor.planx.uk/src/@planx/components/Page/Public.tsx new file mode 100644 index 0000000000..d960c5dfc7 --- /dev/null +++ b/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; + +function PageComponent(props: Props) { + return ( + + + + ); +} + +export default PageComponent; diff --git a/editor.planx.uk/src/@planx/components/Page/model.ts b/editor.planx.uk/src/@planx/components/Page/model.ts new file mode 100644 index 0000000000..a1da2c2b16 --- /dev/null +++ b/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 | undefined): Page => ({ + 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 83fba08678..26245b8d01 100644 --- a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx +++ b/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, diff --git a/editor.planx.uk/src/@planx/components/ui.tsx b/editor.planx.uk/src/@planx/components/ui.tsx index e67538ad8a..b2048d7104 100644 --- a/editor.planx.uk/src/@planx/components/ui.tsx +++ b/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, 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 4656a67170..b6624f8550 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 @@ -77,6 +77,8 @@ const Node: React.FC = (props) => { return ; case TYPES.NumberInput: return ; + case TYPES.Page: + return ; case TYPES.Pay: return ; case TYPES.PlanningConstraints: 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 79564d537e..2a865498e5 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx +++ b/editor.planx.uk/src/pages/FlowEditor/components/forms/FormModal.tsx @@ -62,6 +62,7 @@ const NodeTypeSelect: React.FC<{ + 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 44784794c1..0c26954a11 100644 --- a/editor.planx.uk/src/pages/FlowEditor/components/forms/index.ts +++ b/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, diff --git a/editor.planx.uk/src/pages/FlowEditor/data/types.ts b/editor.planx.uk/src/pages/FlowEditor/data/types.ts index c048b95f1c..ef58777346 100644 --- a/editor.planx.uk/src/pages/FlowEditor/data/types.ts +++ b/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", diff --git a/editor.planx.uk/src/pages/Preview/Node.tsx b/editor.planx.uk/src/pages/Preview/Node.tsx index 0d851a4adb..7538226e34 100644 --- a/editor.planx.uk/src/pages/Preview/Node.tsx +++ b/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) => { case TYPES.NumberInput: return ; + case TYPES.Page: + return ; + case TYPES.Pay: return ;