@skbkontur/react-ui 0.0.0-68e286f9fe → 0.0.0-6911f001e4

package/components/DropdownMenu/DropdownMenu.md

@@ -1,290 +0,0 @@
-### Базовый пример меню
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
-  <MenuHeader>Заголовок меню</MenuHeader>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</DropdownMenu>;
-```
-
-В проп `caption` помимо компонента можно передать функцию, возвращающую компонент, с помощью которой можно управлять текущим состоянием меню.
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<DropdownMenu caption={({ opened, openMenu, closeMenu, toggleMenu }) => {
-    return (
-      <>
-        <p>Сейчас меню { opened ? 'окрыто' : 'закрыто' }</p>
-        <Button onClick={toggleMenu}>Переключить меню</Button>
-        <Button onClick={openMenu}>Открыть меню</Button>
-        <Button onClick={closeMenu}>Закрыть меню</Button>
-      </>
-    )
-  }}>
-  <MenuHeader>Заголовок меню</MenuHeader>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</DropdownMenu>;
-```
-
-### Ширина
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<DropdownMenu caption={<Button use="primary">Открыть меню c заданной шириной</Button>} menuWidth={350}>
-  <MenuHeader>Заголовок меню</MenuHeader>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</DropdownMenu>;
-```
-
-### Максимальная высота
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<DropdownMenu caption={<Button use="primary">Открыть меню c заданной высотой</Button>} menuMaxHeight={150}>
-  <MenuHeader>Заголовок меню</MenuHeader>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</DropdownMenu>;
-```
-
-### Выпадашка слева по центру
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<DropdownMenu positions={["left middle"]} caption={<Button use="primary">Открыть меню</Button>}>
-  <MenuHeader>Заголовок меню</MenuHeader>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</DropdownMenu>;
-```
-
-### Меню c шапкой и подвалом
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  header={<p>Это шапка в виде обычного текста</p>}
-  footer={<Button>А это подвал в виде кнопки</Button>}
-  caption={<Button use="primary">Открыть меню</Button>}
-  >
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</DropdownMenu>;
-```
-
-### Иконка и автовыравнивание текста
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator, DropdownMenu } from '@skbkontur/react-ui';
-import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';;
-
-<DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
-  <MenuHeader>MenuHeader</MenuHeader>
-  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem1</MenuItem>
-  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem2</MenuItem>
-  <MenuItem>MenuItem3</MenuItem>
-</DropdownMenu>;
-```
-
-### Иконка и отключенное автовыравнивание текста
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator, DropdownMenu } from '@skbkontur/react-ui';
-import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';;
-
-<DropdownMenu preventIconsOffset caption={<Button use="primary">Открыть меню</Button>}>
-  <MenuHeader>MenuHeader</MenuHeader>
-  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem1</MenuItem>
-  <MenuItem icon={<CheckAIcon16Regular />}>MenuItem2</MenuItem>
-  <MenuItem>MenuItem3</MenuItem>
-</DropdownMenu>
-```
-
-### Отключенная анимация
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  disableAnimations
-  caption={<Button use="primary">Открыть меню без анимации</Button>}
-  >
-  <MenuHeader>Заголовок меню</MenuHeader>
-  <MenuSeparator />
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</DropdownMenu>;
-```
-
-### Подпись
-В `caption` можно передать любой элемент.
-
-```jsx harmony
-import { UiMenuBars3HIcon16Regular } from '@skbkontur/icons/icons/UiMenuBars3HIcon/UiMenuBars3HIcon16Regular';
-import { MenuItem } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  caption={
-    <span style={{ display: 'inline-block' }} tabIndex="0">
-      <UiMenuBars3HIcon16Regular size={32} />
-    </span>
-  }
-  menuWidth="300px"
->
-  <MenuItem>Раз</MenuItem>
-  <MenuItem>Два</MenuItem>
-  <MenuItem>Три</MenuItem>
-</DropdownMenu>;
-```
-
-### Чекбокс внутри MenuItem
-
-```jsx harmony
-import { MenuItem, Checkbox, Button, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
-
-const [checked, setChecked] = React.useState(false);
-
-let close;
-
-const renderCaption = ({ openMenu, closeMenu }) => {
-  close = closeMenu;
-  return (
-    <Button onClick={openMenu} use="primary">
-      Открыть меню
-    </Button>
-  );
-};
-
-<DropdownMenu caption={renderCaption}>
-  <MenuItem onClick={(e) => e.preventDefault()}>Просто пункт</MenuItem>
-  <ThemeContext.Provider value={ThemeFactory.create({ menuItemHoverBg: 'initial' })}>
-    <MenuItem
-      onClick={(e) => {
-        e.preventDefault();
-        setChecked(!checked);
-      }}
-    >
-      <Checkbox checked={checked}>с чекбоксом</Checkbox>
-    </MenuItem>
-  </ThemeContext.Provider>
-  <MenuItem
-    onClick={(e) => {
-      e.preventDefault();
-      close();
-    }}
-  >
-    Закрыть
-  </MenuItem>
-</DropdownMenu>
-```
-
-### Условный рендер элементов меню
-(с сохранением поведения [MenuItem](#/Components/MenuItem))
-
-```jsx harmony
-import {Button, MenuItem, Gapped, MenuSeparator} from '@skbkontur/react-ui';
-
-const [showItems, setShowItems] = React.useState(false);
-
-const hiddenItems = [
-  <MenuSeparator />,
-  <MenuItem>А я скрываюсь</MenuItem>,
-  <MenuItem>И я</MenuItem>,
-  <MenuItem>Я с вами</MenuItem>,
-];
-
-
-<Gapped>
-  <Button onClick={() => setShowItems(!showItems)}>
-    {showItems ? 'Спрятать' : 'Показать'} элементы
-  </Button>
-
-  <DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
-    <MenuItem>Меня видно всегда</MenuItem>
-    <MenuItem>Меня тоже</MenuItem>
-    <MenuItem>Ага, и меня!</MenuItem>
-    {showItems && hiddenItems}
-  </DropdownMenu>
-</Gapped>
-```
-
-С использованием фиче-флага menuItemsAtAnyLevel. Mожно использовать различные обертки для пунктов меню.
-
-```jsx harmony
-import {
-    DropdownMenu,
-    Button,
-    MenuHeader,
-    MenuItem,
-    MenuSeparator,
-    ReactUIFeatureFlagsContext,
-    Gapped
-} from '@skbkontur/react-ui';
-
-const groupedMenuItems = (
-  <div>
-    <MenuItem>MenuItem1</MenuItem>
-    <MenuItem>MenuItem2</MenuItem>
-    <MenuItem isNotSelectable>Not Selectable</MenuItem>
-  </div>
-);
-
-<Gapped>
-  <ReactUIFeatureFlagsContext.Provider value={{ menuItemsAtAnyLevel: true }}>
-    <DropdownMenu caption={<Button use="primary">Открыть меню</Button>}>
-      <>
-        <MenuHeader>Заголовок меню</MenuHeader>
-        <MenuSeparator />
-        <div>
-          {groupedMenuItems}
-        </div>
-      </>
-      <MenuItem>MenuItem3</MenuItem>
-    </DropdownMenu>
-  </ReactUIFeatureFlagsContext.Provider>
-</Gapped>;
-```
-
-

package/components/FileUploader/FileUploader.md

@@ -1,131 +0,0 @@
-Контрол загрузки файлов.
-Можно использовать для синхронной отправки данных, например, в форме.
-Или же можно использовать в асинхронном режиме.
-
-### Синхронный контрол
-```jsx harmony
-import { FileUploader } from '@skbkontur/react-ui';
-
-<FileUploader  />
-```
-
-### Асинхронный контрол
-```jsx harmony
-import { FileUploader } from '@skbkontur/react-ui';
-
-const request = () => Promise.resolve();
-
-<FileUploader request={request} />
-```
-
-### Multiple контрол
-```jsx harmony
-import { FileUploader } from '@skbkontur/react-ui';
-
-const request = () => Promise.reject();
-
-<FileUploader request={request} multiple />
-```
-
-### Файлы по умолчанию
-```jsx harmony
-import { FileUploader } from '@skbkontur/react-ui';
-
-function createFile(filename, content) {
-  return new File(['content'], filename, { type: 'text/plain' });
-};
-
-const initialFiles = [createFile('test1.txt'), createFile('test2.txt')];
-<FileUploader multiple initialFiles={initialFiles} />
-```
-
-### Файлы по умолчанию с кастомизацией рендеринга
-```jsx harmony
-import { cloneElement } from 'react';
-import { FileUploader } from '@skbkontur/react-ui';
-
-function createFile(filename, content) {
-  return new File(['content'], filename, { type: 'text/plain' });
-};
-
-const initialFiles = [createFile('test1.txt'), createFile('test2.txt')];
-<FileUploader
-  multiple
-  initialFiles={initialFiles}
-  renderFile={(file, fileNode) => cloneElement(fileNode, { showSize: false })}
-/>
-```
-
-### Использование `accept`
-```jsx harmony
-import { FileUploader } from '@skbkontur/react-ui';
-
-<FileUploader multiple accept="image/*" />
-```
-
-### Валидация файла в списке
-```jsx harmony
-import { FileUploader } from '@skbkontur/react-ui';
-
-<FileUploader
-  multiple
-  validateBeforeUpload={({ originalFile }) => {
-    return Promise.resolve(`У файла ${originalFile.name} неверный формат`);
-  }}
-/>;
-```
-
-### Валидация контрола
-```jsx harmony
-import { FileUploader } from '@skbkontur/react-ui';
-
-<FileUploader multiple error />
-```
-
-Ручное удаление файлов
-
-В критичных случаях, если нужно удалить файлы из контрола вручную, то это можно сделать, используя метод `removeFile` из `ref`.
-Обратите внимание, что при вызове `removeFile` вызываются коллбэки `onRemove` и `onValueChange`.
-
-```jsx harmony
-import { FileUploader, Button } from '@skbkontur/react-ui';
-
-const fileUploaderRef = React.useRef(null);
-const [fileList, setFileList] = React.useState([]);
-
-<div style={{ display: 'inline-grid', gap: '10px' }}>
-  <FileUploader ref={fileUploaderRef} multiple onValueChange={(files) => setFileList(files)} />
-    {fileList.map((file) => {
-    return (
-      <Button key={file.id} onClick={() => fileUploaderRef.current.removeFile(file.id)}>
-        Delete file {file.originalFile.name}
-      </Button>
-    );
-  })}
-</div>
-```
-
-### Локали по умолчанию
-
-```typescript static
-interface FileUploaderLocale {
-  chooseFile: string;
-  choosedFile: string;
-  orDragHere: string;
-  requestErrorText: string;
-}
-
-const ru_RU = {
-  chooseFile: 'Выберите файл',
-  choosedFile: 'Выбран файл',
-  orDragHere: 'или перетащите сюда',
-  requestErrorText: 'Файл не удалось загрузить на сервер, повторите попытку позже',
-};
-
-const en_GB = {
-  chooseFile: 'Select a file',
-  choosedFile: 'File selected',
-  orDragHere: 'or drag here',
-  requestErrorText: 'The file could not be uploaded to the server, please try again later',
-};
-```

package/components/FxInput/FxInput.md

@@ -1,31 +0,0 @@
-### Базовый пример
-```jsx harmony
-const [auto, setAuto] = React.useState(false);
-const [value, setValue] = React.useState();
-
-function handleValueChange(value) {
-  setAuto(false);
-  setValue(value);
-}
-
-function handleRestore() {
-  setAuto(true);
-  setValue('auto');
-}
-
-<FxInput auto={auto} value={value} onValueChange={handleValueChange} onRestore={handleRestore} />;
-```
-
-### Очистка значения
-Очистить значение в `FxInput`'е можно с помощью пустой строки или `undefined`
-```jsx harmony
-import { Group, Button } from '@skbkontur/react-ui';
-
-const [value, setValue] = React.useState(12345);
-
-<Group>
-  <FxInput value={value} onValueChange={setValue} />
-  <Button onClick={() => setValue(undefined)}>Undefined</Button>
-  <Button onClick={() => setValue('')}>Пустая строка</Button>
-</Group>
-```

package/components/Gapped/Gapped.md

@@ -1,44 +0,0 @@
-### Вывод элементов с горизонтальным расположением
-
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-<Gapped gap={20}>
-  <Button use="primary">Сохранить</Button>
-  <Button>Отмена</Button>
-</Gapped>;
-```
-
-### Вертикальное расположение
-
-```jsx harmony
-import { Checkbox } from '@skbkontur/react-ui';
-
-<Gapped vertical gap={20}>
-  <Checkbox checked>Write todos</Checkbox>
-  <Checkbox initialIndeterminate>Work in progress</Checkbox>
-  <Checkbox>Make things done</Checkbox>
-</Gapped>;
-```
-
-### Wrap
-По умолчанию `Gapped` выстраивает элементы в одну строчку, но с помощью свойства `wrap` можно включить перенос элементов на новую строку.
-При этом между строчками будет отступ равный значению свойста `gap`
-В таком случае из-за особенности верстки `Gapped` может перекрывать элементы расположенные сверху-слева.
-
-```jsx harmony
-import { Button, Checkbox, Toggle } from '@skbkontur/react-ui';
-
-<>
-  {"U Can't Touch This! => "}
-  <Toggle />
-
-  <div style={{ paddingTop: '10px', position: 'relative', width: '250px' }}>
-    <Gapped wrap gap={50}>
-      <Button use="primary">Сохранить</Button>
-      <Button>Отмена</Button>
-      <Checkbox>Я не робот</Checkbox>
-    </Gapped>
-  </div>
-</>;
-```

package/components/GlobalLoader/GlobalLoader.md

@@ -1,97 +0,0 @@
-Индикатор обмена данными с сервером.
-
-Глобальный Лоадер может быть только один в приложении. Поэтому, каждый новый экземпляр компонента
-"убивает" предыдущий
-экземпляр, и начинает перехватывать статические методы.
-
-Предполагается монтирование компонента в единственном месте. И управление им через статические методы, либо через пропы.
-
-### Все статические методы
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Button onClick={GlobalLoader.start} use="primary">start</Button>
-  <Button onClick={GlobalLoader.done} use="success">done</Button>
-  <Button onClick={GlobalLoader.reject} use="danger">reject</Button>
-  <Button onClick={GlobalLoader.accept} use="pay">accept</Button>
-</Gapped>
-```
-
-### Монтирование и кастомизация
-```jsx harmony
-import { Button, Toggle, Gapped, GlobalLoader, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
-
-const myTheme = ThemeFactory.create({ globalLoaderColor: 'red' });
-
-const [manually, setManually] = React.useState(false);
-const [active, setActive] = React.useState(false);
-const [error, setError] = React.useState(false);
-
-const reset = () => {
-  if (manually) {
-    setManually(false);
-    setError(false);
-    setActive(false);
-  } else {
-    setManually(true);
-  }
-}
-
-<Gapped vertical>
-  <Toggle checked={manually} onValueChange={reset}>
-    Управление пропами
-  </Toggle>
-  <Toggle checked={active} onValueChange={setActive} disabled={!manually}>
-    <code>active</code>
-  </Toggle>
-  <Toggle checked={error} onValueChange={setError} disabled={!manually}>
-    <code>rejected</code>
-  </Toggle>
-
-  <ThemeContext.Provider value={myTheme}>
-    <GlobalLoader expectedResponseTime={2000} delayBeforeShow={1000} active={active} rejected={error}
-      onStart={() => console.log('start')}
-      onDone={() => console.log('done')}
-      onReject={() => console.log('reject')}
-      onAccept={() => console.log('accept')}
-    />
-  </ThemeContext.Provider>
-
-</Gapped>
-```
-
-
-### Статические методы в модалке
-```jsx harmony
-import { Button, Gapped, Modal } from '@skbkontur/react-ui';
-
-const [opened, setOpened] = React.useState(false);
-
-function renderModal() {
-  return (
-    <Modal onClose={close}>
-      <Modal.Header>Заголовок</Modal.Header>
-      <Modal.Body>
-        <Gapped>
-          <Button onClick={GlobalLoader.start} use="primary">start</Button>
-          <Button onClick={GlobalLoader.done} use="success">done</Button>
-        </Gapped>
-      </Modal.Body>
-    </Modal>
-  );
-}
-
-function open() {
-  setOpened(true);
-}
-
-function close() {
-  setOpened(false);
-}
-
-<div>
-  {opened && renderModal()}
-  <Button onClick={open}>Открыть</Button>
-</div>;
-```

package/components/Group/Group.md

@@ -1,19 +0,0 @@
-### Базовый пример
-```jsx harmony
-import { MathFunctionIcon16Regular } from '@skbkontur/icons/icons/MathFunctionIcon/MathFunctionIcon16Regular';
-import { SearchLoupeIcon16Regular } from '@skbkontur/icons/icons/SearchLoupeIcon/SearchLoupeIcon16Regular';
-import { Button, Input } from '@skbkontur/react-ui';
-
-const [value, setValue] = React.useState('Foo');
-
-<Group width={300}>
-  <Button>
-    <MathFunctionIcon16Regular />
-  </Button>
-  <Input value={value} width="100%" onValueChange={setValue} />
-  <Button>
-    <SearchLoupeIcon16Regular />
-  </Button>
-  <Button>Bar</Button>
-</Group>;
-```