refactor(forms): 🎉 update forms and buttons

public/css/style.css

@@ -749,10 +749,6 @@ video {
   top: 3.6rem;
 }
 
-.-top-5 {
-  top: -1.25rem;
-}
-
 .-z-10 {
   z-index: -10;
 }
@@ -1044,6 +1040,10 @@ video {
   height: 0.75rem;
 }
 
+.h-3\.5 {
+  height: 0.875rem;
+}
+
 .h-32 {
   height: 8rem;
 }
@@ -1138,10 +1138,6 @@ video {
   height: 100vh;
 }
 
-.h-3\.5 {
-  height: 0.875rem;
-}
-
 .max-h-\[40rem\] {
   max-height: 40rem;
 }
@@ -1252,6 +1248,10 @@ video {
   width: 0.75rem;
 }
 
+.w-3\.5 {
+  width: 0.875rem;
+}
+
 .w-32 {
   width: 8rem;
 }
@@ -1355,10 +1355,6 @@ video {
   width: max-content;
 }
 
-.w-3\.5 {
-  width: 0.875rem;
-}
-
 .min-w-\[12rem\] {
   min-width: 12rem;
 }
@@ -2361,10 +2357,6 @@ video {
   padding-bottom: 2rem;
 }
 
-.pl-10 {
-  padding-left: 2.5rem;
-}
-
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -3512,12 +3504,6 @@ td {
   color: rgb(194 194 194 / var(--tw-text-opacity)) !important;
 }
 
