slice-machine-ui 2.17.3-beta.9 → 2.18.1-alpha.dani-mcp.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slice-machine-ui",
-  "version": "2.17.3-beta.9",
+  "version": "2.18.1-alpha.dani-mcp.1",
   "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": {
@@ -35,23 +35,20 @@
     "start-slicemachine": "./bin/start-slicemachine.cjs"
   },
   "dependencies": {
-    "@slicemachine/manager": "0.25.2-beta.13",
-    "start-slicemachine": "0.12.60-beta.13"
+    "@slicemachine/manager": "0.25.3-alpha.dani-mcp.1",
+    "start-slicemachine": "0.12.61-alpha.dani-mcp.1"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
     "@prismicio/client": "7.17.0",
-    "@prismicio/editor-fields": "0.4.77",
-    "@prismicio/editor-support": "0.4.77",
-    "@prismicio/editor-ui": "0.4.77",
+    "@prismicio/editor-fields": "0.4.87",
+    "@prismicio/editor-support": "0.4.87",
+    "@prismicio/editor-ui": "0.4.87",
     "@prismicio/mock": "0.7.1",
     "@prismicio/mocks": "2.14.0",
     "@prismicio/simulator": "0.1.4",
     "@prismicio/types-internal": "3.11.2",
-    "@radix-ui/react-hover-card": "1.0.6",
-    "@radix-ui/react-tabs": "1.0.4",
-    "@radix-ui/react-visually-hidden": "1.1.1",
     "@reach/menu-button": "0.18.0",
     "@sentry/nextjs": "7.43.0",
     "@storybook/addon-essentials": "7.0.10",
@@ -137,5 +134,5 @@
     "yup": "0.32.11",
     "zod": "3.23.8"
   },
-  "stableVersion": "2.17.2"
+  "stableVersion": "2.18.0"
 }

package/src/apiClient.ts

