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

package/cjs/components/Link/Link.md

@@ -1,182 +0,0 @@
-### Базовый пример
-
-```jsx harmony
-<Link href="https://kontur.ru" target="_blank">Обычная ссылка</Link>
-```
-
-### Корневой элемент
-Cсылка может рендерить кнопку в качестве корневого элемента, c помощью пропа `component`. Cсылка принимает все пропы переданного в `component` компонента.
-Рекомендуется к использованию вместо кнопки с `use=link`, если нужна кнопка с визуалом ссылки.
-
-```jsx harmony
-import { Link } from '@skbkontur/react-ui';
-
-<Link component='button'>Кнопка, но выглядит как ссылка</Link>
-```
-
-### Проп `component`
-С помощью пропа `component`, ссылка может рендерить компонент `Link` из `react router` в качестве корневого элемента.
-
-```jsx static
-import { Link } from '@skbkontur/react-ui';
-import { Link as RouterLink, BrowserRouter } from 'react-router-dom';
-
-<BrowserRouter>
-  <Link to='/dashboard' component={RouterLink}>react-router-dom link</Link>
-</BrowserRouter>
-```
-
-### Стили и disabled
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped gap={15}>
-  <Link>Обычная ссылка</Link>
-  <Link use="success">Успешная ссылка</Link>
-  <Link use="danger">Опасная ссылка</Link>
-  <Link use="grayed">Работающая ссылка серого цвета</Link>
-  <Link disabled>Отключенная ссылка</Link>
-</Gapped>;
-```
-
-### Иконка
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
-
-<Gapped gap={20}>
-  <Link icon={<CheckAIcon16Light />}>Ссылка с иконкой слева</Link>
-  <Link icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>Ссылка с двумя иконками</Link>
-  <Link rightIcon={<CheckAIcon16Light />}>Ссылка с иконкой справа</Link>
-</Gapped>
-```
-
-### Ссылки, ведущие на внешние ресурсы
-
-_Примечание_:
-
-Если в контрол `Link` передана ссылка, ведущая на внешний ресурс, контрол `Link` неявно добавит атрибут `rel` со значением необходимым для внешних ссылок, при этом не трогая атрибут `target`.
-
-Открытие ссылки в новой вкладке остаётся на усмотрение разработчика.
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Link href="https://www.youtube.com/">
-    Откроется <span style={{ color: "#e3071c" }}>в этой</span> вкладке
-  </Link>
-  <Link target="_blank" href="https://www.youtube.com/">
-    Откроется <span style={{ color: "#3f9726" }}>в новой</span> вкладке
-  </Link>
-</Gapped>
-```
-
-### Состояние загрузки
-
-**Поведение**: если у ссылки есть иконка, она заменяется на спиннер, когда иконки две заменяется только левая.
-
-```jsx harmony
-import { Gapped, Button } from '@skbkontur/react-ui';
-import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
-
-const [isLoading, setIsLoading] = React.useState(false);
-
-<Gapped vertical gap={15}>
-  <Button onClick={() => setIsLoading(!isLoading)}>{isLoading ? "Прекратить загрузку!" : "Начать загрузку!"}</Button>
-  <Gapped gap={20}>
-    <Link loading={isLoading} icon={<CheckAIcon16Light />}>С иконкой слева</Link>
-    <Link loading={isLoading} icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>С двумя иконками</Link>
-    <Link loading={isLoading} rightIcon={<CheckAIcon16Light />}>С иконкой справа</Link>
-    <Link loading={isLoading}>Без иконки</Link>
-  </Gapped>
-</Gapped>
-```
-
-### Кастомное действие при нажатии
-
-```jsx harmony
-import { Toast } from '@skbkontur/react-ui';
-
-<Link onClick={() => Toast.push("Ты нажал на ссылку!")}>Ссылка с кастомным действием</Link>
-```
-
-### Проп `theme`
-
-```jsx harmony
-import { Link, Gapped } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Link theme={{linkColor: '#C00000'}}>Ok</Link>
-  <Link>Ok</Link>
-</Gapped>
-```
-
-
-### Кастомизация ссылки
-
-```jsx harmony
-import { Toast, Button } from "@skbkontur/react-ui";
-import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular"
-
-const textDecorationStyles = {
-  linkTextUnderlineOffset: '1px'
-}
-
-const underlineOnHoverStyles = {
-  linkTextDecorationColor: 'transparent',
-}
-
-const differentColorStyles = {
-  linkColor: 'blue',
-  linkHoverColor: 'blue',
-  linkActiveColor: 'blue',
-}
-
-const stringify = (styles) => {
-    return `${Object.entries(styles).map(([key, value]) => `${key}: "${value}"`).join(", ")}`
-}
-
-const copyStyles = (styles) => {
-  navigator.clipboard.writeText(stringify(styles));
-  Toast.push('Copied');
-}
-
-const tableStyle = {
-  borderCollapse: 'collapse',
-  width: '100%',
-};
-
-const tdStyle = {
-  border: '1px solid',
-  padding: '8px',
-};
-
-const renderExampleRow = (title, styles) => {
-    return (
-        <tr>
-          <td style={tdStyle}>{title}</td>
-          <td style={tdStyle}><Link theme={styles}>Link</Link></td>
-          <td style={tdStyle}>
-            <div style={{display: 'flex'}}>
-              <div style={{width: '80%', whiteSpace: 'pre-line'}}>{stringify(styles).replace(/, /g, '\n')}</div>
-              <Button icon={<CopyIcon16Regular />} use={'text'} onClick={() => copyStyles(styles)}/>
-            </div>
-          </td>
-        </tr>
-    )
-}
-
-<table style={tableStyle}>
-  <tr style={{textAlign: 'left'}}>
-    <th style={tdStyle}></th>
-    <th style={tdStyle}>Пример</th>
-    <th style={tdStyle}>Переменные темы</th>
-  </tr>
-  {renderExampleRow('Ссылка с подчеркиванием без отступа', textDecorationStyles)}
-  {renderExampleRow('Ссылка с подчеркиванием при наведении', underlineOnHoverStyles)}
-  {renderExampleRow('Изменение цвета ссылки', differentColorStyles)}
-</table>
-```

package/cjs/components/Loader/Loader.md

@@ -1,33 +0,0 @@
-### Базовый пример
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-const [isActive, setIsActive] = React.useState(true);
-
-<>
-  <Button onClick={() => setIsActive(!isActive)}>{isActive ? 'Остановить загрузку' : 'Продолжить загрузку'}</Button>
-  <Loader type="big" active={isActive}>
-    <h1>Yeah, and if you were the pope they'd be all, "Straighten your pope hat." And "Put on your good vestments."</h1>
-    <p>
-      No, I'm Santa Claus! I guess if you want children beaten, you have to do it yourself. We're also Santa Claus! Leela,
-      Bender, we're going grave robbing.
-    </p>
-    <p>
-      Are you crazy? I can't swallow that. Large bet on myself in round one. Hey, whatcha watching?
-      <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>
-      <em>It's okay, Bender.</em> I like cooking too.
-    </p>
-    <h2>Oh, I think we should just stay friends.</h2>
-    <p>
-      No argument here. And when we woke up, we had these bodies. You guys go on without me! I'm going to go… look for
-      more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is his wife
-      holding up? …To shreds, you say.
-    </p>
-    <ol>
-      <li>No! The kind with looting and maybe starting a few fires!</li>
-      <li>You are the last hope of the universe.</li>
-      <li>Hey, guess what you're accessories to.</li>
-    </ol>
-  </Loader>
-</>
-```

