@skbkontur/react-ui 5.3.0 → 5.3.2

package/components/Sticky/Sticky.md

@@ -1,28 +0,0 @@
-### Базовый пример
-```jsx harmony
-const style = {
-  padding: 10,
-  background: '#f99',
-};
-
-let stop = null;
-
-<div>
-  <Sticky side="top" getStop={() => stop}>
-    {fixed => (
-      <div style={style}>
-        Small loan of a million dollars
-        {fixed ? ' fixed' : <div>not fixed</div>}
-      </div>
-    )}
-  </Sticky>
-  Great
-  <div style={{ height: 1000 }} />
-  <div ref={el => (stop = el)} style={{ borderTop: '1px solid' }} />
-  <div style={{ height: 1000 }} />
-  <Sticky side="bottom" getStop={() => stop} offset={20}>
-    <div style={style}>Make America Great Again</div>
-  </Sticky>
-  <div style={{ height: 100 }} />
-</div>;
-```

package/components/Switcher/Switcher.md

@@ -1,111 +0,0 @@
-### Базовый пример
-```jsx harmony
-const [value, setValue] = React.useState();
-
-<Switcher
-  caption="Switch the switcher"
-  items={['One', 'Two', 'Three']}
-  value={value}
-  onValueChange={setValue}
-/>;
-```
-
-### items в виде объектов
-Случай, когда `items` принимает объект типа `{ label: string, value: string }`
-
-```jsx harmony
-const [value, setValue] = React.useState();
-const items = [
-  {
-    label: 'One',
-    value: '111',
-  },
-  {
-    label: 'Two',
-    value: '222',
-  },
-  {
-    label: 'Three',
-    value: '333',
-  }
-];
-
-<Switcher
-  caption="Switch the switcher"
-  items={items}
-  value={value}
-  onValueChange={setValue}
-/>;
-```
-
-### Кастомизация кнопки
-Вариант `items` с полем `buttonProps`, который позволяет кастомизировать кнопку
-
-```jsx harmony
-const [value, setValue] = React.useState();
-const items = [
-  {
-    label: 'One',
-    value: '111',
-    buttonProps: {
-      'data-tid': "1-1-1",
-      disabled: true,
-    }
-  },
-  {
-    label: 'Three',
-    value: '333',
-    buttonProps: {
-      'data-tid': "1-1-1",
-      use: "primary",
-    }
-  },
-  {
-    label: 'Two',
-    value: '222',
-    buttonProps: {
-      'data-tid': "1-1-1",
-      arrow: true,
-    }
-  }
-];
-
-<Switcher
-  caption="Switch the switcher"
-  items={items}
-  value={value}
-  onValueChange={setValue}
-/>;
-```
-
-### Кастомизация items
-Пример с методом `renderItem` для кастомизации `items`:
-
-```jsx harmony
-import {Hint, Tooltip} from '@skbkontur/react-ui';
-
-const [value, setValue] = React.useState();
-const items = ['One', 'Two', 'Three'];
-
-const renderItem = (label, value, buttonProps, renderDefault) => {
-  if (value === 'One') {
-    return <Hint pos="bottom" text="Подсказка" opened manual>{renderDefault()}</Hint>;
-  }
-  if (value === 'Three') {
-    return (
-      <Tooltip pos="right middle" trigger="opened" render={() => 'Тултип'}>
-        {renderDefault()}
-      </Tooltip>
-    );
-  }
-  return renderDefault();
-}
-
-<Switcher
-  caption="Switch the switcher"
-  items={items}
-  value={value}
-  onValueChange={setValue}
-  renderItem={renderItem}
-/>;
-```

package/components/Tabs/Tab.md

