slice-machine-ui 1.15.1-dev-next-release.1 → 1.15.1-dev-next-release.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slice-machine-ui",
-  "version": "1.15.1-dev-next-release.1",
+  "version": "1.15.1-dev-next-release.3",
   "license": "MIT",
   "description": "A visual builder for your Slice Models with all the tools you need to generate data models and mock CMS content locally.",
   "repository": {
@@ -31,8 +31,8 @@
     "start-slicemachine": "./bin/start-slicemachine.cjs"
   },
   "dependencies": {
-    "@slicemachine/manager": "^0.12.1-dev-next-release.1",
-    "start-slicemachine": "^0.11.9-dev-next-release.1"
+    "@slicemachine/manager": "^0.12.1-dev-next-release.3",
+    "start-slicemachine": "^0.11.9-dev-next-release.3"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",
@@ -130,5 +130,5 @@
     "vitest": "0.32.0",
     "yup": "0.32.11"
   },
-  "gitHead": "9856dd64305cfd180cccf0be4648f996c5aef267"
+  "gitHead": "a1e4151a6086f7b177bcd25e6aa674fcb0af5c7c"
 }

package/pages/_app.tsx

@@ -14,19 +14,27 @@ import "@src/styles/starry-night.css";
 import "@src/styles/tabs.css";
 import "@src/styles/toaster.css";
 
-import { ThemeProvider, TooltipProvider } from "@prismicio/editor-ui";
+import {
+  Box,
+  DefaultErrorMessage,
+  ErrorBoundary,
+  ThemeProvider,
+  TooltipProvider,
+} from "@prismicio/editor-ui";
 import { ConnectedRouter } from "connected-next-router";
 import type { NextPage } from "next";
 import App, { type AppContext, type AppInitialProps } from "next/app";
 import Head from "next/head";
 import Router from "next/router";
-import { type FC, type ReactNode, useEffect, useState } from "react";
+import { type FC, type ReactNode, useEffect, useState, Suspense } from "react";
 import { Provider } from "react-redux";
 import type { Store } from "redux";
 import type { Persistor } from "redux-persist/es/types";
 import { PersistGate } from "redux-persist/integration/react";
 import { ThemeProvider as ThemeUIThemeProvider, useThemeUI } from "theme-ui";
 
+import { AppLayout, AppLayoutContent } from "@components/AppLayout";
+
 import SliceMachineApp from "../components/App";
 import LoadingPage from "../components/LoadingPage";
 import ToastContainer from "../components/ToasterContainer";
