Figma link 🥳

.eslintrc.json

@@ -34,8 +34,8 @@
     "multiline-ternary": "off",
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": [
-        "error",
-        { "argsIgnorePattern": "^_" }
+      "warn",
+      { "argsIgnorePattern": "^_" }
     ],
     "dot-notation": "off",
     "func-call-spacing": "off"

config-overrides.js

@@ -0,0 +1,3 @@
+module.exports = function override(config, env) {
+  return config;
+};

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "homepage": "https://MediaComem.github.io/bytesim-webapp",
   "dependencies": {
+    "@chakra-ui/icons": "^2.0.11",
     "@chakra-ui/react": "^2.2.1",
     "@emotion/css": "^11.9.0",
     "@emotion/react": "^11.9.3",
@@ -24,6 +25,7 @@
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
     "react-dom": "^18.2.0",
+    "react-inlinesvg": "^3.0.1",
     "react-rectangle-selection": "^1.0.4",
     "react-redux": "^8.0.2",
     "react-reflex": "^4.0.9",
@@ -65,6 +67,7 @@
     "eslint-plugin-n": "^15.2.3",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.30.1",
-    "gh-pages": "^4.0.0"
+    "gh-pages": "^4.0.0",
+    "react-app-rewired": "^2.2.1"
   }
-}
+}

src/Home.tsx

