@skbkontur/react-ui 0.0.0-dad43298ae → 0.0.0-db9f11da2a

package/cjs/components/Hint/Hint.md

@@ -1,86 +0,0 @@
-### Базовый пример
-
-```jsx harmony
-<Hint text="Подсказка">Базовая</Hint>
-```
-
-### Иконка
-
-```jsx harmony
-<Hint text="Редактирование">
-  <svg width="16" height="16" viewBox="0 0 16 16">
-    <path
-      fillRule="evenodd"
-      d="M13 12V12.998H8V12H13ZM3 13V11L9 4.99999L11 6.99999L5 13H3ZM13 5L11.5 6.5L9.5 4.5L11 3L13 5Z"
-      clipRule="evenodd"
-    />
-  </svg>
-</Hint>
-```
-
-### Сторона всплытия
-
-```jsx harmony
-<Hint pos={"left"} text="Подсказка слева">Всегда всплывает слева</Hint>
-```
-
-### Ограниченная ширина
-```jsx harmony
-<Hint
-  maxWidth="150px"
-  text="Очень много текста, рассказывающего про этот очень непонятный элемент"
-  >
-  Очень непонятный элемент
-</Hint>
-```
-
-### Открытие подсказки кнопкой
-
-```jsx harmony
-import { Button, Gapped } from '@skbkontur/react-ui';
-
-const [isOpen, setIsOpen] = React.useState(false);
-
-<Gapped>
-  <Hint opened={isOpen} manual text="Подсказка">Управляемая удалённо</Hint>
-  <Button onClick={() => setIsOpen(!isOpen)}>
-    {isOpen ? "Закрыть подсказку" : "Открыть подсказку"}
-  </Button>
-</Gapped>
-```
-
-### Всплытие без анимации
-
-```jsx harmony
-<Hint disableAnimations text={"Нет анимации :("}>Есть анимация?</Hint>
-```
-
-### Встроеная обёртка
-
-Подсказка должна отображаться даже на отключённых компонентах. Из коробки это работает только с контролами `react-ui`.
-
-Нативные элементы, поддерживающие атрибут `disabled`, отключают необходимые события мыши.
-В подобных случаях следуют использовать проп `useWrapper`:
-
-```jsx harmony
-<Hint useWrapper text="Подсказа всё равно отображается">
-  <button disabled>native button</button>
-</Hint>
-```
-
-### Кастомная обертка
-Т.к. встроённая обёртка это `<span>` без стилей, то она может работать некорректно в определённых ситуациях.
-В таких случаях стоит использовать собственную обётку:
-
-```jsx harmony
-<>
-  <Hint useWrapper text="Подсказа">
-    <button disabled style={{ height: 40 }}>useWrapper prop</button>
-  </Hint>
-  <Hint text="Подсказа">
-    <span style={{ display: 'inline-block' }}>
-      <button disabled style={{ height: 40 }}>custom wrapper</button>
-    </span>
-  </Hint>
-</>
-```

package/cjs/components/Input/Input.md

