Add VirtualKeyBoard

Author: Kubit

src/components/index.ts

@@ -81,6 +81,7 @@ export * from './tableCaption';
 export * from './tableDivider';
 export * from './tableV2';
 export * from './dataTable';
+export * from './virtualKeyboard';
 
 /**
  * Assets components.

src/components/virtualKeyboard/__tests__/virtualKeyboard.test.tsx

@@ -0,0 +1,68 @@
+import { fireEvent, screen } from '@testing-library/react';
+import * as React from 'react';
+
+import { axe } from 'jest-axe';
+
+import { renderProvider } from '@/tests/renderProvider/renderProvider.utility';
+import { ROLES } from '@/types';
+
+import { VirtualKeyboard } from '../index';
+import { IVirtualKeyboard } from '../types';
+
+const mockProps: IVirtualKeyboard = {
+  variant: 'DEFAULT',
+  digits: ['0', '4', '2', '8', '7', '3', '9', '1', '6', '5'],
+  icon: { icon: 'CLOSE', altText: 'Remove' },
+  dataTestId: 'test-data',
+  onDigitButtonClick: jest.fn(),
+  onRemoveButtonClick: jest.fn(),
+};
+
+describe('Virtual Keyboard component', () => {
+  it('Should render component', async () => {
+    const { container } = renderProvider(<VirtualKeyboard {...mockProps} />);
+
+    const buttons = screen.getAllByRole(ROLES.BUTTON);
+    expect(buttons).toHaveLength(11);
+
+    const results = await axe(container);
+    expect(container).toHTMLValidate();
+    expect(results).toHaveNoViolations();
+  });
+
+  it('Should callback onDigitButtonClick and onRemoveButtonClick when pressed', () => {
+    const onDigitButtonClick = jest.fn();
+    const onRemoveButtonClick = jest.fn();
+    renderProvider(
+      <VirtualKeyboard
+        {...mockProps}
+        onDigitButtonClick={onDigitButtonClick}
+        onRemoveButtonClick={onRemoveButtonClick}
+      />
+    );
+
+    const buttons = screen.getAllByRole(ROLES.BUTTON);
+    fireEvent.click(buttons[0]);
+    expect(onDigitButtonClick).toHaveBeenCalled();
+
+    fireEvent.click(buttons[10]);
+    expect(onRemoveButtonClick).toHaveBeenCalled();
+  });
+
+  it('When onFocus and onBlur will change internal styles, but no action will be called', () => {
+    const onDigitButtonClick = jest.fn();
+    const onRemoveButtonClick = jest.fn();
+    renderProvider(
+      <VirtualKeyboard
+        {...mockProps}
+        onDigitButtonClick={onDigitButtonClick}
+        onRemoveButtonClick={onRemoveButtonClick}
+      />
+    );
+
+    const buttons = screen.getAllByRole(ROLES.BUTTON);
+    fireEvent.focus(buttons[0]);
+    fireEvent.blur(buttons[0]);
+    expect(mockProps.onDigitButtonClick).not.toHaveBeenCalled();
+  });
+});

src/components/virtualKeyboard/components/digitButton.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+
+import { ButtonType } from '@/components/button';
+import { Text } from '@/components/text/text';
+import { TextComponentType } from '@/components/text/types/component';
+
+import { ButtonKeyboardStateType, IDigitButton } from '../types';
+// styles
+import { DigitButtonStyled } from '../virtualKeyboard.styled';
+
+/**
+ * @description
+ * Digit button component to be used in the virtual keyboard.
+ * @internal
+ */
+export const DigitButton = (props: IDigitButton): JSX.Element => {
+  const onClick: React.MouseEventHandler<HTMLButtonElement> = event => {
+    props.onClick(props.digit, event);
+  };
+  return (
+    <DigitButtonStyled
+      data-testid={props.dataTestId}
+      styles={props.styles}
+      type={ButtonType.BUTTON}
+      onClick={onClick}
+    >
+      <Text
+        component={TextComponentType.SPAN}
+        customTypography={props.styles?.digitButtons?.[ButtonKeyboardStateType.DEFAULT]?.text}
+      >
+        {props.digit}
+      </Text>
+    </DigitButtonStyled>
+  );
+};