@@ -12,7 +12,6 @@ import {
 import { css } from "@emotion/css";
 import * as React from "react";
 import { useDispatch } from "react-redux";
-import { colorTheme } from ".";
 import { useAppSelector } from "./app/hooks";
 import ConfirmModal, { confirmText } from "./components/layout/ConfirmModal";
 import Panel from "./components/layout/Panel";
@@ -22,16 +21,18 @@ import GeneralFormAccordion from "./components/project/GeneralForm";
 import ZonesList from "./components/zones/ZonesList";
 import ZonesView from "./components/zones/ZonesView";
 import { projectReset } from "./features/project/projectSlice";
+
+import { ReactComponent as ResetIcon } from "./assets/ResetIcon_Active_MouseOver.svg";
+import ExportButton from "./components/recommandations/ExportButton";
+import { colorTheme } from "./theme";
+import RecoWarning from "./components/recommandations/RecoWarning";
 import {
   allZonesReset,
   getUncompleteZones,
   zoneAdded,
 } from "./features/zones/zonesSlice";
-import { ReactComponent as ResetIcon } from "./assets/ResetIcon_Active_MouseOver.svg";
-import ExportButton from "./components/recommandations/ExportButton";
 import "react-reflex/styles.css";
 import { ReflexContainer, ReflexElement, ReflexSplitter } from "react-reflex";
-import RecoWarning from "./components/recommandations/RecoWarning";
 
 export default function Home() {
   const dispatch = useDispatch();
@@ -149,10 +150,10 @@ export default function Home() {
                       label={`${zoom}%`}
                     >
                       <SliderThumb
-                      className={css({ boxShadow: "none" })}
-                      width="10px"
-                      height="10px"
-                    />
+                        className={css({ boxShadow: "none" })}
+                        width="10px"
+                        height="10px"
+                      />
                     </Tooltip>
                   </Slider>
                   <Button
@@ -239,8 +240,8 @@ export default function Home() {
           }
         >
           {uncompleteZones.length !== 0 && (
-          <RecoWarning uncompleteZoneNames={uncompleteZones} />
-        )}
+            <RecoWarning uncompleteZoneNames={uncompleteZones} />
+          )}
           <RecoReport />
         </Panel>
       </ReflexElement>

src/app/hooks.ts

@@ -1,3 +1,4 @@
+import { createDraftSafeSelector } from "@reduxjs/toolkit";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import simulationService from "../services/simulationService";
 import { isZoneComplete } from "../utils/utils";
@@ -14,8 +15,16 @@ import { VideoParameters } from "./types/videoTypes";
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 
+const selectZones = (state: RootState) => state.zonesSlice.zones;
+export const zoneSelector = createDraftSafeSelector(
+  selectZones,
+  (state) => state
+);
+
+export const useAppZones = () => useAppSelector(zoneSelector);
+
 export function useCalculateImpact(): { energy: number; co2: number } {
-  const zones = useAppSelector((state) => state.zones);
+  const zones = useAppSelector(zoneSelector);
   const renewable = useAppSelector(
     (state) => state.project.params.server === ServerType.RENEWABLE
   );
@@ -43,7 +52,7 @@ export function useCalculateRecommandationsImpact(): {
   energy: number;
   co2: number;
 } {
-  const zones = useAppSelector((state) => state.zones);
+  const zones = useAppSelector(zoneSelector);
   const recommandations = useAppSelector((state) => state.recommandations);
   const nbVisits = useAppSelector((state) => state.project.params.nbVisit) ?? 1; // if no visitor impact per visit
   let renewable = useAppSelector(
@@ -58,7 +67,7 @@ export function useCalculateRecommandationsImpact(): {
     renewable = recommandationRenewable.selectedValue === "better";
   }
   zones.forEach((zone) => {
-      if (isZoneComplete(zone)) {
+    if (isZoneComplete(zone)) {
       // TODO optimize code + architecture
       const zoneRecommandations = recommandations.filter(
         (rec) => rec.zone_id === zone.id
@@ -119,7 +128,7 @@ export function useCalculateGenericRecommandations(): RecommandationWithZone<
 export function useCalculateAllRecommandations(): RecommandationWithZone<
   VideoParameters[keyof VideoParameters]
 >[] {
-  const zones = useAppSelector((state) => state.zones);
+  const zones = useAppZones();
   const genericParameters = useAppSelector((state) => state.project.params);
   const renewable = genericParameters === ServerType.RENEWABLE;
   const recommandations: RecommandationWithZone<
@@ -130,7 +139,7 @@ export function useCalculateAllRecommandations(): RecommandationWithZone<
     recos.forEach((reco) => {
       const rec: RecommandationWithZone<
         VideoParameters[keyof VideoParameters]
-      > = { ...reco, zoneId: zone.id, zoneName: zone.name };
+      > = { ...reco, zoneId: zone.id!, zoneName: zone.name! };
       recommandations.push(rec);
     });
   });
@@ -155,7 +164,7 @@ export function useCalculateRecommandationsForZone(
 
 export function useSelectedZone(): Zone | undefined {
   let zone;
-  const zones = useAppSelector((state) => state.zones);
+  const zones = useAppSelector((state) => state.zonesSlice.zones);
   zones.forEach((z) => {
     if (z.status === "EDITING") zone = z;
   });

src/app/store.ts

@@ -1,18 +1,19 @@
-import { configureStore } from '@reduxjs/toolkit'
-import projectReducer from '../features/project/projectSlice'
-import zonesSlice from '../features/zones/zonesSlice'
+import { configureStore } from "@reduxjs/toolkit";
+import projectReducer from "../features/project/projectSlice";
+import zonesSlice from "../features/zones/zonesSlice";
 import { debounce } from "debounce";
-import browserStorage from '../services/browserStorage';
-import recommandationsSlice from '../features/recommandations/recommandationsSlice';
+import browserStorage from "../services/browserStorage";
+import recommandationsSlice from "../features/recommandations/recommandationsSlice";
 
 export const store = configureStore({
   reducer: {
     project: projectReducer,
-    zones: zonesSlice,
+    zonesSlice,
+    // zonesFigma: zonesFigmaSlice,
     recommandations: recommandationsSlice,
   },
   preloadedState: browserStorage.loadState(), // load state from local storage
-})
+});
 
 // Subscribe to the store changes to persist to local storage
 store.subscribe(
@@ -23,6 +24,6 @@ store.subscribe(
   }, 500)
 );
 
-export type RootState = ReturnType<typeof store.getState>
+export type RootState = ReturnType<typeof store.getState>;
 // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
-export type AppDispatch = typeof store.dispatch
+export type AppDispatch = typeof store.dispatch;

src/app/types/types.ts

@@ -1,4 +1,3 @@
-
 import { GenericParameters } from "./generalFormTypes";
 
 import { ImageParameters } from "./imgTypes";
@@ -27,6 +26,14 @@ export interface ZoneInfo {
   width: number;
   height: number;
   status: ZoneStatus;
+  createdFrom?: "user" | "figma";
+  // only for figma fields
+  hidden?: boolean;
+  elementId?: string;
+  initWidth?: number;
+  initHeight?: number;
+  initX?: number;
+  initY?: number;
 }
 
 export interface ZoneUnknown extends ZoneInfo {
@@ -44,12 +51,33 @@ export interface ZoneImages extends ZoneInfo {
   params?: ImageParameters;
 }
 
+export interface ZoneText extends ZoneInfo {
+  zoneType: ZoneType.Text;
+  params?: any;
+}
+
 export interface ZoneDynamic extends ZoneInfo {
   zoneType: ZoneType.DynamicContent;
-  params?: any
+  params?: any;
 }
 
-export type Zone = ZoneUnknown | ZoneVideo | ZoneImages | ZoneDynamic;
+export type Zone =
+  | ZoneUnknown
+  | ZoneVideo
+  | ZoneImages
+  | ZoneText
+  | ZoneDynamic;
+
+export type ZoneFigma = Omit<Zone, "createdFrom"> & {
+  id: string;
+  createdFrom: "figma";
+  elementId: string;
+  hidden?: boolean;
+};
+export type TreeZoneEl = {
+  id: string;
+  children?: TreeZoneEl[];
+};
 
 export type ProjectStatus = "EDITING" | "SIMULATION" | "LOADING";
 export type ZoneStatus = "EDITING" | "ACTIVE" | "LOADING";
@@ -59,10 +87,14 @@ export enum ZoneType {
   Video = "Video",
   Images = "Images",
   DynamicContent = "DynamicContent",
+  Text = "Text",
 }
 
 export type FormsType = ZoneParamsType | GenericParameters;
-export type ZoneParamsType = VideoParameters | ImageParameters | DynContentParameters;
+export type ZoneParamsType =
+  | VideoParameters
+  | ImageParameters
+  | DynContentParameters;
 
 export enum EBoolean {
   YES = "Yes",
@@ -75,4 +107,4 @@ export enum EBoolean {
 // Modele de calcul -> video pour le POC, 1 par type
 // Modele de reco
 // Zone View à adapter pour différents formats d'image svg de base
-// création de PDF
+// création de PDF

src/components/layout/AccordionChevron.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { css, cx } from "@emotion/css";
 import { ReactComponent as OpenIcon } from "../../assets/Fleche_Fermee.svg";
-
 interface AccordionChevronProps {
   isExpanded: boolean;
   setOpen?: () => void;

src/components/project/UploadButton.tsx

@@ -14,7 +14,7 @@ import * as React from "react";
 import { useDispatch } from "react-redux";
 import { projectUpdated } from "../../features/project/projectSlice";
 import { ReactComponent as AddIcon } from "../../assets/BigPlus.svg";
-import { colorTheme } from "../..";
+import { colorTheme } from "../../theme";
 
 export default function UploadButton() {
   const dispatch = useDispatch();
@@ -29,7 +29,7 @@ export default function UploadButton() {
         justifyContent={"center"}
         alignSelf="stretch"
         onClick={onOpen}
-        _hover={{ backgroundColor: colorTheme[50], cursor: 'pointer' }}
+        _hover={{ backgroundColor: colorTheme[50], cursor: "pointer" }}
       >
         <Flex direction="column" align="center">
           <AddIcon />

src/components/recommandations/RecoReport.tsx

@@ -1,8 +1,9 @@
 import { Divider, Flex } from "@chakra-ui/react";
-import * as React from "react";
+import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import {
   useAppSelector,
+  useAppZones,
   useCalculateAllRecommandations,
   useCalculateGenericRecommandations,
 } from "../../app/hooks";
@@ -38,12 +39,13 @@ export function ReportBody({
   const dispatch = useDispatch();
   const recommandations = useCalculateAllRecommandations();
   const genericRecomandations = useCalculateGenericRecommandations();
-  const zones = useAppSelector((state) => state.zones);
+  const zones = useAppZones();
+
   /* const zonesParams = useAppSelector((state) => {
     return Object.values(state.zones).filter((zone) => zone.filter());
   }); */
   const projectGeneralParams = useAppSelector((state) => state.project.params);
-  React.useEffect(() => {
+  useEffect(() => {
     dispatch(
       recommandationsPopulated([...genericRecomandations, ...recommandations])
     );

src/components/recommandations/Recommandation.tsx

@@ -20,6 +20,7 @@ import {
 } from "../../app/types/recommandations";
 import { VideoParameters } from "../../app/types/videoTypes";
 import { recommandationUpdated } from "../../features/recommandations/recommandationsSlice";
+import useZoneScreenshot from "../../hooks/useZoneScreenshot";
 import AccordionChevron from "../layout/AccordionChevron";
 //import { ReportCTX } from "./RecoReport";
 
@@ -35,6 +36,8 @@ export default function RecommandationDisplay({
 }: RecommandationDisplayProps) {
   //const { totalBenefits, setTotalBenefits } = React.useContext(ReportCTX);
   const dispatch = useDispatch();
+  const { ZoneScreenshot } = useZoneScreenshot();
+
   const onChangeParams = React.useCallback(
     (v: RecommandationOption) => {
       dispatch(
@@ -52,6 +55,7 @@ export default function RecommandationDisplay({
               <Heading mr={1} size="sm">
                 {recommandation.zoneName}
               </Heading>
+              <ZoneScreenshot zoneId={recommandation.zoneId} />
               <Flex>
                 <Text>{recommandation.parameter}</Text>
                 <Tooltip label="Biblio de reco + best practices" hasArrow>

src/components/recommandations/ReloadRecoButton.tsx

@@ -2,13 +2,13 @@ import { Button } from "@chakra-ui/react";
 import { css } from "@emotion/css";
 import * as React from "react";
 import { useDispatch } from "react-redux";
-import { colorTheme } from "../..";
 import {
   useCalculateAllRecommandations,
   useCalculateGenericRecommandations,
 } from "../../app/hooks";
 import { ReactComponent as ResetIcon } from "../../assets/ResetIcon_Active_MouseOver.svg";
 import { recommandationsPopulated } from "../../features/recommandations/recommandationsSlice";
+import { colorTheme } from "../../theme";
 //import { useNavigate } from "react-router-dom";
 
 export default function ReloadRecoButton() {