slice-machine-ui 2.2.2-beta.8 → 2.3.0

package/src/domain/fields.ts

@@ -0,0 +1,223 @@
+import { IconName } from "@prismicio/editor-ui";
+import {
+  FieldType,
+  NestableFieldTypes,
+} from "@prismicio/types-internal/lib/customtypes";
+
+interface BaseField {
+  description: string;
+  icon: IconName;
+  name: string;
+  thumbnail: string;
+  type: FieldType;
+  variant?: FieldVariant;
+}
+
+export type NestableFieldVariant = "ContentRelationship" | "LinkToMedia";
+export type GroupFieldVariant = "NestedGroup";
+export type FieldVariant = NestableFieldVariant | GroupFieldVariant;
+
+export interface NestableField extends BaseField {
+  type: NestableFieldTypes;
+  variant?: NestableFieldVariant;
+}
+
+export interface UIDField extends BaseField {
+  type: "UID";
+  variant?: never;
+}
+
+export interface GroupField extends BaseField {
+  type: "Group";
+  variant?: "NestedGroup";
+}
+
+export type Field = NestableField | UIDField | GroupField;
+
+/**
+ * Nestable fields
+ */
+
+export const booleanField: NestableField = {
+  name: "Boolean",
+  description: "A true or false toggle.",
+  icon: "toggleOff",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295526/DEV_TOOLS/SM_FIELDS/Type_Boolean_cbwg8k.png",
+  type: "Boolean",
+};
+
+export const colorField: NestableField = {
+  name: "Color",
+  description: "A color in hex format.",
+  icon: "colorLens",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295521/DEV_TOOLS/SM_FIELDS/Type_Color_nyoeit.png",
+  type: "Color",
+};
+
+export const dateField: NestableField = {
+  name: "Date",
+  description: "A date without time.",
+  icon: "dateRange",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295525/DEV_TOOLS/SM_FIELDS/Type_Date_dsuaeq.png",
+  type: "Date",
+};
+
+export const embedField: NestableField = {
+  name: "Embed",
+  description: "A video, song, or oEmbed link.",
+  icon: "code",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295523/DEV_TOOLS/SM_FIELDS/Type_Embed_wwssvd.png",
+  type: "Embed",
+};
+
+export const geoPointField: NestableField = {
+  name: "Geopoint",
+  description: "A geographical coordinate.",
+  icon: "place",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295522/DEV_TOOLS/SM_FIELDS/Type_GeoPoint_lpq0sm.png",
+  type: "GeoPoint",
+};
+
+export const imageField: NestableField = {
+  name: "Image",
+  description: "A responsive image.",
+  icon: "image",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295520/DEV_TOOLS/SM_FIELDS/Type_Image_zyatxy.png",
+  type: "Image",
+};
+
+export const LinkField: NestableField = {
+  name: "Link",
+  description: "A link to a website, asset, or document.",
+  icon: "link",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295528/DEV_TOOLS/SM_FIELDS/Type_Link_bgslgy.png",
+  type: "Link",
+};
+
+export const contentRelationshipField: NestableField = {
+  name: "Content Relationship",
+  description: "A reference to a Prismic document.",
+  icon: "settingsEthernet",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295527/DEV_TOOLS/SM_FIELDS/Type_Content_RelationShip_s4z4nh.png",
+  type: "Link",
+  variant: "ContentRelationship",
+};
+
+export const LinkToMediaField: NestableField = {
+  name: "Link To Media",
+  description: "A link to a media asset.",
+  icon: "attachFile",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295519/DEV_TOOLS/SM_FIELDS/Type_LinkToMedia_m2p0ce.png",
+  type: "Link",
+  variant: "LinkToMedia",
+};
+
+export const numberField: NestableField = {
+  name: "Number",
+  description: "An integer or float.",
+  icon: "pin",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295522/DEV_TOOLS/SM_FIELDS/Type_Number_o3olop.png",
+  type: "Number",
+};
+
+export const selectField: NestableField = {
+  name: "Select",
+  description: "A dropdown of options.",
+  icon: "arrowDropDownCircle",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295527/DEV_TOOLS/SM_FIELDS/Type_Select_bedjei.png",
+  type: "Select",
+};
+
+export const richTextField: NestableField = {
+  name: "Rich Text",
+  description: "Text with formatting options.",
+  icon: "textFields",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295530/DEV_TOOLS/SM_FIELDS/Type_Rich_Text_fxdyar.png",
+  type: "StructuredText",
+};
+
+export const textField: NestableField = {
+  name: "Text",
+  description: "A text string without formatting.",
+  icon: "title",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295529/DEV_TOOLS/SM_FIELDS/Type_Key_Text_xrqf45.png",
+  type: "Text",
+};
+
+export const timestampField: NestableField = {
+  name: "Timestamp",
+  description: "A date and time.",
+  icon: "schedule",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295524/DEV_TOOLS/SM_FIELDS/Type_Timestamp_fkr5iw.png",
+  type: "Timestamp",
+};
+
+export const nestableFields: NestableField[] = [
+  imageField,
+  textField,
+  richTextField,
+  booleanField,
+  numberField,
+  selectField,
+  LinkField,
+  LinkToMediaField,
+  colorField,
+  dateField,
+  timestampField,
+  embedField,
+  geoPointField,
+  contentRelationshipField,
+];
+
+/**
+ * UID
+ */
+
+export const UIDField: UIDField = {
+  name: "UID",
+  description: "Unique Identifier",
+  icon: "tag",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721295519/DEV_TOOLS/SM_FIELDS/Type_UID_hrwzug.png",
+  type: "UID",
+};
+
+/**
+ * Group
+ */
+
+export const groupField: GroupField = {
+  name: "Repeatable Group",
+  description: "A set of fields that editors can repeat.",
+  icon: "createNewFolder",
+  thumbnail:
+    "https://res.cloudinary.com/dmtf1daqp/image/upload/v1721314577/DEV_TOOLS/SM_FIELDS/Type_Group_uwwco0.png",
+  type: "Group",
+};
+
+export const nestedGroupField: GroupField = {
+  ...groupField,
+  variant: "NestedGroup",
+};
+
+export const groupFields: GroupField[] = [groupField, nestedGroupField];
+
+/**
+ * All fields
+ */
+
+export const fields = [...nestableFields, UIDField, ...groupFields];

