slice-machine-ui 1.15.1-dev-next-release.0 → 1.15.1-dev-next-release.2

package/src/components/Card/Card.css.ts

@@ -0,0 +1,182 @@
+import { colors, selectors, sprinkles, vars } from "@prismicio/editor-ui";
+import { style, styleVariants } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+
+const flex = sprinkles({ all: "unset", display: "flex" });
+
+const column = style([flex, sprinkles({ flexDirection: "column" })]);
+
+export const root = style([
+  column,
+  sprinkles({
+    borderColor: colors.grey6,
+    borderRadius: 6,
+    borderStyle: "solid",
+    borderWidth: 1,
+    boxSizing: "border-box",
+    overflowX: "hidden",
+    position: "relative",
+  }),
+]);
+
+export const size = styleVariants({
+  small: { height: "240px" },
+  medium: { height: "320px" },
+});
+
+export const variant = styleVariants({
+  solid: [sprinkles({ backgroundColor: colors.grey3 })],
+  outlined: [sprinkles({ backgroundColor: colors.grey2 })],
+});
+
+export const interactive = style({
+  ":focus-visible": { boxShadow: "0px 0px 0px 4px hsla(251, 63%, 63%, 0.1)" },
+  selectors: {
+    "&[data-disabled]": { opacity: vars.opacity["50%"] },
+    "&:not([data-disabled])": { cursor: vars.cursor.pointer },
+  },
+});
+
+export const interactiveVariant = {
+  solid: sprinkles({
+    backgroundColor: selectors.focusVisible(colors.grey5),
+    borderColor: {
+      ...selectors.checked(colors.purple10),
+      ...selectors.focusVisible(colors.purple10),
+    },
+  }),
+  outlined: sprinkles({
+    backgroundColor: {
+      ...selectors.active(colors.grey4),
+      ...selectors.focusVisible(colors.grey1),
+      ...selectors.hover(colors.grey4),
+    },
+    borderColor: {
+      ...selectors.active(colors.purple9),
+      ...selectors.checked(colors.purple8),
+      ...selectors.focusVisible(colors.purple8),
+    },
+  }),
+};
+
+export const media = style([
+  column,
+  sprinkles({ flexBasis: 0, flexGrow: 1, minHeight: 0, position: "relative" }),
+  {
+    order: 0,
+    selectors: {
+      [`${variant.solid} > &`]: {
+        padding: calc.subtract(vars.space[32], vars.borderWidth[1]),
+      },
+      [`${variant.outlined} > &`]: {
+        backgroundColor: vars.color.greyLight3,
+        marginInline: calc.subtract(vars.space[16], vars.borderWidth[1]),
+        marginTop: calc.subtract(vars.space[16], vars.borderWidth[1]),
+        padding: vars.space[16],
+      },
+    },
+  },
+]);
+
+const grid = sprinkles({ all: "unset", display: "grid" });
+
+export const mediaComponent = styleVariants({
+  div: [grid, sprinkles({ flexGrow: 1 })],
+  img: [
+    sprinkles({ height: "100%", objectFit: "contain" }),
+    { selectors: { "&:not([src])": { visibility: "hidden" } } },
+  ],
+});
+
+export const mediaOverlay = style([
+  grid,
+  sprinkles({ inset: 0, position: "absolute", visibility: "hidden" }),
+  {
+    "::before": {
+      backgroundColor: vars.color.greyLight12,
+      content: "",
+      inset: vars.space[0],
+      opacity: vars.opacity["10%"],
+      position: "absolute",
+    },
+    selectors: {
+      [`${interactive}:focus-visible &, ${interactive}:not([data-disabled]) ${media}:hover > &`]:
+        { visibility: "visible" },
+      [`${interactive}:not([data-disabled]) &:has(:focus-visible)`]: {
+        visibility: "visible",
+      },
+    },
+  },
+]);
+
+const nonMedia = style([
+  flex,
+  sprinkles({
+    alignItems: "center",
+    boxSizing: "border-box",
+    flexDirection: "row",
+  }),
+  {
+    selectors: {
+      [`${variant.solid} > &`]: { backgroundColor: vars.color.greyLight1 },
+      [`${variant.solid} > &:not(:first-child)`]: {
+        borderTopColor: vars.color.greyLight6,
+        borderTopStyle: "inherit",
+        borderTopWidth: "inherit",
+      },
+    },
+  },
+]);
+
+export const actions = style([
+  nonMedia,
+  sprinkles({ height: 48, justifyContent: "space-between" }),
+  {
+    order: 1,
+    selectors: {
+      [`${variant.solid} > &`]: {
+        paddingLeft: calc.subtract(vars.space[12], vars.borderWidth[1]),
+        paddingRight: calc.subtract(vars.space[8], vars.borderWidth[1]),
+      },
+      [`${variant.outlined} > &`]: {
+        paddingInline: calc.subtract(vars.space[16], vars.borderWidth[1]),
+      },
+    },
+  },
+]);
+
+export const footer = style([
+  nonMedia,
+  sprinkles({ gap: 8, height: 60 }),
+  {
+    order: 2,
+    selectors: {
+      [`${variant.solid} > &`]: {
+        paddingInline: calc.subtract(vars.space[12], vars.borderWidth[1]),
+      },
+      [`${variant.outlined} > &`]: {
+        paddingInline: calc.subtract(vars.space[16], vars.borderWidth[1]),
+      },
+    },
+  },
+]);
+
+export const footerTexts = style([
+  column,
+  sprinkles({ flexBasis: 0, flexGrow: 1, minWidth: 0 }),
+  // Offset `title` and `subtitle` so that they are centered vertically despite
+  // having different line heights.
+  { marginBottom: `calc((${24 / 16}rem - ${16 / 16}rem) / 2)` },
+]);
+
+export const status = style([
+  column,
+  sprinkles({
+    height: 24,
+    insetInline: 0,
+    justifyContent: "center",
+    paddingInline: 8,
+    position: "absolute",
+  }),
+  { backgroundColor: "hsl(251, 91%, 95%)", color: "hsl(250, 43%, 48%)" },
+]);

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

