refactor: reorganise feedback component folder (#3837)

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

@@ -4,7 +4,7 @@ import Container from "@mui/material/Container";
 import Drawer, { DrawerProps } from "@mui/material/Drawer";
 import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
-import MoreInfoFeedbackComponent from "components/Feedback/MoreInfoFeedback";
+import MoreInfoFeedbackComponent from "components/Feedback/MoreInfoFeedback/MoreInfoFeedback";
 import React from "react";
 
 const PREFIX = "MoreInfo";

editor.planx.uk/src/components/Feedback/FeedbackForm.test.tsx → editor.planx.uk/src/components/Feedback/FeedbackForm/FeedbackForm.test.tsx

@@ -3,7 +3,7 @@ import { setup } from "testUtils";
 import { vi } from "vitest";
 import { axe } from "vitest-axe";
 
-import { FeedbackFormInput } from ".";
+import { FeedbackFormInput } from "../types";
 import FeedbackForm from "./FeedbackForm";
 
 const mockHandleSubmit = vi.fn();

editor.planx.uk/src/components/Feedback/FeedbackForm.tsx → editor.planx.uk/src/components/Feedback/FeedbackForm/FeedbackForm.tsx

@@ -9,7 +9,7 @@ import InputLabel from "ui/public/InputLabel";
 import ErrorWrapper from "ui/shared/ErrorWrapper";
 import Input from "ui/shared/Input";
 
-import { FeedbackFormInput, FormProps, UserFeedback } from ".";
+import { FeedbackFormInput, FormProps, UserFeedback } from "../types";
 
 const StyledForm = styled(Form)(({ theme }) => ({
   "& > *": contentFlowSpacing(theme),

editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx → editor.planx.uk/src/components/Feedback/MoreInfoFeedback/MoreInfoFeedback.tsx

@@ -12,8 +12,8 @@ import { useAnalyticsTracking } from "pages/FlowEditor/lib/analytics/provider";
 import React, { useEffect, useRef, useState } from "react";
 import FeedbackOption from "ui/public/FeedbackOption";
 
-import { FeedbackFormInput, UserFeedback } from ".";
-import FeedbackForm from "./FeedbackForm";
+import FeedbackForm from "../FeedbackForm/FeedbackForm";
+import { FeedbackFormInput, UserFeedback } from "../types";
 
 const MoreInfoFeedback = styled(Box)(({ theme }) => ({
   borderTop: `2px solid ${theme.palette.border.main}`,

editor.planx.uk/src/components/Feedback/index.tsx

@@ -7,8 +7,6 @@ import WarningIcon from "@mui/icons-material/Warning";
 import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
 import IconButton from "@mui/material/IconButton";
-import { styled } from "@mui/material/styles";
-import SvgIcon from "@mui/material/SvgIcon";
 import Typography from "@mui/material/Typography";
 import {
   getInternalFeedbackMetadata,
@@ -20,73 +18,25 @@ import React, { useEffect, useRef, useState } from "react";
 import { usePrevious } from "react-use";
 import FeedbackOption from "ui/public/FeedbackOption";
 
-import FeedbackForm from "./FeedbackForm";
+import FeedbackForm from "./FeedbackForm/FeedbackForm";
 import FeedbackPhaseBanner from "./FeedbackPhaseBanner";
-
-const FeedbackWrapper = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  borderTop: `1px solid ${theme.palette.border.main}`,
-}));
-
-const FeedbackRow = styled(Box)(({ theme }) => ({
-  maxWidth: theme.breakpoints.values.formWrap,
-  padding: theme.spacing(2, 0, 4),
-}));
-
-const FeedbackHeader = styled(Box)(({ theme }) => ({
-  padding: theme.spacing(1, 0),
-  position: "relative",
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-}));
-
-const FeedbackTitle = styled(Box)(({ theme }) => ({
-  position: "relative",
-  display: "flex",
-  alignItems: "center",
-  "& svg": {
-    width: "28px",
-    height: "auto",
-    color: theme.palette.primary.dark,
-    marginRight: theme.spacing(1),
-  },
-}));
-
-const CloseButton = styled("div")(({ theme }) => ({
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "flex-end",
-  color: theme.palette.text.primary,
-}));
-
-const FeedbackBody = styled(Box)(({ theme }) => ({
-  maxWidth: theme.breakpoints.values.formWrap,
-}));
-
-export type UserFeedback = {
-  userContext?: string;
-  userComment: string;
-};
-
-export interface FormProps {
-  inputs: FeedbackFormInput[];
-  handleSubmit: (values: UserFeedback) => void;
-}
-
-export type FeedbackFormInput = {
-  name: keyof UserFeedback;
-  label: string;
-  id: string;
-};
-
-export type FeedbackCategory = "issue" | "idea" | "comment" | "inaccuracy";
+import {
+  CloseButton,
+  FeedbackBody,
+  FeedbackHeader,
+  FeedbackRow,
+  FeedbackTitle,
+  FeedbackWrapper,
+} from "./styled";
+import {
+  ClickEvents,
+  FeedbackFormInput,
+  TitleAndCloseProps,
+  UserFeedback,
+  View,
+} from "./types";
 
 const Feedback: React.FC = () => {
-  type View = "banner" | "triage" | FeedbackCategory | "thanks";
-
-  type ClickEvents = "close" | "back" | "triage" | FeedbackCategory;
-
   const [currentFeedbackView, setCurrentFeedbackView] =
     useState<View>("banner");
   const previousFeedbackView = usePrevious(currentFeedbackView);
@@ -163,11 +113,6 @@ const Feedback: React.FC = () => {
     );
   }
 
-  interface TitleAndCloseProps {
-    title: string;
-    Icon?: typeof SvgIcon;
-  }
-
   function TitleAndCloseFeedbackHeader(props: TitleAndCloseProps): FCReturn {
     return (
       <FeedbackHeader>

editor.planx.uk/src/components/Feedback/styled.ts

@@ -0,0 +1,43 @@
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+
+export const FeedbackWrapper = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  borderTop: `1px solid ${theme.palette.border.main}`,
+}));
+
+export const FeedbackRow = styled(Box)(({ theme }) => ({
+  maxWidth: theme.breakpoints.values.formWrap,
+  padding: theme.spacing(2, 0, 4),
+}));
+
+export const FeedbackHeader = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(1, 0),
+  position: "relative",
+  display: "flex",
+  justifyContent: "space-between",
+  alignItems: "center",
+}));
+
+export const FeedbackTitle = styled(Box)(({ theme }) => ({
+  position: "relative",
+  display: "flex",
+  alignItems: "center",
+  "& svg": {
+    width: "28px",
+    height: "auto",
+    color: theme.palette.primary.dark,
+    marginRight: theme.spacing(1),
+  },
+}));
+
+export const CloseButton = styled("div")(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  color: theme.palette.text.primary,
+}));
+
+export const FeedbackBody = styled(Box)(({ theme }) => ({
+  maxWidth: theme.breakpoints.values.formWrap,
+}));

