@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0fe669bb2d

package/internal/ThemeShowcase/ThemeShowcase/ThemeShowcase.js

@@ -1,8 +1,8 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
-import cn from 'classnames';
-import { DEFAULT_THEME_OLD as defaultVariables } from "../../../lib/theming/themes/DefaultThemeOld";
-import { FLAT_THEME_OLD as flatVariables } from "../../../lib/theming/themes/FlatThemeOld";
+import { isColor } from "../../../lib/styles/ColorHelpers";
+import { DEFAULT_THEME as defaultVariables } from "../../../lib/theming/themes/DefaultTheme";
+import { DARK_THEME as darkVariables } from "../../../lib/theming/themes/DarkTheme";
 import { ComboBox } from "../../../components/ComboBox";
 import { Gapped } from "../../../components/Gapped";
 import { Link } from "../../../components/Link";
@@ -10,21 +10,19 @@ import { Sticky } from "../../../components/Sticky";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
 import { Tooltip } from "../../../components/Tooltip";
 import { IS_PROXY_SUPPORTED } from "../../../lib/Supports";
+import { cx } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ALL_USED_VARIABLES, CALLS_COUNT, COMPONENT_DESCRIPTIONS, COMPONENT_DESCRIPTIONS_BY_VARIABLE, EXECUTION_TIME } from "../VariablesCollector";
-import { jsStyles } from "../ThemeShowcase.styles";
+import { styles } from "../ThemeShowcase.styles";
 var EMPTY_ARRAY = [];
 var ALL_VARIABLES = Object.keys(defaultVariables);
 export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ThemeShowcase, _React$Component);
 
-  function ThemeShowcase() {
+  function ThemeShowcase(props) {
     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 = _React$Component.call(this, props) || this;
     _this.state = {};
     _this.isUnmounting = false;
     _this.variablesDiff = [];
@@ -46,9 +44,9 @@ export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
 
       if (values.length > 0) {
         return values[0];
-      } else {
-        return _this.resetVariable();
       }
+
+      return _this.resetVariable();
     };
 
     _this.resetVariable = function () {
@@ -59,27 +57,23 @@ export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
       }
     };
 
