@alpaca-editor/core 1.0.3908 → 1.0.3912

package/src/tour/Tour.tsx

@@ -2,6 +2,9 @@ import { useState, useEffect } from "react";
 import { useEditContext } from "../client-components";
 import { classNames } from "primereact/utils";
 import { EditContextType } from "../editor/client/editContext";
+import { Logo } from "../editor/ui/Icons";
+import { X } from "lucide-react";
+import { ActionButton } from "../components/ActionButton";
 
 export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
   const [currentStep, setCurrentStep] = useState<string>("start-tour");
@@ -14,7 +17,7 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
 
   const waitForElement = (
     selector: string,
-    timeout: number = 0
+    timeout: number = 0,
   ): Promise<DOMRect | undefined> => {
     if (selector.startsWith("iframe:")) {
       return waitForElementInIframe(selector.substring(7), timeout);
@@ -31,7 +34,7 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
             rect.left - extendFocus / 2,
             rect.top - extendFocus / 2,
             rect.width + extendFocus,
-            rect.height + extendFocus
+            rect.height + extendFocus,
           );
 
           resolve(rect);
@@ -47,13 +50,13 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
 
   const waitForElementInIframe = (
     selector: string,
-    timeout: number = 0
+    timeout: number = 0,
   ): Promise<DOMRect | undefined> => {
     return new Promise<DOMRect | undefined>((resolve, reject) => {
       const startTime = Date.now();
       const checkForElement = () => {
         const iframe = document.querySelector(
-          "iframe.page-iframe"
+          "iframe.page-iframe",
         ) as HTMLIFrameElement;
         if (iframe && iframe.contentDocument) {
           const element = iframe.contentDocument.querySelector(selector);
@@ -64,14 +67,14 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
               elementRect.left + iframeRect.left,
               elementRect.top + iframeRect.top,
               elementRect.width,
-              elementRect.height
+              elementRect.height,
             );
             const extendFocus = step?.extendFocus || 10;
             rect = new DOMRect(
               rect.left - extendFocus / 2,
               rect.top - extendFocus / 2,
               rect.width + extendFocus,
-              rect.height + extendFocus
+              rect.height + extendFocus,
             );
 
             resolve(rect);
@@ -106,7 +109,7 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
 
   const waitForInput = (
     selector: string,
-    minNumberOfCharacters: number = 1
+    minNumberOfCharacters: number = 1,
   ): Promise<void> => {
     return new Promise((resolve) => {
       const checkForInput = () => {
@@ -137,16 +140,16 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
 
   function setNativeValue(
     element: HTMLInputElement | HTMLTextAreaElement,
-    value: string
+    value: string,
   ) {
     const valueSetter = Object.getOwnPropertyDescriptor(
       element.constructor.prototype,
-      "value"
+      "value",
     )?.set;
     const prototype = Object.getPrototypeOf(element);
     const prototypeValueSetter = Object.getOwnPropertyDescriptor(
       prototype,
-      "value"
+      "value",
     )?.set;
 
     if (valueSetter && valueSetter !== prototypeValueSetter) {
@@ -162,7 +165,7 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
   async function simulateTyping(
     element: HTMLInputElement | HTMLTextAreaElement,
     text: string,
-    interval = 35
+    interval = 35,
   ) {
     let i = 0;
 
@@ -380,7 +383,7 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
 
       <div
         style={boxStyle}
-        className="text-gray-800 flex flex-col items-center fade-in"
+        className="fade-in flex flex-col items-center text-gray-800"
       >
         {focusRect && (
           <svg
@@ -418,35 +421,40 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
                     `}
         </style>
         <div
-          className={`relative flex items-stretch justify-center bg-gray-50 rounded-lg border border-gray-800 gap-6 shadow-2xl`}
+          className={`border-theme-secondary relative flex items-stretch justify-center gap-6 rounded-lg border bg-gray-50 shadow-2xl`}
           style={bubbleStyle}
         >
-          <div
-            className="text-xs font-bold cursor-pointer flex items-center gap-2 absolute top-0 right-0 mr-2 mt-2"
-            onClick={stopTour}
-          >
-            <i className="pi pi-times" />
-          </div>
-          <div className="flex flex-col items-center justify-center gap-2 bg-gray-200 p-6 rounded-l-lg">
-            <AlpacaIcon />
+          <div className="flex flex-col items-end justify-end gap-2 pt-5">
+            <div className="bg-wizard-tour aspect-square w-40"></div>
           </div>
-          <div className="flex flex-col items-end justify-center gap-3 p-4 ">
+          <div className="flex flex-col items-end justify-between gap-3 p-6">
             {/* Step Content */}
-            <div className="opacity-100 text-2xl font-bold handwritten text-center flex flex-col items-center max-w-[450px]">
-              <div className="text-4xl mb-4">{step.title}</div>
-              <div>{step.description}</div>
+            <div className="flex items-start">
+              <div className="flex max-w-[450px] flex-col gap-2 text-center text-2xl text-gray-800">
+                <div className="flex items-center gap-3">
+                  <Logo className="w-8" />
+                  <div className="text-xl font-bold">{step.title}</div>
+                </div>
+                <div className="text-xs text-gray-500">{step.description}</div>
+              </div>
+              <button
+                className="text-2xs flex cursor-pointer items-center gap-2 font-bold"
+                onClick={stopTour}
+              >
+                <X className="h-4 w-4" />
+              </button>
             </div>
             {/* Render Buttons Defined in Step Data */}
             <div className="flex gap-2">
               {step.buttons &&
                 step.buttons.map((button, index) => (
-                  <button
+                  <ActionButton
                     key={index}
                     onClick={button.onClick}
                     className={button.className}
                   >
                     {button.label}
-                  </button>
+                  </ActionButton>
                 ))}
             </div>
           </div>
@@ -458,101 +466,101 @@ export function Tour({ tourStopCallback }: { tourStopCallback: () => void }) {
     </>
   );
 }
-function AlpacaIcon() {
-  return (
-    <svg
-      height="80px"
-      width="80px"
-      version="1.1"
-      id="Layer_1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 512 512"
-    >
-      <path
-        style={{ fill: "#EBE4DD" }}
-        d="M102.989,153.011v153.011C119.613,428.825,184.332,506.115,256,506.115
-	s136.387-77.29,153.012-200.092V153.011H102.989z"
-      />
-      <path
-        style={{ fill: "#D8CCBC" }}
-        d="M255.999,153.011v353.103H256c71.668,0,136.387-77.29,153.012-200.092V153.011H255.999z"
-      />
-      <path
-        style={{ fill: "#A58868" }}
-        d="M273.655,435.494h-35.31c0,41.195-17.007,41.195-29.425,41.195V512
-	c16.246,0,34.206-4.021,47.08-18.162C268.873,507.979,286.834,512,303.08,512v-35.31C290.662,476.69,273.655,476.69,273.655,435.494
-	z"
-      />
-      <path
-        style={{ fill: "#947859" }}
-        d="M273.655,435.494H256v58.343C268.873,507.979,286.834,512,303.08,512v-35.31
-	C290.662,476.69,273.655,476.69,273.655,435.494z"
-      />
-      <path
-        style={{ fill: "#EBE4DD" }}
-        d="M126.529,0C81.025,0,44.138,36.888,44.138,82.391s36.888,82.391,82.391,82.391V0z"
-      />
-      <path
-        style={{ fill: "#D8CCBC" }}
-        d="M385.471,164.782c45.503,0,82.391-36.888,82.391-82.391S430.975,0,385.471,0V164.782z"
-      />
-      <path
-        style={{ fill: "#BFA993" }}
-        d="M490.407,247.172c0.643-3.83,0.996-7.758,0.996-11.77c0-39.003-31.618-70.621-70.621-70.621
-	s-70.621,31.618-70.621,70.621c0,4.012,0.352,7.94,0.995,11.77H490.407z"
-      />
-      <path
-        style={{ fill: "#EDEDED" }}
-        d="M420.782,306.023c39.003,0,70.621-31.618,70.621-70.621H350.161
-	C350.161,274.405,381.779,306.023,420.782,306.023z"
-      />
-      <path
-        style={{ fill: "#454449" }}
-        d="M397.241,235.401c0,12.981,10.559,23.54,23.538,23.54h0.002c12.981,0.001,23.54-10.559,23.54-23.54
-	H397.241z"
-      />
-      <path
-        style={{ fill: "#BFA993" }}
-        d="M160.844,247.172c0.643-3.83,0.995-7.758,0.995-11.77c0-39.003-31.618-70.621-70.621-70.621
-	S20.598,196.4,20.598,235.402c0,4.012,0.352,7.94,0.995,11.77H160.844z"
-      />
-      <path
-        style={{ fill: "#EDEDED" }}
-        d="M91.218,306.023c39.003,0,70.621-31.618,70.621-70.621H20.598
-	C20.598,274.405,52.216,306.023,91.218,306.023z"
-      />
-      <path
-        style={{ fill: "#454449" }}
-        d="M67.678,235.401c0,12.981,10.559,23.54,23.538,23.54h0.002c12.981,0.001,23.54-10.559,23.54-23.54
-	H67.678z"
-      />
-      <path
-        style={{ fill: "#D8CCBC" }}
-        d="M391.356,107.187c0-15.527,4.902-33.778-5.082-46.69c-8.818-11.403-28.519-12.694-43.229-20.793
-	c-12.822-7.059-23.38-23.527-39.415-27.235c-14.505-3.356-31.411,6.442-47.63,6.442c-16.218,0-33.125-9.796-47.631-6.442
-	c-16.036,3.708-26.595,20.178-39.415,27.237c-14.71,8.099-34.41,9.391-43.227,20.792c-9.985,12.912-5.082,31.161-5.082,46.689
-	s-4.902,33.778,5.082,46.69c8.818,11.403,28.519,12.693,43.229,20.793c12.821,7.059,23.379,23.527,39.413,27.235
-	c14.505,3.356,31.412-6.442,47.63-6.442s33.125,9.796,47.632,6.442c16.034-3.708,26.592-20.176,39.413-27.237
-	c14.709-8.099,34.411-9.391,43.228-20.792C396.259,140.965,391.356,122.715,391.356,107.187z"
-      />
-      <path
-        style={{ fill: "#BFA993" }}
-        d="M386.274,60.497c-8.818-11.403-28.519-12.694-43.229-20.793
-	c-12.822-7.059-23.38-23.527-39.415-27.235c-14.505-3.356-31.411,6.442-47.63,6.442v176.552c16.218,0,33.125,9.796,47.632,6.442
-	c16.034-3.708,26.592-20.176,39.413-27.237c14.709-8.099,34.411-9.391,43.228-20.792c9.985-12.912,5.082-31.161,5.082-46.689
-	S396.259,73.409,386.274,60.497z"
-      />
-      <path
-        style={{ fill: "#58575D" }}
-        d="M293.664,406.069c-6.186,18.772-22.763,39.469-37.664,39.784
-	c-14.901-0.315-31.478-21.012-37.664-39.784c-2.858-9.591,4.529-17.529,16.478-17.655c14.124,0,28.248,0,42.372,0
-	C289.136,388.54,296.522,396.476,293.664,406.069z"
-      />
-      <path
-        style={{ fill: "#454449" }}
-        d="M277.186,388.414c-7.062,0-14.124,0-21.186,0v57.439c14.901-0.315,31.478-21.012,37.664-39.784
-	C296.522,396.476,289.136,388.54,277.186,388.414z"
-      />
-    </svg>
-  );
-}
+// function AlpacaIcon() {
+//   return (
+//     <svg
+//       height="80px"
+//       width="80px"
+//       version="1.1"
+//       id="Layer_1"
+//       xmlns="http://www.w3.org/2000/svg"
+//       viewBox="0 0 512 512"
+//     >
+//       <path
+//         style={{ fill: "#EBE4DD" }}
+//         d="M102.989,153.011v153.011C119.613,428.825,184.332,506.115,256,506.115
+// 	s136.387-77.29,153.012-200.092V153.011H102.989z"
+//       />
+//       <path
+//         style={{ fill: "#D8CCBC" }}
+//         d="M255.999,153.011v353.103H256c71.668,0,136.387-77.29,153.012-200.092V153.011H255.999z"
+//       />
+//       <path
+//         style={{ fill: "#A58868" }}
+//         d="M273.655,435.494h-35.31c0,41.195-17.007,41.195-29.425,41.195V512
+// 	c16.246,0,34.206-4.021,47.08-18.162C268.873,507.979,286.834,512,303.08,512v-35.31C290.662,476.69,273.655,476.69,273.655,435.494
+// 	z"
+//       />
+//       <path
+//         style={{ fill: "#947859" }}
+//         d="M273.655,435.494H256v58.343C268.873,507.979,286.834,512,303.08,512v-35.31
+// 	C290.662,476.69,273.655,476.69,273.655,435.494z"
+//       />
+//       <path
+//         style={{ fill: "#EBE4DD" }}
+//         d="M126.529,0C81.025,0,44.138,36.888,44.138,82.391s36.888,82.391,82.391,82.391V0z"
+//       />
+//       <path
+//         style={{ fill: "#D8CCBC" }}
+//         d="M385.471,164.782c45.503,0,82.391-36.888,82.391-82.391S430.975,0,385.471,0V164.782z"
+//       />
+//       <path
+//         style={{ fill: "#BFA993" }}
+//         d="M490.407,247.172c0.643-3.83,0.996-7.758,0.996-11.77c0-39.003-31.618-70.621-70.621-70.621
+// 	s-70.621,31.618-70.621,70.621c0,4.012,0.352,7.94,0.995,11.77H490.407z"
+//       />
+//       <path
+//         style={{ fill: "#EDEDED" }}
+//         d="M420.782,306.023c39.003,0,70.621-31.618,70.621-70.621H350.161
+// 	C350.161,274.405,381.779,306.023,420.782,306.023z"
+//       />
+//       <path
+//         style={{ fill: "#454449" }}
+//         d="M397.241,235.401c0,12.981,10.559,23.54,23.538,23.54h0.002c12.981,0.001,23.54-10.559,23.54-23.54
+// 	H397.241z"
+//       />
+//       <path
+//         style={{ fill: "#BFA993" }}
+//         d="M160.844,247.172c0.643-3.83,0.995-7.758,0.995-11.77c0-39.003-31.618-70.621-70.621-70.621
+// 	S20.598,196.4,20.598,235.402c0,4.012,0.352,7.94,0.995,11.77H160.844z"
+//       />
+//       <path
+//         style={{ fill: "#EDEDED" }}
+//         d="M91.218,306.023c39.003,0,70.621-31.618,70.621-70.621H20.598
+// 	C20.598,274.405,52.216,306.023,91.218,306.023z"
+//       />
+//       <path
+//         style={{ fill: "#454449" }}
+//         d="M67.678,235.401c0,12.981,10.559,23.54,23.538,23.54h0.002c12.981,0.001,23.54-10.559,23.54-23.54
+// 	H67.678z"
+//       />
+//       <path
+//         style={{ fill: "#D8CCBC" }}
+//         d="M391.356,107.187c0-15.527,4.902-33.778-5.082-46.69c-8.818-11.403-28.519-12.694-43.229-20.793
+// 	c-12.822-7.059-23.38-23.527-39.415-27.235c-14.505-3.356-31.411,6.442-47.63,6.442c-16.218,0-33.125-9.796-47.631-6.442
+// 	c-16.036,3.708-26.595,20.178-39.415,27.237c-14.71,8.099-34.41,9.391-43.227,20.792c-9.985,12.912-5.082,31.161-5.082,46.689
+// 	s-4.902,33.778,5.082,46.69c8.818,11.403,28.519,12.693,43.229,20.793c12.821,7.059,23.379,23.527,39.413,27.235
+// 	c14.505,3.356,31.412-6.442,47.63-6.442s33.125,9.796,47.632,6.442c16.034-3.708,26.592-20.176,39.413-27.237
+// 	c14.709-8.099,34.411-9.391,43.228-20.792C396.259,140.965,391.356,122.715,391.356,107.187z"
+//       />
+//       <path
+//         style={{ fill: "#BFA993" }}
+//         d="M386.274,60.497c-8.818-11.403-28.519-12.694-43.229-20.793
+// 	c-12.822-7.059-23.38-23.527-39.415-27.235c-14.505-3.356-31.411,6.442-47.63,6.442v176.552c16.218,0,33.125,9.796,47.632,6.442
+// 	c16.034-3.708,26.592-20.176,39.413-27.237c14.709-8.099,34.411-9.391,43.228-20.792c9.985-12.912,5.082-31.161,5.082-46.689
+// 	S396.259,73.409,386.274,60.497z"
+//       />
+//       <path
+//         style={{ fill: "#58575D" }}
+//         d="M293.664,406.069c-6.186,18.772-22.763,39.469-37.664,39.784
+// 	c-14.901-0.315-31.478-21.012-37.664-39.784c-2.858-9.591,4.529-17.529,16.478-17.655c14.124,0,28.248,0,42.372,0
+// 	C289.136,388.54,296.522,396.476,293.664,406.069z"
+//       />
+//       <path
+//         style={{ fill: "#454449" }}
+//         d="M277.186,388.414c-7.062,0-14.124,0-21.186,0v57.439c14.901-0.315,31.478-21.012,37.664-39.784
+// 	C296.522,396.476,289.136,388.54,277.186,388.414z"
+//       />
+//     </svg>
+//   );
+// }

package/src/tour/default-tour.tsx

@@ -19,7 +19,7 @@ export function getDefaultTourSteps(
     firstComponentTextFieldId: string;
     firstComponentRichTextFieldName: string;
     firstComponentRichTextFieldId: string;
-  }
+  },
 ) {
   const tourSteps: Record<string, TourStep> = {
     "start-tour": {
@@ -177,7 +177,7 @@ export function getDefaultTourSteps(
         await delay(5000);
         await waitForInput(
           `[data-field-id='${config.firstComponentTextFieldId}'] input`,
-          5
+          5,
         );
       },
       nextStep: "see-content-update",
@@ -193,7 +193,7 @@ export function getDefaultTourSteps(
         await delay(5000);
         await waitForInput(
           `[data-field-id='${config.firstComponentTextFieldId}'] input`,
-          5
+          5,
         );
       },
       nextStep: "edit-content-inline",
@@ -208,7 +208,7 @@ export function getDefaultTourSteps(
         await delay(5000);
         await waitForInput(
           `[data-field-id='${config.firstComponentRichTextFieldId}'] [contenteditable]`,
-          5
+          5,
         );
       },
       nextStep: "ai-intro",
@@ -244,7 +244,7 @@ export function getDefaultTourSteps(
           (aiTerminal as HTMLTextAreaElement).focus();
           await simulateTyping(
             aiTerminal as HTMLTextAreaElement,
-            `Plase add three components of type ${config.firstComponentTemplateName} with some funny dummy content to the page.`
+            `Plase add three components of type ${config.firstComponentTemplateName} with some funny dummy content to the page.`,
           );
         }
       },
@@ -282,7 +282,8 @@ export function getDefaultTourSteps(
       ],
     },
     error: {
-      description: "Oops, something went wrong.",
+      title: "Oh no...",
+      description: "Something went wrong.",
       buttons: [
         {
           label: (

package/src/tour/preview-tour.tsx

@@ -109,7 +109,8 @@ export function getPreviewTourSteps({
     },
 
     error: {
-      description: "Oops, something went wrong.",
+      title: "Oh no...",
+      description: "Something went wrong.",
       buttons: [
         {
           label: (

package/styles.css

@@ -261,6 +261,20 @@ body {
     opacity: 0.2;
   }
 
+  .bg-wizard-demo {
+    background-image: url("./images/wizard.png");
+    background-position: right;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
+  .bg-wizard-tour {
+    background-image: url("./images/wizard-tour.png");
+    background-position: right;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+
   .p-tree {
     background-color: unset;
   }