editor.planx.uk/src/components/Feedback/types.ts

@@ -0,0 +1,25 @@
+import SvgIcon from "@mui/material/SvgIcon";
+
+export type UserFeedback = {
+  userContext?: string;
+  userComment: string;
+};
+
+export interface FormProps {
+  inputs: FeedbackFormInput[];
+  handleSubmit: (values: UserFeedback) => void;
+}
+
+export type FeedbackFormInput = {
+  name: keyof UserFeedback;
+  label: string;
+  id: string;
+};
+export type FeedbackCategory = "issue" | "idea" | "comment" | "inaccuracy";
+export type View = "banner" | "triage" | FeedbackCategory | "thanks";
+export type ClickEvents = "close" | "back" | "triage" | FeedbackCategory;
+
+export interface TitleAndCloseProps {
+  title: string;
+  Icon?: typeof SvgIcon;
+}

editor.planx.uk/src/routes/feedback.tsx

@@ -1,6 +1,6 @@
 import { ComponentType } from "@opensystemslab/planx-core/types";
-import { FeedbackCategory } from "components/Feedback";
-import { Sentiment } from "components/Feedback/MoreInfoFeedback";
+import { Sentiment } from "components/Feedback/MoreInfoFeedback/MoreInfoFeedback";
+import { FeedbackCategory } from "components/Feedback/types";
 import gql from "graphql-tag";
 import { compose, mount, NotFoundError, route, withData } from "navi";
 import { FeedbackPage } from "pages/FlowEditor/components/Flow/FeedbackPage";