@skbkontur/react-ui 0.0.0-a18e664e8f → 0.0.0-a2ba201dd3

package/internal/ThemePlayground/Playground/Playground.js

@@ -0,0 +1,346 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import SearchIcon from '@skbkontur/react-icons/Search';
+import LinkIcon from '@skbkontur/react-icons/Link';
+import OkIcon from '@skbkontur/react-icons/Ok';
+import ErrorIcon from '@skbkontur/react-icons/Error';
+import TrashIcon from '@skbkontur/react-icons/Trash';
+import HelpDotIcon from '@skbkontur/react-icons/HelpDot';
+import { Button } from "../../../components/Button";
+import { Tabs } from "../../../components/Tabs";
+import { Gapped } from "../../../components/Gapped";
+import { Link } from "../../../components/Link";
+import { Input } from "../../../components/Input";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { Tooltip } from "../../../components/Tooltip";
+import { Sticky } from "../../../components/Sticky";
+import { isTestEnv } from "../../../lib/currentEnvironment";
+import { cx } from "../../../lib/theming/Emotion";
+import { FileUploader } from "../../../components/FileUploader";
+import { ThemeType } from "../constants";
+import { TokenInputPlayground } from "../TokenInputPlayground";
+import { DatePickerPlayground } from "../AnotherInputsPlayground";
+import { TogglePlayground } from "../TogglePlayground";
+import { SwitcherPlayground } from "../SwitcherPlayground";
+import { FxInputPlayground } from "../FxInputPlayground";
+import { CurrencyInputPlayground } from "../CurrencyInputPlayground";
+import { getComponentsFromPropsList } from "../helpers";
+import { CheckboxPlayground } from "../CheckboxPlayground";
+import { RadioPlayground } from "../RadioPlayground";
+import { PagingPlayground } from "../PagingPlayground";
+import { HintPlayground } from "../HintPlayground";
+import { ComponentsGroup } from "../ComponentsGroup";
+import { styles } from "../Playground.styles";
+import { SizesGroup } from "../SizesGroup";
+var useSticky = !isTestEnv;
+export var Playground = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Playground, _React$Component);
+
+  function Playground() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.stopEl = /*#__PURE__*/React.createRef();
+
+    _this.renderTabsGroup = function () {
+      return useSticky ? /*#__PURE__*/React.createElement(Sticky, {
+        side: 'top',
+        getStop: _this.getStickyStop
+      }, _this.renderTabs()) : _this.renderTabs();
+    };
+
+    _this.getCurrentTab = function () {
+      switch (_this.props.currentThemeType) {
+        case ThemeType.Dark:
+          return ThemeType.Dark;
+
+        case ThemeType.FlatOld:
+          return ThemeType.FlatOld;
+
+        case ThemeType.DefaultOld:
+          return ThemeType.DefaultOld;
+
+        case ThemeType.Theme2022:
+          return ThemeType.Theme2022;
+
+        case ThemeType.Theme2022Dark:
+          return ThemeType.Theme2022Dark;
+
+        default:
+          return ThemeType.Default;
+      }
+    };
+
+    _this.renderSizesGroup = function () {
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'Размеры',
+        theme: _this.theme
+      }, /*#__PURE__*/React.createElement(SizesGroup, {
+        size: 'small'
+      }), /*#__PURE__*/React.createElement(SizesGroup, {
+        size: 'medium'
+      }), /*#__PURE__*/React.createElement(SizesGroup, {
+        size: 'large'
+      }));
+    };
+
+    _this.renderLinksGroup = function () {
+      var propsList = [{
+        icon: /*#__PURE__*/React.createElement(LinkIcon, null),
+        children: 'Enabled'
+      }, {
+        icon: /*#__PURE__*/React.createElement(OkIcon, null),
+        use: 'success',
+        children: 'Success'
+      }, {
+        icon: /*#__PURE__*/React.createElement(ErrorIcon, null),
+        use: 'danger',
+        children: 'Danger'
+      }, {
+        icon: /*#__PURE__*/React.createElement(TrashIcon, null),
+        use: 'grayed',
+        children: 'Grayed'
+      }, {
+        icon: /*#__PURE__*/React.createElement(TrashIcon, null),
+        children: 'Disabled',
+        disabled: true
+      }];
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'Ссылки',
+        theme: _this.theme
+      }, /*#__PURE__*/React.createElement(Gapped, {
+        wrap: true,
+        verticalAlign: "middle",
+        gap: 10
+      }, getComponentsFromPropsList( /*#__PURE__*/React.createElement(Link, null), propsList)));
+    };
+
+    _this.renderButtonsGroup = function () {
+      var propsList = [{
+        children: 'Default'
+      }, {
+        children: 'Primary',
+        use: 'primary'
+      }, {
+        children: 'Danger',
+        use: 'danger'
+      }, {
+        children: 'Pay',
+        use: 'pay'
+      }, {
+        children: 'Success',
+        use: 'success'
+      }, {
+        children: 'Disabled',
+        disabled: true
+      }, {
+        children: 'Back',
+        arrow: 'left',
+        size: 'medium',
+        width: 110
+      }, {
+        children: 'Forward',
+        arrow: true,
+        size: 'medium',
+        use: 'primary',
+        width: 110
+      }, {
+        children: 'Loading',
+        size: 'medium',
+        loading: true
+      }];
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'Кнопки',
+        theme: _this.theme
+      }, getComponentsFromPropsList( /*#__PURE__*/React.createElement(Button, {
+        width: 120,
+        size: 'small'
+      }), propsList));
+    };
+
+    _this.renderInputsGroup = function () {
+      var propsList = [{
+        placeholder: 'Enabled'
+      }, {
+        placeholder: 'Error',
+        error: true
+      }, {
+        placeholder: 'Warning',
+        warning: true
+      }, {
+        placeholder: 'Disabled',
+        disabled: true
+      }];
+      var fromProps = getComponentsFromPropsList( /*#__PURE__*/React.createElement(Input, {
+        width: 120
+      }), propsList);
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'Поле ввода',
+        theme: _this.theme
+      }, /*#__PURE__*/React.createElement(Input, {
+        width: 380,
+        prefix: "https://kontur.ru/search?query=",
+        rightIcon: /*#__PURE__*/React.createElement(SearchIcon, null)
+      }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Gapped, {
+        gap: 10
+      }, fromProps)));
+    };
+
+    _this.renderTokenInputsGroup = function () {
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'Поле с токеном',
+        theme: _this.theme
+      }, /*#__PURE__*/React.createElement(TokenInputPlayground, null));
+    };
+
+    _this.renderOtherInputsGroup = function () {
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'Прочие поля',
+        theme: _this.theme
+      }, /*#__PURE__*/React.createElement(CurrencyInputPlayground, null), /*#__PURE__*/React.createElement(FxInputPlayground, null), /*#__PURE__*/React.createElement(DatePickerPlayground, null));
+    };
+
+    _this.renderSwitchersGroup = function () {
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'Переключатели',
+        theme: _this.theme
+      }, /*#__PURE__*/React.createElement(SwitcherPlayground, null));
+    };
+
+    _this.renderControlsGroup = function () {
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'Радио, чекбоксы',
+        theme: _this.theme
+      }, /*#__PURE__*/React.createElement(Gapped, {
+        verticalAlign: 'top',
+        gap: 60
+      }, /*#__PURE__*/React.createElement(CheckboxPlayground, null), /*#__PURE__*/React.createElement(RadioPlayground, null), /*#__PURE__*/React.createElement(TogglePlayground, null)));
+    };
+
+    _this.renderHintsGroup = function () {
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'Тултип',
+        theme: _this.theme
+      }, /*#__PURE__*/React.createElement(HintPlayground, null));
+    };
+
+    _this.renderTooltip = function () {
+      var tooltipContent = function tooltipContent() {
+        return /*#__PURE__*/React.createElement("div", {
+          className: styles.tooltipContent()
+        }, 'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно');
+      };
+
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'Тултип',
+        theme: _this.theme
+      }, /*#__PURE__*/React.createElement(Tooltip, {
+        render: tooltipContent,
+        pos: "right middle",
+        trigger: 'opened',
+        disableAnimations: true
+      }, /*#__PURE__*/React.createElement(Link, {
+        icon: /*#__PURE__*/React.createElement(HelpDotIcon, null)
+      })));
+    };
+
+    _this.renderPaging = function () {
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'Пейджинг',
+        theme: _this.theme
+      }, /*#__PURE__*/React.createElement(PagingPlayground, null));
+    };
+
+    _this.renderFileUploader = function () {
+      return /*#__PURE__*/React.createElement(ComponentsGroup, {
+        title: 'FileUploader',
+        theme: _this.theme
+      }, /*#__PURE__*/React.createElement(FileUploader, {
+        multiple: true
+      }));
+    };
+
+    _this.renderStickyStopElement = function () {
+      return /*#__PURE__*/React.createElement("div", {
+        ref: _this.stopEl,
+        style: {
+          height: 50
+        }
+      });
+    };
+
+    _this.getStickyStop = function () {
+      return _this.stopEl.current;
+    };
+
+    return _this;
+  }
+
+  var _proto = Playground.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var wrapperClassName = cx(styles.playground(), styles.playgroundWrapper(this.theme));
+    return /*#__PURE__*/React.createElement("div", {
+      className: wrapperClassName
+    }, /*#__PURE__*/React.createElement(Gapped, {
+      vertical: true,
+      gap: 50
+    }, this.renderTabsGroup(), this.renderSizesGroup(), this.renderLinksGroup(), this.renderButtonsGroup(), this.renderInputsGroup(), this.renderOtherInputsGroup(), this.renderTokenInputsGroup(), this.renderSwitchersGroup(), this.renderControlsGroup()), this.renderStickyStopElement(), /*#__PURE__*/React.createElement(Gapped, {
+      vertical: true,
+      gap: 50
+    }, this.renderHintsGroup(), this.renderTooltip(), this.renderPaging(), this.renderFileUploader()));
+  };
+
+  _proto.renderTabs = function renderTabs() {
+    var _cx;
+
+    var _this$props = this.props,
+        onThemeChange = _this$props.onThemeChange,
+        onEditLinkClick = _this$props.onEditLinkClick;
+    var tabsOuterWrapperStyle = {
+      background: this.theme.bgDefault
+    };
+    var tabsOuterWrapperClass = cx((_cx = {}, _cx[styles.tabsWrapper(this.theme)] = true, _cx[styles.stickyTabsWrapper(this.theme)] = useSticky, _cx));
+    return /*#__PURE__*/React.createElement("div", {
+      style: tabsOuterWrapperStyle,
+      className: tabsOuterWrapperClass
+    }, /*#__PURE__*/React.createElement(Gapped, {
+      gap: 40
+    }, /*#__PURE__*/React.createElement(Tabs, {
+      value: this.getCurrentTab(),
+      onValueChange: onThemeChange,
+      vertical: false
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.tabsInnerWrapper(this.theme)
+    }, /*#__PURE__*/React.createElement(Tabs.Tab, {
+      id: ThemeType.Default
+    }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F"), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      id: ThemeType.Dark
+    }, "\u0422\u0435\u043C\u043D\u0430\u044F"), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      id: ThemeType.DefaultOld
+    }, "\u0414\u0435\u0444\u043E\u043B\u0442\u043D\u0430\u044F 3.0"), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      id: ThemeType.FlatOld
+    }, "\u041F\u043B\u043E\u0441\u043A\u0430\u044F 3.0"), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      id: ThemeType.Theme2022
+    }, "\u041D\u043E\u0432\u0430\u044F 2022"), /*#__PURE__*/React.createElement(Tabs.Tab, {
+      id: ThemeType.Theme2022Dark
+    }, "\u041D\u043E\u0432\u0430\u044F 2022 \u0422\u0451\u043C\u043D\u0430\u044F"))), /*#__PURE__*/React.createElement(Link, {
+      onClick: onEditLinkClick
+    }, "\u041D\u0430\u0441\u0442\u0440\u043E\u0438\u0442\u044C \u0442\u0435\u043C\u0443")));
+  };
+
+  return Playground;
+}(React.Component);

