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

prismicio · Oct 20, 2023 · 9f1e26c · 9f1e26c
1 parent cf44e79
commit 9f1e26c
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 158 deletions.
diff --git a/packages/slice-machine/lib/builders/SliceBuilder/FieldZones/index.tsx b/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>
   );
 };
 

diff --git a/packages/slice-machine/lib/builders/SliceBuilder/Header/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/Header/index.tsx
@@ -7,13 +7,10 @@ import VariationPopover from "./VariationsPopover";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { VariationSM } from "@lib/models/common/Slice";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { ModelStatus } from "@lib/models/common/ModelStatus";
 
 const Header: React.FC<{
   component: ComponentUI;
-  status: ModelStatus;
   variation: VariationSM;
-  imageLoading?: boolean;
 }> = ({ component, variation }) => {
   const router = useRouter();
   const [showVariationModal, setShowVariationModal] = useState(false);

diff --git a/packages/slice-machine/lib/builders/SliceBuilder/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/index.tsx
@@ -22,43 +22,28 @@ import {
   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 +73,6 @@ const SliceBuilder: ComponentWithSliceProps = ({ slice, variation }) => {
         updateSlice={updateSlice.bind(null, slice, setData)}
         slice={slice}
         variation={variation}
-        remoteSlice={remoteSlice}
         isTouched={isTouched}
         data={data}
       />
@@ -99,32 +83,20 @@ type SliceBuilderForVariationProps = {
   updateSlice: () => void;
   slice: ComponentUI;
   variation: VariationSM;
-  remoteSlice: SliceSM | undefined;
   isTouched: boolean;
   data: SliceBuilderState;
 };
 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>
@@ -147,12 +119,7 @@ const SliceBuilderForVariation: React.FC<SliceBuilderForVariationProps> = ({
       </AppLayoutHeader>
       <AppLayoutContent>
         <BaseStyles>
-          <Header
-            component={slice}
-            status={modelsStatuses.slices[slice.model.id]}
-            variation={variation}
-            imageLoading={data.imageLoading}
-          />
+          <Header component={slice} variation={variation} />
           <Grid columns="1fr 320px" gap="16px" sx={{ pt: 4 }}>
             <Box>
               <FieldZones variation={variation} />

diff --git a/packages/slice-machine/lib/builders/common/Zone/Card/index.jsx b/packages/slice-machine/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

diff --git a/packages/slice-machine/lib/builders/common/Zone/components/ZoneHeader/index.tsx b/packages/slice-machine/lib/builders/common/Zone/components/ZoneHeader/index.tsx
diff --git a/packages/slice-machine/lib/builders/common/Zone/index.jsx b/packages/slice-machine/lib/builders/common/Zone/index.jsx
@@ -1,15 +1,14 @@
-import { Button, ButtonGroup, Switch, Text } from "@prismicio/editor-ui";
+import { Button, Switch, Text } from "@prismicio/editor-ui";
 import { array, arrayOf, bool, func, object, shape, string } from "prop-types";
 import { useState } from "react";
-import { BaseStyles, Heading } from "theme-ui";
+import { BaseStyles } from "theme-ui";
 
 import { ListHeader } from "@src/components/List";
 
 import SelectFieldTypeModal from "../SelectFieldTypeModal";
 import NewField from "./Card/components/NewField";
 import Card from "./Card";
 import EmptyState from "./components/EmptyState";
-import ZoneHeader from "./components/ZoneHeader";
 
 const Zone = ({
   zoneType /* type of the zone: customType or slice */,
@@ -30,8 +29,6 @@ const Zone = ({
   dataCy,
   isRepeatableCustomType,
 }) => {
-  const isCustomType = zoneType === "customType";
-
   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const widgetsArrayWithCondUid = (() => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-argument
@@ -74,68 +71,36 @@ const Zone = ({
 
   return (
     <>
-      {isCustomType ? (
-        <ListHeader
-          actions={
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            fields.length > 0 ? (
-              <>
-                <Text color="grey11" component="span">
-                  Show code snippets?
-                </Text>
-                <Switch
-                  checked={showHints}
-                  onCheckedChange={setShowHints}
-                  size="small"
-                />
-                <Button
-                  data-cy={`add-${
-                    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-                    isRepeatable ? "Repeatable" : "Static"
-                  }-field`}
-                  onClick={enterSelectMode}
-                  startIcon="add"
-                  variant="secondary"
-                >
-                  Add a new field
-                </Button>
-              </>
-            ) : undefined
-          }
-        >
-          {title}
-        </ListHeader>
-      ) : (
-        <BaseStyles>
-          <ZoneHeader
-            Heading={<Heading as="h6">{title}</Heading>}
-            Actions={
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-              fields.length > 0 ? (
-                <ButtonGroup size="medium" variant="secondary">
-                  <Button
-                    variant="secondary"
-                    onClick={() => setShowHints(!showHints)}
-                  >
-                    {showHints ? "Hide" : "Show"} code snippets
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    onClick={() => enterSelectMode()}
-                    data-cy={`add-${
-                      // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-                      isRepeatable ? "Repeatable" : "Static"
-                    }-field`}
-                    startIcon="add"
-                  >
-                    Add a new field
-                  </Button>
-                </ButtonGroup>
-              ) : null
-            }
-          />
-        </BaseStyles>
-      )}
+      <ListHeader
+        actions={
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          fields.length > 0 ? (
+            <>
+              <Text color="grey11" component="span">
+                Show code snippets?
+              </Text>
+              <Switch
+                checked={showHints}
+                onCheckedChange={setShowHints}
+                size="small"
+              />
+              <Button
+                data-cy={`add-${
+                  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+                  isRepeatable ? "Repeatable" : "Static"
+                }-field`}
+                onClick={enterSelectMode}
+                startIcon="add"
+                variant="secondary"
+              >
+                Add a new field
+              </Button>
+            </>
+          ) : undefined
+        }
+      >
+        {title}
+      </ListHeader>
       {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/strict-boolean-expressions
         fields.length === 0 && !newFieldData ? (
@@ -191,7 +156,6 @@ const Zone = ({
                   />
                 )
               }
-              sx={isCustomType ? { paddingInline: "16px !important" } : {}}
             />
           </BaseStyles>
         ) : undefined

diff --git a/packages/slice-machine/src/components/Card/Card.stories.tsx b/packages/slice-machine/src/components/Card/Card.stories.tsx
@@ -25,6 +25,7 @@ const meta = {
     disabled: { if: { arg: "interactive" } },
     href: { if: { arg: "interactive" } },
     onClick: { if: { arg: "interactive" } },
+    replace: { if: { arg: "interactive" } },
     size: { control: "select", options: ["small", "medium"] },
     variant: { control: "select", options: ["solid", "outlined"] },
   },

diff --git a/packages/slice-machine/src/components/Card/Card.tsx b/packages/slice-machine/src/components/Card/Card.tsx
@@ -23,8 +23,11 @@ type CardProps = PropsWithChildren<
     variant?: keyof typeof styles.variant;
   } & (
     | { interactive?: false }
-    | ({ interactive: true; href: string } & {
-        component?: "a" | FC<LinkProps>;
+    | ({ interactive: true; href: string; component?: "a" } & {
+        replace?: undefined;
+      })
+    | ({ interactive: true; href: string; component: FC<LinkProps> } & {
+        replace?: boolean;
       })
     | ({ interactive: true; href?: undefined } & {
         disabled?: boolean;
@@ -80,11 +83,13 @@ export const Card: FC<CardProps> = (props) => {
       variant: _variant,
       interactive: _interactive,
       component = "a",
+      replace,
       ...otherProps
     } = props;
     return createElement(component, {
       ...otherProps,
       ...elementProps,
+      ...(component === "a" ? {} : { replace }),
       onClick: (event) => {
         const target = event.target as HTMLElement;
         if (findFocusableAncestor(target) !== event.currentTarget) {

diff --git a/packages/slice-machine/src/features/slices/sliceCards/SharedSliceCard.tsx b/packages/slice-machine/src/features/slices/sliceCards/SharedSliceCard.tsx
@@ -32,7 +32,12 @@ type SharedSliceCardProps = {
   variant: "outlined" | "solid";
   variationId?: string;
 } & (
-  | { mode: "navigation"; action: Action; selected?: boolean }
+  | {
+      mode: "navigation";
+      action: Action;
+      replace?: boolean;
+      selected?: boolean;
+    }
   | {
       mode: "selection";
       action: Action | { type: "checkbox" };
@@ -85,6 +90,7 @@ export const SharedSliceCard: FC<SharedSliceCardProps> = (props) => {
             variationId: variation.id,
           }),
           interactive: true,
+          replace: props.replace,
         } as const)
       : ({ interactive: false } as const);
   const variantProps =