slice-machine-ui 1.19.2-dev-in-app-guide.3 → 1.19.2-dev-in-app-guide.5

package/pages/_app.tsx

@@ -35,6 +35,7 @@ import { ThemeProvider as ThemeUIThemeProvider, useThemeUI } from "theme-ui";
 
 import { AppLayout, AppLayoutContent } from "@components/AppLayout";
 import { InAppGuideProvider } from "@src/features/inAppGuide/InAppGuideContext";
+import { InAppGuideDialog } from "@src/features/inAppGuide/InAppGuideDialog";
 
 import SliceMachineApp from "../components/App";
 import LoadingPage from "../components/LoadingPage";
@@ -151,17 +152,18 @@ function MyApp({
                           );
                         }}
                       >
-                        <Suspense>
-                          <InAppGuideProvider>
-                            <RouteChangeProvider>
-                              <Suspense fallback={<LoadingPage />}>
-                                <ComponentLayout>
-                                  <Component {...pageProps} />
-                                </ComponentLayout>
-                              </Suspense>
-                            </RouteChangeProvider>
-                          </InAppGuideProvider>
-                        </Suspense>
+                        <InAppGuideProvider>
+                          <RouteChangeProvider>
+                            <Suspense fallback={<LoadingPage />}>
+                              <ComponentLayout>
+                                <Component {...pageProps} />
+                              </ComponentLayout>
+                            </Suspense>
+                            <Suspense>
+                              <InAppGuideDialog />
+                            </Suspense>
+                          </RouteChangeProvider>
+                        </InAppGuideProvider>
                       </ErrorBoundary>
                     </PersistGate>
                   </ConnectedRouter>

package/src/components/Counter/Counter.css.ts

