Расширение стилизации и функционала payment-widget

absolemDev commented 1 year ago

С чем связан запрос на фичу?

В текущей реализации payment-widget имеет ограничения по стилизации и функционалу для интеграции в проекты

Расскажите как вы это себе видите

Необходимо расширить пропс styles для более гибкой стилизации дополнительных полей.
Рассмотреть возможность расширения функционала, в зависимости от потребностей проектов.

Приложите пример реализаций

No response

absolemDev commented 1 year ago

@Nelfimov, в проекте тема более расширена

Проект
---
button: {
    transparentBackground: {
      default: { ...

Виджет
----
button: {
    default: { ...

А если я буду передавать уже кастомизированные элементы: https://github.com/torin-asakura/drum-in/blob/4a8341e45c0542aa95abbc4810123d98a7a9a0f3/ui/button/src/button.component.tsx#L19 и подменять их в виджете: https://github.com/atls/reactjs/blob/d14b846684109f4f2b4c00bb4530822d8185312b/packages/payment-widget/src/ui/button/button.component.tsx#L13 ?

Nelfimov commented 1 year ago

Проговаривали же - ты можешь переопределить тему несколькими способами:

Подставить в ThemeProvider объект темы из проекта
В зависимости от пропса условно рендерить ThemeProvider у виджета

При любом из этих вариантов остается только пропсами задавать варианты инпутов и батонов.

absolemDev commented 1 year ago

Подставить в ThemeProvider объект темы из проекта

@Nelfimov, это не проблема. Но логика button.styles.ts у проекта и виджета отличается. Корректно ли будет работать виджет с темой из проекта?

Nelfimov commented 1 year ago

Пробуй - делай форк в проекте и кастомизируй.

Nelfimov commented 1 year ago

Под форком имеется в виду взять пакет и создать его локальную копию в твоем проекте. По аналогии с /fork/locomotive-scroll

absolemDev commented 1 year ago

@Nelfimov, создал пр https://github.com/atls/reactjs/pull/134 . Конечно нужны еще доработки, но в целом, такой подход имеет место быть?

Nelfimov commented 1 year ago

обрати внимание - залил тебе в качестве примера тест с готовыми настройками для тестирования стилей. По хорошему подобными тестами надо обвешать весь виджет.

Nelfimov commented 1 year ago

Есть еще один путь - можешь сделать как тут:

https://github.com/atls/nextjs/tree/master/packages/identity-integration

А именно:

Имплементация тут:

https://github.com/habralab/garnet-team/blob/c175a651ea6b786d9792c4be1a72d487b32c2ded/features/identity/client/fragments/auth-forms/src/login/login-form.component.tsx#L79

Резюме: компонент рендерит любых детей, у которых свои стили локального проекта, и передает им через функцию необходимое. В случае примере - возможность изменять значения инпута и функция сабмита.

В этом случае ты вообще избавляешься от необходимости в определении темы.

atls / reactjs