slice-machine-ui 1.18.1-dev-next-release.14 → 1.18.1-dev-next-release.15

package/components/ScreenshotPreview/index.tsx

@@ -9,11 +9,9 @@ const MemoedImage = memo<{ src: string | undefined }>(({ src }) => (
 interface ScreenshotPreviewProps {
   src?: string;
   sx: { height: string | number } & ThemeUIStyleObject;
-  hideMissingWarning?: boolean;
 }
 
 export const ScreenshotPreview: React.FC<ScreenshotPreviewProps> = ({
-  hideMissingWarning = false,
   src,
   sx,
 }) => {
@@ -32,23 +30,19 @@ export const ScreenshotPreview: React.FC<ScreenshotPreviewProps> = ({
         ...sx,
       }}
     >
-      {hideMissingWarning ? null : (
-        <>
-          {src !== undefined ? (
-            <MemoedImage src={src} />
-          ) : (
-            <Text
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-              }}
-            >
-              <MdInfoOutline />
-              You have no screenshot yet.
-            </Text>
-          )}
-        </>
+      {src !== undefined ? (
+        <MemoedImage src={src} />
+      ) : (
+        <Text
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <MdInfoOutline />
+          You have no screenshot yet.
+        </Text>
       )}
     </Flex>
   );

package/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)}

package/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>
   );
 };
 

package/lib/builders/SliceBuilder/Sidebar/index.tsx

@@ -0,0 +1,87 @@
+import { Box, Button } from "@prismicio/editor-ui";
+import { useRouter } from "next/router";
+import { type FC, useState } from "react";
+
+import VariationModal from "@builders/SliceBuilder/Sidebar/VariationModal";
+import ScreenshotChangesModal from "@components/ScreenshotChangesModal";
+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 { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+
+type SidebarProps = {
+  slice: ComponentUI;
+  variation: VariationSM;
+};
+
+export const Sidebar: FC<SidebarProps> = ({ slice, variation }) => {
+  const router = useRouter();
+
+  const screenshotChangesModal = useScreenshotChangesModal();
+  const { sliceFilterFn, defaultVariationSelector } =
+    screenshotChangesModal.modalPayload;
+
+  const [showVariationModal, setShowVariationModal] = useState(false);
+  const { copyVariationSlice } = useSliceMachineActions();
+
+  return (
+    <>
+      <Box flexDirection="column" gap={16}>
+        {slice.model.variations.map((v) => (
+          <SharedSliceCard
+            action={{ type: "menu" }}
+            key={v.id}
+            mode="navigation"
+            onUpdateScreenshot={() => {
+              screenshotChangesModal.onOpenModal({
+                sliceFilterFn: (s) => s,
+                defaultVariationSelector: {
+                  sliceID: slice.model.id,
+                  variationID: v.id,
+                },
+              });
+            }}
+            replace
+            selected={v.id === variation.id}
+            slice={slice}
+            variant="outlined"
+            variationId={v.id}
+          />
+        ))}
+        <Button
+          onClick={() => {
+            setShowVariationModal(true);
+          }}
+          startIcon="add"
+          sx={{ bottom: 72, marginInline: 24, position: "sticky" }}
+          variant="secondary"
+        >
+          Add a new variation
+        </Button>
+      </Box>
+      <ScreenshotChangesModal
+        slices={sliceFilterFn([slice])}
+        defaultVariationSelector={defaultVariationSelector}
+      />
+      <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: id,
+          });
+          void router.replace(url);
+        }}
+        variations={slice.model.variations}
+      />
+    </>
+  );
+};

package/lib/builders/SliceBuilder/index.tsx

@@ -1,18 +1,16 @@
-import { Button } from "@prismicio/editor-ui";
+import { Box, Button } from "@prismicio/editor-ui";
 import React, { useState, useEffect } from "react";
 
 import { handleRemoteResponse } from "@src/modules/toaster/utils";
 
-import { BaseStyles, Box, Grid } from "theme-ui";
-
 import FieldZones from "./FieldZones";
