slice-machine-ui 1.26.1-beta.9 → 2.0.0

package/src/components/SideNav/SideNavEnvironmentSelector.tsx

@@ -1,6 +1,6 @@
-import { useMediaQuery } from "@prismicio/editor-support/React";
 import {
   Box,
+  Button,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -8,19 +8,18 @@ import {
   DropdownMenuTrigger,
   Icon,
   IconButton,
-  InvisibleButton,
   ProgressCircle,
   Text,
   Tooltip,
-  breakpoints,
+  useMediaQuery,
 } from "@prismicio/editor-ui";
 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 { LoginIcon } from "@src/icons/LoginIcon";
-import { LogoIcon } from "@src/icons/LogoIcon";
+import { LoginIcon } from "@/icons/LoginIcon";
+import { LogoIcon } from "@/icons/LogoIcon";
 
 import styles from "./SideNavEnvironmentSelector.module.css";
 
@@ -47,14 +46,14 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
     onSelect,
   } = props;
 
-  const isSmall = useMediaQuery(breakpoints.small);
+  const collapsed = useMediaQuery({ max: "medium" });
 
   const isProductionEnvironmentActive = activeEnvironment?.kind === "prod";
 
   return (
     <Box alignItems="center" gap={16}>
       <Box position="relative">
-        {isSmall && environments.length > 1 ? (
+        {collapsed && environments.length > 1 ? (
           <EnvironmentDropdownMenu
             activeEnvironment={activeEnvironment}
             disabled={disabled || loading}
@@ -74,7 +73,7 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
           />
         )}
       </Box>
-      {!isSmall && (
+      {!collapsed && (
         <>
           <Box
             flexGrow={1}
@@ -89,10 +88,9 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
             ) : undefined}
 
             {variant === "unauthenticated" ? (
-              <InvisibleButton
-                buttonText="Login required"
-                onClick={onLogInClick}
-              />
+              <Button invisible onClick={onLogInClick}>
+                Login required
+              </Button>
             ) : undefined}
 
             {variant === "offline" ? (

package/src/components/Table/Table.stories.tsx

@@ -8,9 +8,9 @@ import {
 } from "@prismicio/editor-ui";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Table, TableBody, TableHead, TableCell, TableRow } from "./Table";
-import { UniqueIcon } from "../../icons/UniqueIcon";
 import { ReusableIcon } from "../../icons/ReusableIcon";
+import { UniqueIcon } from "../../icons/UniqueIcon";
+import { Table, TableBody, TableCell, TableHead, TableRow } from "./Table";
 
 type Story = StoryObj<typeof meta>;
 

package/src/components/Table/Table.test.tsx

@@ -2,14 +2,14 @@
 
 import { describe, test, vi } from "vitest";
 
+import { render, screen } from "@/../test/__testutils__";
 import {
   Table,
   TableBody,
   TableCell,
   TableHead,
   TableRow,
-} from "@src/components/Table";
-import { render, screen } from "test/__testutils__";
+} from "@/components/Table";
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-return
 vi.mock("next/router", () => require("next-router-mock"));

package/src/components/Table/Table.tsx

@@ -1,12 +1,12 @@
 import { findFocusableAncestor } from "@prismicio/editor-support/DOM";
+import { clsx } from "clsx";
 import {
+  createContext,
   type FC,
   type MouseEventHandler,
   type PropsWithChildren,
-  createContext,
   useContext,
 } from "react";
-import { clsx } from "clsx";
 
 import * as styles from "./Table.css";
 

package/src/components/Table/index.ts

@@ -1 +1 @@
-export { Table, TableHead, TableBody, TableRow, TableCell } from "./Table";
+export { Table, TableBody, TableCell, TableHead, TableRow } from "./Table";

package/src/components/TextLink/TextLink.stories.tsx

@@ -1,7 +1,7 @@
+import { Icon } from "@prismicio/editor-ui";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { TextLink } from "./TextLink";
-import { Icon } from "@prismicio/editor-ui";
 
 type Story = StoryObj<typeof meta>;
 

package/src/components/TextLink/TextLink.tsx

@@ -1,6 +1,6 @@
 import { Text } from "@prismicio/editor-ui";
 import { clsx } from "clsx";
-import { type FC, type ReactNode, cloneElement, isValidElement } from "react";
+import { cloneElement, type FC, isValidElement, type ReactNode } from "react";
 
 import styles from "./TextLink.module.css";
 

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

@@ -1,10 +1,8 @@
-import { describe, expect } from "vitest";
-
 import {
   CustomType,
   DynamicSection,
-  Group,
 } from "@prismicio/types-internal/lib/customtypes";
+import { describe, expect } from "vitest";
 
 import * as CustomTypeModel from "../customType";
 
@@ -507,153 +505,6 @@ describe("CustomTypeModel test suite", () => {
     );
   });
 
-  it("addGroupField should return the given custom type with the group field added", () => {
-    expect(
-      CustomTypeModel.addGroupField({
-        customType: mockCustomType,
-        sectionId: "mainSection",
-        groupFieldId: "groupField",
-        newFieldId: "newFieldId",
-        newField: {
-          config: {
-            label: "NewField",
-          },
-          type: "Boolean",
-        },
-      }),
-    ).toEqual({
-      ...mockCustomType,
-      json: {
-        ...mockCustomType.json,
-        mainSection: {
-          ...mainSection,
-          groupField: {
-            ...mainSection.groupField,
-            config: {
-              ...mainSection.groupField.config,
-              fields: {
-                ...(mainSection.groupField as Group).config?.fields,
-                newFieldId: {
-                  config: {
-                    label: "NewField",
-                  },
-                  type: "Boolean",
-                },
-              },
-            },
-          },
-        },
-      },
-    });
-  });
-
-  it("deleteGroupField should return the given custom type without the group field", () => {
-    expect(
-      CustomTypeModel.deleteGroupField({
-        customType: mockCustomType,
-        sectionId: "mainSection",
-        groupFieldId: "groupField",
-        fieldId: "groupFieldBooleanField",
-      }),
-    ).toEqual({
-      ...mockCustomType,
-      json: {
-        ...mockCustomType.json,
-        mainSection: {
-          ...mainSection,
-          groupField: {
-            ...mainSection.groupField,
-            config: {
-              ...mainSection.groupField.config,
-              fields: {
-                groupFieldTextField: (mainSection.groupField as Group).config
-                  ?.fields?.groupFieldTextField,
-              },
-            },
-          },
-        },
-      },
-    });
-  });
-
-  it("updateGroupField should return the given custom type with the group field updated", () => {
-    expect(
-      CustomTypeModel.updateGroupField({
-        customType: mockCustomType,
-        sectionId: "mainSection",
-        groupFieldId: "groupField",
-        previousFieldId: "groupFieldBooleanField",
-        newFieldId: "newId",
-        newField: {
-          config: {
-            label: "newLabel",
-          },
-          type: "Boolean",
-        },
-      }),
-    ).toEqual({
-      ...mockCustomType,
-      json: {
-        ...mockCustomType.json,
-        mainSection: {
-          ...mainSection,
-          groupField: {
-            ...mainSection.groupField,
-            config: {
-              ...mainSection.groupField.config,
-              fields: {
-                newId: {
-                  config: {
-                    label: "newLabel",
-                  },
-                  type: "Boolean",
-                },
-                groupFieldTextField: (mainSection.groupField as Group).config
-                  ?.fields?.groupFieldTextField,
-              },
-            },
-          },
-        },
-      },
-    });
-  });
-
-  it("reorderGroupField should return the given custom type with the group field reordered", () => {
-    expect(
-      JSON.stringify(
-        CustomTypeModel.reorderGroupField({
-          customType: mockCustomType,
-          sectionId: "mainSection",
-          groupFieldId: "groupField",
-          sourceIndex: 0,
-          destinationIndex: 1,
-        }),
-      ),
-    ).toEqual(
-      JSON.stringify({
-        ...mockCustomType,
-        json: {
-          ...mockCustomType.json,
-          mainSection: {
-            ...mainSection,
-            groupField: {
-              ...mainSection.groupField,
-              config: {
-                ...mainSection.groupField.config,
-                fields: {
-                  groupFieldTextField: (mainSection.groupField as Group).config
-                    ?.fields?.groupFieldTextField,
-                  groupFieldBooleanField: (mainSection.groupField as Group)
-                    .config?.fields?.groupFieldBooleanField,
-                },
-              },
-            },
-          },
-        },
-      }),
-    );
-  });
-
   it("updateSection should return the given custom type with the section updated", () => {
     expect(
       CustomTypeModel.updateSection({
@@ -754,42 +605,6 @@ describe("CustomTypeModel test suite", () => {
     );
   });
 
-  it("getGroupField should return the group field matching the key", () => {
-    expect(
-      CustomTypeModel.getGroupField({
-        customType: mockCustomType,
-        sectionId: "mainSection",
-        groupFieldId: "groupField",
-      }),
-    ).toEqual(mainSection.groupField);
-  });
-
-  it("updateGroupFields should return the updated group fields", () => {
-    expect(
-      CustomTypeModel.updateGroupFields(mainSection.groupField as Group, {
-        groupFieldBooleanField: {
-          config: {
-            label: "GroupFieldBooleanField",
-          },
-          type: "Boolean",
-        },
-      }),
-    ).toEqual({
-      ...mainSection.groupField,
-      config: {
-        ...mainSection.groupField.config,
-        fields: {
-          groupFieldBooleanField: {
-            config: {
-              label: "GroupFieldBooleanField",
-            },
-            type: "Boolean",
-          },
-        },
-      },
-    });
-  });
-
   it("should create a custom type with repeatable true", () => {
     expect(
       CustomTypeModel.create({

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

@@ -0,0 +1,161 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  addFieldToGroup,
+  deleteFieldFromGroup,
+  reorderFieldInGroup,
+  updateFieldInGroup,
+} from "../group";
+
+describe("addFieldToGroup", () => {
+  it("adds a field to a group field", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group();
+    const res = addFieldToGroup({ group, field, fieldId: "field" });
+
+    expect(res.config?.fields?.field).toStrictEqual(field);
+  });
+
+  it("does not mutate the provided group field", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group();
+    const res = addFieldToGroup({ group, field, fieldId: "field" });
+
+    expect(res).not.toBe(group);
+  });
+});
+
+describe("updateFieldInGroup", () => {
+  it("updates an existing field in a group", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field } });
+
+    expect(group.config?.fields?.field).toStrictEqual(field);
+
+    const newField = structuredClone(field);
+    newField.config ??= {};
+    newField.config.placeholder_true = "Placeholder";
+
+    const res = updateFieldInGroup({
+      group,
+      field: newField,
+      previousFieldId: "field",
+      newFieldId: "field",
+    });
+
+    expect(res.config?.fields?.field).toStrictEqual(newField);
+  });
+
+  it("can rename an existing field in a group", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field } });
+
+    expect(group.config?.fields).toStrictEqual({ field });
+
+    const res = updateFieldInGroup({
+      group,
+      field,
+      previousFieldId: "field",
+      newFieldId: "newField",
+    });
+
+    expect(res.config?.fields).toStrictEqual({ newField: field });
+  });
+
+  it("does not make any changes if the field does not exist", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field } });
+
+    expect(group.config?.fields).toStrictEqual({ field });
+
+    const res = updateFieldInGroup({
+      group,
+      field: ctx.createMock.model.boolean(),
+      previousFieldId: "non-existent",
+      newFieldId: "non-existent",
+    });
+
+    expect(res).toStrictEqual(group);
+  });
+
+  it("does not mutate the provided group field", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field } });
+    const res = updateFieldInGroup({
+      group,
+      field,
+      previousFieldId: "field",
+      newFieldId: "field",
+    });
+
+    expect(res).not.toBe(group);
+  });
+});
+
+describe("reorderFieldInGroup", () => {
+  it("reorders a field in a group", (ctx) => {
+    const field1 = ctx.createMock.model.boolean();
+    const field2 = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field1, field2 } });
+
+    expect(Object.keys(group.config?.fields ?? {})).toStrictEqual([
+      "field1",
+      "field2",
+    ]);
+
+    const res = reorderFieldInGroup({
+      group,
+      sourceIndex: 1,
+      destinationIndex: 0,
+    });
+
+    expect(Object.keys(res.config?.fields ?? {})).toStrictEqual([
+      "field2",
+      "field1",
+    ]);
+  });
+
+  it("does not mutate the provided group field", (ctx) => {
+    const field1 = ctx.createMock.model.boolean();
+    const field2 = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field1, field2 } });
+    const res = reorderFieldInGroup({
+      group,
+      sourceIndex: 1,
+      destinationIndex: 0,
+    });
+
+    expect(res).not.toBe(group);
+  });
+});
+
+describe("deleteFieldFromGroup", () => {
+  it("deletes a field from a group", (ctx) => {
+    const field1 = ctx.createMock.model.boolean();
+    const field2 = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field1, field2 } });
+
+    const res = deleteFieldFromGroup({ group, fieldId: "field2" });
+
+    expect(res.config?.fields).toStrictEqual({ field1 });
+  });
+
+  it("does not make any changes if the field does not exist", (ctx) => {
+    const field = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field } });
+
+    const res = deleteFieldFromGroup({ group, fieldId: "non-existent" });
+
+    expect(res).toStrictEqual(group);
+  });
+
+  it("does not mutate the provided group field", (ctx) => {
+    const field1 = ctx.createMock.model.boolean();
+    const field2 = ctx.createMock.model.boolean();
+    const group = ctx.createMock.model.group({ fields: { field1, field2 } });
+
+    const res = deleteFieldFromGroup({ group, fieldId: "field2" });
+
+    expect(res).not.toBe(group);
+  });
+});

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

@@ -1,8 +1,8 @@
-import { it, describe, expect } from "vitest";
 import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { describe, expect, it } from "vitest";
 
-import { Slices } from "@lib/models/common/Slice";
-import { ComponentUI } from "@lib/models/common/ComponentUI";
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { Slices } from "@/legacy/lib/models/common/Slice";
 
 import { deleteRepeatableZone } from "../slice";