diff --git a/cypress/e2e/slices/00-create.cy.js b/cypress/e2e/slices/00-create.cy.js index 2c4ae05ce0..f0752421ef 100644 --- a/cypress/e2e/slices/00-create.cy.js +++ b/cypress/e2e/slices/00-create.cy.js @@ -45,25 +45,18 @@ describe("Create Slices", () => { cy.get("#simulator-button-tooltip").should("be.visible"); cy.get("#simulator-button-tooltip").should( "contain", - "Save your work in order to simulate", - ); - cy.contains("button", "Update screenshot").should("have.attr", "disabled"); - cy.contains("button", "Update screenshot").realHover(); - cy.get("#update-screenshot-button-tooltip").should("be.visible"); - cy.get("#update-screenshot-button-tooltip").should( - "contain", - "Save your work in order to update the screenshot", + "Save your work in order to simulate" ); cy.location("pathname", { timeout: 20000 }).should( "eq", - `/slices/${lib}/${sliceName}/bar`, + `/slices/${lib}/${sliceName}/bar` ); cy.get("button").contains("foo").click(); cy.contains("Default").click(); cy.location("pathname", { timeout: 20000 }).should( "eq", - `/slices/${lib}/${sliceName}/default`, + `/slices/${lib}/${sliceName}/default` ); cy.contains("Save").click(); @@ -71,7 +64,7 @@ describe("Create Slices", () => { cy.contains("button", "Simulate").should("not.have.attr", "disabled"); cy.contains("button", "Update screenshot").should( "not.have.attr", - "disabled", + "disabled" ); // simulator diff --git a/packages/slice-machine/components/ScreenshotPreview/index.tsx b/packages/slice-machine/components/ScreenshotPreview/index.tsx index b4b2b79264..086cd7ff95 100644 --- a/packages/slice-machine/components/ScreenshotPreview/index.tsx +++ b/packages/slice-machine/components/ScreenshotPreview/index.tsx @@ -9,11 +9,9 @@ const MemoedImage = memo<{ src: string | undefined }>(({ src }) => ( interface ScreenshotPreviewProps { src?: string; sx: { height: string | number } & ThemeUIStyleObject; - hideMissingWarning?: boolean; } export const ScreenshotPreview: React.FC = ({ - hideMissingWarning = false, src, sx, }) => { @@ -32,23 +30,19 @@ export const ScreenshotPreview: React.FC = ({ ...sx, }} > - {hideMissingWarning ? null : ( - <> - {src !== undefined ? ( - - ) : ( - - - You have no screenshot yet. - - )} - + {src !== undefined ? ( + + ) : ( + + + You have no screenshot yet. + )} ); 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/SideBar/icons/prismic.svg b/packages/slice-machine/lib/builders/SliceBuilder/SideBar/icons/prismic.svg deleted file mode 100644 index 4522f56063..0000000000 --- a/packages/slice-machine/lib/builders/SliceBuilder/SideBar/icons/prismic.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - Group - - - - - - - - - \ No newline at end of file diff --git a/packages/slice-machine/lib/builders/SliceBuilder/SideBar/icons/sb-logo.png b/packages/slice-machine/lib/builders/SliceBuilder/SideBar/icons/sb-logo.png deleted file mode 100644 index 9201193134..0000000000 Binary files a/packages/slice-machine/lib/builders/SliceBuilder/SideBar/icons/sb-logo.png and /dev/null differ diff --git a/packages/slice-machine/lib/builders/SliceBuilder/SideBar/icons/storybook.svg b/packages/slice-machine/lib/builders/SliceBuilder/SideBar/icons/storybook.svg deleted file mode 100644 index a5121d4fbf..0000000000 --- a/packages/slice-machine/lib/builders/SliceBuilder/SideBar/icons/storybook.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/packages/slice-machine/lib/builders/SliceBuilder/SideBar/icons/storybookGrey.svg b/packages/slice-machine/lib/builders/SliceBuilder/SideBar/icons/storybookGrey.svg deleted file mode 100644 index 857f5b9422..0000000000 --- a/packages/slice-machine/lib/builders/SliceBuilder/SideBar/icons/storybookGrey.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/packages/slice-machine/lib/builders/SliceBuilder/SideBar/index.tsx b/packages/slice-machine/lib/builders/SliceBuilder/SideBar/index.tsx deleted file mode 100644 index 9a8c46d56c..0000000000 --- a/packages/slice-machine/lib/builders/SliceBuilder/SideBar/index.tsx +++ /dev/null @@ -1,97 +0,0 @@ -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} + /> + + ); +}; 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 diff --git a/packages/slice-machine/src/hooks/useScreenshotChangesModal.ts b/packages/slice-machine/src/hooks/useScreenshotChangesModal.ts index 8748fac8ed..45d9dbe103 100644 --- a/packages/slice-machine/src/hooks/useScreenshotChangesModal.ts +++ b/packages/slice-machine/src/hooks/useScreenshotChangesModal.ts @@ -11,7 +11,6 @@ type ModalPayload = { type Payload = { modalPayload: ModalPayload; onOpenModal: (p: ModalPayload) => void; - openScreenshotsModal: () => void; }; export const useScreenshotChangesModal = (): Payload => { @@ -29,6 +28,5 @@ export const useScreenshotChangesModal = (): Payload => { return { modalPayload, onOpenModal, - openScreenshotsModal, }; };