slice-machine-ui 1.20.1-dev-environments.2 → 1.20.1-dev-next-release.4

package/src/features/inAppGuide/InAppGuideContext.tsx

@@ -0,0 +1,47 @@
+import {
+  Dispatch,
+  FC,
+  PropsWithChildren,
+  SetStateAction,
+  createContext,
+  useContext,
+  useMemo,
+} from "react";
+
+import { usePersistedState } from "@src/hooks/usePersistedState";
+
+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(
+    "isInAppGuideOpen",
+    true,
+  );
+
+  const memoizedValue = useMemo(
+    () => ({ isInAppGuideOpen, setIsInAppGuideOpen }),
+    [isInAppGuideOpen, setIsInAppGuideOpen],
+  );
+
+  return (
+    <InAppGuideContext.Provider value={memoizedValue}>
+      {children}
+    </InAppGuideContext.Provider>
+  );
+};
+
+export const useInAppGuide = () => {
+  const context = useContext(InAppGuideContext);
+  if (context === undefined) {
+    throw new Error("useInAppGuide must be used within an InAppGuideProvider");
+  }
+  return context;
+};

package/src/features/inAppGuide/InAppGuideDialog.tsx

@@ -0,0 +1,97 @@
+import { FC } from "react";
+import {
+  Box,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  IconButton,
+  ScrollArea,
+  Separator,
+  Text,
+  Video,
+} from "@prismicio/editor-ui";
+
+import { Counter } from "@src/components/Counter";
+import { HelpIcon } from "@src/icons/HelpIcon";
+import { useIsEmptyProject } from "@src/hooks/useIsEmptyProject";
+
+import { useInAppGuideContent } from "./inAppGuideContent";
+import { useInAppGuide } from "./InAppGuideContext";
+
+export const InAppGuideDialog: FC = () => {
+  const isEmptyProject = useIsEmptyProject();
+  const { isInAppGuideOpen, setIsInAppGuideOpen } = useInAppGuide();
+  const inAppGuideContent = useInAppGuideContent();
+
+  const trigger =
+    isEmptyProject === false ? (
+      <Box position="fixed" right={16} bottom={16}>
+        <IconButton
+          color="purple"
+          icon={<HelpIcon />}
+          onClick={() => {
+            setIsInAppGuideOpen(!isInAppGuideOpen);
+          }}
+          radius="full"
+          variant="solid"
+        />
+      </Box>
+    ) : undefined;
+
+  return (
+    <Dialog
+      trigger={trigger}
+      modal={false}
+      open={isInAppGuideOpen && isEmptyProject === false}
+      onOpenChange={(open) => {
+        setIsInAppGuideOpen(open);
+      }}
+      position="bottomRight"
+      size={{
+        width: 360,
+        height: 456,
+      }}
+    >
+      <DialogHeader title={inAppGuideContent.title} />
+      <DialogContent>
+        <ScrollArea>
+          <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>{index + 1}</Counter>
+                  <Text component="h3" variant="bold">
+                    {content.title}
+                  </Text>
+                </Box>
+                <Video
+                  src={content.videoUrl}
+                  sizing="contain"
+                  autoPlay
+                  controls
+                  loop
+                />
+                <Text>{content.description}</Text>
+              </Box>
+
+              <Separator />
+            </Box>
+          ))}
+
+          <Box flexDirection="column" padding={16} gap={4}>
+            <Text variant="bold">{inAppGuideContent.successTitle}</Text>
+            <Text>{inAppGuideContent.successDescription}</Text>
+          </Box>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+};

package/src/features/inAppGuide/inAppGuideContent.tsx

@@ -0,0 +1,65 @@
+import { TextLink, Text } from "@prismicio/editor-ui";
+
+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 visit the
+            page on localhost (e.g.{" "}
+            <Text component="code">localhost:3000/example-page</Text>).
+          </>
+        ),
+      },
+    ],
+    successTitle: "Next",
+    successDescription:
+      "Create more slices and then go back to the Page Builder to build out your website.",
+  };
+}

package/src/hooks/usePersistedState.ts

