slice-machine-ui 1.23.2-beta.1 → 1.23.2-beta.11

package/src/components/FieldSet/FieldSet.stories.tsx

@@ -193,11 +193,14 @@ export const WithHeaderAndBoxContent = {
           <OwnerSelect />
         </FieldSetHeader>
         <FieldSetContent>
-          {/*
-           * TODO: these `padding` values actually don't match Figma, but they
-           * are the closest allowed by the `Box` component.
-           */}
-          <Box flexDirection="column" padding={{ block: 72, inline: 100 }}>
+          <Box
+            flexDirection="column"
+            /*
+             * TODO: these `padding` values actually don't match Figma, but they
+             * are the closest allowed by the `Box` component.
+             */
+            padding={{ block: 72, inline: 100 }}
+          >
             <Text align="center" variant="emphasized">
               No Results Found
             </Text>
@@ -230,12 +233,18 @@ function OwnerSelect(props: OwnerSelectProps) {
       size="large"
       sx={{ width: "calc(50% - 8px)" }}
     >
-      <SelectItem size="large" value="owner-1">
-        Owner
-      </SelectItem>
-      <SelectItem size="large" value="owner-2">
-        Owner
-      </SelectItem>
+      {[...Array(2).keys()].map((index) => (
+        <SelectItem
+          key={index}
+          renderStartIcon={() => (
+            <GitHubIcon color={tokens.color.greyLight11} />
+          )}
+          size="large"
+          value={`owner-${index}`}
+        >
+          Owner
+        </SelectItem>
+      ))}
     </Select>
   );
 }

package/src/components/RelativeTime/RelativeTime.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { RelativeTime } from "./RelativeTime";
+
+type Story = StoryObj<typeof meta>;
+
+const meta = {
+  component: RelativeTime,
+  argTypes: {
+    date: { control: "date" },
+  },
+} satisfies Meta<typeof RelativeTime>;
+
+export default meta;
+
+export const Default = {
+  args: {
+    date: new Date("1 Jan 2024"),
+  },
+  render: ({ date, ...otherArgs }) => (
+    // The `date` control converts the `date` arg into a UNIX timestamp. That's
+    // why we need to convert it back into a `Date` object.
+    <RelativeTime {...otherArgs} date={new Date(date)} />
+  ),
+} satisfies Story;

package/src/components/RelativeTime/RelativeTime.tsx

@@ -0,0 +1,40 @@
+import { Text } from "@prismicio/editor-ui";
+import type { FC } from "react";
+
+type RelativeTimeProps = {
+  date: Date;
+};
+
+export const RelativeTime: FC<RelativeTimeProps> = ({
+  date,
+  ...otherProps
+}) => (
+  <Text {...otherProps} color="inherit" variant="inherit">
+    {formatRelativeTime(date)}
+  </Text>
+);
+
+const rtf = new Intl.RelativeTimeFormat("en", {
+  numeric: "auto",
+  style: "narrow",
+});
+
+function formatRelativeTime(date: Date, now = new Date()): string {
+  return rtf.format(differenceInCalendarDays(date, now), "day");
+}
+
+const millisecondsInDay = 1_000 * 60 * 60 * 24;
+
+// Adapted from: https://github.com/date-fns/date-fns/blob/6f44a167e71053999c10aa9462d7f0c52fec0faa/src/differenceInCalendarDays/index.ts.
+function differenceInCalendarDays(dateLeft: Date, dateRight: Date): number {
+  const startOfDayLeft = startOfDay(dateLeft);
+  const startOfDayRight = startOfDay(dateRight);
+  return Math.round((+startOfDayLeft - +startOfDayRight) / millisecondsInDay);
+}
+
+// Adapted from: https://github.com/date-fns/date-fns/blob/6f44a167e71053999c10aa9462d7f0c52fec0faa/src/startOfDay/index.ts.
+function startOfDay(date: Date): Date {
+  const newDate = new Date(date);
+  newDate.setHours(0, 0, 0, 0);
+  return newDate;
+}

package/src/components/RelativeTime/index.ts

@@ -0,0 +1 @@
+export { RelativeTime } from "./RelativeTime";

package/src/components/SideNav/SideNav.css.ts

@@ -54,7 +54,7 @@ export const repository = style([
   sprinkles({
     display: "flex",
     justifyContent: "space-between",
-    marginBottom: 32,
+    marginBottom: 16,
   }),
 ]);
 

package/src/components/SideNav/SideNav.tsx

