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

package/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/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/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/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).

package/components/ScrollContainer/ScrollContainer.md

@@ -1,224 +0,0 @@
-### Базовый пример
-```jsx harmony
-function items(count) {
-  var items = [];
-  for (var i = 0; i < count; ++i) {
-    items.push(i);
-  }
-  return items;
-}
-
-var divStyle = {
-  display: 'inline-block',
-  border: '1px solid #f99',
-  height: 200,
-  margin: 1,
-  position: 'relative',
-  verticalAlign: 'top',
-  width: 200,
-};
-var absStyle = {
-  border: '1px solid',
-  boxSizing: 'border-box',
-  position: 'absolute',
-  width: '100%',
-};
-
-<div>
-  <div style={divStyle}>
-    <ScrollContainer>
-      {items(20).map((i) => (
-        <div key={i}>{i}</div>
-      ))}
-    </ScrollContainer>
-  </div>
-  <div style={{ ...divStyle, background: '#888' }}>
-    <ScrollContainer invert>
-      {items(20).map((i) => (
-        <div key={i}>{i}</div>
-      ))}
-    </ScrollContainer>
-  </div>
-  <div style={divStyle}>
-    <div style={absStyle}>
-      <ScrollContainer>
-        {items(3).map((i) => (
-          <div key={i}>{i}</div>
-        ))}
-      </ScrollContainer>
-    </div>
-  </div>
-  <div style={divStyle}>
-    <div style={absStyle}>
-      <ScrollContainer maxHeight={150}>
-        {items(30).map((i) => (
-          <div key={i}>{i}</div>
-        ))}
-      </ScrollContainer>
-    </div>
-  </div>
-</div>;
-```
-
-### Горизонтальный scrollbar
-
-```jsx harmony
-var divStyle = {
-  display: 'inline-block',
-  border: '1px solid #f99',
-  height: 200,
-  margin: 1,
-  position: 'relative',
-  verticalAlign: 'top',
-  width: 200,
-};
-var absStyle = {
-  border: '1px solid',
-  boxSizing: 'border-box',
-  position: 'absolute',
-  width: '100%',
-};
-
-function items(count) {
-  var items = [];
-  for (var i = 0; i < count; ++i) {
-    items.push(i);
-  }
-  return items;
-}
-
-var containerStyle = {
-  display: 'inline-block',
-  border: '1px solid #f99',
-  height: 200,
-  margin: 1,
-  width: 200,
-};
-
-var innerStyle = {
-  width: 400,
-};
-
-<div>
-  <div style={divStyle}>
-    <ScrollContainer>
-      {items(5).map((i) => (
-        <div style={innerStyle} key={i}>
-          {i}
-        </div>
-      ))}
-    </ScrollContainer>
-  </div>
-  <div style={{ ...divStyle, background: '#888' }}>
-    <ScrollContainer invert>
-      {items(20).map((i) => (
-        <div style={innerStyle} key={i}>
-          {i}
-        </div>
-      ))}
-    </ScrollContainer>
-  </div>
-  <div style={divStyle}>
-    <div style={absStyle}>
-      <ScrollContainer maxHeight={150}>
-        {items(3).map((i) => (
-          <div style={innerStyle} key={i}>
-            {i}
-          </div>
-        ))}
-      </ScrollContainer>
-    </div>
-  </div>
-  <div style={divStyle}>
-    <div style={absStyle}>
-      <ScrollContainer maxHeight={150} maxWidth={200}>
-        {items(30).map((i) => (
-          <div style={innerStyle} key={i}>
-            {i}
-          </div>
-        ))}
-      </ScrollContainer>
-    </div>
-  </div>
-</div>;
-```
-
-### Смещение скроллбара
-
-```jsx harmony
-const containerStyle = {
-  display: 'inline-block',
-  border: '1px solid #f99',
-  height: 200,
-  margin: 1,
-  width: 200,
-};
-
-const offsetY = {
-  top: 8,
-  bottom: 8,
-  right: 8,
-};
-
-<div style={containerStyle}>
-  <ScrollContainer offsetY={offsetY}>
-    {Array(30).fill(null).map((_,i) => (
-      <div key={i}>
-        {i}
-      </div>
-    ))}
-  </ScrollContainer>
-</div>
-```
-
-### Скрытие если нет активности пользователя
-Проп `showScrollBar` со значением `scroll` скрывает скроллбар при отсутствии активности пользователя. Задержку на скрытие скроллбара можно регулировать пропом `hideScrollBarDelay` (по умолчанию 500ms)
-
-```jsx harmony
-var divStyle = {
-  display: 'inline-block',
-  border: '1px solid #f99',
-  height: 200,
-  margin: 1,
-  position: 'relative',
-  verticalAlign: 'top',
-  width: 200,
-};
-<div style={divStyle}>
-  <ScrollContainer showScrollBar={'scroll'}>
-    {Array(30).fill(null).map((_,i) => (
-      <div key={i}>
-        {i}
-      </div>
-    ))}
-  </ScrollContainer>
-</div>
-```
-
-### Показ скролбара при наведении
-Проп `showScrollBar` со значением `hover` позволяет показывать скроллбар только когда курсор находится над скролл контейнером
-
-```jsx harmony
-var divStyle = {
-  display: 'inline-block',
-  border: '1px solid #f99',
-  height: 200,
-  margin: 1,
-  position: 'relative',
-  verticalAlign: 'top',
-  width: 200,
-};
-
-
-<span>
-  <div style={divStyle}>
-    <ScrollContainer showScrollBar={'hover'}>
-      {Array(30).fill(null).map((_,i) => (
-        <div key={i}>
-          {i}
-        </div>
-      ))}
-    </ScrollContainer>
-  </div>
-</span>
-```

