slice-machine-ui 1.19.2-dev-next-release.6 → 1.19.2-dev-in-app-guide.3

package/pages/_app.tsx

@@ -34,6 +34,7 @@ import { PersistGate } from "redux-persist/integration/react";
 import { ThemeProvider as ThemeUIThemeProvider, useThemeUI } from "theme-ui";
 
 import { AppLayout, AppLayoutContent } from "@components/AppLayout";
+import { InAppGuideProvider } from "@src/features/inAppGuide/InAppGuideContext";
 
 import SliceMachineApp from "../components/App";
 import LoadingPage from "../components/LoadingPage";
@@ -129,35 +130,39 @@ function MyApp({
                 <Provider store={smStore.store}>
                   <ConnectedRouter Router={Router}>
                     <PersistGate loading={null} persistor={smStore.persistor}>
-                      <RouteChangeProvider>
-                        <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 fallback={<LoadingPage />}>
-                            <ComponentLayout>
-                              <Component {...pageProps} />
-                            </ComponentLayout>
-                          </Suspense>
-                        </ErrorBoundary>
-                      </RouteChangeProvider>
+                      <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>
+                          <InAppGuideProvider>
+                            <RouteChangeProvider>
+                              <Suspense fallback={<LoadingPage />}>
+                                <ComponentLayout>
+                                  <Component {...pageProps} />
+                                </ComponentLayout>
+                              </Suspense>
+                            </RouteChangeProvider>
+                          </InAppGuideProvider>
+                        </Suspense>
+                      </ErrorBoundary>
                     </PersistGate>
                   </ConnectedRouter>
                   <ToastContainer />

package/src/components/ContentTabs/ContentTabs.css.ts

@@ -30,7 +30,7 @@ export const trigger = style([
       "&:not(:last-child)": { marginRight: vars.space[16] },
       '&[data-state="active"]': {
         boxShadow: "inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor",
-        color: vars.color.purple9,
+        color: vars.color.purpleLight9,
       },
     },
   },

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

@@ -0,0 +1,25 @@
+import { colors, sprinkles } from "@prismicio/editor-ui";
+import { style } from "@vanilla-extract/css";
+
+export const root = sprinkles({
+  all: "unset",
+  display: "inline-flex",
+  alignItems: "center",
+  position: "relative",
+});
+
+export const count = style([
+  sprinkles({
+    all: "unset",
+    color: colors.grey1,
+    position: "absolute",
+  }),
+  {
+    fontSize: "9px",
+    fontWeight: 500,
+    left: "50%",
+    lineHeight: "32px",
+    top: "50%",
+    transform: "translate(-50%, -50%)",
+  },
+]);

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

@@ -0,0 +1,24 @@
+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,
+  },
+} satisfies Story;

package/src/components/Counter/Counter.tsx

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

package/src/components/Counter/index.ts

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

package/src/components/SideNav/SideNav.css.ts

@@ -117,7 +117,7 @@ export const repositoryLinkIcon = style([
   }),
   {
     ":focus": {
-      borderColor: vars.color.purple8,
+      borderColor: vars.color.purpleLight10,
       boxShadow: vars.boxShadow.focus,
     },
   },
