merge with main

Author: jsajal

.changeset/great-cycles-fold.md

@@ -0,0 +1,5 @@
+---
+"flowtestai": minor
+---
+
+A more intuitive UX to onboard first time user

package.json

@@ -60,6 +60,7 @@
     "notistack": "^3.0.1",
     "postcss": "^8.4.35",
     "react": "^18.2.0",
+    "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^18.2.0",
     "react-edit-text": "^5.1.1",
     "react-icons": "^5.0.1",

pnpm-lock.yaml

@@ -7,7 +7,6 @@ import { indentWithTab, history } from '@codemirror/commands';
 import { json } from '@codemirror/lang-json';
 import { defaultKeymap } from '@codemirror/commands';
 import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
-import 'components/atoms/Editor.css';
 
 export const Editor = ({ ...props }) => {
   const editor = useRef();

src/components/atoms/Editor.css

@@ -13,48 +13,6 @@ const Button = ({
   onlyIcon,
   padding,
 }) => {
-  // const btnColorStyles = {
-  //   primary: {
-  //     default: 'border-denim-600 bg-denim-600 text-white hover:bg-denim-700', // with bg color
-  //     intent: {
-  //       info: 'border-sky-600 bg-sky-600 text-white hover:bg-sky-700',
-  //       success: 'border-green-600 bg-green-600 text-white hover:bg-green-700',
-  //       warning: 'border-amber-600 bg-amber-600 text-white hover:bg-amber-700',
-  //       error: 'border-red-600 bg-red-600 text-white hover:bg-red-700',
-  //     },
-  //   },
-  //   secondary: {
-  //     default: 'border border-denim-600 bg-denim-50 text-denim-600 hover:bg-denim-100', // outline
-  //     intent: {
-  //       info: 'border border-sky-600 bg-sky-50 text-sky-600 hover:bg-sky-100',
-  //       success: 'border border-green-600 bg-green-50 text-green-600 hover:bg-green-100',
-  //       warning: 'border border-amber-600 bg-amber-50 text-amber-600 hover:bg-amber-100',
-  //       error: 'border border-red-600 bg-red-50 text-red-600 hover:bg-red-100',
-  //     },
-  //   },
-  //   tertiary: {
-  //     default: 'text-denim-600 hover:bg-denim-100', // without border
-  //     intent: {
-  //       info: 'text-sky-600 hover:bg-sky-100',
-  //       success: 'text-green-600 hover:bg-green-100',
-  //       warning: 'text-amber-600 hover:bg-amber-100',
-  //       error: 'text-red-600 hover:bg-red-100',
-  //     },
-  //   },
-  //   minimal: {
-  //     default: 'text-fog-600 hover:text-fog-900 hover:font-semibold hover:bg-fog-50',
-  //     intent: {
-  //       info: 'text-sky-600 hover:text-sky-900 hover:font-semibold',
-  //       success: 'text-green-600 hover:text-green-900 hover:font-semibold',
-  //       warning: 'text-amber-600 hover:text-amber-900 hover:font-semibold',
-  //       error: 'text-red-600 hover:text-red-900 hover:font-semibold',
-  //     },
-  //   },
-  //   disabled: {
-  //     default: 'text-fog-600 hover:text-fog-900 hover:font-semibold hover:bg-fog-50 cursor-not-allowed',
-  //   },
-  // };
-
   const btnColorStyles = {
     primary: {
       default: 'border-cyan-900 text-white bg-cyan-900 hover:border-cyan-950 hover:bg-cyan-950', // with bg color
@@ -93,7 +51,7 @@ const Button = ({
       },
     },
     disabled: {
-      default: 'text-gray-300 hover:font-semibold cursor-not-allowed',
+      default: 'text-gray-300 border border-gray-300 cursor-not-allowed',
     },
   };
 

src/components/atoms/Editor.js

@@ -1,7 +1,11 @@
 import React from 'react';
 
-const HorizontalDivider = () => {
-  return <div className='h-[1px] w-full bg-gray-300'></div>;
+const HorizontalDivider = ({ themeColor, themeStyles }) => {
+  return (
+    <div
+      className={`h-[1px] w-full  ${themeColor ? themeColor : 'bg-gray-300'}  ${themeStyles ? themeStyles : ''}`}
+    ></div>
+  );
 };
 
 export default HorizontalDivider;

src/components/atoms/common/Button.js

@@ -1,15 +1,19 @@
 import React from 'react';
 
-const TextInput = ({ id, placeHolder, onChangeHandler, name, value }) => {
+const TextInput = ({ id, placeHolder, onChangeHandler, name, value, disableState }) => {
+  const mainStyles =
+    'nodrag nowheel block w-full rounded border border-slate-700 bg-background-light p-2.5 text-sm outline-none';
+  const intentStyles = disableState ? 'cursor-not-allowed text-slate-400' : 'text-slate-900';
   return (
     <input
       id={id}
       type='text'
       placeholder={placeHolder}
-      className='nodrag nowheel bg-background-light block w-full rounded border border-slate-700 p-2.5 text-sm text-slate-900 outline-none'
+      className={`${mainStyles} ${intentStyles}`}
       name={name}
       onChange={onChangeHandler}
       value={value}
+      disabled={disableState}
     />
   );
 };

src/components/atoms/common/HorizontalDivider.js

@@ -27,7 +27,7 @@ const TimeoutSelector = ({ optionsData, onSelectHandler = () => null }) => {
       >
         <div className='relative flex h-full'>
           <Listbox.Button
-            className={`flex items-center justify-between sm:text-sm ${optionsData.length ? 'cursor-default' : 'cursor-not-allowed'}`}
+            className={`flex items-center justify-between gap-1 sm:text-sm ${optionsData.length ? 'cursor-default' : 'cursor-not-allowed'}`}
           >
             <ClockIcon className='w-5 h-5' />
             <div className='min-w-24'>{selected ? selected : 'Select Timeout'}</div>

src/components/atoms/common/TextInput.js

@@ -1,10 +1,11 @@
 import React from 'react';
 
-const Textarea = ({ placeHolder, onChangeHandler, name, value, rows }) => {
+const Textarea = ({ id, placeHolder, onChangeHandler, name, value, rows }) => {
   return (
     <textarea
+      id={id}
       placeholder={placeHolder}
-      className='nodrag nowheel bg-background-light min-h-12 w-full min-w-72 resize rounded border border-slate-700 p-2.5 text-sm text-slate-900 outline-none'
+      className='nodrag nowheel min-h-12 w-full min-w-72 resize rounded border border-slate-700 bg-background-light p-2.5 text-sm text-slate-900 outline-none'
       name={name}
       onChange={onChangeHandler}
       rows={rows}