Ahmed/dapi 707/feat add account swticher on api explorer

package.json

@@ -26,7 +26,7 @@
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,md,json}' --config ./.prettierrc"
   },
   "dependencies": {
-    "@deriv-com/quill-ui": "^1.13.22",
+    "@deriv-com/quill-ui": "^1.16.21",
     "@deriv-com/analytics": "^1.18.0",
     "@deriv/deriv-api": "^1.0.11",
     "@radix-ui/react-tooltip": "^1.0.7",

src/components/AccountSwitcher/account_switcher.module.scss

@@ -1,7 +1,12 @@
 @use 'src/styles/utility' as *;
+@use 'src/styles/mixins' as *;
 
 .accountSwitcherWrapper > div {
-  max-width: 100%;
+  display: block;
+
+  @include mobile-sm {
+    width: 100%;
+  }
 }
 
 .customSelectItem {

src/components/AccountSwitcher/index.tsx

@@ -9,7 +9,7 @@ import CurrencyIcon from '../CurrencyIcon';
 import styles from './account_switcher.module.scss';
 
 interface AccountSwitcherProps {
-  onChange: (accountName?: string) => void;
+  onChange?: (accountName?: string) => void;
 }
 
 const AccountSwitcher = ({ onChange }: AccountSwitcherProps) => {

src/components/CustomAccordion/custom-accordion.scss

@@ -1,14 +1,16 @@
+@use 'src/styles/mixins' as *;
+
 .accordion_root {
   margin: 16px;
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
 
-  @media screen and (max-width: 786px) {
+  @include mobile {
     margin-top: 15px;
   }
 
-  @media screen and (max-width: 500px) {
+  @include mobile-sm {
     margin: 0;
     margin-top: 15px;
   }

src/components/custom-tabs/custom-tabs.scss

@@ -1,3 +1,5 @@
+@use 'src/styles/mixins' as *;
+
 .tabs {
   display: flex;
   flex-direction: column;
@@ -25,7 +27,7 @@
       min-width: 320px;
       cursor: pointer;
 
-      @media screen and (max-width: 500px) {
+      @include mobile-sm {
         min-width: 160px;
       }
 
@@ -35,7 +37,7 @@
       }
     }
 
-    @media screen and (max-width: 786px) {
+    @include mobile {
       margin-block: 32px;
     }
   }

src/features/Apiexplorer/Dropdown/Dropdown.module.scss

@@ -1,8 +1,17 @@
 @use 'src/styles/utility' as *;
+@use 'src/styles/mixins' as *;
+
 .dropdown {
+  flex: 1;
   user-select: none;
-  border: 1px solid var(--ifm-color-gray-400);
-  position: relative;
+  border: var(--component-field-border-width) solid var(--component-field-border-color-default);
+  border-radius: var(--semantic-borderRadius-md);
+  &:hover {
+    border-color: var(--component-field-border-color-hover);
+  }
+  &.active {
+    border-color: var(--component-field-border-color-active);
+  }
 
   .arrow {
     background-size: rem(2.2);
@@ -20,16 +29,27 @@
   }
 
   .dropdownBtn {
-    padding: 4px 8px;
-    background: var(--ifm-color-white);
-    color: var(--ifm-color-black);
+    padding: 4px 15px;
+    color: var(--component-field-label-color-default);
     display: flex;
     align-items: center;
     justify-content: space-between;
     font-size: rem(1.6);
+    height: 54px;
     &:hover {
       cursor: pointer;
     }
+
+    p {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: 18rem;
+
+      @include mobile {
+        width: 100%;
+      }
+    }
   }
 
   .dropdownContent {

src/features/Apiexplorer/Dropdown/Dropdown.tsx

@@ -27,26 +27,24 @@ export const Dropdown = ({ selected, setSelected, handleChange, selected_value }
   };
 
   return (
-    <div>
-      <div className={styles.dropdown} ref={ref}>
-        <div className={styles.dropdownBtn} onClick={handleToggleDropdown} data-testid='dropdown'>
-          <span>{selected_value}</span>
-          <span className={clsx(styles.arrow, { [styles.down]: isActive })} />
-        </div>
-        {isActive && (
-          <div className={`${styles.dropdownContent} ${toggle ? styles.show : ''}`}>
-            <DropdownList
-              selected_value={selected_value}
-              handleChange={handleChange}
-              selected={selected}
-              setSelected={setSelected}
-              searchResults={searchResults}
-              setIsActive={setIsActive}
-              setSearchResults={setSearchResults}
-            />
-          </div>
-        )}
+    <div className={`${styles.dropdown} ${isActive && styles.active}`} ref={ref}>
+      <div className={styles.dropdownBtn} onClick={handleToggleDropdown} data-testid='dropdown'>
+        <p>{selected_value}</p>
+        <span className={clsx(styles.arrow, { [styles.down]: isActive })} />
       </div>
+      {isActive && (
+        <div className={styles.dropdownContent}>
+          <DropdownList
+            selected_value={selected_value}
+            handleChange={handleChange}
+            selected={selected}
+            setSelected={setSelected}
+            searchResults={searchResults}
+            setIsActive={setIsActive}
+            setSearchResults={setSearchResults}
+          />
+        </div>
+      )}
     </div>
   );
 };

src/features/Apiexplorer/Dropdown/DropdownList/DropdownList.module.scss

@@ -3,14 +3,12 @@
 
 .dropdownWrapper {
   position: absolute;
-  top: 0;
+  top: 1px;
   left: -1px;
   width: calc(100% + 2px);
-  height: 308px;
   z-index: 1000;
   background-color: var(--ifm-color-white);
-  border: 1px solid var(--ifm-color-gray-300);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  border: var(--component-field-border-width) solid var(--component-field-border-color-default);
 }
 
 .dropdownInputWrapper {
@@ -41,10 +39,6 @@
     color: var(--ifm-color-black);
     font-size: rem(1.6);
   }
-  .dropdownSelected {
-    background: var(--ifm-color-gray-400);
-    pointer-events: none;
-  }
   .dropdownItem {
     list-style: none;
     margin: 0;
@@ -56,8 +50,13 @@
     font-size: rem(1.6);
     transition: all 0.2s;
     &:hover {
-      background: var(--ifm-color-primary);
-      color: var(--ifm-color-white);
+      background: var(--component-dropdownItem-bg-hover);
+      color: var(--ifm-color-black);
     }
   }
+  .dropdownSelected, .dropdownSelected:hover {
+    background: var(--component-dropdownItem-bg-selected);
+    color: var(--ifm-color-white);
+    pointer-events: none;
+  }
 }

src/features/Apiexplorer/Dropdown/DropdownList/index.tsx

@@ -3,6 +3,7 @@ import { playground_requests } from '@site/src/utils/playground_requests';
 import clsx from 'clsx';
 import styles from './DropdownList.module.scss';
 import Translate from '@docusaurus/Translate';
+import { TextField } from '@deriv-com/quill-ui';
 
 type TOption = {
   name: string;
@@ -46,11 +47,9 @@ const DropdownList: React.FC<TDropdownList> = ({
   return (
     <div className={styles.dropdownWrapper}>
       <div className={styles.dropdownInputWrapper}>
-        <input
-          autoFocus
+        <TextField
           type='text'
           data-testid='searchInput'
-          className={styles.dropdownSearch}
           onChange={(event) => {
             setSearchResults(event.target.value);
           }}

src/features/Apiexplorer/RequestJSONBox/RequestJSONBox.module.scss

@@ -1,4 +1,5 @@
 @use 'src/styles/utility' as *;
+@use 'src/styles/mixins' as *;
 
 .playgroundBox {
   border-radius: 6px;
@@ -35,20 +36,17 @@
       justify-content: center;
       gap: rem(0.5);
       padding: rem(2);
-    }
-  }
 
-  .textareaRequest {
-    border-radius: 4px;
-    resize: none;
-  }
+      button{
+        width: 96px;
+        height: 48px;
+      }
 
-  .playgroundRequest {
-    min-height: rem(20);
-    padding: rem(1) rem(1.2);
-    border: none;
-    color: var(--ifm-color-info-contrast-foreground);
-    border: 1px solid var(--ifm-color-secondary-darker);
+      button:nth-child(1) {
+        border: var(--component-button-border-width-sm) solid var(--component-button-bg-coral-primary-default);
+      }
+
+    }
   }
 
   .registrationRequest {
@@ -68,20 +66,4 @@
 
 div[role='dialog'] {
   padding-top: rem(0.8);
-}
-
-@media (max-width: 992px) {
-  div[role='dialog'] {
-    height: unset;
-    width: rem(44);
-    padding-top: rem(0.2);
-  }
-}
-
-@media (max-width: 500px) {
-  div[role='dialog'] {
-    height: unset;
-    width: rem(32);
-    padding-top: rem(0.2);
-  }
-}
+}

src/features/Apiexplorer/RequestJSONBox/__tests__/RequestJsonBox.test.tsx

@@ -81,9 +81,7 @@ describe('RequestResponseRenderer', () => {
     cleanup();
     render(<RequestJSONBox {...newProps} />);
     const textarea = screen.getByLabelText('Request JSON');
-    const placeholder = screen.getAllByPlaceholderText('Request JSON');
     expect(textarea).toBeInTheDocument();
-    expect(placeholder).toHaveLength(1);
   });
 
   it('should disable text box if no api call is selected in the dropdown', async () => {
@@ -118,7 +116,7 @@ describe('RequestResponseRenderer', () => {
   });
   it('should show  request api json of the call selected from dropdown inside the text area', async () => {
     render(<RequestJSONBox {...mockProps} />);
-    const textarea = screen.getByPlaceholderText('Request JSON');
+    const textarea = screen.getByRole('textbox', { name: /Request JSON/i });
     expect(textarea).toBeInTheDocument();
     expect(textarea).toHaveValue('{"app_list": 1}');
   });

src/features/Apiexplorer/RequestJSONBox/index.tsx

@@ -1,11 +1,11 @@
 import { TSocketEndpointNames } from '@site/src/configs/websocket/types';
-import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import RequestResponseRenderer from '../RequestResponseRenderer';
 import style from './RequestJSONBox.module.scss';
 import SubscribeRenderer from '../SubscribeRenderer';
 import { TSocketSubscribableEndpointNames } from '@site/src/configs/websocket/types';
-import Translate, { translate } from '@docusaurus/Translate';
+import { translate } from '@docusaurus/Translate';
+import { TextArea } from '@deriv-com/quill-ui';
 
 interface TRequestJSONBox<T extends TSocketEndpointNames> {
   handleChange: React.ChangeEventHandler<HTMLTextAreaElement>;
@@ -23,20 +23,19 @@ function RequestJSONBox<T extends TSocketEndpointNames>({
   const is_subscribe = useMemo(() => {
     return request_example?.includes('subscribe');
   }, [request_example]);
-
+  
   return (
     <div className={style.playgroundBox}>
       <div className={style.formContent}>
-        <label htmlFor='playground-request' className={style.inlineLabel}>
-          <Translate>Request JSON</Translate>
-        </label>
-        <textarea
+        <TextArea
           id='playground-request'
-          className={clsx(style.textareaRequest, style.playgroundRequest)}
-          placeholder={translate({ message: 'Request JSON' })}
+          textAreaClassName={style.textareaRequest}
+          label={translate({ message: 'Request JSON' })}
           onChange={handleChange}
           value={request_example}
-        ></textarea>
+          rows={10}
+          resizable={false}
+        />
         {is_subscribe ? (
           <SubscribeRenderer
             name={name as TSocketSubscribableEndpointNames}