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: |

Telegram was founded in 2013 by two Russian brothers, Nikolai and Pavel Durov. You may recall that, back when Facebook started changing WhatsApp’s terms of service, a number of news outlets reported on, and even recommended, switching to Telegram. Pavel Durov even said that users should delete WhatsApp “unless you are cool with all of your photos and messages becoming public one day.” But Telegram can’t be described as a more-secure version of WhatsApp. That hurt tech stocks. For the past few weeks, the 10-year yield has traded between 1.72% and 2%, as traders moved into the bond for safety when Russia headlines were ugly—and out of it when headlines improved. Now, the yield is touching its pandemic-era high. If the yield breaks above that level, that could signal that it’s on a sustainable path higher. Higher long-dated bond yields make future profits less valuable—and many tech companies are valued on the basis of profits forecast for many years in the future. Either way, Durov says that he withdrew his resignation but that he was ousted from his company anyway. Subsequently, control of the company was reportedly handed to oligarchs Alisher Usmanov and Igor Sechin, both allegedly close associates of Russian leader Vladimir Putin. Official government accounts have also spread fake fact checks. An official Twitter account for the Russia diplomatic mission in Geneva shared a fake debunking video claiming without evidence that "Western and Ukrainian media are creating thousands of fake news on Russia every day." The video, which has amassed almost 30,000 views, offered a "how-to" spot misinformation.
from us


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