package/cjs/components/MaskedInput/MaskedInput.md

@@ -1,114 +0,0 @@
-### Проп `mask`
-
-Паттерн ввода. Пример с номером телефона.
-
-```jsx harmony
-const [value, setValue] = React.useState('');
-
-<>
-  <span>value: "{value}"</span>
-  <br />
-  <br />
-  <MaskedInput
-    mask="+7 (999) 999-99-99"
-    placeholder="Номер телефона"
-    value={value}
-    onValueChange={setValue}
-  />
-</>
-```
-
-### Проп `alwaysShowMask`
-
-Показывает маску всегда.
-
-```jsx harmony
-<MaskedInput mask="+7 (999) 999-99-99" alwaysShowMask />
-```
-
-### Проп `maskChar`
-
-Символом маски может быть любой символ.
-
-```jsx harmony
-const [value, setValue] = React.useState('');
-
-<>
-  <span>value: "{value}"</span>
-  <br />
-  <br />
-  <MaskedInput
-    mask="9999 9999 9999 9999"
-    maskChar="X"
-    placeholder="Номер карты"
-    alwaysShowMask
-    value={value}
-    onValueChange={setValue}
-  />
-</>
-```
-
-### Проп `formatChars`
-
-При необходимости можно настроить собственный словарь.
-
-```jsx harmony
-const [value, setValue] = React.useState('');
-
-<MaskedInput
-  mask="Hh:Mm:Ss"
-  alwaysShowMask
-  formatChars={{
-    H: '[0-2]',
-    h: value.startsWith('2') ? '[0-3]' : '[0-9]',
-    M: '[0-5]',
-    m: '[0-9]',
-    S: '[0-5]',
-    s: '[0-9]',
-  }}
-  value={value}
-  onValueChange={setValue}
-/>
-```
-
-### Проп `unmask`
-
-Можно сразу получать очищенный value, содержащий только введённый пользователем символы.
-
-```jsx harmony
-const [value, setValue] = React.useState('');
-
-<>
-  <span>value: "{value}"</span>
-  <br />
-  <br />
-  <MaskedInput
-    mask="+7 (999) 999-99-99"
-    unmask
-    alwaysShowMask
-    value={value}
-    onValueChange={setValue}
-  />
-</>
-```
-
-### Проп `unmask` с фигурными скобками
-
-Если обернуть фиксированные символы в фигурные скобки, то они попадут в `value` при `unmask = true`.
-
-```jsx harmony
-const [value, setValue] = React.useState('');
-
-<>
-  <span>value: "{value}"</span>
-  <br />
-  <br />
-  <MaskedInput
-    mask="+{7} (999) 999-99-99"
-    unmask
-    alwaysShowMask
-    value={value}
-    onValueChange={setValue}
-  />
-</>
-```

