slice-machine-ui 1.19.2-dev-in-app-guide.2 → 1.19.2-dev-in-app-guide.4

package/pages/_app.tsx

@@ -34,7 +34,7 @@ import { PersistGate } from "redux-persist/integration/react";
 import { ThemeProvider as ThemeUIThemeProvider, useThemeUI } from "theme-ui";
 
 import { AppLayout, AppLayoutContent } from "@components/AppLayout";
-import { InAppGuideDialog } from "@src/features/inAppGuide/InAppGuideDialog";
+import { InAppGuideProvider } from "@src/features/inAppGuide/InAppGuideContext";
 
 import SliceMachineApp from "../components/App";
 import LoadingPage from "../components/LoadingPage";
@@ -123,48 +123,52 @@ function MyApp({
       <ThemeUIThemeProvider theme={theme}>
         <RemoveDarkMode>
           <ThemeProvider mode="light">
-            <ErrorBoundary
-              renderError={(error) => {
-                console.error(error);
-
-                return (
-                  <AppLayout>
-                    <AppLayoutContent>
-                      <Box alignItems="center" justifyContent="center">
-                        <DefaultErrorMessage
-                          title="Error"
-                          description="An error occurred while rendering the app."
-                        />
-                      </Box>
-                    </AppLayoutContent>
-                  </AppLayout>
-                );
-              }}
-            >
-              <TooltipProvider>
-                {!smStore || !serverState ? (
-                  <LoadingPage />
-                ) : (
-                  <Provider store={smStore.store}>
-                    <ConnectedRouter Router={Router}>
-                      <PersistGate loading={null} persistor={smStore.persistor}>
-                        <RouteChangeProvider>
-                          <Suspense fallback={<LoadingPage />}>
-                            <ComponentLayout>
-                              <Component {...pageProps} />
-                            </ComponentLayout>
-                          </Suspense>
-                        </RouteChangeProvider>
+            <TooltipProvider>
+              {!smStore || !serverState ? (
+                <LoadingPage />
+              ) : (
+                <Provider store={smStore.store}>
+                  <ConnectedRouter Router={Router}>
+                    <PersistGate loading={null} persistor={smStore.persistor}>
+                      <ErrorBoundary
+                        renderError={(error) => {
+                          console.error(error);
+
+                          return (
+                            <AppLayout>
+                              <AppLayoutContent>
+                                <Box
+                                  alignItems="center"
+                                  justifyContent="center"
+                                >
+                                  <DefaultErrorMessage
+                                    title="Error"
+                                    description="An error occurred while rendering the app."
+                                  />
+                                </Box>
+                              </AppLayoutContent>
+                            </AppLayout>
+                          );
+                        }}
+                      >
                         <Suspense>
-                          <InAppGuideDialog />
+                          <InAppGuideProvider>
+                            <RouteChangeProvider>
+                              <Suspense fallback={<LoadingPage />}>
+                                <ComponentLayout>
+                                  <Component {...pageProps} />
+                                </ComponentLayout>
+                              </Suspense>
+                            </RouteChangeProvider>
+                          </InAppGuideProvider>
                         </Suspense>
-                      </PersistGate>
-                    </ConnectedRouter>
-                    <ToastContainer />
-                  </Provider>
-                )}
-              </TooltipProvider>
-            </ErrorBoundary>
+                      </ErrorBoundary>
+                    </PersistGate>
+                  </ConnectedRouter>
+                  <ToastContainer />
+                </Provider>
+              )}
+            </TooltipProvider>
           </ThemeProvider>
         </RemoveDarkMode>
       </ThemeUIThemeProvider>

package/src/features/inAppGuide/InAppGuideContext.tsx

@@ -0,0 +1,49 @@
+import {
+  Dispatch,
+  FC,
+  PropsWithChildren,
+  SetStateAction,
+  createContext,
+  useContext,
+} from "react";
+
+import { usePersistedState } from "@src/hooks/usePersistedState";
+
+import { InAppGuideDialog } from "./InAppGuideDialog";
+
+type InAppGuideContextValue = {
+  isInAppGuideOpen: boolean;
+  setIsInAppGuideOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+export const InAppGuideContext = createContext<
+  InAppGuideContextValue | undefined
+>(undefined);
+
+export const InAppGuideProvider: FC<PropsWithChildren> = (props) => {
+  const { children } = props;
+  const [isInAppGuideOpen, setIsInAppGuideOpen] = usePersistedState(
+    true,
+    "isInAppGuideOpen",
+  );
+
+  return (
+    <InAppGuideContext.Provider
+      value={{
+        isInAppGuideOpen,
+        setIsInAppGuideOpen,
+      }}
+    >
+      {children}
+      <InAppGuideDialog />
+    </InAppGuideContext.Provider>
+  );
+};
+
+export const useInAppGuide = () => {
+  const context = useContext(InAppGuideContext);
+  if (context === undefined) {
+    throw new Error("useInAppGuide must be used within a InAppGuideProvider");
+  }
+  return context;
+};

package/src/features/inAppGuide/InAppGuideDialog.tsx

@@ -14,21 +14,30 @@ import {
 import { Counter } from "@src/components/Counter";
 import { FlowerBackgroundIcon } from "@src/icons/FlowerBackgroundIcon";
 import { HelpIcon } from "@src/icons/HelpIcon";
-import { usePersistedState } from "@src/hooks/usePersistedState";
 import { useIsEmptyProject } from "@src/hooks/useIsEmptyProject";
 
-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] = usePersistedState(
-    true,
-    "isInAppGuideOpen",
-  );
+  const { isInAppGuideOpen, setIsInAppGuideOpen } = useInAppGuide();
+  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);
+  //    }}
+  // />
 
-  // TODO: Use IconButton from @prismicio/editor-ui
   const trigger =
-    isInAppGuideOpen === false && isEmptyProject === false ? (
+    isEmptyProject === false ? (
       <Box position="fixed" right={16} bottom={16}>
         <button
           style={{
@@ -63,13 +72,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 }}
+            gap={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}>
@@ -95,12 +116,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,68 +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://images.prismic.io/page-builder-assets/8f5df837-d8c2-4aed-832c-dec21d3915d0_New+Recording+Jul+18+2023+0350+PM.mp4",
-      description:
-        "Try one of our templates to get started after the creation of your first page",
-    },
-    {
-      title: "Code your page",
-      videoUrl:
-        "https://images.prismic.io/page-builder-assets/8f5df837-d8c2-4aed-832c-dec21d3915d0_New+Recording+Jul+18+2023+0350+PM.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://images.prismic.io/page-builder-assets/8f5df837-d8c2-4aed-832c-dec21d3915d0_New+Recording+Jul+18+2023+0350+PM.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://images.prismic.io/page-builder-assets/8f5df837-d8c2-4aed-832c-dec21d3915d0_New+Recording+Jul+18+2023+0350+PM.mp4",
-      description: (
-        <>
-          In your{" "}
-          <TextLink href="TODO" 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://images.prismic.io/page-builder-assets/8f5df837-d8c2-4aed-832c-dec21d3915d0_New+Recording+Jul+18+2023+0350+PM.mp4",
-      description: (
-        <>
-          Run your project on{" "}
-          <TextLink href="TODO" underline>
-            localhost
-          </TextLink>{" "}
-          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" sx={{}}>
+              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/useRepositoryInformation.ts

@@ -0,0 +1,24 @@
+import { useSelector } from "react-redux";
+
+import { SliceMachineStoreType } from "@src/redux/type";
+import { getApiEndpoint, getRepoName } from "@src/modules/environment";
+
+// TODO: This hook should be extracted to a new manager endpoint
+export function useRepositoryInformation() {
+  const { repositoryName, apiEndpoint } = useSelector(
+    (store: SliceMachineStoreType) => ({
+      repositoryName: getRepoName(store),
+      apiEndpoint: getApiEndpoint(store),
+    }),
+  );
+  const repositoryDomain = new URL(apiEndpoint).hostname.replace(".cdn", "");
+  const repositoryUrl = apiEndpoint
+    .replace(".cdn.", ".")
+    .replace("/api/v2", "");
+
+  return {
+    repositoryName,
+    repositoryDomain,
+    repositoryUrl,
+  };
+}