Quill-UU-Button-Heading-Text-TextField

docusaurus.config.js

@@ -31,6 +31,7 @@ const config = {
   },
 
   plugins: [
+    'custom-loaders',
     '@docusaurus/theme-live-codeblock',
     'docusaurus-plugin-sass',
     [

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.6",
     "@deriv/deriv-api": "^1.0.11",
     "@deriv/quill-design": "^1.2.18",
     "@deriv/quill-icons": "^1.21.3",
@@ -41,6 +42,7 @@
     "@use-gesture/react": "^10.3.0",
     "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
     "clsx": "^1.2.1",
+    "custom-loaders": "file:plugins/custom-loaders",
     "docusaurus-plugin-sass": "^0.2.2",
     "identity-obj-proxy": "^3.0.0",
     "install": "^0.13.0",

plugins/custom-loaders/index.js

@@ -0,0 +1,19 @@
+module.exports = function (context, options) {
+  return {
+    name: 'custom-loaders',
+    configureWebpack(config, isServer) {
+      return {
+        module: {
+          rules: [
+            {
+              test: /\.m?js/,
+              resolve: {
+                fullySpecified: false,
+              },
+            },
+          ],
+        },
+      };
+    },
+  };
+};

plugins/custom-loaders/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "custom-loaders",
+  "version": "0.0.0",
+  "private": true
+}

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>