package/components/Select/Select.md

@@ -1,113 +0,0 @@
-### Базовый пример
-
-```jsx harmony
-const [value, setValue] = React.useState();
-
-const items = [Select.staticElement(() => <Select.Item>Not
-  selectable</Select.Item>), 'One', 'Two', 'Three', Select.SEP, 'Four'];
-
-<Select items={items} value={value} onValueChange={setValue}/>;
-```
-
-### Запрет выделения и выбора
-В пункты меню можно передать проп `isNotSelectable`, чтобы запретить выделение и выбор этого пункта меню
-
-```jsx harmony
-
-const [value, setValue] = React.useState();
-
-const items = [<Select.Item isNotSelectable>Not selectable</Select.Item>, 'One', 'Two', 'Three', Select.SEP, 'Four'];
-
-<Select items={items} value={value} onValueChange={setValue} />
-```
-
-### Очистка значения
-Очистить значение в `Select`'е можно только с помощью `null`
-```jsx harmony
-import { Button, Group } from '@skbkontur/react-ui';
-
-const [value, setValue] = React.useState();
-
-const items = ['One', 'Two', 'Three', 'Four'];
-
-<Group>
-  <Select items={items} value={value} onValueChange={setValue} />
-  <Button onClick={() => setValue(null)}>Очистить</Button>
-</Group>
-```
-
-### Поле поиска
-
-```jsx harmony
-const [value, setValue] = React.useState();
-
-const items = ['One', 'Two', 'Three', Select.SEP, 'Four'];
-
-<Select items={items} value={value} onValueChange={setValue} search />;
-```
-
-### Пример использования пропа `_renderButton`:
-
-```jsx harmony
-import { Link } from '@skbkontur/react-ui';
-import { People3Icon16Regular } from '@skbkontur/icons/icons/People3Icon/People3Icon16Regular';
-
-const [value, setValue] = React.useState();
-
-const items = [Select.staticElement(() => <Select.Item>Not
-  selectable</Select.Item>), 'One', 'Two', 'Three', Select.SEP, 'Four'];
-
-const renderLinkButton = params => {
-  const linkProps = {
-    disabled: params.disabled,
-    icon: <People3Icon16Regular />,
-    _button: true,
-    _buttonOpened: params.opened,
-
-    onClick: params.onClick,
-    onKeyDown: params.onKeyDown,
-  };
-
-  return <Link {...linkProps}>{params.label}</Link>;
-};
-
-<Select
-  items={items}
-  value={value}
-  onValueChange={setValue}
-  _renderButton={renderLinkButton}
-/>;
-```
-
-### Локали по умолчанию
-
-```typescript static
-interface SelectLocale {
-  placeholder?: React.ReactNode;
-}
-
-const ru_RU = {
-  placeholder: 'Ничего не выбрано',
-};
-
-const en_GB = {
-  placeholder: 'Nothing selected',
-};
-```
-
-### Размер
-```jsx harmony
-import { Gapped } from '@skbkontur/react-ui';
-
-const [valueSmall, setValueSmall] = React.useState('Маленький');
-const [valueMedium, setValueMedium] = React.useState('Средний');
-const [valueLarge, setValueLarge] = React.useState('Большой');
-
-const items = ['Маленький', 'Средний', 'Большой'];
-
-<Gapped vertical>
-  <Select items={items} value={valueSmall} onValueChange={setValueSmall} size={'small'} />
-  <Select items={items} value={valueMedium} onValueChange={setValueMedium} size={'medium'} />
-  <Select items={items} value={valueLarge} onValueChange={setValueLarge} size={'large'} />
-</Gapped>
-```

