feat(slice-machine-ui): update Slice Builder layout

packages/slice-machine/components/Simulator/components/Header/index.tsx

@@ -1,16 +1,15 @@
 import router from "next/router";
 import { Text, Flex, Switch, Label } from "theme-ui";
 
-import VarationsPopover from "@lib/builders/SliceBuilder/Header/VariationsPopover";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
-
 import { Button } from "@components/Button";
+import VariationsPopover from "@components/Simulator/components/Header/VariationsPopover";
+import * as Links from "@components/Simulator/components/Header/links";
 import SliceMachineLogo from "@src/icons/SliceMachineLogo";
 import { useSelector } from "react-redux";
 import { selectSavingMock } from "@src/modules/simulator";
 
-import * as Links from "@lib/builders/SliceBuilder/links";
 import { SliceMachineStoreType } from "@src/redux/type";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { VariationSM } from "@lib/models/common/Slice";
 
 const redirect = (
@@ -80,7 +79,7 @@ const Header: React.FunctionComponent<PropTypes> = ({
         >
           {slice.model.name}
         </Text>
-        <VarationsPopover
+        <VariationsPopover
           defaultValue={variation}
           variations={slice.model.variations}
           onChange={(v) => redirect(slice, v, true)}

packages/slice-machine/lib/builders/SliceBuilder/FieldZones/index.tsx

@@ -1,5 +1,3 @@
-import { Box } from "theme-ui";
-
 import { ensureDnDDestination } from "@lib/utils";
 import { transformKeyAccessor } from "@utils/str";
 
@@ -10,6 +8,7 @@ import * as Widgets from "@lib/models/common/widgets";
 import sliceBuilderWidgetsArray from "@lib/models/common/widgets/sliceBuilderArray";
 
 import { DropResult } from "react-beautiful-dnd";
+import { List } from "@src/components/List";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { VariationSM, WidgetsArea } from "@lib/models/common/Slice";
 
@@ -118,7 +117,7 @@ const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
   };
 
   return (
-    <>
+    <List>
       <Zone
         zoneType="slice"
         tabId={undefined}
@@ -145,7 +144,6 @@ const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
         dataCy="slice-non-repeatable-zone"
         isRepeatableCustomType={undefined}
       />
-      <Box mt={4} />
       <Zone
         zoneType="slice"
         tabId={undefined}
@@ -171,7 +169,7 @@ const FieldZones: React.FunctionComponent<FieldZonesProps> = ({
         dataCy="slice-repeatable-zone"
         isRepeatableCustomType={undefined}
       />
-    </>
+    </List>
   );
 };
 

packages/slice-machine/lib/builders/SliceBuilder/OldSideBar/index.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+
+import { Box, Flex } from "theme-ui";
+
+import Card from "@components/Card";
+import { ReactTooltipPortal } from "@components/ReactTooltipPortal";
+
+import { ScreenshotPreview } from "@components/ScreenshotPreview";
+
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+import ScreenshotChangesModal from "@components/ScreenshotChangesModal";
+import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
+import { Button } from "@components/Button";
+import { AiOutlineCamera } from "react-icons/ai";
+import { VariationSM } from "@lib/models/common/Slice";
+import ReactTooltip from "react-tooltip";
+
+type SideBarProps = {
+  component: ComponentUI;
+  variation: VariationSM;
+  isTouched: boolean;
+};
+
+const NeedToSaveTooltip: React.FC = () => (
+  <ReactTooltipPortal>
+    <ReactTooltip
+      clickable
+      place="bottom"
+      effect="solid"
+      delayHide={500}
+      id="update-screenshot-button-tooltip"
+    >
+      Save your work in order to update the screenshot
+    </ReactTooltip>
+  </ReactTooltipPortal>
+);
+
+const SideBar: React.FunctionComponent<SideBarProps> = ({
+  component,
+  variation,
+  isTouched,
+}) => {
+  const { screenshots } = component;
+  const { openScreenshotsModal } = useScreenshotChangesModal();
+
+  return (
+    <Box>
+      <Card
+        bg="headSection"
+        bodySx={{ p: 0 }}
+        Footer={() => (
+          <>
+            <Flex
+              data-tip
+              data-tip-disable={false}
+              data-for={"update-screenshot-button-tooltip"}
+              sx={{
+                width: "fit-content",
+              }}
+            >
+              <Button
+                onClick={openScreenshotsModal}
+                variant="secondarySmall"
+                sx={{ fontWeight: "bold" }}
+                Icon={AiOutlineCamera}
+                iconFill="#1A1523"
+                label="Update screenshot"
+                disabled={isTouched}
+              />
+            </Flex>
+            {isTouched && <NeedToSaveTooltip />}
+          </>
+        )}
+        footerSx={{ padding: 2 }}
+        sx={{ overflow: "hidden" }}
+      >
+        <ScreenshotPreview
+          src={screenshots[variation.id]?.url}
+          sx={{
+            height: "198px",
+            borderBottom: (t) => `1px solid ${t.colors?.borders as string}`,
+            borderRadius: "4px 4px 0 0",
+          }}
+        />
+      </Card>
+      <ScreenshotChangesModal
+        slices={[component]}
+        defaultVariationSelector={{
+          sliceID: component.model.id,
+          variationID: variation.id,
+        }}
+      />
+    </Box>
+  );
+};
+
+export default SideBar;