package/internal/ThemePlayground/Playground/Playground.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Playground.tsx"],"names":["React","SearchIcon","LinkIcon","OkIcon","ErrorIcon","TrashIcon","HelpDotIcon","Button","Tabs","Gapped","Link","Input","ThemeContext","Tooltip","Sticky","isTestEnv","cx","FileUploader","ThemeType","TokenInputPlayground","DatePickerPlayground","TogglePlayground","SwitcherPlayground","FxInputPlayground","CurrencyInputPlayground","getComponentsFromPropsList","CheckboxPlayground","RadioPlayground","PagingPlayground","HintPlayground","ComponentsGroup","styles","SizesGroup","useSticky","Playground","stopEl","createRef","renderTabsGroup","getStickyStop","renderTabs","getCurrentTab","props","currentThemeType","Dark","FlatOld","DefaultOld","Theme2022","Theme2022Dark","Default","renderSizesGroup","theme","renderLinksGroup","propsList","icon","children","use","disabled","renderButtonsGroup","arrow","size","width","loading","renderInputsGroup","placeholder","error","warning","fromProps","renderTokenInputsGroup","renderOtherInputsGroup","renderSwitchersGroup","renderControlsGroup","renderHintsGroup","renderTooltip","tooltipContent","renderPaging","renderFileUploader","renderStickyStopElement","height","current","render","renderMain","wrapperClassName","playground","playgroundWrapper","onThemeChange","onEditLinkClick","tabsOuterWrapperStyle","background","bgDefault","tabsOuterWrapperClass","tabsWrapper","stickyTabsWrapper","tabsInnerWrapper","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport SearchIcon from '@skbkontur/react-icons/Search';\nimport LinkIcon from '@skbkontur/react-icons/Link';\nimport OkIcon from '@skbkontur/react-icons/Ok';\nimport ErrorIcon from '@skbkontur/react-icons/Error';\nimport TrashIcon from '@skbkontur/react-icons/Trash';\nimport HelpDotIcon from '@skbkontur/react-icons/HelpDot';\n\nimport { Button, ButtonProps } from '../../components/Button';\nimport { Tabs } from '../../components/Tabs';\nimport { Gapped } from '../../components/Gapped';\nimport { Link, LinkProps } from '../../components/Link';\nimport { Input, InputProps } from '../../components/Input';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Tooltip } from '../../components/Tooltip';\nimport { Sticky } from '../../components/Sticky';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { cx } from '../../lib/theming/Emotion';\nimport { FileUploader } from '../../components/FileUploader';\n\nimport { ThemeType } from './constants';\nimport { TokenInputPlayground } from './TokenInputPlayground';\nimport { DatePickerPlayground } from './AnotherInputsPlayground';\nimport { TogglePlayground } from './TogglePlayground';\nimport { SwitcherPlayground } from './SwitcherPlayground';\nimport { FxInputPlayground } from './FxInputPlayground';\nimport { CurrencyInputPlayground } from './CurrencyInputPlayground';\nimport { getComponentsFromPropsList } from './helpers';\nimport { CheckboxPlayground } from './CheckboxPlayground';\nimport { RadioPlayground } from './RadioPlayground';\nimport { PagingPlayground } from './PagingPlayground';\nimport { HintPlayground } from './HintPlayground';\nimport { ComponentsGroup } from './ComponentsGroup';\nimport { styles } from './Playground.styles';\nimport { SizesGroup } from './SizesGroup';\n\nconst useSticky = !isTestEnv;\n\nexport interface PlaygroundProps {\n  currentThemeType: ThemeType;\n  onThemeChange: (value: string) => void;\n  onEditLinkClick: () => void;\n}\n\nexport class Playground extends React.Component<PlaygroundProps> {\n  private theme!: Theme;\n  private stopEl = React.createRef<HTMLDivElement>();\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n  private renderMain() {\n    const wrapperClassName = cx(styles.playground(), styles.playgroundWrapper(this.theme));\n    return (\n      <div className={wrapperClassName}>\n        <Gapped vertical gap={50}>\n          {this.renderTabsGroup()}\n          {this.renderSizesGroup()}\n          {this.renderLinksGroup()}\n          {this.renderButtonsGroup()}\n          {this.renderInputsGroup()}\n          {this.renderOtherInputsGroup()}\n          {this.renderTokenInputsGroup()}\n          {this.renderSwitchersGroup()}\n          {this.renderControlsGroup()}\n        </Gapped>\n        {this.renderStickyStopElement()}\n        <Gapped vertical gap={50}>\n          {this.renderHintsGroup()}\n          {this.renderTooltip()}\n          {this.renderPaging()}\n          {this.renderFileUploader()}\n        </Gapped>\n      </div>\n    );\n  }\n\n  private renderTabsGroup = () => {\n    return useSticky ? (\n      <Sticky side={'top'} getStop={this.getStickyStop}>\n        {this.renderTabs()}\n      </Sticky>\n    ) : (\n      this.renderTabs()\n    );\n  };\n\n  private renderTabs() {\n    const { onThemeChange, onEditLinkClick } = this.props;\n    const tabsOuterWrapperStyle = { background: this.theme.bgDefault };\n    const tabsOuterWrapperClass = cx({\n      [styles.tabsWrapper(this.theme)]: true,\n      [styles.stickyTabsWrapper(this.theme)]: useSticky,\n    });\n\n    return (\n      <div style={tabsOuterWrapperStyle} className={tabsOuterWrapperClass}>\n        <Gapped gap={40}>\n          <Tabs value={this.getCurrentTab()} onValueChange={onThemeChange} vertical={false}>\n            <div className={styles.tabsInnerWrapper(this.theme)}>\n              <Tabs.Tab id={ThemeType.Default}>Дефолтная</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Dark}>Темная</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.DefaultOld}>Дефолтная 3.0</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.FlatOld}>Плоская 3.0</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Theme2022}>Новая 2022</Tabs.Tab>\n              <Tabs.Tab id={ThemeType.Theme2022Dark}>Новая 2022 Тёмная</Tabs.Tab>\n            </div>\n          </Tabs>\n          <Link onClick={onEditLinkClick}>Настроить тему</Link>\n        </Gapped>\n      </div>\n    );\n  }\n\n  private getCurrentTab = () => {\n    switch (this.props.currentThemeType) {\n      case ThemeType.Dark:\n        return ThemeType.Dark;\n      case ThemeType.FlatOld:\n        return ThemeType.FlatOld;\n      case ThemeType.DefaultOld:\n        return ThemeType.DefaultOld;\n      case ThemeType.Theme2022:\n        return ThemeType.Theme2022;\n      case ThemeType.Theme2022Dark:\n        return ThemeType.Theme2022Dark;\n      default:\n        return ThemeType.Default;\n    }\n  };\n\n  private renderSizesGroup = () => {\n    return (\n      <ComponentsGroup title={'Размеры'} theme={this.theme}>\n        <SizesGroup size={'small'} />\n        <SizesGroup size={'medium'} />\n        <SizesGroup size={'large'} />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderLinksGroup = () => {\n    const propsList: LinkProps[] = [\n      { icon: <LinkIcon />, children: 'Enabled' },\n      { icon: <OkIcon />, use: 'success', children: 'Success' },\n      { icon: <ErrorIcon />, use: 'danger', children: 'Danger' },\n      { icon: <TrashIcon />, use: 'grayed', children: 'Grayed' },\n      { icon: <TrashIcon />, children: 'Disabled', disabled: true },\n    ];\n    return (\n      <ComponentsGroup title={'Ссылки'} theme={this.theme}>\n        <Gapped wrap verticalAlign=\"middle\" gap={10}>\n          {getComponentsFromPropsList(<Link />, propsList)}\n        </Gapped>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderButtonsGroup = () => {\n    const propsList: ButtonProps[] = [\n      { children: 'Default' },\n      { children: 'Primary', use: 'primary' },\n      { children: 'Danger', use: 'danger' },\n      { children: 'Pay', use: 'pay' },\n      { children: 'Success', use: 'success' },\n      { children: 'Disabled', disabled: true },\n      { children: 'Back', arrow: 'left', size: 'medium', width: 110 },\n      { children: 'Forward', arrow: true, size: 'medium', use: 'primary', width: 110 },\n      { children: 'Loading', size: 'medium', loading: true },\n    ];\n\n    return (\n      <ComponentsGroup title={'Кнопки'} theme={this.theme}>\n        {getComponentsFromPropsList(<Button width={120} size={'small'} />, propsList)}\n      </ComponentsGroup>\n    );\n  };\n\n  private renderInputsGroup = () => {\n    const propsList: InputProps[] = [\n      { placeholder: 'Enabled' },\n      { placeholder: 'Error', error: true },\n      { placeholder: 'Warning', warning: true },\n      { placeholder: 'Disabled', disabled: true },\n    ];\n    const fromProps = getComponentsFromPropsList(<Input width={120} />, propsList);\n    return (\n      <ComponentsGroup title={'Поле ввода'} theme={this.theme}>\n        <Input width={380} prefix=\"https://kontur.ru/search?query=\" rightIcon={<SearchIcon />} />\n        <div>\n          <Gapped gap={10}>{fromProps}</Gapped>\n        </div>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderTokenInputsGroup = () => {\n    return (\n      <ComponentsGroup title={'Поле с токеном'} theme={this.theme}>\n        <TokenInputPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderOtherInputsGroup = () => {\n    return (\n      <ComponentsGroup title={'Прочие поля'} theme={this.theme}>\n        <CurrencyInputPlayground />\n        <FxInputPlayground />\n        <DatePickerPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderSwitchersGroup = () => {\n    return (\n      <ComponentsGroup title={'Переключатели'} theme={this.theme}>\n        <SwitcherPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderControlsGroup = () => {\n    return (\n      <ComponentsGroup title={'Радио, чекбоксы'} theme={this.theme}>\n        <Gapped verticalAlign={'top'} gap={60}>\n          <CheckboxPlayground />\n          <RadioPlayground />\n          <TogglePlayground />\n        </Gapped>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderHintsGroup = () => {\n    return (\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\n        <HintPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderTooltip = () => {\n    const tooltipContent = () => (\n      <div className={styles.tooltipContent()}>\n        {'Информация об ошибке. Короткий объясняющий текст и ссылка, если нужно'}\n      </div>\n    );\n    return (\n      <ComponentsGroup title={'Тултип'} theme={this.theme}>\n        <Tooltip render={tooltipContent} pos=\"right middle\" trigger={'opened'} disableAnimations>\n          <Link icon={<HelpDotIcon />} />\n        </Tooltip>\n      </ComponentsGroup>\n    );\n  };\n\n  private renderPaging = () => {\n    return (\n      <ComponentsGroup title={'Пейджинг'} theme={this.theme}>\n        <PagingPlayground />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderFileUploader = () => {\n    return (\n      <ComponentsGroup title={'FileUploader'} theme={this.theme}>\n        <FileUploader multiple />\n      </ComponentsGroup>\n    );\n  };\n\n  private renderStickyStopElement = () => {\n    return <div ref={this.stopEl} style={{ height: 50 }} />;\n  };\n\n  private getStickyStop = () => this.stopEl.current;\n}\n"]}

package/internal/ThemePlayground/Playground/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/ThemePlayground/Playground.js",
+  "module": "Playground",
+  "types": "../Playground.d.ts",
+  "sideEffects": false
+}

package/internal/ThemePlayground/Playground.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ThemeType } from './constants';
+export interface PlaygroundProps {
+    currentThemeType: ThemeType;
+    onThemeChange: (value: string) => void;
+    onEditLinkClick: () => void;
+}
+export declare class Playground extends React.Component<PlaygroundProps> {
+    private theme;
+    private stopEl;
+    render(): JSX.Element;
+    private renderMain;
+    private renderTabsGroup;
+    private renderTabs;
+    private getCurrentTab;
+    private renderSizesGroup;
+    private renderLinksGroup;
+    private renderButtonsGroup;
+    private renderInputsGroup;
+    private renderTokenInputsGroup;
+    private renderOtherInputsGroup;
+    private renderSwitchersGroup;
+    private renderControlsGroup;
+    private renderHintsGroup;
+    private renderTooltip;
+    private renderPaging;
+    private renderFileUploader;
+    private renderStickyStopElement;
+    private getStickyStop;
+}

