Telegram Group & Telegram Channel
👩‍💻 Разработка UI Kit: создание компонента Button

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

1️⃣ Во-первых, UI Kit обеспечивает визуальную и функциональную согласованность интерфейса. Когда десятки или сотни экранов используют одни и те же компоненты
2️⃣ Во-вторых, разработка ускоряется в разы — вместо создания элементов с нуля, команда использует готовые решения.
3️⃣ В-третьих, значительно упрощается поддержка и масштабирование: изменения в дизайн-системе вносятся в одном месте, а применяются во всём проекте.

[Картинка 1: Пример Storybook]

UI Kit — это не просто коллекция кнопок и полей ввода. Это комплексная система, включающая:
- Базовые компоненты интерфейса (кнопки, формы, переключатели)
- Типографику и иерархию текста
- Цветовую палитру с семантическим значением цветов
- Систему отступов и размеров
- Состояния элементов (активное, неактивное, hover, focus)

[Картинка 2 и 3: Дизайн в Figma]

🛡 Основные принципы разработки компонентов UI Kit
При создании компонентов для UI Kit необходимо придерживаться нескольких фундаментальных принципов

1. Семантическая корректность
Каждый компонент должен максимально точно отражать свою суть на уровне HTML-разметки. Кнопка — это <button> или <input type="button">, ссылка — <a>, поле ввода — <input> или <textarea>. Это важно не только для доступности (accessibility), но и для правильной работы в различных контекстах (например, в формах или при навигации).

2. Полнота свойств
Компонент должен поддерживать все стандартные HTML-атрибуты соответствующего элемента. Для кнопки это включает type (button, submit, reset), disabled, autofocus и другие.

3. Управляемость извне
Компонент не должен содержать внутреннюю логику состояния (где это возможно). Все состояния (активное, неактивное, загружающееся) должны управляться через пропсы. Это делает компонент предсказуемым и легко интегрируемым в любую архитектуру.

4. Принцип открытости/закрытости
Компонент должен быть закрыт для модификаций (его базовое поведение нельзя изменить), но открыт для расширения. На практике это означает:
- Возможность добавления классов через className
- Возможность передачи произвольных атрибутов
- Гибкость в контенте через children

5. Единый источник правды
Изменение компонента в UI Kit должно автоматически отражаться во всех местах его использования. Это требует тщательного проектирования API компонента на этапе создания, чтобы избежать необходимости "ветвления" логики в будущем.

🔒 Архитектура UI Kit в проекте
Оптимальная структура для UI Kit в проекте выглядит следующим образом:

src/
ui/
Button/
Button.tsx # React-компонент
Button.stories.tsx # Документация в Storybook
Button.test.tsx # Тесты компонента
Button.module.css # Стили компонента
Input/ # Аналогичная структура для других компонентов
...
styles/
variables.css # CSS-переменные (цвета, отступы, шрифты)
typography.css # Типографика
animations.css # Анимации
global.css # Глобальные стили


🖥 Реализация компонента Button для UI Kit
Перед разработкой тщательно изучаем макеты и выделяем все варианты кнопок: Варианты по стилю, Размеры, Состояния, Дополнительные требования (иконки, текст).

[Картинка 4: Компонент Button]

При стилизации используем CSS-переменные из дизайн-системы, Для каждого варианта прописываем цвета для всех состояний.

[Картинка 5: CSS-переменные]

Создаем подробные TypeScript-интерфейсы: Объединение с нативными атрибутами button и a, Поддержка всех стандартных HTML-атрибутов, Четкое разделение кастомных и стандартных пропсов

[Картинка 6: Типизация кнопки]

Далее создаем сторисы для всех вариантов: Основной вид, Все состояния, Примеры с иконками, Вариант как ссылки

#ui #storybook #button #react
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM



group-telegram.com/reactify_IT/1433
Create:
Last Update:

👩‍💻 Разработка UI Kit: создание компонента Button

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

1️⃣ Во-первых, UI Kit обеспечивает визуальную и функциональную согласованность интерфейса. Когда десятки или сотни экранов используют одни и те же компоненты
2️⃣ Во-вторых, разработка ускоряется в разы — вместо создания элементов с нуля, команда использует готовые решения.
3️⃣ В-третьих, значительно упрощается поддержка и масштабирование: изменения в дизайн-системе вносятся в одном месте, а применяются во всём проекте.

[Картинка 1: Пример Storybook]