-    return _this;
-  }
-
-  var _proto = ThemeShowcase.prototype;
-
-  _proto.UNSAFE_componentWillMount = function UNSAFE_componentWillMount() {
-    var _this2 = this;
-
-    if (this.props.isDebugMode) {
+    if (props.isDebugMode) {
       ALL_VARIABLES.forEach(function (variable) {
         var found = ALL_USED_VARIABLES.includes(variable);
 
         if (!found) {
-          _this2.variablesDiff.push(variable);
+          _this.variablesDiff.push(variable);
         }
       });
     }
-  };
+
+    return _this;
+  }
+
+  var _proto = ThemeShowcase.prototype;
 
   _proto.render = function render() {
-    var _this3 = this;
+    var _this2 = this;
 
     if (!IS_PROXY_SUPPORTED) {
       return /*#__PURE__*/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", ' ', /*#__PURE__*/React.createElement(Link, {
@@ -93,36 +87,38 @@ export var ThemeShowcase = /*#__PURE__*/function (_React$Component) {
     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 /*#__PURE__*/React.createElement(Gapped, {
-      wrap: true,
-      gap: 30,
-      verticalAlign: 'top'
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Sticky, {
-      side: 'top'
-    }, /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.searchBar(),
-      "data-perf-info": executionTime + " " + callsCount
-    }, /*#__PURE__*/React.createElement(Gapped, {
-      gap: 15
-    }, /*#__PURE__*/React.createElement(ComboBox, {
-      getItems: this.getItems,
-      value: selectedVariable,
-      onValueChange: this.handleVariableChange,
-      onUnexpectedInput: this.handleUnexpectedVariableInput,
-      placeholder: 'поиск по названию переменной'
-    }), !!selectedVariable && /*#__PURE__*/React.createElement(Link, {
-      onClick: this.resetVariable
-    }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {
-      return /*#__PURE__*/React.createElement(ComponentShowcase, {
-        key: componentName,
-        name: componentName,
-        description: descriptionsToRender[componentName],
-        isDebugMode: isDebugMode,
-        onVariableSelect: _this3.handleVariableChange
-      });
-    })), /*#__PURE__*/React.createElement(ShowUnusedVariables, {
-      diff: this.variablesDiff
-    }));
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      return /*#__PURE__*/React.createElement(Gapped, {
+        wrap: true,
+        gap: 30,
+        verticalAlign: 'top'
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Sticky, {
+        side: 'top'
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.searchBar(theme),
+        "data-perf-info": executionTime + " " + callsCount
+      }, /*#__PURE__*/React.createElement(Gapped, {
+        gap: 15
+      }, /*#__PURE__*/React.createElement(ComboBox, {
+        getItems: _this2.getItems,
+        value: selectedVariable,
+        onValueChange: _this2.handleVariableChange,
+        onUnexpectedInput: _this2.handleUnexpectedVariableInput,
+        placeholder: 'поиск по названию переменной'
+      }), !!selectedVariable && /*#__PURE__*/React.createElement(Link, {
+        onClick: _this2.resetVariable
+      }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {
+        return /*#__PURE__*/React.createElement(ComponentShowcase, {
+          key: componentName,
+          name: componentName,
+          description: descriptionsToRender[componentName],
+          isDebugMode: isDebugMode,
+          onVariableSelect: _this2.handleVariableChange
+        });
+      })), /*#__PURE__*/React.createElement(ShowUnusedVariables, {
+        diff: _this2.variablesDiff
+      }));
+    });
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
@@ -160,7 +156,7 @@ var ComponentShowcase = /*#__PURE__*/function (_React$Component2) {
   var _proto2 = ComponentShowcase.prototype;
 
   _proto2.render = function render() {
-    var _this4 = this;
+    var _this3 = this;
 
     var _this$props = this.props,
         name = _this$props.name,
@@ -168,42 +164,48 @@ var ComponentShowcase = /*#__PURE__*/function (_React$Component2) {
         onVariableSelect = _this$props.onVariableSelect,
         isDebugMode = _this$props.isDebugMode;
     var elements = Object.keys(description);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Sticky, {
-      side: 'top',
-      offset: 40
-    }, function (isSticky) {
-      var _cn;
-
-      return /*#__PURE__*/React.createElement("h2", {
-        className: cn((_cn = {}, _cn[jsStyles.heading()] = true, _cn[jsStyles.headingSticky()] = isSticky, _cn))
-      }, _this4.props.name);
-    }), /*#__PURE__*/React.createElement("table", {
-      className: jsStyles.table()
-    }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
-      style: {
-        width: 170
-      }
-    }, "ClassName"), /*#__PURE__*/React.createElement("th", {
-      style: {
-        width: 210
-      }
-    }, "Variable Name"), /*#__PURE__*/React.createElement("th", {
-      style: {
-        width: 250
-      }
-    }, "Default Value"), /*#__PURE__*/React.createElement("th", {
-      style: {
-        width: 250
-      }
-    }, "Flat Value"))), /*#__PURE__*/React.createElement("tbody", null, elements.map(function (el) {
-      return /*#__PURE__*/React.createElement(ComponentShowcaseRow, {
-        key: name + "_" + el,
-        element: el,
-        row: description[el],
-        onVariableSelect: onVariableSelect,
-        isDebugMode: isDebugMode
-      });
-    }))));
+    return elements.length ? /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Sticky, {
+        side: 'top',
+        offset: 40
+      }, function (isSticky) {
+        var _cx;
+
+        return /*#__PURE__*/React.createElement("h2", {
+          className: cx((_cx = {}, _cx[styles.heading(theme)] = true, _cx[styles.headingSticky()] = isSticky, _cx))
+        }, _this3.props.name);
+      }), /*#__PURE__*/React.createElement("table", {
+        className: styles.table()
+      }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+        className: styles.headerCell(),
+        style: {
+          width: 170
+        }
+      }, "ClassName"), /*#__PURE__*/React.createElement("th", {
+        className: styles.headerCell(),
+        style: {
+          width: 210
+        }
+      }, "Variable Name"), /*#__PURE__*/React.createElement("th", {
+        className: styles.headerCell(),
+        style: {
+          width: 250
+        }
+      }, "Default Value"), /*#__PURE__*/React.createElement("th", {
+        className: styles.headerCell(),
+        style: {
+          width: 250
+        }
+      }, "Dark Value"))), /*#__PURE__*/React.createElement("tbody", null, elements.map(function (el) {
+        return /*#__PURE__*/React.createElement(ComponentShowcaseRow, {
+          key: name + "_" + el,
+          element: el,
+          row: description[el],
+          onVariableSelect: onVariableSelect,
+          isDebugMode: isDebugMode
+        });
+      }))));
+    }) : null;
   };
 
   return ComponentShowcase;
