feat(tour-guide): 🎉 add new guides and update guide widget style

robolaunch · Sep 19, 2023 · 62d90d0 · 62d90d0
1 parent 4d74786
commit 62d90d0
Show file tree

Hide file tree

Showing 19 changed files with 310 additions and 71 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
       <img src="https://img.shields.io/badge/nodejs-18.17.1-dgreen" alt="node">
     </a>
     <a href="https://github.com/robolaunch/ui/releases">
-      <img src="https://img.shields.io/badge/release-v0.14.8-red" alt="release">
+      <img src="https://img.shields.io/badge/release-v0.14.9-red" alt="release">
     </a>
         <a href="#">
       <img src="https://img.shields.io/badge/language-typescript-blue" alt="language">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "0.14.8",
+  "version": "0.14.9",
   "private": true,
   "dependencies": {
     "@emotion/css": "^11.10.6",

diff --git a/public/css/style.css b/public/css/style.css
@@ -1166,10 +1166,6 @@ video {
   width: 12rem !important;
 }
 
-.\!w-52 {
-  width: 13rem !important;
-}
-
 .\!w-56 {
   width: 14rem !important;
 }
@@ -2097,10 +2093,29 @@ video {
   background-color: rgb(202 138 4 / var(--tw-bg-opacity));
 }
 
+.\!bg-layer-primary-500 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(184 67 255 / var(--tw-bg-opacity)) !important;
+}
+
+.\!bg-layer-primary-200 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(237 208 255 / var(--tw-bg-opacity)) !important;
+}
+
+.\!bg-layer-primary-100 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(245 229 255 / var(--tw-bg-opacity)) !important;
+}
+
 .\!p-0 {
   padding: 0px !important;
 }
 
+.\!p-10 {
+  padding: 2.5rem !important;
+}
+
 .p-0 {
   padding: 0px;
 }
@@ -2153,14 +2168,6 @@ video {
   padding: 2rem;
 }
 
