@skbkontur/react-ui 0.0.0-a8f1c3e7a1 → 0.0.0-aa4659ca48

package/cjs/components/MiniModal/MiniModal.md

@@ -1,231 +0,0 @@
-Этот компонент обёртка над [Modal](#/Components/Modal/Modal).
-
-`MiniModal` — модальное диалоговое окно, которое предполагает обязательный отклик пользователя по одному из доступных действий.
-Закрытие окна по клику на фон или "крестик" не рекомендуется, т.к. у этих действий нет однозначного описания в
-отличие от кнопок с названиями, наподобие "Сохранить", "Подтвердить" и т.п.
-
-👉 По макету предполагается, что все кнопки должны быть среднего размера `size = medium`.
-
-### Уведомление
-
-Самый простой вариант использования:
-
-```jsx harmony
-import { MiniModal, Button, Gapped } from '@skbkontur/react-ui';
-import { MoneyTypeCoinsIcon } from '@skbkontur/icons/MoneyTypeCoinsIcon';
-
-const PayNotifice = () => {
-
-  const [isOpened, setIsOpened] = React.useState(false);
-
-  const open = () => setIsOpened(true);
-  const close = () => setIsOpened(false);
-
-  return (
-    <>
-      {isOpened && (
-        <MiniModal>
-          <MiniModal.Header>
-            Простое уведомление
-          </MiniModal.Header>
-          <MiniModal.Body>
-            Это простое, но достаточное важное уведомление, чтобы его показать в МиниМодалке
-          </MiniModal.Body>
-          <MiniModal.Footer>
-            <Button size="medium" use="primary" onClick={close}>Понятно</Button>
-          </MiniModal.Footer>
-        </MiniModal>
-      )}
-      <Button use="pay" onClick={open} icon={<MoneyTypeCoinsIcon/>}>Оплата</Button>
-    </>
-  );
-}
-
-<PayNotifice />
-```
-
-### Подтверждение
-
-Иногда от пользователя требуется выбрать одно из доступных действий.
-
-Например, подтвердить важное действие или отклонить его:
-
-```jsx harmony
-import { MiniModal, Button, Gapped, ThemeContext } from '@skbkontur/react-ui';
-import { TrashCanIcon } from '@skbkontur/icons/TrashCanIcon';
-
-const ConfirmDelete = ({ name, handleDelete }) => {
-  const theme = React.useContext(ThemeContext);
-
-  const [isOpened, setIsOpened] = React.useState(false);
-
-  const open = () => setIsOpened(true);
-  const close = () => setIsOpened(false);
-
-  const mainAction = () => {
-    handleDelete();
-    close();
-  };
-
-  return (
-    <>
-      {isOpened && (
-        <MiniModal>
-          <MiniModal.Header icon={<TrashCanIcon size={64} color={theme.btnDangerBg}/>}>
-            Удалить "{name}"?
-          </MiniModal.Header>
-          <MiniModal.Footer direction="column">
-            <Button use="danger" size="medium" onClick={mainAction}>Удалить</Button>
-            <Button size="medium" onClick={close}>Отменить</Button>
-          </MiniModal.Footer>
-        </MiniModal>
-      )}
-      <Button onClick={open} icon={<TrashCanIcon weight="light"/>}/>
-    </>
-  );
-}
-
-const list = ['Отчёт № 111', 'Отчёт № 222', 'Отчёт № 333'];
-
-<Gapped vertical>
-  {list.map((name) => (
-    <Gapped key={name}>
-      <div style={{ width: 200, borderBottom: 'dashed 1px' }}>
-        {name}
-      </div>
-      <span>
-        <ConfirmDelete name={name} handleDelete={() => alert(`${name} удалён`)}/>
-      </span>
-    </Gapped>
-  ))}
-</Gapped>
-```
-
-### Синглтон
-
-Одно и то же диалоговое окно может вызываться в разных частях приложения.
-
-В таком случае стоит реализовать паттерн синглтона:
-
-```jsx harmony
-import { MiniModal, Button, Gapped } from '@skbkontur/react-ui';
-import { NotificationBellAlarmIcon16Solid } from '@skbkontur/icons/NotificationBellAlarmIcon16Solid';
-import { NotificationBellAlarmIcon64Regular } from '@skbkontur/icons/NotificationBellAlarmIcon64Regular';
-
-const EnableNotification = React.forwardRef(({ setStatus }, ref) => {
-  const [isOpened, setIsOpened] = React.useState(false);
-
-  const open = () => setIsOpened(true);
-  const close = () => setIsOpened(false);
-
-  const handleAllowAll = () => {
-    setStatus('Разрешить все');
-    close();
-  };
-  const handleAllowBasic = () => {
-    setStatus('Разрешить только основные');
-    close();
-  };
-  const handleDenyAll = () => {
-    setStatus('Запретить');
-    close();
-  };
-
-  React.useImperativeHandle(ref, () => ({ open, close }), []);
-
-  return isOpened && (
-    <MiniModal>
-      <MiniModal.Header icon={<NotificationBellAlarmIcon64Regular/>}>
-        Разрешить уведомления?
-      </MiniModal.Header>
-      <MiniModal.Footer direction="column">
-        <Button use="primary" size="medium" onClick={handleAllowAll}>Разрешить все</Button>
-        <Button size="medium" onClick={handleAllowBasic}>Разрешить только основные</Button>
-        <MiniModal.Indent/>
-        <Button size="medium" onClick={handleDenyAll}>Запретить</Button>
-      </MiniModal.Footer>
-    </MiniModal>
-  );
-});
-
-const [status, setStatus] = React.useState('-не выбрано-');
-
-const NotificationEnableRef = React.useRef(null);
-
-const NotificationEnableOpen = () => NotificationEnableRef.current && NotificationEnableRef.current.open();
-
-<>
-  <EnableNotification ref={NotificationEnableRef} setStatus={setStatus}/>
-  <Gapped vertical>
-    <span>
-      <NotificationBellAlarmIcon16Solid/> Статус уведомлений: {status}
-    </span>
-    <Button use="text" theme={{ btnTextBg: '#D6D6D6' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
-    <Button use="text" theme={{ btnTextBg: '#E6E6E6' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
-    <Button use="text" theme={{ btnTextBg: '#F0F0F0' }} onClick={NotificationEnableOpen}>Разрешить уведомления?</Button>
-  </Gapped>
-</>
-```
-
-### Ожидание
-
-Некоторые действия для корректного исполнения требуют блокировки других действий пользователя.
-
-В таких случаях можно, например, использовать проп `loading` для `Button`, и не позволять закрыть окно до конца исполнения:
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-
-const WaitingUpdate = ({ handleUpdate, setLastUpdated }) => {
-
-  const [isLoading, setIsLoading] = React.useState(false);
-  const [isOpened, setIsOpened] = React.useState(false);
-
-  const open = () => setIsOpened(true);
-  const close = () => setIsOpened(false);
-
-  const handleMainClick = () => {
-    setIsLoading(true);
-    handleUpdate()
-      .then(() => {
-        setIsLoading(false);
-        setIsOpened(false);
-        setLastUpdated(new Date());
-      });
-  };
-
-  return (
-    <>
-      {isOpened && (
-        <MiniModal>
-          <MiniModal.Header>
-            Обновить?
-          </MiniModal.Header>
-          <MiniModal.Body>
-            После вашего подтверждения другие действия на странице будут заблокированы на несколько секунд.
-          </MiniModal.Body>
-          <MiniModal.Footer>
-            <Button use="success" size="medium" onClick={handleMainClick} loading={isLoading}>Обновить</Button>
-            <Button size="medium" onClick={close} disabled={isLoading}>Отменить</Button>
-          </MiniModal.Footer>
-
-        </MiniModal>
-      )}
-      <Button onClick={open} use="success">Обновить</Button>
-    </>
-  );
-}
-
-const dateTimeFormat = new Intl.DateTimeFormat('nu', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
-
-const [lastUpdated, setLastUpdated] = React.useState(new Date());
-
-const handleUpdate = () => new Promise((resolve) => setTimeout(resolve, 1500));
-
-<Gapped>
-  <WaitingUpdate handleUpdate={handleUpdate} setLastUpdated={setLastUpdated} />
-  <span>
-    Последнее обновление: {dateTimeFormat.format(lastUpdated)}
-  </span>
-</Gapped>
-```

package/cjs/components/Modal/Modal.md

@@ -1,56 +0,0 @@
-### Базовый пример
-
-```jsx harmony
-import { Button, Toggle } from '@skbkontur/react-ui';
-
-const [opened, setOpened] = React.useState(false);
-const [panel, setPanel] = React.useState(false);
-
-function renderModal() {
-  return (
-    <Modal onClose={close}>
-      <Modal.Header>Title</Modal.Header>
-      <Modal.Body>
-        <p>Use rxjs operators with react hooks</p>
-
-        <div>
-          <Toggle checked={panel} onValueChange={setPanel} /> Panel{' '}
-          {panel ? 'enabled' : 'disabled'}
-        </div>
-      </Modal.Body>
-      <Modal.Footer panel={panel}>
-        <Button onClick={close}>Close</Button>
-      </Modal.Footer>
-    </Modal>
-  );
-}
-
-function open() {
-  setOpened(true);
-}
-
-function close() {
-  setOpened(false);
-}
-
-<div>
-  {opened && renderModal()}
-  <Button onClick={open}>Open</Button>
-</div>;
-```
-
-### Локали по умолчанию
-
-```typescript static
-interface ModalLocale {
-  closeButtonAriaLabel: string;
-}
-
-const ru_RU = {
-  closeButtonAriaLabel: 'Закрыть модальное окно'
-}
-
-const en_GB = {
-  closeButtonAriaLabel: 'Close modal window'
-}
-```

package/cjs/components/Paging/Paging.md

@@ -1,57 +0,0 @@
-Управление с клавиатуры работает в двух вариантах:
-
-- **useGlobalListener === true** слушатель keydown событий на document, если на стринице несколько компонентов Paging,
-  обработчик будет срабатывать на каждом
-- **useGlobalListener === false** обработка нажатия клавиш будет работать только когда компонент в фокусе.
-
-Навигационные подсказки появляются когда доступно управление с клавиатуры и `withoutNavigationHint != true`
-
-### Базовый пример
-```jsx harmony
-class Paginator3000 extends React.Component {
-  constructor() {
-    super();
-    this.state = { active: 1 };
-    this._handlePageChange = this._handlePageChange.bind(this);
-  }
-
-  render() {
-    return <Paging activePage={this.state.active} onPageChange={this._handlePageChange} pagesCount={12} />;
-  }
-
-  _handlePageChange(pageNumber) {
-    this.setState({ active: pageNumber });
-  }
-}
-
-<Paginator3000 />;
-```
-
-### Пейджинг в отключенном состоянии
-
-```jsx
-const [activePage, setActivePage] = React.useState(3);
-
-<Paging
-  disabled
-  onPageChange={(activePage) => setActivePage(activePage)}
-  activePage={activePage}
-  pagesCount={8}
-/>
-```
-
-### Локали по умолчанию
-
-```typescript static
-interface PagingLocale {
-  forward?: string;
-}
-
-const ru_RU = {
-  forward: 'Дальше',
-};
-
-const en_GB = {
-  forward: 'Forward',
-};
-```

package/cjs/components/PasswordInput/PasswordInput.md

@@ -1,29 +0,0 @@
-### Базовый пример
-```jsx harmony
-<PasswordInput />
-```
-
-### Отслеживание нажатия CapsLock
-
-```jsx harmony
-<PasswordInput detectCapsLock />
-```
-
-### Локали по умолчанию
-
-```typescript static
-interface PasswordInputLocale {
-  eyeOpenedAriaLabel?: string;
-  eyeClosedAriaLabel?: string;
-}
-
-const ru_RU = {
-  eyeOpenedAriaLabel: 'Скрыть символы пароля',
-  eyeClosedAriaLabel: 'Отобразить символы пароля',
-}
-
-const en_GB = {
-  eyeOpenedAriaLabel: 'Hide password symbols',
-  eyeClosedAriaLabel: 'Show password symbols',
-}
-```

package/cjs/components/Radio/Radio.md

@@ -1,57 +0,0 @@
-### Виды радио-кнопок
-
-```jsx harmony
-import { Gapped, Radio, RadioGroup } from '@skbkontur/react-ui';
-
-const [chosen, setChosen] = React.useState(null);
-
-<RadioGroup onValueChange={(value) => setChosen(value)}>
-  <Gapped gap={3} vertical>
-    <Radio value={1}>
-      Обычная радио-кнопка
-    </Radio>
-    <Radio value={2} disabled>
-      Отключенная радио-кнопка
-    </Radio>
-    <Radio value={3} checked={!chosen}>
-      Радио-кнопка отмеченная по умолчанию
-    </Radio>
-    <Radio value={4} focused>
-      Радио-кнопка в состоянии <b>focused</b> (меняется только обводка)
-    </Radio>
-    <Radio value={5} error>
-      Радио-кнопка в состоянии <b>error</b>
-    </Radio>
-    <Radio value={6} warning>
-      Радио-кнопка в состоянии <b>warning</b>
-    </Radio>
-  </Gapped>
-</RadioGroup>
-```
-
-### Состояния
-Радио-кнопки могут иметь сразу несколько состояний.
-
-```jsx harmony
-<Radio disabled checked warning>
-  Отключенная, отмеченная радио-кнопка в состоянии <b>warning</b>
-</Radio>
-```
-
-### Размер
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped vertical>
-  <Radio size="small" value="value" >
-    Маленький
-  </Radio>
-  <Radio size="medium" value="value" >
-    Средний
-  </Radio>
-  <Radio size="large" value="value" >
-    Большой
-  </Radio>
-</Gapped>
-```

package/cjs/components/RadioGroup/RadioGroup.md

@@ -1,44 +0,0 @@
-### Базовый пример
-```jsx harmony
-import { Gapped, Radio } from '@skbkontur/react-ui';
-
-let items = ['One', 'Two', 'Three', 'Four'];
-
-let simpleRadioGroup = (
-  <div>
-    <h2>Numbers</h2>
-    <RadioGroup name="number-simple" items={items} defaultValue="One" />
-  </div>
-);
-
-let complexRadioGroup = (
-  <div>
-    <h2>Numbers</h2>
-    <RadioGroup name="number-complex" defaultValue="3">
-      <Gapped gap={40}>
-        <Gapped vertical gap={0}>
-          <b>Odd</b>
-          <Radio value="1">One</Radio>
-          <Radio value="3">Three</Radio>
-          <Radio value="5" disabled>
-            Five
-          </Radio>
-          <Radio value="7">Seven</Radio>
-        </Gapped>
-        <Gapped vertical gap={0}>
-          <b>Even</b>
-          <Radio value="2">Two</Radio>
-          <Radio value="4">Four</Radio>
-          <Radio value="6">Six</Radio>
-          <Radio value="8">Eight</Radio>
-        </Gapped>
-      </Gapped>
-    </RadioGroup>
-  </div>
-);
-
-<div>
-  {simpleRadioGroup}
-  {complexRadioGroup}
-</div>;
-```

package/cjs/components/ResponsiveLayout/ResponsiveLayout.md

@@ -1,75 +0,0 @@
-### Вспомогательный интерфейс
-```ts static
-interface ResponsiveLayoutFlags {
-  isMobile: boolean;
-}
-```
-
-### Компонент ожидает в себя функцию, в которую аргументом передается объект с флагом лэйаута.
-
-```jsx static
-import { ResponsiveLayout } from '@skbkontur/react-ui';
-
-class SomeComponent {
-  public render() {
-    return (
-      <ResponsiveLayout>
-        {
-          ({ isMobile }) => {
-            /* ... */
-          }
-        }
-      </ResponsiveLayout>
-    )
-  }
-}
-```
-
-### Также существует проп `onLayoutChange`, который вызывает переданный в него коллбэк при изменении лэйаута. Аргументом передается объект с флагом.
-
-```jsx static
-import { ResponsiveLayout } from '@skbkontur/react-ui';
-
-class SomeComponent {
-  public render() {
-    return (
-      <div>
-        <ResponsiveLayout onLayoutChange={({ isMobile }) => console.log(isMobile)} />
-      </div>
-    )
-  }
-}
-```
-
-### В компонент можно передать проп `customMediaQueries: MediaQueriesType`, который позволяет кастомизировать возвращаемые флаги:
-```ts static
-type MediaQueriesType = Record<string, string>;
-```
-1. Без кастомизации есть только флаг isMobile
-2. Поля из `customMediaQueries` дополняют список возвращаемых флагов в `ResponsiveLayoutFlags`
-3. При добавлении кастомного флага isMobile, значение дефолтного флага перезаписывается в пользу кастомного
-
-```jsx static
-import { ResponsiveLayout } from '@skbkontur/react-ui';
-
-const customMediaQueries = {
-  isTablet: '(min-width: 577px)',
-  isDesktop: '(min-width: 1280px)',
-};
-
-class SomeComponent {
-  public render() {
-    return (
-      <ResponsiveLayout customMediaQueries={customMediaQueries}>
-        {
-          ({ isMobile, isTablet, isDesktop }) => {
-            /* ... */
-          }
-        }
-      </ResponsiveLayout>
-    )
-  }
-}
-```
-
-Как альтернативу можно использовать хук [useResponsiveLayout](#/Mobiles).