feat: Setup Storybook for MapAndLabel (#3585)

editor.planx.uk/.storybook/preview.tsx

@@ -4,9 +4,14 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { defaultTheme } from "../src/theme";
 import React from "react";
+import { MyMap } from "@opensystemslab/map";
 
 import { reactNaviDecorator } from "./__mocks__/react-navi";
 
+if (!window.customElements.get("my-map")) {
+  window.customElements.define("my-map", MyMap);
+}
+
 export const decorators = [
   (Story) => (
     <StyledEngineProvider injectFirst>

editor.planx.uk/src/@planx/components/MapAndLabel/Public/Context.tsx

@@ -8,7 +8,6 @@ import {
   getPreviouslySubmittedData,
   makeData,
 } from "@planx/components/shared/utils";
-import { PublicProps } from "@planx/components/ui";
 import { FormikProps, useFormik } from "formik";
 import React, {
   createContext,
@@ -17,7 +16,7 @@ import React, {
   useState,
 } from "react";
 
-import { MapAndLabel } from "../model";
+import { PresentationalProps } from ".";
 
 interface MapAndLabelContextValue {
   schema: Schema;
@@ -27,15 +26,15 @@ interface MapAndLabelContextValue {
   cancelEditItem: () => void;
   formik: FormikProps<SchemaUserData>;
   validateAndSubmitForm: () => void;
-  mapAndLabelProps: PublicProps<MapAndLabel>;
+  mapAndLabelProps: PresentationalProps;
   errors: {
     unsavedItem: boolean;
     min: boolean;
     max: boolean;
   };
 }
 
-type MapAndLabelProviderProps = PropsWithChildren<PublicProps<MapAndLabel>>;
+type MapAndLabelProviderProps = PropsWithChildren<PresentationalProps>;
 
 const MapAndLabelContext = createContext<MapAndLabelContextValue | undefined>(
   undefined,

editor.planx.uk/src/@planx/components/MapAndLabel/Public/MapAndLabel.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+
+import Wrapper from "../../fixtures/Wrapper";
+import Editor from "../Editor";
+import { Trees } from "../schemas/Trees";
+import { Presentational as Public, PresentationalProps } from ".";
+
+const meta = {
+  title: "PlanX Components/MapAndLabel",
+  component: Public,
+} satisfies Meta<typeof Public>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const props: PresentationalProps = {
+  title: "Map and label the works to trees for this property",
+  description: "Add one or many trees below",
+  schemaName: "Trees",
+  fn: "MockFn",
+  schema: Trees,
+  basemap: "OSM",
+  drawColor: "#00FF00",
+  drawType: "Point",
+  longitude: -0.1629784,
+  latitude: 51.5230919,
+};
+
+export const Basic: Story = {
+  args: props,
+};
+
+export const WithEditor = () => {
+  return <Wrapper Editor={Editor} Public={() => <Public {...props} />} />;
+};

editor.planx.uk/src/@planx/components/MapAndLabel/Public/index.tsx

@@ -8,6 +8,7 @@ import { SiteAddress } from "@planx/components/FindProperty/model";
 import { ErrorSummaryContainer } from "@planx/components/shared/Preview/ErrorSummaryContainer";
 import { SchemaFields } from "@planx/components/shared/Schema/SchemaFields";
 import { Feature } from "geojson";
+import { GeoJsonObject } from "geojson";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React, { useEffect, useState } from "react";
 import FullWidthWrapper from "ui/public/FullWidthWrapper";
@@ -21,6 +22,12 @@ import { MapAndLabelProvider, useMapAndLabelContext } from "./Context";
 
 type Props = PublicProps<MapAndLabel>;
 
+export interface PresentationalProps extends Props {
+  latitude: number;
+  longitude: number;
+  boundaryBBox?: GeoJsonObject;
+}
+
 function a11yProps(index: number) {
   return {
     id: `vertical-tab-${index}`,
@@ -110,14 +117,11 @@ const Root = () => {
     drawColor,
     drawType,
     schemaName,
-    handleSubmit,
+    latitude,
+    longitude,
+    boundaryBBox,
   } = mapAndLabelProps;
 
-  const teamSettings = useStore.getState().teamSettings;
-  const passport = useStore((state) => state.computePassport());
-  const { latitude, longitude } =
-    (passport?.data?._address as SiteAddress) || {};
-
   const [features, setFeatures] = useState<Feature[] | undefined>(undefined);
 
   useEffect(() => {
@@ -139,27 +143,6 @@ const Root = () => {
     };
   }, [setFeatures]);
 
-  if (!latitude || !longitude) {
-    return (
-      <Card handleSubmit={handleSubmit} isValid>
-        <CardHeader title={title} description={description} />
-        <ErrorSummaryContainer
-          role="status"
-          data-testid="error-summary-invalid-graph"
-        >
-          <Typography variant="h4" component="h2" gutterBottom>
-            Invalid graph
-          </Typography>
-          <Typography variant="body2">
-            Edit this flow so that "MapAndLabel" is positioned after
-            "FindProperty"; an initial address is required to correctly display
-            the map.
-          </Typography>
-        </ErrorSummaryContainer>
-      </Card>
-    );
-  }
-
   return (
     <Card handleSubmit={validateAndSubmitForm} isValid>
       <CardHeader
@@ -193,10 +176,7 @@ const Root = () => {
                 ? `© Crown copyright and database rights ${new Date().getFullYear()} OS (0)100024857`
                 : ``
             }
-            clipGeojsonData={
-              teamSettings?.boundaryBBox &&
-              JSON.stringify(teamSettings?.boundaryBBox)
-            }
+            clipGeojsonData={boundaryBBox && JSON.stringify(boundaryBBox)}
             mapboxAccessToken={import.meta.env.VITE_APP_MAPBOX_ACCESS_TOKEN}
             collapseAttributions
           />
@@ -221,11 +201,47 @@ const Root = () => {
   );
 };
 
+export const Presentational: React.FC<PresentationalProps> = (props) => (
+  <MapAndLabelProvider {...props}>
+    <Root />
+  </MapAndLabelProvider>
+);
+
+const GraphError = (props: Props) => (
+  <Card handleSubmit={props.handleSubmit} isValid>
+    <CardHeader title={props.title} description={props.description} />
+    <ErrorSummaryContainer
+      role="status"
+      data-testid="error-summary-invalid-graph"
+    >
+      <Typography variant="h4" component="h2" gutterBottom>
+        Invalid graph
+      </Typography>
+      <Typography variant="body2">
+        Edit this flow so that "MapAndLabel" is positioned after "FindProperty";
+        an initial address is required to correctly display the map.
+      </Typography>
+    </ErrorSummaryContainer>
+  </Card>
+);
+
 function MapAndLabelComponent(props: Props) {
+  const teamSettings = useStore.getState().teamSettings;
+  const passport = useStore((state) => state.computePassport());
+  const { latitude, longitude } =
+    (passport?.data?._address as SiteAddress) || {};
+
+  if (!latitude || !longitude) {
+    return <GraphError {...props} />;
+  }
+
   return (
-    <MapAndLabelProvider {...props}>
-      <Root />
-    </MapAndLabelProvider>
+    <Presentational
+      {...props}
+      latitude={latitude}
+      longitude={longitude}
+      boundaryBBox={teamSettings.boundaryBBox}
+    />
   );
 }