@@ -0,0 +1,166 @@
+import {
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  IconButton,
+  Text,
+  tokens,
+} 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 { Card, CardActions, CardFooter, CardMedia, CardStatus } from "./Card";
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  component: Card,
+  argTypes: {
+    checked: { if: { arg: "interactive" } },
+    children: { control: { disable: true } },
+    component: { control: { disable: true }, if: { arg: "interactive" } },
+    disabled: { if: { arg: "interactive" } },
+    href: { if: { arg: "interactive" } },
+    onClick: { if: { arg: "interactive" } },
+    size: { control: "select", options: ["small", "medium"] },
+    variant: { control: "select", options: ["solid", "outlined"] },
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    children: (
+      <>
+        <CardMedia overlay={<></>} />
+        <CardActions />
+        <CardFooter
+          action={<Button variant="secondary">Action</Button>}
+          subtitle="Subtitle"
+          title="Title"
+        />
+        <CardStatus />
+      </>
+    ),
+    interactive: false,
+    size: "medium",
+    variant: "solid",
+  },
+} satisfies Story;
+
+export const SolidWithImg = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <CardMedia
+          overlay={
+            <Box alignItems="center" justifyContent="center">
+              <Button
+                renderStartIcon={() => (
+                  <AddPhotoAlternateIcon color={tokens.color.greyLight11} />
+                )}
+                variant="secondary"
+              >
+                Update screenshot
+              </Button>
+            </Box>
+          }
+          src="https://images.unsplash.com/photo-1588315029754-2dd089d39a1a?w=512"
+        />
+        <CardFooter
+          action={<IconButton icon="close" />}
+          subtitle="Default • Edited 19 minutes ago"
+          title="Hello"
+        />
+        <CardStatus>Missing screenshot</CardStatus>
+      </>
+    ),
+    interactive: true,
+    style: { width: "448px" },
+  },
+  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
+} satisfies Story;
+
+export const SolidWithDiv = {
+  args: {
+    ...SolidWithImg.args,
+    children: (
+      <>
+        <CardMedia component="div">
+          <Box alignItems="center" justifyContent="center">
+            <Text color="grey11" component="span">
+              No screenshot available
+            </Text>
+          </Box>
+        </CardMedia>
+        <CardActions>
+          <Badge color="purple" title="Legacy Slice" />
+          <Button
+            renderEndIcon={() => (
+              <ArrowDropDownIcon color={tokens.color.greyLight11} />
+            )}
+            renderStartIcon={() => (
+              <SyncAltIcon color={tokens.color.greyLight11} />
+            )}
+            variant="secondary"
+          >
+            Turn into shared Slice
+          </Button>
+        </CardActions>
+        <CardFooter subtitle="Default • Edited 19 minutes ago" title="Hello" />
+      </>
+    ),
+    interactive: false,
+  },
+  parameters: SolidWithImg.parameters,
+} satisfies Story;
+
+export const OutlinedWithImg = {
+  args: {
+    ...Default.args,
+    children: (
+      <>
+        <CardMedia src="https://images.unsplash.com/photo-1588315029754-2dd089d39a1a?w=512" />
+        <CardFooter
+          action={<Checkbox />}
+          subtitle="Library • Edited 19 minutes ago"
+          title="Name"
+        />
+      </>
+    ),
+    interactive: true,
+    size: "small",
+    style: { width: "320px" },
+    variant: "outlined",
+  },
+  parameters: { controls: { hideNoControlsWarning: true, include: [] } },
+} satisfies Story;
+
+export const OutlinedWithDiv = {
+  args: {
+    ...OutlinedWithImg.args,
+    children: (
+      <>
+        <CardMedia component="div">
+          <Box alignItems="center" justifyContent="center">
+            <Text color="grey11" component="span">
+              No screenshot available
+            </Text>
+          </Box>
+        </CardMedia>
+        <CardFooter
+          action={<Checkbox />}
+          subtitle="Library • Edited 19 minutes ago"
+          title="Name"
+        />
+      </>
+    ),
+  },
+  parameters: OutlinedWithImg.parameters,
+} satisfies Story;