package/internal/ThemePlayground/Playground.md

@@ -0,0 +1,7 @@
+Разные варианты стилизации компонентов:
+
+```jsx harmony
+import { ThemeContextPlayground } from './ThemeContextPlayground';
+
+<ThemeContextPlayground />;
+```

package/internal/ThemePlayground/Playground.styles/Playground.styles.js

@@ -0,0 +1,67 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  playground: function playground() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      margin: -16px;\n      padding: 32px;\n    "])));
+  },
+  title: function title(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      width: 110px;\n      color: ", ";\n    "])), t.textColorDefault);
+  },
+  componentsGroup: function componentsGroup(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      max-width: 700px;\n      color: ", ";\n    "])), t.textColorDefault);
+  },
+  sidePageBody: function sidePageBody() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      padding: 0 30px 30px;\n    "])));
+  },
+  variable: function variable(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      align-items: center;\n      margin-bottom: 16px;\n\n      &:focus {\n        outline: 1px solid ", ";\n        outline-offset: 8px;\n      }\n    "])), t.borderColorFocus);
+  },
+  variableName: function variableName(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      width: 250px;\n      position: relative;\n      z-index: 1;\n      line-height: 34px;\n      color: ", ";\n      flex: 1 1 auto;\n    "])), t.textColorDefault);
+  },
+  deprecated: function deprecated() {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      text-decoration: line-through;\n    "])));
+  },
+  colorIcon: function colorIcon() {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      height: 16px;\n      width: 16px;\n    "])));
+  },
+  baseLinkWrapper: function baseLinkWrapper() {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      margin-left: auto;\n    "])));
+  },
+  linkRoot: function linkRoot() {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      z-index: 1;\n    "])));
+  },
+  baseVariableRoot: function baseVariableRoot() {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      position: relative;\n      z-index: 1;\n      padding-left: 10px;\n      width: 240px;\n      display: flex;\n    "])));
+  },
+  loaderWrapper: function loaderWrapper() {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      width: 500px;\n    "])));
+  },
+  loader: function loader() {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      height: 300px;\n      margin: auto;\n    "])));
+  },
+  tabsWrapper: function tabsWrapper(t) {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      margin: 0 -32px;\n      padding: 11px 32px;\n      position: relative;\n      color: ", ";\n\n      &::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        height: 1px;\n        width: 100%;\n        z-index: -1;\n      }\n    "])), t.textColorDefault);
+  },
+  tooltipContent: function tooltipContent() {
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      width: 210px;\n    "])));
+  },
+  stickyTabsWrapper: function stickyTabsWrapper(t) {
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      &:after {\n        box-shadow: 0 2px 10px 0px ", ";\n      }\n    "])), t.textColorDefault);
+  },
+  tabsInnerWrapper: function tabsInnerWrapper(t) {
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDefault);
+  },
+  playgroundWrapper: function playgroundWrapper(t) {
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.bgDefault);
+  },
+  editorHeaderWrapper: function editorHeaderWrapper(t) {
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDefault);
+  },
+  editorGroupHeader: function editorGroupHeader(t) {
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.textColorDefault);
+  }
+});

