@skbkontur/react-ui 0.0.0-a5ba2462c5 → 0.0.0-a6f09fbded

package/cjs/components/ResponsiveLayout/ResponsiveLayout.md

@@ -0,0 +1,75 @@
+### Вспомогательный интерфейс
+```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/cjs/components/ScrollContainer/ScrollContainer.md

@@ -0,0 +1,224 @@
+### Базовый пример
+```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/cjs/components/Select/Select.md

@@ -0,0 +1,113 @@
+### Базовый пример
+
+```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/cjs/components/SidePage/SidePage.md

@@ -0,0 +1,65 @@
+### Базовый пример
+```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/cjs/components/SingleToast/SingleToast.md

@@ -0,0 +1,36 @@
+`<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/cjs/components/Spinner/Spinner.md

@@ -0,0 +1,36 @@
+### Базовый пример
+```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',
+};
+```

package/cjs/components/Sticky/Sticky.md

@@ -0,0 +1,28 @@
+### Базовый пример
+```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/cjs/components/Switcher/Switcher.md

@@ -0,0 +1,111 @@
+### Базовый пример
+```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}
+/>;
+```