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

package/src/components/HoverCard/index.ts

@@ -1,7 +1,7 @@
 export {
   HoverCard,
-  HoverCardTitle,
-  HoverCardMedia,
-  HoverCardDescription,
   HoverCardCloseButton,
+  HoverCardDescription,
+  HoverCardMedia,
+  HoverCardTitle,
 } from "./HoverCard";

package/src/components/List/List.css.ts

@@ -50,8 +50,10 @@ export const header = style([
   }),
   {
     selectors: {
-      [`${windowStyles.tabsContent} > ${root} > &:not(:first-child)`]: {
-        marginTop: vars.space[16],
+      ["&:not(:first-child)"]: {
+        borderTopStyle: "solid",
+        borderTopColor: vars.color.greyLight6,
+        borderTopWidth: 1,
       },
     },
   },

package/src/components/PageLayout/PageLayout.module.css

@@ -50,7 +50,7 @@
   width: 288px;
 }
 
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 1011px) {
   .pane {
     width: 80px;
   }

package/src/components/SideNav/SideNav.module.css

@@ -299,7 +299,7 @@
   }
 }
 
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 1011px) {
   .repository {
     align-self: center;
     padding-bottom: 16px;

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

@@ -1,19 +1,19 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { RadarIcon } from "@src/icons/RadarIcon";
-import { LightningIcon } from "@src/icons/Lightning";
+import { LightningIcon } from "@/icons/Lightning";
+import { RadarIcon } from "@/icons/RadarIcon";
 
 import { PageLayout, PageLayoutPane } from "../PageLayout";
 import {
+  RightElement,
   SideNav,
+  SideNavLink,
   SideNavList,
   SideNavListItem,
-  SideNavLink,
-  SideNavSeparator,
   SideNavListTitle,
-  UpdateInfo,
   SideNavRepository,
-  RightElement,
+  SideNavSeparator,
+  UpdateInfo,
 } from "./SideNav";
 import { SideNavEnvironmentSelector } from "./SideNavEnvironmentSelector";
 

package/src/components/SideNav/SideNav.tsx

@@ -1,10 +1,10 @@
-import { useMediaQuery } from "@prismicio/editor-support/React";
-import { Tooltip, breakpoints } from "@prismicio/editor-ui";
-import { clsx } from "clsx";
 import type { UrlObject } from "node:url";
+
+import { Tooltip, useMediaQuery } from "@prismicio/editor-ui";
+import { clsx } from "clsx";
 import {
-  forwardRef,
   type FC,
+  forwardRef,
   type HTMLAttributes,
   type LiHTMLAttributes,
   type MouseEvent,
@@ -13,8 +13,8 @@ import {
   type SVGProps,
 } from "react";
 
-import { LogoIcon } from "@src/icons/LogoIcon";
-import OpenIcon from "@src/icons/OpenIcon";
+import { LogoIcon } from "@/icons/LogoIcon";
+import OpenIcon from "@/icons/OpenIcon";
 
 import { Divider } from "../Divider";
 import styles from "./SideNav.module.css";
@@ -118,9 +118,9 @@ export const SideNavLink: FC<SideNavLinkProps> = ({
   component: Comp = "a",
   ...otherProps
 }) => {
-  const isSmall = useMediaQuery(breakpoints.small);
+  const visible = useMediaQuery({ max: "medium" });
   return (
-    <Tooltip content={title} side="right" visible={isSmall}>
+    <Tooltip content={title} side="right" visible={visible}>
       <Comp {...otherProps} className={styles.link} data-active={active}>
         <Icon className={styles.linkIcon} />
         <div className={styles.linkContent}>

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.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({