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/Sidebar/index.tsx

@@ -0,0 +1,68 @@
+import { Button, ScrollArea, tokens } from "@prismicio/editor-ui";
+import { useRouter } from "next/router";
+import { type FC, useState } from "react";
+
+import VariationModal from "@builders/SliceBuilder/Sidebar/VariationModal";
+import type { ComponentUI } from "@lib/models/common/ComponentUI";
+import type { VariationSM } from "@lib/models/common/Slice";
+import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
+import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+
+type SidebarProps = {
+  slice: ComponentUI;
+  variation: VariationSM;
+};
+
+export const Sidebar: FC<SidebarProps> = ({ slice, variation }) => {
+  const router = useRouter();
+  const [showVariationModal, setShowVariationModal] = useState(false);
+  const { copyVariationSlice } = useSliceMachineActions();
+  return (
+    <>
+      <ScrollArea style={{ gap: tokens.space[16] }}>
+        {slice.model.variations.map((v) => (
+          <SharedSliceCard
+            action={{ type: "menu" }}
+            key={v.id}
+            mode="navigation"
+            onUpdateScreenshot={() => {
+              // TODO
+            }}
+            replace
+            selected={v.id === variation.id}
+            slice={slice}
+            variant="outlined"
+            variationId={v.id}
+          />
+        ))}
+        <Button
+          onClick={() => {
+            setShowVariationModal(true);
+          }}
+          startIcon="add"
+          variant="secondary"
+        >
+          Add a new variation
+        </Button>
+      </ScrollArea>
+      <VariationModal
+        initialVariation={variation}
+        isOpen={showVariationModal}
+        onClose={() => {
+          setShowVariationModal(false);
+        }}
+        onSubmit={(id, name, copiedVariation) => {
+          copyVariationSlice(id, name, copiedVariation);
+          const url = SLICES_CONFIG.getBuilderPagePathname({
+            libraryName: slice.href,
+            sliceName: slice.model.name,
+            variationId: variation.id,
+          });
+          void router.replace(url);
+        }}
+        variations={slice.model.variations}
+      />
+    </>
+  );
+};