src/components/virtualKeyboard/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+
+export { VirtualKeyboard } from './virtualKeyboard';

src/components/virtualKeyboard/stories/argtypes.ts

@@ -0,0 +1,120 @@
+import { ICONS } from '@/assets';
+import { CATEGORY_CONTROL } from '@/constants/categoryControl';
+import { IThemeObjectVariants } from '@/designSystem/themesObject';
+import { objectFlip } from '@/storybook/utils/utils';
+import { ArgTypesReturn } from '@/types';
+
+export const argtypes = (
+  variantsObject: IThemeObjectVariants,
+  themeSelected: string
+): ArgTypesReturn => {
+  return {
+    variant: {
+      description: 'VirtualKeyboard variant',
+      type: { name: 'string', required: true },
+      control: { type: 'select' },
+      options: Object.keys(variantsObject[themeSelected].VirtualKeyboardVariantType || {}),
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    digits: {
+      description: 'There will be range number buttons from 0 value to 9 value placed randomly.',
+      type: { name: 'array', required: true },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'string[]',
+        },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    icon: {
+      description: 'Icon of the remove button',
+      type: { name: 'string' },
+      control: { type: 'select', labels: objectFlip(ICONS) },
+      options: Object.values(ICONS),
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
+    iconAltText: {
+      description: 'Alt text of the icon',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    onDigitButtonClick: {
+      description: 'The event occurs when the user clicks on the digit button',
+      type: { name: 'function', required: true },
+      control: false,
+      table: {
+        type: {
+          summary:
+            '(digit: string, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void',
+        },
+        category: CATEGORY_CONTROL.FUNCTIONS,
+      },
+    },
+    onRemoveButtonClick: {
+      description:
+        'User can remove what they have clicked. The event occurs when the user clicks on the remove button',
+      type: { name: 'function', required: true },
+      control: false,
+      table: {
+        type: {
+          summary: 'React.MouseEventHandler<HTMLButtonElement>',
+        },
+        category: CATEGORY_CONTROL.FUNCTIONS,
+      },
+    },
+    id: {
+      description: 'Identifier of the virtual keyboard',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        category: CATEGORY_CONTROL.ACCESIBILITY,
+      },
+    },
+    dataTestId: {
+      description:
+        'Test id of the virtual keyboard. Internal components will concatenate from this test id',
+      type: { name: 'string' },
+      control: { type: 'text' },
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: 'virtualkeyboard',
+        },
+        category: CATEGORY_CONTROL.TESTING,
+      },
+    },
+    ctv: {
+      description: 'Object used for update variant styles',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'object',
+        },
+        category: CATEGORY_CONTROL.CUSTOMIZATION,
+      },
+    },
+  };
+};

src/components/virtualKeyboard/stories/virtualKeyboard.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ICONS } from '@/assets';
+import { STYLES_NAME } from '@/constants';
+import { themesObject, variantsObject } from '@/designSystem/themesObject';
+
+import { IVirtualKeyboard } from '../types';
+import { VirtualKeyboard as Story } from '../virtualKeyboard';
+import { argtypes } from './argtypes';
+
+const themeSelected = localStorage.getItem('themeSelected') || 'kubit';
+
+const meta = {
+  title: 'Components/Forms/VirtualKeyboard',
+  component: Story,
+  tags: ['autodocs'],
+  argTypes: argtypes(variantsObject, themeSelected),
+} satisfies Meta<typeof Story>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta> & { args: { themeArgs?: object } };
+
+const commonArgs: IVirtualKeyboard = {
+  variant: Object.values(
+    variantsObject[themeSelected].VirtualKeyboardVariantType || {}
+  )[0] as string,
+  digits: ['0', '4', '2', '8', '7', '3', '9', '1', '6', '5'],
+  icon: { icon: ICONS.ICON_PLACEHOLDER },
+  onDigitButtonClick: () => {
+    return null;
+  },
+  onRemoveButtonClick: () => {
+    return null;
+  },
+};
+
+export const VirtualKeyboard: Story = {
+  args: {
+    ...commonArgs,
+    themeArgs: themesObject[themeSelected][STYLES_NAME.VIRTUAL_KEYBOARD],
+  },
+};
+
+export const VirtualKeyboardWithCtv: Story = {
+  args: {
+    ...commonArgs,
+    ctv: {
+      INACTIVE: {
+        digitButtons: {
+          wrapper: {
+            background_color: 'pink',
+          },
+        },
+      },
+    },
+  },
+};