@@ -1,73 +0,0 @@
-У компонента `<Tabs.Tab />` есть несколько визуальных состояний, в которых компонент может находиться: `primary`, `success`, `warning` и `error`. Чтобы перевести контрол в нужное состояние передайте компоненту булевый проп с соответсвующим названием.
-
-### Кастомизация
-Используя переменные `tabColorPrimary`, `tabColorSuccess`, `tabColorWarning` и `tabColorError` можно изменить активный цвет состояния, а библиотека автоматически подберёт цвет подчёркивания при наведении.
-```jsx harmony
-import { ThemeContext, ThemeFactory, Button, Tabs } from '@skbkontur/react-ui';
-
-const getRandomColor = () => '#' + Math.random().toString(16).substr(-6);
-const updateColors = () => {
-  return {
-    tabColorPrimary: getRandomColor(),
-    tabColorSuccess: getRandomColor(),
-    tabColorWarning: getRandomColor(),
-    tabColorError: getRandomColor(),
-  }
-};
-
-const [activeBase, setActiveBase] = React.useState('error');
-const [activeRandom, setActiveRandom] = React.useState('error');
-const [colors, setColors] = React.useState(updateColors());
-
-<>
-  <p style={{ fontSize: '17px' }}>C цветами по умолчанию</p>
-  <Tabs value={activeBase} onValueChange={setActiveBase}>
-    <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
-    <Tabs.Tab success id="success">Success</Tabs.Tab>
-    <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
-    <Tabs.Tab error id="error">Error</Tabs.Tab>
-  </Tabs>
-
-  <p style={{ fontSize: '17px' }}>Со случайным основным цветом</p>
-  <div style={{ display: 'inline-flex', flexDirection: 'column', justifyContent: 'space-between', height: '100px' }}>
-    <ThemeContext.Consumer>
-      {(theme) => {
-        return (
-          <ThemeContext.Provider
-            value={ThemeFactory.create(colors,theme)}
-          >
-            <Tabs value={activeRandom} onValueChange={setActiveRandom}>
-            <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
-            <Tabs.Tab success id="success">Success</Tabs.Tab>
-            <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
-            <Tabs.Tab error id="error">Error</Tabs.Tab>
-          </Tabs>
-          </ThemeContext.Provider>
-        );
-      }}
-    </ThemeContext.Consumer>
-    <Button onClick={() => setColors(updateColors)}>Получить новый набор цветов</Button>
-  </div>
-</>
-```
-
-### Изменение корневого компонента Tab
-С помощью пропа `component` можно изменять корневой элемент `<Tab />`.
-
-Проп может принимать: компоненты, функции и строки.
-```jsx harmony
-import { Tabs } from '@skbkontur/react-ui';
-
-const [active, setActive] = React.useState('/fuji');
-
-const NavLink = props => <a {...props} />;
-
-<Tabs value={active} onValueChange={setActive}>
-  {/** Кастомный компонент **/}
-  <Tabs.Tab  component={(props) => <NavLink {...props} />} id="/fuji">🌋 Fuji</Tabs.Tab>
-  {/** Функция **/}
-  <Tabs.Tab component={(props) => <a {...props} />} id="/tahat">⛰ Tahat</Tabs.Tab>
-  {/** Строка **/}
-  <Tabs.Tab component="a" id="/alps">🗻 Alps</Tabs.Tab>
-</Tabs>;
-```

package/components/Tabs/Tabs.md