package/src/features/builder/AddFieldDropdown.tsx

@@ -0,0 +1,122 @@
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  Icon,
+  Image,
+  Text,
+  Tooltip,
+} from "@prismicio/editor-ui";
+import { FieldType } from "@prismicio/types-internal/lib/customtypes";
+
+import {
+  Field,
+  FieldVariant,
+  groupField,
+  nestableFields,
+  UIDField,
+} from "@/domain/fields";
+
+interface AddFieldDropdownProps {
+  disabled: boolean;
+  onSelectField: (fieldType: FieldType | FieldVariant) => void;
+  fields: Field[];
+  triggerDataTestId?: string;
+}
+
+export function AddFieldDropdown(props: AddFieldDropdownProps) {
+  const {
+    disabled,
+    onSelectField,
+    fields,
+    triggerDataTestId = "add-field",
+  } = props;
+
+  const singleFieldsToRender = fields.filter(
+    (field) =>
+      nestableFields.some(
+        (nestableField) => nestableField.name === field.name,
+      ) || field.name === UIDField.name,
+  );
+  const groupFieldToRender = fields.find(
+    (field) => field.name === groupField.name,
+  );
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger disabled={disabled}>
+        <Button startIcon="add" color="grey" data-testid={triggerDataTestId}>
+          Add a field
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" maxHeight={400} collisionPadding={8}>
+        <DropdownMenuLabel>Single fields</DropdownMenuLabel>
+        {singleFieldsToRender.map((field) => (
+          <AddFieldDropdownItem field={field} onSelectField={onSelectField} />
+        ))}
+
+        {groupFieldToRender && (
+          <>
+            <DropdownMenuLabel>Set of fields</DropdownMenuLabel>
+            {
+              <AddFieldDropdownItem
+                field={groupFieldToRender}
+                onSelectField={onSelectField}
+              />
+            }
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+interface AddFieldDropdownItemProps {
+  onSelectField: AddFieldDropdownProps["onSelectField"];
+  field: Field;
+}
+
+function AddFieldDropdownItem(props: AddFieldDropdownItemProps) {
+  const { field, onSelectField } = props;
+  const { type, variant, name, icon, description, thumbnail } = field;
+
+  return (
+    <DropdownMenuItem
+      key={`${type}${variant ? `-${variant}` : ""}`}
+      startIcon={<Icon name={icon} size="large" />}
+      description={description}
+      onSelect={() => onSelectField(variant ?? type)}
+      renderTooltip={(trigger) => (
+        <Tooltip
+          visible
+          variant="custom"
+          content={
+            <>
+              <Image
+                src={thumbnail}
+                sx={{
+                  height: 170,
+                  width: 278,
+                  borderRadius: 4,
+                }}
+                animateOnLoad={false}
+              />
+              <Text color="white">How it will look for content editors.</Text>
+            </>
+          }
+          align="start"
+          side="left"
+          sideOffset={4}
+          animation="none"
+        >
+          {trigger}
+        </Tooltip>
+      )}
+    >
+      {name}
+    </DropdownMenuItem>
+  );
+}

package/src/features/onboarding/OnboardingGuide.tsx

@@ -0,0 +1,45 @@
+import { Card, CardContent, Text } from "@prismicio/editor-ui";
+
+import { OnboardingProgressStepper } from "@/features/onboarding/OnboardingProgressStepper";
+import {
+  OnboardingProvider,
+  useOnboardingContext,
+} from "@/features/onboarding/OnboardingProvider";
+import { useOnboardingExperiment } from "@/features/onboarding/useOnboardingExperiment";
+
+const OnboardingGuideContent = () => {
+  const { steps, completedStepCount, isComplete } = useOnboardingContext();
+
+  if (isComplete) return null;
+
+  return (
+    <Card color="grey2" variant="outlined" paddingBlock={16}>
+      <CardContent>
+        <div>
+          <Text variant="bold" color="grey12">
+            Welcome
+          </Text>
+          <Text color="grey11" variant="small">
+            Get started in {steps.length} steps
+          </Text>
+        </div>
+        <Text color="grey11" variant="small" align="end">
+          {completedStepCount}/{steps.length}
+        </Text>
+        <OnboardingProgressStepper />
+      </CardContent>
+    </Card>
+  );
+};
+
+export const OnboardingGuide = () => {
+  const { eligible } = useOnboardingExperiment();
+
+  if (!eligible) return null;
+
+  return (
+    <OnboardingProvider>
+      <OnboardingGuideContent />
+    </OnboardingProvider>
+  );
+};

package/src/features/onboarding/OnboardingProgressStepper.tsx

@@ -0,0 +1,71 @@
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  Icon,
+} from "@prismicio/editor-ui";
+import { useState } from "react";
+
+import { useOnboardingContext } from "@/features/onboarding/OnboardingProvider";
+import { OnboardingStepDialog } from "@/features/onboarding/OnboardingStepDialog";
+import type { OnboardingStep } from "@/features/onboarding/types";
+
+const EndCtaIcon = () => <Icon name="playCircle" size="small" color="grey11" />;
+
+export const OnboardingProgressStepper = () => {
+  const { completedStepCount, steps, isStepComplete } = useOnboardingContext();
+
+  const [isDialogOpen, setDialogOpen] = useState(false);
+  const [activeStep, setActiveStep] = useState(steps[0]);
+
+  const showStep = (step: OnboardingStep) => {
+    setActiveStep(step);
+    setDialogOpen(true);
+  };
+
+  return (
+    <>
+      <OnboardingStepDialog
+        step={activeStep}
+        isOpen={isDialogOpen}
+        onClose={() => setDialogOpen(false)}
+      />
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <Button
+            color="grey"
+            sx={{ width: "100%" }}
+            renderEndIcon={EndCtaIcon}
+          >
+            {completedStepCount > 0 ? "Continue" : "Start"}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuLabel>Progress</DropdownMenuLabel>
+          {steps.map((step) => {
+            const isCompleted = isStepComplete(step.id);
+
+            return (
+              <DropdownMenuItem
+                key={step.id}
+                onSelect={() => showStep(step)}
+                startIcon={
+                  <Icon
+                    color={isCompleted ? "green10" : "currentColor"}
+                    name={isCompleted ? "checkBox" : "checkBoxOutlinedBlank"}
+                  />
+                }
+                description={step.description}
+              >
+                {step.title}
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </>
+  );
+};

package/src/features/onboarding/OnboardingProvider.tsx

@@ -0,0 +1,82 @@
+import { createContext, ReactNode, useContext } from "react";
+
+import { onboardingSteps as steps } from "@/features/onboarding/content";
+import {
+  type OnboardingStep,
+  type OnboardingStepStatuses,
+  onboardingStepStatusesSchema,
+  type OnboardingStepType,
+} from "@/features/onboarding/types";
+import { usePersistedState } from "@/hooks/usePersistedState";
+
+type OnboardingContext = {
+  steps: OnboardingStep[];
+  completedStepCount: number;
+  toggleStepComplete: (step: OnboardingStepType) => void;
+  getStepIndex: (stepId: OnboardingStepType) => number;
+  isStepComplete: (stepId: OnboardingStepType) => boolean;
+  isComplete: boolean;
+};
+
+export const OnboardingContext = createContext<OnboardingContext | undefined>(
+  undefined,
+);
+
+const getInitialState = (): OnboardingStepStatuses => {
+  // if the old guide was dismissed, all steps start as complete
+  const wasOldGuideDismissed =
+    localStorage.getItem("slice-machine_isInAppGuideOpen") === "false";
+
+  return Object.fromEntries(
+    steps.map((step) => [step.id, wasOldGuideDismissed]),
+  ) as OnboardingStepStatuses;
+};
+
+export const OnboardingProvider = ({ children }: { children: ReactNode }) => {
+  const [stepStatus, setStepStatus] = usePersistedState(
+    "onboardingSteps",
+    getInitialState(),
+    { schema: onboardingStepStatusesSchema },
+  );
+
+  const toggleStepComplete = (step: OnboardingStepType) => {
+    setStepStatus((current) => ({ ...current, [step]: !current[step] }));
+  };
+
+  const getStepIndex = (stepId: OnboardingStepType) => {
+    return steps.findIndex(({ id }) => id === stepId);
+  };
+
+  const isStepComplete = (stepId: OnboardingStepType) => {
+    return stepStatus[stepId] ?? false;
+  };
+
+  const completedStepCount = Object.values(stepStatus).filter(Boolean).length;
+
+  return (
+    <OnboardingContext.Provider
+      value={{
+        steps,
+        toggleStepComplete,
+        isStepComplete,
+        getStepIndex,
+        completedStepCount,
+        isComplete: completedStepCount === steps.length,
+      }}
+    >
+      {children}
+    </OnboardingContext.Provider>
+  );
+};
+
+export const useOnboardingContext = () => {
+  const context = useContext(OnboardingContext);
+
+  if (context == null) {
+    throw new Error(
+      "useOnboardingContext must be used within an OnboardingProvider",
+    );
+  }
+
+  return context;
+};

package/src/features/onboarding/OnboardingStepDialog/OnboardingStepDialog.tsx

@@ -0,0 +1,46 @@
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+} from "@prismicio/editor-ui";
+
+import { useOnboardingContext } from "@/features/onboarding/OnboardingProvider";
+import { OnboardingStepDialogContent } from "@/features/onboarding/OnboardingStepDialog/OnboardingStepDialogContent";
+import type { OnboardingStep } from "@/features/onboarding/types";
+
+type OnboardingStepDialogProps = {
+  step: OnboardingStep;
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const OnboardingStepDialog = ({
+  step,
+  isOpen,
+  onClose,
+}: OnboardingStepDialogProps) => {
+  const { toggleStepComplete, isStepComplete } = useOnboardingContext();
+
+  const markAsDone = () => {
+    if (!isOpen) return;
+    toggleStepComplete(step.id);
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogHeader title="Learn" />
+      <DialogContent>
+        <OnboardingStepDialogContent step={step} />
+        <DialogActions
+          ok={{
+            text: isStepComplete(step.id) ? "Undo step" : "Mark as done",
+            onClick: markAsDone,
+          }}
+          cancel={{ text: "Close" }}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/features/onboarding/OnboardingStepDialog/OnboardingStepDialogContent.tsx

@@ -0,0 +1,38 @@
+import { Box, ScrollArea, Text, Video } from "@prismicio/editor-ui";
+
+import { getOnboardingStepsContent } from "@/features/onboarding/content";
+import { useOnboardingContext } from "@/features/onboarding/OnboardingProvider";
+import { OnboardingStep } from "@/features/onboarding/types";
+import { useRepositoryInformation } from "@/hooks/useRepositoryInformation";
+
+type OnboardingStepDialogContentProps = {
+  step: OnboardingStep;
+};
+
+export const OnboardingStepDialogContent = ({
+  step,
+}: OnboardingStepDialogContentProps) => {
+  const { getStepIndex } = useOnboardingContext();
+  const { repositoryUrl } = useRepositoryInformation();
+
+  const {
+    content: Content,
+    videoUrl,
+    title = step.title,
+  } = getOnboardingStepsContent({ repositoryUrl })[step.id];
+
+  return (
+    <ScrollArea>
+      <Box as="article" flexDirection="column" padding={16} gap={16}>
+        <section>
+          <Text sx={{ marginBottom: 4 }} color="purple9" variant="bold">
+            Step {getStepIndex(step.id) + 1}
+          </Text>
+          <Text variant="h3">{title}</Text>
+          <Content />
+        </section>
+        <Video src={videoUrl} sizing="contain" autoPlay loop />
+      </Box>
+    </ScrollArea>
+  );
+};

package/src/features/onboarding/OnboardingStepDialog/index.ts

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