@@ -11,14 +11,15 @@ export const root = sprinkles({
 export const count = style([
   sprinkles({
     all: "unset",
+    display: "revert",
     color: colors.grey1,
+    fontFamily: "body",
     position: "absolute",
   }),
   {
     fontSize: "9px",
     fontWeight: 500,
     left: "50%",
-    lineHeight: "32px",
     top: "50%",
     transform: "translate(-50%, -50%)",
   },

package/src/components/Counter/Counter.stories.tsx

@@ -1,24 +1,17 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { FlowerBackgroundIcon } from "@src/icons/FlowerBackgroundIcon";
-
 import { Counter } from "./Counter";
 
 type Story = StoryObj<typeof meta>;
 
 const meta = {
   component: Counter,
-  argTypes: {
-    backgroundIcon: { control: { disable: true } },
-    children: { control: { disable: true } },
-  },
 } satisfies Meta<typeof Counter>;
 
 export default meta;
 
 export const Default = {
   args: {
-    backgroundIcon: <FlowerBackgroundIcon />,
-    children: 1,
+    children: "1",
   },
 } satisfies Story;

package/src/components/Counter/Counter.tsx

@@ -1,17 +1,17 @@
-import { FC, PropsWithChildren, ReactNode } from "react";
+import { FC, PropsWithChildren } from "react";
+
+import { FlowerBackgroundIcon } from "@src/icons/FlowerBackgroundIcon";
 
 import * as styles from "./Counter.css";
 
-export type CounterProps = PropsWithChildren<{
-  backgroundIcon: ReactNode;
-}>;
+export type CounterProps = PropsWithChildren;
 
-export const Counter: FC<CounterProps> = (props) => {
-  const { backgroundIcon, children } = props;
+export const Counter: FC<PropsWithChildren> = (props) => {
+  const { children } = props;
 
   return (
     <div className={styles.root}>
-      {backgroundIcon}
+      <FlowerBackgroundIcon />
       <span className={styles.count}>{children}</span>
     </div>
   );

package/src/features/inAppGuide/InAppGuideContext.tsx

@@ -5,12 +5,11 @@ import {
   SetStateAction,
   createContext,
   useContext,
+  useMemo,
 } from "react";
 
 import { usePersistedState } from "@src/hooks/usePersistedState";
 
-import { InAppGuideDialog } from "./InAppGuideDialog";
-
 type InAppGuideContextValue = {
   isInAppGuideOpen: boolean;
   setIsInAppGuideOpen: Dispatch<SetStateAction<boolean>>;
@@ -23,19 +22,18 @@ export const InAppGuideContext = createContext<
 export const InAppGuideProvider: FC<PropsWithChildren> = (props) => {
   const { children } = props;
   const [isInAppGuideOpen, setIsInAppGuideOpen] = usePersistedState(
-    true,
     "isInAppGuideOpen",
+    true,
+  );
+
+  const memoizedValue = useMemo(
+    () => ({ isInAppGuideOpen, setIsInAppGuideOpen }),
+    [isInAppGuideOpen, setIsInAppGuideOpen],
   );
 
   return (
-    <InAppGuideContext.Provider
-      value={{
-        isInAppGuideOpen,
-        setIsInAppGuideOpen,
-      }}
-    >
+    <InAppGuideContext.Provider value={memoizedValue}>
       {children}
-      <InAppGuideDialog />
     </InAppGuideContext.Provider>
   );
 };
@@ -43,7 +41,7 @@ export const InAppGuideProvider: FC<PropsWithChildren> = (props) => {
 export const useInAppGuide = () => {
   const context = useContext(InAppGuideContext);
   if (context === undefined) {
-    throw new Error("useInAppGuide must be used within a InAppGuideProvider");
+    throw new Error("useInAppGuide must be used within an InAppGuideProvider");
   }
   return context;
 };

package/src/features/inAppGuide/InAppGuideDialog.tsx

@@ -12,20 +12,29 @@ import {
 } from "@prismicio/editor-ui";
 
 import { Counter } from "@src/components/Counter";
-import { FlowerBackgroundIcon } from "@src/icons/FlowerBackgroundIcon";
 import { HelpIcon } from "@src/icons/HelpIcon";
 import { useIsEmptyProject } from "@src/hooks/useIsEmptyProject";
-import { useRepositoryInformation } from "@src/hooks/useRepositoryInformation";
 
-import { IN_APP_GUIDE_CONTENT } from "./inAppGuideContent";
+import { useInAppGuideContent } from "./inAppGuideContent";
 import { useInAppGuide } from "./InAppGuideContext";
 
 export const InAppGuideDialog: FC = () => {
   const isEmptyProject = useIsEmptyProject();
   const { isInAppGuideOpen, setIsInAppGuideOpen } = useInAppGuide();
-  const { repositoryUrl } = useRepositoryInformation();
+  const inAppGuideContent = useInAppGuideContent();
 
   // TODO: Use new IconButton component from editor-ui
+  //
+  // It should be used like that:
+  // <IconButton
+  //    color="purple"
+  //    radius="full"
+  //    renderIcon={() => <HelpIcon />}
+  //    onClick={() => {
+  //      setIsInAppGuideOpen(!isInAppGuideOpen);
+  //    }}
+  // />
+
   const trigger =
     isEmptyProject === false ? (
       <Box position="fixed" right={16} bottom={16}>
@@ -62,19 +71,25 @@ export const InAppGuideDialog: FC = () => {
       position="bottomRight"
       size={{
         width: 360,
-        height: 440,
+        height: 456,
       }}
     >
-      <DialogHeader title={IN_APP_GUIDE_CONTENT.title} />
+      <DialogHeader title={inAppGuideContent.title} />
       <DialogContent>
         <ScrollArea>
-          {IN_APP_GUIDE_CONTENT.steps.map((content, index) => (
+          <Box flexDirection="column" padding={{ inline: 16, block: 8 }}>
+            <Text>{inAppGuideContent.description}</Text>
+          </Box>
+
+          <Box>
+            <Separator />
+          </Box>
+
+          {inAppGuideContent.steps.map((content, index) => (
             <Box key={index} flexDirection="column">
               <Box flexDirection="column" padding={16} gap={8}>
                 <Box alignItems="center" gap={8}>
-                  <Counter backgroundIcon={<FlowerBackgroundIcon />}>
-                    {index + 1}
-                  </Counter>
+                  <Counter>{index + 1}</Counter>
                   <Text component="h3" variant="bold">
                     {content.title}
                   </Text>
@@ -86,11 +101,7 @@ export const InAppGuideDialog: FC = () => {
                   controls
                   loop
                 />
-                <Text>
-                  {typeof content.description === "function"
-                    ? content.description(repositoryUrl)
-                    : content.description}
-                </Text>
+                <Text>{content.description}</Text>
               </Box>
 
               <Separator />
@@ -98,12 +109,8 @@ export const InAppGuideDialog: FC = () => {
           ))}
 
           <Box flexDirection="column" padding={16} gap={4}>
-            <Text variant="bold">{IN_APP_GUIDE_CONTENT.successTitle}</Text>
-            <Box flexDirection="column">
-              {IN_APP_GUIDE_CONTENT.successSteps.map((content, index) => (
-                <Text key={index}>• {content}</Text>
-              ))}
-            </Box>
+            <Text variant="bold">{inAppGuideContent.successTitle}</Text>
+            <Text>{inAppGuideContent.successDescription}</Text>
           </Box>
         </ScrollArea>
       </DialogContent>

package/src/features/inAppGuide/inAppGuideContent.tsx

@@ -1,60 +1,67 @@
-import { TextLink } from "@prismicio/editor-ui";
+import { TextLink, Text } from "@prismicio/editor-ui";
 
-export const IN_APP_GUIDE_CONTENT = {
-  title: "Build your first page in 5 minutes",
-  steps: [
-    {
-      title: "Add slice to your page",
-      videoUrl:
-        "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/ADD_SLICE.mp4",
-      description:
-        "Try one of our templates to get started after the creation of your first page",
-    },
-    {
-      title: "Code your page",
-      videoUrl:
-        "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/CODE_SNIP.mp4",
-      description:
-        "Slice Machine provides code snippets. Copy-paste them into your page component to render your page.",
-    },
-    {
-      title: "Push models to the Page Builder",
-      videoUrl:
-        "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PUSH.mp4",
-      description:
-        "You have just created some models, but you can't use them yet. First, you must push them to the Page Builder. The Page Builder is where you create content. Go head — push your models.",
-    },
-    {
-      title: "Create your first page",
-      videoUrl:
-        "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/WRITE.mp4",
-      description: (repositoryUrl: string) => (
-        <>
-          In your{" "}
-          <TextLink href={repositoryUrl} underline>
-            Page Builder
-          </TextLink>
-          , create your first page. Add slices to the page to create content.
-          Then save and publish and come back here.
-        </>
-      ),
-    },
-    {
-      title: "Render your page",
-      videoUrl:
-        "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PREVIEW.mp4",
-      description: "Run your project on localhost to see your first page.",
-    },
-  ],
-  successTitle: "You have made your first page!",
-  successSteps: [
-    "Edit, and style your slices",
-    "Create more pages in the Page Builder",
-    <>
-      Learn how to{" "}
-      <TextLink href="TODO" underline>
-        manage your routes
-      </TextLink>
-    </>,
-  ],
-};
+import { useRepositoryInformation } from "@src/hooks/useRepositoryInformation";
+
+export function useInAppGuideContent() {
+  const { repositoryUrl } = useRepositoryInformation();
+
+  return {
+    title: "Build a page in 5 minutes",
+    description:
+      "Great, now that you have a page type, let's make it a live page!",
+    steps: [
+      {
+        title: "Add slices to your page type",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/ADD_SLICE.mp4",
+        description: "Use slice templates and add them to your page type.",
+      },
+      {
+        title: "Code your page",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/CODE_SNIP.mp4",
+        description:
+          "If you don't already have a page component, copy-paste the page snippets provided in your page type to create one.",
+      },
+      {
+        title: "Push to your Page Builder",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PUSH.mp4",
+        description:
+          "You have just created some models, but you can't use them yet. First, you must push them to the Page Builder. The Page Builder is where you create content. Go head — push your models.",
+      },
+      {
+        title: "Create content",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/WRITE.mp4",
+        description: (
+          <>
+            Open your{" "}
+            <TextLink href={repositoryUrl} underline>
+              Page Builder
+            </TextLink>
+            , create a page, add slices, save and publish. Then, come back here.
+          </>
+        ),
+      },
+      {
+        title: "Render your page",
+        videoUrl:
+          "https://res.cloudinary.com/dmtf1daqp/video/upload/v1700213517/IN-APP-GUIDE-SM/PREVIEW.mp4",
+        description: (
+          <>
+            To render the page, run your project in your terminal and open
+            localhost to the page UID.{" "}
+            <Text variant="italic" component="span">
+              Example:
+            </Text>{" "}
+            localhost:3000/my_page_uid
+          </>
+        ),
+      },
+    ],
+    successTitle: "Next",
+    successDescription:
+      "Create more slices and then go back to the Page Builder to build out your website.",
+  };
+}

package/src/hooks/usePersistedState.ts

@@ -2,21 +2,32 @@ import { Dispatch, SetStateAction, useEffect, useState } from "react";
 
 type PersistedState<T> = [T, Dispatch<SetStateAction<T>>];
 
-export const SLICE_MACHINE_STORAGE_PREFIX = "slice-machine";
+const SLICE_MACHINE_STORAGE_PREFIX = "slice-machine";
 
 export function usePersistedState<T>(
-  defaultValue: T,
   key: string,
+  defaultValue: T,
 ): PersistedState<T> {
   const computedKey = `${SLICE_MACHINE_STORAGE_PREFIX}_${key}`;
+
   const [value, setValue] = useState<T>(() => {
-    const value = localStorage.getItem(computedKey);
+    try {
+      const value = localStorage.getItem(computedKey);
+
+      return value !== null ? (JSON.parse(value) as T) : defaultValue;
+    } catch (error) {
+      console.warn(`Error reading localStorage key “${computedKey}”:`, error);
 
-    return value !== null ? (JSON.parse(value) as T) : defaultValue;
+      return defaultValue;
+    }
   });
 
   useEffect(() => {
-    localStorage.setItem(computedKey, JSON.stringify(value));
+    try {
+      localStorage.setItem(computedKey, JSON.stringify(value));
+    } catch (error) {
+      console.warn(`Error setting localStorage key “${computedKey}”:`, error);
+    }
   }, [computedKey, value]);
 
   return [value, setValue];

package/src/icons/FlowerBackgroundIcon.tsx

@@ -1,12 +1,13 @@
 import { FC } from "react";
 
-export const FlowerBackgroundIcon: FC = () => (
+export const FlowerBackgroundIcon: FC = (props) => (
   <svg
     width="16"
     height="16"
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    {...props}
   >
     <path
       d="M16 8C15.9847 7.44998 15.8169 6.91443 15.5147 6.45381C15.2133 5.99404 14.7893 5.62622 14.2903 5.39293C14.4802 4.87612 14.5202 4.31673 14.4095 3.77778C14.298 3.23797 14.0375 2.74074 13.6586 2.34142C13.2584 1.96254 12.762 1.70285 12.2222 1.59046C11.6833 1.47978 11.1239 1.5198 10.6071 1.70966C10.3746 1.20988 10.0077 0.785015 9.54704 0.48361C9.08642 0.182205 8.55087 0.0136228 8 0C7.44998 0.0144742 6.91613 0.181354 6.45636 0.48361C5.99659 0.785866 5.63133 1.21073 5.4006 1.70966C4.88293 1.5198 4.32184 1.47808 3.78118 1.59046C3.24053 1.70115 2.74244 1.96169 2.34227 2.34142C1.96339 2.74159 1.70456 3.23968 1.59472 3.77863C1.48404 4.31758 1.52661 4.87697 1.71733 5.39293C1.21754 5.62622 0.791826 5.99319 0.488719 6.45296C0.185611 6.91273 0.0161771 7.44913 0 8C0.0170285 8.55087 0.185611 9.08642 0.488719 9.54704C0.791826 10.0068 1.21754 10.3746 1.71733 10.6071C1.52661 11.123 1.48404 11.6824 1.59472 12.2214C1.70541 12.7612 1.96339 13.2584 2.34142 13.6586C2.74159 14.0358 3.23882 14.2946 3.77778 14.4061C4.31673 14.5185 4.87612 14.4777 5.39293 14.2903C5.62622 14.7893 5.99319 15.2133 6.45381 15.5155C6.91358 15.8169 7.44998 15.9847 8 16C8.55087 15.9864 9.08642 15.8186 9.54704 15.5172C10.0077 15.2158 10.3746 14.7901 10.6071 14.2912C11.1213 14.4947 11.685 14.5432 12.2273 14.4308C12.7688 14.3184 13.2661 14.0502 13.6577 13.6586C14.0494 13.2669 14.3184 12.7697 14.4308 12.2273C14.5432 11.685 14.4947 11.1213 14.2903 10.6071C14.7893 10.3738 15.2133 10.0068 15.5155 9.54619C15.8169 9.08642 15.9847 8.55002 16 8Z"