@@ -122,9 +130,33 @@ function MyApp({
                   <ConnectedRouter Router={Router}>
                     <PersistGate loading={null} persistor={smStore.persistor}>
                       <RouteChangeProvider>
-                        <ComponentLayout>
-                          <Component {...pageProps} />
-                        </ComponentLayout>
+                        <ErrorBoundary
+                          renderError={(error) => {
+                            console.error(error);
+
+                            return (
+                              <AppLayout>
+                                <AppLayoutContent>
+                                  <Box
+                                    alignItems="center"
+                                    justifyContent="center"
+                                  >
+                                    <DefaultErrorMessage
+                                      title="Error"
+                                      description="An error occurred while rendering the app."
+                                    />
+                                  </Box>
+                                </AppLayoutContent>
+                              </AppLayout>
+                            );
+                          }}
+                        >
+                          <Suspense fallback={<LoadingPage />}>
+                            <ComponentLayout>
+                              <Component {...pageProps} />
+                            </ComponentLayout>
+                          </Suspense>
+                        </ErrorBoundary>
                       </RouteChangeProvider>
                     </PersistGate>
                   </ConnectedRouter>

package/pages/index.tsx

@@ -1,8 +1,16 @@
 import { type FC } from "react";
 
 import { CustomTypesTablePage as CustomTypesTablePageTemplate } from "@src/features/customTypes/customTypesTable/CustomTypesTablePage";
+import { PageTypeOnboarding } from "@src/features/customTypes/PageTypeOnboarding";
+import { useIsEmptyProject } from "@src/hooks/useIsEmptyProject";
 
 const PageTypesTablePage: FC = () => {
+  const isEmptyProject = useIsEmptyProject();
+
+  if (isEmptyProject) {
+    return <PageTypeOnboarding />;
+  }
+
   return <CustomTypesTablePageTemplate format="page" />;
 };
 

package/pages/slices.tsx

@@ -9,7 +9,6 @@ import { SharedSlice as SharedSliceType } from "@prismicio/types-internal/lib/cu
 
 import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { LibraryUI } from "@lib/models/common/LibraryUI";
-import { SharedSlice } from "@lib/models/ui/Slice";
 import { VIDEO_WHAT_ARE_SLICES } from "@lib/consts";
 import {
   AppLayout,
@@ -26,13 +25,9 @@ import { RenameSliceModal } from "@components/Forms/RenameSliceModal";
 import { DeleteSliceModal } from "@components/DeleteSliceModal";
 import { SliceMachineStoreType } from "@src/redux/type";
 import useSliceMachineActions from "@src/modules/useSliceMachineActions";
-import {
-  getFrontendSlices,
-  getLibraries,
-  getRemoteSlices,
-} from "@src/modules/slices";
-import { useModelStatus } from "@src/hooks/useModelStatus";
+import { getLibraries, getRemoteSlices } from "@src/modules/slices";
 import { useScreenshotChangesModal } from "@src/hooks/useScreenshotChangesModal";
+import { SharedSliceViewCard } from "@src/features/slices/sliceCards/SharedSliceViewCard";
 import { SLICES_CONFIG } from "@src/features/slices/slicesConfig";
 import { SliceToastMessage } from "@components/ToasterContainer";
 
@@ -45,11 +40,10 @@ const SlicesIndex: React.FunctionComponent = () => {
 
   const { sliceFilterFn, defaultVariationSelector } = modalPayload;
 
-  const { remoteSlices, libraries, frontendSlices } = useSelector(
+  const { remoteSlices, libraries } = useSelector(
     (store: SliceMachineStoreType) => ({
       remoteSlices: getRemoteSlices(store),
       libraries: getLibraries(store),
-      frontendSlices: getFrontendSlices(store),
     })
   );
   const [isCreateSliceModalOpen, setIsCreateSliceModalOpen] = useState(false);
@@ -65,10 +59,6 @@ const SlicesIndex: React.FunctionComponent = () => {
     return library;
   });
 
-  const { modelsStatuses, authStatus, isOnline } = useModelStatus({
-    slices: frontendSlices,
-  });
-
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
   const slices = (libraries || []).map((l) => l.components).flat();
   const sliceCount = slices.length;
@@ -179,39 +169,32 @@ const SlicesIndex: React.FunctionComponent = () => {
                         </Flex>
                         <Grid
                           elems={components}
-                          defineElementKey={(slice: ComponentUI) =>
-                            slice.model.name
-                          }
-                          renderElem={(slice: ComponentUI) => {
-                            return SharedSlice.render({
-                              slice,
-                              StatusOrCustom: {
-                                status: modelsStatuses.slices[slice.model.id],
-                                authStatus,
-                                isOnline,
-                              },
-                              actions: {
-                                onUpdateScreenshot: (e: React.MouseEvent) => {
-                                  e.preventDefault();
-                                  onOpenModal({
-                                    sliceFilterFn: (s: ComponentUI[]) =>
-                                      s.filter(
-                                        (e) => e.model.id === slice.model.id
-                                      ),
-                                  });
-                                },
-                                openRenameModal: (slice: ComponentUI) => {
+                          defineElementKey={(slice) => slice.model.name}
+                          renderElem={(slice) => (
+                            <SharedSliceViewCard
+                              action={{
+                                type: "menu",
+                                onRemove: () => {
                                   setSliceForEdit(slice);
-                                  openRenameSliceModal();
+                                  openDeleteSliceModal();
                                 },
-                                openDeleteModal: (slice: ComponentUI) => {
+                                onRename: () => {
                                   setSliceForEdit(slice);
-                                  openDeleteSliceModal();
+                                  openRenameSliceModal();
                                 },
-                              },
-                              showActions: true,
-                            });
-                          }}
+                              }}
+                              isDeletedSlice={false}
+                              onUpdateScreenshot={() => {
+                                onOpenModal({
+                                  sliceFilterFn: (s) =>
+                                    s.filter(
+                                      (e) => e.model.id === slice.model.id
+                                    ),
+                                });
+                              }}
+                              slice={slice}
+                            />
+                          )}
                           gridGap="32px 16px"
                         />
                       </Flex>

package/src/domain/slice.ts

@@ -0,0 +1,38 @@
+import type {
+  CompositeSlice,
+  LegacySlice,
+} from "@prismicio/types-internal/lib/customtypes/widgets/slices";
+
+import type { ComponentUI } from "@lib/models/common/ComponentUI";
+import type { VariationSM } from "@lib/models/common/Slice";
+
+export type NonSharedSlice = CompositeSlice | LegacySlice;
+
+export const NON_SHARED_SLICE_LIBRARY_NAME = "Default";
+
+export function countMissingScreenshots(slice: ComponentUI): number {
+  return slice.model.variations.length - Object.keys(slice.screenshots).length;
+}
+
+export function getNonSharedSliceLabel(slice: NonSharedSlice): string {
+  return (
+    slice.config?.label ??
+    (slice.type === "Group" ||
+    slice.type === "Slice" ||
+    (slice.type !== "Boolean" && slice.type !== "Separator")
+      ? slice.fieldset
+      : undefined) ??
+    slice.type
+  );
+}
+
+export function getScreenshotUrl(
+  slice: ComponentUI,
+  variation: VariationSM
+): string | undefined {
+  return slice.screenshots[variation.id]?.url;
+}
+
+export function getSharedSliceLibraryName(slice: ComponentUI): string {
+  return slice.from.length > 0 ? slice.from : "Default";
+}

package/src/features/changes/StatusBadge.tsx

@@ -0,0 +1,107 @@
+import { Badge, Tooltip } from "@prismicio/editor-ui";
+import type { ComponentProps, FC } from "react";
+
+import { ModelStatus } from "@lib/models/common/ModelStatus";
+import { AuthStatus } from "@src/modules/userContext/types";
+
+export type StatusBadgeProps = GetStatusBadgeContentArgs;
+
+export const StatusBadge: FC<StatusBadgeProps> = (props) => {
+  const { badgeColor, badgeTitle, tooltipContent } =
+    getStatusBadgeContent(props);
+  return (
+    <Tooltip content={tooltipContent} side="bottom">
+      <Badge color={badgeColor} title={badgeTitle} />
+    </Tooltip>
+  );
+};
+
+type GetStatusBadgeContentArgs = {
+  authStatus: AuthStatus;
+  isOnline: boolean;
+  modelStatus: ModelStatus;
+  modelType: ModelType;
+};
+
+type ModelType = "CustomType" | "Slice";
+
+type StatusBadgeContent = {
+  badgeColor: ComponentProps<typeof Badge>["color"];
+  badgeTitle: string;
+  tooltipContent: string;
+};
+
+function getStatusBadgeContent(
+  args: GetStatusBadgeContentArgs
+): StatusBadgeContent {
+  const modelTypeLabel = modelTypeLabels[args.modelType];
+  switch (args.modelStatus) {
+    case ModelStatus.New: {
+      return {
+        badgeColor: "green",
+        badgeTitle: "New",
+        tooltipContent: `This ${modelTypeLabel} exists only locally. Upon sync, it will be pushed to your remote repository.`,
+      };
+    }
+    case ModelStatus.Modified: {
+      return {
+        badgeColor: "amber",
+        badgeTitle: "Modified",
+        tooltipContent: `This ${modelTypeLabel} has been modified locally. Upon sync, changes will be pushed to your remote repository.`,
+      };
+    }
+    case ModelStatus.Synced: {
+      return {
+        badgeColor: "purple",
+        badgeTitle: "Synced",
+        tooltipContent: `This ${modelTypeLabel} is in sync with the remote repository.`,
+      };
+    }
+    case ModelStatus.Deleted: {
+      return {
+        badgeColor: "tomato",
+        badgeTitle: "Deleted",
+        tooltipContent: `This ${modelTypeLabel} has been deleted locally.`,
+      };
+    }
+    case ModelStatus.Unknown: {
+      if (!args.isOnline) {
+        return {
+          badgeColor: "grey",
+          badgeTitle: "Unknown",
+          tooltipContent:
+            "Data from the remote repository could not be fetched (no internet connection).",
+        };
+      }
+      if (args.authStatus === AuthStatus.UNAUTHORIZED) {
+        return {
+          badgeColor: "grey",
+          badgeTitle: "Unknown",
+          tooltipContent:
+            "Data from the remote repository could not be fetched (not connected to Prismic).",
+        };
+      }
+      if (args.authStatus === AuthStatus.FORBIDDEN) {
+        return {
+          badgeColor: "grey",
+          badgeTitle: "Unknown",
+          tooltipContent:
+            "Data from the remote repository could not be fetched (you don't have access to the repository).",
+        };
+      }
+    }
+    default: {
+      return {
+        badgeColor: "grey",
+        badgeTitle: "Unknown",
+        tooltipContent:
+          "Data from the remote repository could not be fetched (unknown error).",
+      };
+    }
+  }
+}
+
+const modelTypeLabels: Record<ModelType, string> = {
+  CustomType: "type",
+  Slice: "slice",
+};

package/src/features/customTypes/PageTypeOnboarding.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { Box, Button, Text } from "@prismicio/editor-ui";
+
+import { CreateCustomTypeModal } from "@components/Forms/CreateCustomTypeModal";
+import { SliceMachineStoreType } from "@src/redux/type";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { LoadingKeysEnum } from "@src/modules/loading/types";
+import { isLoading } from "@src/modules/loading";
+import { BlankPageIcon } from "@src/icons/BlankPageIcon";
+
+export function PageTypeOnboarding() {
+  const { openCreateCustomTypeModal } = useSliceMachineActions();
+  const { isCreatingCustomType } = useSelector(
+    (store: SliceMachineStoreType) => ({
+      isCreatingCustomType: isLoading(
+        store,
+        LoadingKeysEnum.CREATE_CUSTOM_TYPE
+      ),
+    })
+  );
+  // State to ensure button loader is still visible while redirecting
+  const [isButtonLoading, setIsButtonLoading] = useState(false);
+
+  useEffect(() => {
+    if (isCreatingCustomType) {
+      setIsButtonLoading(true);
+    }
+  }, [isCreatingCustomType]);
+
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      height="100vh"
+      alignItems="center"
+      backgroundColor="grey2"
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        width={384}
+      >
+        <BlankPageIcon />
+        <Text variant="h3" align="center" sx={{ marginTop: 16 }}>
+          Blank page
+        </Text>
+        <Text color="grey11" align="center" sx={{ marginBottom: 16 }}>
+          Welcome to Slice Machine. Your journey starts with your first page
+          type — the model that you will use to create pages for your website.
+        </Text>
+        <Button onClick={openCreateCustomTypeModal} loading={isButtonLoading}>
+          Create a page type
+        </Button>
+        <CreateCustomTypeModal format="page" origin="onboarding" />
+      </Box>
+    </Box>
+  );
+}

package/src/features/customTypes/customTypesBuilder/SliceZoneBlankSlate.tsx

@@ -8,7 +8,7 @@ import {
   BlankSlateDescription,
   BlankSlateTitle,
 } from "@src/components/BlankSlate";
-import { LightningIcon3D } from "@src/icons/LightningIcon3D";
+import { SliceMachinePrinterIcon } from "@src/icons/SliceMachinePrinterIcon";
 
 export type SliceZoneBlankSlateProps = {
   openUpdateSliceZoneModal: () => void;
@@ -30,7 +30,7 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
       <BlankSlate backgroundImage="/blank-slate-slice-zone.png">
         <BlankSlateContent>
           <Box justifyContent="center" padding={{ bottom: 16 }}>
-            <LightningIcon3D />
+            <SliceMachinePrinterIcon />
           </Box>
           <BlankSlateTitle>Add slices</BlankSlateTitle>
           <BlankSlateDescription>

package/src/features/slices/sliceCards/NonSharedSliceViewCard.tsx

@@ -0,0 +1,39 @@
+import { Badge, Box, Text, Tooltip } from "@prismicio/editor-ui";
+import type { FC } from "react";
+
+import { Card, CardActions, CardFooter, CardMedia } from "@src/components/Card";
+import {
+  getNonSharedSliceLabel,
+  NON_SHARED_SLICE_LIBRARY_NAME,
+  type NonSharedSlice,
+} from "@src/domain/slice";
+
+type NonSharedSliceViewCardProps = {
+  slice: NonSharedSlice;
+};
+
+export const NonSharedSliceViewCard: FC<NonSharedSliceViewCardProps> = ({
+  slice,
+}) => (
+  <Card>
+    <CardMedia component="div">
+      <Box alignItems="center" justifyContent="center">
+        <Text color="grey11" component="span">
+          No screenshot available
+        </Text>
+      </Box>
+    </CardMedia>
+    <CardActions>
+      <Tooltip
+        content="This Slice was created with the Legacy Builder, and is incompatible with Slice Machine. You cannot edit, push, or delete it in Slice Machine. In order to proceed, manually remove the Slice from your type model. Then create a new Slice with the same fields using Slice Machine."
+        side="bottom"
+      >
+        <Badge color="purple" title="Legacy Slice" />
+      </Tooltip>
+    </CardActions>
+    <CardFooter
+      subtitle={NON_SHARED_SLICE_LIBRARY_NAME}
+      title={getNonSharedSliceLabel(slice)}
+    />
+  </Card>
+);

package/src/features/slices/sliceCards/SharedSliceSelectionCard.tsx

@@ -0,0 +1,80 @@
+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, getSharedSliceLibraryName } from "@src/domain/slice";
+
+type SharedSliceSelectionCardProps = {
+  isComingSoon: boolean;
+  isSliceTemplate: boolean;
+  onSelectedChange: (selected: boolean) => void;
+  selected: boolean;
+  slice: ComponentUI;
+};
+
+export const SharedSliceSelectionCard: FC<SharedSliceSelectionCardProps> = ({
+  isComingSoon,
+  isSliceTemplate,
+  onSelectedChange,
+  selected,
+  slice,
+}) => {
+  const defaultVariation = ComponentUI.variation(slice);
+  if (!defaultVariation) return null;
+  const src = getScreenshotUrl(slice, defaultVariation);
+  return (
+    <Card
+      checked={selected}
+      data-cy={`shared-slice-selection-card-${slice.model.id}`}
+      data-testid="shared-slice-selection-card"
+      disabled={isComingSoon}
+      interactive
+      onClick={() => {
+        onSelectedChange(!selected);
+      }}
+      size="small"
+      variant="outlined"
+    >
+      {src !== undefined ? (
+        <CardMedia src={src} />
+      ) : (
+        <CardMedia component="div">
+          <Box alignItems="center" justifyContent="center">
+            <Text color="grey11" component="span">
+              No screenshot available
+            </Text>
+          </Box>
+        </CardMedia>
+      )}
+      <CardFooter
+        action={
+          // TODO(DT-1661): `findFocusableAncestor` should find Radix UI's `Checkbox`.
+          <div onClick={(event) => event.stopPropagation()}>
+            <Checkbox
+              checked={selected}
+              disabled={isComingSoon}
+              onCheckedChange={onSelectedChange}
+            />
+          </div>
+        }
+        subtitle={
+          <>
+            {isSliceTemplate
+              ? `${slice.model.variations.length} variation${
+                  slice.model.variations.length > 1 ? "s" : ""
+                }`
+              : getSharedSliceLibraryName(slice)}
+            {isComingSoon ? (
+              <Text color="purple11" component="span" variant="small">
+                {" "}
+                • (coming soon)
+              </Text>
+            ) : undefined}
+          </>
+        }
+        title={slice.model.name}
+      />
+    </Card>
+  );
+};