Процесс реализации локальных продуктовых компонентов в Astra Fintech UI и Fintech Products UI

У каждого продуктового веб-модуля есть своё 3-х символьное обозначение (тут будет ссылка на документацию). Все эти компонент должны складироваться в свою продуктовую страницу файле фигме Astra Fintech UI и Fintech Producs UI.

image.png

Локальные продуктовые компоненты Fintech Products UI — это компоненты, которые нужны только для одного продукта определенных специфическим видом. Его нельзя использовать других продуктах.

Astra DS (Component) → Astra Fintech UI (Component AF) → Fintech Products UI (Component HPG)

Если есть необходимость этого переиспользования нужно переводить компоненты на уровень Astra Fintech UI (это общая продуктовая библиотека для всех продуктовых команд, все компоненты имеют тег AF).

Процесс реализации компонента Astra Fintech UI и Fintech Products UI

При реализации компонента для Astra Fintech UI и Fintech Products UI необходимо следовать следующему процессу.

  1. Реализовать компонента. Сделайте компонент решающий важу задачу. Важного его делать обезличенным.

image.png

  1. Описать спецификацию компонента. Напиши максимально подробнее спецификацию, чтобы ваш разработчик понял как реализовывать компонент. Хорошая описания компонента, экономит время всех участников реализации компонента.

image.png

  1. Дизайн-ревью компонента. Один из дизайнеров дизайн-системы даст обратную связь по реализации или описанию компонента. Вы можете обратиться до 2 этапа описания спецификации компонента, если есть сомнения как лучшее реализовать компонента.

  2. Добавьте ваш компонента в витрину компонентов. Чтобы любой продуктовый дизайнер мог смотреть какие компоненты есть у коллег.

embed.figma.com

  1. Добавить компонента в таблицу "Статусы компонентов Свои Финансы". После успешного дизайн-ревью, заполните данные по компоненту, поставьте статус, ссылку, продуктового разработчика который будет реализовавать компонент и продуктовую команду. Эти данные нужны, чтобы мы могли понимать какие компоненты были реализованы.

  2. Передача компонента вашему продуктовую разработчику. Ознакомьте своего разработчика и передайте компонент в реализацию.

  3. Ревью компонента. Пусть разработчик покажет вам свою реализацию компонента. Его релизация должна быть загружена в общую библиотеку компонентов. React. Компонент должен быть загружен свою продуктовую папку в Storybook (core-ui-local). Тогда и только тогда реализация должна быть принята вами.

  4. Важно указать итоговый статус по компоненту в таблице "Статусы компонентов Свои Финансы".

  5. Ты большой молодец, если добирался до этого этапа. Властью дорованной мне, сосиска-мобилью, поручаю выдать тебе две премии!