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

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/Toast/ToastStatic/ToastStatic.js

@@ -1,39 +0,0 @@
-var _ToastStatic;
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { globalObject } from '@skbkontur/global-object';
-import { Toast, ToastDataTids } from "../Toast";
-export var ToastStatic = function ToastStatic() {};
-_ToastStatic = ToastStatic;
-ToastStatic.push = function (notification, action, showTime, showCloseIcon) {
-  if (!_ToastStatic.node && globalObject.document) {
-    _ToastStatic.node = globalObject.document.createElement('div');
-    var body = globalObject.document.body;
-    if (!body) {
-      throw Error('There is no "body" element in "document"');
-    }
-    body.appendChild(_ToastStatic.node);
-    ReactDOM.render( /*#__PURE__*/
-    React.createElement(Toast, {
-      "data-tid": ToastDataTids.toastStatic,
-      ref: function ref(el) {
-        return _ToastStatic.instance = el;
-      }
-    }), _ToastStatic.node, function () {
-      return _ToastStatic._push(notification, action, showTime, showCloseIcon);
-    });
-  } else {
-    _ToastStatic._push(notification, action, showTime, showCloseIcon);
-  }
-};
-ToastStatic._push = function (notification, action, showTime, showCloseIcon) {
-  if (_ToastStatic.instance) {
-    _ToastStatic.instance.push(notification, action, showTime, showCloseIcon);
-  }
-};
-ToastStatic.close = function () {
-  if (_ToastStatic.instance) {
-    _ToastStatic.instance.close();
-  }
-};
-ToastStatic.instance = null;

package/components/Toast/ToastStatic/ToastStatic.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","ReactDOM","globalObject","Toast","ToastDataTids","ToastStatic","_ToastStatic","push","notification","action","showTime","showCloseIcon","node","document","createElement","body","Error","appendChild","render","toastStatic","ref","el","instance","_push","close"],"sources":["ToastStatic.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport type { Nullable } from '../../typings/utility-types';\n\nimport type { Action } from './Toast';\nimport { Toast, ToastDataTids } from './Toast';\n\nexport class ToastStatic {\n  public static push = (\n    notification: React.ReactNode,\n    action?: Nullable<Action>,\n    showTime?: number,\n    showCloseIcon?: boolean,\n  ) => {\n    if (!ToastStatic.node && globalObject.document) {\n      ToastStatic.node = globalObject.document.createElement('div');\n      const { body } = globalObject.document;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,\n        ToastStatic.node,\n        () => ToastStatic._push(notification, action, showTime, showCloseIcon),\n      );\n    } else {\n      ToastStatic._push(notification, action, showTime, showCloseIcon);\n    }\n  };\n\n  public static _push = (\n    notification: React.ReactNode,\n    action?: Nullable<Action>,\n    showTime?: number,\n    showCloseIcon?: boolean,\n  ) => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.push(notification, action, showTime, showCloseIcon);\n    }\n  };\n\n  public static close = () => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.close();\n    }\n  };\n\n  private static node: HTMLDivElement;\n  private static instance: Nullable<Toast> = null;\n}\n"],"mappings":"iBAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,QAAQ,MAAM,WAAW;AAChC,SAASC,YAAY,QAAQ,0BAA0B;;;;;AAKvD,SAASC,KAAK,EAAEC,aAAa,QAAQ,SAAS;;AAE9C,WAAaC,WAAW,YAAAA,YAAA,KA4CvBC,YAAA,GA5CYD,WAAW,CAAXA,WAAW;AACRE,IAAI,GAAG;AACnBC,YAA6B;AAC7BC,MAAyB;AACzBC,QAAiB;AACjBC,aAAuB;AACpB;EACH,IAAI,CAACN,YAAW,CAACO,IAAI,IAAIV,YAAY,CAACW,QAAQ,EAAE;IAC9CR,YAAW,CAACO,IAAI,GAAGV,YAAY,CAACW,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC7D,IAAQC,IAAI,GAAKb,YAAY,CAACW,QAAQ,CAA9BE,IAAI;IACZ,IAAI,CAACA,IAAI,EAAE;MACT,MAAMC,KAAK,CAAC,0CAA0C,CAAC;IACzD;IACAD,IAAI,CAACE,WAAW,CAACZ,YAAW,CAACO,IAAI,CAAC;;IAElCX,QAAQ,CAACiB,MAAM;MACblB,KAAA,CAAAc,aAAA,CAACX,KAAK,IAAC,YAAUC,aAAa,CAACe,WAAY,EAACC,GAAG,EAAE,SAAAA,IAACC,EAAE,UAAMhB,YAAW,CAACiB,QAAQ,GAAGD,EAAE,EAAE,EAAE,CAAC;MACxFhB,YAAW,CAACO,IAAI;MAChB,oBAAMP,YAAW,CAACkB,KAAK,CAACf,YAAY,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,aAAa,CAAC;IACxE,CAAC;EACH,CAAC,MAAM;IACLN,YAAW,CAACkB,KAAK,CAACf,YAAY,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,aAAa,CAAC;EAClE;AACF,CAAC,CAvBUN,WAAW;;AAyBRkB,KAAK,GAAG;AACpBf,YAA6B;AAC7BC,MAAyB;AACzBC,QAAiB;AACjBC,aAAuB;AACpB;EACH,IAAIN,YAAW,CAACiB,QAAQ,EAAE;IACxBjB,YAAW,CAACiB,QAAQ,CAACf,IAAI,CAACC,YAAY,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,aAAa,CAAC;EAC1E;AACF,CAAC,CAlCUN,WAAW;;AAoCRmB,KAAK,GAAG,YAAM;EAC1B,IAAInB,YAAW,CAACiB,QAAQ,EAAE;IACxBjB,YAAW,CAACiB,QAAQ,CAACE,KAAK,CAAC,CAAC;EAC9B;AACF,CAAC,CAxCUnB,WAAW;;;AA2CPiB,QAAQ,GAAoB,IAAI","ignoreList":[]}

package/components/Toast/ToastStatic/package.json

@@ -1,6 +0,0 @@
-{
-  "main": "../../../cjs/components/Toast/ToastStatic.js",
-  "module": "ToastStatic",
-  "types": "../ToastStatic.d.ts",
-  "sideEffects": false
-}

package/components/Toast/ToastStatic.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { Nullable } from '../../typings/utility-types';
-import type { Action } from './Toast';
-export declare class ToastStatic {
-    static push: (notification: React.ReactNode, action?: Nullable<Action>, showTime?: number, showCloseIcon?: boolean) => void;
-    static _push: (notification: React.ReactNode, action?: Nullable<Action>, showTime?: number, showCloseIcon?: boolean) => void;
-    static close: () => void;
-    private static node;
-    private static instance;
-}

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