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

package/src/components/Card/Card.stories.tsx

@@ -9,9 +9,9 @@ import {
 } from "@prismicio/editor-ui";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { AddPhotoAlternateIcon } from "@src/icons/AddPhotoAlternateIcon";
-import { ArrowDropDownIcon } from "@src/icons/ArrowDropDownIcon";
-import { SyncAltIcon } from "@src/icons/SyncAltIcon";
+import { AddPhotoAlternateIcon } from "@/icons/AddPhotoAlternateIcon";
+import { ArrowDropDownIcon } from "@/icons/ArrowDropDownIcon";
+import { SyncAltIcon } from "@/icons/SyncAltIcon";
 
 import { Card, CardActions, CardFooter, CardMedia, CardStatus } from "./Card";
 

package/src/components/Card/Card.tsx

@@ -1,8 +1,10 @@
+import type { UrlObject } from "node:url";
+
 import { findFocusableAncestor } from "@prismicio/editor-support/DOM";
 import { Text } from "@prismicio/editor-ui";
 import { clsx } from "clsx";
-import type { UrlObject } from "node:url";
 import {
+  createElement,
   type CSSProperties,
   type FC,
   type HTMLAttributes,
@@ -10,7 +12,6 @@ import {
   type MouseEvent,
   type PropsWithChildren,
   type ReactNode,
-  createElement,
 } from "react";
 
 import * as styles from "./Card.css";

package/src/components/CodeBlock/CodeBlock.module.css

@@ -0,0 +1,46 @@
+.block {
+  all: unset;
+  box-sizing: border-box;
+  font-family: var(--font-family-body);
+}
+
+.blockWithDisplayRevert {
+  composes: block;
+  display: revert;
+}
+
+.root {
+  composes: blockWithDisplayRevert;
+  border-width: 1px;
+  border-radius: 6px;
+  border-style: solid;
+  border-color: var(--grey6);
+}
+
+.header {
+  composes: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top-right-radius: 4px;
+  border-top-left-radius: 4px;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  background-color: var(--grey2);
+  border-bottom-color: var(--grey6);
+  padding-block: 4px;
+  padding-right: 4px;
+}
+
+.fileInfo {
+  composes: block;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.fileName {
+  composes: blockWithDisplayRevert;
+  font-size: calc(14rem / 16);
+  line-height: calc(32rem / 16);
+}

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

@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly "block": string;
+  readonly "blockWithDisplayRevert": string;
+  readonly "fileInfo": string;
+  readonly "fileName": string;
+  readonly "header": string;
+  readonly "root": string;
+};
+export = styles;
+

package/src/components/CodeBlock/CodeBlock.tsx

@@ -1,17 +1,17 @@
 import { IconButton, Text } from "@prismicio/editor-ui";
 import { type ReactNode, useEffect, useState } from "react";
 import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
-import tsx from "react-syntax-highlighter/dist/cjs/languages/prism/tsx";
 import markup from "react-syntax-highlighter/dist/cjs/languages/prism/markup";
+import tsx from "react-syntax-highlighter/dist/cjs/languages/prism/tsx";
 import { prism } from "react-syntax-highlighter/dist/cjs/styles/prism";
 
-import { CodeIcon } from "@src/icons/CodeIcon";
-import { JavaScript } from "@src/icons/JavaScript";
-import { TypeScript } from "@src/icons/TypeScript";
-import { Vue } from "@src/icons/Vue";
-import { Svelte } from "@src/icons/Svelte";
+import { CodeIcon } from "@/icons/CodeIcon";
+import { JavaScript } from "@/icons/JavaScript";
+import { Svelte } from "@/icons/Svelte";
+import { TypeScript } from "@/icons/TypeScript";
+import { Vue } from "@/icons/Vue";
 
-import * as styles from "./CodeBlock.css";
+import styles from "./CodeBlock.module.css";
 
 SyntaxHighlighter.registerLanguage("tsx", tsx);
 SyntaxHighlighter.registerLanguage("markup", markup);

package/src/components/ContentTabs/ContentTabs.module.css

@@ -0,0 +1,60 @@
+.flex {
+  all: unset;
+  display: flex;
+}
+
+.column {
+  composes: flex;
+  flex-direction: column;
+}
+
+.root {
+  composes: column;
+  background-color: var(--grey1);
+  min-height: 0;
+}
+
+.list {
+  composes: flex;
+  border-bottom: 1px solid var(--grey5);
+  padding-inline: 16px;
+}
+
+.trigger {
+  composes: column;
+  color: var(--grey11);
+  cursor: pointer;
+  padding-block: 8px;
+
+  &:not(:last-child) {
+    margin-right: 16px;
+  }
+
+  &[data-state="active"] {
+    /* stylelint-disable declaration-property-value-allowed-list -- very specific box shadow for this component */
+    box-shadow:
+      inset 0 -1px 0 0 currentColor,
+      0 1px 0 0 currentColor;
+    /* stylelint-end declaration-property-value-allowed-list */
+    color: var(--purple9);
+  }
+}
+
+.triggerText {
+  line-height: 32px;
+}
+
+.content {
+  composes: column;
+  min-height: 0;
+  outline: none;
+  flex: 1;
+
+  &[data-state="inactive"] {
+    display: none;
+  }
+}
+
+.scrollArea {
+  padding: 16px;
+}

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

@@ -0,0 +1,12 @@
+declare const styles: {
+  readonly "column": string;
+  readonly "content": string;
+  readonly "flex": string;
+  readonly "list": string;
+  readonly "root": string;
+  readonly "scrollArea": string;
+  readonly "trigger": string;
+  readonly "triggerText": string;
+};
+export = styles;
+

package/src/components/ContentTabs/ContentTabs.tsx

@@ -1,8 +1,8 @@
+import { ScrollArea, Text } from "@prismicio/editor-ui";
 import * as Tabs from "@radix-ui/react-tabs";
 import type { CSSProperties, FC, ReactNode } from "react";
-import { ScrollArea, Text } from "@prismicio/editor-ui";
 
-import * as styles from "./ContentTabs.css";
+import styles from "./ContentTabs.module.css";
 
 type ContentTabsProps = {
   style?: CSSProperties;

package/src/components/Count/Count.tsx

@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren } from "react";
 
-import { FlowerBackgroundIcon } from "@src/icons/FlowerBackgroundIcon";
+import { FlowerBackgroundIcon } from "@/icons/FlowerBackgroundIcon";
 
 import styles from "./Count.module.css";
 

package/src/components/Divider/Divider.module.css

@@ -0,0 +1,23 @@
+.base {
+  width: 100%;
+  border-style: none;
+  margin: 0px;
+}
+
+.variant-dashed {
+  composes: base;
+  border-color: currentColor;
+  border-top-style: dashed;
+  border-width: 1px;
+}
+
+.variant-edgeFaded {
+  composes: base;
+  height: 1px;
+  background-image: linear-gradient(
+    to right,
+    color-mix(in srgb, currentColor, transparent 100%),
+    currentColor,
+    color-mix(in srgb, currentColor, transparent 100%)
+  );
+}

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

@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly "base": string;
+  readonly "variant-dashed": string;
+  readonly "variant-edgeFaded": string;
+};
+export = styles;
+