@@ -208,13 +208,13 @@ export const link = style([
       },
       // Not Active & Focus
       "&:not([data-active=true]):focus": {
-        borderColor: vars.color.purple8,
+        borderColor: vars.color.purpleLight10,
       },
       // Active & Default
       "&[data-active=true]": {
-        backgroundColor: vars.color.purple12,
-        borderColor: vars.color.purple8,
-        color: vars.color.purple8,
+        backgroundColor: vars.color.purpleLight3,
+        borderColor: vars.color.purpleLight10,
+        color: vars.color.purpleLight10,
       },
       // Active & Hover
       "&[data-active=true]:hover": {
@@ -222,7 +222,7 @@ export const link = style([
       },
       // Parent list item is open
       '[data-state="open"] > &, [data-state="open"] > &:hover': {
-        borderColor: vars.color.purple8,
+        borderColor: vars.color.purpleLight10,
         boxShadow: vars.boxShadow.focus,
       },
     },
@@ -239,7 +239,7 @@ export const linkIcon = style([
       },
       // Active
       [`${link}[data-active=true] &`]: {
-        fill: vars.color.purple8,
+        fill: vars.color.purpleLight10,
       },
     },
   },
@@ -283,9 +283,9 @@ export const rightElementPill = style([
     selectors: {
       // Not Active
       [`${link}:not([data-active=true]) &`]: {
-        backgroundColor: vars.color.purple9,
-        borderColor: vars.color.purple8,
-        color: vars.color.purple12,
+        backgroundColor: vars.color.purpleLight9,
+        borderColor: vars.color.purpleLight10,
+        color: vars.color.purpleLight3,
       },
       // Active
       [`${link}[data-active=true] &`]: {
@@ -373,7 +373,7 @@ export const updateInfoLink = style([
     fontWeight: 600,
     lineHeight: "24px",
     ":focus": {
-      borderColor: vars.color.purple8,
+      borderColor: vars.color.purpleLight10,
       boxShadow: vars.boxShadow.focus,
     },
     selectors: {

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

@@ -0,0 +1,112 @@
+import { FC } from "react";
+import {
+  Box,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  ScrollArea,
+  Separator,
+  Text,
+  Video,
+  vars,
+} 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 { useInAppGuide } from "./InAppGuideContext";
+
+export const InAppGuideDialog: FC = () => {
+  const isEmptyProject = useIsEmptyProject();
+  const { isInAppGuideOpen, setIsInAppGuideOpen } = useInAppGuide();
+  const { repositoryUrl } = useRepositoryInformation();
+
+  // TODO: Use new IconButton component from editor-ui
+  const trigger =
+    isEmptyProject === false ? (
+      <Box position="fixed" right={16} bottom={16}>
+        <button
+          style={{
+            all: "unset",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "pointer",
+            borderRadius: "50%",
+            backgroundColor: vars.color.greyDark1,
+            border: `1px solid ${vars.color.greyDark6}`,
+            height: 32,
+            width: 32,
+          }}
+          onClick={() => {
+            setIsInAppGuideOpen(!isInAppGuideOpen);
+          }}
+        >
+          <HelpIcon />
+        </button>
+      </Box>
+    ) : undefined;
+
+  return (
+    <Dialog
+      trigger={trigger}
+      modal={false}
+      open={isInAppGuideOpen && isEmptyProject === false}
+      onOpenChange={(open) => {
+        setIsInAppGuideOpen(open);
+      }}
+      position="bottomRight"
+      size={{
+        width: 360,
+        height: 440,
+      }}
+    >
+      <DialogHeader title={IN_APP_GUIDE_CONTENT.title} />
+      <DialogContent>
+        <ScrollArea>
+          {IN_APP_GUIDE_CONTENT.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>
+                  <Text component="h3" variant="bold">
+                    {content.title}
+                  </Text>
+                </Box>
+                <Video
+                  src={content.videoUrl}
+                  sizing="contain"
+                  autoPlay
+                  controls
+                  loop
+                />
+                <Text>
+                  {typeof content.description === "function"
+                    ? content.description(repositoryUrl)
+                    : content.description}
+                </Text>
+              </Box>
+
+              <Separator />
+            </Box>
+          ))}
+
+          <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>
+          </Box>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/features/inAppGuide/inAppGuideContent.tsx

@@ -0,0 +1,60 @@
+import { TextLink } 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>
+    </>,
+  ],
+};

package/src/features/labs/labsList/LabsListItem.tsx

@@ -14,7 +14,7 @@ export const LabsListItem: FC<LabsListItemProps> = ({
   children,
 }) => {
   return (
-    <Card variant="outlined" style={{ padding: 0 }}>
+    <Card variant="outlined">
       <Box gap={8} padding={16}>
         <Box padding={{ top: 6 }}>
           <Icon name="viewDay" size="medium" color="grey11" />

package/src/hooks/usePersistedState.ts

@@ -0,0 +1,23 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+type PersistedState<T> = [T, Dispatch<SetStateAction<T>>];
+
+export const SLICE_MACHINE_STORAGE_PREFIX = "slice-machine";
+
+export function usePersistedState<T>(
+  defaultValue: T,
+  key: string,
+): PersistedState<T> {
+  const computedKey = `${SLICE_MACHINE_STORAGE_PREFIX}_${key}`;
+  const [value, setValue] = useState<T>(() => {
+    const value = localStorage.getItem(computedKey);
+
+    return value !== null ? (JSON.parse(value) as T) : defaultValue;
+  });
+
+  useEffect(() => {
+    localStorage.setItem(computedKey, JSON.stringify(value));
+  }, [computedKey, value]);
+
+  return [value, setValue];
+}

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,
+  };
+}

package/src/icons/FlowerBackgroundIcon.tsx

@@ -0,0 +1,16 @@
+import { FC } from "react";
+
+export const FlowerBackgroundIcon: FC = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <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"
+      fill="#6E56CF"
+    />
+  </svg>
+);

package/src/icons/HelpIcon.tsx

@@ -0,0 +1,19 @@
+import type { FC, SVGProps } from "react";
+
+export const HelpIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.5 18.9824C15.9675 18.7377 18.7377 15.9675 18.9824 12.5H15.9691C15.7434 14.3094 14.3094 15.7434 12.5 15.9691V18.9824ZM15.9691 11.5H18.9824C18.7377 8.03251 15.9675 5.2623 12.5 5.01758V8.03095C14.3094 8.25657 15.7434 9.69064 15.9691 11.5ZM11.5 18.9824V15.9691C9.69064 15.7434 8.25657 14.3094 8.03095 12.5H5.01758C5.2623 15.9675 8.03251 18.7377 11.5 18.9824ZM5.01758 11.5H8.03095C8.25657 9.69064 9.69064 8.25657 11.5 8.03095V5.01758C8.03251 5.2623 5.2623 8.03251 5.01758 11.5ZM9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
+      fill="#EDEDEF"
+    />
+  </svg>
+);

package/out/_next/static/66j49QzF8CgRcsFMiHqJx/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST=function(s,c,e,a,t,i,b,n,f,u){return{__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":[c,i,b,"static/chunks/pages/index-5266b7f0ca55025a.js"],"/_error":["static/chunks/pages/_error-69b4f498bafdd188.js"],"/changelog":["static/chunks/870-0c7a8a9622de78b7.js","static/chunks/pages/changelog-75b0bf58d1f3045d.js"],"/changes":[e,"static/chunks/8eec4907-b712959d9f984b68.js","static/chunks/918-38d08f1e885b222d.js",s,a,"static/css/f585032018f6024b.css","static/chunks/pages/changes-9dcb1cdaa8b10560.js"],"/custom-types":[c,i,b,"static/chunks/pages/custom-types-2f5664d9492b13fb.js"],"/custom-types/[customTypeId]":[n,s,c,t,f,u,"static/chunks/pages/custom-types/[customTypeId]-aa37e07c96c8f9b5.js"],"/labs":["static/chunks/pages/labs-2349c21fbac1bd23.js"],"/page-types/[pageTypeId]":[n,s,c,t,f,u,"static/chunks/pages/page-types/[pageTypeId]-d445f5cabeb460c0.js"],"/slices":[e,s,a,"static/css/22d69420bda374a7.css","static/chunks/pages/slices-247c480530e98426.js"],"/slices/[lib]/[sliceName]/[variation]":[e,s,a,t,"static/css/e4f4acc81f000d9c.css","static/chunks/pages/slices/[lib]/[sliceName]/[variation]-c9b5ff7076d2b19b.js"],"/slices/[lib]/[sliceName]/[variation]/simulator":[e,"static/chunks/72585f70-28b4d7d5384b3703.js","static/chunks/18539003-1bb05c8aa7db2bc2.js","static/chunks/585-f3dca093db4b3792.js","static/chunks/pages/slices/[lib]/[sliceName]/[variation]/simulator-5e441f8b049cf91b.js"],sortedPages:["/","/_app","/_error","/changelog","/changes","/custom-types","/custom-types/[customTypeId]","/labs","/page-types/[pageTypeId]","/slices","/slices/[lib]/[sliceName]/[variation]","/slices/[lib]/[sliceName]/[variation]/simulator"]}}("static/chunks/958-2b881a5b68ff11ba.js","static/chunks/550-1dafbcec5d50b384.js","static/chunks/c8eae200-966ce352f7b5d2b9.js","static/chunks/80-c513d12da6156fb7.js","static/chunks/482-e6bbd1fcdcdf79ad.js","static/chunks/840-c317c8ff8de0f202.js","static/css/26b51745402a92af.css","static/chunks/125-e3857af2068bbedf.js","static/chunks/904-d5dfccdb4d9ab010.js","static/css/1fbd45881dcf43c4.css"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();