package/internal/ThemePlayground/Playground.styles/Playground.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Playground.styles.ts"],"names":["css","memoizeStyle","styles","playground","title","t","textColorDefault","componentsGroup","sidePageBody","variable","borderColorFocus","variableName","deprecated","colorIcon","baseLinkWrapper","linkRoot","baseVariableRoot","loaderWrapper","loader","tabsWrapper","tooltipContent","stickyTabsWrapper","tabsInnerWrapper","playgroundWrapper","bgDefault","editorHeaderWrapper","editorGroupHeader"],"mappings":"qdAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,UADiC,wBACpB;AACX,WAAOH,GAAP;;;;AAID,GANgC;;AAQjCI,EAAAA,KARiC,iBAQ3BC,CAR2B,EAQjB;AACd,WAAOL,GAAP;;AAEWK,IAAAA,CAAC,CAACC,gBAFb;;AAID,GAbgC;;AAejCC,EAAAA,eAfiC,2BAejBF,CAfiB,EAeP;AACxB,WAAOL,GAAP;;AAEWK,IAAAA,CAAC,CAACC,gBAFb;;AAID,GApBgC;;AAsBjCE,EAAAA,YAtBiC,0BAsBlB;AACb,WAAOR,GAAP;;;AAGD,GA1BgC;;AA4BjCS,EAAAA,QA5BiC,oBA4BxBJ,CA5BwB,EA4Bd;AACjB,WAAOL,GAAP;;;;;;AAMyBK,IAAAA,CAAC,CAACK,gBAN3B;;;;AAUD,GAvCgC;;AAyCjCC,EAAAA,YAzCiC,wBAyCpBN,CAzCoB,EAyCV;AACrB,WAAOL,GAAP;;;;;;;;AAQWK,IAAAA,CAAC,CAACC,gBARb;;;AAWD,GArDgC;;AAuDjCM,EAAAA,UAvDiC,wBAuDpB;AACX,WAAOZ,GAAP;;;AAGD,GA3DgC;;AA6DjCa,EAAAA,SA7DiC,uBA6DrB;AACV,WAAOb,GAAP;;;;AAID,GAlEgC;;AAoEjCc,EAAAA,eApEiC,6BAoEf;AAChB,WAAOd,GAAP;;;AAGD,GAxEgC;;AA0EjCe,EAAAA,QA1EiC,sBA0EtB;AACT,WAAOf,GAAP;;;;AAID,GA/EgC;;AAiFjCgB,EAAAA,gBAjFiC,8BAiFd;AACjB,WAAOhB,GAAP;;;;;;;AAOD,GAzFgC;;AA2FjCiB,EAAAA,aA3FiC,2BA2FjB;AACd,WAAOjB,GAAP;;;AAGD,GA/FgC;;AAiGjCkB,EAAAA,MAjGiC,oBAiGxB;AACP,WAAOlB,GAAP;;;;AAID,GAtGgC;;AAwGjCmB,EAAAA,WAxGiC,uBAwGrBd,CAxGqB,EAwGX;AACpB,WAAOL,GAAP;;;;AAIWK,IAAAA,CAAC,CAACC,gBAJb;;;;;;;;;;;;AAgBD,GAzHgC;;AA2HjCc,EAAAA,cA3HiC,4BA2HhB;AACf,WAAOpB,GAAP;;;AAGD,GA/HgC;;AAiIjCqB,EAAAA,iBAjIiC,6BAiIfhB,CAjIe,EAiIL;AAC1B,WAAOL,GAAP;;AAEiCK,IAAAA,CAAC,CAACC,gBAFnC;;;AAKD,GAvIgC;AAwIjCgB,EAAAA,gBAxIiC,4BAwIhBjB,CAxIgB,EAwIN;AACzB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACC,gBADb;;AAGD,GA5IgC;AA6IjCiB,EAAAA,iBA7IiC,6BA6IflB,CA7Ie,EA6IL;AAC1B,WAAOL,GAAP;AACgBK,IAAAA,CAAC,CAACmB,SADlB;;AAGD,GAjJgC;AAkJjCC,EAAAA,mBAlJiC,+BAkJbpB,CAlJa,EAkJH;AAC5B,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACC,gBADb;;AAGD,GAtJgC;AAuJjCoB,EAAAA,iBAvJiC,6BAuJfrB,CAvJe,EAuJL;AAC1B,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACC,gBADb;;AAGD,GA3JgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  playground() {\n    return css`\n      margin: -16px;\n      padding: 32px;\n    `;\n  },\n\n  title(t: Theme) {\n    return css`\n      width: 110px;\n      color: ${t.textColorDefault};\n    `;\n  },\n\n  componentsGroup(t: Theme) {\n    return css`\n      max-width: 700px;\n      color: ${t.textColorDefault};\n    `;\n  },\n\n  sidePageBody() {\n    return css`\n      padding: 0 30px 30px;\n    `;\n  },\n\n  variable(t: Theme) {\n    return css`\n      display: flex;\n      align-items: center;\n      margin-bottom: 16px;\n\n      &:focus {\n        outline: 1px solid ${t.borderColorFocus};\n        outline-offset: 8px;\n      }\n    `;\n  },\n\n  variableName(t: Theme) {\n    return css`\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      width: 250px;\n      position: relative;\n      z-index: 1;\n      line-height: 34px;\n      color: ${t.textColorDefault};\n      flex: 1 1 auto;\n    `;\n  },\n\n  deprecated() {\n    return css`\n      text-decoration: line-through;\n    `;\n  },\n\n  colorIcon() {\n    return css`\n      height: 16px;\n      width: 16px;\n    `;\n  },\n\n  baseLinkWrapper() {\n    return css`\n      margin-left: auto;\n    `;\n  },\n\n  linkRoot() {\n    return css`\n      position: relative;\n      z-index: 1;\n    `;\n  },\n\n  baseVariableRoot() {\n    return css`\n      position: relative;\n      z-index: 1;\n      padding-left: 10px;\n      width: 240px;\n      display: flex;\n    `;\n  },\n\n  loaderWrapper() {\n    return css`\n      width: 500px;\n    `;\n  },\n\n  loader() {\n    return css`\n      height: 300px;\n      margin: auto;\n    `;\n  },\n\n  tabsWrapper(t: Theme) {\n    return css`\n      margin: 0 -32px;\n      padding: 11px 32px;\n      position: relative;\n      color: ${t.textColorDefault};\n\n      &::after {\n        content: '';\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        height: 1px;\n        width: 100%;\n        z-index: -1;\n      }\n    `;\n  },\n\n  tooltipContent() {\n    return css`\n      width: 210px;\n    `;\n  },\n\n  stickyTabsWrapper(t: Theme) {\n    return css`\n      &:after {\n        box-shadow: 0 2px 10px 0px ${t.textColorDefault};\n      }\n    `;\n  },\n  tabsInnerWrapper(t: Theme) {\n    return css`\n      color: ${t.textColorDefault};\n    `;\n  },\n  playgroundWrapper(t: Theme) {\n    return css`\n      background: ${t.bgDefault};\n    `;\n  },\n  editorHeaderWrapper(t: Theme) {\n    return css`\n      color: ${t.textColorDefault};\n    `;\n  },\n  editorGroupHeader(t: Theme) {\n    return css`\n      color: ${t.textColorDefault};\n    `;\n  },\n});\n"]}

