slice-machine-ui 1.26.1-beta.2 → 1.26.1-beta.21

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.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,8 +1,8 @@
 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 * 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__/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

@@ -0,0 +1,41 @@
+import { SharedSlice } from "@prismicio/types-internal/lib/customtypes";
+import { describe, expect, it } from "vitest";
+
+import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
+import { Slices } from "@/legacy/lib/models/common/Slice";
+
+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: {},
+  };
+}