@@ -163,7 +163,7 @@ export const pushChanges: SliceMachineManagerClient["prismicRepository"]["pushCh
 
 /** Auth Routes * */
 
-export const startAuth = async (): Promise<void> => {
+export const clearAuth = async (): Promise<void> => {
   return await managerClient.user.logout();
 };
 

package/src/domain/fields.ts

@@ -92,7 +92,7 @@ export const imageField: NestableField = {
   type: "Image",
 };
 
-export const LinkField: NestableField = {
+export const linkField: NestableField = {
   name: "Link",
   description: "A link to a website, asset, or document.",
   icon: "link",
@@ -111,8 +111,8 @@ export const contentRelationshipField: NestableField = {
   variant: "ContentRelationship",
 };
 
-export const LinkToMediaField: NestableField = {
-  name: "Link To Media",
+export const linkToMediaField: NestableField = {
+  name: "Link to Media",
   description: "A link to a media asset.",
   icon: "attachFile",
   thumbnail:
@@ -182,8 +182,8 @@ export const nestableFields: NestableField[] = [
   booleanField,
   numberField,
   selectField,
-  LinkField,
-  LinkToMediaField,
+  linkField,
+  linkToMediaField,
   colorField,
   dateField,
   tableField,
@@ -197,7 +197,7 @@ export const nestableFields: NestableField[] = [
  * UID
  */
 
-export const UIDField: UIDField = {
+export const uidField: UIDField = {
   name: "UID",
   description: "Unique Identifier",
   icon: "tag",
@@ -230,4 +230,4 @@ export const groupFields: GroupField[] = [groupField, nestedGroupField];
  * All fields
  */
 
-export const fields = [...nestableFields, UIDField, ...groupFields];
+export const fields = [...nestableFields, uidField, ...groupFields];

package/src/features/auth/LogoutButton.tsx

@@ -0,0 +1,63 @@
+import { Button, Icon, IconButton, Tooltip } from "@prismicio/editor-ui";
+import { SX } from "@prismicio/editor-ui/dist/theme";
+import * as Sentry from "@sentry/nextjs";
+import { ReactNode } from "react";
+
+import { clearAuth as managerLogout, getState } from "@/apiClient";
+import { invalidateActiveEnvironmentData } from "@/features/environments/useActiveEnvironment";
+import { invalidateEnvironmentsData } from "@/features/environments/useEnvironments";
+import useSliceMachineActions from "@/modules/useSliceMachineActions";
+
+interface LogoutButtonProps {
+  children?: ReactNode;
+  onLogoutSuccess?: () => void;
+  isLoading?: boolean;
+  sx?: SX;
+}
+
+export function LogoutButton(props: LogoutButtonProps) {
+  const { children, onLogoutSuccess, isLoading, sx } = props;
+
+  const { refreshState } = useSliceMachineActions();
+
+  async function onClick() {
+    await managerLogout();
+
+    const serverState = await getState();
+    refreshState(serverState);
+
+    Sentry.setUser({ id: serverState.env.shortId });
+
+    // refresh queries to update the UI
+    invalidateEnvironmentsData();
+    invalidateActiveEnvironmentData();
+
+    onLogoutSuccess?.();
+  }
+
+  if (children !== undefined) {
+    return (
+      <Button
+        onClick={() => void onClick()}
+        renderEndIcon={() => <Icon name="logout" size="extraSmall" />}
+        color="grey"
+        loading={isLoading}
+        sx={sx}
+      >
+        {children}
+      </Button>
+    );
+  }
+
+  return (
+    <Tooltip content="Log out" side="right">
+      <IconButton
+        icon="logout"
+        onClick={() => void onClick()}
+        hiddenLabel="Log out"
+        loading={isLoading}
+        sx={sx}
+      />
+    </Tooltip>
+  );
+}

package/src/features/builder/AddFieldDropdown.tsx

@@ -18,7 +18,7 @@ import {
   FieldVariant,
   groupField,
   nestableFields,
-  UIDField,
+  uidField,
 } from "@/domain/fields";
 
 export type AddFieldDropdownProps = {
@@ -47,7 +47,7 @@ export function AddFieldDropdown(props: AddFieldDropdownProps) {
     (field) =>
       nestableFields.some(
         (nestableField) => nestableField.name === field.name,
-      ) || field.name === UIDField.name,
+      ) || field.name === uidField.name,
   );
   const groupFieldToRender = fields.find(
     (field) => field.name === groupField.name,

package/src/features/environments/actions/getActiveEnvironment.ts

@@ -5,10 +5,6 @@ import {
 
 import { managerClient } from "@/managerClient";
 
-type GetActiveEnvironmentArgs = {
-  retried?: boolean;
-};
-
 type GetActiveEnvironmentReturnType =
   | {
       activeEnvironment: Environment;
@@ -20,10 +16,8 @@ type GetActiveEnvironmentReturnType =
     };
 
 export async function getActiveEnvironment(
-  args?: GetActiveEnvironmentArgs,
+  retried = false,
 ): Promise<GetActiveEnvironmentReturnType> {
-  const { retried = false } = args ?? {};
-
   try {
     const activeEnvironmentResult =
       await managerClient.project.fetchActiveEnvironment();
@@ -41,7 +35,7 @@ export async function getActiveEnvironment(
       await managerClient.project.updateEnvironment({ environment: undefined });
 
       // Call recursively with isRetry=true to prevent infinite loop if it fails again and again.
-      return await getActiveEnvironment({ retried: true });
+      return await getActiveEnvironment(true);
     }
 
     return { error };

package/src/features/environments/useActiveEnvironment.ts

@@ -1,7 +1,14 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
+import {
+  invalidateFetcherData,
+  useRequest,
+} from "@prismicio/editor-support/Suspense";
 
 import { getActiveEnvironment } from "./actions/getActiveEnvironment";
 
+export function invalidateActiveEnvironmentData() {
+  invalidateFetcherData(getActiveEnvironment);
+}
+
 export function useActiveEnvironment() {
   return useRequest(getActiveEnvironment, []);
 }

package/src/features/environments/useEnvironments.ts

@@ -1,7 +1,14 @@
-import { useRequest } from "@prismicio/editor-support/Suspense";
+import {
+  invalidateFetcherData,
+  useRequest,
+} from "@prismicio/editor-support/Suspense";
 
 import { getEnvironments } from "./actions/getEnvironments";
 
+export function invalidateEnvironmentsData() {
+  invalidateFetcherData(getEnvironments);
+}
+
 export function useEnvironments() {
   return useRequest(getEnvironments, []);
 }

package/src/features/navigation/Navigation.tsx

@@ -1,4 +1,10 @@
-import { ActionList, Box, Separator, Skeleton } from "@prismicio/editor-ui";
+import {
+  ActionList,
+  Badge,
+  Box,
+  Separator,
+  Skeleton,
+} from "@prismicio/editor-ui";
 import { useRouter } from "next/router";
 import { Suspense } from "react";
 
@@ -10,6 +16,7 @@ import { RepositoryInfo } from "@/features/navigation/RepositoryInfo";
 import { OnboardingGuide } from "@/features/onboarding";
 import { useAdapterName } from "@/hooks/useAdapterName";
 import { useMarketingContent } from "@/hooks/useMarketingContent";
+import { CodeIcon } from "@/icons/CodeIcon";
 import { FolderIcon } from "@/icons/FolderIcon";
 import { LightningIcon } from "@/icons/Lightning";
 import { MenuBookIcon } from "@/icons/MenuBookIcon";
@@ -93,6 +100,23 @@ export function Navigation() {
               <OnboardingGuide />
             </Suspense>
           </ErrorBoundary>
+
+          <NavigationItem
+            title="Prismic MCP"
+            href="https://prismic.io/docs/ai#code-with-prismics-mcp-server"
+            target="_blank"
+            Icon={CodeIcon}
+            RightElement={<Badge title="New" color="indigo" />}
+            tooltip="Connect Prismic MCP to your editor (like Cursor) for AI-powered coding."
+            onClick={() => {
+              void telemetry.track({
+                event: "sidebar:link-clicked",
+                link_name: "prismic_mcp",
+                source: "slice_machine_sidebar",
+              });
+            }}
+          />
+
           <NavigationItem
             title="Documentation"
             href={documentationLink}

package/src/features/navigation/NavigationItem.tsx

@@ -13,6 +13,7 @@ type NavigationItemPropsBase = {
   active?: boolean;
   Icon: FC<SVGProps<SVGSVGElement>>;
   RightElement?: ReactNode;
+  tooltip?: string;
 };
 
 type NavigationLinkItemProps = NavigationItemPropsBase & {
@@ -32,7 +33,8 @@ type NavigationButtonItemProps = NavigationItemPropsBase & {
 type NavigationItemProps = NavigationLinkItemProps | NavigationButtonItemProps;
 
 export function NavigationItem(props: NavigationItemProps) {
-  const { title, href, target, active, Icon, RightElement, onClick } = props;
+  const { title, href, target, active, Icon, RightElement, onClick, tooltip } =
+    props;
 
   const isCollapsed = useMediaQuery({ max: "medium" });
 
@@ -45,7 +47,7 @@ export function NavigationItem(props: NavigationItemProps) {
       textVariant="normal"
       backgroundColor="transparent"
       renderStartIcon={ItemIcon}
-      endAdornment={RightElement}
+      endAdornment={isCollapsed ? undefined : RightElement}
       selected={active}
     >
       {isCollapsed ? null : title}
@@ -53,7 +55,11 @@ export function NavigationItem(props: NavigationItemProps) {
   );
 
   return (
-    <Tooltip content={title} side="right" visible={isCollapsed}>
+    <Tooltip
+      content={Boolean(tooltip) ? tooltip ?? "" : title}
+      side="right"
+      visible={Boolean(tooltip) ? undefined : isCollapsed}
+    >
       {href !== undefined ? (
         <Link
           href={href}

package/src/features/sync/actions/pushChanges.ts

@@ -29,6 +29,7 @@ export async function pushChanges(
     type: "Slice" as const,
     libraryID: sliceChange.slice.from,
     status: sliceChange.status,
+    variationImageUrlMap: sliceChange.variationImageUrlMap,
   }));
   const customTypeChanges = changedCustomTypes.map((customTypeChange) => ({
     id: customTypeChange.customType.id,

package/src/features/sync/getUnSyncChanges.ts

@@ -3,6 +3,7 @@ import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
 import {
   getModelId,
   hasLocal,
+  hasRemote,
   isRemoteOnly,
   LocalOrRemoteCustomType,
   LocalOrRemoteSlice,
@@ -76,11 +77,23 @@ export function getUnSyncedChanges(
   );
 
   const changedSlices = unSyncedSlices
-    .map((s) => ({
-      slice: s,
-      status: modelsStatuses.slices[s.model.id],
-    }))
+    .map((slice) => {
+      const status = modelsStatuses.slices[slice.model.id];
+
+      const imageUrlMap = findRemoteSlice(
+        slices,
+        slice.model.id,
+      )?.variations.reduce<Record<string, string>>((result, variation) => {
+        const { imageUrl } = variation;
+        if (imageUrl === undefined || imageUrl === "") return result;
+        result[variation.id] = imageUrl;
+        return result;
+      }, {});
+
+      return { status, slice, variationImageUrlMap: imageUrlMap ?? {} };
+    })
     .filter((s): s is ChangedSlice => unSyncStatuses.includes(s.status));
+
   const changedCustomTypes = unSyncedCustomTypes
     .map((model) => (hasLocal(model) ? model.local : model.remote))
     .map((ct) => ({
@@ -98,6 +111,11 @@ export function getUnSyncedChanges(
   };
 }
 
+function findRemoteSlice(slices: LocalOrRemoteSlice[], sliceId: string) {
+  const slice = slices.find((s) => hasRemote(s) && s.remote.id === sliceId);
+  return slice && hasRemote(slice) ? slice.remote : undefined;
+}
+
 // ComponentUI are manipulated on all the relevant pages
 // But the data is not available for remote only slices
 // which have been deleted locally

package/src/legacy/components/AppLayout/index.tsx

@@ -6,9 +6,11 @@ import {
   Box,
   Button,
   ButtonGroup,
+  Text,
 } from "@prismicio/editor-ui";
+import { isUnauthorizedError } from "@slicemachine/manager/client";
 import { useRouter } from "next/router";
-import { FC, PropsWithChildren, Suspense } from "react";
+import { FC, PropsWithChildren, Suspense, useState } from "react";
 
 import { Breadcrumb } from "@/components/Breadcrumb";
 import {
@@ -18,6 +20,7 @@ import {
   PageLayoutPane,
 } from "@/components/PageLayout";
 import { ErrorBoundary } from "@/ErrorBoundary";
+import { LogoutButton } from "@/features/auth/LogoutButton";
 import { useActiveEnvironment } from "@/features/environments/useActiveEnvironment";
 import { Navigation } from "@/features/navigation/Navigation";
 
@@ -44,7 +47,7 @@ export const AppLayout: FC<PropsWithChildren> = ({
               />
               <BlankSlateTitle>Failed to load Slice Machine</BlankSlateTitle>
               <BlankSlateDescription>
-                {JSON.stringify(error)}
+                <RenderError error={error} />
               </BlankSlateDescription>
             </BlankSlate>
           </Box>
@@ -63,6 +66,43 @@ export const AppLayout: FC<PropsWithChildren> = ({
   );
 };
 
+function RenderError(args: { error: unknown }) {
+  const { error } = args;
+
+  if (isUnauthorizedError(error)) {
+    return <UnauthorizedErrorView />;
+  }
+  return <>{JSON.stringify(error)}</>;
+}
+
+function UnauthorizedErrorView() {
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+
+  return (
+    <Box flexDirection="column" gap={16} margin={{ top: 8 }}>
+      <Box flexDirection="column" gap={8} alignItems="center">
+        <Text variant="h3" align="center">
+          It seems like you don't have access to this repository
+        </Text>
+        <Text align="center">
+          Check that the repository name is correct, then contact your
+          repository administrator.
+        </Text>
+      </Box>
+      <LogoutButton
+        isLoading={isLoggingOut}
+        onLogoutSuccess={() => {
+          setIsLoggingOut(true);
+          window.location.reload();
+        }}
+        sx={{ alignSelf: "center" }}
+      >
+        Log out
+      </LogoutButton>
+    </Box>
+  );
+}
+
 const environmentTopBorderColorMap = {
   prod: "purple",
   stage: "indigo",

package/src/legacy/components/ChangesEmptyState/AuthErrorPage.tsx

@@ -5,7 +5,7 @@ import { AuthStatus } from "@/modules/userContext/types";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
 export type AuthErrorPageProps = {
-  authStatus: AuthStatus.UNAUTHORIZED | AuthStatus.FORBIDDEN;
+  authStatus: AuthStatus.FORBIDDEN;
 };
 
 export const AuthErrorPage: FC<AuthErrorPageProps> = (props) => {
@@ -20,23 +20,13 @@ export const AuthErrorPage: FC<AuthErrorPageProps> = (props) => {
       justifyContent="center"
       gap={8}
     >
-      {authStatus === AuthStatus.FORBIDDEN ? (
+      {authStatus === AuthStatus.FORBIDDEN && (
         <>
           <Text variant="h3" align="center">
             It seems like you are logged out
           </Text>
           <Text align="center">Log in to connect to your repository.</Text>
         </>
-      ) : (
-        <>
-          <Text variant="h3" align="center">
-            It seems like you don't have access to this repository
-          </Text>
-          <Text align="center">
-            Check that the repository name is correct, then contact your
-            repository administrator.
-          </Text>
-        </>
       )}
       <Text align="center">
         If that doesn't work, it's possible that Slice Machine is having trouble

package/src/legacy/components/ListItem/Header.tsx

@@ -1,3 +1,4 @@
+import { Box, Tooltip } from "@prismicio/editor-ui";
 import * as CSS from "csstype";
 import { IconType } from "react-icons";
 import { Flex, Text, Theme } from "theme-ui";
@@ -9,6 +10,7 @@ interface ItemHeaderProps {
   sliceFieldName: string | undefined;
   theme: Theme;
   WidgetIcon: IconType;
+  widgetIconTooltip: string;
 }
 
 const ItemHeader: React.FC<ItemHeaderProps> = ({
@@ -16,20 +18,24 @@ const ItemHeader: React.FC<ItemHeaderProps> = ({
   sliceFieldName,
   theme,
   WidgetIcon,
+  widgetIconTooltip,
 }) => (
   <Flex sx={{ alignItems: "center", position: "relative" }}>
-    <WidgetIcon
-      size={28}
-      style={{
-        color: theme.colors?.primary as CSS.Property.Color,
-        marginRight: "8px",
-        borderRadius: "4px",
-        padding: "4px",
-        border: "2px solid",
-        borderColor: theme.colors?.primary as CSS.Property.Color,
-        flexShrink: 0,
-      }}
-    />
+    <Tooltip content={widgetIconTooltip} sideOffset={2} disableHoverableContent>
+      <Box margin={{ right: 8 }}>
+        <WidgetIcon
+          size={28}
+          style={{
+            color: theme.colors?.primary as CSS.Property.Color,
+            borderRadius: "4px",
+            padding: "4px",
+            border: "2px solid",
+            borderColor: theme.colors?.primary as CSS.Property.Color,
+            flexShrink: 0,
+          }}
+        />
+      </Box>
+    </Tooltip>
     <TextWithTooltip
       text={text}
       as="p"

package/src/legacy/components/ListItem/index.tsx

@@ -114,6 +114,7 @@ function ListItem<F extends TabField, S extends AnyObjectSchema>({
                         renderFieldAccessor && renderFieldAccessor(key)
                       }
                       WidgetIcon={widget.Meta.icon}
+                      widgetIconTooltip={widget.label}
                     />
                     <Flex sx={{ flex: "0 0 auto" }}>
                       {shouldDisplayRepeatableBadge && (

package/src/legacy/components/LoginModal/index.tsx

@@ -13,8 +13,10 @@ import {
   Text,
 } from "theme-ui";
 
-import { checkAuthStatus, getState, startAuth } from "@/apiClient";
+import { checkAuthStatus, clearAuth, getState } from "@/apiClient";
 import { getActiveEnvironment } from "@/features/environments/actions/getActiveEnvironment";
+import { invalidateActiveEnvironmentData } from "@/features/environments/useActiveEnvironment";
+import { invalidateEnvironmentsData } from "@/features/environments/useEnvironments";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { getUnSyncedChanges } from "@/features/sync/getUnSyncChanges";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
@@ -50,7 +52,7 @@ const LoginModal: React.FunctionComponent = () => {
     }),
   );
   const { syncChanges } = useAutoSync();
-  const { closeModals, startLoadingLogin, stopLoadingLogin } =
+  const { closeModals, startLoadingLogin, stopLoadingLogin, refreshState } =
     useSliceMachineActions();
 
   const prismicBase = preferWroomBase(env.manifest.apiEndpoint);
@@ -64,7 +66,7 @@ const LoginModal: React.FunctionComponent = () => {
 
     try {
       startLoadingLogin();
-      await startAuth();
+      await clearAuth();
       window.open(loginRedirectUrl, "_blank");
       await startPolling<CheckAuthStatusResponse, ValidAuthStatus>(
         checkAuthStatus,
@@ -76,11 +78,17 @@ const LoginModal: React.FunctionComponent = () => {
         60,
       );
 
+      // refresh queries to update the UI
+      invalidateEnvironmentsData();
+      invalidateActiveEnvironmentData();
+
       toast.success("Logged in");
       stopLoadingLogin();
       closeModals();
 
       const serverState = await getState();
+      refreshState(serverState);
+
       const slices = normalizeFrontendSlices(
         serverState.libraries,
         serverState.remoteSlices,

package/src/legacy/components/Navigation/Environment.tsx

@@ -1,7 +1,6 @@
 import {
   Environment as EnvironmentType,
   isUnauthenticatedError,
-  isUnauthorizedError,
 } from "@slicemachine/manager/client";
 import { useState } from "react";
 
@@ -98,17 +97,10 @@ export function Environment() {
     );
   }
 
-  if (
-    isUnauthenticatedError(useEnvironmentsError) ||
-    isUnauthorizedError(useEnvironmentsError)
-  ) {
+  if (isUnauthenticatedError(useEnvironmentsError)) {
     return (
       <SideNavEnvironmentSelector
-        variant={
-          isUnauthenticatedError(useEnvironmentsError)
-            ? "unauthenticated"
-            : "unauthorized"
-        }
+        variant="unauthenticated"
         onLogInClick={() => openLoginModal()}
       />
     );

package/src/legacy/components/Navigation/SideNavEnvironmentSelector/SideNavEnvironmentSelector.tsx

@@ -17,7 +17,9 @@ import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import type { Environment } from "@slicemachine/manager/client";
 import { clsx } from "clsx";
 import type { FC, ReactNode } from "react";
+import { toast } from "react-toastify";
 
+import { LogoutButton } from "@/features/auth/LogoutButton";
 import { LoginIcon } from "@/icons/LoginIcon";
 import { LogoIcon } from "@/icons/LogoIcon";
 
@@ -138,6 +140,12 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
                 }
               />
             ) : undefined}
+
+            {variant === "default" && (
+              <LogoutButton
+                onLogoutSuccess={() => toast.success("Logged out")}
+              />
+            )}
           </Box>
         </>
       )}