package/internal/ThemePlayground/Playground.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/ThemePlayground/Playground.styles.js",
+  "module": "Playground.styles",
+  "types": "../Playground.styles.d.ts",
+  "sideEffects": false
+}

package/internal/ThemePlayground/Playground.styles.d.ts

@@ -0,0 +1,23 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    playground(): string;
+    title(t: Theme): string;
+    componentsGroup(t: Theme): string;
+    sidePageBody(): string;
+    variable(t: Theme): string;
+    variableName(t: Theme): string;
+    deprecated(): string;
+    colorIcon(): string;
+    baseLinkWrapper(): string;
+    linkRoot(): string;
+    baseVariableRoot(): string;
+    loaderWrapper(): string;
+    loader(): string;
+    tabsWrapper(t: Theme): string;
+    tooltipContent(): string;
+    stickyTabsWrapper(t: Theme): string;
+    tabsInnerWrapper(t: Theme): string;
+    playgroundWrapper(t: Theme): string;
+    editorHeaderWrapper(t: Theme): string;
+    editorGroupHeader(t: Theme): string;
+};

package/internal/ThemePlayground/RadioPlayground/RadioPlayground.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Gapped } from "../../../components/Gapped";
+import { Radio } from "../../../components/Radio";
+import { getComponentsFromPropsList } from "../helpers";
+var propsList = [{
+  value: '',
+  children: 'Default',
+  checked: false
+}, {
+  value: '',
+  children: 'Checked'
+}, {
+  value: '',
+  children: 'Disabled',
+  disabled: true
+}, {
+  value: '',
+  children: 'Focused',
+  focused: true
+}, {
+  value: '',
+  children: 'Error',
+  error: true
+}, {
+  value: '',
+  children: 'Warning',
+  warning: true
+}];
+export var RadioPlayground = function RadioPlayground() {
+  return /*#__PURE__*/React.createElement(Gapped, {
+    gap: 0,
+    vertical: true
+  }, getComponentsFromPropsList( /*#__PURE__*/React.createElement(Radio, {
+    value: '',
+    checked: true
+  }), propsList));
+};

