npm - @skbkontur/react-ui - Versions diffs - 0.0.0-375e096002 → 0.0.0-388db940ca - Mend

@skbkontur/react-ui 0.0.0-375e096002 → 0.0.0-388db940ca

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5512) hide show

package/cjs/internal/ThemeShowcase/ThemeShowcase.js DELETED Viewed

@@ -1,375 +0,0 @@
-"use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ThemeShowcase = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _DefaultTheme = require("../../lib/theming/themes/DefaultTheme");
-var _FlatTheme = require("../../lib/theming/themes/FlatTheme");
-var _ComboBox = require("../../components/ComboBox");
-var _Gapped = require("../../components/Gapped");
-var _Link = require("../../components/Link");
-var _Sticky = require("../../components/Sticky");
-var ColorFunctions = _interopRequireWildcard(require("../../lib/styles/ColorFunctions"));
-var _Tooltip = require("../../components/Tooltip");
-var _Supports = require("../../lib/Supports");
-var _VariablesCollector = require("./VariablesCollector");
-var _ThemeShowcase = require("./ThemeShowcase.styles");
-var EMPTY_ARRAY = [];
-var ALL_VARIABLES = Object.keys(_DefaultTheme.DEFAULT_THEME);var
-ThemeShowcase = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(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 = _VariablesCollector.ALL_USED_VARIABLES.includes(variable);if (!found) {_this2.variablesDiff.push(variable);}});}};_proto.render = function render() {var _this3 = this;if (!_Supports.IS_PROXY_SUPPORTED) {return /*#__PURE__*/_react.default.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.default.createElement(_Link.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 ? _VariablesCollector.COMPONENT_DESCRIPTIONS_BY_VARIABLE[selectedVariable.value] || {} : _VariablesCollector.COMPONENT_DESCRIPTIONS;var isDebugMode = this.props.isDebugMode;var callsCount = isDebugMode ? "(" + _VariablesCollector.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 " + _VariablesCollector.EXECUTION_TIME.toFixed(3) + "ms" : '';return /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { wrap: true, gap: 30, verticalAlign: 'top' }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: 'top' }, /*#__PURE__*/_react.default.createElement("div", { className: _ThemeShowcase.jsStyles.searchBar(), "data-perf-info": executionTime + " " + callsCount }, /*#__PURE__*/_react.default.createElement(_Gapped.Gapped, { gap: 15 }, /*#__PURE__*/_react.default.createElement(_ComboBox.ComboBox, { getItems: this.getItems, value: selectedVariable, onValueChange: this.handleVariableChange, onUnexpectedInput: this.handleUnexpectedVariableInput, placeholder: 'поиск по названию переменной' }), !!selectedVariable && /*#__PURE__*/_react.default.createElement(_Link.Link, { onClick: this.resetVariable }, "\u0441\u0431\u0440\u043E\u0441\u0438\u0442\u044C")))), Object.keys(descriptionsToRender).sort().map(function (componentName) {return /*#__PURE__*/_react.default.createElement(ComponentShowcase, { key: componentName, name: componentName, description: descriptionsToRender[componentName], isDebugMode: isDebugMode, onVariableSelect: _this3.handleVariableChange });})), /*#__PURE__*/_react.default.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 = _VariablesCollector.ALL_USED_VARIABLES;if (lowerCaseQuery) {allItems = _VariablesCollector.ALL_USED_VARIABLES.filter(function (usedVariable) {return usedVariable.toLowerCase().startsWith(lowerCaseQuery);});}return allItems.map(function (usedVariableName) {return { value: usedVariableName, label: usedVariableName };});};return ThemeShowcase;}(_react.default.Component);exports.ThemeShowcase = ThemeShowcase;var
-ComponentShowcase = /*#__PURE__*/function (_React$Component2) {(0, _inheritsLoose2.default)(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 /*#__PURE__*/(
-      _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
-      _react.default.createElement(_Sticky.Sticky, { side: 'top', offset: 40 },
-      function (isSticky) {var _cn;return /*#__PURE__*/(
-          _react.default.createElement("h2", {
-            className: (0, _classnames.default)((_cn = {}, _cn[
-            _ThemeShowcase.jsStyles.heading()] = true, _cn[
-            _ThemeShowcase.jsStyles.headingSticky()] = isSticky, _cn)) },
-          _this4.props.name));}), /*#__PURE__*/
-      _react.default.createElement("table", { className: _ThemeShowcase.jsStyles.table() }, /*#__PURE__*/
-      _react.default.createElement("thead", null, /*#__PURE__*/
-      _react.default.createElement("tr", null, /*#__PURE__*/
-      _react.default.createElement("th", { style: { width: 170 } }, "ClassName"), /*#__PURE__*/
-      _react.default.createElement("th", { style: { width: 210 } }, "Variable Name"), /*#__PURE__*/
-      _react.default.createElement("th", { style: { width: 250 } }, "Default Value"), /*#__PURE__*/
-      _react.default.createElement("th", { style: { width: 250 } }, "Flat Value"))), /*#__PURE__*/
-      _react.default.createElement("tbody", null,
-      elements.map(function (el) {return /*#__PURE__*/(
-          _react.default.createElement(ComponentShowcaseRow, {
-            key: name + "_" + el,
-            element: el,
-            row: description[el],
-            onVariableSelect: onVariableSelect,
-            isDebugMode: isDebugMode }));})))));
-  };return ComponentShowcase;}(_react.default.Component);var
-ComponentShowcaseRow = /*#__PURE__*/function (_React$Component3) {(0, _inheritsLoose2.default)(ComponentShowcaseRow, _React$Component3);function ComponentShowcaseRow() {return _React$Component3.apply(this, arguments) || this;}var _proto3 = ComponentShowcaseRow.prototype;_proto3.
-  render = function render() {var _this5 = 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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
-      _react.default.createElement("tr", { className: _ThemeShowcase.jsStyles.invisibleRow() }, /*#__PURE__*/
-      _react.default.createElement("td", { rowSpan: rowSpan }, /*#__PURE__*/
-      _react.default.createElement("span", { className: _ThemeShowcase.jsStyles.elementName() }, ".", el)), /*#__PURE__*/
-      _react.default.createElement("td", { className: _ThemeShowcase.jsStyles.invisibleCell() }), /*#__PURE__*/
-      _react.default.createElement("td", { className: _ThemeShowcase.jsStyles.invisibleCell() }), /*#__PURE__*/
-      _react.default.createElement("td", { className: _ThemeShowcase.jsStyles.invisibleCell() })),
-      row.variables.map(function (varName) {var _cn2;
-        var dependencies = row.dependencies[varName] || EMPTY_ARRAY;
-        var variableDefault = _DefaultTheme.DEFAULT_THEME[varName];
-        var variableFlat = _FlatTheme.FLAT_THEME[varName];
-        var hasNoVariables = isDebugMode && !variableDefault && !variableFlat;
-        return /*#__PURE__*/(
-          _react.default.createElement("tr", { key: el + "_" + varName, className: (0, _classnames.default)((_cn2 = {}, _cn2[_ThemeShowcase.jsStyles.suspiciousRow()] = hasNoVariables, _cn2)) }, /*#__PURE__*/
-          _react.default.createElement("td", null, /*#__PURE__*/
-          _react.default.createElement(VariableName, {
-            variableName: varName,
-            dependencies: dependencies,
-            onVariableSelect: _this5.props.onVariableSelect })), /*#__PURE__*/
-          _react.default.createElement("td", null, /*#__PURE__*/
-          _react.default.createElement(VariableValue, { value: variableDefault })), /*#__PURE__*/
-          _react.default.createElement("td", null, /*#__PURE__*/
-          _react.default.createElement(VariableValue, { value: variableFlat }))));
-      })));
-  };return ComponentShowcaseRow;}(_react.default.Component);var
-VariableName = /*#__PURE__*/function (_React$Component4) {(0, _inheritsLoose2.default)(VariableName, _React$Component4);function VariableName() {var _this6;for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {args[_key3] = arguments[_key3];}_this6 = _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;
-      if (onVariableSelect) {
-        onVariableSelect({ value: variableName, label: variableName });
-      }
-    };return _this6;}var _proto4 = VariableName.prototype;_proto4.render = function render() {return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", { className: _ThemeShowcase.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 /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "\u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043E\u0442:", dependencies.map(function (dependency) {return /*#__PURE__*/_react.default.createElement(DependencyName, { key: "dependency_" + dependency, dependencyName: dependency, onDependencySelect: onVariableSelect });}));};return VariableName;}(_react.default.Component);var
-DependencyName = /*#__PURE__*/function (_React$Component5) {(0, _inheritsLoose2.default)(DependencyName, _React$Component5);function DependencyName() {var _this7;for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {args[_key4] = arguments[_key4];}_this7 = _React$Component5.call.apply(_React$Component5, [this].concat(args)) || this;_this7.
-    getValues = function () {
-      var dependencyName = _this7.props.dependencyName;
-      var dependencyDefault = _DefaultTheme.DEFAULT_THEME[dependencyName];
-      var dependencyFlat = _FlatTheme.FLAT_THEME[dependencyName];
-      return /*#__PURE__*/(
-        _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
-        _react.default.createElement("span", null, "Default value: ", /*#__PURE__*/_react.default.createElement(VariableValue, { value: dependencyDefault })), /*#__PURE__*/
-        _react.default.createElement("br", null), /*#__PURE__*/
-        _react.default.createElement("span", null, "Flat value: ", /*#__PURE__*/_react.default.createElement(VariableValue, { value: dependencyFlat }))));
-    };_this7.
-    handleDependencySelect = function () {var _this7$props =
-      _this7.props,dependencyName = _this7$props.dependencyName,onDependencySelect = _this7$props.onDependencySelect;
-      if (onDependencySelect) {
-        onDependencySelect({ value: dependencyName, label: dependencyName });
-      }
-    };return _this7;}var _proto5 = DependencyName.prototype;_proto5.render = function render() {return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("br", null), "\u2013", ' ', /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, { trigger: 'hover', render: this.getValues, pos: 'right middle' }, /*#__PURE__*/_react.default.createElement("span", { className: _ThemeShowcase.jsStyles.variableName(), onClick: this.handleDependencySelect }, this.props.dependencyName)));};return DependencyName;}(_react.default.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 /*#__PURE__*/(
-    _react.default.createElement("span", { className: (0, _classnames.default)((_cn3 = {}, _cn3[_ThemeShowcase.jsStyles.undefined()] = !value, _cn3)) },
-    hasExample && /*#__PURE__*/_react.default.createElement("span", { className: _ThemeShowcase.jsStyles.colorExample(), style: { background: value, borderColor: borderColor } }),
-    value || 'undefined'));
-};
-var ShowUnusedVariables = function ShowUnusedVariables(props) {
-  if (props.diff.length === 0) {
-    return null;
-  }
-  return /*#__PURE__*/(
-    _react.default.createElement("div", { className: _ThemeShowcase.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, "):", /*#__PURE__*/
-    _react.default.createElement("ul", null,
-    props.diff.sort().map(function (v) {return /*#__PURE__*/(
-        _react.default.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/cjs/internal/ThemeShowcase/ThemeShowcase.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["ThemeShowcase.tsx"],"names":["EMPTY_ARRAY","ALL_VARIABLES","Object","keys","defaultVariables","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","ALL_USED_VARIABLES","includes","push","render","IS_PROXY_SUPPORTED","descriptionsToRender","COMPONENT_DESCRIPTIONS_BY_VARIABLE","value","COMPONENT_DESCRIPTIONS","callsCount","CALLS_COUNT","executionTime","EXECUTION_TIME","toFixed","jsStyles","searchBar","sort","map","componentName","componentWillUnmount","lowerCaseQuery","toLowerCase","trim","allItems","filter","usedVariable","startsWith","usedVariableName","label","React","Component","ComponentShowcase","name","description","onVariableSelect","elements","isSticky","heading","headingSticky","table","width","el","ComponentShowcaseRow","element","row","rowSpan","variables","invisibleRow","elementName","invisibleCell","varName","dependencies","variableDefault","variableFlat","flatVariables","hasNoVariables","suspiciousRow","VariableName","handleVariableSelect","variableName","renderDependencies","dependency","DependencyName","dependencyName","dependencyDefault","dependencyFlat","handleDependencySelect","onDependencySelect","VariableValue","valueIsColor","isColor","valueIsGradient","isGradient","hasExample","borderColor","ColorFunctions","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 '../../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 –{' '}\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/cjs/internal/ThemeShowcase/ThemeShowcase.md DELETED Viewed

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

package/cjs/internal/ThemeShowcase/ThemeShowcase.styles.d.ts DELETED Viewed

@@ -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/cjs/internal/ThemeShowcase/ThemeShowcase.styles.js DELETED Viewed

@@ -1,178 +0,0 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject18() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #b77daa;\n    "]);_templateObject18 = function _templateObject18() {return data;};return data;}function _templateObject17() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #ac4142;\n    "]);_templateObject17 = function _templateObject17() {return data;};return data;}function _templateObject16() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #7f9a44;\n    "]);_templateObject16 = function _templateObject16() {return data;};return data;}function _templateObject15() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #d28445;\n    "]);_templateObject15 = function _templateObject15() {return data;};return data;}function _templateObject14() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\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 = (0, _taggedTemplateLiteralLoose2.default)(["\n      text-decoration: line-through;\n    "]);_templateObject13 = function _templateObject13() {return data;};return data;}function _templateObject12() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\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 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #b77daa;\n      font-weight: 400;\n      cursor: pointer;\n    "]);_templateObject11 = function _templateObject11() {return data;};return data;}function _templateObject10() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      white-space: pre;\n      color: #333;\n    "]);_templateObject10 = function _templateObject10() {return data;};return data;}function _templateObject9() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #7f9a44;\n      font-weight: 400;\n    "]);_templateObject9 = function _templateObject9() {return data;};return data;}function _templateObject8() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      background-color: #fff0bc;\n    "]);_templateObject8 = function _templateObject8() {return data;};return data;}function _templateObject7() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\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 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background-color: red;\n    "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\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 = (0, _taggedTemplateLiteralLoose2.default)(["\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 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-bottom: 1px solid #e8e8e8;\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\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 = (0, _taggedTemplateLiteralLoose2.default)(["\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;}
-var styles = {
-  searchBar: function searchBar() {
-    return (0, _Emotion.css)(_templateObject());
-  },
-  heading: function heading() {
-    return (0, _Emotion.css)(_templateObject2());
-  },
-  headingSticky: function headingSticky() {
-    return (0, _Emotion.css)(_templateObject3());
-  },
-  table: function table() {
-    return (0, _Emotion.css)(_templateObject4());
-  },
-  invisibleRow: function invisibleRow() {
-    return (0, _Emotion.css)(_templateObject5(),
-    (0, _Emotion.cssName)(styles.table()),
-    (0, _Emotion.cssName)(styles.table()),
-    (0, _Emotion.cssName)(styles.table()));
-  },
-  suspiciousRow: function suspiciousRow() {
-    return (0, _Emotion.css)(_templateObject6());
-  },
-  //noinspection CssReplaceWithShorthandSafely
-  invisibleCell: function invisibleCell() {
-    return (0, _Emotion.css)(_templateObject7());
-  },
-  suspiciousCell: function suspiciousCell() {
-    return (0, _Emotion.css)(_templateObject8());
-  },
-  elementName: function elementName() {
-    return (0, _Emotion.css)(_templateObject9());
-  },
-  relativeCss: function relativeCss() {
-    return (0, _Emotion.css)(_templateObject10());
-  },
-  variableName: function variableName() {
-    return (0, _Emotion.css)(_templateObject11());
-  },
-  colorExample: function colorExample() {
-    return (0, _Emotion.css)(_templateObject12());
-  },
-  undefined: function undefined() {
-    return (0, _Emotion.css)(_templateObject13());
-  },
-  unusedVariablesWarning: function unusedVariablesWarning() {
-    return (0, _Emotion.css)(_templateObject14());
-  },
-  cssClassObject: function cssClassObject() {
-    return (0, _Emotion.css)(_templateObject15());
-  },
-  cssClassName: function cssClassName() {
-    return (0, _Emotion.css)(_templateObject16());
-  },
-  cssThemeObject: function cssThemeObject() {
-    return (0, _Emotion.css)(_templateObject17());
-  },
-  cssThemeProp: function cssThemeProp() {
-    return (0, _Emotion.css)(_templateObject18());
-  } };
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;

package/cjs/internal/ThemeShowcase/ThemeShowcase.styles.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["ThemeShowcase.styles.ts"],"names":["styles","searchBar","css","heading","headingSticky","table","invisibleRow","suspiciousRow","invisibleCell","suspiciousCell","elementName","relativeCss","variableName","colorExample","undefined","unusedVariablesWarning","cssClassObject","cssClassName","cssThemeObject","cssThemeProp","jsStyles"],"mappings":"8QAAA,oD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,SADa,uBACD;AACV,eAAOC,YAAP;;;;;;;;;;;;;;;;;AAiBD,GAnBY;;AAqBbC,EAAAA,OArBa,qBAqBH;AACR,eAAOD,YAAP;;;;;AAKD,GA3BY;;AA6BbE,EAAAA,aA7Ba,2BA6BG;AACd,eAAOF,YAAP;;;AAGD,GAjCY;;AAmCbG,EAAAA,KAnCa,mBAmCL;AACN,eAAOH,YAAP;;;;;;;;;;;;;;;;;;;;AAoBD,GAxDY;;AA0DbI,EAAAA,YA1Da,0BA0DE;AACb,eAAOJ,YAAP;;;;AAII,0BAAQF,MAAM,CAACK,KAAP,EAAR,CAJJ;;;;AAQI,0BAAQL,MAAM,CAACK,KAAP,EAAR,CARJ;;;;AAYI,0BAAQL,MAAM,CAACK,KAAP,EAAR,CAZJ;;;;AAgBD,GA3EY;;AA6EbE,EAAAA,aA7Ea,2BA6EG;AACd,eAAOL,YAAP;;;AAGD,GAjFY;;AAmFb;AACAM,EAAAA,aApFa,2BAoFG;AACd,eAAON,YAAP;;;;;;;;AAQD,GA7FY;;AA+FbO,EAAAA,cA/Fa,4BA+FI;AACf,eAAOP,YAAP;;;AAGD,GAnGY;;AAqGbQ,EAAAA,WArGa,yBAqGC;AACZ,eAAOR,YAAP;;;;AAID,GA1GY;;AA4GbS,EAAAA,WA5Ga,yBA4GC;AACZ,eAAOT,YAAP;;;;AAID,GAjHY;;AAmHbU,EAAAA,YAnHa,0BAmHE;AACb,eAAOV,YAAP;;;;;AAKD,GAzHY;;AA2HbW,EAAAA,YA3Ha,0BA2HE;AACb,eAAOX,YAAP;;;;;;;;;AASD,GArIY;;AAuIbY,EAAAA,SAvIa,uBAuID;AACV,eAAOZ,YAAP;;;AAGD,GA3IY;;AA6Iba,EAAAA,sBA7Ia,oCA6IY;AACvB,eAAOb,YAAP;;;;;;AAMD,GApJY;;AAsJbc,EAAAA,cAtJa,4BAsJI;AACf,eAAOd,YAAP;;;AAGD,GA1JY;;AA4Jbe,EAAAA,YA5Ja,0BA4JE;AACb,eAAOf,YAAP;;;AAGD,GAhKY;;AAkKbgB,EAAAA,cAlKa,4BAkKI;AACf,eAAOhB,YAAP;;;AAGD,GAtKY;;AAwKbiB,EAAAA,YAxKa,0BAwKE;AACb,eAAOjB,YAAP;;;AAGD,GA5KY,EAAf;;;AA+KO,IAAMkB,QAAQ,GAAG,2BAAapB,MAAb,CAAjB,C","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n searchBar() {\r\n return css`\r\n position: relative;\r\n box-sizing: border-box;\r\n height: 40px;\r\n padding: 5px;\r\n background-color: #fff;\r\n\r\n &::after {\r\n content: attr(data-perf-info);\r\n position: absolute;\r\n top: 11px;\r\n right: 20px;\r\n color: #808080;\r\n height: 20px;\r\n line-height: 20px;\r\n }\r\n `;\r\n },\r\n\r\n heading() {\r\n return css`\r\n padding: 24px 0 16px 5px;\r\n margin: 0;\r\n background-color: #fff;\r\n `;\r\n },\r\n\r\n headingSticky() {\r\n return css`\r\n border-bottom: 1px solid #e8e8e8;\r\n `;\r\n },\r\n\r\n table() {\r\n return css`\r\n width: 880px;\r\n border-collapse: collapse;\r\n\r\n & tbody tr:hover {\r\n background-color: #f8f8f8;\r\n }\r\n\r\n & th {\r\n text-align: left;\r\n padding-left: 5px;\r\n }\r\n\r\n & td {\r\n border-top: 1px solid #e8e8e8;\r\n border-bottom: 1px solid #e8e8e8;\r\n vertical-align: top;\r\n padding: 10px 5px;\r\n }\r\n `;\r\n },\r\n\r\n invisibleRow() {\r\n return css`\r\n padding: 0 !important;\r\n height: 0 !important;\r\n\r\n ${cssName(styles.table())} tbody tr:not(&) > td {\r\n border-top: 0 none;\r\n }\r\n\r\n ${cssName(styles.table())} tbody tr&:hover ~ tr:not(&) {\r\n background-color: #f8f8f8;\r\n }\r\n\r\n ${cssName(styles.table())} tbody tr&:hover ~ & ~ tr {\r\n background-color: transparent;\r\n }\r\n `;\r\n },\r\n\r\n suspiciousRow() {\r\n return css`\r\n background-color: red;\r\n `;\r\n },\r\n\r\n //noinspection CssReplaceWithShorthandSafely\r\n invisibleCell() {\r\n return css`\r\n padding: 0 !important;\r\n height: 0 !important;\r\n font-size: 0 !important;\r\n line-height: 0 !important;\r\n border: 0 none !important;\r\n border-top: 1px solid #e8e8e8 !important;\r\n `;\r\n },\r\n\r\n suspiciousCell() {\r\n return css`\r\n background-color: #fff0bc;\r\n `;\r\n },\r\n\r\n elementName() {\r\n return css`\r\n color: #7f9a44;\r\n font-weight: 400;\r\n `;\r\n },\r\n\r\n relativeCss() {\r\n return css`\r\n white-space: pre;\r\n color: #333;\r\n `;\r\n },\r\n\r\n variableName() {\r\n return css`\r\n color: #b77daa;\r\n font-weight: 400;\r\n cursor: pointer;\r\n `;\r\n },\r\n\r\n colorExample() {\r\n return css`\r\n display: inline-block;\r\n box-sizing: border-box;\r\n width: 16px;\r\n height: 16px;\r\n border: 1px solid transparent;\r\n margin-right: 4px;\r\n vertical-align: -3px;\r\n `;\r\n },\r\n\r\n undefined() {\r\n return css`\r\n text-decoration: line-through;\r\n `;\r\n },\r\n\r\n unusedVariablesWarning() {\r\n return css`\r\n padding: 16px;\r\n margin: 20px 0;\r\n background-color: #fff0bc;\r\n border-radius: 3px;\r\n `;\r\n },\r\n\r\n cssClassObject() {\r\n return css`\r\n color: #d28445;\r\n `;\r\n },\r\n\r\n cssClassName() {\r\n return css`\r\n color: #7f9a44;\r\n `;\r\n },\r\n\r\n cssThemeObject() {\r\n return css`\r\n color: #ac4142;\r\n `;\r\n },\r\n\r\n cssThemeProp() {\r\n return css`\r\n color: #b77daa;\r\n `;\r\n },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}