package/src/components/Card/Card.tsx

@@ -0,0 +1,171 @@
+import { findFocusableAncestor } from "@prismicio/editor-support/DOM";
+import { Text } from "@prismicio/editor-ui";
+import { clsx } from "clsx";
+import type { UrlObject } from "node:url";
+import {
+  type CSSProperties,
+  type FC,
+  type HTMLAttributes,
+  type ImgHTMLAttributes,
+  type MouseEvent,
+  type PropsWithChildren,
+  type ReactNode,
+  createElement,
+} from "react";
+
+import * as styles from "./Card.css";
+
+type CardProps = PropsWithChildren<
+  {
+    size?: keyof typeof styles.size;
+    style?: CSSProperties;
+    variant?: keyof typeof styles.variant;
+  } & (
+    | { interactive?: false }
+    | ({ interactive: true; href: string } & {
+        component?: "a" | FC<LinkProps>;
+      })
+    | ({ interactive: true; href?: undefined } & {
+        checked?: boolean;
+        disabled?: boolean;
+        onClick?: (event: MouseEvent) => void;
+      })
+  )
+>;
+
+type LinkProps = {
+  href: string | UrlObject;
+  onClick?: (event: MouseEvent) => void;
+};
+
+export const Card: FC<CardProps> = (props) => {
+  const { size = "medium", variant = "solid" } = props;
+  const elementProps = {
+    className: clsx(styles.root, styles.size[size], styles.variant[variant], {
+      [styles.interactive]: props.interactive,
+      [styles.interactiveVariant[variant]]: props.interactive,
+    }),
+  };
+  if (props.interactive === true && props.href === undefined) {
+    const {
+      size: _size,
+      variant: _variant,
+      interactive: _interactive,
+      checked,
+      disabled,
+      onClick,
+      ...otherProps
+    } = props;
+    return (
+      <div
+        {...otherProps}
+        {...elementProps}
+        // TODO: add missing ARIA attributes and keyboard event handlers.
+        data-disabled={disabled === true ? "" : undefined}
+        data-state={checked === true ? "checked" : undefined}
+        onClick={(event) => {
+          if (disabled === true || onClick === undefined) return;
+          const target = event.target as HTMLElement;
+          if (findFocusableAncestor(target) === event.currentTarget) {
+            onClick(event);
+          }
+        }}
+        tabIndex={disabled === true ? undefined : 0}
+      />
+    );
+  } else if (props.interactive === true) {
+    const {
+      size: _size,
+      variant: _variant,
+      interactive: _interactive,
+      component = "a",
+      ...otherProps
+    } = props;
+    return createElement(component, {
+      ...otherProps,
+      ...elementProps,
+      onClick: (event) => {
+        const target = event.target as HTMLElement;
+        if (findFocusableAncestor(target) !== event.currentTarget) {
+          event.preventDefault();
+        }
+      },
+    });
+  } else {
+    const {
+      size: _size,
+      variant: _variant,
+      interactive: _interactive,
+      ...otherProps
+    } = props;
+    return <div {...otherProps} {...elementProps} />;
+  }
+};
+
+type CardMediaProps = { overlay?: ReactNode } & (
+  | ({ component?: "img" } & ImgHTMLAttributes<HTMLImageElement>)
+  | ({ component: "div" } & HTMLAttributes<HTMLDivElement>)
+);
+
+export const CardMedia: FC<CardMediaProps> = ({
+  className,
+  component = "img",
+  overlay,
+  ...otherProps
+}) => (
+  <div className={styles.media}>
+    {createElement(component, {
+      ...otherProps,
+      className: clsx(styles.mediaComponent[component], className),
+    })}
+    {Boolean(overlay) ? (
+      <div className={styles.mediaOverlay}>{overlay}</div>
+    ) : undefined}
+  </div>
+);
+
+export const CardActions: FC<PropsWithChildren> = (props) => (
+  <div {...props} className={styles.actions} />
+);
+
+type CardFooterProps = {
+  action?: ReactNode;
+  subtitle?: ReactNode;
+  title?: ReactNode;
+};
+
+export const CardFooter: FC<CardFooterProps> = ({
+  action,
+  subtitle,
+  title,
+  ...otherProps
+}) => (
+  <div {...otherProps} className={styles.footer}>
+    <div className={styles.footerTexts}>
+      <Text component="span" noWrap variant="bold">
+        {title}
+      </Text>
+      <Text color="grey11" component="span" noWrap variant="small">
+        {subtitle}
+      </Text>
+    </div>
+    {action}
+  </div>
+);
+
+export const CardStatus: FC<PropsWithChildren> = ({
+  children,
+  ...otherProps
+}) => (
+  <div {...otherProps} className={styles.status}>
+    <Text
+      align="center"
+      color="inherit"
+      component="span"
+      noWrap
+      variant="smallBold"
+    >
+      {children}
+    </Text>
+  </div>
+);

