From 9f1e26ca4933154106ed287c2fa03f792888bb38 Mon Sep 17 00:00:00 2001 From: Baptiste Morelle Date: Thu, 19 Oct 2023 12:03:14 +0200 Subject: [PATCH] feat(slice-machine-ui): update Slice Builder layout --- .../SliceBuilder/FieldZones/index.tsx | 8 +- .../builders/SliceBuilder/Header/index.tsx | 3 - .../lib/builders/SliceBuilder/index.tsx | 45 ++------ .../lib/builders/common/Zone/Card/index.jsx | 4 +- .../Zone/components/ZoneHeader/index.tsx | 30 ------ .../lib/builders/common/Zone/index.jsx | 100 ++++++------------ .../src/components/Card/Card.stories.tsx | 1 + .../src/components/Card/Card.tsx | 9 +- .../slices/sliceCards/SharedSliceCard.tsx | 8 +- .../slice-machine/src/modules/slices/index.ts | 7 -- 10 files changed, 57 insertions(+), 158 deletions(-) delete mode 100644 packages/slice-machine/lib/builders/common/Zone/components/ZoneHeader/index.tsx 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.stories.tsx b/packages/slice-machine/src/components/Card/Card.stories.tsx index b18fbef05a..fc374c6b38 100644 --- 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 index d679e9ec7b..5edfcdbdf1 100644 --- 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; + | ({ interactive: true; href: string; component?: "a" } & { + replace?: undefined; + }) + | ({ interactive: true; href: string; component: FC } & { + replace?: boolean; }) | ({ interactive: true; href?: undefined } & { disabled?: boolean; @@ -80,11 +83,13 @@ export const Card: FC = (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 index 997b5050f2..3380bfaec1 100644 --- 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 = (props) => { variationId: variation.id, }), interactive: true, + replace: props.replace, } as const) : ({ interactive: false } as const); const variantProps = 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;