@@ -219,45 +221,56 @@ var ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {
   var _proto3 = ComponentShowcaseRow.prototype;
 
   _proto3.render = function render() {
-    var _this5 = this;
+    var _this4 = 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 /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
-      className: jsStyles.invisibleRow()
-    }, /*#__PURE__*/React.createElement("td", {
-      rowSpan: rowSpan
-    }, /*#__PURE__*/React.createElement("span", {
-      className: jsStyles.elementName()
-    }, ".", el)), /*#__PURE__*/React.createElement("td", {
-      className: jsStyles.invisibleCell()
-    }), /*#__PURE__*/React.createElement("td", {
-      className: jsStyles.invisibleCell()
-    }), /*#__PURE__*/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 /*#__PURE__*/React.createElement("tr", {
-        key: el + "_" + varName,
-        className: cn((_cn2 = {}, _cn2[jsStyles.suspiciousRow()] = hasNoVariables, _cn2))
-      }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(VariableName, {
-        variableName: varName,
-        dependencies: dependencies,
-        onVariableSelect: _this5.props.onVariableSelect
-      })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(VariableValue, {
-        value: variableDefault
-      })), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(VariableValue, {
-        value: variableFlat
-      })));
-    }));
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      var _cx2;
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("tr", {
+        className: cx(styles.invisibleRow(), (_cx2 = {}, _cx2[styles.invisibleDarkRow()] = theme === darkVariables, _cx2))
+      }, /*#__PURE__*/React.createElement("td", {
+        className: cx(styles.cell(), styles.majorCell()),
+        rowSpan: rowSpan
+      }, /*#__PURE__*/React.createElement("span", {
+        className: styles.elementName()
+      }, ".", el)), /*#__PURE__*/React.createElement("td", {
+        className: styles.invisibleCell()
+      }), /*#__PURE__*/React.createElement("td", {
+        className: styles.invisibleCell()
+      }), /*#__PURE__*/React.createElement("td", {
+        className: styles.invisibleCell()
+      })), row.variables.map(function (varName) {
+        var _cx3;
+
+        var dependencies = row.dependencies[varName] || EMPTY_ARRAY;
+        var variableDefault = defaultVariables[varName];
+        var variableDark = darkVariables[varName];
+        var hasNoVariables = isDebugMode && !variableDefault;
+        return /*#__PURE__*/React.createElement("tr", {
+          key: el + "_" + varName,
+          className: cx(styles.row(), (_cx3 = {}, _cx3[styles.suspiciousRow()] = hasNoVariables, _cx3[styles.darkRow()] = theme === darkVariables, _cx3))
+        }, /*#__PURE__*/React.createElement("td", {
+          className: styles.cell()
+        }, /*#__PURE__*/React.createElement(VariableName, {
+          variableName: varName,
+          dependencies: dependencies,
+          onVariableSelect: _this4.props.onVariableSelect
+        })), /*#__PURE__*/React.createElement("td", {
+          className: styles.cell()
+        }, /*#__PURE__*/React.createElement(VariableValue, {
+          value: variableDefault
+        })), /*#__PURE__*/React.createElement("td", {
+          className: styles.cell()
+        }, /*#__PURE__*/React.createElement(VariableValue, {
+          value: variableDark
+        })));
+      }));
+    });
   };
 
   return ComponentShowcaseRow;