package/components/SidePage/SidePage.md

@@ -1,65 +0,0 @@
-### Базовый пример
-```jsx harmony
-import { Button } from '@skbkontur/react-ui';
-
-const [opened, setOpened] = React.useState(false);
-
-function renderSidePage() {
-  return (
-    <SidePage onClose={close} blockBackground>
-      <SidePage.Header>Title</SidePage.Header>
-      <SidePage.Body>
-        <div
-          style={{
-            background: `repeating-linear-gradient(
-                                60deg,
-                                #808080,
-                                #808080 20px,
-                                #d3d3d3 20px,
-                                #d3d3d3 40px
-                              )`,
-            height: 600,
-            padding: '20px 0',
-          }}
-        >
-          <SidePage.Container>
-            <p>Use rxjs operators with react hooks</p>
-          </SidePage.Container>
-        </div>
-      </SidePage.Body>
-      <SidePage.Footer panel>
-        <Button onClick={close}>Close</Button>
-      </SidePage.Footer>
-    </SidePage>
-  );
-}
-
-function open() {
-  setOpened(true);
-}
-
-function close() {
-  setOpened(false);
-}
-
-<div>
-  {opened && renderSidePage()}
-  <Button onClick={open}>Open</Button>
-</div>;
-```
-
-### Локали по умолчанию
-
-```typescript static
-interface SidePageLocale {
-  closeButtonAriaLabel?: string;
-}
-
-const ru_RU = {
-  closeButtonAriaLabel: 'Закрыть модальное окно'
-}
-
-const en_GB = {
-  closeButtonAriaLabel: 'Close modal window'
-}
-```

package/components/SingleToast/SingleToast.md

@@ -1,36 +0,0 @@
-`<SingleToast>` можно добавить в единственном месте в проекте, а статические методы будут всегда использовать последний отрендеренный экземпляр `<Toast>`.
-
-_На внешний вид этого примера влияет следующий пример_
-### Базовый пример
-```jsx harmony
-import { Button, SingleToast } from '@skbkontur/react-ui';
-
-<div>
-  <SingleToast />
-  <Button onClick={() => SingleToast.push('Статический тост')}>
-    Показать статический тост
-  </Button>
-</div>
-```
-
-### Кастомизация
-`<SingleToast>` можно кастомизировать с помощью переменных темы для `toast`.
-```jsx harmony
-import { Button, SingleToast, ThemeContext, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';
-
-const rand = () => "Пример жёлтого тоста № " + Math.round(Math.random() * 100).toString();
-
-const pushToast = () => {
-  SingleToast.push(rand(), {
-    label: "Cancel",
-    handler: () => SingleToast.push("Canceled")
-  });
-};
-
-<div>
-  <SingleToast theme={{ toastBg: '#f1c40f' }} />
-  <Button onClick={pushToast}>
-    Показать тост с жёлтым фоном
-  </Button>
-</div>
-```

package/components/Spinner/Spinner.md

@@ -1,36 +0,0 @@
-### Базовый пример
-```jsx harmony
-import { Gapped, Spinner } from '@skbkontur/react-ui';
-
-const reactNodeCaption = (
-  <div>
-    <Spinner type="mini" caption={null} /> <span style={{ color: 'tomato', fontSize: '1.3em' }}>З</span>
-    агрузка
-  </div>
-);
-
-<Gapped>
-  <Spinner type="big" caption="big" />
-  <Spinner type="normal" caption="normal" />
-  <Spinner type="mini" caption="mini" />
-  <Spinner type="mini" dimmed caption="mini dimmed" />
-  <Spinner type="big" caption={reactNodeCaption} />
-  <Spinner type="big" caption="custom" width={8} color={'#538A1B'}/>
-</Gapped>;
-```
-
-### Локали по умолчанию
-
-```typescript static
-interface SpinnerLocale {
-  loading?: React.ReactNode;
-}
-
-const ru_RU = {
-  loading: 'Загрузка',
-};
-
-const en_GB = {
-  loading: 'Loading',
-};
-```