package/internal/ThemePlayground/RadioPlayground/RadioPlayground.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["RadioPlayground.tsx"],"names":["React","Gapped","Radio","getComponentsFromPropsList","propsList","value","children","checked","disabled","focused","error","warning","RadioPlayground"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,yBAAvB;AACA,SAASC,KAAT,QAAkC,wBAAlC;;AAEA,SAASC,0BAAT,QAA2C,WAA3C;;AAEA,IAAMC,SAAoC,GAAG;AAC3C,EAAEC,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAAkCC,OAAO,EAAE,KAA3C,EAD2C;AAE3C,EAAEF,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAF2C;AAG3C,EAAED,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,UAAvB,EAAmCE,QAAQ,EAAE,IAA7C,EAH2C;AAI3C,EAAEH,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAAkCG,OAAO,EAAE,IAA3C,EAJ2C;AAK3C,EAAEJ,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,OAAvB,EAAgCI,KAAK,EAAE,IAAvC,EAL2C;AAM3C,EAAEL,KAAK,EAAE,EAAT,EAAaC,QAAQ,EAAE,SAAvB,EAAkCK,OAAO,EAAE,IAA3C,EAN2C,CAA7C;;;AASA,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AACnC;AACE,wBAAC,MAAD,IAAQ,GAAG,EAAE,CAAb,EAAgB,QAAQ,MAAxB;AACGT,IAAAA,0BAA0B,eAAC,oBAAC,KAAD,IAAO,KAAK,EAAE,EAAd,EAAkB,OAAO,MAAzB,GAAD,EAA+BC,SAA/B,CAD7B,CADF;;;AAKD,CANM","sourcesContent":["import React from 'react';\n\nimport { Gapped } from '../../components/Gapped';\nimport { Radio, RadioProps } from '../../components/Radio';\n\nimport { getComponentsFromPropsList } from './helpers';\n\nconst propsList: Array<RadioProps<string>> = [\n  { value: '', children: 'Default', checked: false },\n  { value: '', children: 'Checked' },\n  { value: '', children: 'Disabled', disabled: true },\n  { value: '', children: 'Focused', focused: true },\n  { value: '', children: 'Error', error: true },\n  { value: '', children: 'Warning', warning: true },\n];\n\nexport const RadioPlayground = () => {\n  return (\n    <Gapped gap={0} vertical>\n      {getComponentsFromPropsList(<Radio value={''} checked />, propsList)}\n    </Gapped>\n  );\n};\n"]}

package/internal/ThemePlayground/RadioPlayground/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/ThemePlayground/RadioPlayground.js",
+  "module": "RadioPlayground",
+  "types": "../RadioPlayground.d.ts",
+  "sideEffects": false
+}

package/internal/ThemePlayground/RadioPlayground.d.ts

@@ -0,0 +1 @@
+export declare const RadioPlayground: () => JSX.Element;

package/internal/ThemePlayground/SelectPlayground/SelectPlayground.js

@@ -0,0 +1,49 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import { Select } from "../../../components/Select";
+export var SelectPlayground = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(SelectPlayground, _React$Component);
+
+  function SelectPlayground() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.state = {
+      value: capitalize(_this.props.size)
+    };
+    _this.selectItems = ['Small', 'Medium', 'Large'];
+
+    _this.handleChange = function (value) {
+      _this.setState({
+        value: value
+      });
+    };
+
+    return _this;
+  }
+
+  var _proto = SelectPlayground.prototype;
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement(Select, _extends({}, this.props, {
+      value: this.state.value,
+      items: this.selectItems,
+      onValueChange: this.handleChange
+    }));
+  };
+
+  return SelectPlayground;
+}(React.Component);
+
+var capitalize = function capitalize(input) {
+  if (input === void 0) {
+    input = '';
+  }
+
+  return input.charAt(0).toUpperCase() + input.slice(1);
+};