Merge pull request #26 from agrim-deriv/Agrim/DAPI544/quill-ui-button

Agrim/dapi544/quill UI

jest.config.js

@@ -17,7 +17,7 @@ module.exports = {
     '^.+\\.mjs$': 'babel-jest',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!(@docusaurus|swiper|ssr-window|dom7)|@theme|@deriv/quill-design)',
+    'node_modules/(?!(@docusaurus|swiper|ssr-window|dom7)|@theme|@deriv-com/quill-ui)',
   ],
   moduleNameMapper: {
     '@theme/(.*)': '@docusaurus/theme-classic/src/theme/$1',
@@ -30,7 +30,9 @@ module.exports = {
     '@docusaurus/plugin-content-docs/client': '@docusaurus/plugin-content-docs/src/client/index.ts',
     '@site/(.*)': '<rootDir>/$1',
     '\\.(css|scss|sass|less)$': 'identity-obj-proxy',
+    '@deriv-com/quill-ui': 'node_modules/@deriv-com/quill-ui/dist/main.js',
   },
+
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'mjs', 'json'],
   rootDir: '.',
   roots: ['<rootDir>'],

package.json

@@ -21,8 +21,8 @@
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,md,json}' --config ./.prettierrc"
   },
   "dependencies": {
+    "@deriv-com/quill-ui": "^1.9.22",
     "@deriv/deriv-api": "^1.0.11",
-    "@deriv/quill-design": "^1.2.18",
     "@deriv/quill-icons": "^1.21.3",
     "@deriv/ui": "^0.1.0",
     "@docusaurus/core": "^2.4.0",

src/components/CustomAccordion/custom-accordion.scss

@@ -13,6 +13,8 @@
 
 .accordion_header {
   display: flex;
+  overflow-wrap: anywhere;
+  column-gap: 12px;
   background-color: transparent;
 
   [data-state='open'] {

src/components/SwipeableBottomSheet/index.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { useDrag } from '@use-gesture/react';
 import { a, useSpring, config } from '@react-spring/web';
-import { Button } from '@deriv/quill-design';
+import { Button } from '@deriv-com/quill-ui';
 import './swipeable-bottom-sheet.scss';
 
 type SwipeableBottomSheetProps = {
@@ -88,8 +88,8 @@ const SwipeableBottomSheet: React.FC<SwipeableBottomSheetProps> = ({
               <div className='action_sheet__body__footer'>
                 {primary_action && (
                   <Button
-                    colorStyle='black'
-                    size='md'
+                    color='black'
+                    size='lg'
                     variant='primary'
                     onClick={primary_action.onClick}
                   >
@@ -98,8 +98,8 @@ const SwipeableBottomSheet: React.FC<SwipeableBottomSheetProps> = ({
                 )}
                 {secondary_action && (
                   <Button
-                    colorStyle='black'
-                    size='md'
+                    color='black'
+                    size='lg'
                     variant='secondary'
                     onClick={secondary_action.onClick}
                   >

src/features/dashboard/components/AppDashboardContainer/app-dashboard-container.scss

@@ -11,7 +11,7 @@
     text-align: center;
     padding-inline: 16px;
     h2 {
-      margin-bottom: 16px;
+      margin-bottom: 8px;
     }
   }
 

src/features/dashboard/components/AppDashboardContainer/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
-import { Heading, Text } from '@deriv/quill-design';
+import { Heading, Text } from '@deriv-com/quill-ui';
 import './app-dashboard-container.scss';
 
 const AppDashboardContainer: React.FC = ({ children }) => {
   return (
     <div className='app_dashboard_container'>
       <div className='app_dashboard_container_main'>
         <div className='app_dashboard_container_top'>
-          <Heading.H2>App dashboard</Heading.H2>
+          <Heading.H2>App Dashboard</Heading.H2>
           <Text size='md'>
             Start using Deriv API to bring custom integrations and powerful automation to your apps.
           </Text>

src/features/dashboard/components/AppRegister/app-register.scss

@@ -2,7 +2,10 @@
   margin-inline: 16px;
   margin-top: 60px;
   max-width: 608px;
-
+  &_input {
+    padding: 16px;
+    width: 100%;
+  }
   &_form {
     display: flex;
     justify-content: center;

src/features/dashboard/components/AppRegister/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, TextField } from '@deriv/quill-design';
+import { Button } from '@deriv-com/quill-ui';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import './app-register.scss';
@@ -66,23 +66,21 @@ const AppRegister: React.FC<TAppRegisterProps> = ({ submit }) => {
       <div className='app_register_container'>
         <div className={`${has_error && 'error-border'} app_register_container__fields`}>
           <div className='app_register_container__fields__input'>
-            <TextField
+            <input
               {...register('name')}
-              label={`Enter your app's name`}
               placeholder={`Enter your app's name`}
-              inputSize='md'
+              className='app_register_container_input'
             />
           </div>
           <div className='app_register_container__fields__button'>
             <Button
-              colorStyle='coral'
-              size='md'
+              color='coral'
+              size='lg'
               variant='primary'
               role='submit'
               disabled={has_error}
-            >
-              Register now
-            </Button>
+              label='Register now'
+            ></Button>
           </div>
         </div>
         <span className='error'>{errors?.tnc_approval?.message}</span>

src/features/dashboard/components/AppsTable/index.tsx

@@ -1,7 +1,7 @@
 import { ApplicationObject } from '@deriv/api-types';
 import React, { HTMLAttributes, useCallback, useState } from 'react';
 import { Cell, Column } from 'react-table';
-import { Button, Heading, Text } from '@deriv/quill-design';
+import { Button, Heading, Text } from '@deriv-com/quill-ui';
 import { LabelPairedCirclePlusMdRegularIcon } from '@deriv/quill-icons';
 
 import useAppManager from '@site/src/hooks/useAppManager';
@@ -75,12 +75,12 @@ const AppsTableHeader: React.FC<{
         </Text>
       </div>
       <Button
-        colorStyle='coral'
-        size='md'
+        color='coral'
+        size='lg'
         variant='primary'
         role='submit'
         iconPosition='start'
-        icon={LabelPairedCirclePlusMdRegularIcon}
+        icon={<LabelPairedCirclePlusMdRegularIcon />}
         className='apps_table__header__button'
         onClick={() => {
           updateCurrentTab(TDashboardTab.REGISTER_APP);

src/features/dashboard/components/Modals/AppRegisterSuccessModal/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import useAppManager from '@site/src/hooks/useAppManager';
 import SwipeableBottomSheet from '@site/src/components/SwipeableBottomSheet';
-import { Heading } from '@deriv/quill-design';
+import { Heading } from '@deriv-com/quill-ui';
 import './app-register-success-modal.scss';
 
 interface IAppRegisterSuccessModalProps {

src/styles/index.scss

@@ -1,6 +1,5 @@
 @use 'src/styles/utility' as *;
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;700&family=Ubuntu:wght@400;500;700&display=swap');
-@import '@deriv/quill-design/dist/quill-design.css';
 
 /**
  * Any CSS included here will be global. The classic template

src/theme/Root.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeProvider } from '@deriv/ui';
+import { ThemeProvider } from '@deriv-com/quill-ui';
 import type { ReactNode } from 'react';
 import { TrackJS } from 'trackjs';
 import siteConfig from '@generated/docusaurus.config';
@@ -30,7 +30,9 @@ export default function Root({ children }: TRootProps) {
           <PlaygroundProvider>
             <ApiTokenProvider>
               <AppManagerContextProvider>
-                <ThemeProvider>{children}</ThemeProvider>
+                <ThemeProvider theme='light' persistent>
+                  {children}
+                </ThemeProvider>
               </AppManagerContextProvider>
             </ApiTokenProvider>
           </PlaygroundProvider>