-@media (min-width: 640px) {
-  .sm\:hidden {
-    display: none;
-  }
-}
-
 @media (min-width: 768px) {
   .md\:col-span-5 {
     grid-column: span 5 / span 5;
@@ -3535,25 +3521,9 @@ td {
     display: block;
   }
 
-  .md\:inline {
-    display: inline;
-  }
-
-  .md\:flex {
-    display: flex;
-  }
-
-  .md\:hidden {
-    display: none;
-  }
-
   .md\:w-\[38rem\] {
     width: 38rem;
   }
-
-  .md\:flex-col {
-    flex-direction: column;
-  }
 }
 
 @media (min-width: 1024px) {
@@ -3593,18 +3563,10 @@ td {
     margin-left: 5rem;
   }
 
-  .lg\:inline {
-    display: inline;
-  }
-
   .lg\:flex {
     display: flex;
   }
 
-  .lg\:hidden {
-    display: none;
-  }
-
   .lg\:min-h-\[20rem\] {
     min-height: 20rem;
   }
@@ -3651,14 +3613,6 @@ td {
     grid-column: span 9 / span 9;
   }
 
-  .xl\:inline {
-    display: inline;
-  }
-
-  .xl\:hidden {
-    display: none;
-  }
-
   .xl\:min-h-\[30rem\] {
     min-height: 30rem;
   }

src/components/CFAppName/CFAppName.tsx

@@ -1,7 +1,7 @@
 import { IDetails } from "../../interfaces/robotInterfaces";
 import FormInputText from "../FormInputText/FormInputText";
 import { FormikProps } from "formik/dist/types";
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 
 interface ICFAppName {
   formik: FormikProps<IDetails>;

src/components/CFBridgeToggle/CFBridgeToggle.tsx

@@ -0,0 +1,27 @@
+import { ReactElement } from "react";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import { FormikProps } from "formik";
+import CFInputToggle from "../CFInputToggle/CFInputToggle";
+
+interface ICFBridgeToggle {
+  formik: FormikProps<IDetails>;
+  isImportRobot?: boolean;
+}
+
+export default function CFBridgeToggle({
+  formik,
+  isImportRobot,
+}: ICFBridgeToggle): ReactElement {
+  return (
+    <CFInputToggle
+      labelName="ROS2 Bridge:"
+      labelInfoTip="The ROS2 Bridge allows you to connect your robot to the ecosystem. This allows you to use ROS2 tools to interact with your robot."
+      dataTut="create-robot-step1-ros2-bridge"
+      disabled={isImportRobot}
+      checked={formik?.values?.isEnabledROS2Bridge}
+      onChange={(e: any) => {
+        formik.setFieldValue("isEnabledROS2Bridge", e);
+      }}
+    />
+  );
+}

src/components/CFBuildMapper/CFBuildMapper.tsx

@@ -1,11 +1,11 @@
-import React, { ReactElement } from "react";
-import CFInfoBar from "../CFInfoBar/CFInfoBar";
 import CFBuildStepItem from "../CFBuildStepItem/CFBuildStepItem";
-import { IRobotBuildSteps } from "../../interfaces/robotInterfaces";
+import { IBuildSteps } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
+import CFInfoBar from "../CFInfoBar/CFInfoBar";
+import { ReactElement } from "react";
 
 interface ICFBuildMapper {
-  formik: FormikProps<IRobotBuildSteps>;
+  formik: FormikProps<IBuildSteps>;
   responseBuildManager: any;
   isImportRobot?: boolean;
 }

src/components/CFBuildScope/CFBuildScope.tsx

@@ -1,12 +1,12 @@
 import React, { ReactElement } from "react";
 import CreateRobotFormCodeScope from "../CreateRobotFormCodeScope/CreateRobotFormCodeScope";
 import { FormikProps } from "formik/dist/types";
-import { IRobotBuildSteps } from "../../interfaces/robotInterfaces";
+import { IBuildSteps } from "../../interfaces/robotInterfaces";
 import useMain from "../../hooks/useMain";
 import useCreateRobot from "../../hooks/useCreateRobot";
 
 interface ICFBuildScope {
-  formik: FormikProps<IRobotBuildSteps>;
+  formik: FormikProps<IBuildSteps>;
   buildStepIndex: number;
 }
 

src/components/CFBuildStepItem/CFBuildStepItem.tsx

@@ -1,7 +1,4 @@
-import {
-  IRobotBuildStep,
-  IRobotBuildSteps,
-} from "../../interfaces/robotInterfaces";
+import { IBuildStep, IBuildSteps } from "../../interfaces/robotInterfaces";
 import CFBuildStepItemAccordionHeader from "../CFBuildStepItemAccordionHeader/CFBuildStepItemAccordionHeader";
 import CFDeleteBuildButton from "../CFDeleteBuildButton/CFDeleteBuildButton";
 import CFBuildStepName from "../CFBuildStepName/CFBuildStepName";
@@ -14,9 +11,9 @@ import CFCode from "../CFCode/CFCode";
 import CFBuildScope from "../CFBuildScope/CFBuildScope";
 
 interface ICFBuildStepItem {
-  formik: FormikProps<IRobotBuildSteps>;
+  formik: FormikProps<IBuildSteps>;
   buildStepIndex: number;
-  buildStep: IRobotBuildStep;
+  buildStep: IBuildStep;
   isImportRobot?: boolean;
 }
 

src/components/CFConfigWorkspaces/CFConfigWorkspaces.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import FormInputToggle from "../FormInputToggle/FormInputToggle";
+import CFInputToggle from "../CFInputToggle/CFInputToggle";
 import { IDetails } from "../../interfaces/robotInterfaces";
 import { FormikProps } from "formik/dist/types";
 
@@ -13,7 +13,7 @@ export default function CFConfigWorkspaces({
   disabled,
 }: ICFConfigWorkspaces): ReactElement {
   return (
-    <FormInputToggle
+    <CFInputToggle
       labelName="Configure Workspaces:"
       labelInfoTip="If you want to specify workspaces, you can do so here."
       dataTut="create-robot-step1-ros2-bridge"

src/components/CFDevMode/CFDevMode.tsx

@@ -0,0 +1,25 @@
+import { ReactElement } from "react";
+import CFInputToggle from "../CFInputToggle/CFInputToggle";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import { FormikProps } from "formik";
+
+interface ICFDevMode {
+  formik: FormikProps<IDetails>;
+  isImportRobot?: boolean;
+}
+
+export default function CFDevMode({
+  formik,
+  isImportRobot,
+}: ICFDevMode): ReactElement {
+  return (
+    <CFInputToggle
+      labelName="Development Mode:"
+      labelInfoTip="Leave this option turned on if you want it to be able to build and launch on the robot you want"
+      dataTut="create-robot-step1-development-mode"
+      disabled={formik.isSubmitting || isImportRobot}
+      checked={formik?.values?.isDevelopmentMode}
+      onChange={(e: any) => formik.setFieldValue("isDevelopmentMode", e)}
+    />
+  );
+}

src/components/CFGPUToggle/CFGPUToggle.tsx

@@ -0,0 +1,27 @@
+import { ReactElement } from "react";
+import CFInputToggle from "../CFInputToggle/CFInputToggle";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import { FormikProps } from "formik";
+
+interface ICFGPUToggle {
+  formik: FormikProps<IDetails>;
+  isImportRobot?: boolean;
+}
+
+export default function CFGPUToggle({
+  formik,
+  isImportRobot,
+}: ICFGPUToggle): ReactElement {
+  return (
+    <CFInputToggle
+      labelName="GPU Usage Enabled for Cloud Instance:"
+      labelInfoTip="If you want or need to GPU resource on cloud instance set active"
+      dataTut="create-robot-step1-gpu-resource"
+      disabled={formik.isSubmitting || isImportRobot}
+      checked={formik?.values?.gpuEnabledForCloudInstance}
+      onChange={(e: any) =>
+        formik.setFieldValue("gpuEnabledForCloudInstance", e)
+      }
+    />
+  );
+}

src/components/FormInputToggle/FormInputToggle.tsx → src/components/CFInputToggle/CFInputToggle.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import InfoTip from "../InfoTip/InfoTip";
 import InputToggle from "../InputToggle/InputToggle";
+import InfoTip from "../InfoTip/InfoTip";
+import { ReactElement } from "react";
 
-interface IFormInputToggle {
+interface ICFInputToggle {
   dataTut?: string;
   labelName: string;
   labelInfoTip: string;
@@ -11,14 +11,14 @@ interface IFormInputToggle {
   checked: boolean;
 }
 
-export default function FormInputToggle({
+export default function CFInputToggle({
   dataTut,
   labelName,
   labelInfoTip,
   disabled,
   onChange,
   checked,
-}: IFormInputToggle) {
+}: ICFInputToggle): ReactElement {
   return (
     <div data-tut={dataTut} className="flex items-center gap-1 pb-3">
       <div className="flex min-w-fit gap-1 text-xs font-medium text-layer-light-700">

src/components/CFRobotName/CFRobotName.tsx

@@ -0,0 +1,27 @@
+import { IDetails } from "../../interfaces/robotInterfaces";
+import FormInputText from "../FormInputText/FormInputText";
+import { ReactElement } from "react";
+import { FormikProps } from "formik";
+
+interface ICFRobotName {
+  formik: FormikProps<IDetails>;
+  isImportRobot?: boolean;
+}
+
+export default function CFRobotName({
+  formik,
+  isImportRobot,
+}: ICFRobotName): ReactElement {
+  return (
+    <FormInputText
+      dataTut="create-robot-step1-name"
+      labelName="Robot Name:"
+      labelInfoTip="Type a new robot name."
+      inputProps={formik.getFieldProps("robotName")}
+      disabled={formik.isSubmitting || isImportRobot}
+      inputHoverText="You can't change robot name because this robot is created before."
+      inputError={formik.errors.robotName}
+      inputTouched={formik.touched.robotName}
+    />
+  );
+}

src/components/CreateRobotRosDistrobutions/CreateRobotRosDistrobutions.tsx → src/components/CFRosDistros/CFRosDistros.tsx

@@ -4,16 +4,18 @@ import { toast } from "sonner";
 import { stringSlugify } from "../../functions/GeneralFunctions";
 import { MdVerified } from "react-icons/md";
 import InputError from "../InputError/InputError";
+import { IDetails } from "../../interfaces/robotInterfaces";
+import { FormikProps } from "formik";
 
-interface ICreateRobotRosDistrobutions {
-  formik: any;
+interface ICFRosDistros {
+  formik: FormikProps<IDetails>;
   isImportRobot?: boolean;
 }
 
-export default function CreateRobotRosDistrobutions({
+export default function CFRosDistros({
   formik,
   isImportRobot,
-}: ICreateRobotRosDistrobutions): ReactElement {
+}: ICFRosDistros): ReactElement {
   function handleRosDistroFilter(item: string) {
     if (item === "HUMBLE" || item === "IRON") {
       if (
@@ -134,7 +136,11 @@ export default function CreateRobotRosDistrobutions({
           ),
         )}
       </div>
-      <InputError error={formik?.errors?.rosDistros} touched={true} />
+      <InputError
+        // @ts-ignore
+        error={formik?.errors?.rosDistros}
+        touched={true}
+      />
     </div>
   );
 }