@@ -0,0 +1,34 @@
+import { Dispatch, SetStateAction, useEffect, useState } from "react";
+
+type PersistedState<T> = [T, Dispatch<SetStateAction<T>>];
+
+const SLICE_MACHINE_STORAGE_PREFIX = "slice-machine";
+
+export function usePersistedState<T>(
+  key: string,
+  defaultValue: T,
+): PersistedState<T> {
+  const computedKey = `${SLICE_MACHINE_STORAGE_PREFIX}_${key}`;
+
+  const [value, setValue] = useState<T>(() => {
+    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 defaultValue;
+    }
+  });
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(computedKey, JSON.stringify(value));
+    } catch (error) {
+      console.warn(`Error setting localStorage key “${computedKey}”:`, error);
+    }
+  }, [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,17 @@
+import { FC } from "react";
+
+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"
+      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/chunks/958-c90d60818f1c468a.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[958],{24804:function(e,t,n){"use strict";n.d(t,{Zb:function(){return p},T$:function(){return C},eW:function(){return b},ZB:function(){return f},Lm:function(){return x}});var o=n(67557),c=n(62230),i=n(85244),d=n(98240),s=n(52322),a=n(50002),r=n(22715),l=n(6277),u=n(2784);n(9131);var h={solid:"_1ecs97d3c _1ecs97dap _1ecs97d4fs _1ecs97d4n5",outlined:"_1ecs97d2i _1ecs97d9v _1ecs97dw _1ecs97d89 _1ecs97d2w _1ecs97da9 _1ecs97d4ey _1ecs97d4mb _1ecs97d4ek _1ecs97d4lx"},m={div:"_1ecs97de7i _1ecs97de7l _1ecs97de7v",img:"kedahr9 _1ecs97defl _1ecs97de85"},v={small:"kedahr2",medium:"kedahr3"},_={solid:"kedahr4 _1ecs97d1u _1ecs97d97 _1ecs97d4fm _1ecs97d4mz",outlined:"kedahr5 _1ecs97d18 _1ecs97d8l _1ecs97d4ee _1ecs97d4lr"},p=function(e){var t,n=e.checked,r=e.size,m=e.variant,p=void 0===m?"solid":m,f=(e.interactive,e.disabled,e.onClick,e.href,e.component),C=void 0===f?"a":f,b=(e.replace,(0,d.Z)(e,["checked","size","variant","interactive","disabled","onClick","href","component","replace"])),x=(0,i.Z)((0,c.Z)({},b),{className:(0,l.W)("_1ecs97de7i _1ecs97de7k _1ecs97de7t _1ecs97d39c _1ecs97d3gp _1ecs97de99 _1ecs97deal _1ecs97deaz _1ecs97de7j _1ecs97de89 _1ecs97de8d",v[void 0===r?"medium":r],_[p],(t={},(0,o.Z)(t,"kedahr6",e.interactive),(0,o.Z)(t,h[p],e.interactive),t)),"data-state":!0===(void 0!==n&&n)?"checked":void 0});return!0===e.interactive&&void 0===e.href?(0,s.jsx)("div",(0,i.Z)((0,c.Z)({},x),{"data-disabled":!0===e.disabled?"":void 0,onClick:function(t){if(!0!==e.disabled&&void 0!==e.onClick){var n=t.target;(0,a.JY)(n)===t.currentTarget&&e.onClick(t)}},tabIndex:!0===e.disabled?void 0:0})):!0===e.interactive?(0,u.createElement)(C,(0,c.Z)((0,i.Z)((0,c.Z)({},x),{href:e.href,onClick:function(e){var t=e.target;(0,a.JY)(t)!==e.currentTarget&&e.preventDefault()}}),"a"===C?{}:{replace:e.replace})):(0,s.jsx)("div",(0,c.Z)({},x))},f=function(e){var t=e.className,n=e.component,o=void 0===n?"img":n,a=e.overlay,r=(0,d.Z)(e,["className","component","overlay"]);return(0,s.jsxs)("div",{className:"kedahr7 _1ecs97de7i _1ecs97de7k _1ecs97de7t _1ecs97de7w _1ecs97de7v _1ecs97defr _1ecs97de8d",children:[(0,u.createElement)(o,(0,i.Z)((0,c.Z)({},r),{className:(0,l.W)(m[o],t)})),Boolean(a)?(0,s.jsx)("div",{className:"kedahra _1ecs97de7i _1ecs97de7l _1ecs97dehq _1ecs97de8b _1ecs97de90",children:a}):void 0]})},C=function(e){return(0,s.jsx)("div",(0,i.Z)((0,c.Z)({},e),{className:"kedahrc kedahrb _1ecs97de7i _1ecs97de7k _1ecs97de7q _1ecs97de7j _1ecs97de7u _1ecs97deff _1ecs97de80"}))},b=function(e){var t=e.action,n=e.subtitle,o=e.title,a=(0,d.Z)(e,["action","subtitle","title"]);return(0,s.jsxs)("div",(0,i.Z)((0,c.Z)({},a),{className:"kedahrd kedahrb _1ecs97de7i _1ecs97de7k _1ecs97de7q _1ecs97de7j _1ecs97de7u _1ecs97dehg _1ecs97defh",children:[(0,s.jsxs)("div",{className:"kedahre _1ecs97de7i _1ecs97de7k _1ecs97de7t _1ecs97de7w _1ecs97de7v _1ecs97dedf",children:[(0,s.jsx)(r.xv,{component:"span",noWrap:!0,variant:"bold",children:o}),(0,s.jsx)(r.xv,{color:"grey11",component:"span",noWrap:!0,variant:"small",children:n})]}),t]}))},x=function(e){var t=e.children,n=(0,d.Z)(e,["children"]);return(0,s.jsx)("div",(0,i.Z)((0,c.Z)({},n),{className:"kedahrf _1ecs97de7i _1ecs97de7k _1ecs97de7t _1ecs97def9 _1ecs97deje _1ecs97de7z _1ecs97depd _1ecs97de8b",children:(0,s.jsx)(r.xv,{align:"center",color:"inherit",component:"span",noWrap:!0,variant:"smallBold",children:t})}))}},34728:function(e,t,n){"use strict";n.d(t,{O:function(){return s}});var o=n(52322),c=n(22715),i=n(32681),d=n(79096),s=function(e){var t=function(e){var t=a[e.modelType];switch(e.modelStatus){case i.G.New:return{badgeColor:"green",badgeTitle:"New",tooltipContent:"This ".concat(t," exists only locally. Upon sync, it will be pushed to your remote repository.")};case i.G.Modified:return{badgeColor:"amber",badgeTitle:"Modified",tooltipContent:"This ".concat(t," has been modified locally. Upon sync, changes will be pushed to your remote repository.")};case i.G.Synced:return{badgeColor:"purple",badgeTitle:"Synced",tooltipContent:"This ".concat(t," is in sync with the remote repository.")};case i.G.Deleted:return{badgeColor:"tomato",badgeTitle:"Deleted",tooltipContent:"This ".concat(t," has been deleted locally.")};case i.G.Unknown:if(!e.isOnline)return{badgeColor:"grey",badgeTitle:"Unknown",tooltipContent:"Data from the remote repository could not be fetched (no internet connection)."};if(e.authStatus===d.t.UNAUTHORIZED)return{badgeColor:"grey",badgeTitle:"Unknown",tooltipContent:"Data from the remote repository could not be fetched (not connected to Prismic)."};if(e.authStatus===d.t.FORBIDDEN)return{badgeColor:"grey",badgeTitle:"Unknown",tooltipContent:"Data from the remote repository could not be fetched (you don't have access to the repository)."};default:return{badgeColor:"grey",badgeTitle:"Unknown",tooltipContent:"Data from the remote repository could not be fetched (unknown error)."}}}(e),n=t.badgeColor,s=t.badgeTitle,r=t.tooltipContent;return(0,o.jsx)(c.u,{content:r,side:"bottom",children:(0,o.jsx)(c.Ct,{color:n,title:s})})},a={CustomType:"type",Slice:"slice"}},65958:function(e,t,n){"use strict";n.d(t,{b:function(){return _}});var o=n(62230),c=n(85244),i=n(52322),d=n(22715),s=n(39097),a=n.n(s),r=n(30180),l=n(24804),u=n(5479),h=n(34728),m=n(49451),v=function(e){return(0,i.jsx)("svg",(0,c.Z)((0,o.Z)({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),{children:(0,i.jsx)("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M4 5.5C4 4.67157 4.67157 4 5.5 4H18.5C19.3284 4 20 4.67157 20 5.5V12.4413C20 12.4512 19.9997 12.461 19.9991 12.4707C20.0072 12.6083 19.9586 12.7485 19.8536 12.8536C19.6583 13.0488 19.3417 13.0488 19.1464 12.8536L16.3536 10.0607C16.1583 9.8654 15.8417 9.8654 15.6464 10.0607L11.8536 13.8536C11.6583 14.0488 11.3417 14.0488 11.1464 13.8536L9.35355 12.0607C9.15829 11.8654 8.84171 11.8654 8.64645 12.0607L5 15.7071V18.5C5 18.7761 5.22386 19 5.5 19H12.5C12.7761 19 13 19.2239 13 19.5C13 19.7761 12.7761 20 12.5 20H5.5C4.67157 20 4 19.3284 4 18.5V15.5003V15.4997V5.5ZM11.5 12.7929L14.9393 9.35355C15.5251 8.76777 16.4749 8.76777 17.0607 9.35355L19 11.2929V5.5C19 5.22386 18.7761 5 18.5 5H5.5C5.22386 5 5 5.22386 5 5.5V14.2929L7.93934 11.3536C8.52513 10.7678 9.47487 10.7678 10.0607 11.3536L11.5 12.7929ZM16.5 13C16.7761 13 17 13.2239 17 13.5V16H19.5C19.7761 16 20 16.2239 20 16.5C20 16.7761 19.7761 17 19.5 17H17V19.5C17 19.7761 16.7761 20 16.5 20C16.2239 20 16 19.7761 16 19.5V17H13.5C13.2239 17 13 16.7761 13 16.5C13 16.2239 13.2239 16 13.5 16H16V13.5C16 13.2239 16.2239 13 16.5 13Z",fill:"currentColor"})}))},_=function(e){var t,n=e.action,s=e.isComingSoon,_=void 0!==s&&s,C=e.isDeleted,b=e.onUpdateScreenshot,x=e.selected,g=void 0!==x&&x,j=e.slice,k=e.variant,y=e.variationId,Z=r.dN.variation(j,y);if(!Z)return null;var w=(0,u.d7)(j,Z),N=_||void 0!==C&&C,T=!N&&!!b,S="outlined"===k,D=void 0!==y;return t="selection"===e.mode?{disabled:N,interactive:!0,onClick:function(){e.onSelectedChange(!g)}}:N?{interactive:!1}:{component:a(),href:m.Y.getBuilderPagePathname({libraryName:j.href,sliceName:j.model.name,variationId:Z.id}),interactive:!0,replace:e.replace},(0,i.jsxs)(l.Zb,(0,c.Z)((0,o.Z)({"aria-label":"".concat(j.model.name," ").concat(Z.name," slice card"),checked:g,"data-cy":"shared-slice-card-".concat(j.model.id),"data-testid":"shared-slice-card"},t,"outlined"===k?{size:"small",variant:"outlined"}:{}),{children:[void 0!==w?(0,i.jsx)(l.ZB,{alt:"Preview image",overlay:T&&!S?(0,i.jsx)(d.xu,{alignItems:"center",justifyContent:"center",children:(0,i.jsx)(p,{onClick:b})}):void 0,src:w}):(0,i.jsx)(l.ZB,{component:"div",children:(0,i.jsxs)(d.xu,{alignItems:"center",flexDirection:"column",gap:8,justifyContent:"center",children:[(0,i.jsx)(d.xv,{color:"grey11",component:"span",children:"No screenshot available"}),T&&!S?(0,i.jsx)(p,{onClick:b}):void 0]})}),(0,i.jsx)(l.eW,{action:"checkbox"===n.type&&"selection"===e.mode?(0,i.jsx)("div",{onClick:function(e){return e.stopPropagation()},children:(0,i.jsx)(d.XZ,{checked:g,disabled:N,onCheckedChange:e.onSelectedChange})}):"menu"===n.type?(0,i.jsxs)(d.h_,{modal:!0,children:[(0,i.jsx)(d.$F,{disabled:N,children:(0,i.jsx)(d.hU,{"data-cy":"slice-action-icon",icon:"moreVert"})}),(0,i.jsxs)(d.AW,{align:"end","data-cy":"slice-action-icon-dropdown",children:[T&&S?(0,i.jsx)(d.Xi,{onSelect:b,startIcon:(0,i.jsx)(v,{}),children:"Update screenshot"}):void 0,(0,i.jsx)(d.Xi,{onSelect:n.onRename,startIcon:(0,i.jsx)(d.I5,{name:"edit"}),children:"Rename"}),!0===n.removeDisabled&&D?(0,i.jsx)(d.u,{content:"The slice needs to have at least one variation.",side:"bottom",stableMount:!0,children:(0,i.jsx)(f,{disabled:!0,onSelect:n.onRemove})}):(0,i.jsx)(f,{disabled:!0===n.removeDisabled,onSelect:n.onRemove})]})]}):"remove"===n.type?(0,i.jsx)(d.hU,{icon:"close",onClick:function(){return!N&&n.onRemove()}}):"status"===n.type?(0,i.jsx)(h.O,{authStatus:n.authStatus,isOnline:n.isOnline,modelStatus:n.modelStatus,modelType:"Slice"}):void 0,subtitle:(0,i.jsxs)(i.Fragment,{children:[D?Z.id:"".concat(j.model.variations.length," variation").concat(j.model.variations.length>1?"s":""),_?(0,i.jsxs)(d.xv,{color:"purple11",component:"span",variant:"small",children:[" ","• (coming soon)"]}):void 0]}),title:D?Z.name:j.model.name}),T&&!D&&(0,u.cx)(j)>0?(0,i.jsx)(l.Lm,{children:"Missing screenshot"}):void 0]}))},p=function(e){return(0,i.jsx)(d.zx,{onClick:e.onClick,renderStartIcon:function(){return(0,i.jsx)(v,{color:d.TV.color.greyLight11})},variant:"secondary",children:"Update screenshot"})},f=function(e){return(0,i.jsx)(d.Xi,(0,c.Z)((0,o.Z)({},e),{color:"tomato",startIcon:(0,i.jsx)(d.I5,{name:"delete"}),children:"Delete"}))}},49451:function(e,t,n){"use strict";n.d(t,{Y:function(){return o}});var o={getBuilderPagePathname:function(e){return"/slices/".concat(e.libraryName.replaceAll("/","--"),"/").concat(e.sliceName,"/").concat(e.variationId)}}},9131:function(){}}]);