UI Kit — это не просто коллекция кнопок и полей ввода. Это комплексная система, включающая:
- Базовые компоненты интерфейса (кнопки, формы, переключатели)
- Типографику и иерархию текста
- Цветовую палитру с семантическим значением цветов
- Систему отступов и размеров
- Состояния элементов (активное, неактивное, hover, focus)

[Картинка 2 и 3: Дизайн в Figma]

🛡 Основные принципы разработки компонентов UI Kit
При создании компонентов для UI Kit необходимо придерживаться нескольких фундаментальных принципов

1. Семантическая корректность
Каждый компонент должен максимально точно отражать свою суть на уровне HTML-разметки. Кнопка — это <button> или <input type="button">, ссылка — <a>, поле ввода — <input> или <textarea>. Это важно не только для доступности (accessibility), но и для правильной работы в различных контекстах (например, в формах или при навигации).

2. Полнота свойств
Компонент должен поддерживать все стандартные HTML-атрибуты соответствующего элемента. Для кнопки это включает type (button, submit, reset), disabled, autofocus и другие.

3. Управляемость извне
Компонент не должен содержать внутреннюю логику состояния (где это возможно). Все состояния (активное, неактивное, загружающееся) должны управляться через пропсы. Это делает компонент предсказуемым и легко интегрируемым в любую архитектуру.

4. Принцип открытости/закрытости
Компонент должен быть закрыт для модификаций (его базовое поведение нельзя изменить), но открыт для расширения. На практике это означает:
- Возможность добавления классов через className
- Возможность передачи произвольных атрибутов
- Гибкость в контенте через children

5. Единый источник правды
Изменение компонента в UI Kit должно автоматически отражаться во всех местах его использования. Это требует тщательного проектирования API компонента на этапе создания, чтобы избежать необходимости "ветвления" логики в будущем.

🔒 Архитектура UI Kit в проекте
Оптимальная структура для UI Kit в проекте выглядит следующим образом:


src/
ui/
Button/
Button.tsx # React-компонент
Button.stories.tsx # Документация в Storybook
Button.test.tsx # Тесты компонента
Button.module.css # Стили компонента
Input/ # Аналогичная структура для других компонентов
...
styles/
variables.css # CSS-переменные (цвета, отступы, шрифты)
typography.css # Типографика
animations.css # Анимации
global.css # Глобальные стили


🖥 Реализация компонента Button для UI Kit
Перед разработкой тщательно изучаем макеты и выделяем все варианты кнопок: Варианты по стилю, Размеры, Состояния, Дополнительные требования (иконки, текст).

[Картинка 4: Компонент Button]

При стилизации используем CSS-переменные из дизайн-системы, Для каждого варианта прописываем цвета для всех состояний.

[Картинка 5: CSS-переменные]

Создаем подробные TypeScript-интерфейсы: Объединение с нативными атрибутами button и a, Поддержка всех стандартных HTML-атрибутов, Четкое разделение кастомных и стандартных пропсов

[Картинка 6: Типизация кнопки]

Далее создаем сторисы для всех вариантов: Основной вид, Все состояния, Примеры с иконками, Вариант как ссылки

#ui #storybook #button #react

BY Reactify | Frontend Разработка









Share with your friend now:
group-telegram.com/reactify_IT/1433

View MORE
Open in Telegram


Telegram | DID YOU KNOW?

Date: |

The fake Zelenskiy account reached 20,000 followers on Telegram before it was shut down, a remedial action that experts say is all too rare. Telegram, which does little policing of its content, has also became a hub for Russian propaganda and misinformation. Many pro-Kremlin channels have become popular, alongside accounts of journalists and other independent observers. Overall, extreme levels of fear in the market seems to have morphed into something more resembling concern. For example, the Cboe Volatility Index fell from its 2022 peak of 36, which it hit Monday, to around 30 on Friday, a sign of easing tensions. Meanwhile, while the price of WTI crude oil slipped from Sunday’s multiyear high $130 of barrel to $109 a pop. Markets have been expecting heavy restrictions on Russian oil, some of which the U.S. has already imposed, and that would reduce the global supply and bring about even more burdensome inflation. "Like the bombing of the maternity ward in Mariupol," he said, "Even before it hits the news, you see the videos on the Telegram channels." Continuing its crackdown against entities allegedly involved in a front-running scam using messaging app Telegram, Sebi on Thursday carried out search and seizure operations at the premises of eight entities in multiple locations across the country.
from us


Telegram Reactify | Frontend Разработка
FROM American