• Домашняя страница Snack UIKit
• Проект на GitHub
• Проект в Figma
• Телеграм-канал сообщества TeamSnack
• Contribution Guide

• Контрибьюторы: Snack UIKit - это стандартный инструмент разработки интерфейсов в компании cloud.ru. С его помощью решаются самые широкие задачи: seo-ориентированный портал, админки любой сложности и внутренние инструменты.

• Кастомизация: Библиотека компонентов имеет интеграцию с figma и стилизуется набором токенов, которые могут быть переопределены. Вы можете настроить тему под свои нужды.

• Dark/Light: Поддержка темной и светлой модификации "из коробки".

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

• E2E тестирование: Компоненты проходят автоматические тесты в chrome и firefox

• Совместимость со всеми браузерами:

Вы можете использовать шаблон приложения, в котором уже подключен Snack UIKit и настроена сборка.

Стилизация приложения на Snack UIKit основана на использовании классов light и dark из файла @snack-uikit/figma-tokens/build/css/brand.module.css. Классы содержат css-переменные со стилями для светлой и темной модификаций интерфейса соответственно.

Не используйте эти css-переменные напрямую. Как использовать токены темы читайте в описании пакета темы.

Для того чтоб подключить стили Snack UIKit в приложение, вам нужно:

• Импортировать хук useThemeConfig
• В хук передать мапу с ключами тем и соответсвующими стилевыми файлами
• Из хука получить класс для темы, который нужно задать обёртке на верхнем уровне приложения.
  • Менять тему можно с помощью функции changeTheme, возвращаемой из хука. Можно также положить её в контекст и передать вниз по реакт-дереву.

import { createContext, useEffect } from 'react';
import { useThemeConfig } from '@snack-uikit/utils';
import { ButtonFilled } from '@snack-uikit/button';
import DefaultBrand from '@snack-uikit/figma-tokens/build/css/brand.module.css';

export enum Theme {
  Light = 'Light',
  Dark = 'Dark',
}

const themeMap = {
  [Theme.Light]: DefaultBrand.light,
  [Theme.Dark]: DefaultBrand.dark,
};

type ThemeContextProps = {
  theme: Theme;
  changeTheme(value: Theme): void;
};

const ThemeContext = createContext<ThemeContextProps>({
  theme: Theme.Light,
  changeTheme() {}
});

function App() {
  const { theme, themeClassName, changeTheme } = useThemeConfig<Theme>({themeMap, defaultTheme: Theme.Light});
  
  // также можно повесить класс на body
  // useEffect(() => {
  //   document.body.classList.add(themeClassName);
  //   return () => document.body.classList.remove(themeClassName);
  // }, [theme]);
  
  return (
    <ThemeContext.Provider value={{ theme, changeTheme }}>
      <div className={themeClassName}>
        <ButtonFilled label='OK'/>
      </div>
    </ThemeContext.Provider>
  );
}

Development Team - Трифонов Михаил, Ахременко Григорий, Белов Алексей, Ершов Никита, Козлова Анна, Хлупин Сергей, Белявский Илья

Design Team - Малокостов Игорь, Алексеев Алексей