binary-com · habib-deriv · Jan 22, 2024 · Jan 22, 2024
@@ -100,11 +100,6 @@
                         "pattern": "features/components/templates/layout",
                         "group": "parent",
                         "position": "after"
-                    },
-                    {
-                        "pattern": "features/components/quill/quill-layout",
-                        "group": "parent",
-                        "position": "after"
                     }
                 ],
                 "newlines-between": "never"

@@ -16,11 +16,10 @@ import {
     updateURLAsPerUserLanguage,
 } from 'common/utility'
 import './static/css/noto-sans-arabic.css'
-import 'swiper/swiper-bundle.min.css'
-import 'features/styles/app.scss'
 import './static/css/ubuntu.css'
 import './static/css/global.css'
-import '@deriv-com/blocks/style.css';
+import '@deriv-com/blocks/style.css'
+import '@deriv-com/components/style.css'
 
 const is_browser = typeof window !== 'undefined'
 

@@ -3,39 +3,12 @@
 const language_config_en = require(`./i18n-config-en.js`)
 const path = require('path')
 const { copyLibFiles } = require('@builder.io/partytown/utils')
-const { exec } = require('child_process')
-const translations_cache = {}
-
-function OSFunction() {
-    this.execCommand = function (cmd, callback) {
-        exec(cmd, (error, stdout) => {
-            if (error) {
-                console.error(`exec error: ${error}`)
-                return
-            }
-
-            callback(stdout)
-        })
-    }
-}
 
-const fetchTrustpilotData = () => {
-    // Trustpilot on-build data fetching
-    const os = new OSFunction()
-
-    os.execCommand('node scripts/trustpilot.js', (returnvalue) => {
-        console.log(returnvalue)
-    })
-}
+const translations_cache = {}
 
 exports.onPreBuild = async () => {
     await copyLibFiles(path.join(__dirname, 'static', '~partytown'))
 }
-exports.onPreInit = () => {
-    // Update truspilot.json file with latest data
-    fetchTrustpilotData()
-}
-
 // Based upon https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n
 
 const BuildPage = (page, actions) => {
@@ -392,7 +365,7 @@
            }
        }, [])

        console.log('pages', pages)

        deletePage(page)
        if (isProduction) {

@@ -6,14 +6,14 @@
     "dependencies": {
         "@artsy/fresnel": "^6.2.1",
         "@builder.io/partytown": "^0.8.1",
-        "@deriv-com/blocks": "^0.79.0",
-        "@deriv-com/components": "^0.47.0",
+        "@deriv-com/blocks": "^0.73.0",
+        "@deriv-com/components": "^0.43.0",
         "@deriv-com/hooks": "^0.10.0",
         "@deriv-com/providers": "^0.11.0",
-        "@deriv/analytics": "^1.4.4",
+        "@deriv/analytics": "^1.4.3",
         "@deriv/deriv-api": "^1.0.13",
-        "@deriv/quill-design": "^1.2.16",
-        "@deriv/quill-icons": "^1.1.13",
+        "@deriv/quill-design": "^1.3.2",
+        "@deriv/quill-icons": "^1.1.5",
         "@hookform/resolvers": "^3.3.2",
         "@livechat/customer-sdk": "^3.1.5",
         "@loadable/component": "^5.15.3",
@@ -63,7 +63,7 @@
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-date-picker": "8.4.0",
-        "react-device-detect": "^2.2.3",
+        "react-device-detect": "^2.2.2",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.48.2",
         "react-i18next": "^11.18.6",
@@ -159,9 +159,7 @@
     "scripts": {
         "analyze-bundle": "GENERATE_JSON_STATS=true gatsby build && npx webpack-bundle-analyzer -m static -r ./webpack-bundle-report/report.html ./public/stats.json",
         "build": "GATSBY_CPU_COUNT=2 gatsby build --log-pages",
-        "update:deriv-com-libs": "npm i @deriv-com/blocks@latest @deriv-com/components@latest @deriv-com/hooks@latest @deriv-com/providers@latest @deriv/quill-design@latest",
-        "update:quill-libs": "npm i @deriv/quill-design@latest @deriv/quill-icons@latest",
-        "update:all-libs": "npm run update:quill-libs; npm run update:deriv-com-libs",
+        "update:deriv-com-libs": "npm i @deriv-com/blocks@latest @deriv-com/components@latest @deriv-com/hooks@latest @deriv-com/providers@latest",
         "partytown": "partytown copylib public/~partytown",
         "develop": "GATSBY_CPU_COUNT=2 gatsby develop -o",
         "format": "prettier --write '**/*.js' '*.js'",
@@ -210,8 +208,5 @@
             "react": "^18.2.0",
             "react-dom": "^18.2.0"
         }
-    },
-    "optionalDependencies": {
-        "@parcel/watcher-linux-x64-glibc": "^2.3.0"
     }
 }
