slice-machine-ui 1.20.0 → 1.20.1-dev-environments.0

package/src/components/Divider/Divider.css.ts

@@ -0,0 +1,31 @@
+import { colors, sprinkles } from "@prismicio/editor-ui";
+import { style, styleVariants } from "@vanilla-extract/css";
+
+const base = style([
+  sprinkles({
+    width: "100%",
+    borderStyle: "none",
+    margin: 0,
+  }),
+]);
+
+export const variants = styleVariants({
+  dashed: [
+    base,
+    sprinkles({
+      borderColor: colors.currentColor,
+      borderTopStyle: "dashed",
+      borderWidth: 1,
+    }),
+  ],
+  edgeFaded: [
+    base,
+    sprinkles({
+      height: 1,
+    }),
+    {
+      backgroundImage:
+        "linear-gradient(to right, color-mix(in srgb, currentColor 0%, transparent), currentColor, color-mix(in srgb, currentColor 0%, transparent))",
+    },
+  ],
+});

package/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { colors } from "@prismicio/editor-ui";
+
+import { Divider } from "./Divider";
+import { variants } from "./Divider.css";
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  component: Divider,
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: Object.keys(variants),
+    },
+    color: {
+      control: { type: "select" },
+      options: Object.keys(colors),
+    },
+  },
+} satisfies Meta<typeof Divider>;
+
+export default meta;
+
+export const Default = {
+  args: {},
+} satisfies Story;

package/src/components/Divider/Divider.tsx

@@ -0,0 +1,25 @@
+import { FC } from "react";
+import { colors, sprinkles } from "@prismicio/editor-ui";
+import clsx from "clsx";
+
+import * as styles from "./Divider.css";
+
+type DividerProps = {
+  color?: keyof typeof colors;
+  variant?: "dashed" | "edgeFaded";
+  className?: string;
+};
+
+export const Divider: FC<DividerProps> = (props) => {
+  const { variant = "dashed", color = "currentColor", className } = props;
+
+  return (
+    <hr
+      className={clsx(
+        styles.variants[variant],
+        sprinkles({ color: colors[color] }),
+        className,
+      )}
+    />
+  );
+};

package/src/components/Divider/index.ts

@@ -0,0 +1 @@
+export { Divider } from "./Divider";

package/src/components/PageLayout/PageLayout.css.ts

@@ -1,5 +1,5 @@
 import { colors, sprinkles, vars } from "@prismicio/editor-ui";
-import { style } from "@vanilla-extract/css";
+import { style, styleVariants } from "@vanilla-extract/css";
 
 const grid = sprinkles({ all: "unset", display: "grid" });
 
@@ -23,10 +23,9 @@ export const root = style([
   },
 ]);
 
