[Feature][ConfigProvider] Свойство, отвечающее за особенности "мимикрии" под клиенты

[eugpoloz]

Одно из главных преимуществ VKUI — мультиплатформенность:

Интерфейсы на VKUI практически неотличимы от дизайна платформ, внутри которых они открыты. Библиотека умеет "мимикрировать" под наши iOS и Android клиенты, под дизайн vk.com и m.vk.com.

Посмотреть, как мимикрирует <Cell mode="removable" />

---

Под iOS

Под остальные платформы

---

Планируем максимально отойти от платформенных различий, потому что VKUI растет и выходит за пределы ВКонтакте. Есть загвоздка: сейчас платформа и мимикрия под клиент — одно и то же, но мимикрировать под тот же нативный iOS-клиент приложение везде будет одинаково вне зависимости от платформы.

Эти сущности и нужно разделить.

Как можно решить?

Сейчас я вижу два варианта:

1. Выделяем из platform значения IOS и ANDROID и перекидываем их в новое свойство.
   Как его можно назвать?

   • client,
   • behavior (т.к. речь об особенностях поведения).

2. Оставляем особенности клиентов в platform (IOS и ANDROID) и выделяем theme (VKCOM и так далее).

[inomdzhon]

Я бы на 2-ом остановился – platform всё же семантичней. Вместо theme предлагаю scheme, т.к. theme ассоциируется с light и dark.

Есть проблема, что для IOS/Android/VKCOM есть свои токены и благодаря platform они переключаются. Получается, пользователю надо будет для platform="IOS" самому переключать scheme под токены для IOS

[SevereCloud]

На деле клиентов со своими приколами 3 штуки - ANDROID, IOS и DESKTOP

[inomdzhon]

На деле клиентов со своими приколами 3 штуки - ANDROID, IOS и DESKTOP

При том что ANDROID это COMMON

А DESKTOP ведь это больше про то, что ModalPage должен с боттом щит переключиться на модальное окно и про всякое такое – и вот это всё ведь про адаптивность

[inomdzhon]

Предлагаю следующее решение

---

[v6][Breaking change][Feature][ConfigProvider]: Вынесение логики связанной с токенами из platform в отдельный параметр

Чеклист

1. Выделяем логику связанную с токенами из platform в параметр schemes.
2. Решаем проблему с Appearance. Сейчас под капотом мы занимаемся конкатинацией и делаем из, например, vkBase -> vkui--vkBase--light. Что неочевидно. Пользователь должен уметь сам этим управлять.
3. Переименовываем платформу VKCOM в Web.

Как это будет выглядеть в JS?

type AppearanceScheme = {
  light: string;
  dark?: string; // не обязательный
}

type PlatformScheme = {
  android: string | AppearanceScheme;
  ios: string | AppearanceScheme;
  web: string | AppearanceScheme;
}

interface ConfigProviderBaseProps {
  appearance: 'light' | 'dark';
  isWebView: boolean;
  // и т.п.
}

interface ConfigProviderAutoDedectProps extends ConfigProviderBaseProps {
  schemes: string | PlatformScheme;
}

interface ConfigProviderSpecificPlatformProps extends ConfigProviderBaseProps {
  platform: 'ios' | 'android' | 'web';
  schemes: string | AppearanceScheme;
}

type ConfigProviderProps = ConfigProviderAutoDedectProps | ConfigProviderSpecificPlatformProps;

ConfigProviderAutoDedectProps – автоопределение платформы

Задаём для всех платформ одинаковую схему токенов

<ConfigProvider schemes="vkui--vkBase--light" />

Задаём разные схемы под разные платформы

<ConfigProvider
  schemes={{
    android: 'vkui--vkBase--light',
    ios: 'vkui--vkIOS--light',
    web: 'vkui--vkCom--light',
  }}
/>
// или
<ConfigProvider
  schemes={{
    android: 'cloud--light',
    ios: 'cloudIOS--light', // разница только тут
    web: 'cloud--light',
  }}
/>
// с appearance
<ConfigProvider
  schemes={{
    android: {
      light: 'vkui--vkBase--light',
      dark: 'vkui--vkBase--dark',
    },
    ios: {
      light: 'vkui--vkIOS--light',
      dark: 'vkui--vkIOS--dark',
    },
    web: {
      light: 'vkui--vkCom--light',
      dark: 'vkui--vkCom--dark',
    },
  }}
/>

ConfigProviderSpecificPlatformProps – зашиваем платформу

Android

<ConfigProvider platform="android" schemes="cloud--light" />
// кастомная схема под Android
<ConfigProvider platform="android" schemes="vkui--vkBase--light" />
// с appearance
<ConfigProvider platform="android" schemes={{ light: 'vkui--vkBase--light', dark: 'vkui--vkBase--dark' }} />

iOS

<ConfigProvider platform="ios" schemes="cloud--light" />
// кастомная схема под iOS
<ConfigProvider platform="ios" schemes="vkui--vkIOS--light" />
// с appearance
<ConfigProvider platform="ios" schemes={{ light: 'vkui--vkIOS--light', dark: 'vkui--vkIOS--dark' }} />

Web

<ConfigProvider platform="web" schemes="cloud--light" />
// кастомная схема под Web
<ConfigProvider platform="web" schemes="vkui--vkCom" />
// с appearance
<ConfigProvider platform="web" schemes={{ light: 'vkui--vkCom', dark: 'vkui--vkCom--dark' }} />

CSS

В root будут выставляться только названия schemes + appearance.

[inomdzhon]

• см. [Breaking change][Feature][ConfigProvider]: Вынесение логики связанной с токенами из platform в отдельный параметр #5121