vkcom / vkui Goto Github PK

VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.

Home Page: https://vkcom.github.io/VKUI/

License: MIT License

JavaScript 5.91% CSS 11.24% TypeScript 82.64% Shell 0.03% HTML 0.04% MDX 0.07% EJS 0.06%

reactjs postcss javascript vkontakte opensource ui mobile-web uikit vkui typescript

vkui's Introduction

VKUI — это библиотека адаптивных React-компонентов
для создания веб-приложений.
Библиотека основана на дизайн-системе VK и реализует её интерфейсы для различных платформ.
Релизы: https://github.com/VKCOM/VKUI/releases.
Гайд по миграции на версию 6.

Установка

npm:

npm i @vkontakte/vkui

yarn:

yarn add @vkontakte/vkui

pnpm:

pnpm add @vkontakte/vkui

Обратите внимание: мы поддерживаем react и react-dom версии ^18.2.0

Hello World

import * as React from 'react';
import { createRoot } from 'react-dom/client';
import {
  AdaptivityProvider,
  ConfigProvider,
  AppRoot,
  SplitLayout,
  SplitCol,
  View,
  Panel,
  PanelHeader,
  Header,
  Group,
  SimpleCell,
} from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';

const Example = () => {
  const platform = usePlatform();

  return (
    <AppRoot>
      <SplitLayout header={platform !== 'vkcom' && <PanelHeader delimiter="none" />}>
        <SplitCol autoSpaced>
          <View activePanel="main">
            <Panel id="main">
              <PanelHeader>VKUI</PanelHeader>
              <Group header={<Header mode="secondary">Items</Header>}>
                <SimpleCell>Hello</SimpleCell>
                <SimpleCell>World</SimpleCell>
              </Group>
            </Panel>
          </View>
        </SplitCol>
      </SplitLayout>
    </AppRoot>
  );
};

const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
  <ConfigProvider>
    <AdaptivityProvider>
      <Example />
    </AdaptivityProvider>
  </ConfigProvider>,
);

Браузеры

С подробным списком можно ознакомиться в файле .browserslistrc

Тестирование

Мы работаем над качеством библиотеки и подвозим тесты. yarn test запускает юниты, типы и линтит. Также мы поддерживаем скриншотные тесты (e2e) и проверяем базовую доступность (a11y) компонентов — смотрите наш гайд по тестированию.

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

В документации вы сможете найти информацию об использовании компонентов и утилит.

Сообщить о проблеме

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

Contributing

Мы очень радуемся, когда пользователи библиотеки работают над её улучшением. Для того, чтобы оставить след в истории:

Для начала ознакомьтесь с нашим манифестом 📝
Затем посмотрите требования к разработке 🔧
А теперь смело вносите изменения и создавайте pull request ❤️

vkui's People

Contributors

Stargazers

Watchers

Forkers

arsich extype qhhorjon appbak3r alebymars mmarkelov normund opensourceyouthprogramming gaserd rtoprila podow hshinnovators lolbyaka promo4ka dalersion borischumichev enotu margolin96 arseniy-gl reetou deadit xpyctumo backdevelopend nbarinov smartphonejava lekzd renataclover khinartur nikitabudkovskiy ninthrampart s1ash trash-forks remkudusov tpona gorshenev achubutkin denoll zuarel anstkosh cyberpunk10 alexandranash sozonov nickbullock b-ponomarenko urffin vo0doo eolme-fallback hateinternet kirillzamotaev pwa-test123 kurasixo theytr 21alexander21 maksimdegtyarev riledv tatish777 connormiha nocell sts0mrg0 gbowsky pkorchevskiy this53 bunksbunks ekaterinasukhanova melzmr mclaran romanbronevik gnosheva baikinkirill fossabot mitrych87 heyqbnk astrahov shastox cursedwizard ilyagrshin r-lubimov-corp-mail-ru jaxxreal dndrheadof levtsypanov mwguy imillka ashishkpoudel-resources tens1xxx skygopnik epsilonnnn creestor chachachachach fsss126 s-pivovarov flex-qr semgose 8coon 37bytes godfreyd jagarinart alex-misch talkenson tadappnative kzubanov

Внедряется инфраструктура + пишутся простые тесты (например, действительно на успешную инициализацию)
Вводится правило, что при исправлении бага на него нужно писать тест. Или покрыть весь компонент, в котором возник баг
При рефакторинге компонента сначала пишутся тесты (tdd/bdd, все дела)
Однажды наступает светлый день, когда можно за пару дней дописать тесты до полного или почти полного покрытия