package/out/_next/static/chunks/pages/index-941b44c74dd339e4.js

@@ -1 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[405],{87314:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/",function(){return n(40208)}])},40208:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return _}});var r=n(52322),s=n(840),i=n(2784),o=n(56580),l=n(22715),c=n(17329),a=n(80131),u=n(90374),x=n(3098),C=n(32665),h=n(62230),p=n(85244),d=function(e){return(0,r.jsxs)("svg",(0,p.Z)((0,h.Z)({width:"127",height:"101",viewBox:"0 0 127 101",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e),{children:[(0,r.jsx)("line",{x1:"0.353553",y1:"35.9863",x2:"15.5467",y2:"51.1794",stroke:"#C8C7CB"}),(0,r.jsx)("line",{x1:"42.1959",y1:"0.87059",x2:"47.7569",y2:"21.6248",stroke:"#C8C7CB"}),(0,r.jsx)("line",{x1:"99.5522",y1:"8.40984",x2:"87.2281",y2:"26.0104",stroke:"#C8C7CB"}),(0,r.jsx)("line",{x1:"126.408",y1:"41.0854",x2:"108.807",y2:"53.4094",stroke:"#C8C7CB"}),(0,r.jsx)("path",{d:"M93.5 93L76 81.9883L93.5 87V93Z",fill:"#6F6E77"}),(0,r.jsx)("path",{d:"M92 100.488H36C34.8954 100.488 34 99.5929 34 98.4883V37.9883C34 36.8837 34.8954 35.9883 36 35.9883H92C93.1046 35.9883 94 36.8837 94 37.9883V98.4883C94 99.5929 93.1046 100.488 92 100.488Z",stroke:"#1A1523"}),(0,r.jsx)("path",{d:"M74.4297 58.7688C71.569 63.3138 63.3588 74.9883 54.5 74.9883L93.8417 86.9402C93.9471 86.9722 94.0473 87.0119 94.1481 87.0563C95.014 87.4377 99.5549 89.2156 104.5 86.9883C106.535 86.0718 109.03 82.7182 110.424 80.6551C111.04 79.7445 110.743 78.5257 109.805 77.9526L77.2788 58.0753C76.3086 57.4824 75.0354 57.8065 74.4297 58.7688Z",fill:"#5842C3"}),(0,r.jsx)("path",{d:"M34 47.9883C34 47.9883 42.3922 74.9883 54.5 74.9883M54.5 74.9883C63.3588 74.9883 71.569 63.3138 74.4297 58.7688C75.0354 57.8065 76.3086 57.4824 77.2788 58.0753L109.805 77.9526C110.743 78.5257 111.04 79.7445 110.424 80.6551C109.03 82.7182 106.535 86.0718 104.5 86.9883C99.5549 89.2156 95.014 87.4377 94.1481 87.0563C94.0473 87.0119 93.9471 86.9722 93.8417 86.9402L54.5 74.9883Z",stroke:"#1A1523"}),(0,r.jsx)("path",{d:"M34 48.4883H94",stroke:"#1A1523"}),(0,r.jsx)("circle",{cx:"40",cy:"41.9883",r:"1.5",stroke:"#1A1523"}),(0,r.jsx)("circle",{cx:"46",cy:"41.9883",r:"1.5",stroke:"#1A1523"}),(0,r.jsx)("circle",{cx:"52",cy:"41.9883",r:"1.5",stroke:"#1A1523"})]}))},f=n(22710),g=n(17064),y=n(81541),j=n(99267),m=n(40147);function w(){return k.apply(this,arguments)}function k(){return(k=(0,f.Z)(function(){var e,t,n,r,s,i,o;return(0,j.__generator)(this,function(l){switch(l.label){case 0:return[4,Promise.all([m.j.customTypes.readAllCustomTypes(void 0),m.j.slices.readAllSlices()])];case 1:if(n=(t=(e=g.Z.apply(void 0,[l.sent(),2]))[0]).errors,r=t.models,i=(s=e[1]).errors,o=s.models,n.length>0||i.length>0)throw(0,y.Z)(n).concat((0,y.Z)(i));return[2,(null==r?void 0:r.length)===0&&(null==o?void 0:o.length)===0]}})})).apply(this,arguments)}function v(){var e=(0,u.Z)().openCreateCustomTypeModal,t=(0,o.v9)(function(e){return{isCreatingCustomType:(0,C.hg)(e,x.z.CREATE_CUSTOM_TYPE)}}).isCreatingCustomType,n=(0,i.useState)(!1),s=n[0],h=n[1];return(0,i.useEffect)(function(){t&&(h(!0),c.Fs.clear(w,[]))},[t]),(0,r.jsx)(l.xu,{display:"flex",justifyContent:"center",height:"100vh",alignItems:"center",backgroundColor:"grey2",children:(0,r.jsxs)(l.xu,{display:"flex",flexDirection:"column",alignItems:"center",width:384,children:[(0,r.jsx)(d,{}),(0,r.jsx)(l.xv,{variant:"h3",align:"center",sx:{marginTop:16},children:"Blank page"}),(0,r.jsx)(l.xv,{color:"grey11",align:"center",sx:{marginBottom:16},children:"Welcome to Slice Machine. Your journey starts with your first page type — the model that you will use to create pages for your website."}),(0,r.jsx)(l.zx,{onClick:e,loading:s,children:"Create a page type"}),(0,r.jsx)(a.M,{format:"page",origin:"onboarding"})]})})}var _=function(){return(0,c.QT)(w,[])?(0,r.jsx)(v,{}):(0,r.jsx)(s.F,{format:"page"})}}},function(e){e.O(0,[550,840,774,888,179],function(){return e(e.s=87314)}),_N_E=e.O()}]);