@@ -1,54 +0,0 @@
-### Базовый пример
-```jsx harmony
-const [active, setActive] = React.useState('fuji');
-
-<Tabs value={active} onValueChange={setActive}>
-  <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
-  <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
-  <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
-</Tabs>;
-```
-
-### Расположение табов
-Компонент может отображать табы двумя способами: горизонтально (по умолчанию) и вертикально.
-```jsx harmony
-const [active, setActive] = React.useState('fuji');
-
-<Tabs vertical value={active} onValueChange={setActive}>
-  <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
-  <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
-  <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
-</Tabs>;
-```
-
-### Размер
-```jsx harmony
-const [active, setActive] = React.useState('fuji');
-const renderCaption = (caption) => <span style={{display: "inline-block", width: 60}}>{caption}</span>;
-<div>
-  <div>
-    {renderCaption("small")}
-    <Tabs value={active} onValueChange={setActive} size="small">
-      <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
-      <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
-      <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
-    </Tabs>
-  </div>
-  <div>
-    {renderCaption("medium")}
-    <Tabs value={active} onValueChange={setActive} size="medium">
-      <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
-      <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
-      <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
-    </Tabs>
-  </div>
-  <div>
-    {renderCaption("large")}
-    <Tabs value={active} onValueChange={setActive} size="large">
-      <Tabs.Tab id="fuji">🌋 Fuji</Tabs.Tab>
-      <Tabs.Tab id="tahat">⛰ Tahat</Tabs.Tab>
-      <Tabs.Tab id="alps">🗻 Alps</Tabs.Tab>
-    </Tabs>
-  </div>
-</div>;
-```

package/components/Textarea/Textarea.md