src/components/virtualKeyboard/types/index.ts

@@ -0,0 +1,3 @@
+export * from './virtualKeyboard';
+export * from './virtualKeyboardTheme';
+export * from './state';

src/components/virtualKeyboard/types/state.ts

@@ -0,0 +1,19 @@
+/**
+ * @name VirtualKeyboardStateType
+ * @description
+ * Enum for the state of the virtual keyboard
+ */
+export enum VirtualKeyboardStateType {
+  INACTIVE = 'INACTIVE',
+  ACTIVE = 'ACTIVE',
+}
+
+/**
+ * @name ButtonKeyboardStateType
+ * @description
+ * Enum for the state of the button keyboard
+ */
+export enum ButtonKeyboardStateType {
+  DEFAULT = 'DEFAULT',
+  PRESSED = 'PRESSED',
+}

src/components/virtualKeyboard/types/virtualKeyboard.ts

@@ -0,0 +1,67 @@
+import { IElementOrIcon } from '@/components/elementOrIcon';
+import { IText } from '@/components/text';
+import { CustomTokenTypes } from '@/types';
+
+import { VirtualKeyboardStateType } from './state';
+import {
+  VirtualKeyboardPropsStylesType,
+  VirtualKeyboardStateStylesType,
+} from './virtualKeyboardTheme';
+
+export type VirtualKeyboardTextType = Omit<IText<string>, 'children'> & {
+  content: string;
+};
+
+/**
+ * @name IVirtualKeyboard
+ * @description
+ * Interface for the VirtualKeyboard component
+ */
+export interface IDigitButton {
+  styles?: VirtualKeyboardPropsStylesType;
+  id?: string;
+  // modifiers
+  digit: string;
+  // functions
+  onClick: (digit: string, event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  // tests
+  dataTestId?: string;
+}
+
+/**
+ * @name IVirtualKeyboard
+ * @description
+ * Interface for the VirtualKeyboard component
+ */
+export interface IVirtualKeyboardStandAlone {
+  styles: VirtualKeyboardStateStylesType;
+  id?: string;
+  // modifiers
+  state: VirtualKeyboardStateType;
+  digits: string[];
+  // functions
+  onVirtualKeyboardFocus: React.FocusEventHandler<HTMLDivElement>;
+  onVirtualKeyboardBlur: React.FocusEventHandler<HTMLDivElement>;
+  onDigitButtonClick: (
+    digit: string,
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void;
+  onRemoveButtonClick: React.MouseEventHandler<HTMLButtonElement>;
+  // icons
+  icon: IElementOrIcon;
+  // tests
+  dataTestId?: string;
+}
+
+type propsToOmit = 'styles' | 'state' | 'onVirtualKeyboardFocus' | 'onVirtualKeyboardBlur';
+
+/**
+ * @name IVirtualKeyboard
+ * @description
+ * Interface for the VirtualKeyboard component
+ */
+export interface IVirtualKeyboard<V = undefined extends string ? unknown : string>
+  extends Omit<IVirtualKeyboardStandAlone, propsToOmit>,
+    Omit<CustomTokenTypes<VirtualKeyboardStateStylesType>, 'cts' | 'extraCt'> {
+  variant: V;
+}