-.\!p-8 {
-  padding: 2rem !important;
-}
-
-.\!p-10 {
-  padding: 2.5rem !important;
-}
-
 .\!px-0 {
   padding-left: 0px !important;
   padding-right: 0px !important;
@@ -2743,6 +2750,16 @@ video {
   color: rgb(133 77 14 / var(--tw-text-opacity));
 }
 
+.\!text-layer-primary-800 {
+  --tw-text-opacity: 1 !important;
+  color: rgb(122 18 183 / var(--tw-text-opacity)) !important;
+}
+
+.\!text-layer-primary-900 {
+  --tw-text-opacity: 1 !important;
+  color: rgb(100 16 147 / var(--tw-text-opacity)) !important;
+}
+
 .underline {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
@@ -2752,14 +2769,14 @@ video {
   accent-color: #AC2DFE;
 }
 
-.opacity-90 {
-  opacity: 0.9;
-}
-
 .opacity-50 {
   opacity: 0.5;
 }
 
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .\!shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;

diff --git a/src/components/ActivitiesWidget/ActivitiesWidget.tsx b/src/components/ActivitiesWidget/ActivitiesWidget.tsx
@@ -39,6 +39,7 @@ export default function ActivitiesWidget({
 
   return (
     <WidgetLayout
+      dataTut="robot-activities-widget"
       title={`Acitivities`}
       subtitle={`Last Activities`}
       icon={<VscHistory size={20} className="text-layer-light-700" />}

diff --git a/src/components/RobotConnectionsViewer/RobotConnectionsViewer.tsx b/src/components/RobotConnectionsViewer/RobotConnectionsViewer.tsx
@@ -47,7 +47,7 @@ export default function RobotConnectionsViewer({
   }, [ide, vdiURL]);
 
   return (
-    <div className="flex gap-6">
+    <div data-tut="robot-connections" className="flex gap-6">
       {!envOnPremiseRobot && responseRobot?.bridgeIngressEndpoint && (
         <div className="flex gap-1">
           <span className="text-xs font-semibold">ROS: </span>

diff --git a/src/components/RobotHeader/RobotHeader.tsx b/src/components/RobotHeader/RobotHeader.tsx
@@ -10,16 +10,21 @@ import ContentLoader from "react-content-loader";
 import { AiOutlineTeam } from "react-icons/ai";
 import { useParams } from "react-router-dom";
 import useRobot from "../../hooks/useRobot";
+import useMain from "../../hooks/useMain";
 
 export default function RobotHeader(): ReactElement {
   const { ros, responseRobot, isSettedCookie } = useRobot();
+  const { selectedState } = useMain();
   const url = useParams();
 
   return (
-    <div className="col-span-full">
+    <div data-tut="robot-header" className="col-span-full">
       <CardLayout className="pt-6 px-8 !pb-0">
         <div className="h-28 flex items-center justify-between">
-          <div className="h-full flex flex-col justify-around">
+          <div
+            data-tut="robot-information"
+            className="h-full flex flex-col justify-around"
+          >
             <div className="flex gap-2 items-center">
               <span className="text-lg font-medium">{url?.robotName}</span>
               <div className="text-[0.64rem] capitalize font-medium px-3 py-1 rounded-lg w-fit text-layer-primary-500 bg-layer-primary-100">
@@ -49,7 +54,9 @@ export default function RobotHeader(): ReactElement {
             </span>
             <span className="flex gap-2 items-center">
               <IoLocationOutline size={16} />
-              <span className="text-xs font-light">Ankara, Turkey</span>
+              <span className="text-xs font-light">
+                {selectedState?.roboticsCloud?.region}
+              </span>
             </span>
           </div>
           <div className="hidden md:flex text-xs font-medium text-layer-dark-400 gap-8">

diff --git a/src/components/RobotHeaderTabs/RobotHeaderTabs.tsx b/src/components/RobotHeaderTabs/RobotHeaderTabs.tsx
@@ -6,6 +6,7 @@ import { BiJoystickButton } from "react-icons/bi";
 import ContentLoader from "react-content-loader";
 import { AiFillCode } from "react-icons/ai";
 import useRobot from "../../hooks/useRobot";
+import { stringSlugify } from "../../functions/GeneralFunctions";
 
 export default function RobotHeaderTabs(): ReactElement {
   const {
@@ -105,12 +106,16 @@ export default function RobotHeaderTabs(): ReactElement {
   ];
 
   return (
-    <ul className="flex gap-6 px-6 pt-5 overflow-x-auto items-end">
+    <ul
+      data-tut="robot-header-tabs"
+      className="flex gap-6 px-6 pt-5 overflow-x-auto items-end"
+    >
       {tabs
         ?.filter((tab: any) => tab && tab)
         .map((tab: any, index: number) => {
           return (
             <li
+              data-tut={`robot-header-tab-${stringSlugify(tab?.name)}`}
               className={`flex flex-col gap-3 cursor-pointer ${
                 tab?.isHidden && "!hidden"
               }`}

diff --git a/src/components/RobotResource/RobotResource.tsx b/src/components/RobotResource/RobotResource.tsx
@@ -15,7 +15,7 @@ export default function RobotResource({
   const { pagesState } = useMain();
 
   return (
-    <div className="flex flex-col items-end">
+    <div data-tut="robot-resources" className="flex flex-col items-end">
       <div className="flex items-center gap-3 pt-2">
         <span className="text-xs text-center font-semibold">
           Virtual Resources:

diff --git a/src/components/RobotServiceButtons/RobotServiceButtons.tsx b/src/components/RobotServiceButtons/RobotServiceButtons.tsx
@@ -6,7 +6,7 @@ export default function RobotServiceButtons(): ReactElement {
   const { responseRobot, isSettedCookie, isRobotReady } = useRobot();
 
   return (
-    <div className="flex gap-2">
+    <div data-tut="robot-service-buttons" className="flex gap-2">
       <div className="flex  items-center rounded-lg">
         <a
           target="_blank"

diff --git a/src/components/RobotStatusWidget/RobotStatusWidget.tsx b/src/components/RobotStatusWidget/RobotStatusWidget.tsx
@@ -33,6 +33,7 @@ export default function RobotStatusWidget({
 
   return (
     <WidgetLayout
+      dataTut="robot-status-widget"
       title={`${envOnPremiseRobot ? "Application" : "Robot"} Status`}
       subtitle={`${envOnPremiseRobot ? "Application" : "Robot"} Status`}
       icon={<VscHistory size={20} className="text-layer-light-700" />}

diff --git a/src/components/TourGuide/TourGuide.tsx b/src/components/TourGuide/TourGuide.tsx
@@ -78,8 +78,9 @@ export default function TourGuide({
         onRequestClose={handleCloseGuide}
         steps={tourConfig}
         isOpen={handleIsOpen()}
+        showNumber={false}
         maskClassName="opacity-50"
-        className="!p-10 text-sm"
+        className="!p-10 text-sm !bg-layer-primary-100 !text-layer-primary-900"
         rounded={5}
         accentColor={"#ac2dfe"}
         onAfterOpen={(target: any) => disableBodyScroll(target)}