-export const borderTop = style([
+const borderTopBase = style([
   sprinkles({
     all: "unset",
-    backgroundColor: colors.purple9,
     display: "revert",
     height: 2,
     position: "fixed",
@@ -35,6 +34,12 @@ export const borderTop = style([
   { width: "inherit" },
 ]);
 
+export const borderTop = styleVariants({
+  prod: [borderTopBase, sprinkles({ backgroundColor: colors.purple9 })],
+  stage: [borderTopBase, sprinkles({ backgroundColor: colors.indigo10 })],
+  dev: [borderTopBase, sprinkles({ backgroundColor: colors.amber10 })],
+});
+
 export const pane = style([
   grid,
   sprinkles({

package/src/components/PageLayout/PageLayout.stories.tsx

@@ -6,12 +6,21 @@ import {
   PageLayoutHeader,
   PageLayoutPane,
 } from "./PageLayout";
+import { borderTop } from "./PageLayout.css";
 
 type Story = StoryObj<typeof meta>;
 
 const meta = {
   component: PageLayout,
-  argTypes: { children: { control: { disable: true } } },
+  argTypes: {
+    children: {
+      control: { disable: true },
+    },
+    activeEnvironmentKind: {
+      control: { type: "select" },
+      options: Object.keys(borderTop),
+    },
+  },
   parameters: {
     docs: { story: { height: 256, inline: false } },
     layout: "fullscreen",

package/src/components/PageLayout/PageLayout.tsx

@@ -2,13 +2,18 @@ import type { FC, PropsWithChildren } from "react";
 
 import * as styles from "./PageLayout.css";
 
-export const PageLayout: FC<PropsWithChildren> = ({
+type PageLayoutProps = PropsWithChildren<{
+  activeEnvironmentKind?: "prod" | "stage" | "dev";
+}>;
+
+export const PageLayout: FC<PageLayoutProps> = ({
+  activeEnvironmentKind = "prod",
   children,
   ...otherProps
 }) => (
   <div {...otherProps} className={styles.root}>
     {children}
-    <div className={styles.borderTop} />
+    <div className={styles.borderTop[activeEnvironmentKind]} />
   </div>
 );
 

package/src/components/SideNav/SideNav.css.ts

@@ -101,7 +101,6 @@ export const repositoryLinkIcon = style([
     borderWidth: 1,
     cursor: "pointer",
     height: 32,
-    marginRight: 8,
     width: 32,
     color: colors.grey12,
     backgroundColor: {
@@ -163,15 +162,9 @@ export const listTitle = style([
   },
 ]);
 
-export const dashedLine = style([
-  blockWithDisplayRevert,
-  sprinkles({
-    borderColor: colors.grey6,
-    borderTopStyle: "dashed",
-    borderWidth: 1,
-    marginTop: 8,
-  }),
-]);
+export const separator = sprinkles({
+  marginTop: 8,
+});
 
 export const link = style([
   block,

package/src/components/SideNav/SideNav.stories.tsx

@@ -5,7 +5,6 @@ import { LightningIcon } from "@src/icons/Lightning";
 
 import {
   SideNav,
-  SideNavLogo,
   SideNavList,
   SideNavListItem,
   SideNavLink,
@@ -15,6 +14,7 @@ import {
   SideNavRepository,
   RightElement,
 } from "./SideNav";
+import { SideNavEnvironmentSelector } from "./SideNavEnvironmentSelector";
 
 type Story = StoryObj<typeof meta>;
 
@@ -33,7 +33,34 @@ export const Default = {
   args: {
     children: (
       <>
-        <SideNavLogo />
+        <SideNavEnvironmentSelector
+          environments={[
+            {
+              name: "Production",
+              domain: "example-prismic-repo",
+              kind: "prod",
+              users: [{ id: "id" }],
+            },
+            {
+              name: "Staging",
+              domain: "example-prismic-repo-staging",
+              kind: "stage",
+              users: [{ id: "id" }],
+            },
+            {
+              name: "Development",
+              domain: "example-prismic-repo-development",
+              kind: "dev",
+              users: [{ id: "id" }],
+            },
+          ]}
+          activeEnvironment={{
+            name: "Production",
+            domain: "example-prismic-repo",
+            kind: "prod",
+            users: [{ id: "id" }],
+          }}
+        />
 
         <SideNavRepository
           repositoryName="really long repository name"

package/src/components/SideNav/SideNav.tsx

@@ -16,6 +16,8 @@ import type { UrlObject } from "node:url";
 import LogoIcon from "@src/icons/LogoIcon";
 import OpenIcon from "@src/icons/OpenIcon";
 
+import { Divider } from "../Divider";
+
 import * as styles from "./SideNav.css";
 
 type SideNavProps = PropsWithChildren<{ style?: CSSProperties }>;
@@ -90,7 +92,9 @@ export const SideNavListTitle: FC<PropsWithChildren> = (props) => (
   <h3 {...props} className={styles.listTitle} />
 );
 
-export const SideNavSeparator = () => <hr className={styles.dashedLine} />;
+export const SideNavSeparator = () => (
+  <Divider color="grey6" className={styles.separator} />
+);
 
 export type SideNavLinkProps = {
   title: string;

package/src/components/SideNav/SideNavEnvironmentSelector.css.ts

@@ -0,0 +1,69 @@
+import { colors, sprinkles } from "@prismicio/editor-ui";
+import { style, styleVariants } from "@vanilla-extract/css";
+
+export const logo = style([
+  sprinkles({
+    height: 40,
+    width: 40,
+  }),
+  {
+    display: "block",
+  },
+]);
+
+const environmentDotBase = style([
+  sprinkles({
+    flexShrink: 0,
+    borderRadius: "50%",
+  }),
+  {
+    width: 10,
+    height: 10,
+  },
+]);
+
+export const environmentDot = styleVariants({
+  prod: [environmentDotBase, sprinkles({ backgroundColor: colors.purple10 })],
+  stage: [environmentDotBase, sprinkles({ backgroundColor: colors.indigo10 })],
+  dev: [environmentDotBase, sprinkles({ backgroundColor: colors.amber10 })],
+});
+
+export const menuItemEnvironmentDot = sprinkles({
+  marginRight: 2,
+  marginLeft: 2,
+});
+
+export const activeEnvironmentDot = style([
+  sprinkles({
+    position: "absolute",
+    bottom: 0,
+    right: 0,
+    outlineWidth: 3,
+    outlineColor: colors.grey2,
+    outlineStyle: "solid",
+  }),
+  {
+    transform: "translate(50%, 50%)",
+  },
+]);
+
+export const activeEnvironmentName = style([
+  sprinkles({
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  }),
+  {
+    fontWeight: 500,
+    lineHeight: "1.25rem",
+  },
+]);
+
+export const actionRequiredLabel = style([
+  sprinkles({
+    color: colors.purple10,
+  }),
+  {
+    fontWeight: 500,
+  },
+]);

package/src/components/SideNav/SideNavEnvironmentSelector.tsx

@@ -0,0 +1,163 @@
+import {
+  Box,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  Icon,
+  IconButton,
+  Text,
+} from "@prismicio/editor-ui";
+import { Environment } from "@slicemachine/manager/client";
+import type { FC } from "react";
+import clsx from "clsx";
+
+import LogoIcon from "@src/icons/LogoIcon";
+
+import * as styles from "./SideNavEnvironmentSelector.css";
+
+type SideNavEnvironmentSelectorProps = {
+  variant?: "default" | "unauthorized";
+  environments?: Environment[];
+  activeEnvironment?: Environment;
+  onSelect?: (environment: Environment) => void | Promise<void>;
+  onLogInClick?: () => void;
+};
+
+export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
+  props,
+) => {
+  const {
+    variant = "default",
+    environments = [],
+    activeEnvironment,
+    onSelect,
+    onLogInClick,
+  } = props;
+
+  const isProductionEnvironmentActive = activeEnvironment?.kind === "prod";
+
+  return (
+    <Box alignItems="center" gap={16}>
+      <Box position="relative">
+        <LogoIcon className={styles.logo} />
+        {activeEnvironment !== undefined && (
+          <EnvironmentDot
+            kind={activeEnvironment.kind}
+            className={styles.activeEnvironmentDot}
+          />
+        )}
+      </Box>
+      <Box flexGrow={1} flexDirection="column" overflow="hidden">
+        <Text component="span" variant="small" color="grey11">
+          Environment
+        </Text>
+        {variant === "unauthorized" ? (
+          <Text component="span" className={styles.actionRequiredLabel}>
+            Login required
+          </Text>
+        ) : activeEnvironment === undefined ? (
+          <Text component="span" className={styles.actionRequiredLabel}>
+            Select environment
+          </Text>
+        ) : (
+          <Text component="span" className={styles.activeEnvironmentName}>
+            {isProductionEnvironmentActive
+              ? "Production"
+              : activeEnvironment?.name}
+          </Text>
+        )}
+      </Box>
+      <Box flexShrink={0}>
+        {variant === "unauthorized" ? (
+          <IconButton icon="arrowForward" onClick={onLogInClick} />
+        ) : !activeEnvironment || environments.length > 1 ? (
+          <EnvironmentDropdownMenu
+            environments={environments}
+            activeEnvironment={activeEnvironment}
+            onSelect={onSelect}
+          />
+        ) : null}
+      </Box>
+    </Box>
+  );
+};
+
+type EnvironmentDropdownMenuProps = Pick<
+  SideNavEnvironmentSelectorProps,
+  "environments" | "activeEnvironment" | "onSelect"
+>;
+
+const EnvironmentDropdownMenu: FC<EnvironmentDropdownMenuProps> = (props) => {
+  const { environments = [], activeEnvironment, onSelect } = props;
+
+  return (
+    <DropdownMenu modal>
+      <DropdownMenuTrigger>
+        <IconButton icon="unfoldMore" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" minWidth={256}>
+        <DropdownMenuLabel>Regular Environments</DropdownMenuLabel>
+        {environments.map((environment) =>
+          environment.kind !== "dev" ? (
+            <EnvironmentDropdownMenuItem
+              key={environment.domain}
+              environment={environment}
+              onSelect={onSelect}
+              isActive={environment.domain === activeEnvironment?.domain}
+            />
+          ) : (
+            <>
+              <DropdownMenuLabel>Personal Environment</DropdownMenuLabel>
+              <EnvironmentDropdownMenuItem
+                key={environment.domain}
+                environment={environment}
+                onSelect={onSelect}
+                isActive={environment.domain === activeEnvironment?.domain}
+              />
+            </>
+          ),
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+type EnvironmentDropdownMenuItemProps = {
+  environment: Environment;
+  isActive?: boolean;
+} & Pick<SideNavEnvironmentSelectorProps, "onSelect">;
+
+const EnvironmentDropdownMenuItem: FC<EnvironmentDropdownMenuItemProps> = (
+  props,
+) => {
+  const { environment, onSelect, isActive } = props;
+  const isProductionEnvironment = environment.kind === "prod";
+
+  return (
+    <DropdownMenuItem
+      startIcon={
+        <EnvironmentDot
+          kind={environment.kind}
+          className={styles.menuItemEnvironmentDot}
+        />
+      }
+      endIcon={Boolean(isActive) ? <Icon name="check" /> : undefined}
+      onSelect={() => void onSelect?.(environment)}
+    >
+      {isProductionEnvironment ? "Production" : environment.name}
+    </DropdownMenuItem>
+  );
+};
+
+type EnvironmentDotProps = {
+  kind: Environment["kind"];
+  className?: string;
+};
+
+const EnvironmentDot: FC<EnvironmentDotProps> = (props) => {
+  const { kind, className } = props;
+
+  return <div className={clsx(styles.environmentDot[kind], className)} />;
+};

package/src/components/SideNav/index.ts

@@ -1 +1,2 @@
 export * from "./SideNav";
+export { SideNavEnvironmentSelector } from "./SideNavEnvironmentSelector";

package/src/features/customTypes/__tests__/CustomTypeBuilderPage.test.tsx

@@ -178,9 +178,10 @@ async function renderCustomTypesBuilderPage({
   const renderResults = render(<CustomTypesBuilderPage />, customTypeMockStore);
 
   const folder = customType.format === "page" ? "Page types" : "Custom types";
-  expect(
-    screen.getByTestId(`breadcrumb-${folder}-${customType.label as string}`),
-  ).toBeVisible();
+  const breadcrumb = await screen.findByTestId(
+    `breadcrumb-${folder}-${customType.label as string}`,
+  );
+  expect(breadcrumb).toBeVisible();
 
   return renderResults;
 }

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

@@ -0,0 +1,11 @@
+import { managerClient } from "@src/managerClient";
+
+export async function getActiveEnvironmentDomain() {
+  try {
+    const { environment } = await managerClient.project.readEnvironment();
+
+    return { activeEnvironmentDomain: environment };
+  } catch (error) {
+    return { error };
+  }
+}

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

@@ -0,0 +1,12 @@
+import { managerClient } from "@src/managerClient";
+
+export async function getEnvironments() {
+  try {
+    const environments =
+      await managerClient.prismicRepository.fetchEnvironments();
+
+    return { environments };
+  } catch (error) {
+    return { error };
+  }
+}

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

@@ -0,0 +1,18 @@
+import { revalidateData } from "@prismicio/editor-support/Suspense";
+import { Environment } from "@slicemachine/manager/client";
+
+import { getLegacySliceMachineState } from "@src/features/legacyState/actions/getLegacySliceMachineState";
+import { managerClient } from "@src/managerClient";
+
+import { getActiveEnvironmentDomain } from "./getActiveEnvironmentDomain";
+
+export async function setEnvironment(
+  environment: Pick<Environment, "domain">,
+): Promise<void> {
+  await managerClient.project.updateEnvironment({
+    environment: environment.domain,
+  });
+
+  revalidateData(getActiveEnvironmentDomain, []);
+  revalidateData(getLegacySliceMachineState, []);
+}

package/src/features/environments/useActiveEnvironment.ts

@@ -0,0 +1,38 @@
+import { useRequest } from "@prismicio/editor-support/Suspense";
+
+import { getActiveEnvironmentDomain } from "./actions/getActiveEnvironmentDomain";
+import { useEnvironments } from "./useEnvironments";
+
+export function useActiveEnvironment() {
+  const { environments, error: useEnvironmentsError } = useEnvironments();
+  const { activeEnvironmentDomain, error: getActiveEnvironmentError } =
+    useRequest(getActiveEnvironmentDomain, []);
+
+  if (useEnvironmentsError !== undefined) {
+    return { error: useEnvironmentsError };
+  }
+
+  if (getActiveEnvironmentError !== undefined) {
+    return { error: getActiveEnvironmentError };
+  }
+
+  const activeEnvironment = environments?.find((environment) => {
+    if (activeEnvironmentDomain === undefined) {
+      return environment.kind === "prod";
+    }
+
+    return environment.domain === activeEnvironmentDomain;
+  });
+
+  if (!activeEnvironment) {
+    return {
+      error: new Error(
+        `The active environment (${
+          activeEnvironmentDomain ?? "Production"
+        }) does not match one of the repository's environments.`,
+      ),
+    };
+  }
+
+  return { activeEnvironment };
+}

package/src/features/environments/useEnvironments.ts

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

package/src/features/legacyState/actions/getLegacySliceMachineState.ts

@@ -0,0 +1,53 @@
+import ServerState from "@models/server/ServerState";
+import { Slices } from "@lib/models/common/Slice";
+import { CustomTypes } from "@lib/models/common/CustomType";
+import { managerClient } from "@src/managerClient";
+
+export async function getLegacySliceMachineState() {
+  const rawState = await managerClient.getState();
+
+  // `rawState` from the client contains non-SM-specific models. We need to
+  // transform the data to something SM recognizes.
+  const state: ServerState = {
+    ...rawState,
+    libraries: rawState.libraries.map((library) => {
+      return {
+        ...library,
+        components: library.components.map((component) => {
+          return {
+            ...component,
+            model: Slices.toSM(component.model),
+
+            // Replace screnshot Blobs with URLs.
+            screenshots: Object.fromEntries(
+              Object.entries(component.screenshots).map(
+                ([variationID, screenshot]) => {
+                  return [
+                    variationID,
+                    {
+                      ...screenshot,
+                      url: URL.createObjectURL(screenshot.data),
+                    },
+                  ];
+                },
+              ),
+            ),
+          };
+        }),
+      };
+    }),
+    customTypes: rawState.customTypes.map((customTypeModel) => {
+      return CustomTypes.toSM(customTypeModel);
+    }),
+    remoteCustomTypes: rawState.remoteCustomTypes.map(
+      (remoteCustomTypeModel) => {
+        return CustomTypes.toSM(remoteCustomTypeModel);
+      },
+    ),
+    remoteSlices: rawState.remoteSlices.map((remoteSliceModel) => {
+      return Slices.toSM(remoteSliceModel);
+    }),
+  };
+
+  return state;
+}

package/src/features/legacyState/useLegacySliceMachineState.ts

@@ -0,0 +1,7 @@
+import { useRequest } from "@prismicio/editor-support/Suspense";
+
+import { getLegacySliceMachineState } from "./actions/getLegacySliceMachineState";
+
+export function useLegacySliceMachineState() {
+  return useRequest(getLegacySliceMachineState, []);
+}