Это вторая статья из цикла про наш фреймворк Steroids, в которой мы расскажем об архитектурном подходе к построению UI-компонентов. Если вы ещё не читали первую статью — начните с неё. В ней мы объясняем, что такое Steroids и какие задачи он решает.

Проблема большинства UI-фреймворков

Часто в готовых UI-библиотеках вы можете настроить цвета, тему, переопределить стили через className или sx, но не можете:

• получить доступ к JSX/HTML разметке компонента;

• изменить стили компонента, не дописывая поверх уже существующих;

• убрать ненужный элемент в комплексном компоненте;

• использовать бизнес-логику компонента независимо от его визуального оформления.

Кроме того, зачастую невозможно создавать в своем проекте UI-компоненты, основанные на библиотечных.

При разработке фреймворка Steroids мы решили эту проблему при помощи разделения слоев.

Разделение на Core и View слои

В Steroids все компоненты архитектурно разделены на два слоя:

• Core — слой бизнес-логики. Здесь находятся хуки, обработчики событий, валидации, работа с формами, списками, состоянием и т.д. Данный слой независим от View и может использоваться как для React, так и для React Native приложений.

• View — слой отображения. При необходимости, части компонентов этого слоя можно кастомизировать под любой дизайн, переопределив View.tsx и/или View.scss файлы.

Связь между Core и View реализована через TypeScript-интерфейсы. Каждый UI-компонент описан через props-интерфейс, понятный как Core, так и View слою. Это позволяет переиспользовать бизнес-логику и независимо от неё настраивать внешний вид.

Пример

Рассмотрим компонент InputField фреймворка Steroids:

• его Core-слой реализует логику показа ошибок, взаимодействия с формой, получения значения;

• View-слой просто отрисовывает label, input, errorText и всё остальное, что вы хотите.

В результате, если вы захотите сделать совсем другой UI, например, InputField в стиле Ant Design, вы просто пишете свою реализацию отображения инпута — и она будет работать с тем же Core без изменений.

Возможности кастомизации

В Steroids предусмотрены разные уровни кастомизации — от простого изменения темы до создания полного набора своих компонентов. В зависимости от потребностей проекта, вы можете выбрать подходящий уровень:

1. настройка SCSS-переменных;

2. переопределение view-части компонентов.

Далее мы рассмотрим каждый пункт более детально.

1. Настройка SCSS-переменных

Steroids поддерживает полную настройку темы через SCSS-переменные, что позволяет полностью адаптировать стиль под конкретный проект.

1.1 Подключение кастомных переменных

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

└── src
    └── style
        ├── custom-variables
        │   ├── colors.scss - файл с переменные для цветов
        │   ├── media.scss - переменные для media выражений
        │   ├── typography.scss - переменные для типографики
        │   └── index.scss
        └── variables.scss - файл для подключенния кастомных переменных

В variables.scss подключаем кастомные переменные таким образом:

@import '~@steroidsjs/bootstrap/scss/mixins';
@import '~@steroidsjs/bootstrap/scss/variables';
@import './custom-variables';

Теперь кастомные переменные доступны в любом SCSS-файле:

@use 'style/variables';

.Modal {
  @include variables.modal-overlay();
}

1.2 Переопределение цветов приложения

Цвета в Steroids определяются через root-переменные, а после эти значения присваиваются scss-переменным. Root-переменные позволяют динамически менять цвета для разных тем приложения — например темной и светлой. При этом в коде используются только одноименные scss-переменные.

Например, чтобы переопределить primary и secondary цвета нужно добавить в файл custom-variables/colors.scss такую конструкцию:

:root {
  --primary: red;
  --secondary: blue;
}

Если у вас в проекте есть темная тема, то для переопределения цветов в этой теме нужно добавить еще одну конструкцию:

html[data-theme="dark"] {
  --primary: orange;
  --secondary: purple;
}

1.3 Добавление и переопределение цветовых тем

Для стилизации компонентов в Steroids используются scss-переменные, которые позволяют указывать цветовую тему для компонента. Например, для стилизации компонента Button в Steroids используется scss-переменная $color-themes. 

С помощью кастомной переменной $color-themes можно как переназначать цветовые темы кнопок из Steroids, так и создавать новые. Например, чтобы переназначить тему primary и добавить тему secondary для кнопки, нужно добавить в файл custom-variables/colors.scss такую конструкцию:

