@skbkontur/react-ui 0.0.0-8fc80072ce → 0.0.0-9294639913

package/components/internal/ThemeShowcase/ThemeShowcase.js

@@ -1,389 +0,0 @@
-import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";import React from 'react';
-import cn from 'classnames';
-
-
-import { DEFAULT_THEME as defaultVariables } from '../../../lib/theming/themes/DefaultTheme';
-import { FLAT_THEME as flatVariables } from '../../../lib/theming/themes/FlatTheme';
-import { ComboBox } from '../../ComboBox';
-import { Gapped } from '../../Gapped';
-import { Link } from '../../Link';
-import { Sticky } from '../../Sticky';
-import * as ColorFunctions from '../../../lib/styles/ColorFunctions';
-import { Tooltip } from '../../Tooltip';
-
-import { IS_PROXY_SUPPORTED } from '../../internal/Supports';
-
-import {
-ALL_USED_VARIABLES,
-CALLS_COUNT,
-COMPONENT_DESCRIPTIONS,
-COMPONENT_DESCRIPTIONS_BY_VARIABLE,
-
-
-EXECUTION_TIME } from
-'./ThemeShowcaseHelpers/VariablesCollector';
-import { jsStyles } from './ThemeShowcase.styles';
-
-var CSS_TOOLTIP_ALLOWED_POSITIONS = ['bottom left', 'top left'];
-var EMPTY_ARRAY = [];
-
-var ALL_VARIABLES = Object.keys(defaultVariables);
-
-
-
-
-
-
-
-
-export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {_inheritsLoose(ThemeShowcase, _React$Component);function ThemeShowcase() {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 = {};_this.
-
-    isUnmounting = false;_this.
-    variablesDiff = [];_this.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    getItems = function (query) {
-      return Promise.resolve(_this.getValues(query));
-    };_this.
-    handleVariableChange = function (item) {
-      if (!_this.isUnmounting) {
-        _this.setState({ selectedVariable: item });
-      }
-    };_this.
-    handleUnexpectedVariableInput = function (query) {
-      var values = _this.getValues(query);
-      if (values.length > 0) {
-        return values[0];
-      } else {
-        return _this.resetVariable();
-      }
-    };_this.
-    resetVariable = function () {
-      if (!_this.isUnmounting) {
-        _this.setState({ selectedVariable: undefined });
-      }
-    };return _this;}var _proto = ThemeShowcase.prototype;_proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {var _this2 = this;if (this.props.isDebugMode) {ALL_VARIABLES.forEach(function (variable) {var found = ALL_USED_VARIABLES.includes(variable);if (!found) {_this2.variablesDiff.push(variable);}});}};_proto.render = function render() {var _this3 = this;if (!IS_PROXY_SUPPORTED) {return React.createElement("div", null, "\u0422\u0430\u0431\u043B\u0438\u0446\u0430 \u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u0438\u044F \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0445 \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430 \u0442\u043E\u043B\u044C\u043A\u043E \u0432", ' ', React.createElement(Link, { href: 'https://caniuse.com/#feat=proxy', target: '_blank' }, "\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u043A\u043E\u0439 Proxy"), ".");}var selectedVariable = this.state.selectedVariable;var descriptionsToRender = selectedVariable ? COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {} : COMPONENT_DESCRIPTIONS;var isDebugMode = this.props.isDebugMode;var callsCount = isDebugMode ? "(" + CALLS_COUNT + " \u0432\u044B\u0437\u043E\u0432\u043E\u0432)" : '';var executionTime = isDebugMode ? "\u0421\u0433\u0435\u043D\u0435\u0440\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u0437\u0430 " + EXECUTION_TIME.toFixed(3) + "ms" : '';return React.createElement(Gapped, { wrap: true, gap: 30, verticalAlign: 'top' }, React.createElement("div", null, React.createElement(Sticky, { side: 'top' }, React.createElement("div", { className: jsStyles.searchBar(), "data-perf-info": executionTime + " " + callsCount }, React.createElement(Gapped, { gap: 15 }, React.createElement(ComboBox, { getItems: this.getItems, value: selectedVariable, onValueChange: this.handleVariableChange, onUnexpectedInput: this.handleUnexpectedVariableInput, placeholder: 'поиск по названию переменной' }), !!selectedVariable && React.createElement(Link, { onClick: this.resetVariable }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {return React.createElement(ComponentShowcase, { key: componentName, name: componentName, description: descriptionsToRender[componentName], isDebugMode: isDebugMode, onVariableSelect: _this3.handleVariableChange });})), React.createElement(ShowUnusedVariables, { diff: this.variablesDiff }));};_proto.componentWillUnmount = function componentWillUnmount() {this.isUnmounting = true;};_proto.getValues = function getValues(query) {var lowerCaseQuery = query && query.toLowerCase().trim();var allItems = ALL_USED_VARIABLES;if (lowerCaseQuery) {allItems = ALL_USED_VARIABLES.filter(function (usedVariable) {return usedVariable.toLowerCase().startsWith(lowerCaseQuery);});}return allItems.map(function (usedVariableName) {return { value: usedVariableName, label: usedVariableName };});};return ThemeShowcase;}(React.Component);var
-
-
-
-
-
-
-
-
-ComponentShowcase = /*#__PURE__*/function (_React$Component2) {_inheritsLoose(ComponentShowcase, _React$Component2);function ComponentShowcase() {return _React$Component2.apply(this, arguments) || this;}var _proto2 = ComponentShowcase.prototype;_proto2.
-  render = function render() {var _this4 = this;var _this$props =
-    this.props,name = _this$props.name,description = _this$props.description,onVariableSelect = _this$props.onVariableSelect,isDebugMode = _this$props.isDebugMode;
-    var elements = Object.keys(description);
-
-    return (
-      React.createElement(React.Fragment, null,
-      React.createElement(Sticky, { side: 'top', offset: 40 },
-      function (isSticky) {var _cn;return (
-          React.createElement("h2", {
-            className: cn((_cn = {}, _cn[
-            jsStyles.heading()] = true, _cn[
-            jsStyles.headingSticky()] = isSticky, _cn)) },
-
-
-          _this4.props.name));}),
-
-
-
-      React.createElement("table", { className: jsStyles.table() },
-      React.createElement("thead", null,
-      React.createElement("tr", null,
-      React.createElement("th", { style: { width: 170 } }, "ClassName"),
-      React.createElement("th", { style: { width: 210 } }, "Variable Name"),
-      React.createElement("th", { style: { width: 250 } }, "Default Value"),
-      React.createElement("th", { style: { width: 250 } }, "Flat Value"))),
-
-
-      React.createElement("tbody", null,
-      elements.map(function (el) {return (
-          React.createElement(ComponentShowcaseRow, {
-            key: name + "_" + el,
-            element: el,
-            row: description[el],
-            onVariableSelect: onVariableSelect,
-            isDebugMode: isDebugMode }));})))));
-
-
-
-
-
-
-  };return ComponentShowcase;}(React.Component);var
-
-
-
-
-
-
-
-
-
-ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {_inheritsLoose(ComponentShowcaseRow, _React$Component3);function ComponentShowcaseRow() {var _this5;for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {args[_key3] = arguments[_key3];}_this5 = _React$Component3.call.apply(_React$Component3, [this].concat(args)) || this;_this5.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    getCss = function () {
-      return React.createElement("span", { className: jsStyles.relativeCss() }, _this5.props.row.contents);
-    };return _this5;}var _proto3 = ComponentShowcaseRow.prototype;_proto3.render = function render() {var _this6 = this;var _this$props2 = this.props,el = _this$props2.element,row = _this$props2.row,isDebugMode = _this$props2.isDebugMode;var rowSpan = row.variables.length + 1;return React.createElement(React.Fragment, null, React.createElement("tr", { className: jsStyles.invisibleRow() }, React.createElement("td", { rowSpan: rowSpan }, React.createElement(Tooltip, { render: this.getCss, pos: 'bottom left', allowedPositions: CSS_TOOLTIP_ALLOWED_POSITIONS, trigger: 'click', useWrapper: false }, React.createElement("span", { className: jsStyles.elementName() }, ".", el))), React.createElement("td", { className: jsStyles.invisibleCell() }), React.createElement("td", { className: jsStyles.invisibleCell() }), React.createElement("td", { className: jsStyles.invisibleCell() })), row.variables.map(function (varName) {var _cn2;var dependencies = row.dependencies[varName] || EMPTY_ARRAY;var variableDefault = defaultVariables[varName];var variableFlat = flatVariables[varName];var hasNoVariables = isDebugMode && !variableDefault && !variableFlat;return React.createElement("tr", { key: el + "_" + varName, className: cn((_cn2 = {}, _cn2[jsStyles.suspiciousRow()] = hasNoVariables, _cn2)) }, React.createElement("td", null, React.createElement(VariableName, { variableName: varName, dependencies: dependencies, onVariableSelect: _this6.props.onVariableSelect })), React.createElement("td", null, React.createElement(VariableValue, { value: variableDefault })), React.createElement("td", null, React.createElement(VariableValue, { value: variableFlat })));}));};return ComponentShowcaseRow;}(React.Component);var
-
-
-
-
-
-
-
-
-VariableName = /*#__PURE__*/function (_React$Component4) {_inheritsLoose(VariableName, _React$Component4);function VariableName() {var _this7;for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {args[_key4] = arguments[_key4];}_this7 = _React$Component4.call.apply(_React$Component4, [this].concat(args)) || this;_this7.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    handleVariableSelect = function () {var _this7$props =
-      _this7.props,variableName = _this7$props.variableName,onVariableSelect = _this7$props.onVariableSelect;
-      if (onVariableSelect) {
-        onVariableSelect({ value: variableName, label: variableName });
-      }
-    };return _this7;}var _proto4 = VariableName.prototype;_proto4.render = function render() {return React.createElement("span", null, React.createElement("span", { className: jsStyles.variableName(), onClick: this.handleVariableSelect }, this.props.variableName), this.props.dependencies.length > 0 && this.renderDependencies());};_proto4.renderDependencies = function renderDependencies() {var _this$props3 = this.props,dependencies = _this$props3.dependencies,onVariableSelect = _this$props3.onVariableSelect;return React.createElement(React.Fragment, null, React.createElement("br", null), React.createElement("br", null), "\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043E\u0442:", dependencies.map(function (dependency) {return React.createElement(DependencyName, { key: "dependency_" + dependency, dependencyName: dependency, onDependencySelect: onVariableSelect });}));};return VariableName;}(React.Component);var
-
-
-
-
-
-
-DependencyName = /*#__PURE__*/function (_React$Component5) {_inheritsLoose(DependencyName, _React$Component5);function DependencyName() {var _this8;for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {args[_key5] = arguments[_key5];}_this8 = _React$Component5.call.apply(_React$Component5, [this].concat(args)) || this;_this8.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    getValues = function () {
-      var dependencyName = _this8.props.dependencyName;
-      var dependencyDefault = defaultVariables[dependencyName];
-      var dependencyFlat = flatVariables[dependencyName];
-      return (
-        React.createElement(React.Fragment, null,
-        React.createElement("span", null, "Default value: ", React.createElement(VariableValue, { value: dependencyDefault })),
-        React.createElement("br", null),
-        React.createElement("span", null, "Flat value: ", React.createElement(VariableValue, { value: dependencyFlat }))));
-
-
-    };_this8.
-
-    handleDependencySelect = function () {var _this8$props =
-      _this8.props,dependencyName = _this8$props.dependencyName,onDependencySelect = _this8$props.onDependencySelect;
-      if (onDependencySelect) {
-        onDependencySelect({ value: dependencyName, label: dependencyName });
-      }
-    };return _this8;}var _proto5 = DependencyName.prototype;_proto5.render = function render() {return React.createElement(React.Fragment, null, React.createElement("br", null), "\u2013", ' ', React.createElement(Tooltip, { trigger: 'hover', render: this.getValues, pos: 'right middle' }, React.createElement("span", { className: jsStyles.variableName(), onClick: this.handleDependencySelect }, this.props.dependencyName)));};return DependencyName;}(React.Component);
-
-
-var VariableValue = function VariableValue(props) {var _cn3;
-  var value = props.value;
-  var valueIsColor = isColor(value);
-  var valueIsGradient = isGradient(value);
-  var hasExample = valueIsColor || valueIsGradient;
-  var borderColor = 'transparent';
-  if (hasExample) {
-    borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';
-  }
-
-  return (
-    React.createElement("span", { className: cn((_cn3 = {}, _cn3[jsStyles.undefined()] = !value, _cn3)) },
-    hasExample && React.createElement("span", { className: jsStyles.colorExample(), style: { background: value, borderColor: borderColor } }),
-    value || 'undefined'));
-
-
-};
-
-var ShowUnusedVariables = function ShowUnusedVariables(props) {
-  if (props.diff.length === 0) {
-    return null;
-  }
-
-  return (
-    React.createElement("div", { className: jsStyles.unusedVariablesWarning() }, "\u041D\u0435\u0438\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u043D\u043D\u044B\u0435 \u043F\u0435\u0440\u0435\u043C\u0435\u043D\u043D\u044B\u0435 (",
-    props.diff.length, "):",
-
-    React.createElement("ul", null,
-    props.diff.sort().map(function (v) {return (
-        React.createElement("li", { key: v }, v));}))));
-
-
-
-
-};
-
-function isColor(input) {
-  return !!input && (input.startsWith('#') || input.startsWith('rgb') || input.startsWith('hsl'));
-}
-
-function isGradient(input) {
-  return !!input && input.startsWith('linear-gradient');
-}

package/components/internal/ThemeShowcase/ThemeShowcase.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["ThemeShowcase.tsx"],"names":["React","cn","DEFAULT_THEME","defaultVariables","FLAT_THEME","flatVariables","ComboBox","Gapped","Link","Sticky","ColorFunctions","Tooltip","IS_PROXY_SUPPORTED","ALL_USED_VARIABLES","CALLS_COUNT","COMPONENT_DESCRIPTIONS","COMPONENT_DESCRIPTIONS_BY_VARIABLE","EXECUTION_TIME","jsStyles","CSS_TOOLTIP_ALLOWED_POSITIONS","EMPTY_ARRAY","ALL_VARIABLES","Object","keys","ThemeShowcase","state","isUnmounting","variablesDiff","getItems","query","Promise","resolve","getValues","handleVariableChange","item","setState","selectedVariable","handleUnexpectedVariableInput","values","length","resetVariable","undefined","UNSAFE_componentWillMount","props","isDebugMode","forEach","variable","found","includes","push","render","descriptionsToRender","value","callsCount","executionTime","toFixed","searchBar","sort","map","componentName","componentWillUnmount","lowerCaseQuery","toLowerCase","trim","allItems","filter","usedVariable","startsWith","usedVariableName","label","Component","ComponentShowcase","name","description","onVariableSelect","elements","isSticky","heading","headingSticky","table","width","el","ComponentShowcaseRow","getCss","relativeCss","row","contents","element","rowSpan","variables","invisibleRow","elementName","invisibleCell","varName","dependencies","variableDefault","variableFlat","hasNoVariables","suspiciousRow","VariableName","handleVariableSelect","variableName","renderDependencies","dependency","DependencyName","dependencyName","dependencyDefault","dependencyFlat","handleDependencySelect","onDependencySelect","VariableValue","valueIsColor","isColor","valueIsGradient","isGradient","hasExample","borderColor","contrast","colorExample","background","ShowUnusedVariables","diff","unusedVariablesWarning","v","input"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { Theme } from 'react-ui/lib/theming/Theme';\r\n\r\nimport { DEFAULT_THEME as defaultVariables } from '../../../lib/theming/themes/DefaultTheme';\r\nimport { FLAT_THEME as flatVariables } from '../../../lib/theming/themes/FlatTheme';\r\nimport { ComboBox, ComboBoxItem } from '../../ComboBox';\r\nimport { Gapped } from '../../Gapped';\r\nimport { Link } from '../../Link';\r\nimport { Sticky } from '../../Sticky';\r\nimport * as ColorFunctions from '../../../lib/styles/ColorFunctions';\r\nimport { Tooltip } from '../../Tooltip';\r\nimport { PopupPosition } from '../../Popup';\r\nimport { IS_PROXY_SUPPORTED } from '../../internal/Supports';\r\n\r\nimport {\r\n  ALL_USED_VARIABLES,\r\n  CALLS_COUNT,\r\n  COMPONENT_DESCRIPTIONS,\r\n  COMPONENT_DESCRIPTIONS_BY_VARIABLE,\r\n  ComponentDescriptionType,\r\n  ComponentRowDescriptionType,\r\n  EXECUTION_TIME,\r\n} from './ThemeShowcaseHelpers/VariablesCollector';\r\nimport { jsStyles } from './ThemeShowcase.styles';\r\n\r\nconst CSS_TOOLTIP_ALLOWED_POSITIONS: PopupPosition[] = ['bottom left', 'top left'];\r\nconst EMPTY_ARRAY: string[] = [];\r\n\r\nconst ALL_VARIABLES = Object.keys(defaultVariables) as Array<keyof Theme>;\r\n\r\ninterface ShowcaseProps {\r\n  isDebugMode?: boolean;\r\n}\r\ninterface ShowcaseState {\r\n  selectedVariable?: ComboBoxItem;\r\n}\r\n\r\nexport class ThemeShowcase extends React.Component<ShowcaseProps, ShowcaseState> {\r\n  public state: ShowcaseState = {};\r\n\r\n  private isUnmounting = false;\r\n  private variablesDiff: string[] = [];\r\n\r\n  public UNSAFE_componentWillMount(): void {\r\n    if (this.props.isDebugMode) {\r\n      ALL_VARIABLES.forEach(variable => {\r\n        const found = ALL_USED_VARIABLES.includes(variable);\r\n        if (!found) {\r\n          this.variablesDiff.push(variable);\r\n        }\r\n      });\r\n    }\r\n  }\r\n\r\n  public render() {\r\n    if (!IS_PROXY_SUPPORTED) {\r\n      return (\r\n        <div>\r\n          Таблица использования переменных доступна только в{' '}\r\n          <Link href={'https://caniuse.com/#feat=proxy'} target={'_blank'}>\r\n            браузерах с поддержкой Proxy\r\n          </Link>\r\n          .\r\n        </div>\r\n      );\r\n    }\r\n\r\n    const selectedVariable = this.state.selectedVariable;\r\n    const descriptionsToRender = selectedVariable\r\n      ? COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {}\r\n      : COMPONENT_DESCRIPTIONS;\r\n\r\n    const isDebugMode = this.props.isDebugMode;\r\n    const callsCount = isDebugMode ? `(${CALLS_COUNT} вызовов)` : '';\r\n    const executionTime = isDebugMode ? `Сгенерировано за ${EXECUTION_TIME.toFixed(3)}ms` : '';\r\n\r\n    return (\r\n      <Gapped wrap gap={30} verticalAlign={'top'}>\r\n        <div>\r\n          <Sticky side={'top'}>\r\n            <div className={jsStyles.searchBar()} data-perf-info={`${executionTime} ${callsCount}`}>\r\n              <Gapped gap={15}>\r\n                <ComboBox\r\n                  getItems={this.getItems}\r\n                  value={selectedVariable}\r\n                  onValueChange={this.handleVariableChange}\r\n                  onUnexpectedInput={this.handleUnexpectedVariableInput}\r\n                  placeholder={'поиск по названию переменной'}\r\n                />\r\n                {!!selectedVariable && <Link onClick={this.resetVariable}>сбросить</Link>}\r\n              </Gapped>\r\n            </div>\r\n          </Sticky>\r\n          {Object.keys(descriptionsToRender)\r\n            .sort()\r\n            .map(componentName => (\r\n              <ComponentShowcase\r\n                key={componentName}\r\n                name={componentName}\r\n                description={descriptionsToRender[componentName]}\r\n                isDebugMode={isDebugMode}\r\n                onVariableSelect={this.handleVariableChange}\r\n              />\r\n            ))}\r\n        </div>\r\n        <ShowUnusedVariables diff={this.variablesDiff} />\r\n      </Gapped>\r\n    );\r\n  }\r\n  public componentWillUnmount(): void {\r\n    this.isUnmounting = true;\r\n  }\r\n\r\n  private getValues(query: string) {\r\n    const lowerCaseQuery = query && query.toLowerCase().trim();\r\n    let allItems = ALL_USED_VARIABLES;\r\n    if (lowerCaseQuery) {\r\n      allItems = ALL_USED_VARIABLES.filter(usedVariable => usedVariable.toLowerCase().startsWith(lowerCaseQuery));\r\n    }\r\n    return allItems.map(usedVariableName => ({\r\n      value: usedVariableName,\r\n      label: usedVariableName,\r\n    }));\r\n  }\r\n  private getItems = (query: string) => {\r\n    return Promise.resolve(this.getValues(query));\r\n  };\r\n  private handleVariableChange = (item: ComboBoxItem) => {\r\n    if (!this.isUnmounting) {\r\n      this.setState({ selectedVariable: item });\r\n    }\r\n  };\r\n  private handleUnexpectedVariableInput = (query: string) => {\r\n    const values = this.getValues(query);\r\n    if (values.length > 0) {\r\n      return values[0];\r\n    } else {\r\n      return this.resetVariable();\r\n    }\r\n  };\r\n  private resetVariable = () => {\r\n    if (!this.isUnmounting) {\r\n      this.setState({ selectedVariable: undefined });\r\n    }\r\n  };\r\n}\r\n\r\ninterface ComponentShowcaseProps {\r\n  name: string;\r\n  description: ComponentDescriptionType;\r\n  isDebugMode?: boolean;\r\n  onVariableSelect: (item: ComboBoxItem) => void;\r\n}\r\nclass ComponentShowcase extends React.Component<ComponentShowcaseProps, {}> {\r\n  public render() {\r\n    const { name, description, onVariableSelect, isDebugMode } = this.props;\r\n    const elements = Object.keys(description);\r\n\r\n    return (\r\n      <React.Fragment>\r\n        <Sticky side={'top'} offset={40}>\r\n          {isSticky => (\r\n            <h2\r\n              className={cn({\r\n                [jsStyles.heading()]: true,\r\n                [jsStyles.headingSticky()]: isSticky,\r\n              })}\r\n            >\r\n              {this.props.name}\r\n            </h2>\r\n          )}\r\n        </Sticky>\r\n        <table className={jsStyles.table()}>\r\n          <thead>\r\n            <tr>\r\n              <th style={{ width: 170 }}>ClassName</th>\r\n              <th style={{ width: 210 }}>Variable Name</th>\r\n              <th style={{ width: 250 }}>Default Value</th>\r\n              <th style={{ width: 250 }}>Flat Value</th>\r\n            </tr>\r\n          </thead>\r\n          <tbody>\r\n            {elements.map(el => (\r\n              <ComponentShowcaseRow\r\n                key={`${name}_${el}`}\r\n                element={el}\r\n                row={description[el]}\r\n                onVariableSelect={onVariableSelect}\r\n                isDebugMode={isDebugMode}\r\n              />\r\n            ))}\r\n          </tbody>\r\n        </table>\r\n      </React.Fragment>\r\n    );\r\n  }\r\n}\r\n\r\ninterface ComponentShowcaseRowProps {\r\n  element: string;\r\n  row: ComponentRowDescriptionType;\r\n  isDebugMode?: boolean;\r\n  onVariableSelect: (item: ComboBoxItem) => void;\r\n}\r\n\r\nclass ComponentShowcaseRow extends React.Component<ComponentShowcaseRowProps> {\r\n  public render() {\r\n    const { element: el, row, isDebugMode } = this.props;\r\n    const rowSpan = row.variables.length + 1;\r\n\r\n    return (\r\n      <React.Fragment>\r\n        <tr className={jsStyles.invisibleRow()}>\r\n          <td rowSpan={rowSpan}>\r\n            <Tooltip\r\n              render={this.getCss}\r\n              pos={'bottom left'}\r\n              allowedPositions={CSS_TOOLTIP_ALLOWED_POSITIONS}\r\n              trigger={'click'}\r\n              useWrapper={false}\r\n            >\r\n              <span className={jsStyles.elementName()}>.{el}</span>\r\n            </Tooltip>\r\n          </td>\r\n          <td className={jsStyles.invisibleCell()} />\r\n          <td className={jsStyles.invisibleCell()} />\r\n          <td className={jsStyles.invisibleCell()} />\r\n        </tr>\r\n        {row.variables.map(varName => {\r\n          const dependencies = row.dependencies[varName] || EMPTY_ARRAY;\r\n          const variableDefault = defaultVariables[varName] as string;\r\n          const variableFlat = flatVariables[varName] as string;\r\n          const hasNoVariables = isDebugMode && !variableDefault && !variableFlat;\r\n\r\n          return (\r\n            <tr key={`${el}_${varName}`} className={cn({ [jsStyles.suspiciousRow()]: hasNoVariables })}>\r\n              <td>\r\n                <VariableName\r\n                  variableName={varName as string}\r\n                  dependencies={dependencies}\r\n                  onVariableSelect={this.props.onVariableSelect}\r\n                />\r\n              </td>\r\n              <td>\r\n                <VariableValue value={variableDefault} />\r\n              </td>\r\n              <td>\r\n                <VariableValue value={variableFlat} />\r\n              </td>\r\n            </tr>\r\n          );\r\n        })}\r\n      </React.Fragment>\r\n    );\r\n  }\r\n\r\n  private getCss = () => {\r\n    return <span className={jsStyles.relativeCss()}>{this.props.row.contents}</span>;\r\n  };\r\n}\r\n\r\ninterface VariableNameProps {\r\n  variableName: string;\r\n  dependencies: Array<keyof Theme>;\r\n  onVariableSelect: (item: ComboBoxItem) => void;\r\n}\r\n\r\nclass VariableName extends React.Component<VariableNameProps> {\r\n  public render() {\r\n    return (\r\n      <span>\r\n        <span className={jsStyles.variableName()} onClick={this.handleVariableSelect}>\r\n          {this.props.variableName}\r\n        </span>\r\n        {this.props.dependencies.length > 0 && this.renderDependencies()}\r\n      </span>\r\n    );\r\n  }\r\n\r\n  private renderDependencies() {\r\n    const { dependencies, onVariableSelect } = this.props;\r\n    return (\r\n      <React.Fragment>\r\n        <br />\r\n        <br />\r\n        зависит от:\r\n        {dependencies.map(dependency => (\r\n          <DependencyName\r\n            key={`dependency_${dependency}`}\r\n            dependencyName={dependency}\r\n            onDependencySelect={onVariableSelect}\r\n          />\r\n        ))}\r\n      </React.Fragment>\r\n    );\r\n  }\r\n\r\n  private handleVariableSelect = () => {\r\n    const { variableName, onVariableSelect } = this.props;\r\n    if (onVariableSelect) {\r\n      onVariableSelect({ value: variableName, label: variableName });\r\n    }\r\n  };\r\n}\r\n\r\ninterface DependencyNameProps {\r\n  dependencyName: keyof Theme;\r\n  onDependencySelect: (item: ComboBoxItem) => void;\r\n}\r\nclass DependencyName extends React.Component<DependencyNameProps> {\r\n  public render() {\r\n    return (\r\n      <React.Fragment>\r\n        <br />\r\n        &ndash;{' '}\r\n        <Tooltip trigger={'hover'} render={this.getValues} pos={'right middle'}>\r\n          <span className={jsStyles.variableName()} onClick={this.handleDependencySelect}>\r\n            {this.props.dependencyName}\r\n          </span>\r\n        </Tooltip>\r\n      </React.Fragment>\r\n    );\r\n  }\r\n\r\n  private getValues = () => {\r\n    const dependencyName = this.props.dependencyName;\r\n    const dependencyDefault = defaultVariables[dependencyName] as string;\r\n    const dependencyFlat = flatVariables[dependencyName] as string;\r\n    return (\r\n      <React.Fragment>\r\n        <span>Default value: {<VariableValue value={dependencyDefault} />}</span>\r\n        <br />\r\n        <span>Flat value: {<VariableValue value={dependencyFlat} />}</span>\r\n      </React.Fragment>\r\n    );\r\n  };\r\n\r\n  private handleDependencySelect = () => {\r\n    const { dependencyName, onDependencySelect } = this.props;\r\n    if (onDependencySelect) {\r\n      onDependencySelect({ value: dependencyName, label: dependencyName });\r\n    }\r\n  };\r\n}\r\n\r\nconst VariableValue = (props: { value: string }) => {\r\n  const value = props.value;\r\n  const valueIsColor = isColor(value);\r\n  const valueIsGradient = isGradient(value);\r\n  const hasExample = valueIsColor || valueIsGradient;\r\n  let borderColor = 'transparent';\r\n  if (hasExample) {\r\n    borderColor = valueIsColor ? ColorFunctions.contrast(value) : '#000';\r\n  }\r\n\r\n  return (\r\n    <span className={cn({ [jsStyles.undefined()]: !value })}>\r\n      {hasExample && <span className={jsStyles.colorExample()} style={{ background: value, borderColor }} />}\r\n      {value || 'undefined'}\r\n    </span>\r\n  );\r\n};\r\n\r\nconst ShowUnusedVariables = (props: { diff: string[] }) => {\r\n  if (props.diff.length === 0) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <div className={jsStyles.unusedVariablesWarning()}>\r\n      Неиспользованные переменные ({props.diff.length}\r\n      ):\r\n      <ul>\r\n        {props.diff.sort().map(v => (\r\n          <li key={v}>{v}</li>\r\n        ))}\r\n      </ul>\r\n    </div>\r\n  );\r\n};\r\n\r\nfunction isColor(input: string) {\r\n  return !!input && (input.startsWith('#') || input.startsWith('rgb') || input.startsWith('hsl'));\r\n}\r\n\r\nfunction isGradient(input: string) {\r\n  return !!input && input.startsWith('linear-gradient');\r\n}\r\n"]}

package/components/internal/ThemeShowcase/ThemeShowcase.md

@@ -1,13 +0,0 @@
-### Таблица переменных
-
-Список использующихся переменных для каждого кастомизируемого компонента.
-<br/>
-Таблица фильтруется по названию переменной.
-<br/>
-Значения в колонке `Variable name` кликабельны.
-
-```jsx harmony
-import { ThemeShowcase } from '@skbkontur/react-ui/components/internal/ThemeShowcase/ThemeShowcase';
-
-<ThemeShowcase />;
-```

package/components/internal/ThemeShowcase/ThemeShowcase.styles.d.ts

@@ -1,20 +0,0 @@
-export declare const jsStyles: {
-    searchBar(): string;
-    heading(): string;
-    headingSticky(): string;
-    table(): string;
-    invisibleRow(): string;
-    suspiciousRow(): string;
-    invisibleCell(): string;
-    suspiciousCell(): string;
-    elementName(): string;
-    relativeCss(): string;
-    variableName(): string;
-    colorExample(): string;
-    undefined(): string;
-    unusedVariablesWarning(): string;
-    cssClassObject(): string;
-    cssClassName(): string;
-    cssThemeObject(): string;
-    cssThemeProp(): string;
-};

package/components/internal/ThemeShowcase/ThemeShowcase.styles.js

@@ -1,179 +0,0 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";function _templateObject18() {var data = _taggedTemplateLiteralLoose(["\n      color: #b77daa;\n    "]);_templateObject18 = function _templateObject18() {return data;};return data;}function _templateObject17() {var data = _taggedTemplateLiteralLoose(["\n      color: #ac4142;\n    "]);_templateObject17 = function _templateObject17() {return data;};return data;}function _templateObject16() {var data = _taggedTemplateLiteralLoose(["\n      color: #7f9a44;\n    "]);_templateObject16 = function _templateObject16() {return data;};return data;}function _templateObject15() {var data = _taggedTemplateLiteralLoose(["\n      color: #d28445;\n    "]);_templateObject15 = function _templateObject15() {return data;};return data;}function _templateObject14() {var data = _taggedTemplateLiteralLoose(["\n      padding: 16px;\n      margin: 20px 0;\n      background-color: #fff0bc;\n      border-radius: 3px;\n    "]);_templateObject14 = function _templateObject14() {return data;};return data;}function _templateObject13() {var data = _taggedTemplateLiteralLoose(["\n      text-decoration: line-through;\n    "]);_templateObject13 = function _templateObject13() {return data;};return data;}function _templateObject12() {var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      box-sizing: border-box;\n      width: 16px;\n      height: 16px;\n      border: 1px solid transparent;\n      margin-right: 4px;\n      vertical-align: -3px;\n    "]);_templateObject12 = function _templateObject12() {return data;};return data;}function _templateObject11() {var data = _taggedTemplateLiteralLoose(["\n      color: #b77daa;\n      font-weight: 400;\n      cursor: pointer;\n    "]);_templateObject11 = function _templateObject11() {return data;};return data;}function _templateObject10() {var data = _taggedTemplateLiteralLoose(["\n      white-space: pre;\n      color: #333;\n    "]);_templateObject10 = function _templateObject10() {return data;};return data;}function _templateObject9() {var data = _taggedTemplateLiteralLoose(["\n      color: #7f9a44;\n      font-weight: 400;\n      cursor: pointer;\n    "]);_templateObject9 = function _templateObject9() {return data;};return data;}function _templateObject8() {var data = _taggedTemplateLiteralLoose(["\n      background-color: #fff0bc;\n    "]);_templateObject8 = function _templateObject8() {return data;};return data;}function _templateObject7() {var data = _taggedTemplateLiteralLoose(["\n      padding: 0 !important;\n      height: 0 !important;\n      font-size: 0 !important;\n      line-height: 0 !important;\n      border: 0 none !important;\n      border-top: 1px solid #e8e8e8 !important;\n    "]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = _taggedTemplateLiteralLoose(["\n      background-color: red;\n    "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = _taggedTemplateLiteralLoose(["\n      padding: 0 !important;\n      height: 0 !important;\n\n      ", " tbody tr:not(&) > td {\n        border-top: 0 none;\n      }\n\n      ", " tbody tr&:hover ~ tr:not(&) {\n        background-color: #f8f8f8;\n      }\n\n      ", " tbody tr&:hover ~ & ~ tr {\n        background-color: transparent;\n      }\n    "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = _taggedTemplateLiteralLoose(["\n      width: 880px;\n      border-collapse: collapse;\n\n      & tbody tr:hover {\n        background-color: #f8f8f8;\n      }\n\n      & th {\n        text-align: left;\n        padding-left: 5px;\n      }\n\n      & td {\n        border-top: 1px solid #e8e8e8;\n        border-bottom: 1px solid #e8e8e8;\n        vertical-align: top;\n        padding: 10px 5px;\n      }\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = _taggedTemplateLiteralLoose(["\n      border-bottom: 1px solid #e8e8e8;\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = _taggedTemplateLiteralLoose(["\n      padding: 24px 0 16px 5px;\n      margin: 0;\n      background-color: #fff;\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = _taggedTemplateLiteralLoose(["\n      position: relative;\n      box-sizing: border-box;\n      height: 40px;\n      padding: 5px;\n      background-color: #fff;\n\n      &::after {\n        content: attr(data-perf-info);\n        position: absolute;\n        top: 11px;\n        right: 20px;\n        color: #808080;\n        height: 20px;\n        line-height: 20px;\n      }\n    "]);_templateObject = function _templateObject() {return data;};return data;}import { css, cssName, memoizeStyle } from '../../../lib/theming/Emotion';
-
-var styles = {
-  searchBar: function searchBar() {
-    return css(_templateObject());
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  },
-
-  heading: function heading() {
-    return css(_templateObject2());
-
-
-
-
-  },
-
-  headingSticky: function headingSticky() {
-    return css(_templateObject3());
-
-
-  },
-
-  table: function table() {
-    return css(_templateObject4());
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  },
-
-  invisibleRow: function invisibleRow() {
-    return css(_templateObject5(),
-
-
-
-    cssName(styles.table()),
-
-
-
-    cssName(styles.table()),
-
-
-
-    cssName(styles.table()));
-
-
-
-  },
-
-  suspiciousRow: function suspiciousRow() {
-    return css(_templateObject6());
-
-
-  },
-
-  //noinspection CssReplaceWithShorthandSafely
-  invisibleCell: function invisibleCell() {
-    return css(_templateObject7());
-
-
-
-
-
-
-
-  },
-
-  suspiciousCell: function suspiciousCell() {
-    return css(_templateObject8());
-
-
-  },
-
-  elementName: function elementName() {
-    return css(_templateObject9());
-
-
-
-
-  },
-
-  relativeCss: function relativeCss() {
-    return css(_templateObject10());
-
-
-
-  },
-
-  variableName: function variableName() {
-    return css(_templateObject11());
-
-
-
-
-  },
-
-  colorExample: function colorExample() {
-    return css(_templateObject12());
-
-
-
-
-
-
-
-
-  },
-
-  undefined: function undefined() {
-    return css(_templateObject13());
-
-
-  },
-
-  unusedVariablesWarning: function unusedVariablesWarning() {
-    return css(_templateObject14());
-
-
-
-
-
-  },
-
-  cssClassObject: function cssClassObject() {
-    return css(_templateObject15());
-
-
-  },
-
-  cssClassName: function cssClassName() {
-    return css(_templateObject16());
-
-
-  },
-
-  cssThemeObject: function cssThemeObject() {
-    return css(_templateObject17());
-
-
-  },
-
-  cssThemeProp: function cssThemeProp() {
-    return css(_templateObject18());
-
-
-  } };
-
-
-export var jsStyles = memoizeStyle(styles);