slice-machine-ui 1.22.3-beta.1 → 1.22.3-beta.2

package/pages/slices/[lib]/[sliceName]/[variation]/index.tsx

@@ -1,19 +1,33 @@
 import Head from "next/head";
-import SliceBuilder from "lib/builders/SliceBuilder";
-import useCurrentSlice from "@src/hooks/useCurrentSlice";
-import { createComponentWithSlice } from "@src/layouts/WithSlice";
+import { useRouter } from "next/router";
 
-const SliceBuilderWithSlice = createComponentWithSlice(SliceBuilder);
+import SliceBuilder from "@lib/builders/SliceBuilder";
+import { SliceBuilderProvider } from "@src/features/slices/sliceBuilder/SliceBuilderProvider";
+import useCurrentSlice from "@src/hooks/useCurrentSlice";
 
 export default function SlicePage() {
-  const { slice } = useCurrentSlice();
+  const router = useRouter();
+  const { slice: initialSlice, variation: defaultVariation } =
+    useCurrentSlice();
+
+  if (initialSlice === undefined || defaultVariation === undefined) {
+    void router.replace("/");
+
+    return null;
+  }
 
   return (
-    <>
-      <Head>
-        {slice ? <title>{slice.model.name} - Slice Machine</title> : null}
-      </Head>
-      <SliceBuilderWithSlice />
-    </>
+    <SliceBuilderProvider initialSlice={initialSlice}>
+      {({ slice }) => {
+        return (
+          <>
+            <Head>
+              <title>{slice.model.name} - Slice Machine</title>
+            </Head>
+            <SliceBuilder />
+          </>
+        );
+      }}
+    </SliceBuilderProvider>
   );
 }

package/pages/slices/[lib]/[sliceName]/[variation]/simulator.tsx

@@ -1,22 +1,25 @@
 import Head from "next/head";
+import { useRouter } from "next/router";
+
 import Simulator from "@components/Simulator";
 import useCurrentSlice from "@src/hooks/useCurrentSlice";
-import { createComponentWithSlice } from "@src/layouts/WithSlice";
-
-const SimulatorWithSlice = createComponentWithSlice(Simulator);
 
 export default function SimulatorPage() {
-  const { slice } = useCurrentSlice();
+  const router = useRouter();
+  const { slice, variation } = useCurrentSlice();
+
+  if (slice === undefined || variation === undefined) {
+    void router.replace("/");
+
+    return null;
+  }
 
   return (
     <>
       <Head>
-        <title>
-          {slice ? `Simulator: ${slice.model.name}` : "Simulator"} - Slice
-          Machine
-        </title>
+        <title>{`Simulator: ${slice.model.name} - Slice Machine`}</title>
       </Head>
-      <SimulatorWithSlice />
+      <Simulator slice={slice} variation={variation} />
     </>
   );
 }

package/src/apiClient.ts

@@ -1,3 +1,6 @@
+import { CustomType } from "@prismicio/types-internal/lib/customtypes";
+import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
+
 import { SimulatorCheckResponse } from "@models/common/Simulator";
 import { SliceMachineManagerClient } from "@slicemachine/manager/client";
 import {
@@ -6,8 +9,7 @@ import {
   type VariationSM,
   Variations,
 } from "@lib/models/common/Slice";
-import { CustomTypes, CustomTypeSM } from "@lib/models/common/CustomType";
-
+import { CustomTypes } from "@lib/models/common/CustomType";
 import { CheckAuthStatusResponse } from "@models/common/Auth";
 import ServerState from "@models/server/ServerState";
 import { CustomScreenshotRequest } from "@lib/models/common/Screenshots";
@@ -15,7 +17,6 @@ import { ComponentUI } from "@lib/models/common/ComponentUI";
 import { PackageChangelog } from "@lib/models/common/versions";
 
 import { managerClient } from "./managerClient";
-import { SharedSliceContent } from "@prismicio/types-internal/lib/content";
 
 /** State Routes * */
 
@@ -70,11 +71,11 @@ export const getState = async (): Promise<ServerState> => {
 
 /** Custom Type Routes * */
 
-export const saveCustomType = async (
-  customType: CustomTypeSM,
+export const updateCustomType = async (
+  customType: CustomType,
 ): ReturnType<SliceMachineManagerClient["customTypes"]["updateCustomType"]> => {
   return await managerClient.customTypes.updateCustomType({
-    model: CustomTypes.fromSM(customType),
+    model: customType,
   });
 };
 

package/src/components/CodeBlock/CodeBlock.tsx

@@ -82,6 +82,7 @@ const Copy = ({ code, onCopy }: { code: string; onCopy?: () => void }) => {
       size="small"
       onClick={copy}
       icon={isCopied ? "check" : "contentCopy"}
+      hiddenLabel={isCopied ? "Code successfully copied" : "Copy code"}
     />
   );
 };

package/src/components/Window/Window.tsx

@@ -59,10 +59,12 @@ type WindowTabsTriggerProps = Pick<
 export const WindowTabsTrigger: FC<WindowTabsTriggerProps> = ({
   children,
   menu,
+  value,
   ...otherProps
 }) => (
   <Tabs.Trigger
     {...otherProps}
+    aria-label={value}
     asChild
     onMouseDown={(event) => {
       const target = event.target as HTMLElement;
@@ -81,6 +83,7 @@ export const WindowTabsTrigger: FC<WindowTabsTriggerProps> = ({
         });
       }
     }}
+    value={value}
   >
     <div className={styles.tabsTrigger}>
       <Text
@@ -96,7 +99,10 @@ export const WindowTabsTrigger: FC<WindowTabsTriggerProps> = ({
         <div className={styles.tabsTriggerMenu}>
           <DropdownMenu>
             <DropdownMenuTrigger>
-              <IconButton icon="moreVert" />
+              <IconButton
+                icon="moreVert"
+                hiddenLabel={`tab-${value}-menu-button`}
+              />
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start">{menu}</DropdownMenuContent>
           </DropdownMenu>