@use "sass:map";

@use "~@steroidsjs/bootstrap/scss/variables";

$color-themes: ();
$color-themes: map.merge(
  (
    "primary": (
      "color": red,
      "color-dark": red,
      "color-light": orange,
      "text-color": white,
    ),
    "secondary": (
      "color": variables.$blue,
      "color-dark": variables.$blue-dark,
      "color-light": variables.$blue-light,
      "text-color": white,
    ),
  ),
  $color-themes
);

При этом будут заданы только указанные темы primary и secondary.

1.4 Кастомизация типографики

​​Для компонентов типографики Text и Title есть пропс type, который задает не только html-тег, но и определенные стили. За это отвечают scss-переменные $text-types, $title-types. Чтобы их переназначить, нужно добавить в файл custom-variables/typography.scss соответствующие конструкции для каждой переменной, например:

@use "sass:map";
@use "~@steroidsjs/bootstrap/scss/variables";

$title-types: ();
$title-types: map.merge(
  (
    "h1": (
      "font-size": variables.$font-size-2xl,
      "font-weight": variables.$font-weight-lg,
      "line-height": variables.$line-height-2xl,
      "color": variables.$text-color,
    ),
    "h2": (
      "font-size": variables.$font-size-xl,
      "font-weight": variables.$font-weight-lg,
      "line-height": variables.$line-height-xl,
      "color": blue,
    ),
    "subtitle": (
      "font-size": 14px,
      "font-weight": variables.$font-weight-lg,
      "line-height": variables.$line-height-lg,
      "color": blue,
    ),
  ),
  $title-types
);

Так можно создавать кастомные типы для текста и заголовков. Использование типов в коде будет такое:

<Title
   type='custom-title'
   content='some content'
/>

2. Кастомизация отдельных компонентов

Если необходимо изменить внешний вид одного конкретного компонента — это можно сделать через: 

• Переопределение SCSS-файла компонента (например, ButtonView.scss);

• Замена View-реализации компонента на свою (например, создать MyButtonView.tsx и использовать через пропс или реестр). 

Такой подход удобен, если вам нужно, например, изменить внешний вид Modal, но оставить всю бизнес-логику как есть. 

2.1 Переопределение SCSS-файла компонента

Файлы со стилями компонентов подключаются в src/style/index.scss через конструкцию @use, например: 

@use '~@steroidsjs/bootstrap/form/InputField/InputFieldView';

За основу лучше брать стили из @steroidsjs/bootstrap, например ButtonView.scss — так у вас уже будет понимание, какие элементы и модификаторы компонента существуют. Затем указываем в пути импорта наш файл со стилями. Так у нас в проекте получится следующая структура:

├── style
│   ├── index.scss - главный файл стилей
│   └── variables.scss - scss переменные
└── ui
    ├── form
    │   └── Button
    │       └── ButtonView.scss - переопределенный файл стилей
    └── index.scss

Изменение пути импорта в src/style/index.scss для ButtonView заменит стили по всему проекту.

2.2 Переопределение *.tsx файлов

Если изменение стилей недостаточно и необходимо изменить jsx код компонента, то в этом случае из библиотеки @steroidsjs/bootstrap полностью копируется *.tsx файл компонента и меняется путь в src/ui/bootstrap.ts, например:

'form.InputFieldView': {
  lazy: () => require('./ui/form/InputField/InputFieldView').default
},

Итоговая структура:

└── ui
   ├── bootstrap.tsx - главный файл, в нем переопределяем импорт компонента (например InputFieldView)
   └── form - группа компонентов, в котором располагается изменяемый компонент
       └── InputField - название компонента
           └── InputFieldView.tsx - файл с переопределением компонента

Благодаря независимости Core и View слоёв вы можете внедрить собственную дизайн-систему, сохранив работу всей бизнес-логики.

Вывод

Если вы устали от UI-библиотек, в которых нужно «гнуть под себя» всё, что идёт из коробки — возможно, пора попробовать другой подход. Steroids UI Kit предлагает набор компонентов, изначально встроенных в архитектуру фреймворка, что позволяет адаптировать интерфейс под задачи проекта без переписывания core-логики или обходных решений.