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

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>
+                          </RouteChangeProvider>
+                          <Suspense>
+                            <InAppGuideDialog />
+                          </Suspense>
+                        </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,15 @@
-import { FC, PropsWithChildren, ReactNode } from "react";
+import { FC, PropsWithChildren } from "react";
 
-import * as styles from "./Counter.css";
+import { FlowerBackgroundIcon } from "@src/icons/FlowerBackgroundIcon";
 
-export type CounterProps = PropsWithChildren<{
-  backgroundIcon: ReactNode;
-}>;
+import * as styles from "./Counter.css";
 
-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,7 +12,6 @@ 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";
 
@@ -78,11 +77,7 @@ export const InAppGuideDialog: FC = () => {
       <DialogHeader title={inAppGuideContent.title} />
       <DialogContent>
         <ScrollArea>
-          <Box
-            flexDirection="column"
-            padding={{ inline: 16, block: 8 }}
-            gap={8}
-          >
+          <Box flexDirection="column" padding={{ inline: 16, block: 8 }}>
             <Text>{inAppGuideContent.description}</Text>
           </Box>
 
@@ -94,9 +89,7 @@ export const InAppGuideDialog: FC = () => {
             <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>

package/src/features/inAppGuide/inAppGuideContent.tsx

@@ -52,7 +52,7 @@ export function useInAppGuideContent() {
           <>
             To render the page, run your project in your terminal and open
             localhost to the page UID.{" "}
-            <Text variant="italic" component="span" sx={{}}>
+            <Text variant="italic" component="span">
               Example:
             </Text>{" "}
             localhost:3000/my_page_uid

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"