package/cjs/components/MenuFooter/MenuFooter.md

@@ -1,27 +0,0 @@
-### Базовый пример меню с заголовками
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  menuMaxHeight="10rem"
-  caption={<Button use="primary">Сотрудники компании</Button>}
-  >
-  <MenuItem>Вася</MenuItem>
-  <MenuItem>Петя</MenuItem>
-  <MenuItem>Маша</MenuItem>
-  <MenuFooter>Всего 3 человека</MenuFooter>
-</DropdownMenu>
-```
-
-### Размер
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped vertical>
-  <MenuFooter size={'small'}>Маленький</MenuFooter>
-  <MenuFooter size={'medium'}>Средний</MenuFooter>
-  <MenuFooter size={'large'}>Большой</MenuFooter>
-</Gapped>
-```

package/cjs/components/MenuHeader/MenuHeader.md

@@ -1,35 +0,0 @@
-### Базовый пример меню с заголовками
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  menuMaxHeight="10rem"
-  caption={<Button use="primary">Сотрудники компании</Button>}
-  >
-  <MenuHeader>Разработчики</MenuHeader>
-  <MenuItem>Вася</MenuItem>
-  <MenuItem>Петя</MenuItem>
-  <MenuItem>Маша</MenuItem>
-  <MenuHeader>Дизайнеры</MenuHeader>
-  <MenuItem>Галя</MenuItem>
-  <MenuItem>Гриша</MenuItem>
-  <MenuItem>Гена</MenuItem>
-  <MenuHeader>Продакты</MenuHeader>
-  <MenuItem>Валя</MenuItem>
-  <MenuItem>Аля</MenuItem>
-  <MenuItem>Артём</MenuItem>
-</DropdownMenu>
-```
-
-### Размер
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped vertical>
-  <MenuHeader size={'small'}>Маленький</MenuHeader>
-  <MenuHeader size={'medium'}>Средний</MenuHeader>
-  <MenuHeader size={'large'}>Большой</MenuHeader>
-</Gapped>
-```

package/cjs/components/MenuItem/MenuItem.md