package/src/components/Card/index.ts

@@ -0,0 +1 @@
+export { Card, CardActions, CardFooter, CardMedia, CardStatus } from "./Card";

package/src/components/HoverCard/HoverCard.stories.tsx

@@ -10,6 +10,10 @@ import { Button } from "@prismicio/editor-ui";
 
 const meta = {
   component: HoverCard,
+  argTypes: {
+    children: { control: { disable: true } },
+    trigger: { control: { disable: true } },
+  },
   parameters: { layout: "fullscreen" },
 } satisfies Meta<typeof HoverCard>;
 

package/src/components/Table/Table.tsx

@@ -1,3 +1,4 @@
+import { findFocusableAncestor } from "@prismicio/editor-support/DOM";
 import {
   type FC,
   type MouseEventHandler,
@@ -45,31 +46,20 @@ type TableRowProps = PropsWithChildren<{
   onClick?: MouseEventHandler<HTMLTableRowElement>;
 }>;
 
-const tableRowTag = "prismicTableRow";
-
 export const TableRow: FC<TableRowProps> = ({ children, onClick }) => {
   const section = useTableSection();
 
   return (
     <tr
-      data-tag={tableRowTag}
       className={clsx(styles.row, {
         [styles.rowClickable]: !!onClick,
         [styles.bodyRow]: section === "body",
       })}
       onClick={(event) => {
-        if (!onClick) {
-          return;
-        }
-
+        if (!onClick) return;
         const target = event.target as HTMLElement;
-        const isClickOnTableRow = !!target.closest(
-          `tr[data-tag=${tableRowTag}]`
-        );
-
-        // Prevent a click event propagation from outside of the table DOM structure
-        // E.g.: Dropdown menu item selection that will trigger this onClick function
-        if (isClickOnTableRow) {
+        const focusableAncestor = findFocusableAncestor(target);
+        if (focusableAncestor?.contains(event.currentTarget) ?? true) {
           onClick(event);
         }
       }}

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

@@ -8,13 +8,10 @@ type Story = StoryObj<typeof meta>;
 const meta = {
   component: TextLink,
   argTypes: {
-    color: {
-      control: { type: "select" },
-      options: ["primary", "secondary"],
-    },
+    color: { control: "select", options: ["primary", "secondary"] },
     endIcon: { control: { disable: true } },
     textVariant: {
-      control: { type: "select" },
+      control: "select",
       options: ["normal", "smallBold", "inherit"],
     },
   },

package/src/components/Window/Window.tsx

@@ -1,3 +1,4 @@
+import { findFocusableAncestor } from "@prismicio/editor-support/DOM";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -64,10 +65,13 @@ export const WindowTabsTrigger: FC<WindowTabsTriggerProps> = ({
     {...otherProps}
     asChild
     onMouseDown={(event) => {
-      let target = event.target as HTMLElement | null;
-      while (target !== null && target !== event.currentTarget) {
-        if (target.tabIndex >= 0) event.preventDefault();
-        target = target.parentElement;
+      const target = event.target as HTMLElement;
+      const focusableAncestor = findFocusableAncestor(target);
+      if (
+        focusableAncestor !== event.currentTarget &&
+        focusableAncestor !== event.currentTarget.parentElement
+      ) {
+        event.preventDefault();
       }
       if (target === event.currentTarget) {
         target.scrollIntoView({

package/src/features/customTypes/PageTypeOnboarding.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { useSelector } from "react-redux";
+import { Box, Button, Text } from "@prismicio/editor-ui";
+
+import { CreateCustomTypeModal } from "@components/Forms/CreateCustomTypeModal";
+import { SliceMachineStoreType } from "@src/redux/type";
+import useSliceMachineActions from "@src/modules/useSliceMachineActions";
+import { LoadingKeysEnum } from "@src/modules/loading/types";
+import { isLoading } from "@src/modules/loading";
+import { BlankPageIcon } from "@src/icons/BlankPageIcon";
+
+export function PageTypeOnboarding() {
+  const { openCreateCustomTypeModal } = useSliceMachineActions();
+  const { isCreatingCustomType } = useSelector(
+    (store: SliceMachineStoreType) => ({
+      isCreatingCustomType: isLoading(
+        store,
+        LoadingKeysEnum.CREATE_CUSTOM_TYPE
+      ),
+    })
+  );
+  // State to ensure button loader is still visible while redirecting
+  const [isButtonLoading, setIsButtonLoading] = useState(false);
+
+  useEffect(() => {
+    if (isCreatingCustomType) {
+      setIsButtonLoading(true);
+    }
+  }, [isCreatingCustomType]);
+
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      height="100vh"
+      alignItems="center"
+      backgroundColor="grey2"
+    >
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        width={384}
+      >
+        <BlankPageIcon />
+        <Text variant="h3" align="center" sx={{ marginTop: 16 }}>
+          Blank page
+        </Text>
+        <Text color="grey11" align="center" sx={{ marginBottom: 16 }}>
+          Welcome to Slice Machine. Your journey starts with your first page
+          type — the model that you will use to create pages for your website.
+        </Text>
+        <Button onClick={openCreateCustomTypeModal} loading={isButtonLoading}>
+          Create a page type
+        </Button>
+        <CreateCustomTypeModal format="page" origin="onboarding" />
+      </Box>
+    </Box>
+  );
+}

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

@@ -8,7 +8,7 @@ import {
   BlankSlateDescription,
   BlankSlateTitle,
 } from "@src/components/BlankSlate";
-import { LightningIcon3D } from "@src/icons/LightningIcon3D";
+import { SliceMachinePrinterIcon } from "@src/icons/SliceMachinePrinterIcon";
 
 export type SliceZoneBlankSlateProps = {
   openUpdateSliceZoneModal: () => void;
@@ -30,7 +30,7 @@ export const SliceZoneBlankSlate: FC<SliceZoneBlankSlateProps> = ({
       <BlankSlate backgroundImage="/blank-slate-slice-zone.png">
         <BlankSlateContent>
           <Box justifyContent="center" padding={{ bottom: 16 }}>
-            <LightningIcon3D />
+            <SliceMachinePrinterIcon />
           </Box>
           <BlankSlateTitle>Add slices</BlankSlateTitle>
           <BlankSlateDescription>