From cf44e7981a94d66eaab14ba7dcd5780c6cf0459e Mon Sep 17 00:00:00 2001 From: Baptiste Morelle Date: Fri, 20 Oct 2023 14:56:44 +0200 Subject: [PATCH] refactor(slice-machine-ui): merge SharedSliceSelectionCard and SharedSliceViewCard --- .../scenario_slice_association.cy.js | 2 +- cypress/pages/UpdateSliceZoneModal.js | 2 +- .../pages/customTypes/customTypeBuilder.js | 2 +- .../components/ChangesItems/ChangesItems.tsx | 8 +- .../CustomTypeBuilder/SliceZone/List.tsx | 12 +- .../SliceZone/UpdateSliceZoneModalList.tsx | 7 +- packages/slice-machine/pages/slices.tsx | 7 +- .../src/components/Card/Card.css.ts | 20 +- .../src/components/Card/Card.stories.tsx | 2 +- .../src/components/Card/Card.tsx | 10 +- .../ConvertLegacySliceButton.tsx | 4 +- .../slices/convertLegacySlice/types.ts | 4 +- ...iceViewCard.tsx => NonSharedSliceCard.tsx} | 4 +- .../slices/sliceCards/SharedSliceCard.tsx | 227 ++++++++++++++++++ .../sliceCards/SharedSliceSelectionCard.tsx | 75 ------ .../slices/sliceCards/SharedSliceViewCard.tsx | 145 ----------- .../test/pages/custom-types.test.tsx | 2 +- 17 files changed, 277 insertions(+), 256 deletions(-) rename packages/slice-machine/src/features/slices/sliceCards/{NonSharedSliceViewCard.tsx => NonSharedSliceCard.tsx} (93%) create mode 100644 packages/slice-machine/src/features/slices/sliceCards/SharedSliceCard.tsx delete mode 100644 packages/slice-machine/src/features/slices/sliceCards/SharedSliceSelectionCard.tsx delete mode 100644 packages/slice-machine/src/features/slices/sliceCards/SharedSliceViewCard.tsx diff --git a/cypress/e2e/user-flows/scenario_slice_association.cy.js b/cypress/e2e/user-flows/scenario_slice_association.cy.js index e4bdb84ece..f017217d86 100644 --- a/cypress/e2e/user-flows/scenario_slice_association.cy.js +++ b/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(); diff --git a/cypress/pages/UpdateSliceZoneModal.js b/cypress/pages/UpdateSliceZoneModal.js index 3d158096bd..1020b02e8a 100644 --- a/cypress/pages/UpdateSliceZoneModal.js +++ b/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; } diff --git a/cypress/pages/customTypes/customTypeBuilder.js b/cypress/pages/customTypes/customTypeBuilder.js index 658d5738f7..7b1e87a1cf 100644 --- a/cypress/pages/customTypes/customTypeBuilder.js +++ b/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; } diff --git a/packages/slice-machine/components/ChangesItems/ChangesItems.tsx b/packages/slice-machine/components/ChangesItems/ChangesItems.tsx index 7d63fed7ba..1cb99742b4 100644 --- a/packages/slice-machine/components/ChangesItems/ChangesItems.tsx +++ b/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,9 +119,10 @@ export const ChangesItems: React.FC = ({ renderElem={(slice) => { const modelStatus = modelsStatuses.slices[slice.model.id]; return ( - { onOpenModal({ sliceFilterFn: (s) => @@ -129,6 +130,7 @@ export const ChangesItems: React.FC = ({ }); }} slice={slice} + variant="solid" /> ); }} diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/List.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/List.tsx index 50604f0564..e740a61322 100644 --- a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/List.tsx +++ b/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 = ({ renderElem={(slice) => { if (slice.type !== "SharedSlice") { const nonSharedSlice = slice.payload as NonSharedSliceInSliceZone; - return ; + return ; } else { const sharedSlice = slice.payload as ComponentUI; return ( - { onRemoveSharedSlice(sharedSlice.model.id); }, }} - isDeletedSlice={false} - onUpdateScreenshot={undefined} + mode="navigation" slice={sharedSlice} + variant="solid" /> ); } diff --git a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx b/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx index 77926b4e24..611c0adc70 100644 --- a/packages/slice-machine/lib/builders/CustomTypeBuilder/SliceZone/UpdateSliceZoneModalList.tsx +++ b/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; @@ -23,8 +23,10 @@ const UpdateSliceZoneModalList: React.FC<{ false; const isInSliceZone = values.sliceKeys.includes(slice.model.id); return ( - { if (selected) { arrayHelpers.push(slice.model.id); @@ -34,6 +36,7 @@ const UpdateSliceZoneModalList: React.FC<{ }} selected={isInSliceZone} slice={slice} + variant="outlined" /> ); }} diff --git a/packages/slice-machine/pages/slices.tsx b/packages/slice-machine/pages/slices.tsx index 0692a09a95..b6b1b2950c 100644 --- a/packages/slice-machine/pages/slices.tsx +++ b/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) => ( - { @@ -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" diff --git a/packages/slice-machine/src/components/Card/Card.css.ts b/packages/slice-machine/src/components/Card/Card.css.ts index c4570ab72b..d97e9b46df 100644 --- a/packages/slice-machine/src/components/Card/Card.css.ts +++ b/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), }, }), diff --git a/packages/slice-machine/src/components/Card/Card.stories.tsx b/packages/slice-machine/src/components/Card/Card.stories.tsx index 1ddcac8b4f..b18fbef05a 100644 --- a/packages/slice-machine/src/components/Card/Card.stories.tsx +++ b/packages/slice-machine/src/components/Card/Card.stories.tsx @@ -20,7 +20,6 @@ type Story = StoryObj; const meta = { component: Card, argTypes: { - checked: { if: { arg: "interactive" } }, children: { control: { disable: true } }, component: { control: { disable: true }, if: { arg: "interactive" } }, disabled: { if: { arg: "interactive" } }, @@ -35,6 +34,7 @@ export default meta; export const Default = { args: { + checked: false, children: ( <> } /> diff --git a/packages/slice-machine/src/components/Card/Card.tsx b/packages/slice-machine/src/components/Card/Card.tsx index bdb7e1bec9..d679e9ec7b 100644 --- a/packages/slice-machine/src/components/Card/Card.tsx +++ b/packages/slice-machine/src/components/Card/Card.tsx @@ -17,6 +17,7 @@ import * as styles from "./Card.css"; type CardProps = PropsWithChildren< { + checked?: boolean; size?: keyof typeof styles.size; style?: CSSProperties; variant?: keyof typeof styles.variant; @@ -26,7 +27,6 @@ type CardProps = PropsWithChildren< component?: "a" | FC; }) | ({ interactive: true; href?: undefined } & { - checked?: boolean; disabled?: boolean; onClick?: (event: MouseEvent) => void; }) @@ -39,19 +39,20 @@ type LinkProps = { }; export const Card: FC = (props) => { - const { size = "medium", variant = "solid" } = props; + const { checked = false, size = "medium", variant = "solid" } = props; const elementProps = { 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 { + checked: _checked, size: _size, variant: _variant, interactive: _interactive, - checked, disabled, onClick, ...otherProps @@ -62,7 +63,6 @@ export const Card: FC = (props) => { {...elementProps} // TODO: add missing ARIA attributes and keyboard event handlers. data-disabled={disabled === true ? "" : undefined} - data-state={checked === true ? "checked" : undefined} onClick={(event) => { if (disabled === true || onClick === undefined) return; const target = event.target as HTMLElement; @@ -75,6 +75,7 @@ export const Card: FC = (props) => { ); } else if (props.interactive === true) { const { + checked: _checked, size: _size, variant: _variant, interactive: _interactive, @@ -93,6 +94,7 @@ export const Card: FC = (props) => { }); } else { const { + checked: _checked, size: _size, variant: _variant, interactive: _interactive, diff --git a/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx b/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx index 7ce788bbc9..96931ad908 100644 --- a/packages/slice-machine/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.tsx +++ b/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 = ({ slice, diff --git a/packages/slice-machine/src/features/slices/convertLegacySlice/types.ts b/packages/slice-machine/src/features/slices/convertLegacySlice/types.ts index 55884c0e28..536fe2d357 100644 --- a/packages/slice-machine/src/features/slices/convertLegacySlice/types.ts +++ b/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; +} & Pick; diff --git a/packages/slice-machine/src/features/slices/sliceCards/NonSharedSliceViewCard.tsx b/packages/slice-machine/src/features/slices/sliceCards/NonSharedSliceCard.tsx similarity index 93% rename from packages/slice-machine/src/features/slices/sliceCards/NonSharedSliceViewCard.tsx rename to packages/slice-machine/src/features/slices/sliceCards/NonSharedSliceCard.tsx index ca05533788..bf12118400 100644 --- a/packages/slice-machine/src/features/slices/sliceCards/NonSharedSliceViewCard.tsx +++ b/packages/slice-machine/src/features/slices/sliceCards/NonSharedSliceCard.tsx @@ -8,7 +8,7 @@ import { useLab } from "@src/features/labs/labsList/useLab"; import { ConvertLegacySliceButton } from "../convertLegacySlice/ConvertLegacySliceButton"; -export type NonSharedSliceViewCardProps = { +export type NonSharedSliceCardProps = { slice: NonSharedSliceInSliceZone; path: { customTypeID: string; @@ -17,7 +17,7 @@ export type NonSharedSliceViewCardProps = { }; }; -export const NonSharedSliceViewCard: FC = ({ +export const NonSharedSliceCard: FC = ({ slice, path, }) => { diff --git a/packages/slice-machine/src/features/slices/sliceCards/SharedSliceCard.tsx b/packages/slice-machine/src/features/slices/sliceCards/SharedSliceCard.tsx new file mode 100644 index 0000000000..997b5050f2 --- /dev/null +++ b/packages/slice-machine/src/features/slices/sliceCards/SharedSliceCard.tsx @@ -0,0 +1,227 @@ +import { + Box, + Button, + Checkbox, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, + Icon, + IconButton, + Text, + tokens, +} from "@prismicio/editor-ui"; +import Link from "next/link"; +import type { FC } from "react"; + +import { ComponentUI } from "@lib/models/common/ComponentUI"; +import { Card, CardFooter, CardMedia, CardStatus } from "@src/components/Card"; +import { countMissingScreenshots, getScreenshotUrl } from "@src/domain/slice"; +import { + StatusBadge, + type StatusBadgeProps, +} from "@src/features/changes/StatusBadge"; +import { SLICES_CONFIG } from "@src/features/slices/slicesConfig"; +import { AddPhotoAlternateIcon } from "@src/icons/AddPhotoAlternateIcon"; + +type SharedSliceCardProps = { + isComingSoon?: boolean; + isDeleted?: boolean; + onUpdateScreenshot?: () => void; + slice: ComponentUI; + variant: "outlined" | "solid"; + variationId?: string; +} & ( + | { mode: "navigation"; action: Action; selected?: boolean } + | { + mode: "selection"; + action: Action | { type: "checkbox" }; + onSelectedChange: (selected: boolean) => void; + selected: boolean; + } +); + +type Action = + | { type: "menu"; onRemove?: () => void; onRename?: () => void } + | { type: "remove"; onRemove: () => void } + | ({ type: "status" } & Omit); + +export const SharedSliceCard: FC = (props) => { + const { + action, + isComingSoon = false, + isDeleted = false, + onUpdateScreenshot, + selected = false, + slice, + variant, + variationId, + } = props; + + const variation = ComponentUI.variation(slice, variationId); + if (!variation) return null; + const src = getScreenshotUrl(slice, variation); + + const disabled = isComingSoon || isDeleted; + const canUpdateScreenshot = !disabled && !!onUpdateScreenshot; + const disableOverlay = variant === "outlined"; + const hasVariationId = variationId !== undefined; + + const modeProps = + props.mode === "selection" + ? ({ + disabled, + interactive: true, + onClick: () => { + props.onSelectedChange(!selected); + }, + } as const) + : !disabled + ? ({ + component: Link, + href: SLICES_CONFIG.getBuilderPagePathname({ + libraryName: slice.href, + sliceName: slice.model.name, + variationId: variation.id, + }), + interactive: true, + } as const) + : ({ interactive: false } as const); + const variantProps = + variant === "outlined" + ? ({ size: "small", variant: "outlined" } as const) + : {}; + + return ( + + {src !== undefined ? ( + + + + ) : undefined + } + src={src} + /> + ) : ( + + + + No screenshot available + + {canUpdateScreenshot && !disableOverlay ? ( + + ) : undefined} + + + )} + event.stopPropagation()}> + + + ) : action.type === "menu" ? ( + + + + + + {action.onRename ? ( + } + > + Rename + + ) : undefined} + {canUpdateScreenshot && disableOverlay ? ( + } + > + Update screenshot + + ) : undefined} + {action.onRemove ? ( + } + > + Delete + + ) : undefined} + + + ) : action.type === "remove" ? ( + !disabled && action.onRemove()} + /> + ) : action.type === "status" ? ( + + ) : undefined + } + subtitle={ + <> + {hasVariationId + ? slice.model.name + : `${slice.model.variations.length} variation${ + slice.model.variations.length > 1 ? "s" : "" + }`} + {isComingSoon ? ( + + {" "} + • (coming soon) + + ) : undefined} + + } + title={hasVariationId ? variation.name : slice.model.name} + /> + {canUpdateScreenshot && + !hasVariationId && + countMissingScreenshots(slice) > 0 ? ( + Missing screenshot + ) : undefined} + + ); +}; + +type UpdateScreenshotButtonProps = { onClick: () => void }; + +const UpdateScreenshotButton: FC = (props) => ( + +); diff --git a/packages/slice-machine/src/features/slices/sliceCards/SharedSliceSelectionCard.tsx b/packages/slice-machine/src/features/slices/sliceCards/SharedSliceSelectionCard.tsx deleted file mode 100644 index f43f1e8f14..0000000000 --- a/packages/slice-machine/src/features/slices/sliceCards/SharedSliceSelectionCard.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { Box, Checkbox, Text } from "@prismicio/editor-ui"; -import type { FC } from "react"; - -import { ComponentUI } from "@lib/models/common/ComponentUI"; -import { Card, CardFooter, CardMedia } from "@src/components/Card"; -import { getScreenshotUrl } from "@src/domain/slice"; - -type SharedSliceSelectionCardProps = { - isComingSoon: boolean; - onSelectedChange: (selected: boolean) => void; - selected: boolean; - slice: ComponentUI; -}; - -export const SharedSliceSelectionCard: FC = ({ - isComingSoon, - onSelectedChange, - selected, - slice, -}) => { - const defaultVariation = ComponentUI.variation(slice); - if (!defaultVariation) return null; - const src = getScreenshotUrl(slice, defaultVariation); - return ( - { - onSelectedChange(!selected); - }} - size="small" - variant="outlined" - > - {src !== undefined ? ( - - ) : ( - - - - No screenshot available - - - - )} - event.stopPropagation()}> - - - } - subtitle={ - <> - {slice.model.variations.length} variation - {slice.model.variations.length > 1 ? "s" : ""} - {isComingSoon ? ( - - {" "} - • (coming soon) - - ) : undefined} - - } - title={slice.model.name} - /> - - ); -}; diff --git a/packages/slice-machine/src/features/slices/sliceCards/SharedSliceViewCard.tsx b/packages/slice-machine/src/features/slices/sliceCards/SharedSliceViewCard.tsx deleted file mode 100644 index dd1fd59b0c..0000000000 --- a/packages/slice-machine/src/features/slices/sliceCards/SharedSliceViewCard.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import { - Box, - Button, - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, - Icon, - IconButton, - Text, - tokens, -} from "@prismicio/editor-ui"; -import Link from "next/link"; -import type { FC } from "react"; - -import { ComponentUI } from "@lib/models/common/ComponentUI"; -import { Card, CardFooter, CardMedia, CardStatus } from "@src/components/Card"; -import { countMissingScreenshots, getScreenshotUrl } from "@src/domain/slice"; -import { - StatusBadge, - type StatusBadgeProps, -} from "@src/features/changes/StatusBadge"; -import { SLICES_CONFIG } from "@src/features/slices/slicesConfig"; -import { AddPhotoAlternateIcon } from "@src/icons/AddPhotoAlternateIcon"; - -type SharedSliceViewCardProps = { - action: - | { type: "menu"; onRemove: () => void; onRename: () => void } - | { type: "remove"; onRemove: () => void } - | ({ type: "status" } & Omit); - isDeletedSlice: boolean; - onUpdateScreenshot: (() => void) | undefined; - slice: ComponentUI; -}; - -export const SharedSliceViewCard: FC = ({ - action, - isDeletedSlice, - onUpdateScreenshot, - slice, -}) => { - const defaultVariation = ComponentUI.variation(slice); - if (!defaultVariation) return null; - const href = SLICES_CONFIG.getBuilderPagePathname({ - libraryName: slice.href, - sliceName: slice.model.name, - variationId: defaultVariation.id, - }); - const src = getScreenshotUrl(slice, defaultVariation); - const canUpdateScreenshot = !!onUpdateScreenshot && !isDeletedSlice; - return ( - - {src !== undefined ? ( - - - - ) : undefined - } - src={src} - /> - ) : ( - - - - No screenshot available - - {canUpdateScreenshot ? ( - - ) : undefined} - - - )} - - - - - - } - > - Rename - - } - > - Delete - - - - ) : action.type === "remove" ? ( - - ) : ( - - ) - } - subtitle={`${slice.model.variations.length} variation${ - slice.model.variations.length > 1 ? "s" : "" - }`} - title={slice.model.name} - /> - {canUpdateScreenshot && countMissingScreenshots(slice) > 0 ? ( - Missing screenshot - ) : undefined} - - ); -}; - -type UpdateScreenshotButtonProps = { - onClick: () => void; -}; - -const UpdateScreenshotButton: FC = (props) => ( - -); diff --git a/packages/slice-machine/test/pages/custom-types.test.tsx b/packages/slice-machine/test/pages/custom-types.test.tsx index 3736966961..7f81bb1304 100644 --- a/packages/slice-machine/test/pages/custom-types.test.tsx +++ b/packages/slice-machine/test/pages/custom-types.test.tsx @@ -302,7 +302,7 @@ describe("Custom Type Builder", () => { const user = userEvent.setup(); await user.click(screen.getByText("Select existing")); - const slicesToSelect = screen.getAllByTestId("shared-slice-selection-card"); + const slicesToSelect = screen.getAllByTestId("shared-slice-card"); for (const elem of slicesToSelect) { // eslint-disable-next-line @typescript-eslint/await-thenable