-import SideBar from "./SideBar";
-import Header from "./Header";
+import { Sidebar } from "./Sidebar";
 
 import useSliceMachineActions from "src/modules/useSliceMachineActions";
 import { useSelector } from "react-redux";
 import { SliceMachineStoreType } from "@src/redux/type";
 
+import SimulatorButton from "@builders/SliceBuilder/SimulatorButton";
 import {
   AppLayout,
   AppLayoutActions,
@@ -21,44 +19,28 @@ import {
   AppLayoutContent,
   AppLayoutHeader,
 } from "@components/AppLayout";
-import SimulatorButton from "@lib/builders/SliceBuilder/Header/SimulatorButton";
-import { SliceSM, VariationSM } from "@lib/models/common/Slice";
+import { VariationSM } from "@lib/models/common/Slice";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 
 import { FloatingBackButton } from "@src/features/slices/sliceBuilder/FloatingBackButton";
 import { selectIsSimulatorAvailableForFramework } from "@src/modules/environment";
 import { isSelectedSliceTouched } from "@src/modules/selectedSlice/selectors";
-import { getRemoteSlice } from "@src/modules/slices";
-import { useModelStatus } from "@src/hooks/useModelStatus";
 import { ComponentWithSliceProps } from "@src/layouts/WithSlice";
-import {
-  LocalAndRemoteSlice,
-  LocalOnlySlice,
-} from "@lib/models/common/ModelData";
 
 export type SliceBuilderState = {
-  imageLoading: boolean;
   loading: boolean;
   done: boolean;
-  error: null | string;
-  status: number | null;
 };
 
 export const initialState: SliceBuilderState = {
-  imageLoading: false,
   loading: false,
   done: false,
-  error: null,
-  status: null,
 };
 
 const SliceBuilder: ComponentWithSliceProps = ({ slice, variation }) => {
   const { openToaster, updateSlice } = useSliceMachineActions();
-  const { isTouched, remoteSlice } = useSelector(
-    (store: SliceMachineStoreType) => ({
-      isTouched: isSelectedSliceTouched(store, slice.from, slice.model.id),
-      remoteSlice: getRemoteSlice(store, slice.model.id),
-    }),
+  const isTouched = useSelector((store: SliceMachineStoreType) =>
+    isSelectedSliceTouched(store, slice.from, slice.model.id),
   );
 
   // We need to move this state to somewhere global to update the UI if any action from anywhere save or update to the filesystem I'd guess
@@ -88,7 +70,6 @@ const SliceBuilder: ComponentWithSliceProps = ({ slice, variation }) => {
         updateSlice={updateSlice.bind(null, slice, setData)}
         slice={slice}
         variation={variation}
-        remoteSlice={remoteSlice}
         isTouched={isTouched}
         data={data}
       />
@@ -99,7 +80,6 @@ type SliceBuilderForVariationProps = {
   updateSlice: () => void;
   slice: ComponentUI;
   variation: VariationSM;
-  remoteSlice: SliceSM | undefined;
   isTouched: boolean;
   data: SliceBuilderState;
 };
@@ -107,24 +87,13 @@ const SliceBuilderForVariation: React.FC<SliceBuilderForVariationProps> = ({
   updateSlice,
   slice,
   variation,
-  remoteSlice,
   isTouched,
   data,
 }) => {
-  const { isSimulatorAvailableForFramework } = useSelector(
-    (state: SliceMachineStoreType) => ({
-      isSimulatorAvailableForFramework:
-        selectIsSimulatorAvailableForFramework(state),
-    }),
+  const isSimulatorAvailableForFramework = useSelector(
+    selectIsSimulatorAvailableForFramework,
   );
 
-  const sliceModel: LocalAndRemoteSlice | LocalOnlySlice = {
-    local: slice.model,
-    localScreenshots: slice.screenshots,
-    ...(remoteSlice ? { remote: remoteSlice } : {}),
-  };
-  const { modelsStatuses } = useModelStatus({ slices: [sliceModel] });
-
   return (
     <AppLayout>
       <AppLayoutHeader>
@@ -146,24 +115,15 @@ const SliceBuilderForVariation: React.FC<SliceBuilderForVariationProps> = ({
         </AppLayoutActions>
       </AppLayoutHeader>
       <AppLayoutContent>
-        <BaseStyles>
-          <Header
-            component={slice}
-            status={modelsStatuses.slices[slice.model.id]}
-            variation={variation}
-            imageLoading={data.imageLoading}
-          />
-          <Grid columns="1fr 320px" gap="16px" sx={{ pt: 4 }}>
-            <Box>
-              <FieldZones variation={variation} />
-            </Box>
-            <SideBar
-              component={slice}
-              variation={variation}
-              isTouched={isTouched}
-            />
-          </Grid>
-        </BaseStyles>
+        <Box
+          alignItems="flex-start"
+          display="grid"
+          gap={16}
+          gridTemplateColumns="320px 1fr"
+        >
+          <Sidebar slice={slice} variation={variation} />
+          <FieldZones variation={variation} />
+        </Box>
         <FloatingBackButton />
       </AppLayoutContent>
     </AppLayout>

package/lib/builders/common/Zone/Card/components/ErrorTooltip.tsx

@@ -18,12 +18,8 @@ export const ErrorTooltip: React.FC<ErrorTooltip> = ({ error }) => {
         <FaRegQuestionCircle
           color={"tomato"}
           data-tip={error}
-          style={{
-            position: "relative",
-            right: "24px",
-            height: "24px",
-          }}
-          size={56}
+          style={{ position: "absolute", right: "8px" }}
+          size={16}
         />
       </>
     );

package/lib/builders/common/Zone/Card/components/NewField.tsx

@@ -1,6 +1,6 @@
 import { Ref, SetStateAction, useEffect, useRef, useState } from "react";
 import { Formik, Form, Field } from "formik";
-import { Box, Input, Flex, Text, Button, useThemeUI } from "theme-ui";
+import { Input, Flex, Text, Button, useThemeUI } from "theme-ui";
 import * as CSS from "csstype";
 import { AnyObjectSchema } from "yup";
 
@@ -132,48 +132,48 @@ const NewField: React.FC<NewField> = ({
               variant: "styles.listItem",
               // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions, @typescript-eslint/prefer-nullish-coalescing
               border: (t) => `1px solid ${t.colors?.borders?.toString() || ""}`,
+              flexWrap: "wrap",
+              gap: "12px",
+              justifyContent: "flex-start",
             }}
           >
+            <WidgetIcon
+              style={{
+                color: theme.colors?.primary as CSS.Property.Color,
+                borderRadius: "4px",
+                padding: "4px",
+                border: "2px solid",
+                borderColor: theme.colors?.primary as CSS.Property.Color,
+              }}
+              size={28}
+            />
             <Flex
               sx={{
                 alignItems: "center",
+                flexGrow: 1,
+                gap: 2,
+                position: "relative",
               }}
             >
-              <WidgetIcon
-                style={{
-                  color: theme.colors?.primary as CSS.Property.Color,
-                  marginRight: "8px",
-                  borderRadius: "4px",
-                  padding: "4px",
-                  border: "2px solid",
-                  borderColor: theme.colors?.primary as CSS.Property.Color,
+              <Text as="p" sx={{ fontWeight: 500, whiteSpace: "nowrap" }}>
+                Field Name
+              </Text>
+              <Field
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  handleLabelChange(e, values, setValues)
+                }
+                name="label"
+                placeholder="Field Name"
+                type="text"
+                validate={(value: string) => {
+                  if (!value.length) {
+                    return "This field is required";
+                  }
                 }}
-                size={28}
-              />
-              <Flex
+                as={RefInput}
+                innerRef={fieldRef}
                 sx={{
-                  display: "flex",
-                  alignItems: "center",
-                }}
-              >
-                <Text as="p" sx={{ mr: 3, minWidth: "86px", fontWeight: 500 }}>
-                  Field Name
-                </Text>
-                <Field
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    handleLabelChange(e, values, setValues)
-                  }
-                  name="label"
-                  placeholder="Field Name"
-                  type="text"
-                  validate={(value: string) => {
-                    if (!value.length) {
-                      return "This field is required";
-                    }
-                  }}
-                  as={RefInput}
-                  innerRef={fieldRef}
-                  sx={getInputFieldStyles(
+                  ...getInputFieldStyles(
                     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
                     FormFields.label.disabled
                       ? InputFieldStyles.DISABLED
@@ -181,34 +181,45 @@ const NewField: React.FC<NewField> = ({
                       errors.label
                       ? InputFieldStyles.ERROR
                       : undefined,
-                  )}
-                  aria-label="label-input"
-                  data-cy="new-field-name-input"
-                />
-                <ErrorTooltip error={errors.label} />
-                <Text
-                  as="p"
-                  sx={{ ml: 3, mr: 3, minWidth: "56px", fontWeight: 500 }}
-                >
-                  field ID
-                </Text>
-                <Field
-                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                    handleIdChange(e, setFieldValue)
-                  }
-                  name="id"
-                  placeholder="e.g. buttonLink"
-                  type="text"
-                  disabled={FormFields.id.disabled}
-                  validate={(value: string) =>
-                    validateId({
-                      value,
-                      fields,
-                      initialId: null,
-                    })
-                  }
-                  as={RefInput}
-                  sx={getInputFieldStyles(
+                  ),
+                  flexGrow: 1,
+                  minWidth: "128px",
+                  width: "initial",
+                }}
+                aria-label="label-input"
+                data-cy="new-field-name-input"
+              />
+              <ErrorTooltip error={errors.label} />
+            </Flex>
+            <Flex
+              sx={{
+                alignItems: "center",
+                flexGrow: 1,
+                gap: 2,
+                position: "relative",
+              }}
+            >
+              <Text as="p" sx={{ fontWeight: 500, whiteSpace: "nowrap" }}>
+                Field ID
+              </Text>
+              <Field
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  handleIdChange(e, setFieldValue)
+                }
+                name="id"
+                placeholder="e.g. buttonLink"
+                type="text"
+                disabled={FormFields.id.disabled}
+                validate={(value: string) =>
+                  validateId({
+                    value,
+                    fields,
+                    initialId: null,
+                  })
+                }
+                as={RefInput}
+                sx={{
+                  ...getInputFieldStyles(
                     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
                     FormFields.id.disabled
                       ? InputFieldStyles.DISABLED
@@ -216,13 +227,16 @@ const NewField: React.FC<NewField> = ({
                       errors.id
                       ? InputFieldStyles.ERROR
                       : undefined,
-                  )}
-                  data-cy="new-field-id-input"
-                />
-                <ErrorTooltip error={errors.id} />
-              </Flex>
+                  ),
+                  flexGrow: 1,
+                  minWidth: "128px",
+                  width: "initial",
+                }}
+                data-cy="new-field-id-input"
+              />
+              <ErrorTooltip error={errors.id} />
             </Flex>
-            <Box sx={{ minWidth: 150, ml: 3 }}>
+            <Flex sx={{ gap: 2 }}>
               <Button
                 onClick={onCancelNewField}
                 variant="secondary"
@@ -238,13 +252,12 @@ const NewField: React.FC<NewField> = ({
                   fontSize: "14px",
                   borderRadius: "4px",
                   lineHeight: "21px",
-                  ml: 2,
                 }}
                 type="submit"
               >
                 Add
               </Button>
-            </Box>
+            </Flex>
           </Flex>
         </Form>
       )}

package/lib/builders/common/Zone/Card/index.jsx

@@ -23,7 +23,6 @@ const FieldZone = ({
   isRepeatable,
   dataCy,
   isRepeatableCustomType,
-  sx,
 }) => {
   return (
     <DragDropContext
@@ -41,8 +40,7 @@ const FieldZone = ({
             {...provided.droppableProps}
             // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
             data-cy={dataCy}
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            sx={sx}
+            sx={{ paddingInline: "16px !important" }}
           >
             {
               // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call