slice-machine-ui 1.19.3-dev-environments.5 → 1.19.3-dev-next-release.2

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

@@ -1,31 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

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

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

@@ -1,69 +0,0 @@
-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

@@ -1,163 +0,0 @@
-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/features/environments/actions/getActiveEnvironmentDomain.ts

@@ -1,11 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

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