Feature/custom theme

.run/test-unit.run.xml

@@ -0,0 +1,17 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="test-unit" type="ShConfigurationType">
+    <option name="SCRIPT_TEXT" value="yarn test unit" />
+    <option name="INDEPENDENT_SCRIPT_PATH" value="true" />
+    <option name="SCRIPT_PATH" value="" />
+    <option name="SCRIPT_OPTIONS" value="" />
+    <option name="INDEPENDENT_SCRIPT_WORKING_DIRECTORY" value="true" />
+    <option name="SCRIPT_WORKING_DIRECTORY" value="$PROJECT_DIR$" />
+    <option name="INDEPENDENT_INTERPRETER_PATH" value="true" />
+    <option name="INTERPRETER_PATH" value="/bin/zsh" />
+    <option name="INTERPRETER_OPTIONS" value="" />
+    <option name="EXECUTE_IN_TERMINAL" value="true" />
+    <option name="EXECUTE_SCRIPT_FILE" value="false" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

packages/payment-widget/package.json

@@ -23,12 +23,16 @@
     "styled-tools": "1.7.2"
   },
   "devDependencies": {
+    "@emotion/jest": "11.9.4",
     "@emotion/react": "11.9.3",
     "@emotion/styled": "11.9.3",
+    "@testing-library/react": "14.1.0",
     "@types/react": "18.2.20",
+    "@types/react-dom": "18",
     "@types/styled-system": "5.1.16",
     "csstype": "3.1.2",
     "react": "18.2.0",
+    "react-dom": "18.2.0",
     "styled-system": "5.1.5"
   },
   "peerDependencies": {

packages/payment-widget/src/hooks/use-fields-render.hook.tsx

@@ -9,6 +9,7 @@ import { HandleBlurField }   from '../interfaces'
 import { FieldState }        from '../interfaces'
 import { HandleChangeField } from '../interfaces'
 import { FieldsErrors }      from '../interfaces'
+import { CustomInput }       from '../interfaces/custom-elements.interfaces'
 import { MemoizedInput }     from '../ui'
 import { translate }         from '../utils/translate.util'
 
@@ -18,27 +19,29 @@ export const useFieldsRenderer = (
   fieldsState: FieldState,
   handleChange: HandleChangeField,
   handleBlur: HandleBlurField,
-  inputGaps: number
+  inputGaps: number,
+  customInput: CustomInput | undefined
 ) => {
   const intl = useIntl()
 
   return fields.map((field, index, currentFields) => {
     const translatePlaceholder = translate(intl, field.placeholder, field.placeholder)
     const translateError = translate(intl, errors[field.name], errors[field.name])
     const isNotLastField = index !== currentFields.length - 1
+    const inputProps = {
+      type: field.type ?? 'text',
+      name: field.name,
+      placeholder: translatePlaceholder,
+      required: field.required ?? false,
+      value: fieldsState[field.name],
+      errorText: translateError,
+      onChangeNative: handleChange,
+      onBlur: handleBlur,
+    }
 
     return (
       <React.Fragment key={field.name}>
-        <MemoizedInput
-          type={field.type ?? 'text'}
-          name={field.name}
-          placeholder={translatePlaceholder}
-          required={field.required ?? false}
-          value={fieldsState[field.name]}
-          errorText={translateError}
-          onChangeNative={handleChange}
-          onBlur={handleBlur}
-        />
+        {customInput ? customInput(inputProps) : <MemoizedInput {...inputProps} />}
         <Condition match={isNotLastField}>
           <Layout flexBasis={inputGaps} flexShrink={0} />
         </Condition>

packages/payment-widget/src/interfaces/custom-elements.interfaces.ts

@@ -0,0 +1,30 @@
+import React                 from 'react'
+import { FC }                from 'react'
+
+import { HandleBlurField }   from './fields.interfaces'
+import { HandleChangeField } from './fields.interfaces'
+
+interface CustomInputProps {
+  type: string
+  name: string
+  placeholder: string
+  required: boolean
+  value: string
+  errorText: string
+  onChangeNative: HandleChangeField
+  onBlur: HandleBlurField
+}
+
+export interface CustomButtonProps {
+  type: string
+  disabled: boolean
+  children?: React.ReactNode
+}
+
+export type CustomInput = FC<CustomInputProps>
+export type CustomButton = FC<CustomButtonProps>
+
+export interface CustomElements {
+  input?: CustomInput
+  button?: CustomButton
+}

packages/payment-widget/src/interfaces/fields.interfaces.ts

@@ -3,6 +3,7 @@ import { HTMLInputTypeAttribute } from 'react'
 
 import { AdditionalFieldsType }   from '../enums'
 import { RequiredFieldsType }     from '../enums'
+import { CustomInput }            from './custom-elements.interfaces'
 import { DirectionFields }        from './styles.interfaces'
 
 export type FieldsNames = RequiredFieldsType | AdditionalFieldsType
@@ -38,4 +39,5 @@ export interface FieldsProps {
   inputGaps?: number
   isGenerateReceipt?: boolean
   additionalFields?: AdditionalField[]
+  customInput?: CustomInput
 }

packages/payment-widget/src/interfaces/theme.interfaces.ts

@@ -0,0 +1,6 @@
+import React from 'react'
+
+export interface ThemeProps {
+  useCustomTheme: boolean
+  children: React.ReactNode
+}

packages/payment-widget/src/interfaces/widget.interfaces.ts

@@ -1,3 +1,4 @@
+import { CustomElements }  from './custom-elements.interfaces'
 import { AdditionalField } from './fields.interfaces'
 import { ReceiptSettings } from './receipt.interfaces'
 import { Settings }        from './settings.interfaces'
@@ -9,4 +10,6 @@ export interface WidgetProps {
   receipt?: ReceiptSettings
   styles?: Styles
   additionalFields?: AdditionalField[]
+  disabled?: boolean
+  customElements?: CustomElements
 }

packages/payment-widget/src/ui/button/button.component.tsx

@@ -1,14 +1,14 @@
-import styled               from '@emotion/styled'
-import { ButtonProps }      from '@atls-ui-parts/button'
+import styled                from '@emotion/styled'
 
-import React                from 'react'
-import { FC }               from 'react'
-import { useHover }         from 'react-laag'
+import React                 from 'react'
+import { FC }                from 'react'
+import { useHover }          from 'react-laag'
 
-import { appearanceStyles } from './button.styles'
-import { contentStyles }    from './button.styles'
-import { baseStyles }       from './button.styles'
-import { shapeStyles }      from './button.styles'
+import { CustomButtonProps } from '../../interfaces/custom-elements.interfaces'
+import { appearanceStyles }  from './button.styles'
+import { contentStyles }     from './button.styles'
+import { baseStyles }        from './button.styles'
+import { shapeStyles }       from './button.styles'
 
 const ButtonElement = styled('button')<any>(
   baseStyles,
@@ -17,7 +17,7 @@ const ButtonElement = styled('button')<any>(
   shapeStyles
 )
 
-export const Button: FC<ButtonProps> = ({ children, ...props }) => {
+export const Button: FC<CustomButtonProps> = ({ children, ...props }) => {
   const [hover, hoverProps] = useHover()
   return (
     <ButtonElement hover={hover} {...hoverProps} {...props}>

packages/payment-widget/src/ui/fields.component.tsx

@@ -23,6 +23,7 @@ export const Fields = ({
   isGenerateReceipt = false,
   direction = DirectionFields.Column,
   inputGaps = 16,
+  customInput,
 }: FieldsProps) => {
   const processedFields = isGenerateReceipt
     ? addReceiptFieldsUtil(additionalFields)
@@ -35,7 +36,8 @@ export const Fields = ({
     fieldsState,
     handleChange,
     handleBlur,
-    inputGaps
+    inputGaps,
+    customInput
   )
   const Direction = direction === DirectionFields.Column ? Column : Row