From 918afc6b0083bef62635558a50686f8ffd810023 Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Mon, 28 Oct 2024 15:49:40 +0000 Subject: [PATCH 01/41] Clarify how-to doc --- editor.planx.uk/docs/adding-a-new-component.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/editor.planx.uk/docs/adding-a-new-component.md b/editor.planx.uk/docs/adding-a-new-component.md index 3ec886133e..be8bf5bb72 100644 --- a/editor.planx.uk/docs/adding-a-new-component.md +++ b/editor.planx.uk/docs/adding-a-new-component.md @@ -2,7 +2,7 @@ Let's add a `SetValue` component -## Core directory & files +## Core directory typing 1. `planx-core/src/types/component.ts` @@ -12,9 +12,11 @@ Add type to enum in `planx-core` repository SetValue = 380, ``` -2. `mkdir src/@planx/components/SetValue` +## `planx-new` component files -3. `model.ts` +1. `mkdir src/@planx/components/SetValue` + +2. `model.ts` ```typescript import { BaseNodeData, parseBaseNodeData } from "../shared"; @@ -31,7 +33,7 @@ export const parseContent = ( }); ``` -4. `Editor.tsx` +3. `Editor.tsx` ```typescript type Props = EditorProps; From 576087e18839fff9f3ac57c82b1ee04a96943225 Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Tue, 29 Oct 2024 14:57:27 +0000 Subject: [PATCH 02/41] Reorganise Feedback folder --- .../components/Feedback/Editor/Editor.tsx | 41 +++++++++++++++++++ .../Editor/FeedbackEditor.stories.tsx | 13 ++++++ .../{ => Public}/Feedback.stories.tsx | 0 .../Feedback/{ => Public}/Public.test.tsx | 0 .../Feedback/{ => Public}/Public.tsx | 8 ++-- .../src/@planx/components/Feedback/model.ts | 10 +++++ editor.planx.uk/src/@planx/components/ui.tsx | 2 + 7 files changed, 70 insertions(+), 4 deletions(-) create mode 100644 editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.tsx create mode 100644 editor.planx.uk/src/@planx/components/Feedback/Editor/FeedbackEditor.stories.tsx rename editor.planx.uk/src/@planx/components/Feedback/{ => Public}/Feedback.stories.tsx (100%) rename editor.planx.uk/src/@planx/components/Feedback/{ => Public}/Public.test.tsx (100%) rename editor.planx.uk/src/@planx/components/Feedback/{ => Public}/Public.tsx (94%) create mode 100644 editor.planx.uk/src/@planx/components/Feedback/model.ts diff --git a/editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.tsx b/editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.tsx new file mode 100644 index 0000000000..8fd871c064 --- /dev/null +++ b/editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.tsx @@ -0,0 +1,41 @@ +import { ComponentType as TYPES } from "@opensystemslab/planx-core/types"; +import { ICONS } from "@planx/components/shared/icons"; +import { EditorProps } from "@planx/components/ui"; +import { useFormik } from "formik"; +import React from "react"; +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 { Feedback, parseFeedback } from "../model"; +type Props = EditorProps; // TODO: use Feedback type +export const FeedbackEditor = (props: Props) => { + const formik = useFormik({ + initialValues: parseFeedback(props.node?.data), + onSubmit: (newValues) => { + props.handleSubmit?.({ + type: TYPES.SetValue, // TODO: use Feedback + data: newValues, + }); + }, + }); + return ( + + ); +}; diff --git a/editor.planx.uk/src/@planx/components/Feedback/Editor/FeedbackEditor.stories.tsx b/editor.planx.uk/src/@planx/components/Feedback/Editor/FeedbackEditor.stories.tsx new file mode 100644 index 0000000000..a96ade9ae9 --- /dev/null +++ b/editor.planx.uk/src/@planx/components/Feedback/Editor/FeedbackEditor.stories.tsx @@ -0,0 +1,13 @@ +import { Meta, StoryObj } from "@storybook/react"; +import React from "react"; + +import { FeedbackEditor } from "./Editor"; +const meta = { + title: "Editor Components/Feedback", + component: FeedbackEditor, +} satisfies Meta; +type Story = StoryObj; +export default meta; +export const Basic = { + render: () => , +} satisfies Story; diff --git a/editor.planx.uk/src/@planx/components/Feedback/Feedback.stories.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public/Feedback.stories.tsx similarity index 100% rename from editor.planx.uk/src/@planx/components/Feedback/Feedback.stories.tsx rename to editor.planx.uk/src/@planx/components/Feedback/Public/Feedback.stories.tsx diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public/Public.test.tsx similarity index 100% rename from editor.planx.uk/src/@planx/components/Feedback/Public.test.tsx rename to editor.planx.uk/src/@planx/components/Feedback/Public/Public.test.tsx diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public/Public.tsx similarity index 94% rename from editor.planx.uk/src/@planx/components/Feedback/Public.tsx rename to editor.planx.uk/src/@planx/components/Feedback/Public/Public.tsx index a26a2d7fe5..0fdb2d32b7 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Public.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Public/Public.tsx @@ -15,10 +15,10 @@ import GoodFace from "ui/images/feedback_filled-04.svg"; import ExcellentFace from "ui/images/feedback_filled-05.svg"; import InputLabel from "ui/public/InputLabel"; -import { getPreviouslySubmittedData, makeData } from "../shared/utils"; -import { FaceBox } from "./components/FaceBox"; -import { StyledToggleButtonGroup } from "./styled"; -import { FeedbackComponentProps, FormProps } from "./types"; +import { getPreviouslySubmittedData, makeData } from "../../shared/utils"; +import { FaceBox } from "../components/FaceBox"; +import { StyledToggleButtonGroup } from "../styled"; +import { FeedbackComponentProps, FormProps } from "../types"; const FeedbackComponent = ( props: PublicProps, diff --git a/editor.planx.uk/src/@planx/components/Feedback/model.ts b/editor.planx.uk/src/@planx/components/Feedback/model.ts new file mode 100644 index 0000000000..4e8c9376ba --- /dev/null +++ b/editor.planx.uk/src/@planx/components/Feedback/model.ts @@ -0,0 +1,10 @@ +import { BaseNodeData, parseBaseNodeData } from "../shared"; +export interface Feedback extends BaseNodeData { + fn: string; +} +export const parseFeedback = ( + data: Record | undefined, +): Feedback => ({ + fn: data?.fn || "", + ...parseBaseNodeData(data), +}); diff --git a/editor.planx.uk/src/@planx/components/ui.tsx b/editor.planx.uk/src/@planx/components/ui.tsx index 7018d6ed96..6d83452b43 100644 --- a/editor.planx.uk/src/@planx/components/ui.tsx +++ b/editor.planx.uk/src/@planx/components/ui.tsx @@ -21,6 +21,7 @@ import PaymentOutlined from "@mui/icons-material/PaymentOutlined"; import Pin from "@mui/icons-material/Pin"; import PlaylistAdd from "@mui/icons-material/PlaylistAdd"; import PlaylistAddCheck from "@mui/icons-material/PlaylistAddCheck"; +import RateReviewIcon from "@mui/icons-material/RateReview"; import RateReviewOutlined from "@mui/icons-material/RateReviewOutlined"; import ReportProblemOutlined from "@mui/icons-material/ReportProblemOutlined"; import SearchOutlined from "@mui/icons-material/SearchOutlined"; @@ -95,6 +96,7 @@ export const ICONS: { [TYPES.Question]: CallSplit, [TYPES.TaskList]: List, [TYPES.TextInput]: Create, + // [TYPES.Feedback]: RateReviewIcon, } as const; interface MoreInformationProps { From abcc57080e2c9d372e4161b30d9cd533870b13c1 Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Tue, 29 Oct 2024 14:59:24 +0000 Subject: [PATCH 03/41] Use latest planx-core hash --- editor.planx.uk/package.json | 2 +- editor.planx.uk/pnpm-lock.yaml | 85 +++++++++++++++++++++++----------- 2 files changed, 59 insertions(+), 28 deletions(-) diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json index 28beeb4d1a..4ec4c918a9 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.4", - "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#54be9e0", + "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#b4ca5a9", "@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 87ae1a3022..603a2812c4 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.4 version: 1.0.0-alpha.4 '@opensystemslab/planx-core': - specifier: git+https://github.com/theopensystemslab/planx-core#54be9e0 - version: github.com/theopensystemslab/planx-core/54be9e0(@types/react@18.2.45) + specifier: git+https://github.com/theopensystemslab/planx-core#b4ca5a9 + version: github.com/theopensystemslab/planx-core/b4ca5a9(@types/react@18.2.45) '@tiptap/core': specifier: ^2.4.0 version: 2.4.0(@tiptap/pm@2.0.3) @@ -2789,30 +2789,30 @@ packages: react: 18.2.0 dev: true - /@formatjs/ecma402-abstract@2.2.0: - resolution: {integrity: sha512-IpM+ev1E4QLtstniOE29W1rqH9eTdx5hQdNL8pzrflMj/gogfaoONZqL83LUeQScHAvyMbpqP5C9MzNf+fFwhQ==} + /@formatjs/ecma402-abstract@2.2.1: + resolution: {integrity: sha512-O4ywpkdJybrjFc9zyL8qK5aklleIAi5O4nYhBVJaOFtCkNrnU+lKFeJOFC48zpsZQmR8Aok2V79hGpHnzbmFpg==} dependencies: - '@formatjs/fast-memoize': 2.2.1 - '@formatjs/intl-localematcher': 0.5.5 + '@formatjs/fast-memoize': 2.2.2 + '@formatjs/intl-localematcher': 0.5.6 tslib: 2.7.0 dev: false - /@formatjs/fast-memoize@2.2.1: - resolution: {integrity: sha512-XS2RcOSyWxmUB7BUjj3mlPH0exsUzlf6QfhhijgI941WaJhVxXQ6mEWkdUFIdnKi3TuTYxRdelsgv3mjieIGIA==} + /@formatjs/fast-memoize@2.2.2: + resolution: {integrity: sha512-mzxZcS0g1pOzwZTslJOBTmLzDXseMLLvnh25ymRilCm8QLMObsQ7x/rj9GNrH0iUhZMlFisVOD6J1n6WQqpKPQ==} dependencies: tslib: 2.7.0 dev: false - /@formatjs/intl-listformat@7.5.9: - resolution: {integrity: sha512-HqtGkxUh2Uz0oGVTxHAvPZ3EGxc8+ol5+Bx7S9xB97d4PEJJd9oOgHrerIghHA0gtIjsNKBFUae3P0My+F6YUA==} + /@formatjs/intl-listformat@7.7.1: + resolution: {integrity: sha512-bjBxWaUhYAbJFUlFSMWZGn3r2mglXwk+BLyGRu8dY8Q83ZPsqmmVQzjQKENHE3lV6eoQGHT2oZHxUaVndJlk6Q==} dependencies: - '@formatjs/ecma402-abstract': 2.2.0 - '@formatjs/intl-localematcher': 0.5.5 + '@formatjs/ecma402-abstract': 2.2.1 + '@formatjs/intl-localematcher': 0.5.6 tslib: 2.7.0 dev: false - /@formatjs/intl-localematcher@0.5.5: - resolution: {integrity: sha512-t5tOGMgZ/i5+ALl2/offNqAQq/lfUnKLEw0mXQI4N4bqpedhrSE+fyKLpwnd22sK0dif6AV+ufQcTsKShB9J1g==} + /@formatjs/intl-localematcher@0.5.6: + resolution: {integrity: sha512-roz1+Ba5e23AHX6KUAWmLEyTRZegM5YDuxuvkHCyK3RJddf/UXB2f+s7pOMm9ktfPGla0g+mQXOn5vsuYirnaA==} dependencies: tslib: 2.7.0 dev: false @@ -3441,9 +3441,9 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - /@mui/base@5.0.0-beta.40(@types/react@18.2.45)(react-dom@18.3.1)(react@18.3.1): - resolution: {integrity: sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==} - engines: {node: '>=12.0.0'} + /@mui/base@5.0.0-beta.60(@types/react@18.2.45)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-w8twR3qCUI+uJHO5xDOuc1yB5l46KFbvNsTwIvEW9tQkKxVaiEFf2GAXHuvFJiHfZLqjzett6drZjghy8D1Z1A==} + engines: {node: '>=14.0.0'} peerDependencies: '@types/react': ^17.0.0 || ^18.0.0 react: ^17.0.0 || ^18.0.0 @@ -3454,8 +3454,8 @@ packages: dependencies: '@babel/runtime': 7.25.7 '@floating-ui/react-dom': 2.1.2(react-dom@18.3.1)(react@18.3.1) - '@mui/types': 7.2.17(@types/react@18.2.45) - '@mui/utils': 5.16.6(@types/react@18.2.45)(react@18.3.1) + '@mui/types': 7.2.18(@types/react@18.2.45) + '@mui/utils': 6.1.5(@types/react@18.2.45)(react@18.3.1) '@popperjs/core': 2.11.8 '@types/react': 18.2.45 clsx: 2.1.1 @@ -3739,6 +3739,17 @@ packages: '@types/react': 18.2.45 dev: false + /@mui/types@7.2.18(@types/react@18.2.45): + resolution: {integrity: sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.2.45 + dev: false + /@mui/utils@5.15.11(@types/react@18.2.45)(react@18.2.0): resolution: {integrity: sha512-D6bwqprUa9Stf8ft0dcMqWyWDKEo7D+6pB1k8WajbqlYIRA8J8Kw9Ra7PSZKKePGBGWO+/xxrX1U8HpG/aXQCw==} engines: {node: '>=12.0.0'} @@ -3815,6 +3826,26 @@ packages: react-is: 18.3.1 dev: false + /@mui/utils@6.1.5(@types/react@18.2.45)(react@18.3.1): + resolution: {integrity: sha512-vp2WfNDY+IbKUIGg+eqX1Ry4t/BilMjzp6p9xO1rfqpYjH1mj8coQxxDfKxcQLzBQkmBJjymjoGOak5VUYwXug==} + engines: {node: '>=14.0.0'} + peerDependencies: + '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.25.7 + '@mui/types': 7.2.18(@types/react@18.2.45) + '@types/prop-types': 15.7.13 + '@types/react': 18.2.45 + clsx: 2.1.1 + prop-types: 15.8.1 + react: 18.3.1 + react-is: 18.3.1 + dev: false + /@nicolo-ribaudo/semver-v6@6.3.3: resolution: {integrity: sha512-3Yc1fUTs69MG/uZbJlLSI3JISMn2UV2rg+1D/vROUqZyh3l6iYHCs7GMp+M40ZD7yOdDbYjJcU1oTJhrc+dGKg==} hasBin: true @@ -14723,8 +14754,8 @@ packages: dev: false optional: true - /uuid@10.0.0: - resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==} + /uuid@11.0.2: + resolution: {integrity: sha512-14FfcOJmqdjbBPdDjFQyk/SdT4NySW4eM0zcG+HqbHP5jzuH56xO3J1DGhgs/cEMCfwYi3HQI1gnTO62iaG+tQ==} hasBin: true dev: false @@ -15359,9 +15390,9 @@ packages: use-sync-external-store: 1.2.0(react@18.2.0) dev: false - github.com/theopensystemslab/planx-core/54be9e0(@types/react@18.2.45): - resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/54be9e0} - id: github.com/theopensystemslab/planx-core/54be9e0 + github.com/theopensystemslab/planx-core/b4ca5a9(@types/react@18.2.45): + resolution: {tarball: https://codeload.github.com/theopensystemslab/planx-core/tar.gz/b4ca5a9} + id: github.com/theopensystemslab/planx-core/b4ca5a9 name: '@opensystemslab/planx-core' version: 1.0.0 prepare: true @@ -15369,8 +15400,8 @@ packages: dependencies: '@emotion/react': 11.13.3(@types/react@18.2.45)(react@18.3.1) '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.2.45)(react@18.3.1) - '@formatjs/intl-listformat': 7.5.9 - '@mui/base': 5.0.0-beta.40(@types/react@18.2.45)(react-dom@18.3.1)(react@18.3.1) + '@formatjs/intl-listformat': 7.7.1 + '@mui/base': 5.0.0-beta.60(@types/react@18.2.45)(react-dom@18.3.1)(react@18.3.1) '@mui/material': 5.15.10(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.2.45)(react-dom@18.3.1)(react@18.3.1) ajv: 8.17.1 ajv-formats: 2.1.1(ajv@8.17.1) @@ -15388,7 +15419,7 @@ packages: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) type-fest: 4.26.1 - uuid: 10.0.0 + uuid: 11.0.2 zod: 3.23.8 transitivePeerDependencies: - '@types/react' From 9a12ba44fe062d67b30f289cceb66d2671cfc23c Mon Sep 17 00:00:00 2001 From: Jo Humphrey <31373245+jamdelion@users.noreply.github.com> Date: Tue, 29 Oct 2024 15:00:54 +0000 Subject: [PATCH 04/41] Use types.feedback --- .../src/@planx/components/Feedback/Editor/Editor.tsx | 6 +++--- editor.planx.uk/src/@planx/components/ui.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.tsx b/editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.tsx index 8fd871c064..1d8f1131a8 100644 --- a/editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.tsx +++ b/editor.planx.uk/src/@planx/components/Feedback/Editor/Editor.tsx @@ -9,13 +9,13 @@ import Input from "ui/shared/Input/Input"; import InputRow from "ui/shared/InputRow"; import { Feedback, parseFeedback } from "../model"; -type Props = EditorProps; // TODO: use Feedback type +type Props = EditorProps; export const FeedbackEditor = (props: Props) => { const formik = useFormik({ initialValues: parseFeedback(props.node?.data), onSubmit: (newValues) => { props.handleSubmit?.({ - type: TYPES.SetValue, // TODO: use Feedback + type: TYPES.Feedback, data: newValues, }); }, @@ -23,7 +23,7 @@ export const FeedbackEditor = (props: Props) => { return (