Merge pull request #874 from CodeForAfrica/fix/ui_catalogs_build

@/ui Fix build issues
CodeForAfrica · Sep 5, 2024 · 80b6d0f · 80b6d0f
2 parents 14a97fb + fe4043c
commit 80b6d0f
Show file tree

Hide file tree

Showing 7 changed files with 768 additions and 743 deletions.
diff --git a/apps/roboshield/package.json b/apps/roboshield/package.json
@@ -15,7 +15,7 @@
     "generate:types": "payload generate:types"
   },
   "dependencies": {
-    "@commons-ui/core": "catalog:",
+    "@commons-ui/core": "workspace:*",
     "@commons-ui/next": "workspace:*",
     "@emotion/cache": "catalog:",
     "@emotion/react": "catalog:",

diff --git a/apps/roboshield/src/components/RobotsTxtGenerator/RobotsTxtGenerator.tsx b/apps/roboshield/src/components/RobotsTxtGenerator/RobotsTxtGenerator.tsx
@@ -18,7 +18,7 @@ import {
 import { generateRobots } from "@/roboshield/lib/robots";
 import RichText, { Children } from "@/roboshield/components/RichText";
 
-type Props = { [key: string]: string } & {
+type Props = {
   steps: {
     title: string;
     hint?: Children;
@@ -49,165 +49,160 @@ const slugComponentsMap = {
   "site-maps": Sitemaps,
   finish: Finish,
 };
-const RobotsGenerator: FC<Props> = React.forwardRef(
-  function RobotsGenerator(props, ref) {
-    const { steps, actions } = props;
-    const [activeStep, setActiveStep] = useState(0);
-    const { state, setState } = useGlobalState();
-    const [code, setCode] = useState(state.robots || "");
+const RobotsGenerator = React.forwardRef(function RobotsGenerator(
+  props: Props,
+  ref: React.ForwardedRef<HTMLElement>,
+) {
+  const { steps, actions } = props;
+  const [activeStep, setActiveStep] = useState(0);
+  const { state, setState } = useGlobalState();
+  const [, setCode] = useState(state.robots || "");
 
-    const handleNext = () => {
-      setActiveStep((prevActiveStep) => prevActiveStep + 1);
-    };
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
 
-    const handleBack = () => {
-      setActiveStep((prevActiveStep) => prevActiveStep - 1);
-    };
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
 
-    const handleReset = () => {
-      setState(defaultState);
-      setActiveStep(0);
-    };
+  const handleReset = () => {
+    setState(defaultState);
+    setActiveStep(0);
+  };
 
-    const handleNextStep = (data: any) => {
-      const newState = { ...state, ...data };
-      setState(newState);
-      handleNext();
-    };
+  const handleNextStep = (data: any) => {
+    const newState = { ...state, ...data };
+    setState(newState);
+    handleNext();
+  };
 
-    const handleSkipToLast = (data: any) => {
-      const newState = { ...state, ...data };
-      setState(newState);
-      setActiveStep(props.steps.length - 1);
-    };
+  const handleSkipToLast = (data: any) => {
+    const newState = { ...state, ...data };
+    setState(newState);
+    setActiveStep(props.steps.length - 1);
+  };
 
-    const handleStep = (step: number) => () => {
-      setActiveStep(step);
-    };
+  const handleStep = (step: number) => () => {
+    setActiveStep(step);
+  };
 
-    useEffect(() => {
-      const generateRobotsFile = async () => {
-        const robots = await generateRobots(state);
-        setCode(robots);
-      };
+  useEffect(() => {
+    const generateRobotsFile = async () => {
+      const robots = await generateRobots(state);
+      setCode(robots);
+    };
 
-      generateRobotsFile();
-    }, [state]);
+    generateRobotsFile();
+  }, [state]);
 
-    const activeStepSlug:
-      | "existing-robots-txt"
-      | "delays"
-      | "paths"
-      | "block-bots"
-      | "site-maps"
-      | "finish" = steps[activeStep]?.blockType;
-    const ActiveComponent = slugComponentsMap[activeStepSlug] ?? null;
-    const { hint, ...activeComponentProps } = steps[activeStep] ?? {};
-    return (
-      <Section
-        sx={{ px: { xs: 2.5, sm: 0 }, py: 10 }}
-        ref={ref}
-        id="robots-txt-generator"
+  const activeStepSlug = steps[activeStep]?.blockType;
+  const ActiveComponent = slugComponentsMap[activeStepSlug] ?? null;
+  const { hint, ...activeComponentProps } = steps[activeStep] ?? {};
+  return (
+    <Section
+      sx={{ px: { xs: 2.5, sm: 0 }, py: 10 }}
+      ref={ref}
+      id="robots-txt-generator"
+    >
+      <Stack
+        direction={{
+          xs: "column",
+          md: "row",
+        }}
+        justifyContent="space-between"
+        height="100%"
       >
-        <Stack
-          direction={{
-            xs: "column",
-            md: "row",
+        <Box
+          sx={{
+            p: 1,
+            width: "100%",
+            background:
+              "linear-gradient(180deg, rgba(243, 246, 253, 0.7) 0%, rgba(243, 246, 253, 0) 86.26%);",
+            borderRadius: 2,
+            my: 0,
           }}
-          justifyContent="space-between"
-          height="100%"
         >
           <Box
             sx={{
-              p: 1,
               width: "100%",
-              background:
-                "linear-gradient(180deg, rgba(243, 246, 253, 0.7) 0%, rgba(243, 246, 253, 0) 86.26%);",
+              border: "1px solid rgb(19 81 216 / 10%);",
+              p: { md: 6 },
               borderRadius: 2,
-              my: 0,
+              background:
+                "linear-gradient(0deg, rgba(19, 81, 216, 0.01), rgba(19, 81, 216, 0.01)), linear-gradient(0deg, rgba(19, 81, 216, 0.05), rgba(19, 81, 216, 0.05));",
             }}
           >
             <Box
               sx={{
                 width: "100%",
-                border: "1px solid rgb(19 81 216 / 10%);",
-                p: { md: 6 },
+                px: { md: 6 },
+                paddingBottom: 8,
+                paddingTop: 4,
+                background: "#FFFFFF",
                 borderRadius: 2,
-                background:
-                  "linear-gradient(0deg, rgba(19, 81, 216, 0.01), rgba(19, 81, 216, 0.01)), linear-gradient(0deg, rgba(19, 81, 216, 0.05), rgba(19, 81, 216, 0.05));",
               }}
             >
               <Box
                 sx={{
-                  width: "100%",
-                  px: { md: 6 },
-                  paddingBottom: 8,
-                  paddingTop: 4,
-                  background: "#FFFFFF",
-                  borderRadius: 2,
+                  px: { xs: 2, md: 0 },
+                  py: "10px",
+                  mb: 5,
                 }}
-              >
-                <Box
+              ></Box>
+
+              <Stepper nonLinear activeStep={activeStep}>
+                {steps?.map((step, index) => (
+                  <Step key={step.title}>
+                    <StepButton
+                      color="inherit"
+                      onClick={handleStep(index)}
+                      sx={{
+                        "& .MuiStepLabel-label": {
+                          color:
+                            index === activeStep
+                              ? "primary.main"
+                              : "secondary.main",
+                          display: { xs: "none", md: "block" },
+                        },
+                        fontSize: {
+                          xs: "1rem",
+                          md: "1.2rem",
+                        },
+                        fontWeight: { xs: 500, md: 600 },
+                      }}
+                    >
+                      {step?.title}
+                    </StepButton>
+                  </Step>
+                ))}
+              </Stepper>
+              {ActiveComponent && (
+                <Paper
                   sx={{
-                    px: { xs: 2, md: 0 },
-                    py: "10px",
-                    mb: 5,
+                    p: 3,
+                    mt: 3,
+                    boxShadow: 0,
                   }}
-                ></Box>
-
-                <Stepper nonLinear activeStep={activeStep}>
-                  {steps?.map((step, index) => (
-                    <Step key={step.title}>
-                      <StepButton
-                        color="inherit"
-                        onClick={handleStep(index)}
-                        sx={{
-                          "& .MuiStepLabel-label": {
-                            color:
-                              index === activeStep
-                                ? "primary.main"
-                                : "secondary.main",
-                            display: { xs: "none", md: "block" },
-                          },
-                          fontSize: {
-                            xs: "1rem",
-                            md: "1.2rem",
-                          },
-                          fontWeight: { xs: 500, md: 600 },
-                        }}
-                      >
-                        {step?.title}
-                      </StepButton>
-                    </Step>
-                  ))}
-                </Stepper>
-                {ActiveComponent && (
-                  <Paper
-                    sx={{
-                      p: 3,
-                      mt: 3,
-                      boxShadow: 0,
-                    }}
-                  >
-                    <ActiveComponent
-                      hint={<RichText elements={hint} />}
-                      handleNext={handleNextStep}
-                      handleBack={handleBack}
-                      handleSkipToLast={handleSkipToLast}
-                      lastStep={activeStep === steps.length - 1}
-                      handleReset={handleReset}
-                      actions={actions}
-                      {...activeComponentProps}
-                    />
-                  </Paper>
-                )}
-              </Box>
+                >
+                  <ActiveComponent
+                    hint={<RichText elements={hint} />}
+                    handleNext={handleNextStep}
+                    handleBack={handleBack}
+                    handleSkipToLast={handleSkipToLast}
+                    lastStep={activeStep === steps.length - 1}
+                    handleReset={handleReset}
+                    actions={actions}
+                    {...activeComponentProps}
+                  />
+                </Paper>
+              )}
             </Box>
           </Box>
-        </Stack>
-      </Section>
-    );
-  },
-);
+        </Box>
+      </Stack>
+    </Section>
+  );
+});
 
 export default RobotsGenerator;
diff --git a/apps/uibook/package.json b/apps/uibook/package.json
@@ -28,7 +28,7 @@
     "clean": "rm -rf .next .turbo node_modules storybook-static"
   },
   "dependencies": {
-    "@commons-ui/core": "catalog:",
+    "@commons-ui/core": "workspace:*",
     "@commons-ui/next": "workspace:*",
     "@emotion/cache": "catalog:",
     "@emotion/react": "catalog:",

diff --git a/apps/vpnmanager/package.json b/apps/vpnmanager/package.json
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@babel/preset-react": "catalog:",
-    "@commons-ui/core": "catalog:",
+    "@commons-ui/core": "workspace:*",
     "@commons-ui/next": "workspace:*",
     "@emotion/cache": "catalog:",
     "@emotion/react": "catalog:",

diff --git a/apps/vpnmanager/src/components/MobileNavBar/MobileNavBar.tsx b/apps/vpnmanager/src/components/MobileNavBar/MobileNavBar.tsx
@@ -53,8 +53,7 @@ const DialogContainer = styled(Dialog)(({ theme: { palette, spacing } }) => ({
 
 const Transition: ForwardRefExoticComponent<
   Omit<SlideProps, "ref"> & RefAttributes<HTMLDivElement>
-> = React.forwardRef(function Transition<D extends React.ElementType>(
-  // @ts-expect-error: Let's ignore a compile on children for now
+> = React.forwardRef(function Transition(
   { children, ...props },
   ref: React.Ref<HTMLDivElement> | undefined,
 ) {