slice-machine-ui 1.26.1-beta.1 → 1.26.1-beta.10

package/src/components/{Counter/Counter.stories.tsx → Count/Count.stories.tsx}

@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Counter } from "./Counter";
+import { Count } from "./Count";
 
 type Story = StoryObj<typeof meta>;
 
 const meta = {
-  component: Counter,
-} satisfies Meta<typeof Counter>;
+  component: Count,
+} satisfies Meta<typeof Count>;
 
 export default meta;
 

package/src/components/{Counter/Counter.tsx → Count/Count.tsx}

@@ -2,9 +2,9 @@ import { FC, PropsWithChildren } from "react";
 
 import { FlowerBackgroundIcon } from "@src/icons/FlowerBackgroundIcon";
 
-import * as styles from "./Counter.css";
+import styles from "./Count.module.css";
 
-export const Counter: FC<PropsWithChildren> = (props) => {
+export const Count: FC<PropsWithChildren> = (props) => {
   const { children } = props;
 
   return (

package/src/components/Count/index.ts

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

package/src/components/HoverCard/HoverCard.module.css

@@ -0,0 +1,79 @@
+.block {
+  all: unset;
+  box-sizing: border-box;
+  font-family: var(--font-family-body);
+}
+
+.blockWithDisplayRevert {
+  composes: block;
+  display: revert;
+}
+
+.root {
+  composes: blockWithDisplayRevert;
+  width: 288px;
+}
+
+.title {
+  composes: block;
+  align-items: center;
+  border-bottom-style: solid;
+  border-color: var(--grey6);
+  border-width: 1px;
+  color: var(--grey12);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  padding-bottom: 4px;
+  padding-left: 16px;
+  padding-right: 6px;
+  padding-top: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.titleCloseIcon {
+  composes: block;
+  color: var(--grey11);
+  display: flex;
+  padding: 4px;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.mediaContainer {
+  composes: block;
+  display: flex;
+  margin-bottom: 8px;
+  padding-inline: 16px;
+}
+
+.media {
+  composes: blockWithDisplayRevert;
+  border-color: var(--grey6);
+  border-radius: 6px;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  width: 100%;
+  height: 146px;
+}
+
+.description {
+  composes: blockWithDisplayRevert;
+  color: var(--grey11);
+  margin-bottom: 16px;
+  padding-inline: 16px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.closeButtonContainer {
+  composes: blockWithDisplayRevert;
+  padding-bottom: 16px;
+  padding-inline: 16px;
+}

package/src/components/HoverCard/HoverCard.module.css.d.ts

@@ -0,0 +1,13 @@
+declare const styles: {
+  readonly "block": string;
+  readonly "blockWithDisplayRevert": string;
+  readonly "closeButtonContainer": string;
+  readonly "description": string;
+  readonly "media": string;
+  readonly "mediaContainer": string;
+  readonly "root": string;
+  readonly "title": string;
+  readonly "titleCloseIcon": string;
+};
+export = styles;
+

package/src/components/HoverCard/HoverCard.tsx

@@ -17,7 +17,7 @@ import { useDelayedAction } from "@src/hooks/useDelayedAction";
 import { CloseIcon } from "@src/icons/CloseIcon";
 
 import { BaseHoverCard, type BaseHoverCardProps } from "../BaseHoverCard";
-import * as styles from "./HoverCard.css";
+import styles from "./HoverCard.module.css";
 
 type HoverCardProps = PropsWithChildren<{
   align?: BaseHoverCardProps["align"];

package/src/components/TextLink/TextLink.module.css

@@ -0,0 +1,58 @@
+.root {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  &:focus-visible {
+    outline: none;
+    text-decoration-line: underline;
+  }
+}
+
+.color-primary {
+  color: var(--purple9);
+
+  &:hover {
+    color: var(--purple8);
+  }
+
+  &:active {
+    color: var(--purple9);
+  }
+}
+
+.color-secondary {
+  color: var(--indigo11);
+
+  &:hover {
+    color: var(--indigo10);
+  }
+
+  &:active {
+    color: var(--indigo11);
+  }
+}
+
+.endIcon {
+  padding-left: 4px;
+}
+
+.icon-normal {
+  font-size: 1.2rem;
+  width: 18px;
+  height: 18px;
+}
+
+.icon-smallBold {
+  font-size: 1rem;
+  width: 16px;
+  height: 16px;
+}
+
+.icon-inherit {
+  font-family: inherit;
+  font-size: inherit;
+  width: inherit;
+  height: inherit;
+}

package/src/components/TextLink/TextLink.module.css.d.ts

@@ -0,0 +1,11 @@
+declare const styles: {
+  readonly "color-primary": string;
+  readonly "color-secondary": string;
+  readonly "endIcon": string;
+  readonly "icon-inherit": string;
+  readonly "icon-normal": string;
+  readonly "icon-smallBold": string;
+  readonly "root": string;
+};
+export = styles;
+

package/src/components/TextLink/TextLink.tsx

@@ -2,7 +2,7 @@ import { Text } from "@prismicio/editor-ui";
 import { clsx } from "clsx";
 import { type FC, type ReactNode, cloneElement, isValidElement } from "react";
 
-import * as styles from "./TextLink.css";
+import styles from "./TextLink.module.css";
 
 type IconProps = Readonly<{
   className?: string;
@@ -10,7 +10,7 @@ type IconProps = Readonly<{
 
 interface TextLinkProps {
   children: string;
-  color?: keyof typeof styles.colorVariant;
+  color?: "primary" | "secondary";
   endIcon?: ReactNode;
   href: string;
   textVariant?: "normal" | "smallBold" | "inherit";
@@ -32,7 +32,7 @@ export const TextLink: FC<TextLinkProps> = (props) => {
       target="_blank"
       rel="noreferrer"
       {...otherProps}
-      className={clsx(styles.root, styles.colorVariant[color])}
+      className={clsx(styles.root, styles[`color-${color}`])}
     >
       <Text component="span" color="inherit" variant={textVariant}>
         {children}
@@ -42,7 +42,7 @@ export const TextLink: FC<TextLinkProps> = (props) => {
             className: clsx(
               endIcon.props.className,
               styles.endIcon,
-              styles.iconVariant[textVariant],
+              styles[`icon-${textVariant}`],
             ),
           })
         : null}

package/src/domain/__tests__/slice.test.ts

@@ -0,0 +1,41 @@
+import { it, describe, expect } from "vitest";
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+
+import { Slices } from "@lib/models/common/Slice";
+import { ComponentUI } from "@lib/models/common/ComponentUI";
+
+import { deleteRepeatableZone } from "../slice";
+
+describe("deleteRepeatableZone", () => {
+  it("removes the `items` property from a specific variation within a slice", (ctx) => {
+    const variation = ctx.createMock.model.sharedSliceVariation({
+      itemsFields: { foo: ctx.createMock.model.boolean() },
+    });
+    const model = ctx.createMock.model.sharedSlice({ variations: [variation] });
+    const slice = buildMockSliceComponentUI(model);
+
+    const res = deleteRepeatableZone({ slice, variationId: variation.id });
+    expect(res.model.variations[0].items).toBeUndefined();
+  });
+
+  it("does nothing if the variation does not exist", (ctx) => {
+    const model = ctx.createMock.model.sharedSlice();
+    const slice = buildMockSliceComponentUI(model);
+
+    const res = deleteRepeatableZone({ slice, variationId: "non-existent" });
+    expect(res).toStrictEqual(slice);
+  });
+});
+
+function buildMockSliceComponentUI(model: SharedSlice): ComponentUI {
+  return {
+    model: Slices.toSM(model),
+    extension: "extension",
+    fileName: "fileName",
+    from: "from",
+    href: "href",
+    mocks: [],
+    pathToSlice: "pathToSlice",
+    screenshots: {},
+  };
+}

package/src/domain/slice.ts

@@ -48,6 +48,11 @@ type ReorderFieldArgs = {
   destinationIndex: number;
 };
 
+type DeleteRepeatableZoneArgs = {
+  slice: ComponentUI;
+  variationId: string;
+};
+
 const DEFAULT_VARIATION_ID = "default";
 
 export function countMissingScreenshots(slice: ComponentUI): number {
@@ -281,3 +286,23 @@ export function rename(slice: ComponentUI, newSliceName: string): ComponentUI {
     },
   };
 }
+
+export function deleteRepeatableZone(args: DeleteRepeatableZoneArgs) {
+  const { slice, variationId } = args;
+
+  return {
+    ...slice,
+    model: {
+      ...slice.model,
+      variations: slice.model.variations.map((v) => {
+        if (v.id === variationId) {
+          const newVariation = { ...v };
+          delete newVariation.items;
+
+          return newVariation;
+        }
+        return v;
+      }),
+    },
+  };
+}

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

@@ -89,10 +89,9 @@ describe.each(formats)(
       // Submit the form
       await user.click(screen.getByRole("button", { name: "Rename" }));
 
-      const folder =
-        customType.format === "page" ? "Page types" : "Custom types";
+      const breadcrumb = screen.getByLabelText("Breadcrumb");
       expect(
-        screen.getByTestId(`breadcrumb-${folder}-${renamedCustomType}`),
+        await within(breadcrumb).findByText(renamedCustomType),
       ).toBeVisible();
     });
   },
@@ -178,10 +177,10 @@ async function renderCustomTypesBuilderPage({
   const renderResults = render(<CustomTypesBuilderPage />, customTypeMockStore);
 
   const folder = customType.format === "page" ? "Page types" : "Custom types";
-  const breadcrumb = await screen.findByTestId(
-    `breadcrumb-${folder}-${customType.label as string}`,
+  const breadcrumb = await screen.findByLabelText("Breadcrumb");
+  expect(breadcrumb).toHaveTextContent(
+    `${folder}/${customType.label as string}`,
   );
-  expect(breadcrumb).toBeVisible();
 
   return renderResults;
 }

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

@@ -26,6 +26,7 @@ import { CUSTOM_TYPES_MESSAGES } from "../customTypesMessages";
 import { EditDropdown } from "../EditDropdown";
 import { PageSnippetDialog } from "./PageSnippetDialog";
 import { CustomTypeProvider } from "./CustomTypeProvider";
+import { BreadcrumbItem } from "@src/components/Breadcrumb";
 
 export const CustomTypesBuilderPage: FC = () => {
   const router = useRouter();
@@ -87,10 +88,14 @@ const CustomTypesBuilderPageWithProvider: React.FC<
             <>
               <AppLayoutHeader>
                 <AppLayoutBackButton url={config.tablePagePathname} />
-                <AppLayoutBreadcrumb
-                  folder={messages.name({ start: true, plural: true })}
-                  page={customType.label ?? customType.id}
-                />
+                <AppLayoutBreadcrumb>
+                  <BreadcrumbItem>
+                    {messages.name({ start: true, plural: true })}
+                  </BreadcrumbItem>
+                  <BreadcrumbItem active>
+                    {customType.label ?? customType.id}
+                  </BreadcrumbItem>
+                </AppLayoutBreadcrumb>
                 <AppLayoutActions>
                   <AutoSaveStatusIndicator status={actionQueueStatus} />
                   {customType.format === "page" ? (

package/src/features/customTypes/customTypesTable/CustomTypesTablePage.tsx

@@ -20,6 +20,7 @@ import { ErrorBoundary } from "@src/ErrorBoundary";
 import type { CustomTypeFormat } from "@slicemachine/manager";
 
 import { CustomTypesTable } from "./CustomTypesTable";
+import { BreadcrumbItem } from "@src/components/Breadcrumb";
 
 type CustomTypesTablePageProps = {
   format: CustomTypeFormat;
@@ -61,12 +62,11 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
           fallback={
             <AppLayout>
               <AppLayoutHeader>
-                <AppLayoutBreadcrumb
-                  folder={customTypesMessages.name({
-                    start: true,
-                    plural: true,
-                  })}
-                />
+                <AppLayoutBreadcrumb>
+                  <BreadcrumbItem>
+                    {customTypesMessages.name({ start: true, plural: true })}
+                  </BreadcrumbItem>
+                </AppLayoutBreadcrumb>
                 <AppLayoutActions>
                   <Button disabled startIcon="add">
                     Create
@@ -81,12 +81,11 @@ export const CustomTypesTablePage: FC<CustomTypesTablePageProps> = ({
         >
           <AppLayout>
             <AppLayoutHeader>
-              <AppLayoutBreadcrumb
-                folder={customTypesMessages.name({
-                  start: true,
-                  plural: true,
-                })}
-              />
+              <AppLayoutBreadcrumb>
+                <BreadcrumbItem>
+                  {customTypesMessages.name({ start: true, plural: true })}
+                </BreadcrumbItem>
+              </AppLayoutBreadcrumb>
               <AppLayoutActions>
                 <Button
                   data-testid="create-ct"

package/src/features/inAppGuide/InAppGuideDialog.tsx

@@ -11,7 +11,7 @@ import {
   Video,
 } from "@prismicio/editor-ui";
 
-import { Counter } from "@src/components/Counter";
+import { Count } from "@src/components/Count";
 import { HelpIcon } from "@src/icons/HelpIcon";
 import { useIsEmptyProject } from "@src/hooks/useIsEmptyProject";
 
@@ -67,7 +67,7 @@ export const InAppGuideDialog: FC = () => {
             <Box key={index} flexDirection="column">
               <Box flexDirection="column" padding={16} gap={8}>
                 <Box alignItems="center" gap={8}>
-                  <Counter>{index + 1}</Counter>
+                  <Count>{index + 1}</Count>
                   <Text component="h3" variant="bold">
                     {content.title}
                   </Text>

package/src/features/labs/labsList/LabsPage.tsx

@@ -11,6 +11,7 @@ import {
 import { ErrorBoundary } from "@src/ErrorBoundary";
 
 import { LabsList } from "./LabsList";
+import { BreadcrumbItem } from "@src/components/Breadcrumb";
 
 export const LabsPage: FC = () => {
   return (
@@ -58,7 +59,9 @@ const LabsPageLayout: FC<LabsPageLayoutProps> = ({
   <AppLayout>
     {withHeader ? (
       <AppLayoutHeader>
-        <AppLayoutBreadcrumb folder="Labs" />
+        <AppLayoutBreadcrumb>
+          <BreadcrumbItem>Labs</BreadcrumbItem>
+        </AppLayoutBreadcrumb>
       </AppLayoutHeader>
     ) : null}
     <AppLayoutContent>{children}</AppLayoutContent>

package/src/features/settings/SettingsPage.tsx

@@ -11,6 +11,7 @@ import {
 } from "@components/AppLayout";
 import { ConnectGitRepository } from "@src/features/settings/git/ConnectGitRepository";
 import { useGitIntegrationExperiment } from "@src/features/settings/git/useGitIntegrationExperiment";
+import { BreadcrumbItem } from "@src/components/Breadcrumb";
 
 export const SettingsPage: FC = () => {
   const gitIntegrationExperiment = useGitIntegrationExperiment();
@@ -34,7 +35,9 @@ export const SettingsPage: FC = () => {
       </Head>
       <AppLayout>
         <AppLayoutHeader>
-          <AppLayoutBreadcrumb folder="Settings" />
+          <AppLayoutBreadcrumb>
+            <BreadcrumbItem>Settings</BreadcrumbItem>
+          </AppLayoutBreadcrumb>
         </AppLayoutHeader>
         <AppLayoutContent>
           <Box flexDirection="column" maxWidth={600}>

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewSliceDialog.tsx

@@ -19,7 +19,7 @@ import { getRemoteSlices } from "@src/modules/slices";
 import { pascalize } from "@lib/utils/str";
 import { validateSliceModalValues as validateAsNewSliceValues } from "@components/Forms/formsValidator";
 
-import * as styles from "./ConvertLegacySliceButton.css";
+import styles from "./ConvertLegacySliceButton.module.css";
 import { DialogProps } from "./types";
 
 export const ConvertLegacySliceAsNewSliceDialog: FC<DialogProps> = ({

package/src/features/slices/convertLegacySlice/ConvertLegacySliceAsNewVariationDialog.tsx

@@ -16,7 +16,7 @@ import {
 
 import { LibraryUI } from "@models/common/LibraryUI";
 
-import * as styles from "./ConvertLegacySliceButton.css";
+import styles from "./ConvertLegacySliceButton.module.css";
 import { DialogProps } from "./types";
 
 type FormValues = {

package/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.module.css

@@ -0,0 +1,14 @@
+.scrollArea {
+  width: 448px;
+  height: 100%;
+  display: flex;
+  gap: 8px;
+  padding-inline: 16px;
+  padding-block: 16px;
+}
+
+.label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}

package/src/features/slices/convertLegacySlice/ConvertLegacySliceButton.module.css.d.ts

@@ -0,0 +1,6 @@
+declare const styles: {
+  readonly "label": string;
+  readonly "scrollArea": string;
+};
+export = styles;
+

package/src/features/slices/convertLegacySlice/ConvertLegacySliceMergeWithIdenticalDialog.tsx

@@ -12,7 +12,7 @@ import {
   SelectItem,
 } from "@prismicio/editor-ui";
 
-import * as styles from "./ConvertLegacySliceButton.css";
+import styles from "./ConvertLegacySliceButton.module.css";
 import { DialogProps } from "./types";
 
 export const ConvertLegacySliceMergeWithIdenticalDialog: FC<DialogProps> = ({
@@ -48,10 +48,7 @@ export const ConvertLegacySliceMergeWithIdenticalDialog: FC<DialogProps> = ({
             return (
               <form id="convert-legacy-slice-merge-with-identical-dialog">
                 <Box display="flex" flexDirection="column">
-                  <ScrollArea
-                    className={styles.scrollArea}
-                    style={{ width: 448 }}
-                  >
+                  <ScrollArea className={styles.scrollArea}>
                     <Text variant="normal" color="grey11">
                       If you have multiple identical slices, you can merge them.
                       All of your content will be remapped to the target slice.

package/src/features/slices/sliceBuilder/useGroupsInSlicesExperiment.ts

@@ -0,0 +1,8 @@
+import { useExperimentVariant } from "@src/hooks/useExperimentVariant";
+
+type UseGitIntegrationExperimentReturnType = { eligible: boolean };
+
+export function useGroupsInSlicesExperiment(): UseGitIntegrationExperimentReturnType {
+  const variant = useExperimentVariant("slicemachine-groups-in-slices");
+  return { eligible: variant?.value === "on" };
+}

package/test/__setup__.ts

@@ -3,6 +3,7 @@ import fetch, { Blob, File, Headers, Request, Response } from "node-fetch";
 import { FormData } from "formdata-polyfill/esm.min";
 import { setupServer, SetupServer } from "msw/node";
 import { cleanup } from "@testing-library/react";
+import { createMockFactory, MockFactory } from "@prismicio/mock";
 import * as fs from "node:fs/promises";
 import * as path from "node:path";
 import * as os from "node:os";
@@ -17,6 +18,7 @@ import { createTestProject } from "./__testutils__/createTestProject";
 declare module "vitest" {
   export interface TestContext {
     msw: SetupServer;
+    createMock: MockFactory;
   }
 }
 
@@ -28,6 +30,7 @@ beforeAll(() => {
 
 beforeEach(async (ctx) => {
   ctx.msw = mswServer;
+  ctx.createMock = createMockFactory({ seed: ctx.task.id });
 
   const adapter = createTestPlugin();
   const cwd = await createTestProject({ adapter });

package/components/Forms/RenameVariationModal/RenameVariationModal.css.ts

@@ -1,7 +0,0 @@
-import { sprinkles } from "@prismicio/editor-ui";
-
-export const label = sprinkles({
-  display: "inline-flex",
-  alignItems: "center",
-  gap: 4,
-});

package/components/Navigation/index.css.ts

@@ -1,5 +0,0 @@
-import { sprinkles } from "@prismicio/editor-ui";
-
-export const environmentDivider = sprinkles({
-  marginBlock: 16,
-});