From cfc8b6bd1957b8b1af75a6b65e71482ff6538cbe Mon Sep 17 00:00:00 2001 From: Ilya Frolov Date: Wed, 29 Nov 2023 12:10:18 +0400 Subject: [PATCH] docs: edit README.md --- packages/payment-widget/README.md | 79 +++++++++---------- packages/payment-widget/src/hooks/index.ts | 2 +- ...tton.hook.ts => use-custom-button.hook.ts} | 0 .../src/hooks/use-custom-fields.hook.ts | 14 ++-- .../src/ui/widget.component.tsx | 24 +++--- .../src/utils/get-name-fields.util.ts | 11 ++- 6 files changed, 61 insertions(+), 69 deletions(-) rename packages/payment-widget/src/hooks/{use-castom-button.hook.ts => use-custom-button.hook.ts} (100%) diff --git a/packages/payment-widget/README.md b/packages/payment-widget/README.md index d27b9a4..ee7783b 100644 --- a/packages/payment-widget/README.md +++ b/packages/payment-widget/README.md @@ -1,68 +1,61 @@ -# Применение +# @atls/react-payment-widget -## С темой виджета +[//]: # 'VERSIONS' -Для корректной работы Виджета достаточно атрибуту `settings` назначить объект с ключом `storeID`: +## [](https://www.npmjs.com/package/@atls-ui-parts/button/v/0.0.12) [](https://www.npmjs.com/package/@atls-ui-parts/condition/v/0.0.4) [](https://www.npmjs.com/package/@atls-ui-parts/hidden-input/v/0.0.6) [](https://www.npmjs.com/package/@atls-ui-parts/input/v/0.0.13) [](https://www.npmjs.com/package/@atls-ui-parts/layout/v/0.0.7) [](https://www.npmjs.com/package/@atls-ui-parts/layout/v/0.0.7) [](https://www.npmjs.com/package/react-intl/v/6.4.4) [](https://www.npmjs.com/package/react-laag) [](https://www.npmjs.com/package/styled-tools) -```tsx -import { Widget } from "@atls/react-payment-widget"; -export const Form = () => ; -``` +**@atls/react-payment-widget** предназначен для интеграции в проекты формы, позволяющей проводить оплаты с помощью терминала "Тинькофф Касса". Реализован при помощи `styled-components` и `@emotion`. -Для добавления дополнительных полей используйте атрибут `additionalFields` который принимает в себя массив объектов с обязательным ключом `name`. +## Использование со стандартной темой -Атрибут `amount` принимает сумму платежа. Без заданного значения Виджет генерирует обязательное поле для ввода суммы. +Для корректной работы **@atls/react-payment-widget** достаточно для компонента `Widget` назначить атрибуту `settings` объект с ключом `storeID`: ```tsx -import { Widget, AdditionalFieldsType } from "@atls/react-payment-widget"; -export const Form = () => ( - -); +import { Widget } from '@atls/react-payment-widget' +export const Form = () => ``` -## С темой проекта +Основные атрибуты для компонента `Widget`: + +- **`settings`** - обязательный атрибут, принимает объект с настройками для терминала. +- **`amount`** - опциональный атрибут, принимает сумму платежа.Без заданного значения `Widget` генерирует обязательное поле для ввода суммы. +- **`additionalFields`** - опциональный атрибут для добавления дополнительных полей, принимает массив объектов с обязательным ключом `name`. +- **`receipt`** - опциональный атрибут, принимает объект с настройками для генерации чека. +- **`styles`** - опциональный атрибут, принимает объект с настройками для генерации чека. +- **`disabled`** - опциональный атрибут для управлением активным состоянием кнопки, принимает булево значение. + +## Использование с кастомной темой + +**@atls/react-payment-widget** предусматривает возможность использования стилизованных полей ввода и кнопки из Вашего проекта. Для этого предоставляются компоненты обёртки `InputWrapper` и `ButtonWrapper`. -Если Вы хотите использовать кастомные поля и кнопку, то используйте предоставляемые Виджетом обёртки `InputWrapper` и `ButtonWrapper`. `InputWrapper` принимает обязательный атрибут `name`. +`InputWrapper` принимает обязательный атрибут `name`. ```tsx -import { - Widget, - AdditionalFieldsType, - InputWrapper, - ButtonWrapper, -} from "@atls/react-payment-widget"; +import { AdditionalFieldsType } from '@atls/react-payment-widget' +import { ButtonWrapper } from '@atls/react-payment-widget' +import { InputWrapper } from '@atls/react-payment-widget' +import { Widget } from '@atls/react-payment-widget' export const Form = () => ( - - - {(props) => } - - - {(props) => } - + + {(props) => } + {(props) => } -); +) ``` -> [!WARNING] +> [!WARNING] > Не используйте атрибут `additionalFields` совместно с `InputWrapper`, это приведет к исключению. +> > Так же, при использовании `InputWrapper` Виджет не генерирует дополнительные поля. ## Экспортируемые компоненты -**Widget** - главный компонент Виджета. +[**Widget**]() - главный компонент Виджета. -**InputWrapper** - компонент обёртка для полей ввода. +[**InputWrapper**]() - компонент обёртка для полей ввода. -**ButtonWrapper** - компонент обёртка для кнопки. +[**ButtonWrapper**]() - компонент обёртка для кнопки. -**AdditionalFieldsType** - интерфейс дополнительных полей. +[**AdditionalFieldsType**]() - интерфейс дополнительных полей. -**RequiredFieldsType** - интерфейс обязательных полей. +[**RequiredFieldsType**]() - интерфейс обязательных полей. diff --git a/packages/payment-widget/src/hooks/index.ts b/packages/payment-widget/src/hooks/index.ts index ff18a10..cd0e192 100644 --- a/packages/payment-widget/src/hooks/index.ts +++ b/packages/payment-widget/src/hooks/index.ts @@ -3,4 +3,4 @@ export { useValidate } from './use-validate.hook' export { useFieldsState } from './use-fields-state.hook' export { useFieldsRenderer } from './use-fields-render.hook' export { useCustomFields } from './use-custom-fields.hook' -export { useCustomButton } from './use-castom-button.hook' +export { useCustomButton } from './use-custom-button.hook' diff --git a/packages/payment-widget/src/hooks/use-castom-button.hook.ts b/packages/payment-widget/src/hooks/use-custom-button.hook.ts similarity index 100% rename from packages/payment-widget/src/hooks/use-castom-button.hook.ts rename to packages/payment-widget/src/hooks/use-custom-button.hook.ts diff --git a/packages/payment-widget/src/hooks/use-custom-fields.hook.ts b/packages/payment-widget/src/hooks/use-custom-fields.hook.ts index 902b874..326502e 100644 --- a/packages/payment-widget/src/hooks/use-custom-fields.hook.ts +++ b/packages/payment-widget/src/hooks/use-custom-fields.hook.ts @@ -1,12 +1,12 @@ -import { ReactNode } from 'react' -import { isValidElement } from 'react' +import { ReactNode } from 'react' +import { isValidElement } from 'react' -import { AdditionalFieldsType } from '../enums' +import { AdditionalFieldsType } from '../enums' import { NameWrapperComponent } from '../enums' -import { RequiredFieldsType } from '../enums' -import { CustomFields } from '../interfaces' -import { CustomFieldsProps } from '../interfaces' -import { isCustomElement } from '../utils' +import { RequiredFieldsType } from '../enums' +import { CustomFields } from '../interfaces' +import { CustomFieldsProps } from '../interfaces' +import { isCustomElement } from '../utils' export const useCustomFields = ({ existAmount, diff --git a/packages/payment-widget/src/ui/widget.component.tsx b/packages/payment-widget/src/ui/widget.component.tsx index b43034d..0e18633 100644 --- a/packages/payment-widget/src/ui/widget.component.tsx +++ b/packages/payment-widget/src/ui/widget.component.tsx @@ -1,18 +1,18 @@ -import * as messagesRu from '../locales/ru.json' -import * as messagesEn from '../locales/en.json' +import * as messagesRu from '../locales/ru.json' +import * as messagesEn from '../locales/en.json' -import React from 'react' -import { Children } from 'react' -import { IntlProvider } from 'react-intl' -import { useMemo } from 'react' +import React from 'react' +import { Children } from 'react' +import { IntlProvider } from 'react-intl' +import { useMemo } from 'react' -import { LanguagesType } from '../enums' -import { WidgetProps } from '../interfaces' -import { Form } from './form' -import { FormProvider } from './form/form.provider' -import { useCustomButton } from '../hooks' +import { LanguagesType } from '../enums' +import { WidgetProps } from '../interfaces' +import { Form } from './form' +import { FormProvider } from './form/form.provider' +import { useCustomButton } from '../hooks' import { useCustomFields } from '../hooks' -import { getNameFields } from '../utils' +import { getNameFields } from '../utils' const messages = { [LanguagesType.RUSSIAN]: messagesRu, diff --git a/packages/payment-widget/src/utils/get-name-fields.util.ts b/packages/payment-widget/src/utils/get-name-fields.util.ts index d715034..cda9547 100644 --- a/packages/payment-widget/src/utils/get-name-fields.util.ts +++ b/packages/payment-widget/src/utils/get-name-fields.util.ts @@ -1,10 +1,9 @@ -import { ReactNode } from 'react' +import { ReactNode } from 'react' +import { isValidElement } from 'react' -import { isValidElement } from 'react' - -import { AdditionalFieldsType } from '../enums' -import { RequiredFieldsType } from '../enums' -import { Field } from '../interfaces' +import { AdditionalFieldsType } from '../enums' +import { RequiredFieldsType } from '../enums' +import { Field } from '../interfaces' export const getNameFields = (customFields: ReactNode[]) => customFields.reduce((acc, field) => {