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-state.hook.ts

@@ -9,15 +9,20 @@ import { HandleChangeField } from '../interfaces'
 import { FieldsNames }       from '../interfaces'
 import { ValidateField }     from '../interfaces'
 
-export const useFieldsState = (fields: Field[], validateField: ValidateField) => {
-  const initialState = fields.reduce((acc, field) => ({ ...acc, [field.name]: '' }), {})
-  const [fieldsState, setFieldsState] = useState<FieldState>(initialState as FieldState)
+export const useFieldsState = (validateField: ValidateField, fields?: Field[]) => {
+  const initialState = fields
+    ? fields.reduce((acc, field) => ({ ...acc, [field.name]: '' }), {})
+    : ''
+  const [fieldsState, setFieldsState] = useState<FieldState | string>(
+    initialState as FieldState | string
+  )
 
   const handleChange: HandleChangeField = useCallback(
     (e: FormEvent<HTMLInputElement>) => {
       const name = e.currentTarget.name as FieldsNames
       const { value } = e.currentTarget
-      setFieldsState((prevFields) => ({ ...prevFields, [name]: value }))
+      setFieldsState((prevFields) =>
+        typeof prevFields === 'object' ? { ...prevFields, [name]: value } : value)
     },
     [setFieldsState]
   )

packages/payment-widget/src/index.ts

@@ -1,4 +1,4 @@
-export { Widget } from './ui'
+export { Widget, InputWrapper, ButtonWrapper } from './ui'
 export {
   Settings,
   Styles,

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

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export interface CustomButtonProps {
+  type: string
+  disabled: boolean
+  children?: React.ReactNode
+}

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

@@ -0,0 +1,9 @@
+import React           from 'react'
+
+import { WidgetProps } from './widget.interfaces'
+
+export interface FormProps extends WidgetProps {
+  useCustomButton: boolean
+  isGenerateReceipt: boolean
+  children: React.ReactNode
+}

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

@@ -3,3 +3,9 @@ export * from './fields.interfaces'
 export * from './settings.interfaces'
 export * from './receipt.interfaces'
 export * from './styles.interfaces'
+export * from './theme.interfaces'
+export * from './button.interfaces'
+export * from './input.interfaces'
+export * from './theme.interfaces'
+export * from './form.interfaces'
+export * from './wrappers.interfaces'

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

@@ -0,0 +1,13 @@
+import { HandleBlurField }   from './fields.interfaces'
+import { HandleChangeField } from './fields.interfaces'
+
+export interface CustomInputProps {
+  type: string
+  name: string
+  placeholder: string
+  required: boolean
+  value: string
+  errorText: string
+  onChangeNative: HandleChangeField
+  onBlur: HandleBlurField
+}

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,5 @@
+import React               from 'react'
+
 import { AdditionalField } from './fields.interfaces'
 import { ReceiptSettings } from './receipt.interfaces'
 import { Settings }        from './settings.interfaces'
@@ -9,4 +11,5 @@ export interface WidgetProps {
   receipt?: ReceiptSettings
   styles?: Styles
   additionalFields?: AdditionalField[]
+  children: React.ReactNode
 }

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

@@ -0,0 +1,18 @@
+import { FormEvent }    from 'react'
+import { ReactElement } from 'react'
+
+type OnCallback = (event: FormEvent<HTMLInputElement> | string | any) => void
+
+export interface InputWrapperProps {
+  name: string
+  children: (
+    value: string,
+    onChange: OnCallback,
+    onBlur: OnCallback,
+    errorText: string
+  ) => ReactElement<any>
+}
+
+export interface ButtonWrapperProps {
+  children: () => ReactElement<any>
+}

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'
+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

@@ -8,6 +8,7 @@ import { Row }                  from '@atls-ui-parts/layout'
 import React                    from 'react'
 
 import { RequiredFieldsType }   from '../enums'
+import { FieldState }           from '../interfaces'
 import { FieldsProps }          from '../interfaces'
 import { DirectionFields }      from '../interfaces'
 import { requiredFields }       from '../data'
@@ -28,11 +29,11 @@ export const Fields = ({
     ? addReceiptFieldsUtil(additionalFields)
     : additionalFields
   const fields = !amount ? [...requiredFields, ...processedFields] : [...processedFields]
-  const { fieldsState, handleChange, handleBlur } = useFieldsState(fields, validateField)
+  const { fieldsState, handleChange, handleBlur } = useFieldsState(validateField, fields)
   const renderedFields = useFieldsRenderer(
     fields,
     errors,
-    fieldsState,
+    fieldsState as FieldState,
     handleChange,
     handleBlur,
     inputGaps