@@ -1,87 +0,0 @@
-### Базовый пример
-```jsx harmony
-import SearchIcon from '@skbkontur/react-icons/Search';
-
-<Input />;
-```
-
-### Иконка
-```jsx harmony
-import SearchIcon from '@skbkontur/react-icons/Search';
-
-<Input leftIcon={<SearchIcon />} />;
-```
-
-### Очистка значения
-Очистить значение в `Input`'е можно только с помощью пустой строки
-
-```jsx harmony
-import { Button, Group } from '@skbkontur/react-ui';
-
-const [value, setValue] = React.useState('Значение');
-
-<Group>
-  <Input value={value} onValueChange={setValue} />
-  <Button onClick={() => setValue('')}>Очистить</Button>
-</Group>
-```
-
-### Префикс
-
-```jsx harmony
-import SearchIcon from '@skbkontur/react-icons/Search';
-
-<Input
-  width={400}
-  prefix="https://kontur.ru/search?query="
-  rightIcon={<SearchIcon />}
-/>;
-```
-
-### type
-
-```jsx harmony
-import { Gapped, Input, Tooltip } from '@skbkontur/react-ui';
-
-<Gapped vertical gap={20}>
-  <Gapped gap={20}>
-    <Input type="password" />
-    <span>type = "password"</span>
-  </Gapped>
-
-  <Gapped gap={20}>
-    <Input type="number" />
-    <span>type = "number"</span>
-  </Gapped>
-
-  <Gapped gap={20}>
-    <Input type="tel" />
-    <span>type = "tel"</span>
-  </Gapped>
-
-  <Gapped gap={20}>
-    <Input type="search" />
-    <span>type = "search"</span>
-  </Gapped>
-
-  <Gapped gap={20}>
-    <Input type="time" />
-    <span>type = "time"</span>
-  </Gapped>
-
-  <Gapped gap={20}>
-    <Input type="date" />
-    <span>type = "date"</span>
-  </Gapped>
-
-  <Gapped gap={20}>
-    <Input type="url" />
-    <span>type = "url"</span>
-  </Gapped>
-
-  <Gapped gap={20}>
-    <Input type="email" />
-    <span>type = "email"</span>
-  </Gapped>
-</Gapped>
-```

package/cjs/components/Kebab/Kebab.md

