App skeleton

.eslintrc.json

@@ -28,6 +28,16 @@
     "no-extra-semi": "off",
     "semi": "off",
     "eol-last": "off",
-    "space-before-function-paren": "off"
+    "space-before-function-paren": "off",
+    "comma-dangle": "off",
+    "spaced-comment": "off",
+    "multiline-ternary": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": [
+        "error",
+        { "argsIgnorePattern": "^_" }
+    ],
+    "dot-notation": "off",
+    "func-call-spacing": "off"
   }
 }

package.json

@@ -4,22 +4,29 @@
   "private": true,
   "dependencies": {
     "@chakra-ui/react": "^2.2.1",
+    "@emotion/css": "^11.9.0",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@minoru/react-dnd-treeview": "^2.0.2",
+    "@reduxjs/toolkit": "^1.8.3",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.11.42",
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
+    "debounce": "^1.2.1",
     "framer-motion": "^6.3.16",
     "re-resizable": "^6.9.9",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",
     "react-dom": "^18.2.0",
+    "react-rectangle-selection": "^1.0.4",
+    "react-redux": "^8.0.2",
+    "react-rnd": "^10.3.7",
     "react-scripts": "5.0.1",
+    "redux": "^4.2.0",
     "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
@@ -43,6 +50,7 @@
     ]
   },
   "devDependencies": {
+    "@types/debounce": "^1.2.1",
     "@typescript-eslint/eslint-plugin": "^5.30.0",
     "@typescript-eslint/parser": "^5.30.0",
     "eslint": "^8.18.0",

src/App.css

@@ -1,3 +0,0 @@
-.App {
-  padding: 1.5em;
-}

src/App.tsx

@@ -1,16 +1,86 @@
 import "./App.css";
-import { Flex, Heading, Text } from "@chakra-ui/react";
+import { Accordion, Button, Flex, Text } from "@chakra-ui/react";
+import { css } from "@emotion/css";
+import { useDispatch } from "react-redux";
+import { allZonesDeleted, zoneAdded } from "./features/zones/zonesSlice";
+import Panel, { ResizablePanel } from "./components/layout/Panel";
+import BytesimeHeader from "./components/layout/ByteSimHeader";
+import ZonesList from "./components/zones/ZonesList";
+import ZonesView from "./components/zones/ZonesView";
+import GeneralFormAccordion from "./components/zones/GeneralForm";
+import FigmaZonesList from "./components/zones/FigmaZonesList";
 
 function App() {
+  const dispatch = useDispatch();
   return (
-    <div className="App">
-      <Flex flexDirection={'column'}>
-        <Heading>ByteSim</Heading>
-        <Text>
-          {
-            "Welcome in this amazing tool to analyze the footprint of your website or app with an SVG. Let's do it and get good green recommendations! #happygreen"
+    <div
+      className={
+        "App " +
+        css({ display: "flex", flexDirection: "column", height: "100vh" })
+      }
+    >
+      <BytesimeHeader />
+      <Flex grow={1}>
+        <Panel title="Report" className={css({ maxWidth: "25vw" })}>
+          <Text p={4} fontSize="sm" color={"gray.700"}>
+            {
+              "Welcome in this amazing tool to analyze the footprint of your website or app with an SVG. Let's do it and get good green recommendations! #happygreen"
+            }
+          </Text>
+          {/* ReportToolBar */}
+          {/* RecommandationsList */}
+          {/* ExportButton */}
+        </Panel>
+        <Panel
+          title="Parameters"
+          grow={1}
+          toolbarButton={
+            <Button
+              onClick={() => {
+                dispatch(allZonesDeleted());
+              }}
+              size="sm"
+              variant="ghost"
+            >
+              Reset all ⟳
+            </Button>
           }
-        </Text>
+        >
+          <Accordion allowToggle>
+            <GeneralFormAccordion />
+            <FigmaZonesList />
+            <ZonesList />
+          </Accordion>
+        </Panel>
+        <ResizablePanel
+          title="View"
+          defaultHeight="100%"
+          defaultWidth="50%"
+          minWidth="20vw"
+          enable={{
+            top: false,
+            right: false,
+            bottom: false,
+            left: true,
+            topRight: false,
+            bottomRight: false,
+            bottomLeft: false,
+            topLeft: false,
+          }}
+          toolbarButton={
+            <Button
+              onClick={() => {
+                dispatch(zoneAdded());
+              }}
+              size="sm"
+              colorScheme={"brand"}
+            >
+              + Create Zone
+            </Button>
+          }
+        >
+          <ZonesView />
+        </ResizablePanel>
       </Flex>
     </div>
   );

src/app/hooks.ts

@@ -0,0 +1,11 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
+import { AppDispatch, RootState } from "./store"
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
+
+// TODO
+export function getZoneName(): string {
+    return '';
+}

src/app/store.ts

@@ -0,0 +1,26 @@
+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';
+
+export const store = configureStore({
+  reducer: {
+    project: projectReducer,
+    zones: zonesSlice
+  },
+  preloadedState: browserStorage.loadState(), // load state from local storage
+})
+
+// Subscribe to the store changes to persist to local storage
+store.subscribe(
+  // we use debounce to save the state once each 500ms
+  // for better performances in case multiple changes occur in a short time
+  debounce(() => {
+    browserStorage.saveState(store.getState());
+  }, 500)
+);
+
+export type RootState = ReturnType<typeof store.getState>
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch

src/app/types/generalFormTypes.ts

@@ -0,0 +1,12 @@
+export enum ServerType {
+    "RENEWABLE_ENERGY",
+    "NON_RENEWABLE_ENERGY",
+    "UNDEFINED",
+  }
+  export interface GeneralForm {
+    nbVisit: number;
+    server: ServerType;
+    plugins: boolean;
+    genericFont: boolean;
+    inifiteScroll: boolean;
+  }

src/app/types/imgTypes.ts

@@ -0,0 +1,18 @@
+export enum ImgFormat {
+  "PNG",
+  "JPG",
+  "SVG",
+  "OTHER",
+}
+
+export enum ImgQuality {
+  "> 100ko",
+  "100 - 500ko",
+  "> 500ko",
+}
+
+export interface ImgForm {
+    format: ImgFormat;
+    quantity: number;
+    quality: ImgQuality;
+  }

src/app/types/types.ts

@@ -0,0 +1,54 @@
+import { StockVideoFormat } from "./videoTypes";
+
+export interface Project {
+  id: number;
+  name: string;
+  status: ProjectStatus;
+}
+
+export interface User {
+  id: string;
+  status: UserStatus;
+  connexionToken: string;
+}
+
+export interface Zone {
+  id: string;
+  name: string;
+  index: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  zoneType?: ZoneType;
+  status: ZoneStatus;
+  params?: ZoneParamsType;
+}
+
+export type ProjectStatus = "EDITING" | "SIMULATION" | "LOADING";
+export type ZoneStatus = "EDITING" | "ACTIVE" | "LOADING";
+export type UserStatus = "CONNECTED" | "AFK" | "LOADING";
+
+export enum ZoneType {
+  Video = "Video",
+  Imgs = "Images",
+  Text = "Text",
+  DynContent = "Dynamic content",
+}
+
+export type ZoneParamsType = StockVideoFormat // | ImgFormat | TextFormat
+
+export enum EBoolean {
+  "Yes" = 1,
+  "No" = 0,
+}
+
+// Formulaires general
+// not complete form zone + general
+// store in localstorage -> lib?
+// front des reco (components)
+// Reco dans le store
+// 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

src/app/types/videoTypes.ts

@@ -0,0 +1,70 @@
+// --------------- VIDEO TYPES
+
+import { EBoolean } from "./types";
+
+// -------VIDEO Format
+//NOT USED YET
+export enum EVideoFormat {
+  "GIF",
+  "Video",
+  "Other",
+}
+
+//const OVideoFormat = ["GIF", "Video", "OTHER"];
+
+//type VideoFormat = keyof typeof OVideoFormat;
+
+// -------VIDEO Quality
+//NOT USED YET
+export enum EVideoQuality {
+  "< 480p",
+  "720p",
+  "1080p",
+  "> 1080p (HD, 4K)",
+}
+
+/* const OVideoQuality = [
+  "< 480p",
+  "720p",
+  "1080p",
+  "> 1080p (HD, 4K)",
+] as const; */
+
+//type VideoQuality = typeof OVideoQuality[number];
+
+// -------VIDEO Duration
+//not used yet
+export enum EVideoDuration {
+  "< 10s" = 0,
+  "10 - 30s" = 1,
+  "30s - 2min" = 2,
+  "2min - 5min" = 3,
+  "> 5min" = 4,
+}
+
+/* const OVideoDuration = [
+  "< 10s",
+  "10 - 30s",
+  "30s - 2min",
+  "2min - 5min",
+  "> 5min",
+] as const; */
+
+//type VideoDuration = typeof OVideoDuration[number];
+
+// GENERAL
+export const VideoFormEntries = {
+  format: EVideoFormat,
+  quality: EVideoQuality,
+  durationMin: EVideoDuration,
+  autoplay: EBoolean,
+  loop: EBoolean,
+};
+
+export interface StockVideoFormat {
+  format?: keyof EVideoFormat;
+  quality?: keyof EVideoQuality;
+  durationMin?: keyof EVideoDuration;
+  autoplay?: keyof EBoolean;
+  loop?: keyof EBoolean;
+}