@@ -1,139 +0,0 @@
-### Меню с базовыми элементами меню
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  caption={<Button use="primary">Открыть меню с базовыми элементами меню</Button>}
-  >
-  <MenuItem>Базовый элемент меню</MenuItem>
-  <MenuItem>Ещё один базовый элемент меню</MenuItem>
-  <MenuItem>И ещё один</MenuItem>
-</DropdownMenu>
-```
-
-### Disabled
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  caption={<Button use="primary">Открыть меню с базовыми и заблокированными элементами</Button>}
-  >
-  <MenuItem>Это базовый элемент меню</MenuItem>
-  <MenuItem disabled>А это заблокированный</MenuItem>
-  <MenuItem>А это снова базовый</MenuItem>
-  <MenuItem disabled>И снова заблокированный</MenuItem>
-  <MenuItem disabled>И вот ещё один заблокированный</MenuItem>
-</DropdownMenu>
-```
-
-### Запрет выделения
-В пункты меню можно передать проп `isNotSelectable`, чтобы запретить выделение и выбор этого пункта меню
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  caption={<Button use="primary">Открыть меню с базовыми и отключёнными элементами</Button>}
-  >
-  <MenuItem>Это базовый элемент меню</MenuItem>
-  <MenuItem isNotSelectable>А это отключённый</MenuItem>
-  <MenuItem>А это снова базовый</MenuItem>
-  <MenuItem isNotSelectable>И снова отключённый</MenuItem>
-  <MenuItem isNotSelectable>И вот ещё один отключённый</MenuItem>
-</DropdownMenu>
-```
-
-### Описание элементов
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-
-<DropdownMenu
-  caption={<Button use="primary">Открыть меню с причастными к Pied Piper</Button>}
-  >
-  <MenuItem comment="Системный инженер">Bertram Gilfoyle</MenuItem>
-  <MenuItem comment="Hooli CEO">Gavin Belson</MenuItem>
-  <MenuItem comment="Java-разработчик">Dinesh Chugtai</MenuItem>
-  <MenuItem comment="Основатель Pied Piper">Richard Hendricks</MenuItem>
-  <MenuItem comment="Владелец инкубатора">Erlich Bachman</MenuItem>
-</DropdownMenu>
-```
-
-### Иконки в элементах
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-import { TechPhoneSmartIcon16Regular } from '@skbkontur/icons/icons/TechPhoneSmartIcon/TechPhoneSmartIcon16Regular';
-import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';
-import { HandThumbDownIcon16Regular } from '@skbkontur/icons/icons/HandThumbDownIcon/HandThumbDownIcon16Regular';
-
-
-<DropdownMenu
-  caption={<Button use="primary">Открыть меню с иконками</Button>}
-  >
-  <MenuItem icon={<CheckAIcon16Regular />}>Базовый элемент меню c иконкой</MenuItem>
-  <MenuItem
-    disabled
-    icon={<HandThumbDownIcon16Regular />}
-    >
-    Отключённый элемент меню с иконкой
-  </MenuItem>
-  <MenuItem
-    icon={<TechPhoneSmartIcon16Regular />}
-    comment="А слева вы можете видеть икону 21-го века"
-    >
-     Элемент меню с описанием и иконкой
-  </MenuItem>
-</DropdownMenu>
-```
-
-### Проп href
-
-В элементы меню можно передавать проп `href`, чтобы превратить их в ссылку. Лучше выделять такие элементы иконками.
-
-```jsx harmony
-import { Button, MenuItem, DropdownMenu, MenuSeparator } from '@skbkontur/react-ui';
-import { ArrowUiCornerOutUpRightIcon } from '@skbkontur/icons/icons/ArrowUiCornerOutUpRightIcon';
-
-<DropdownMenu
-  caption={<Button use="primary">Открыть меню с ссылками</Button>}
-  >
-  <MenuItem
-    href="http://tech.skbkontur.ru/react-ui/"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    Начало документации
-  </MenuItem>
-  <MenuItem
-    href="https://github.com/skbkontur/retail-ui/graphs/contributors"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    Список прекрасных людей
-  </MenuItem>
-  <MenuSeparator />
-  <MenuItem
-    icon={< ArrowUiCornerOutUpRightIcon />}
-    href="https://guides.kontur.ru/"
-    target="_blank"
-    rel="noopener noreferrer"
-  >
-    Подробнее в Контур Гайдах
-  </MenuItem>
-</DropdownMenu>
-```
-
-### Размер
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped vertical>
-  <MenuItem size={'small'}>Маленький</MenuItem>
-  <MenuItem size={'medium'}>Средний</MenuItem>
-  <MenuItem size={'large'}>Большой</MenuItem>
-</Gapped>
-```

package/cjs/components/MenuSeparator/MenuSeparator.md

@@ -1,14 +0,0 @@
-### Меню с разделителями
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
-
-<DropdownMenu caption={<Button use="primary">Открыть меню с разделителями</Button>}>
-  <MenuItem>У меня есть разделитель</MenuItem>
-  <MenuSeparator />
-  <MenuItem>У меня тоже!</MenuItem>
-  <MenuSeparator />
-  <MenuItem>А у меня нет :(</MenuItem>
-  <MenuItem>Как и у меня :(</MenuItem>
-</DropdownMenu>;
-```