package/src/components/Divider/Divider.stories.tsx

@@ -1,8 +1,7 @@
+import { theme } from "@prismicio/editor-ui";
 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>;
 
@@ -11,11 +10,11 @@ const meta = {
   argTypes: {
     variant: {
       control: { type: "select" },
-      options: Object.keys(variants),
+      options: ["dashed", "edgeFaded"],
     },
     color: {
       control: { type: "select" },
-      options: Object.keys(colors),
+      options: Object.keys(theme.color),
     },
   },
 } satisfies Meta<typeof Divider>;

package/src/components/Divider/Divider.tsx

@@ -1,11 +1,11 @@
-import { colors, sprinkles } from "@prismicio/editor-ui";
+import { theme } from "@prismicio/editor-ui";
 import { clsx } from "clsx";
 import type { FC } from "react";
 
-import * as styles from "./Divider.css";
+import styles from "./Divider.module.css";
 
 type DividerProps = {
-  color?: keyof typeof colors;
+  color?: keyof typeof theme.color;
   variant?: "dashed" | "edgeFaded";
   className?: string;
 };
@@ -15,11 +15,8 @@ export const Divider: FC<DividerProps> = (props) => {
 
   return (
     <hr
-      className={clsx(
-        styles.variants[variant],
-        sprinkles({ color: colors[color] }),
-        className,
-      )}
+      className={clsx(styles[`variant-${variant}`], className)}
+      style={{ color: theme.color[color] }}
     />
   );
 };

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.stories.tsx

@@ -1,12 +1,13 @@
+import { Button } from "@prismicio/editor-ui";
 import type { Meta, StoryObj } from "@storybook/react";
+
 import {
   HoverCard,
-  HoverCardDescription,
   HoverCardCloseButton,
+  HoverCardDescription,
   HoverCardMedia,
   HoverCardTitle,
 } from "./HoverCard";
-import { Button } from "@prismicio/editor-ui";
 
 const meta = {
   component: HoverCard,

package/src/components/HoverCard/HoverCard.test.tsx

@@ -1,8 +1,8 @@
 // @vitest-environment jsdom
 import React from "react";
-import { describe, test, expect, vi } from "vitest";
+import { describe, expect, test, vi } from "vitest";
 
-import { screen, render, waitFor } from "../../../test/__testutils__";
+import { render, screen, waitFor } from "../../../test/__testutils__";
 import { HoverCard, HoverCardCloseButton } from ".";
 
 vi.mock("next/router", () => import("next-router-mock"));

package/src/components/HoverCard/HoverCard.tsx

@@ -13,11 +13,11 @@ import {
   type VideoHTMLAttributes,
 } from "react";
 
-import { useDelayedAction } from "@src/hooks/useDelayedAction";
-import { CloseIcon } from "@src/icons/CloseIcon";
+import { useDelayedAction } from "@/hooks/useDelayedAction";
+import { CloseIcon } from "@/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/HoverCard/index.ts

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

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";