@@ -173,10 +173,14 @@ export const UpdateInfo: FC<UpdateInfoProps> = ({
       Some updates of Slice Machine are available.
     </p>
 
-    {createElement(
-      component,
-      { ...{ className: styles.updateInfoLink, onClick }, href },
-      "Learn more",
-    )}
+    {
+      // TODO(DT-1942): This should be a Button with a link component for
+      // accessibility
+      createElement(
+        component,
+        { ...{ className: styles.updateInfoLink, onClick }, href },
+        "Learn more",
+      )
+    }
   </div>
 );

package/src/components/SideNav/SideNavEnvironmentSelector.tsx

@@ -8,6 +8,7 @@ import {
   Icon,
   IconButton,
   InvisibleButton,
+  ProgressCircle,
   Text,
 } from "@prismicio/editor-ui";
 import { Environment } from "@slicemachine/manager/client";
@@ -21,22 +22,26 @@ import * as styles from "./SideNavEnvironmentSelector.css";
 import { LoginIcon } from "@src/icons/LoginIcon";
 
 type SideNavEnvironmentSelectorProps = {
-  variant?: "default" | "offline" | "unauthorized" | "unauthenticated";
-  environments?: Environment[];
   activeEnvironment?: Environment;
-  onSelect?: (environment: Environment) => void | Promise<void>;
+  disabled?: boolean;
+  environments?: Environment[];
+  loading?: boolean;
+  variant?: "default" | "offline" | "unauthorized" | "unauthenticated";
   onLogInClick?: () => void;
+  onSelect?: (environment: Environment) => void | Promise<void>;
 };
 
 export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
   props,
 ) => {
   const {
-    variant = "default",
-    environments = [],
     activeEnvironment,
-    onSelect,
+    disabled = false,
+    environments = [],
+    loading = false,
+    variant = "default",
     onLogInClick,
+    onSelect,
   } = props;
 
   const isProductionEnvironmentActive = activeEnvironment?.kind === "prod";
@@ -60,7 +65,7 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
         overflow="hidden"
         alignItems="flex-start"
       >
-        {variant === "default" || variant === "unauthenticated" ? (
+        {variant === "default" ? (
           <Text component="span" variant="small" color="grey11">
             Environment
           </Text>
@@ -70,6 +75,12 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
           <InvisibleButton buttonText="Login required" onClick={onLogInClick} />
         ) : undefined}
 
+        {variant === "offline" ? (
+          <Text component="span" variant="bold">
+            Offline
+          </Text>
+        ) : undefined}
+
         {variant === "default" ? (
           <Text
             component="span"
@@ -93,8 +104,10 @@ export const SideNavEnvironmentSelector: FC<SideNavEnvironmentSelectorProps> = (
 
         {environments.length > 1 ? (
           <EnvironmentDropdownMenu
-            environments={environments}
             activeEnvironment={activeEnvironment}
+            disabled={disabled}
+            environments={environments}
+            loading={loading}
             onSelect={onSelect}
           />
         ) : undefined}
@@ -107,11 +120,14 @@ type EnvironmentDropdownMenuProps = Pick<
   SideNavEnvironmentSelectorProps,
   "activeEnvironment" | "onSelect"
 > & {
+  disabled: boolean;
   environments: Environment[];
+  loading: boolean;
 };
 
 const EnvironmentDropdownMenu: FC<EnvironmentDropdownMenuProps> = (props) => {
-  const { environments, activeEnvironment, onSelect } = props;
+  const { activeEnvironment, disabled, environments, loading, onSelect } =
+    props;
 
   const nonPersonalEnvironments = environments.filter(
     (environment) => environment.kind !== "dev",
@@ -122,8 +138,12 @@ const EnvironmentDropdownMenu: FC<EnvironmentDropdownMenuProps> = (props) => {
 
   return (
     <DropdownMenu modal>
-      <DropdownMenuTrigger disabled={environments.length < 2}>
-        <IconButton icon="unfoldMore" hiddenLabel="Select environment" />
+      <DropdownMenuTrigger disabled={disabled}>
+        <IconButton
+          icon={loading ? <ProgressCircle /> : "unfoldMore"}
+          hiddenLabel="Select environment"
+          disabled={disabled}
+        />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end" minWidth={256}>
         {personalEnvironment ? (

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

@@ -393,32 +393,39 @@ describe("CustomTypeModel test suite", () => {
 
   it("addField should return the given custom type with the field added to the section", () => {
     expect(
-      CustomTypeModel.addField({
-        customType: mockCustomType,
-        sectionId: "mainSection",
-        newFieldId: "newField",
-        newField: {
-          config: {
-            label: "NewField",
-          },
-          type: "UID",
-        },
-      }),
-    ).toEqual({
-      ...mockCustomType,
-      json: {
-        ...mockCustomType.json,
-        mainSection: {
-          ...mainSection,
+      JSON.stringify(
+        CustomTypeModel.addField({
+          customType: mockCustomType,
+          sectionId: "mainSection",
+          newFieldId: "newField",
           newField: {
             config: {
               label: "NewField",
             },
             type: "UID",
           },
+        }),
+      ),
+    ).toEqual(
+      JSON.stringify({
+        ...mockCustomType,
+        json: {
+          ...mockCustomType.json,
+          mainSection: {
+            uid: mainSection.uid,
+            booleanField: mainSection.booleanField,
+            groupField: mainSection.groupField,
+            newField: {
+              config: {
+                label: "NewField",
+              },
+              type: "UID",
+            },
+            slices: mainSection.slices,
+          },
         },
-      },
-    });
+      }),
+    );
   });
 
   it("deleteField should return the given custom type without the field", () => {
@@ -782,4 +789,183 @@ describe("CustomTypeModel test suite", () => {
       },
     });
   });
+
+  it("should create a custom type with repeatable true", () => {
+    expect(
+      CustomTypeModel.create({
+        id: "id",
+        label: "lama",
+        repeatable: true,
+        format: "custom",
+      }),
+    ).toMatchInlineSnapshot(`
+          {
+            "format": "custom",
+            "id": "id",
+            "json": {
+              "Main": {
+                "uid": {
+                  "config": {
+                    "label": "UID",
+                  },
+                  "type": "UID",
+                },
+              },
+            },
+            "label": "lama",
+            "repeatable": true,
+            "status": true,
+          }
+        `);
+  });
+
+  it("should create a custom type with repeatable false", () => {
+    const result = CustomTypeModel.create({
+      id: "id",
+      label: "lama",
+      repeatable: false,
+      format: "custom",
+    });
+
+    expect(result.id).toBe("id");
+    expect(result.label).toBe("lama");
+    expect(result.format).toBe("custom");
+    expect(result.json).toHaveProperty("Main");
+    expect(result).toMatchInlineSnapshot(`
+        {
+          "format": "custom",
+          "id": "id",
+          "json": {
+            "Main": {},
+          },
+          "label": "lama",
+          "repeatable": false,
+          "status": true,
+        }
+      `);
+  });
+
+  it("should create a page type with a slice zone", () => {
+    const result = CustomTypeModel.create({
+      id: "🥪",
+      label: "label",
+      repeatable: true,
+      format: "page",
+    });
+
+    expect(result.format).toBe("page");
+    expect(result.json).toHaveProperty("Main");
+    expect(result.json.Main).toHaveProperty("slices");
+    expect(result.json).toHaveProperty("SEO & Metadata");
+    expect(result).toMatchInlineSnapshot(`
+        {
+          "format": "page",
+          "id": "🥪",
+          "json": {
+            "Main": {
+              "slices": {
+                "config": {
+                  "choices": {},
+                },
+                "fieldset": "Slice Zone",
+                "type": "Slices",
+              },
+              "uid": {
+                "config": {
+                  "label": "UID",
+                },
+                "type": "UID",
+              },
+            },
+            "SEO & Metadata": {
+              "meta_description": {
+                "config": {
+                  "label": "Meta Description",
+                  "placeholder": "A brief summary of the page",
+                },
+                "type": "Text",
+              },
+              "meta_image": {
+                "config": {
+                  "constraint": {
+                    "height": 1260,
+                    "width": 2400,
+                  },
+                  "label": "Meta Image",
+                  "thumbnails": [],
+                },
+                "type": "Image",
+              },
+              "meta_title": {
+                "config": {
+                  "label": "Meta Title",
+                  "placeholder": "A title of the page used for social media and search engines",
+                },
+                "type": "Text",
+              },
+            },
+          },
+          "label": "label",
+          "repeatable": true,
+          "status": true,
+        }
+      `);
+  });
+});
+
+it("when non repeatable page type is should contain Main with a slice-zone, no uid, and a SEO tab", () => {
+  const result = CustomTypeModel.create({
+    id: "foo",
+    label: "bar",
+    repeatable: false,
+    format: "page",
+  });
+
+  expect(result).toMatchInlineSnapshot(`
+      {
+        "format": "page",
+        "id": "foo",
+        "json": {
+          "Main": {
+            "slices": {
+              "config": {
+                "choices": {},
+              },
+              "fieldset": "Slice Zone",
+              "type": "Slices",
+            },
+          },
+          "SEO & Metadata": {
+            "meta_description": {
+              "config": {
+                "label": "Meta Description",
+                "placeholder": "A brief summary of the page",
+              },
+              "type": "Text",
+            },
+            "meta_image": {
+              "config": {
+                "constraint": {
+                  "height": 1260,
+                  "width": 2400,
+                },
+                "label": "Meta Image",
+                "thumbnails": [],
+              },
+              "type": "Image",
+            },
+            "meta_title": {
+              "config": {
+                "label": "Meta Title",
+                "placeholder": "A title of the page used for social media and search engines",
+              },
+              "type": "Text",
+            },
+          },
+        },
+        "label": "bar",
+        "repeatable": false,
+        "status": true,
+      }
+    `);
 });

package/src/domain/customType.ts

@@ -104,8 +104,15 @@ type GetGroupFieldArgs = {
   groupFieldId: string;
 };
 
-export function getFormat(custom: CustomType): CustomTypeFormat {
-  return custom.format ?? "custom";
+type CreateArgs = {
+  format: CustomTypeFormat;
+  id: string;
+  label: string;
+  repeatable: boolean;
+};
+
+export function getFormat(customType: CustomType): CustomTypeFormat {
+  return customType.format ?? "custom";
 }
 
 export function getSectionEntries(
@@ -363,15 +370,32 @@ export function renameSection(
 
 export function addField(args: AddFieldArgs): CustomType {
   const { customType, sectionId, newField, newFieldId } = args;
+  const sectionJson = customType.json[sectionId];
+  const maybeSliceZoneEntry = getSectionSliceZoneEntry(customType, sectionId);
+
+  // Separate the fields into slices and non-slices
+  const sectionFields = Object.fromEntries(
+    Object.entries(sectionJson).filter(
+      ([_, value]) => value.type !== SlicesFieldType,
+    ),
+  );
+
+  const updatedSection = {
+    ...sectionFields,
+    // Add the new field to the section
+    [newFieldId]: newField,
+  };
+
+  // Merge the SlicesFieldType field back into the section, if it exists
+  if (maybeSliceZoneEntry !== undefined) {
+    const [sliceZoneKey, sliceZoneField] = maybeSliceZoneEntry;
+    updatedSection[sliceZoneKey] = sliceZoneField;
+  }
 
   const newCustomType = updateSection({
     customType,
     sectionId,
-    updatedSection: {
-      ...customType.json[sectionId],
-      // Add the new field to the section
-      [newFieldId]: newField,
-    },
+    updatedSection,
   });
 
   return newCustomType;
@@ -633,3 +657,104 @@ export function updateGroupFields(
     },
   };
 }
+
+export function create(args: CreateArgs) {
+  const { id, label, repeatable, format } = args;
+  const mainTab = makeMainTab(repeatable, format);
+
+  return {
+    format,
+    id,
+    json: mainTab,
+    label,
+    repeatable,
+    status: true,
+  };
+}
+
+function makeMainTab(
+  repeatable: boolean,
+  format: CustomTypeFormat,
+): CustomType["json"] {
+  if (repeatable === false && format === "page") {
+    return { ...DEFAULT_MAIN_WITH_SLICE_ZONE, ...DEFAULT_SEO_TAB };
+  }
+
+  if (repeatable === false) {
+    return DEFAULT_MAIN;
+  }
+
+  if (format === "page") {
+    return {
+      ...DEFAULT_MAIN_WITH_UID_AND_SLICE_ZONE,
+      ...DEFAULT_SEO_TAB,
+    };
+  }
+
+  return DEFAULT_MAIN_WITH_UID;
+}
+
+const DEFAULT_MAIN: CustomType["json"] = {
+  Main: {},
+};
+
+const DEFAULT_MAIN_WITH_SLICE_ZONE: CustomType["json"] = {
+  Main: {
+    slices: {
+      config: {
+        choices: {},
+      },
+      fieldset: "Slice Zone",
+      type: "Slices",
+    },
+  },
+};
+
+const DEFAULT_MAIN_WITH_UID: CustomType["json"] = {
+  Main: {
+    uid: {
+      config: {
+        label: "UID",
+      },
+      type: "UID",
+    },
+  },
+};
+
+const DEFAULT_MAIN_WITH_UID_AND_SLICE_ZONE: CustomType["json"] = {
+  Main: {
+    ...DEFAULT_MAIN_WITH_UID.Main,
+    ...DEFAULT_MAIN_WITH_SLICE_ZONE.Main,
+  },
+};
+
+const DEFAULT_SEO_TAB: CustomType["json"] = {
+  "SEO & Metadata": {
+    meta_description: {
+      config: {
+        label: "Meta Description",
+        placeholder: "A brief summary of the page",
+      },
+      type: "Text",
+    },
+    meta_image: {
+      config: {
+        constraint: {
+          height: 1260,
+          width: 2400,
+        },
+        label: "Meta Image",
+        thumbnails: [],
+      },
+      type: "Image",
+    },
+    meta_title: {
+      config: {
+        label: "Meta Title",
+        placeholder:
+          "A title of the page used for social media and search engines",
+      },
+      type: "Text",
+    },
+  },
+};