@@ -1,58 +0,0 @@
-### Базовый пример
-```jsx harmony
-const [value, setValue] = React.useState('');
-
-<Textarea
-  value={value}
-  onValueChange={setValue}
-  autoResize
-  placeholder="Through faith we can reign in every area of life"
-/>;
-```
-
-### Очистка значения
-Очистить значение в `Textarea` можно только с помощью пустой строки
-
-```jsx harmony
-import { Group, Button } from '@skbkontur/react-ui';
-
-const [value, setValue] = React.useState('Значение');
-
-<Group>
-  <Textarea
-    value={value}
-    onValueChange={setValue}
-    autoResize
-    rows={1}
-    placeholder="Плейсхолдер"
-  />
-  <Button style={{ height: '52px' }} onClick={() => setValue('')}>Очистить значение</Button>
-</Group>
-```
-
-### Счетчик введенных символов
-
-```jsx harmony
-const [value, setValue] = React.useState('');
-
-<Textarea
-  value={value}
-  onValueChange={setValue}
-  placeholder="Счетчик появляется при фокусе"
-  lengthCounter={10}
-  showLengthCounter
-  counterHelp="Hello 👋"
-/>;
-```
-
-### Размер
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped vertical>
-  <Textarea size={'small'} value={'Маленький'} autoResize rows={1} />
-  <Textarea size={'medium'} value={'Средний'} autoResize rows={1} />
-  <Textarea size={'large'} value={'Большой'} autoResize rows={1} />
-</Gapped>
-```

package/components/Toast/Toast.md

@@ -1,69 +0,0 @@
-### Вызов статических методов
-
-```jsx harmony
-import { Button, Toast } from '@skbkontur/react-ui';
-
-function showComplexNotification() {
-  Toast.push('Successfully saved', {
-    label: 'Cancel',
-    handler: () => Toast.push('Canceled'),
-  });
-}
-
-<Button onClick={showComplexNotification}>Show notification</Button>;
-```
-
-### Кастомный showTime
-
-```jsx harmony
-import { Button, Toast } from '@skbkontur/react-ui';
-
-function showComplexNotification() {
-  Toast.push('Successfully saved', {
-    label: 'Cancel',
-    handler: () => Toast.push('Canceled'),
-  }, 15000);
-}
-
-<Button onClick={showComplexNotification}>Show notification</Button>;
-```
-
-### Кастомный showTime без action
-
-
-```jsx harmony
-import { Button, Toast } from '@skbkontur/react-ui';
-
-function showComplexNotification() {
-  Toast.push('Successfully saved', null, 15000);
-}
-
-<Button onClick={showComplexNotification}>Show notification</Button>;
-```
-
-### Использование `ref`
-
-```jsx harmony
-import { Button, Toast } from '@skbkontur/react-ui';
-
-class Toaster extends React.Component {
-  showNotification() {
-    this.notifier.push('Successfully');
-  }
-
-  render() {
-    return (
-      <div>
-        <Toast
-          ref={el => {
-            this.notifier = el;
-          }}
-        />
-        <Button onClick={() => this.showNotification()}>Show notification</Button>
-      </div>
-    );
-  }
-}
-
-<Toaster />;
-```

package/components/Toggle/Toggle.md

@@ -1,110 +0,0 @@
-### Базовый пример
-
-```jsx harmony
-const [checked, setChecked] = React.useState(false);
-
-<Toggle checked={checked} onValueChange={setChecked}>
-  {checked ? 'On' : 'Off'}
-</Toggle>
-```
-
-### Тогл включенный по умолчанию
-
-```jsx harmony
-<Toggle defaultChecked>
-  Включен по умолчанию
-</Toggle>
-```
-
-### Надпись слева от переключателя
-
-```jsx harmony
-const [checked, setChecked] = React.useState(false);
-
-<Toggle checked={checked} onValueChange={setChecked} captionPosition="left">
-  Показывать уведомления
-</Toggle>
-```
-
-### Тогл с внешним `<label/>`
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-const [checked, setChecked] = React.useState(false);
-
-<Gapped>
-  <Toggle id="toggle-1" checked={checked} onValueChange={setChecked}/>
-  <label htmlFor="toggle-1">Внешний label</label>
-</Gapped>
-```
-
-### Получение фокуса после загрузки страницы
-
-```jsx harmony
-<Toggle autoFocus>
-  Сразу с фокусом
-</Toggle>
-```
-
-### Стили
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped gap="20px">
-  <Toggle warning>
-    Warning
-  </Toggle>
-  <Toggle error>
-    Error
-  </Toggle>
-  <Toggle loading>
-    Loading
-  </Toggle>
-  <Toggle disabled>
-    Disabled
-  </Toggle>
-</Gapped>
-```
-
-### Размер
-
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-<Gapped vertical>
-  <Toggle size="small">
-    Маленький
-  </Toggle>
-  <Toggle size="medium">
-    Средний
-  </Toggle>
-  <Toggle size="large">
-    Большой
-  </Toggle>
-</Gapped>
-```
-
-### Кастомное действие при получении и потере фокуса
-
-```jsx harmony
-import { Toast } from '@skbkontur/react-ui';
-
-<Toggle
-  onFocus={() => Toast.push('Я получил фокус!')}
-  onBlur={() => Toast.push('И потерял его...')}
-  >
-  С кастомными действиями при фокусе и его потере
-</Toggle>
-```
-
-### Кастомное действие при переключении
-
-```jsx harmony
-import { Toast } from '@skbkontur/react-ui';
-
-<Toggle onChange={() => Toast.push("Запускаю кастомное действие")}>
-  Кастомное действие при переключении
-</Toggle>
-```

package/components/Token/Token.md

@@ -1,48 +0,0 @@
-### Базовый пример
-
-```jsx harmony
-import { Token } from '@skbkontur/react-ui';
-
-<Token>Example</Token>;
-```
-
-### Состояние валидации
-
-```jsx harmony
-import { Gapped, Token } from '@skbkontur/react-ui';
-
-<Gapped gap={20} vertical>
-  <Gapped gap={10}>
-    <Token>Correct</Token>
-    <Token warning>Warned</Token>
-    <Token error>Errored</Token>
-  </Gapped>
-  <Gapped gap={10}>
-    <Token isActive>Correct</Token>
-    <Token isActive warning>
-      Warned
-    </Token>
-    <Token isActive error>
-      Errored
-    </Token>
-  </Gapped>
-</Gapped>;
-```
-
-### Размер
-
-```jsx harmony
-import { Gapped, Token } from '@skbkontur/react-ui';
-
-<Gapped vertical>
-  <Token size="small">
-    Маленький
-  </Token>
-  <Token size="medium">
-    Средний
-  </Token>
-  <Token size="large">
-    Большой
-  </Token>
-</Gapped>
-```