refactor(slice-machine-ui): merge cards into SharedSliceCard (#1184)

cypress/e2e/user-flows/scenario_slice_association.cy.js

@@ -87,7 +87,7 @@ describe.skip("I am an existing SM user (Next) and I want to associate a Slice t
     cy.visit(`/custom-types/${customTypeId}`);
 
     cy.get("[data-cy=update-slices]").click();
-    cy.get(`[data-cy=shared-slice-selection-card-${sliceId}]`).click();
+    cy.get(`[data-cy=shared-slice-card-${sliceId}]`).click();
     cy.get("[data-cy=update-slices-modal]").submit();
 
     customTypeBuilder.save();

cypress/pages/UpdateSliceZoneModal.js

@@ -4,7 +4,7 @@ class UpdateSliceZoneModal {
   }
 
   selectSlice(sliceId) {
-    cy.get(`[data-cy=shared-slice-selection-card-${sliceId}]`).click();
+    cy.get(`[data-cy=shared-slice-card-${sliceId}]`).click();
     return this;
   }
 

cypress/pages/customTypes/customTypeBuilder.js

@@ -31,7 +31,7 @@ class CustomTypeBuilder extends BaseBuilder {
   async addSliceToSliceZone(sliceId) {
     await cy.findAllByText(/Add slices/)[0].click();
     this.updateSliceZoneButton.click();
-    cy.get(`[data-cy=shared-slice-selection-card-${sliceId}]`).click();
+    cy.get(`[data-cy=shared-slice-card-${sliceId}]`).click();
     cy.get("[data-cy=update-slices-modal]").submit();
     return this;
   }

packages/slice-machine/components/ChangesItems/ChangesItems.tsx

@@ -14,7 +14,7 @@ import { countMissingScreenshots } from "@src/domain/slice";
 import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
 import { ModelStatus } from "@lib/models/common/ModelStatus";
 import { LocalOrRemoteCustomType } from "@lib/models/common/ModelData";
-import { SharedSliceViewCard } from "@src/features/slices/sliceCards/SharedSliceViewCard";
+import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
 
 interface ChangesItemsProps extends ModelStatusInformation {
   unSyncedCustomTypes: LocalOrRemoteCustomType[];
@@ -119,16 +119,18 @@ export const ChangesItems: React.FC<ChangesItemsProps> = ({
             renderElem={(slice) => {
               const modelStatus = modelsStatuses.slices[slice.model.id];
               return (
-                <SharedSliceViewCard
+                <SharedSliceCard
                   action={{ type: "status", authStatus, isOnline, modelStatus }}
-                  isDeletedSlice={modelStatus === ModelStatus.Deleted}
+                  isDeleted={modelStatus === ModelStatus.Deleted}
+                  mode="navigation"
                   onUpdateScreenshot={() => {
                     onOpenModal({
                       sliceFilterFn: (s) =>
                         s.filter((e) => e.model.id === slice.model.id),
                     });
                   }}
                   slice={slice}
+                  variant="solid"
                 />
               );
             }}

packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/List.tsx

@@ -10,8 +10,8 @@ import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { ToasterType } from "@src/modules/toaster";
 import { CustomTypeFormat } from "@slicemachine/manager";
 import { CUSTOM_TYPES_MESSAGES } from "@src/features/customTypes/customTypesMessages";
-import { NonSharedSliceViewCard } from "@src/features/slices/sliceCards/NonSharedSliceViewCard";
-import { SharedSliceViewCard } from "@src/features/slices/sliceCards/SharedSliceViewCard";
+import { NonSharedSliceCard } from "@src/features/slices/sliceCards/NonSharedSliceCard";
+import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
 import { useLab } from "@src/features/labs/labsList/useLab";
 
 interface SlicesListProps {
@@ -69,20 +69,20 @@ export const SlicesList: React.FC<SlicesListProps> = ({
       renderElem={(slice) => {
         if (slice.type !== "SharedSlice") {
           const nonSharedSlice = slice.payload as NonSharedSliceInSliceZone;
-          return <NonSharedSliceViewCard slice={nonSharedSlice} path={path} />;
+          return <NonSharedSliceCard slice={nonSharedSlice} path={path} />;
         } else {
           const sharedSlice = slice.payload as ComponentUI;
           return (
-            <SharedSliceViewCard
+            <SharedSliceCard
               action={{
                 type: "remove",
                 onRemove: () => {
                   onRemoveSharedSlice(sharedSlice.model.id);
                 },
               }}
-              isDeletedSlice={false}
-              onUpdateScreenshot={undefined}
+              mode="navigation"
               slice={sharedSlice}
+              variant="solid"
             />
           );
         }

packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx

@@ -3,7 +3,7 @@ import { FieldArray } from "formik";
 import Grid from "@components/Grid";
 import { SliceZoneFormValues } from "./UpdateSliceZoneModal";
 import { ComponentUI } from "@lib/models/common/ComponentUI";
-import { SharedSliceSelectionCard } from "@src/features/slices/sliceCards/SharedSliceSelectionCard";
+import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
 
 const UpdateSliceZoneModalList: React.FC<{
   availableSlices: ReadonlyArray<ComponentUI>;
@@ -23,8 +23,10 @@ const UpdateSliceZoneModalList: React.FC<{
             false;
           const isInSliceZone = values.sliceKeys.includes(slice.model.id);
           return (
-            <SharedSliceSelectionCard
+            <SharedSliceCard
+              action={{ type: "checkbox" }}
               isComingSoon={isComingSoon}
+              mode="selection"
               onSelectedChange={(selected) => {
                 if (selected) {
                   arrayHelpers.push(slice.model.id);
@@ -34,6 +36,7 @@ const UpdateSliceZoneModalList: React.FC<{
               }}
               selected={isInSliceZone}
               slice={slice}
+              variant="outlined"
             />
           );
         }}

packages/slice-machine/pages/slices.tsx

@@ -27,7 +27,7 @@ import { SliceMachineStoreType } from "@src/redux/type";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { getLibraries, getRemoteSlices } from "@src/modules/slices";
 import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
-import { SharedSliceViewCard } from "@src/features/slices/sliceCards/SharedSliceViewCard";
+import { SharedSliceCard } from "@src/features/slices/sliceCards/SharedSliceCard";
 import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
 import { SliceToastMessage } from "@components/ToasterContainer";
 
@@ -171,7 +171,7 @@ const SlicesIndex: React.FunctionComponent = () => {
                           elems={components}
                           defineElementKey={(slice) => slice.model.name}
                           renderElem={(slice) => (
-                            <SharedSliceViewCard
+                            <SharedSliceCard
                               action={{
                                 type: "menu",
                                 onRemove: () => {
@@ -183,7 +183,7 @@ const SlicesIndex: React.FunctionComponent = () => {
                                   openRenameSliceModal();
                                 },
                               }}
-                              isDeletedSlice={false}
+                              mode="navigation"
                               onUpdateScreenshot={() => {
                                 onOpenModal({
                                   sliceFilterFn: (s) =>
@@ -193,6 +193,7 @@ const SlicesIndex: React.FunctionComponent = () => {
                                 });
                               }}
                               slice={slice}
+                              variant="solid"
                             />
                           )}
                           gridGap="32px 16px"

packages/slice-machine/src/components/Card/Card.css.ts

@@ -25,8 +25,18 @@ export const size = styleVariants({
 });
 
 export const variant = styleVariants({
-  solid: [sprinkles({ backgroundColor: colors.grey3 })],
-  outlined: [sprinkles({ backgroundColor: colors.grey2 })],
+  solid: [
+    sprinkles({
+      backgroundColor: colors.grey3,
+      borderColor: selectors.checked(colors.purple10),
+    }),
+  ],
+  outlined: [
+    sprinkles({
+      backgroundColor: colors.grey2,
+      borderColor: selectors.checked(colors.purple8),
+    }),
+  ],
 });
 
 export const interactive = style({
@@ -40,10 +50,7 @@ export const interactive = style({
 export const interactiveVariant = {
   solid: sprinkles({
     backgroundColor: selectors.focusVisible(colors.grey5),
-    borderColor: {
-      ...selectors.checked(colors.purple10),
-      ...selectors.focusVisible(colors.purple10),
-    },
+    borderColor: selectors.focusVisible(colors.purple10),
   }),
   outlined: sprinkles({
     backgroundColor: {
@@ -53,7 +60,6 @@ export const interactiveVariant = {
     },
     borderColor: {
       ...selectors.active(colors.purple9),
-      ...selectors.checked(colors.purple8),
       ...selectors.focusVisible(colors.purple8),
     },
   }),

packages/slice-machine/src/components/Card/Card.stories.tsx

@@ -20,12 +20,12 @@ type Story = StoryObj<typeof meta>;
 const meta = {
   component: Card,
   argTypes: {
-    checked: { if: { arg: "interactive" } },
     children: { control: { disable: true } },
     component: { control: { disable: true }, if: { arg: "interactive" } },
     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"] },
   },
@@ -35,6 +35,7 @@ export default meta;
 
 export const Default = {
   args: {
+    checked: false,
     children: (
       <>
         <CardMedia overlay={<></>} />

packages/slice-machine/src/components/Card/Card.tsx

@@ -17,88 +17,101 @@ import * as styles from "./Card.css";
 
 type CardProps = PropsWithChildren<
   {
+    checked?: boolean;
     size?: keyof typeof styles.size;
     style?: CSSProperties;
     variant?: keyof typeof styles.variant;
   } & (
-    | { interactive?: false }
-    | ({ interactive: true; href: string } & {
-        component?: "a" | FC<LinkProps>;
-      })
-    | ({ interactive: true; href?: undefined } & {
-        checked?: boolean;
+    | // Props for rendering a non-interactive `div` element.
+    NarrowedCardProps<{ interactive?: false }>
+    // Props for rendering an interactive `div` element.
+    | NarrowedCardProps<{
+        interactive: true;
         disabled?: boolean;
         onClick?: (event: MouseEvent) => void;
-      })
+      }>
+    // Props for rendering an `a` element.
+    | NarrowedCardProps<{ interactive: true; href: string; component?: "a" }>
+    // Props for rendering any link `component`.
+    | NarrowedCardProps<{
+        interactive: true;
+        href: string;
+        component: FC<LinkProps>;
+        replace?: boolean;
+      }>
   )
 >;
 
+// This type is used to spread the `Card`'s `otherProps` before they can be
+// narrowed down.
+type NarrowedCardProps<T> = NarrowedProps<
+  T,
+  "component" | "disabled" | "href" | "interactive" | "onClick" | "replace"
+>;
+
+/**
+ * Construct a type with the properties of T and a set of optional properties K
+ * (excluding those already in type T).
+ */
+type NarrowedProps<T, K extends PropertyKey> = T &
+  Omit<Partial<Record<K, never>>, keyof T>;
+
 type LinkProps = {
   href: string | UrlObject;
   onClick?: (event: MouseEvent) => void;
 };
 
 export const Card: FC<CardProps> = (props) => {
-  const { size = "medium", variant = "solid" } = props;
+  const {
+    checked = false,
+    size = "medium",
+    variant = "solid",
+    interactive: _interactive,
+    disabled: _disabled,
+    onClick: _onClick,
+    href: _href,
+    component = "a",
+    replace: _replace,
+    ...otherProps
+  } = props;
   const elementProps = {
+    ...otherProps,
     className: clsx(styles.root, styles.size[size], styles.variant[variant], {
       [styles.interactive]: props.interactive,
       [styles.interactiveVariant[variant]]: props.interactive,
     }),
+    "data-state": checked === true ? "checked" : undefined,
   };
   if (props.interactive === true && props.href === undefined) {
-    const {
-      size: _size,
-      variant: _variant,
-      interactive: _interactive,
-      checked,
-      disabled,
-      onClick,
-      ...otherProps
-    } = props;
     return (
       <div
-        {...otherProps}
         {...elementProps}
         // TODO: add missing ARIA attributes and keyboard event handlers.
-        data-disabled={disabled === true ? "" : undefined}
-        data-state={checked === true ? "checked" : undefined}
+        data-disabled={props.disabled === true ? "" : undefined}
         onClick={(event) => {
-          if (disabled === true || onClick === undefined) return;
+          if (props.disabled === true || props.onClick === undefined) return;
           const target = event.target as HTMLElement;
           if (findFocusableAncestor(target) === event.currentTarget) {
-            onClick(event);
+            props.onClick(event);
           }
         }}
-        tabIndex={disabled === true ? undefined : 0}
+        tabIndex={props.disabled === true ? undefined : 0}
       />
     );
   } else if (props.interactive === true) {
-    const {
-      size: _size,
-      variant: _variant,
-      interactive: _interactive,
-      component = "a",
-      ...otherProps
-    } = props;
     return createElement(component, {
-      ...otherProps,
       ...elementProps,
+      href: props.href,
       onClick: (event) => {
         const target = event.target as HTMLElement;
         if (findFocusableAncestor(target) !== event.currentTarget) {
           event.preventDefault();
         }
       },
+      ...(component === "a" ? {} : { replace: props.replace }),
     });
   } else {
-    const {
-      size: _size,
-      variant: _variant,
-      interactive: _interactive,
-      ...otherProps
-    } = props;
-    return <div {...otherProps} {...elementProps} />;
+    return <div {...elementProps} />;
   }
 };
 

packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx

@@ -20,7 +20,7 @@ import useSliceMachineActions from "@src/modules/useSliceMachineActions";
 import { ToasterType } from "@src/modules/toaster";
 import { getFieldMappingFingerprint } from "@src/domain/slice";
 
-import { NonSharedSliceViewCardProps } from "../sliceCards/NonSharedSliceViewCard";
+import { NonSharedSliceCardProps } from "../sliceCards/NonSharedSliceCard";
 import { ConvertLegacySliceAsNewSliceDialog } from "./ConvertLegacySliceAsNewSliceDialog";
 import { ConvertLegacySliceAsNewVariationDialog } from "./ConvertLegacySliceAsNewVariationDialog";
 import { ConvertLegacySliceMergeWithIdenticalDialog } from "./ConvertLegacySliceMergeWithIdenticalDialog";
@@ -30,7 +30,7 @@ import {
   LegacySliceConversionType,
 } from "./types";
 
-type ConvertLegacySliceButtonProps = NonSharedSliceViewCardProps;
+type ConvertLegacySliceButtonProps = NonSharedSliceCardProps;
 
 export const ConvertLegacySliceButton: FC<ConvertLegacySliceButtonProps> = ({
   slice,

packages/slice-machine/src/features/slices/convertLegacySlice/types.ts

@@ -1,7 +1,7 @@
 import { LibraryUI } from "@models/common/LibraryUI";
 import { ComponentUI } from "@models/common/ComponentUI";
 
-import { NonSharedSliceViewCardProps } from "../sliceCards/NonSharedSliceViewCard";
+import { NonSharedSliceCardProps } from "../sliceCards/NonSharedSliceCard";
 
 export type ConvertLegacySliceAndTrackArgs = {
   libraryID: string;
@@ -34,4 +34,4 @@ export type DialogProps = {
   libraries: readonly LibraryUI[];
   localSharedSlices: ComponentUI[];
   identicalSlices: IdenticalSlice[];
-} & Pick<NonSharedSliceViewCardProps, "path" | "slice">;
+} & Pick<NonSharedSliceCardProps, "path" | "slice">;