@@ -29,21 +29,21 @@ const icons: AccordionIcons = {
 
 const AccordionItem = React.forwardRef<HTMLDivElement, TAccordionItem>(
     ({ children, className, item_title, icon_type = 'chevron', ...props }, ref) => (
-        <Accordion.Item className={'at-accordion_item'} ref={ref} {...props}>
+        <Accordion.Item className={'accordion_item'} ref={ref} {...props}>
             <Accordion.Header>
-                <Accordion.Trigger className={dclsx('at-accordion_trigger', 'at-bg-color-primary')}>
+                <Accordion.Trigger className={dclsx('accordion_trigger', 'bg-color-primary')}>
                     <Typography.Heading size={'xs'}>
                         <Localize translate_text={item_title} />
                     </Typography.Heading>
                     <Icon
                         src={icons[icon_type]}
-                        className={'at-accordion_icon'}
+                        className={'accordion_icon'}
                         alt={'chevron'}
                         size={'large'}
                     />
                 </Accordion.Trigger>
             </Accordion.Header>
-            <Accordion.Content className={dclsx('at-accordion_content', className)}>
+            <Accordion.Content className={dclsx('accordion_content', className)}>
                 <div className="AccordionContentText">{children}</div>
             </Accordion.Content>
         </Accordion.Item>

@@ -9,7 +9,7 @@ const AccordionRoot = React.forwardRef<
 >(({ className, ...rest }, ref) => {
     return (
         <Accordion.Root
-            className={dclsx(className, 'at-accordion_root', 'at-bg-color-primary')}
+            className={dclsx(className, 'accordion_root', 'bg-color-primary')}
             {...rest}
             ref={ref}
         />

@@ -16,18 +16,14 @@ interface TAccordionItem extends AccordionItemProps {
 
 const AccordionShadowItem = React.forwardRef<HTMLDivElement, TAccordionItem>(
     ({ children, className, renderHeader, item_title, icon_type = 'chevron', ...props }, ref) => (
-        <Accordion.Item
-            className={'at-accordion_item at-accordion_shadow_item'}
-            ref={ref}
-            {...props}
-        >
+        <Accordion.Item className={'accordion_item accordion_shadow_item'} ref={ref} {...props}>
             <Accordion.Header>
                 <Accordion.Trigger
                     className={dclsx(
-                        'at-accordion_trigger at-accordion_shadow_item_trigger',
-                        'at-bg-color-primary',
-                        'at-padding-block-8x',
-                        'at-border-radius-4x',
+                        'accordion_trigger accordion_shadow_item_trigger',
+                        'bg-color-primary',
+                        'padding-block-8x',
+                        'border-radius-4x',
                     )}
                 >
                     {renderHeader ? (
@@ -40,20 +36,17 @@ const AccordionShadowItem = React.forwardRef<HTMLDivElement, TAccordionItem>(
                     {icon_type === 'chevron' ? (
                         <Icon
                             src={Chevron}
-                            className={'at-accordion_icon'}
+                            className={'accordion_icon'}
                             alt={'chevron'}
                             size={'large'}
                         />
                     ) : (
-                        <span className="at-accordion_icon at-plus_icon" />
+                        <span className="accordion_icon plus_icon" />
                     )}
                 </Accordion.Trigger>
             </Accordion.Header>
             <Accordion.Content
-                className={dclsx(
-                    'at-accordion_content at-accordion_shadow_item_content',
-                    className,
-                )}
+                className={dclsx('accordion_content accordion_shadow_item_content', className)}
             >
                 <div className="AccordionContentText">{children}</div>
             </Accordion.Content>

@@ -27,8 +27,8 @@ const Alert = ({
     return (
         <AlertDialog.Root defaultOpen>
             <AlertDialog.Portal>
-                <AlertDialog.Overlay className="at-alert-overlay" />
-                <AlertDialog.Content className="at-alert-content">
+                <AlertDialog.Overlay className="alert-overlay" />
+                <AlertDialog.Content className="alert-content">
                     <AlertDialog.Title asChild className="AlertDialogTitle">
                         <div>
                             <Typography.Heading as="h3" size="xxs" pb="12x">

@@ -52,7 +52,7 @@ const CardPrimary = ({
                 )}
                 <Typography.Heading
                     as="h3"
-                    className={dclsx(is_mobile_or_tablet ? 'at-text-large' : 'at-text-medium')}
+                    className={dclsx(is_mobile_or_tablet ? 'text-large' : 'text-medium')}
                     pb="4x"
                     weight="bold"
                 >

@@ -4,7 +4,7 @@ import { ContentSectionTagOptions } from 'features/types'
 import dclsx from 'features/utils/dclsx'
 
 const FixedContainer = ({ className, ...rest }: BoxProps<ContentSectionTagOptions>) => {
-    const classnames = dclsx(className, 'at-container-fixed')
+    const classnames = dclsx(className, 'container-fixed')
 
     return <Box className={classnames} {...rest} />
 }

@@ -4,7 +4,7 @@ import { ContentSectionTagOptions } from 'features/types'
 import dclsx from 'features/utils/dclsx'
 
 const FluidContainer = ({ className, ...rest }: BoxProps<ContentSectionTagOptions>) => {
-    const classnames = dclsx(className, 'at-container-fluid')
+    const classnames = dclsx(className, 'container-fluid')
 
     return <Box className={classnames} {...rest} />
 }

@@ -34,11 +34,11 @@ const generateFlexClasses = (options: FlexBoxClasses, prefix?: string) => {
     const classPrefix = prefix ? `${prefix}-` : ''
 
     return dclsx({
-        [`${classPrefix}at-gap-${gap}`]: gap,
-        [`${classPrefix}at-align-items-${align}`]: align,
-        [`${classPrefix}at-justify-${justify}`]: justify,
-        [`${classPrefix}at-flex-wrap-${wrap}`]: wrap,
-        [`${classPrefix}at-flex-dir-${direction}`]: direction,
+        [`${classPrefix}gap-${gap}`]: gap,
+        [`${classPrefix}align-items-${align}`]: align,
+        [`${classPrefix}justify-${justify}`]: justify,
+        [`${classPrefix}flex-wrap-${wrap}`]: wrap,
+        [`${classPrefix}flex-dir-${direction}`]: direction,
     })
 }
 
@@ -59,10 +59,10 @@ const FlexBoxContainer = <T extends ContentSectionTagOptions>({
     ...rest
 }: FlexBoxProps<T>) => {
     const classnames = dclsx(
-        'at-flex',
+        'flex',
         className,
         {
-            [`at-container-${container}`]: container,
+            [`container-${container}`]: container,
         },
         generateFlexItemClasses({ align_self, grow, shrink, basis }),
         generateFlexItemClasses(md ?? {}, 'md'),

@@ -29,10 +29,10 @@ export const generateFlexItemClasses = (options: FlexItemClasses, prefix = '') =
     const classPrefix = prefix ? `${prefix}-` : ''
     const { align_self, grow, shrink, basis } = options
     return dclsx({
-        [`${classPrefix}at-align-self-${align_self}`]: align_self,
-        [`${classPrefix}at-flex-grow-${grow}`]: grow,
-        [`${classPrefix}at-flex-shrink-${shrink}`]: shrink,
-        [`${classPrefix}at-flex-basis-${basis}`]: basis,
+        [`${classPrefix}align-self-${align_self}`]: align_self,
+        [`${classPrefix}flex-grow-${grow}`]: grow,
+        [`${classPrefix}flex-shrink-${shrink}`]: shrink,
+        [`${classPrefix}flex-basis-${basis}`]: basis,
     })
 }
 

@@ -9,8 +9,8 @@ interface IconProps extends ImgHTMLAttributes<'img'>, ClassProps {
 }
 
 const Icon = ({ size = 'small', has_rtl, className, ...rest }: IconProps) => {
-    const classnames = dclsx(className, `at-icon-${size}`, 'at-icon', {
-        'at-icon-rtl': has_rtl,
+    const classnames = dclsx(className, `icon-${size}`, 'icon', {
+        'icon-rtl': has_rtl,
     })
 
     return <Box as={'img'} className={classnames} {...rest} />

@@ -7,7 +7,7 @@ const CheckboxInput = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInput
         return (
             <Typography.Paragraph
                 as="label"
-                className={dclsx(className, 'at-checkbox_input_container')}
+                className={dclsx(className, 'checkbox_input_container')}
             >
                 <input type={'checkbox'} {...rest} ref={ref} />
                 {children}