[DAPI] feat: new app dashboard and app registration flow

jest.config.js

@@ -16,7 +16,9 @@ module.exports = {
     '^.+\\.(j|t)sx?$': 'ts-jest',
     '^.+\\.mjs$': 'babel-jest',
   },
-  transformIgnorePatterns: ['node_modules/(?!(@docusaurus|swiper|ssr-window|dom7)|@theme)'],
+  transformIgnorePatterns: [
+    'node_modules/(?!(@docusaurus|swiper|ssr-window|dom7)|@theme|@deriv/quill-design)',
+  ],
   moduleNameMapper: {
     '@theme/(.*)': '@docusaurus/theme-classic/src/theme/$1',
 

jest.setup.ts

@@ -17,3 +17,18 @@ window.ResizeObserver =
     observe: jest.fn(),
     unobserve: jest.fn(),
   }));
+
+// HINT: we need this mock for the tests with useDevice hook
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "@deriv/deriv-api": "^1.0.11",
+    "@deriv/quill-design": "^1.2.18",
     "@deriv/ui": "^0.1.0",
     "@docusaurus/core": "^2.4.0",
     "@docusaurus/plugin-client-redirects": "^2.4.0",
@@ -32,7 +33,9 @@
     "@mdx-js/react": "^1.6.22",
     "@radix-ui/react-dropdown-menu": "^2.0.2",
     "@radix-ui/react-tabs": "^1.0.2",
+    "@react-spring/web": "^9.7.3",
     "@testing-library/react-hooks": "^8.0.1",
+    "@use-gesture/react": "^10.3.0",
     "babel-plugin-jsx-remove-data-test-id": "^3.0.0",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "^0.2.2",

src/components/CustomRadioButton/__tests__/CustomRadioButton.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import CustomRadioButton from '..';
+
+const onChange = jest.fn();
+
+describe('CustomRadioButton', () => {
+  const renderRadioButton = ({ checked }) => {
+    render(
+      <CustomRadioButton
+        id='test_id'
+        name='test_name'
+        value='test_value'
+        checked={checked}
+        onChange={onChange}
+      >
+        <label htmlFor='test_id'>this is a test label</label>
+      </CustomRadioButton>,
+    );
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it('should render the radio button', () => {
+    renderRadioButton({ checked: true });
+    const label = screen.getByText('this is a test label');
+    expect(label).toBeInTheDocument();
+  });
+
+  it('should render the radio button with checked icon', () => {
+    renderRadioButton({ checked: true });
+    const imgElement = screen.getByRole('img');
+    expect(imgElement).toBeInTheDocument();
+    expect(imgElement).toHaveAttribute('src', '/img/circle_dot_caption_fill.svg');
+  });
+
+  it('should render the radio button with unchecked icon', () => {
+    renderRadioButton({ checked: false });
+    const imgElement = screen.getByRole('img');
+    expect(imgElement).toBeInTheDocument();
+    expect(imgElement).toHaveAttribute('src', '/img/circle_dot_caption_bold.svg');
+  });
+
+  it('should fire the onChange event when clicking the button', async () => {
+    renderRadioButton({ checked: false });
+    const radio_button = screen.getByRole<HTMLInputElement>('radio', {
+      name: 'this is a test label',
+    });
+    await userEvent.click(radio_button);
+    expect(onChange).toBeCalled();
+  });
+});

src/components/CustomRadioButton/custom_radio_button.scss

@@ -0,0 +1,30 @@
+.custom_radio {
+  position: relative;
+
+  input {
+    opacity: 0;
+    position: absolute;
+    top: 8px;
+  }
+
+  label {
+    display: flex;
+    align-items: baseline;
+    cursor: pointer;
+  }
+
+  &__icon {
+    position: relative;
+    margin-inline-end: 8px;
+    top: 6px;
+
+    img {
+      width: 24px;
+      height: 24px;
+
+      @media (max-width: 767px) {
+        width: 48px;
+      }
+    }
+  }
+}