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,6 +21,7 @@
     "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,md,json}' --config ./.prettierrc"
   },
   "dependencies": {
+    "@deriv-com/quill-ui": "^1.9.11",
     "@deriv/deriv-api": "^1.0.11",
     "@deriv/quill-design": "^1.2.18",
     "@deriv/quill-icons": "^1.21.3",

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,7 +88,7 @@ const SwipeableBottomSheet: React.FC<SwipeableBottomSheetProps> = ({
               <div className='action_sheet__body__footer'>
                 {primary_action && (
                   <Button
-                    colorStyle='black'
+                    color='black'
                     size='md'
                     variant='primary'
                     onClick={primary_action.onClick}
@@ -98,7 +98,7 @@ const SwipeableBottomSheet: React.FC<SwipeableBottomSheetProps> = ({
                 )}
                 {secondary_action && (
                   <Button
-                    colorStyle='black'
+                    color='black'
                     size='md'
                     variant='secondary'
                     onClick={secondary_action.onClick}

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

@@ -1,5 +1,5 @@
 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 }) => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, TextField } from '@deriv/quill-design';
+import { Button, TextField } from '@deriv-com/quill-ui';
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import './app-register.scss';
@@ -74,13 +74,7 @@ const AppRegister: React.FC<TAppRegisterProps> = ({ submit }) => {
             />
           </div>
           <div className='app_register_container__fields__button'>
-            <Button
-              colorStyle='coral'
-              size='md'
-              variant='primary'
-              role='submit'
-              disabled={has_error}
-            >
+            <Button color='coral' size='md' variant='primary' role='submit' disabled={has_error}>
               Register now
             </Button>
           </div>

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';
@@ -73,12 +73,12 @@ const AppsTableHeader: React.FC<{ is_desktop: boolean }> = ({ is_desktop }) => {
         </Text>
       </div>
       <Button
-        colorStyle='coral'
+        color='coral'
         size='md'
         variant='primary'
         role='submit'
         iconPosition='start'
-        icon={LabelPairedCirclePlusMdRegularIcon}
+        icon={<LabelPairedCirclePlusMdRegularIcon />}
         className='apps_table__header__button'
         onClick={() => {
           updateCurrentTab('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/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,7 @@ export default function Root({ children }: TRootProps) {
           <PlaygroundProvider>
             <ApiTokenProvider>
               <AppManagerContextProvider>
-                <ThemeProvider>{children}</ThemeProvider>
+                <ThemeProvider theme='light'>{children}</ThemeProvider>
               </AppManagerContextProvider>
             </ApiTokenProvider>
           </PlaygroundProvider>