slice-machine-ui 1.18.1-dev-next-release.2 → 1.18.1-dev-next-release.4

package/components/Button/index.tsx

@@ -48,7 +48,7 @@ export const Button = forwardRef<HTMLButtonElement, SmButtonProps>(
       variant = "primary",
       ...rest
     },
-    ref
+    ref,
   ) => (
     <ThemeUIButton
       ref={ref}
@@ -89,5 +89,5 @@ export const Button = forwardRef<HTMLButtonElement, SmButtonProps>(
         </>
       )}
     </ThemeUIButton>
-  )
+  ),
 );

package/components/Changelog/index.tsx

@@ -17,7 +17,7 @@ export default function Changelog() {
       changelog: getChangelog(store),
       packageManager: getPackageManager(store),
       isChangelogLoading: isLoading(store, LoadingKeysEnum.CHANGELOG),
-    })
+    }),
   );
 
   const latestVersion = changelog.sliceMachine.versions[0];

package/components/Changelog/versionDetails/UpdateCommandBox.tsx

@@ -94,7 +94,7 @@ export const UpdateCommandBox: React.FC<UpdateCommandBoxProps> = ({
 
 function getInstallCommand(
   packageManager: PackageManager,
-  packagesSpecs: string[]
+  packagesSpecs: string[],
 ): string {
   const packagesSpecsStr = packagesSpecs.join(" ");
 

package/components/ChangesItems/ChangesItems.tsx

@@ -33,7 +33,7 @@ export const ChangesItems: React.FC<ChangesItemsProps> = ({
   const { sliceFilterFn, defaultVariationSelector } = modalPayload;
 
   const screenshotChangesSlices = unSyncedSlices.filter(
-    (s) => modelsStatuses.slices[s.model.id] !== ModelStatus.Deleted
+    (s) => modelsStatuses.slices[s.model.id] !== ModelStatus.Deleted,
   );
 
   return (
@@ -71,7 +71,7 @@ export const ChangesItems: React.FC<ChangesItemsProps> = ({
                   (slice) =>
                     countMissingScreenshots(slice) > 0 &&
                     modelsStatuses.slices[slice.model.id] !==
-                      ModelStatus.Deleted
+                      ModelStatus.Deleted,
                 ) && (
                   <Text
                     sx={{

package/components/CustomTypeTable/changesPage.tsx

@@ -96,7 +96,7 @@ export const CustomTypeTable: React.FC<CustomTypeTableProps> = ({
                 key={customType.remote.id}
               />
             </tr>
-          )
+          ),
         )}
       </tbody>
     </Box>

package/components/DeleteDocumentsDrawer/HardDeleteDocumentsDrawer.tsx

@@ -21,7 +21,7 @@ export const HardDeleteDocumentsDrawer: React.FunctionComponent<{
     useSelector((store: SliceMachineStoreType) => ({
       isDeleteDocumentsDrawerOpen: isModalOpen(
         store,
-        ModalKeysEnum.HARD_DELETE_DOCUMENTS_DRAWER
+        ModalKeysEnum.HARD_DELETE_DOCUMENTS_DRAWER,
       ),
       remoteOnlyCustomTypes: selectAllCustomTypes(store).filter(isRemoteOnly),
       modalData: store.pushChanges,
@@ -39,7 +39,7 @@ export const HardDeleteDocumentsDrawer: React.FunctionComponent<{
   const associatedDocumentsCards = modalData.details.customTypes.map(
     (customTypeDetail) => {
       const customType = remoteOnlyCustomTypes.find(
-        (customType) => getModelId(customType) === customTypeDetail.id
+        (customType) => getModelId(customType) === customTypeDetail.id,
       );
       if (customType === undefined) return null;
 
@@ -52,7 +52,7 @@ export const HardDeleteDocumentsDrawer: React.FunctionComponent<{
           numberOfDocuments={customTypeDetail.numberOfDocuments}
         />
       );
-    }
+    },
   );
 
   return (

package/components/DeleteDocumentsDrawer/ReferencesErrorDrawer.tsx

@@ -20,7 +20,7 @@ export const ReferencesErrorDrawer: React.FunctionComponent<{
       isOpen: isModalOpen(store, ModalKeysEnum.REFERENCES_MISSING_DRAWER),
       localCustomTypes: selectAllCustomTypes(store).filter(hasLocal),
       modalData: store.pushChanges,
-    })
+    }),
   );
   const { closeModals, openToaster } = useSliceMachineActions();
 
@@ -36,7 +36,7 @@ export const ReferencesErrorDrawer: React.FunctionComponent<{
   const associatedDocumentsCards = modalData.details.customTypes.map(
     (customTypeDetail) => {
       const customType = localCustomTypes.find(
-        (customType) => getModelId(customType) === customTypeDetail.id
+        (customType) => getModelId(customType) === customTypeDetail.id,
       );
       if (customType === undefined) return null;
 
@@ -47,7 +47,7 @@ export const ReferencesErrorDrawer: React.FunctionComponent<{
           name={customType.local.label ?? customType.local.id}
         />
       );
-    }
+    },
   );
 
   return (

package/components/DeleteDocumentsDrawer/SoftDeleteDocumentsDrawer.tsx

@@ -50,7 +50,7 @@ export const SoftDeleteDocumentsDrawer: React.FunctionComponent<{
     useSelector((store: SliceMachineStoreType) => ({
       isDeleteDocumentsDrawerOpen: isModalOpen(
         store,
-        ModalKeysEnum.SOFT_DELETE_DOCUMENTS_DRAWER
+        ModalKeysEnum.SOFT_DELETE_DOCUMENTS_DRAWER,
       ),
       remoteOnlyCustomTypes: selectAllCustomTypes(store).filter(isRemoteOnly),
       modalData: store.pushChanges,
@@ -68,7 +68,7 @@ export const SoftDeleteDocumentsDrawer: React.FunctionComponent<{
   const associatedDocumentsCards = modalData.details.customTypes.map(
     (customTypeDetail) => {
       const customType = remoteOnlyCustomTypes.find(
-        (customType) => getModelId(customType) === customTypeDetail.id
+        (customType) => getModelId(customType) === customTypeDetail.id,
       );
       if (customType === undefined) return null;
 
@@ -81,7 +81,7 @@ export const SoftDeleteDocumentsDrawer: React.FunctionComponent<{
           numberOfDocuments={customTypeDetail.numberOfDocuments}
         />
       );
-    }
+    },
   );
 
   return (

package/components/DeleteSliceModal/index.tsx

@@ -24,7 +24,7 @@ export const DeleteSliceModal: React.FunctionComponent<
     (store: SliceMachineStoreType) => ({
       isSliceModalOpen: isModalOpen(store, ModalKeysEnum.DELETE_SLICE),
       isDeletingSlice: isLoading(store, LoadingKeysEnum.DELETE_SLICE),
-    })
+    }),
   );
 
   const { closeModals, deleteSlice } = useSliceMachineActions();

package/components/FormFields/CheckboxControl.jsx

@@ -27,7 +27,7 @@ const CheckboxControl = ({
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment
   const [isChecked, setCheck] = useState(
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/strict-boolean-expressions
-    defaultValue || field.defaultValue || false
+    defaultValue || field.defaultValue || false,
   );
 
   useEffect(() => {

package/components/Forms/CreateCustomTypeModal/CreateCustomTypeModal.tsx

@@ -49,7 +49,7 @@ export const CreateCustomTypeModal: React.FC<CreateCustomTypeModalProps> = ({
     customTypeLabels: selectAllCustomTypeLabels(store),
     isCreateCustomTypeModalOpen: isModalOpen(
       store,
-      ModalKeysEnum.CREATE_CUSTOM_TYPE
+      ModalKeysEnum.CREATE_CUSTOM_TYPE,
     ),
     isCreatingCustomType: isLoading(store, LoadingKeysEnum.CREATE_CUSTOM_TYPE),
   }));
@@ -77,8 +77,8 @@ export const CreateCustomTypeModal: React.FC<CreateCustomTypeModalProps> = ({
     values: FormValues,
     setValues: (
       values: SetStateAction<FormValues>,
-      shouldValidate?: boolean
-    ) => void
+      shouldValidate?: boolean,
+    ) => void,
   ) => {
     if (isIdFieldPristine) {
       setValues({
@@ -96,8 +96,8 @@ export const CreateCustomTypeModal: React.FC<CreateCustomTypeModalProps> = ({
     setFieldValue: (
       field: string,
       value: string,
-      shouldValidate?: boolean
-    ) => Promise<unknown>
+      shouldValidate?: boolean,
+    ) => Promise<unknown>,
   ) => {
     void setFieldValue("id", e.target.value);
     setIsIdFieldPristine(false);

package/components/Forms/CreateSliceModal/CreateSliceModal.tsx

@@ -17,7 +17,7 @@ type CreateSliceModalProps = {
   onClose: () => void;
   onSuccess: (
     newSlice: SharedSlice,
-    libraryName: string
+    libraryName: string,
   ) => Promise<void> | void;
   localLibraries: readonly LibraryUI[];
   remoteSlices: ReadonlyArray<SliceSM>;

package/components/Forms/RenameSliceModal/RenameSliceModal.tsx

@@ -27,7 +27,7 @@ export const RenameSliceModal: React.FC<RenameSliceModalProps> = ({
       isRenameSliceModalOpen: isModalOpen(store, ModalKeysEnum.RENAME_SLICE),
       localLibs: getLibraries(store),
       remoteLibs: getRemoteSlices(store),
-    })
+    }),
   );
 
   const handleOnSubmit = (values: SliceModalValues) => {

package/components/Forms/formsValidator.ts

@@ -14,7 +14,7 @@ type SliceModalValuesValidity =
 export function validateSliceModalValues(
   { sliceName }: SliceModalValues,
   localLibs: ReadonlyArray<LibraryUI>,
-  remoteLibs: ReadonlyArray<SliceSM>
+  remoteLibs: ReadonlyArray<SliceSM>,
 ): SliceModalValuesValidity {
   if (!sliceName) {
     return { sliceName: "Cannot be empty" };
@@ -37,7 +37,7 @@ export function validateSliceModalValues(
   }
 
   const localNames = localLibs.flatMap((lib) =>
-    lib.components.map((slice) => slice.model.name)
+    lib.components.map((slice) => slice.model.name),
   );
   const remoteNames = remoteLibs.map((slice) => slice.name);
   const usedNames = [...localNames, ...remoteNames];

package/components/Grid/index.tsx

@@ -34,7 +34,7 @@ function Grid<T>({
           <span key={`${defineElementKey(elem)}-${i + 1}`}>
             {renderElem(elem, i)}
           </span>
-        ) : null
+        ) : null,
       )}
     </Box>
   );

package/components/Li/index.tsx

@@ -10,7 +10,7 @@ interface LiProps {
 const Li = forwardRef(
   (
     { children, Component = Flex, sx = {}, ...rest }: LiProps,
-    ref: React.ForwardedRef<HTMLDivElement>
+    ref: React.ForwardedRef<HTMLDivElement>,
   ) => (
     <Component
       as="li"
@@ -26,7 +26,7 @@ const Li = forwardRef(
     >
       {children}
     </Component>
-  )
+  ),
 );
 
 export default Li;

package/components/ListItem/index.tsx

@@ -25,7 +25,7 @@ interface ListItemProps<F extends TabField, S extends AnyObjectSchema> {
   enterEditMode: (
     itemInfo: [string, F],
     modelFieldName: string | undefined,
-    index: number
+    index: number,
   ) => void;
   modelFieldName?: string;
   renderFieldAccessor?: (key: string) => string;
@@ -123,7 +123,7 @@ function ListItem<F extends TabField, S extends AnyObjectSchema>({
                             enterEditMode(
                               [key, item.value],
                               modelFieldName,
-                              index
+                              index,
                             )
                           }
                         />

package/components/ListItem/utils.js

@@ -35,7 +35,7 @@ export const getDraggedDomPosition = (event) => {
     clientWidth,
     clientY,
     clientX: parseFloat(
-      window.getComputedStyle(draggedDOM.parentNode).paddingLeft
+      window.getComputedStyle(draggedDOM.parentNode).paddingLeft,
     ),
   };
 };

package/components/LoginModal/index.tsx

@@ -40,7 +40,7 @@ const LoginModal: React.FunctionComponent = () => {
       isOpen: isModalOpen(store, ModalKeysEnum.LOGIN),
       isLoginLoading: isLoading(store, LoadingKeysEnum.LOGIN),
       env: getEnvironment(store),
-    })
+    }),
   );
 
   const { closeModals, startLoadingLogin, stopLoadingLogin, openToaster } =
@@ -66,7 +66,7 @@ const LoginModal: React.FunctionComponent = () => {
           Boolean(status.shortId) &&
           Boolean(status.intercomHash),
         3000,
-        60
+        60,
       );
 
       openToaster("Logged in", ToasterType.SUCCESS);

package/components/ModalFormCard/index.tsx

@@ -24,12 +24,12 @@ type ModalCardProps<T extends FormikValues> = {
       field: string,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       value: any,
-      shouldValidate?: boolean | undefined
+      shouldValidate?: boolean | undefined,
     ) => Promise<void | FormikErrors<FormikValues>>;
     values: T;
     setValues: (
       values: SetStateAction<T>,
-      shouldValidate?: boolean | undefined
+      shouldValidate?: boolean | undefined,
     ) => void;
   }) => JSX.Element;
   close: () => void;

package/components/Navigation/VideoItem.tsx

@@ -59,7 +59,7 @@ export const VideoItem = forwardRef<HTMLLIElement, VideoItemProps>(
         </SideNavListItem>
       </MaybeVideoTooltipWrapper>
     );
-  }
+  },
 );
 
 type MaybeVideoTooltipWrapperProps = VideoItemProps & {
@@ -131,7 +131,7 @@ const OldVideoItem: FC<OldVideoItemProps> = ({
       }
       ref.current = node;
     },
-    [hasSeenTutorialsToolTip]
+    [hasSeenTutorialsToolTip],
   );
 
   return (

package/components/Navigation/index.test.tsx

@@ -153,7 +153,7 @@ describe("Side Navigation", () => {
       await user.click(link);
 
       expect(mockRouter.asPath).toBe(path);
-    }
+    },
   );
 
   test("should display the number of changes on the 'Changes' item", async () => {
@@ -177,7 +177,7 @@ describe("Side Navigation", () => {
 
     expect(within(changesItem).queryByText("1")).not.toBeInTheDocument();
     expect(
-      within(changesItem).queryByText("Logged out")
+      within(changesItem).queryByText("Logged out"),
     ).not.toBeInTheDocument();
   });
 
@@ -241,7 +241,7 @@ describe("Side Navigation", () => {
       .closest("a") as HTMLAnchorElement;
 
     expect(
-      within(changesItem).queryByText("Logged out")
+      within(changesItem).queryByText("Logged out"),
     ).not.toBeInTheDocument();
   });
 
@@ -265,7 +265,7 @@ describe("Side Navigation", () => {
       createSliceMachineManagerMSWHandler({
         url: "http://localhost:3000/_manager",
         sliceMachineManager: manager,
-      })
+      }),
     );
 
     renderSideNavigation({ canUpdate: true });
@@ -276,8 +276,8 @@ describe("Side Navigation", () => {
     await waitFor(() =>
       expect(link).toHaveAttribute(
         "href",
-        "https://prismic.io/academy/prismic-and-nextjs"
-      )
+        "https://prismic.io/academy/prismic-and-nextjs",
+      ),
     );
 
     expect(link).toHaveAttribute("target", "_blank");
@@ -290,7 +290,7 @@ describe("Side Navigation", () => {
       ?.parentElement as HTMLElement;
     expect(link).toHaveAttribute(
       "href",
-      "https://youtube.com/playlist?list=PLUVZjQltoA3wnaQudcqQ3qdZNZ6hyfyhH"
+      "https://youtube.com/playlist?list=PLUVZjQltoA3wnaQudcqQ3qdZNZ6hyfyhH",
     );
     expect(link).toHaveAttribute("target", "_blank");
 
@@ -299,7 +299,7 @@ describe("Side Navigation", () => {
     const tooltip = await screen.findByRole("tooltip");
     expect(tooltip).toBeVisible();
     const closeButton = await within(tooltip).findByTestId(
-      "video-tooltip-close-button"
+      "video-tooltip-close-button",
     );
     await user.click(closeButton);
 

package/components/Navigation/index.tsx

@@ -66,7 +66,7 @@ const Navigation: FC = () => {
             })}
             href={CUSTOM_TYPES_CONFIG["page"].tablePagePathname}
             active={CUSTOM_TYPES_CONFIG["page"].matchesTablePagePathname(
-              router.asPath
+              router.asPath,
             )}
             component={Link}
             Icon={CUSTOM_TYPES_CONFIG.page.Icon}
@@ -81,7 +81,7 @@ const Navigation: FC = () => {
             })}
             href={CUSTOM_TYPES_CONFIG["custom"].tablePagePathname}
             active={CUSTOM_TYPES_CONFIG["custom"].matchesTablePagePathname(
-              router.asPath
+              router.asPath,
             )}
             component={Link}
             Icon={CUSTOM_TYPES_CONFIG.custom.Icon}

package/components/ReviewModal/ReviewForm.tsx

@@ -37,7 +37,7 @@ export const ReviewForm: FC<ReviewFormProps> = (props) => {
     (store: SliceMachineStoreType) => ({
       isReviewLoading: isLoading(store, LoadingKeysEnum.REVIEW),
       isLoginModalOpen: isModalOpen(store, ModalKeysEnum.LOGIN),
-    })
+    }),
   );
   const { skipReview, sendAReview, startLoadingReview, stopLoadingReview } =
     useSliceMachineActions();

package/components/ReviewModal/ReviewModal.tsx

@@ -16,7 +16,7 @@ export const ReviewModal: FC = () => {
       customTypes: selectAllCustomTypes(store),
       libraries: getLibraries(store),
       lastSyncChange: getLastSyncChange(store),
-    })
+    }),
   );
 
   const sliceCount =
@@ -33,13 +33,13 @@ export const ReviewModal: FC = () => {
     (customType) =>
       hasLocal(customType) &&
       customType.local.tabs.some(
-        (tab) => tab.sliceZone && tab.sliceZone?.value.length > 0
-      )
+        (tab) => tab.sliceZone && tab.sliceZone?.value.length > 0,
+      ),
   );
 
   const hasPushedAnHourAgo = Boolean(
     // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-    lastSyncChange && Date.now() - lastSyncChange >= 3600000
+    lastSyncChange && Date.now() - lastSyncChange >= 3600000,
   );
 
   const isAdvancedRepository =

package/components/ScreenshotChangesModal/VariationDropZone.tsx

@@ -96,9 +96,9 @@ const DropZone: React.FC<DropZoneProps> = ({
     (state: SliceMachineStoreType) => ({
       isLoadingScreenshot: isLoading(
         state,
-        LoadingKeysEnum.GENERATE_SLICE_CUSTOM_SCREENSHOT
+        LoadingKeysEnum.GENERATE_SLICE_CUSTOM_SCREENSHOT,
       ),
-    })
+    }),
   );
 
   const { FileInputRenderer, fileInputProps } = useCustomScreenshot({
@@ -107,7 +107,7 @@ const DropZone: React.FC<DropZoneProps> = ({
         variationID,
         slice,
         file,
-        isDragActive ? "dragAndDrop" : "upload"
+        isDragActive ? "dragAndDrop" : "upload",
       );
       setIsHover(false);
     },
@@ -117,7 +117,7 @@ const DropZone: React.FC<DropZoneProps> = ({
     if (file.size > 128000000) {
       return openToaster(
         "File is too big. Max file size: 128Mb.",
-        ToasterType.ERROR
+        ToasterType.ERROR,
       );
     }
     generateSliceCustomScreenshot(variationID, slice, file, "dragAndDrop");
@@ -131,7 +131,7 @@ const DropZone: React.FC<DropZoneProps> = ({
       const clipboardItems = await navigator.clipboard.read();
       if (clipboardItems[0] !== undefined) {
         const maybeType = clipboardItems[0].types.find((type) =>
-          imageTypes.map((t) => `image/${t}`).includes(type)
+          imageTypes.map((t) => `image/${t}`).includes(type),
         );
         if (maybeType !== undefined) {
           const blob = await clipboardItems[0].getType(maybeType);
@@ -153,7 +153,7 @@ const DropZone: React.FC<DropZoneProps> = ({
       }
       return openToaster(
         `Only files of type ${imageTypes.join(", ")} are accepted.`,
-        ToasterType.ERROR
+        ToasterType.ERROR,
       );
     }
   };

package/components/ScreenshotChangesModal/index.tsx

@@ -157,7 +157,7 @@ const VariationsList = ({
 
 const variationSetter = (
   defaultVariationSelector: SliceVariationSelector | undefined,
-  slices: ComponentUI[]
+  slices: ComponentUI[],
 ) =>
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
   defaultVariationSelector ||
@@ -182,7 +182,7 @@ const ScreenshotChangesModal = ({
   }));
 
   const [variationSelector, setVariationSelector] = useState(
-    variationSetter(defaultVariationSelector, slices)
+    variationSetter(defaultVariationSelector, slices),
   );
 
   useEffect(() => {
@@ -269,7 +269,7 @@ const ScreenshotChangesModal = ({
             {supportsClipboardRead ? <FigmaTip /> : undefined}
             {(() => {
               const slice = slices.find(
-                (s) => s.model.id === variationSelector.sliceID
+                (s) => s.model.id === variationSelector.sliceID,
               );
               return slice ? (
                 <VariationDropZone

package/components/ScreenshotPreviewModal/index.tsx

@@ -22,9 +22,9 @@ const ScreenshotPreviewModal: React.FunctionComponent<ScreenshotModalProps> = ({
     (store: SliceMachineStoreType) => ({
       isScreenshotModalOpen: isModalOpen(
         store,
-        ModalKeysEnum.SCREENSHOT_PREVIEW
+        ModalKeysEnum.SCREENSHOT_PREVIEW,
       ),
-    })
+    }),
   );
 
   const { closeModals } = useSliceMachineActions();

package/components/Simulator/components/Header/index.tsx

@@ -16,7 +16,7 @@ import { VariationSM } from "@lib/models/common/Slice";
 const redirect = (
   model: ComponentUI,
   variation: { id: string } | undefined,
-  isSimulator?: boolean
+  isSimulator?: boolean,
 ): void => {
   if (!variation) {
     void router.push(`/${model.href}/${model.model.name}`);

package/components/Simulator/components/IframeRenderer/index.tsx

@@ -9,7 +9,7 @@ import { ScreenDimensions } from "@lib/models/common/Screenshots";
 
 function useSimulatorClient(): readonly [
   SimulatorClient | undefined,
-  RefCallback<HTMLIFrameElement>
+  RefCallback<HTMLIFrameElement>,
 ] {
   const [client, setClient] = useState<SimulatorClient | undefined>();
   const clientRef = useRef<SimulatorClient>();
@@ -149,7 +149,7 @@ const IframeRenderer: React.FunctionComponent<IframeRendererProps> = ({
 
 export function getScaling(
   { height: iframeHeight, width: iframeWidth }: ScreenDimensions,
-  { height: viewportHeight, width: viewportWidth }: ScreenDimensions
+  { height: viewportHeight, width: viewportWidth }: ScreenDimensions,
 ): number {
   if (iframeWidth > viewportWidth || iframeHeight > viewportHeight) {
     return iframeWidth - viewportWidth > iframeHeight - viewportHeight

package/components/Simulator/components/SetupModal/index.tsx

@@ -83,7 +83,7 @@ const SetupModal: React.FC<{ isOpen: boolean }> = ({ isOpen }) => {
       isSimulatorAvailableForFramework:
         selectIsSimulatorAvailableForFramework(state),
       setupSteps: selectSetupSteps(state),
-    })
+    }),
   );
 
   // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing

package/components/Simulator/components/Toolbar/index.tsx

@@ -30,7 +30,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   actionsDisabled,
 }) => {
   const [selectedDropdown, setSelectedDropdown] = useState<string>(
-    ScreenSizeOptions.DESKTOP
+    ScreenSizeOptions.DESKTOP,
   );
 
   const dropDownChangeHandler = (selected: string) => {
@@ -45,7 +45,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   const screenSizeChangeHandler = (newScreenDimensions: ScreenDimensions) => {
     const matchingIndex = Object.values(ScreenSizes).findIndex(
       (dimension) =>
-        JSON.stringify(dimension) === JSON.stringify(newScreenDimensions)
+        JSON.stringify(dimension) === JSON.stringify(newScreenDimensions),
     );
 
     const newDropDownState =

package/components/Simulator/index.tsx

@@ -77,7 +77,7 @@ const Simulator: ComponentWithSliceProps = ({ slice, variation }) => {
       env: "prod",
       unsplashUrl: endpoints.PrismicUnsplash,
     }),
-    [endpoints.PrismicOembed, endpoints.PrismicUnsplash]
+    [endpoints.PrismicOembed, endpoints.PrismicUnsplash],
   );
 
   const setupIntervalId = useRef<NodeJS.Timeout | null>(null);
@@ -156,14 +156,14 @@ const Simulator: ComponentWithSliceProps = ({ slice, variation }) => {
   };
 
   const [screenDimensions, setScreenDimensions] = useState<ScreenDimensions>(
-    ScreenSizes[ScreenSizeOptions.DESKTOP]
+    ScreenSizes[ScreenSizeOptions.DESKTOP],
   );
 
   const sharedSlice = useMemo(() => Slices.fromSM(slice.model), [slice.model]);
 
   // state used only to store updates coming from the editor
   const [editorState, setEditorState] = useState<SharedSliceContent | null>(
-    null
+    null,
   );
 
   // computed state that takes the editorState if any change
@@ -190,7 +190,7 @@ const Simulator: ComponentWithSliceProps = ({ slice, variation }) => {
         }
       ).id,
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [],
   );
 
   // When the content change, we re-render the content but overwrite the newly
@@ -202,7 +202,7 @@ const Simulator: ComponentWithSliceProps = ({ slice, variation }) => {
       id: renderedSliceId,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [sharedSlice, editorContent]
+    [sharedSlice, editorContent],
   );
 
   const apiContent = useThrottle(renderSliceMockCb, 800, [