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/lib/builders/SliceBuilder/FieldZones/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/FieldZones/index.tsx index 0e95635c9f..cfa4b6810a 100644 --- 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 = ({ }; return ( - <> + = ({ dataCy="slice-non-repeatable-zone" isRepeatableCustomType={undefined} /> - = ({ dataCy="slice-repeatable-zone" isRepeatableCustomType={undefined} /> - + ); }; diff --git a/packages/slice-machine/lib/builders/SliceBuilder/Header/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/Header/index.tsx index f7e4ef64cb..cdd7096838 100644 --- 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 index 13afdc83b9..ff95c3ccef 100644 --- 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,7 +83,6 @@ type SliceBuilderForVariationProps = { updateSlice: () => void; slice: ComponentUI; variation: VariationSM; - remoteSlice: SliceSM | undefined; isTouched: boolean; data: SliceBuilderState; }; @@ -107,24 +90,13 @@ const SliceBuilderForVariation: React.FC = ({ 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 ( @@ -147,12 +119,7 @@ const SliceBuilderForVariation: React.FC = ({ -
+
diff --git a/packages/slice-machine/lib/builders/common/Zone/Card/index.jsx b/packages/slice-machine/lib/builders/common/Zone/Card/index.jsx index 4a47905377..5a7dc1ed59 100644 --- 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 ( { // 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 deleted file mode 100644 index 408d642c63..0000000000 --- a/packages/slice-machine/lib/builders/common/Zone/components/ZoneHeader/index.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Flex } from "theme-ui"; - -interface ZoneHeaderProps { - Heading: JSX.Element; - Actions: JSX.Element; -} - -const ZoneHeader: React.FunctionComponent = ({ - Heading, - Actions, -}) => ( - - {Heading} - {Actions} - -); - -export default ZoneHeader; diff --git a/packages/slice-machine/lib/builders/common/Zone/index.jsx b/packages/slice-machine/lib/builders/common/Zone/index.jsx index 8fe877717a..441e4c4183 100644 --- a/packages/slice-machine/lib/builders/common/Zone/index.jsx +++ b/packages/slice-machine/lib/builders/common/Zone/index.jsx @@ -1,7 +1,7 @@ -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"; @@ -9,7 +9,6 @@ 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 ? ( - 0 ? ( - <> - - Show code snippets? - - - - - ) : undefined - } - > - {title} - - ) : ( - - {title}} - Actions={ - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access - fields.length > 0 ? ( - - - - - ) : null - } - /> - - )} + 0 ? ( + <> + + Show code snippets? + + + + + ) : undefined + } + > + {title} + { // 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" } : {}} /> ) : undefined 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/sliceCards/SharedSliceSelectionCard.tsx b/packages/slice-machine/src/features/slices/sliceCards/SharedSliceSelectionCard.tsx index f43f1e8f14..a5071af1e4 100644 --- a/packages/slice-machine/src/features/slices/sliceCards/SharedSliceSelectionCard.tsx +++ b/packages/slice-machine/src/features/slices/sliceCards/SharedSliceSelectionCard.tsx @@ -24,8 +24,8 @@ export const SharedSliceSelectionCard: FC = ({ return ( { diff --git a/packages/slice-machine/src/modules/slices/index.ts b/packages/slice-machine/src/modules/slices/index.ts index bc74e10535..6011dd832a 100644 --- a/packages/slice-machine/src/modules/slices/index.ts +++ b/packages/slice-machine/src/modules/slices/index.ts @@ -88,13 +88,6 @@ export const getLibraries = ( store: SliceMachineStoreType ): ReadonlyArray => store.slices.libraries; -export const getRemoteSlice = ( - store: SliceMachineStoreType, - componentId: string -): SliceSM | undefined => { - return store.slices.remoteSlices.find((rs) => rs.id === componentId); -}; - export const getRemoteSlices = ( store: SliceMachineStoreType ): ReadonlyArray => store.slices.remoteSlices; 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