@@ -1,306 +0,0 @@
-### Базовый пример
-
-```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
-import { Gapped, MenuItem, Toast } from '@skbkontur/react-ui';
-
-let style = {
-  alignItems: 'center',
-  border: '1px solid #dfdede',
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 20px',
-  width: 250,
-};
-
-let Card = ({ name, post }) => (
-  <div style={style}>
-    <div>
-      <h3>{name}</h3>
-      <p style={{ color: 'gray' }}>{post}</p>
-    </div>
-
-    <Kebab size="large">
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
-        Редактировать
-      </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
-        Удалить
-      </MenuItem>
-    </Kebab>
-  </div>
-);
-
-<Gapped gap={-1} wrap>
-  <Gapped gap={-1}>
-    <Card name="Баранова Анастасия" post="SEO GazPro" />
-    <Card name="Слуцкий Антон" post="Junior Front-Back Developer" />
-  </Gapped>
-  <Gapped gap={-1}>
-    <Card name="Иванов Иван" post="Head Ivan Co" />
-    <Card name="Сашка Егоров" post="KungFu Master" />
-  </Gapped>
-</Gapped>;
-```
-
-### Размер
-
-```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
-import { Gapped, MenuItem, Toast} from '@skbkontur/react-ui';
-
-let style = {
-  alignItems: 'center',
-  border: '1px solid #dfdede',
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 20px',
-  width: 230,
-};
-
-let Card = ({ title, size }) => (
-  <div style={style}>
-    <div>
-      <h3>{title}</h3>
-    </div>
-
-    <Kebab size={size}>
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
-        Редактировать
-      </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
-        Удалить
-      </MenuItem>
-    </Kebab>
-  </div>
-);
-
-<Gapped>
-  <Card title="Маленький кебаб" size="small" />
-  <Card title="Средний кебаб" size="medium" />
-  <Card title="Большой кебаб" size="large" />
-</Gapped>
-```
-
-### Кебаб-меню с выпадашкой слева
-
-```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
-import { MenuItem, Toast } from '@skbkontur/react-ui';
-
-let style = {
-  alignItems: 'center',
-  border: '1px solid #dfdede',
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 20px',
-  width: 250,
-};
-
-
-let Card = ({ title }) => (
-  <div style={style}>
-    <div>
-      <h3>{title}</h3>
-    </div>
-
-    <Kebab positions={['left middle']} size="large">
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
-        Редактировать
-      </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
-        Удалить
-      </MenuItem>
-    </Kebab>
-  </div>
-);
-
-<Card title="С выпадашкой слева" />
-```
-
-### Кастомное действие при открытии
-
-```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
-import { MenuItem, Toast } from '@skbkontur/react-ui';
-
-let style = {
-  alignItems: 'center',
-  border: '1px solid #dfdede',
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 20px',
-  width: 250,
-};
-
-let Card = ({ title }) => (
-  <div style={style}>
-    <div>
-      <h3>{title}</h3>
-    </div>
-
-    <Kebab
-      onOpen={() => Toast.push('Кебаб-меню открылось!')}
-      size="large"
-      >
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
-        Редактировать
-      </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
-        Удалить
-      </MenuItem>
-    </Kebab>
-  </div>
-);
-
-<Card title="С кастомным действием" />
-```
-
-### Иконка и автовыравнивание
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator, Kebab } from '@skbkontur/react-ui';
-import OkIcon from '@skbkontur/react-icons/Ok';
-
-<Kebab>
-  <MenuHeader>MenuHeader</MenuHeader>
-  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
-  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
-  <MenuItem>MenuItem3</MenuItem>
-</Kebab>;
-```
-
-### Иконка и отключенное автовыравнивание
-
-```jsx harmony
-import { Button, MenuHeader, MenuItem, MenuSeparator, Kebab } from '@skbkontur/react-ui';
-import OkIcon from '@skbkontur/react-icons/Ok';
-
-<Kebab preventIconsOffset>
-  <MenuHeader>MenuHeader</MenuHeader>
-  <MenuItem icon={<OkIcon />}>MenuItem1</MenuItem>
-  <MenuItem icon={<OkIcon />}>MenuItem2</MenuItem>
-  <MenuItem>MenuItem3</MenuItem>
-</Kebab>
-```
-
-### Отключенное кебаб-меню
-
-```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
-import { MenuItem, Toast } from '@skbkontur/react-ui';
-
-let style = {
-  alignItems: 'center',
-  border: '1px solid #dfdede',
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 20px',
-  width: 250,
-};
-
-let Card = ({ title }) => (
-  <div style={style}>
-    <div>
-      <h3>{title}</h3>
-    </div>
-
-    <Kebab disabled size="large">
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
-        Редактировать
-      </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
-        Удалить
-      </MenuItem>
-    </Kebab>
-  </div>
-);
-
-<Card title="Не нажимается :(" />
-```
-
-### Отключенная анимация
-
-```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
-import { MenuItem, Toast } from '@skbkontur/react-ui';
-
-let style = {
-  alignItems: 'center',
-  border: '1px solid #dfdede',
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 20px',
-  width: 250,
-};
-
-let Card = ({ title }) => (
-  <div style={style}>
-    <div>
-      <h3>{title}</h3>
-    </div>
-
-    <Kebab disableAnimations size="large">
-      <MenuItem icon={<EditIcon />} onClick={() => Toast.push('Отредактировано')}>
-        Редактировать
-      </MenuItem>
-      <MenuItem icon={<TrashIcon />} onClick={() => Toast.push('Удалено')}>
-        Удалить
-      </MenuItem>
-    </Kebab>
-  </div>
-);
-
-<Card title="Без анимации" />
-```
-
-### Высота
-
-```jsx harmony
-import EditIcon from '@skbkontur/react-icons/Edit';
-import TrashIcon from '@skbkontur/react-icons/Trash';
-import { MenuItem, Toast } from '@skbkontur/react-ui';
-
-let style = {
-  alignItems: 'center',
-  border: '1px solid #dfdede',
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 20px',
-  width: 250,
-};
-
-let Card = ({ title }) => (
-  <div style={style}>
-    <div>
-      <h3>{title}</h3>
-    </div>
-
-    <Kebab
-      menuMaxHeight="100px"
-      size="large"
-      >
-      <MenuItem>
-        Действие
-      </MenuItem>
-      <MenuItem>
-        И ещё одно
-      </MenuItem>
-      <MenuItem>
-        Ещё действие
-      </MenuItem>
-      <MenuItem>
-        И последнее действие
-      </MenuItem>
-    </Kebab>
-  </div>
-);
-
-<Card title="С заданной высотой" />
-```

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>
-</>
-```