@@ -267,18 +280,18 @@ var VariableName = /*#__PURE__*/function (_React$Component4) {
   _inheritsLoose(VariableName, _React$Component4);
 
   function VariableName() {
-    var _this6;
+    var _this5;
 
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
 
-    _this6 = _React$Component4.call.apply(_React$Component4, [this].concat(args)) || this;
+    _this5 = _React$Component4.call.apply(_React$Component4, [this].concat(args)) || this;
 
-    _this6.handleVariableSelect = function () {
-      var _this6$props = _this6.props,
-          variableName = _this6$props.variableName,
-          onVariableSelect = _this6$props.onVariableSelect;
+    _this5.handleVariableSelect = function () {
+      var _this5$props = _this5.props,
+          variableName = _this5$props.variableName,
+          onVariableSelect = _this5$props.onVariableSelect;
 
       if (onVariableSelect) {
         onVariableSelect({
@@ -288,14 +301,14 @@ var VariableName = /*#__PURE__*/function (_React$Component4) {
       }
     };
 
-    return _this6;
+    return _this5;
   }
 
   var _proto4 = VariableName.prototype;
 
   _proto4.render = function render() {
     return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", {
-      className: jsStyles.variableName(),
+      className: styles.variableName(),
       onClick: this.handleVariableSelect
     }, this.props.variableName), this.props.dependencies.length > 0 && this.renderDependencies());
   };
@@ -320,29 +333,29 @@ var DependencyName = /*#__PURE__*/function (_React$Component5) {
   _inheritsLoose(DependencyName, _React$Component5);
 
   function DependencyName() {
-    var _this7;
+    var _this6;
 
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
     }
 
-    _this7 = _React$Component5.call.apply(_React$Component5, [this].concat(args)) || this;
+    _this6 = _React$Component5.call.apply(_React$Component5, [this].concat(args)) || this;
 
-    _this7.getValues = function () {
-      var dependencyName = _this7.props.dependencyName;
+    _this6.getValues = function () {
+      var dependencyName = _this6.props.dependencyName;
       var dependencyDefault = defaultVariables[dependencyName];
-      var dependencyFlat = flatVariables[dependencyName];
+      var dependencyDark = darkVariables[dependencyName];
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Default value: ", /*#__PURE__*/React.createElement(VariableValue, {
         value: dependencyDefault
-      })), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("span", null, "Flat value: ", /*#__PURE__*/React.createElement(VariableValue, {
-        value: dependencyFlat
+      })), /*#__PURE__*/React.createElement("span", null, "Dark value: ", /*#__PURE__*/React.createElement(VariableValue, {
+        value: dependencyDark
       })));
     };
 
-    _this7.handleDependencySelect = function () {
-      var _this7$props = _this7.props,
-          dependencyName = _this7$props.dependencyName,
-          onDependencySelect = _this7$props.onDependencySelect;
+    _this6.handleDependencySelect = function () {
+      var _this6$props = _this6.props,
+          dependencyName = _this6$props.dependencyName,
+          onDependencySelect = _this6$props.onDependencySelect;
 
       if (onDependencySelect) {
         onDependencySelect({
@@ -352,7 +365,7 @@ var DependencyName = /*#__PURE__*/function (_React$Component5) {
       }
     };
 
-    return _this7;
+    return _this6;
   }
 
   var _proto5 = DependencyName.prototype;
@@ -363,7 +376,7 @@ var DependencyName = /*#__PURE__*/function (_React$Component5) {
       render: this.getValues,
       pos: 'right middle'
     }, /*#__PURE__*/React.createElement("span", {
-      className: jsStyles.variableName(),
+      className: styles.variableName(),
       onClick: this.handleDependencySelect
     }, this.props.dependencyName)));
   };
@@ -372,7 +385,7 @@ var DependencyName = /*#__PURE__*/function (_React$Component5) {
 }(React.Component);
 
 var VariableValue = function VariableValue(props) {
-  var _cn3;
+  var _cx4;
 
   var value = props.value;
   var valueIsColor = isColor(value);
@@ -385,9 +398,9 @@ var VariableValue = function VariableValue(props) {
   }
 
   return /*#__PURE__*/React.createElement("span", {
-    className: cn((_cn3 = {}, _cn3[jsStyles.undefined()] = !value, _cn3))
+    className: cx((_cx4 = {}, _cx4[styles.undefined()] = !value, _cx4))
   }, hasExample && /*#__PURE__*/React.createElement("span", {
-    className: jsStyles.colorExample(),
+    className: styles.colorExample(),
     style: {
       background: value,
       borderColor: borderColor
@@ -401,7 +414,7 @@ var ShowUnusedVariables = function ShowUnusedVariables(props) {
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: jsStyles.unusedVariablesWarning()
+    className: styles.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, "):", /*#__PURE__*/React.createElement("ul", null, props.diff.sort().map(function (v) {
     return /*#__PURE__*/React.createElement("li", {
       key: v
@@ -409,10 +422,6 @@ var ShowUnusedVariables = function ShowUnusedVariables(props) {
   })));
 };
 
-function isColor(input) {
-  return !!input && (input.startsWith('#') || input.startsWith('rgb') || input.startsWith('hsl'));
-}
-
 function isGradient(input) {
   return !!input && input.startsWith('linear-gradient');
 }

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

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

package/internal/ThemeShowcase/ThemeShowcase.d.ts

@@ -10,7 +10,7 @@ export declare class ThemeShowcase extends React.Component<ShowcaseProps, Showca
     state: ShowcaseState;
     private isUnmounting;
     private variablesDiff;
-    UNSAFE_componentWillMount(): void;
+    constructor(props: ShowcaseProps);
     render(): JSX.Element;
     componentWillUnmount(): void;
     private getValues;