diff --git a/packages/slice-machine/lib/builders/SliceBuilder/Header/VariationsPopover/MenuList.tsx b/packages/slice-machine/components/Simulator/components/Header/VariationsPopover/MenuList.tsx similarity index 100% rename from packages/slice-machine/lib/builders/SliceBuilder/Header/VariationsPopover/MenuList.tsx rename to packages/slice-machine/components/Simulator/components/Header/VariationsPopover/MenuList.tsx diff --git a/packages/slice-machine/lib/builders/SliceBuilder/Header/VariationsPopover/index.tsx b/packages/slice-machine/components/Simulator/components/Header/VariationsPopover/index.tsx similarity index 100% rename from packages/slice-machine/lib/builders/SliceBuilder/Header/VariationsPopover/index.tsx rename to packages/slice-machine/components/Simulator/components/Header/VariationsPopover/index.tsx diff --git a/packages/slice-machine/components/Simulator/components/Header/index.tsx b/packages/slice-machine/components/Simulator/components/Header/index.tsx index 2f525d496f..f1c5cbe958 100644 --- a/packages/slice-machine/components/Simulator/components/Header/index.tsx +++ b/packages/slice-machine/components/Simulator/components/Header/index.tsx @@ -1,16 +1,15 @@ import router from "next/router"; import { Text, Flex, Switch, Label } from "theme-ui"; -import VarationsPopover from "@lib/builders/SliceBuilder/Header/VariationsPopover"; -import { ComponentUI } from "@lib/models/common/ComponentUI"; - import { Button } from "@components/Button"; +import VariationsPopover from "@components/Simulator/components/Header/VariationsPopover"; +import * as Links from "@components/Simulator/components/Header/links"; import SliceMachineLogo from "@src/icons/SliceMachineLogo"; import { useSelector } from "react-redux"; import { selectSavingMock } from "@src/modules/simulator"; -import * as Links from "@lib/builders/SliceBuilder/links"; import { SliceMachineStoreType } from "@src/redux/type"; +import { ComponentUI } from "@lib/models/common/ComponentUI"; import { VariationSM } from "@lib/models/common/Slice"; const redirect = ( @@ -80,7 +79,7 @@ const Header: React.FunctionComponent = ({ > {slice.model.name} - redirect(slice, v, true)} diff --git a/packages/slice-machine/lib/builders/SliceBuilder/links.ts b/packages/slice-machine/components/Simulator/components/Header/links.ts similarity index 100% rename from packages/slice-machine/lib/builders/SliceBuilder/links.ts rename to packages/slice-machine/components/Simulator/components/Header/links.ts diff --git a/packages/slice-machine/lib/builders/SliceBuilder/FieldZones/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/FieldZones/index.tsx index 98165959f7..1fb204e5bd 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 deleted file mode 100644 index 1203c6ff99..0000000000 --- a/packages/slice-machine/lib/builders/SliceBuilder/Header/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import React, { useState } from "react"; -import { Box, Flex, Text } from "theme-ui"; -import VariationModal from "./VariationModal"; -import { useRouter } from "next/router"; -import * as Links from "../links"; -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); - - const { copyVariationSlice } = useSliceMachineActions(); - - return ( - <> - - setShowVariationModal(true)} - onChange={(v) => - void router.push( - ...Links.variation({ - lib: component.href, - sliceName: component.model.name, - variationId: v.id, - }).all, - ) - } - /> - - Variation id : {variation.id} - - - - setShowVariationModal(false)} - onSubmit={(id, name, copiedVariation) => { - copyVariationSlice(id, name, copiedVariation); - void router.push( - ...Links.variation({ - lib: component.href, - sliceName: component.model.name, - variationId: id, - }).all, - ); - }} - initialVariation={variation} - variations={component.model.variations} - /> - - ); -}; -export default Header; diff --git a/packages/slice-machine/lib/builders/SliceBuilder/OldSideBar/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/OldSideBar/index.tsx new file mode 100644 index 0000000000..9a8c46d56c --- /dev/null +++ b/packages/slice-machine/lib/builders/SliceBuilder/OldSideBar/index.tsx @@ -0,0 +1,97 @@ +import React from "react"; + +import { Box, Flex } from "theme-ui"; + +import Card from "@components/Card"; +import { ReactTooltipPortal } from "@components/ReactTooltipPortal"; + +import { ScreenshotPreview } from "@components/ScreenshotPreview"; + +import { ComponentUI } from "@lib/models/common/ComponentUI"; +import ScreenshotChangesModal from "@components/ScreenshotChangesModal"; +import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal"; +import { Button } from "@components/Button"; +import { AiOutlineCamera } from "react-icons/ai"; +import { VariationSM } from "@lib/models/common/Slice"; +import ReactTooltip from "react-tooltip"; + +type SideBarProps = { + component: ComponentUI; + variation: VariationSM; + isTouched: boolean; +}; + +const NeedToSaveTooltip: React.FC = () => ( + + + Save your work in order to update the screenshot + + +); + +const SideBar: React.FunctionComponent = ({ + component, + variation, + isTouched, +}) => { + const { screenshots } = component; + const { openScreenshotsModal } = useScreenshotChangesModal(); + + return ( + + ( + <> + + + + { + setShowVariationModal(false); + }} + onSubmit={(id, name, copiedVariation) => { + copyVariationSlice(id, name, copiedVariation); + const url = SLICES_CONFIG.getBuilderPagePathname({ + libraryName: slice.href, + sliceName: slice.model.name, + variationId: variation.id, + }); + void router.replace(url); }} + variations={slice.model.variations} /> - + ); }; - -export default SideBar; diff --git a/packages/slice-machine/lib/builders/SliceBuilder/Header/SimulatorButton/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/SimulatorButton/index.tsx similarity index 100% rename from packages/slice-machine/lib/builders/SliceBuilder/Header/SimulatorButton/index.tsx rename to packages/slice-machine/lib/builders/SliceBuilder/SimulatorButton/index.tsx diff --git a/packages/slice-machine/lib/builders/SliceBuilder/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/index.tsx index 4fa5466809..075061dfaf 100644 --- a/packages/slice-machine/lib/builders/SliceBuilder/index.tsx +++ b/packages/slice-machine/lib/builders/SliceBuilder/index.tsx @@ -1,18 +1,16 @@ -import { Button } from "@prismicio/editor-ui"; +import { Box, Button } from "@prismicio/editor-ui"; import React, { useState, useEffect } from "react"; import { handleRemoteResponse } from "@src/modules/toaster/utils"; -import { BaseStyles, Box, Grid } from "theme-ui"; - import FieldZones from "./FieldZones"; -import SideBar from "./SideBar"; -import Header from "./Header"; +import { Sidebar } from "./Sidebar"; import useSliceMachineActions from "src/modules/useSliceMachineActions"; import { useSelector } from "react-redux"; import { SliceMachineStoreType } from "@src/redux/type"; +import SimulatorButton from "@builders/SliceBuilder/SimulatorButton"; import { AppLayout, AppLayoutActions, @@ -21,44 +19,28 @@ import { AppLayoutContent, 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 +70,6 @@ const SliceBuilder: ComponentWithSliceProps = ({ slice, variation }) => { updateSlice={updateSlice.bind(null, slice, setData)} slice={slice} variation={variation} - remoteSlice={remoteSlice} isTouched={isTouched} data={data} /> @@ -99,7 +80,6 @@ type SliceBuilderForVariationProps = { updateSlice: () => void; slice: ComponentUI; variation: VariationSM; - remoteSlice: SliceSM | undefined; isTouched: boolean; data: SliceBuilderState; }; @@ -107,24 +87,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 ( @@ -146,24 +115,15 @@ 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 441c8706f7..92251aac91 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