slice-machine-ui 2.9.2-beta.1 → 2.9.2-beta.3

package/src/legacy/components/AuthInstructions/index.jsx

@@ -1,6 +1,6 @@
 import { Flex, Heading, Text } from "theme-ui";
 
-import Card from "../Card";
+import { Card, useCardRadius } from "../Card";
 
 const AuthInstructions = () => (
   <Card
@@ -8,23 +8,7 @@ const AuthInstructions = () => (
     bg="gray"
     bodySx={{ p: 3 }}
     sx={{ maxWidth: "480px", m: 3 }}
-    Header={({ radius }) => (
-      <Flex
-        sx={{
-          p: 3,
-          pl: 4,
-          bg: "headSection",
-          alignItems: "center",
-          justifyContent: "space-between",
-          borderTopLeftRadius: radius,
-          borderTopRightRadius: radius,
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          borderBottom: (t) => `1px solid ${t.colors?.borders}`,
-        }}
-      >
-        <Heading as="h3">Log in to Prismic</Heading>
-      </Flex>
-    )}
+    Header={<CardHeader />}
   >
     <Text as="p">
       In order to access your builder, you will need to be connected to Prismic.
@@ -46,4 +30,24 @@ const AuthInstructions = () => (
   </Card>
 );
 
+function CardHeader() {
+  const radius = useCardRadius();
+  return (
+    <Flex
+      sx={{
+        p: 3,
+        pl: 4,
+        bg: "headSection",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+        borderBottom: (t) => `1px solid ${t.colors?.borders}`,
+      }}
+    >
+      <Heading as="h3">Log in to Prismic</Heading>
+    </Flex>
+  );
+}
 export default AuthInstructions;

package/src/legacy/components/Card/Default.jsx

@@ -1,6 +1,6 @@
 import { Box, Close, Flex } from "theme-ui";
 
-import Card from "./";
+import { Card, useCardRadius } from "./";
 
 const DefaultCard = ({
   children,
@@ -8,35 +8,21 @@ const DefaultCard = ({
   HeaderContent,
   close,
   sx = {},
-  headerSx = {},
 }) => (
   <Card
     borderFooter
     footerSx={{ p: 0 }}
     bodySx={{ pt: 2, pb: 4, px: 4 }}
     sx={{ border: "none", ...sx }}
-    Header={({ radius }) => (
-      <Flex
-        sx={{
-          p: 3,
-          pl: 4,
-          bg: "headSection",
-          alignItems: "center",
-          justifyContent: "space-between",
-          borderTopLeftRadius: radius,
-          borderTopRightRadius: radius,
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          borderBottom: (t) => `1px solid ${t.colors?.borders}`,
-          ...headerSx,
-        }}
-      >
+    Header={
+      <CardHeader>
         {HeaderContent}
         {
           // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions, @typescript-eslint/no-unsafe-assignment
           close ? <Close onClick={close} type="button" /> : null
         }
-      </Flex>
-    )}
+      </CardHeader>
+    }
     Footer={
       // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
       FooterContent ? (
@@ -51,4 +37,24 @@ const DefaultCard = ({
   </Card>
 );
 
+function CardHeader({ children }) {
+  const radius = useCardRadius();
+  return (
+    <Flex
+      sx={{
+        p: 3,
+        pl: 4,
+        bg: "headSection",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+        borderBottom: (t) => `1px solid ${t.colors?.borders}`,
+      }}
+    >
+      {children}
+    </Flex>
+  );
+}
 export default DefaultCard;

package/src/legacy/components/Card/WithTabs/index.jsx

@@ -2,7 +2,7 @@ import { Children, memo, useState } from "react";
 import { TabPanel, Tabs } from "react-tabs";
 import { Box } from "theme-ui";
 
-import Card from "../";
+import { Card } from "../";
 import { CustomTab as Tab, CustomTabList as TabList } from "./components";
 
 const WithTabs = ({

package/src/legacy/components/Card/index.tsx

@@ -1,11 +1,14 @@
-import React from "react";
+import React, { createContext, useContext } from "react";
 import { Card as ThemeCard, ThemeUIStyleObject } from "theme-ui";
 
 import { CardBox, CardBoxProps } from "./CardBox";
 
+const CardRadiusContext = createContext<string>("6px");
+
+export const useCardRadius = () => useContext(CardRadiusContext);
 interface CardProps extends Omit<CardBoxProps, "withRadius"> {
-  Header?: React.FC<{ radius: string }> | JSX.Element | null;
-  SubHeader?: React.FC<{ radius: string }> | null;
+  Header?: JSX.Element | null;
+  SubHeader?: JSX.Element | null;
   Body?: React.FC | null;
   Footer?: React.FC | JSX.Element | null;
   borderFooter?: boolean;
@@ -13,7 +16,7 @@ interface CardProps extends Omit<CardBoxProps, "withRadius"> {
   footerSx?: ThemeUIStyleObject;
 }
 
-const Card: React.FC<CardProps> = ({
+export const Card: React.FC<CardProps> = ({
   Header = null,
   SubHeader = null,
   Body = null,
@@ -28,47 +31,41 @@ const Card: React.FC<CardProps> = ({
   children,
   ...rest
 }) => (
-  <ThemeCard
-    sx={{
-      border: (t) => `1px solid ${String(t.colors?.borders)}`,
-      borderRadius: radius,
-      ...sx,
-    }}
-    {...rest}
-  >
-    {Header ? (
-      typeof Header === "object" ? (
-        Header
-      ) : (
-        <Header radius={radius} />
-      )
-    ) : null}
-    {SubHeader ? <SubHeader radius={radius} /> : null}
-    <CardBox bg={bg} background={background} sx={bodySx} withRadius={!Footer}>
-      {Body ? <Body /> : null}
-      {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions */}
-      {children ? children : null}
-    </CardBox>
-    {Footer ? (
-      <CardBox
-        bg={bg}
-        background={background}
-        sx={{
-          ...(borderFooter
-            ? {
-                borderTop: ({ colors }) =>
-                  `1px solid ${String(colors?.borders)}`,
-              }
-            : null),
-          ...footerSx,
-        }}
-        radius={radius}
-        withRadius
-      >
-        {typeof Footer === "object" ? Footer : <Footer />}
+  <CardRadiusContext.Provider value={radius}>
+    <ThemeCard
+      sx={{
+        border: (t) => `1px solid ${String(t.colors?.borders)}`,
+        borderRadius: radius,
+        ...sx,
+      }}
+      {...rest}
+    >
+      {Header ? Header : null}
+      {SubHeader ? SubHeader : null}
+      <CardBox bg={bg} background={background} sx={bodySx} withRadius={!Footer}>
+        {Body ? <Body /> : null}
+        {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions */}
+        {children ? children : null}
       </CardBox>
-    ) : null}
-  </ThemeCard>
+      {Footer ? (
+        <CardBox
+          bg={bg}
+          background={background}
+          sx={{
+            ...(borderFooter
+              ? {
+                  borderTop: ({ colors }) =>
+                    `1px solid ${String(colors?.borders)}`,
+                }
+              : null),
+            ...footerSx,
+          }}
+          radius={radius}
+          withRadius
+        >
+          {typeof Footer === "object" ? Footer : <Footer />}
+        </CardBox>
+      ) : null}
+    </ThemeCard>
+  </CardRadiusContext.Provider>
 );
-
-export default Card;

package/src/legacy/components/ConfigErrors/index.jsx

@@ -1,30 +1,10 @@
 import { Box, Flex, Heading, Text } from "theme-ui";
 
-import Card from "@/legacy/components/Card";
+import { Card, useCardRadius } from "@/legacy/components/Card";
 import Li from "@/legacy/components/Li";
 
 const ConfigErrors = ({ errors }) => (
-  <Card
-    bg="background"
-    bodySx={{ p: 3 }}
-    Header={({ radius }) => (
-      <Flex
-        sx={{
-          p: 3,
-          alignItems: "center",
-          justifyContent: "space-between",
-          borderTopLeftRadius: radius,
-          borderTopRightRadius: radius,
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          borderBottom: (t) => `1px solid ${t.colors?.borders}`,
-        }}
-      >
-        <Heading as="h3">
-          Your slicemachine.config.json file contains errors
-        </Heading>
-      </Flex>
-    )}
-  >
+  <Card bg="background" bodySx={{ p: 3 }} Header={<CardHeader />}>
     {
       // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       Object.entries(errors).map(([key, value]) => (
@@ -65,4 +45,25 @@ const ConfigErrors = ({ errors }) => (
   </Card>
 );
 
+function CardHeader() {
+  const radius = useCardRadius();
+  return (
+    <Flex
+      sx={{
+        p: 3,
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+        borderBottom: (t) => `1px solid ${t.colors?.borders}`,
+      }}
+    >
+      <Heading as="h3">
+        Your slicemachine.config.json file contains errors
+      </Heading>
+    </Flex>
+  );
+}
+
 export default ConfigErrors;

package/src/legacy/components/DeleteCTModal/index.tsx

@@ -7,7 +7,7 @@ import { Close, Flex, Heading, Text, useThemeUI } from "theme-ui";
 import { deleteCustomType } from "@/features/customTypes/actions/deleteCustomType";
 import { CUSTOM_TYPES_MESSAGES } from "@/features/customTypes/customTypesMessages";
 import { Button } from "@/legacy/components/Button";
-import Card from "@/legacy/components/Card";
+import { Card } from "@/legacy/components/Card";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
@@ -64,7 +64,7 @@ export const DeleteCustomTypeModal: React.FunctionComponent<
         }}
         sx={{ border: "none", overflow: "hidden" }}
         borderFooter
-        Header={() => (
+        Header={
           <Flex
             sx={{
               position: "sticky",
@@ -88,7 +88,7 @@ export const DeleteCustomTypeModal: React.FunctionComponent<
             </Flex>
             <Close type="button" onClick={() => onClose()} />
           </Flex>
-        )}
+        }
         Footer={() => (
           <Flex
             sx={{

package/src/legacy/components/DeleteSliceModal/index.tsx

@@ -5,7 +5,7 @@ import { Close, Flex, Heading, Paragraph, Text, useThemeUI } from "theme-ui";
 import { deleteSlice } from "@/features/slices/actions/deleteSlice";
 import { useAutoSync } from "@/features/sync/AutoSyncProvider";
 import { Button } from "@/legacy/components/Button";
-import Card from "@/legacy/components/Card";
+import { Card } from "@/legacy/components/Card";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
 import useSliceMachineActions from "@/modules/useSliceMachineActions";
 
@@ -68,7 +68,7 @@ export const DeleteSliceModal: React.FunctionComponent<
         }}
         sx={{ border: "none" }}
         borderFooter
-        Header={() => (
+        Header={
           <Flex
             sx={{
               position: "sticky",
@@ -92,7 +92,7 @@ export const DeleteSliceModal: React.FunctionComponent<
             </Flex>
             <Close type="button" onClick={onClose} />
           </Flex>
-        )}
+        }
         Footer={() => (
           <Flex
             sx={{

package/src/legacy/components/Forms/CreateSliceModal/CreateSliceModal.tsx

@@ -70,7 +70,7 @@ export const CreateSliceModal: FC<CreateSliceModalProps> = ({
         from: localLibraries[0].name,
       }}
       validate={(values) =>
-        validateSliceModalValues(values, localLibraries, remoteSlices, "create")
+        validateSliceModalValues(values, localLibraries, remoteSlices)
       }
       content={{
         title: "Create a new slice",

package/src/legacy/components/Forms/RenameSliceModal/RenameSliceModal.tsx

@@ -65,7 +65,7 @@ export const RenameSliceModal: React.FC<RenameSliceModalProps> = ({
         title: "Rename a slice",
       }}
       validate={(values) =>
-        validateSliceModalValues(values, localLibs, remoteLibs, "update")
+        validateSliceModalValues(values, localLibs, remoteLibs)
       }
     >
       {({ touched, errors }) => (

package/src/legacy/components/Forms/formsValidator.ts

@@ -1,7 +1,6 @@
 import camelCase from "lodash/camelCase";
 import startCase from "lodash/startCase";
 
-import { telemetry } from "@/apiClient";
 import { API_ID_REGEX, RESERVED_SLICE_NAME } from "@/legacy/lib/consts";
 import { LibraryUI } from "@/legacy/lib/models/common/LibraryUI";
 import { SliceSM } from "@/legacy/lib/models/common/Slice";
@@ -18,7 +17,6 @@ export function validateSliceModalValues(
   { sliceName }: SliceModalValues,
   localLibs: ReadonlyArray<LibraryUI>,
   remoteLibs: ReadonlyArray<SliceSM>,
-  event: "create" | "update",
 ): SliceModalValuesValidity {
   if (!sliceName) {
     return { sliceName: "Cannot be empty" };
@@ -28,10 +26,6 @@ export function validateSliceModalValues(
   }
   const cased = startCase(camelCase(sliceName)).replace(/\s/gm, "");
   if (cased !== sliceName.trim()) {
-    void telemetry.track({
-      event: `slice-name-error:pascal-case`,
-      errorType: event,
-    });
     return { sliceName: "Value has to be PascalCased" };
   }
   // See: #599

package/src/legacy/components/ModalFormCard/index.tsx

@@ -17,7 +17,7 @@ import { Button as ThemeButton, Close, Flex, Heading } from "theme-ui";
 import { Button } from "@/legacy/components/Button";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
 
-import Card from "../Card";
+import { Card, useCardRadius } from "../Card";
 
 type ModalCardProps<T extends FormikValues> = {
   children: (props: {
@@ -120,27 +120,12 @@ function ModalCard<Values extends FormikValues>({
                 bodySx={{ px: 4, py: 4 }}
                 sx={{ border: "none" }}
                 {...cardProps}
-                Header={({ radius }: { radius: string | number }) => (
-                  <Flex
-                    sx={{
-                      position: "sticky",
-                      top: 0,
-                      zIndex: 1,
-                      p: "16px",
-                      pl: 4,
-                      bg: "headSection",
-                      alignItems: "center",
-                      justifyContent: "space-between",
-                      borderTopLeftRadius: radius,
-                      borderTopRightRadius: radius,
-                      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                      borderBottom: (t) => `1px solid ${t.colors?.borders}`,
-                    }}
-                  >
+                Header={
+                  <CardHeader>
                     <Heading sx={{ fontSize: "20px" }}>{title}</Heading>
                     <Close type="button" onClick={close} />
-                  </Flex>
-                )}
+                  </CardHeader>
+                }
                 Footer={
                   !omitFooter ? (
                     <Flex
@@ -200,4 +185,28 @@ function ModalCard<Values extends FormikValues>({
   );
 }
 
+function CardHeader({ children }: { children: ReactNode }) {
+  const radius = useCardRadius();
+  return (
+    <Flex
+      sx={{
+        position: "sticky",
+        top: 0,
+        zIndex: 1,
+        p: "16px",
+        pl: 4,
+        bg: "headSection",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+        borderBottom: (t) => `1px solid ${t.colors?.borders}`,
+      }}
+    >
+      {children}
+    </Flex>
+  );
+}
+
 export default ModalCard;

package/src/legacy/components/ScreenshotChangesModal/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import { AiOutlinePicture } from "react-icons/ai";
 import { RiErrorWarningLine } from "react-icons/ri";
 import { useSelector } from "react-redux";
@@ -6,7 +6,7 @@ import { Box, Close, Flex, Heading, Text } from "theme-ui";
 
 import { Kbd } from "@/components/Kbd";
 import { FigmaIcon } from "@/icons/FigmaIcon";
-import Card from "@/legacy/components/Card";
+import { Card, useCardRadius } from "@/legacy/components/Card";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
 import { ComponentUI } from "@/legacy/lib/models/common/ComponentUI";
 import { isModalOpen } from "@/modules/modal";
@@ -207,25 +207,12 @@ const ScreenshotChangesModal = ({
         radius={"0px"}
         bodySx={{ p: 0, bg: "#FFF", position: "relative" }}
         sx={{ border: "none" }}
-        Header={({ radius }: { radius: string | number }) => (
-          <Flex
-            sx={{
-              position: "sticky",
-              top: 0,
-              zIndex: 1,
-              background: "gray",
-              p: "16px",
-              alignItems: "center",
-              justifyContent: "space-between",
-              borderTopLeftRadius: radius,
-              borderTopRightRadius: radius,
-              borderBottom: (t) => `1px solid ${String(t.colors?.borders)}`,
-            }}
-          >
+        Header={
+          <CardHeader>
             <Heading sx={{ fontSize: "20px" }}>Slice screenshots</Heading>
             <Close type="button" onClick={() => closeModals()} />
-          </Flex>
-        )}
+          </CardHeader>
+        }
         Footer={null}
       >
         <Box
@@ -285,4 +272,26 @@ const ScreenshotChangesModal = ({
   );
 };
 
+function CardHeader({ children }: { children: ReactNode }) {
+  const radius = useCardRadius();
+  return (
+    <Flex
+      sx={{
+        position: "sticky",
+        top: 0,
+        zIndex: 1,
+        background: "gray",
+        p: "16px",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderTopLeftRadius: radius,
+        borderTopRightRadius: radius,
+        borderBottom: (t) => `1px solid ${String(t.colors?.borders)}`,
+      }}
+    >
+      {children}
+    </Flex>
+  );
+}
+
 export default ScreenshotChangesModal;

package/src/legacy/components/ScreenshotPreviewModal/index.tsx

@@ -1,7 +1,7 @@
 import { useSelector } from "react-redux";
 import { Button, Close, Flex, Heading } from "theme-ui";
 
-import Card from "@/legacy/components/Card";
+import { Card } from "@/legacy/components/Card";
 import { ScreenshotPreview } from "@/legacy/components/ScreenshotPreview";
 import SliceMachineModal from "@/legacy/components/SliceMachineModal";
 import { isModalOpen } from "@/modules/modal";
@@ -53,7 +53,7 @@ const ScreenshotPreviewModal: React.FunctionComponent<ScreenshotModalProps> = ({
           p: 0,
         }}
         sx={{ border: "none" }}
-        Header={() => (
+        Header={
           <Flex
             sx={{
               position: "sticky",
@@ -70,7 +70,7 @@ const ScreenshotPreviewModal: React.FunctionComponent<ScreenshotModalProps> = ({
             </Heading>
             <Close type="button" onClick={() => closeModals()} />
           </Flex>
-        )}
+        }
         Footer={() => (
           <Flex
             style={{

package/src/legacy/components/SliceMachineDrawer/index.tsx

@@ -2,7 +2,7 @@ import Drawer from "rc-drawer";
 import React from "react";
 import { Close, Flex, Heading } from "theme-ui";
 
-import Card from "@/legacy/components/Card";
+import { Card } from "@/legacy/components/Card";
 
 export const SliceMachineDrawerUI: React.FunctionComponent<{
   isOpen: boolean;
@@ -39,7 +39,7 @@ export const SliceMachineDrawerUI: React.FunctionComponent<{
           border: "none",
         }}
         borderFooter
-        Header={() => (
+        Header={
           <Flex
             sx={{
               p: "16px",
@@ -55,7 +55,7 @@ export const SliceMachineDrawerUI: React.FunctionComponent<{
             </Flex>
             <Close type="button" onClick={() => onClose()} />
           </Flex>
-        )}
+        }
         Footer={() => (
           <Flex
             sx={{