🎉 Возможности

• 💪 До 70+ высококачественных компонентов. Устойчивые обновления начиная с 2019 года
• 🚀 Официальная поддержка конвертации дизайна в код (D2C). Преобразование чертежей Figma в реальный код всего за несколько секунд
• 💅 Поддержка конвертации кода в дизайн (C2D). Автоматическое создание набора UI Figma согласно различным темам, что обеспечивает согласованность между дизайном и кодом
• 💕 Полная поддержка доступности (A11y). Следование стандартам W3C для предоставления взаимодействия клавиатурой, управления фокусом и ARIA для всех компонентов
• 💅 Управление системой дизайна Semi DSM. Более 3000 токенов дизайна, позволяющих быстро превратить Semi Design в любой другой дизайн
• ⚙️ Строгий контроль качества, охватывающий юнит-тестирование, тестирование от начала до конца (E2E) и визуальное тестирование
• 👏 Написан на TypeScript, дружелюбная поддержка статических типов. Основан на архитектуре Foundation/Adapter, легко читаемый и модифицируемый
• 🥳 Совместимость со сторонним серверным рендерингом (SSR)
• 📦 Лёгкая совместимость с веб-компонентами, предоставляющая полное решение адаптации, более подходящее для создания SDK, плагинов браузера и других сценариев, требующих изоляции DOM# 🔥 Установка

npm install @douyinfe/semi-ui

yarn add @douyinfe/semi-ui

pnpm add @douyinfe/semi-ui

👍 Использование компонента

Вот быстрый пример для старта, всё что вам нужно:

import React from 'react';
import { createRoot } from 'react-dom/client';
import { Button, Form } from '@douyinfe/semi-ui';

const App = () => (
    <Form>
        <Form.Input field='name' initValue='semi design'></Form.Input>
        <Button htmlType='submit'>Отправить</Button>
    </Form>
);

const root = createRoot(document.querySelector('#app'));

root.render(<App />);

Документация Semi UI предлагает сотни редактируемых примеров и живое представление, добро пожаловать к работе с этими примерами.

⚡️ Использование конвертации дизайна в код

Установите плагин Semi для Figma. Преобразуйте Figma в реальный код за несколько секунд. Поддерживает несколько форматов вывода: JSX + SCSS / Emotion/Tailwind, или JSON Schema DSL — Поддержка режима разработки в Figma, выбор слоя, получение соответствующего кода справа

• Или переход в Codesandbox для продолжения редактирования

🎨 Использование DSM

Создайте свою собственную систему дизайна на основе Semi UI с помощью DSM всего за один клик. Предоставляем более чем 3000 токенов для настройки каждого детали. Синхронизация между Figma и кодом всегда актуальна.

📰 Новости о Semi UI

• Подпишитесь на Twitter
• Подпишитесь на Medium
• Подпишитесь на Dev.to

📌 Документация

• Semi DSM
• Дизайн до кода
• Плагин Semi Design для Figma
• Быстрый старт
• Обзор компонентов
• Настройка тем
• Токены дизайна
• Режим темноты
• Semi Icons
• Глобальная конфигурация
• Международная локализация
• Часто задаваемые вопросы (FAQ)
• История изменений (CHANGELOG)

📝 Блоги

• Эволюция Semi D2C Design to Code
• Как проектировать архитектуру библиотеки компонентов для адаптации к различным MVVM фреймворкам
• Как мы тестируем Semi UI
• Подробное объяснение темы Semi
• Доступность в Semi Design

🤝 Поддержка платформSemi UI поддерживает все основные современные браузеры.

Chrome	Firefox	Safari	IE/Edge	Electron]
Последние 2 версии	Последние 2 версии	Последние 2 версии	Edge	Последние 2 версии

🙋‍♂️ Группа пользователей

Присоединяйтесь к Группе пользователей в Feishu / Lark

❤️ Благодарность

Благодарим Chromatic за предоставление платформы для визуального тестирования, которая помогает нам проверять изменения в UI и выявлять регрессии.

Благодарим Cypress за предоставление платформы для автоматизированного тестирования end-to-end.

👐 Внесение вклада

Благодарим всех людей, уже внесших свой вклад!

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

Узнайте больше в документации CONTRIBUTING.

🎈 Лицензия

Semi UI имеет лицензию MIT.