@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

package/internal/ThemePlayground/VariableValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableValue.js","sourceRoot":"","sources":["../../../internal/ThemePlayground/VariableValue.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ToolPencilLineIcon16Regular } from '@skbkontur/icons/icons/ToolPencilLineIcon/ToolPencilLineIcon16Regular.js';\nimport { XIcon16Regular } from '@skbkontur/icons/icons/XIcon/XIcon16Regular.js';\nimport { EventEmitter } from 'eventemitter3';\n\nimport { isColor } from '../../lib/styles/ColorHelpers.js';\nimport { Input } from '../../components/Input/index.js';\nimport { Gapped } from '../../components/Gapped/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { Link } from '../../components/Link/index.js';\nimport { Hint } from '../../components/Hint/index.js';\nimport { isFunction } from '../../lib/utils.js';\nimport { cx } from '../../lib/theming/Emotion.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\n\nimport { styles } from './Playground.styles.js';\n\nconst emitter = new EventEmitter();\n\nexport interface VariableValueProps {\n  onChange: (variable: keyof Theme, value: string) => void;\n  value: string;\n  isError: boolean;\n  variable: string;\n  theme: Theme;\n  baseVariables: Array<keyof Theme>;\n  deprecated?: boolean;\n}\n\nexport interface VariableValueState {\n  value: string;\n  editing: boolean;\n}\n\ntype DefaultProps = Required<Pick<VariableValueProps, 'deprecated'>>;\n\nexport class VariableValue extends React.Component<VariableValueProps, VariableValueState> {\n  public static defaultProps: DefaultProps = {\n    deprecated: false,\n  };\n  private getProps = createPropsGetter(VariableValue.defaultProps);\n  public state: VariableValueState = {\n    value: this.props.value,\n    editing: false,\n  };\n  private subscription: { remove: () => void } | null = null;\n  private rootElement: HTMLElement | null = null;\n  private readonly debounceTimeout = 500;\n  private debounceInterval: number | undefined = undefined;\n\n  public render() {\n    const { variable, theme, baseVariables } = this.props;\n    const deprecated = this.getProps().deprecated;\n    return (\n      <div className={styles.variable(theme)} ref={this.rootRef} tabIndex={0}>\n        <div\n          className={cx(styles.variableName(theme), { [styles.deprecated()]: deprecated })}\n          title={variable}\n        >{`${variable}: `}</div>\n        {baseVariables.length > 0 && !this.state.editing ? this.renderBaseVariableLink() : this.renderInputWrapper()}\n      </div>\n    );\n  }\n\n  public componentDidMount(): void {\n    if (!this.subscription) {\n      emitter.addListener('clicked', this.emitterEventHandler);\n      this.subscription = {\n        remove: () => {\n          emitter.removeListener('clicked', this.emitterEventHandler);\n        },\n      };\n    }\n  }\n\n  public componentDidUpdate(prevProps: VariableValueProps) {\n    if (prevProps.value !== this.props.value) {\n      this.setState({ value: this.props.value });\n    }\n  }\n\n  public componentWillUnmount(): void {\n    if (this.subscription) {\n      this.subscription.remove();\n    }\n    if (this.debounceInterval !== undefined) {\n      clearInterval(this.debounceInterval);\n    }\n  }\n\n  private renderBaseVariableLink = () => {\n    const baseVariables = this.props.baseVariables;\n    return (\n      <div className={styles.baseVariableRoot()}>\n        {this.colorIcon()}\n        <div className={styles.baseLinkWrapper()}>\n          <Gapped>\n            <div style={{ textAlign: 'right' }}>\n              <Gapped vertical>\n                {baseVariables.map((v) => (\n                  <BaseVariableLink key={v} baseVariable={v} emitClickEvent={this.emitClickEvent} />\n                ))}\n              </Gapped>\n            </div>\n            <Hint text={'Изменить значение'}>\n              <Link icon={<ToolPencilLineIcon16Regular />} onClick={this.handleEditLinkClick} />\n            </Hint>\n          </Gapped>\n        </div>\n      </div>\n    );\n  };\n\n  private renderInputWrapper = () => {\n    return this.state.editing ? (\n      <Gapped>\n        {this.renderInput()}\n        {this.renderRollbackIcon()}\n      </Gapped>\n    ) : (\n      this.renderInput()\n    );\n  };\n\n  private renderInput() {\n    return (\n      <Input\n        leftIcon={isColorExtended(this.state.value) && this.colorIcon()}\n        value={this.state.value}\n        onValueChange={this.handleChange}\n        onBlur={this.handleBlur}\n        align={'right'}\n        width={this.state.editing ? 225 : 250}\n        error={this.props.isError}\n      />\n    );\n  }\n\n  private renderRollbackIcon() {\n    return (\n      <Hint text={'Вернуться к базовой переменной'}>\n        <div className={styles.linkRoot()}>\n          <Link icon={<XIcon16Regular />} onClick={this.rollbackToBaseVariable} />\n        </div>\n      </Hint>\n    );\n  }\n\n  private rootRef = (instance: HTMLElement | null) => {\n    this.rootElement = instance;\n  };\n\n  private colorIcon = () => {\n    return <div className={styles.colorIcon()} style={{ background: this.state.value }} />;\n  };\n\n  private handleEditLinkClick = () => {\n    this.setState({\n      editing: true,\n    });\n  };\n\n  private rollbackToBaseVariable = () => {\n    this.setState({\n      editing: false,\n      value: this.props.value,\n    });\n  };\n\n  private emitClickEvent = (variable: string | number) => {\n    emitter.emit('clicked', variable);\n  };\n\n  private handleChange = (value: string) => {\n    this.setState({\n      value,\n    });\n\n    if (this.debounceInterval === undefined) {\n      this.debounceInterval = window.setInterval(this.debounceHandler, this.debounceTimeout);\n    }\n  };\n\n  private debounceHandler = () => {\n    const { variable, onChange } = this.props;\n\n    onChange(variable as keyof Theme, this.state.value);\n\n    clearInterval(this.debounceInterval);\n    this.debounceInterval = undefined;\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      editing: false,\n    });\n  };\n\n  private emitterEventHandler = (name: keyof Theme) => {\n    if (name === this.props.variable && this.rootElement) {\n      this.rootElement.focus();\n    }\n  };\n}\n\ninterface BaseVariableLinkProps {\n  baseVariable: string | number;\n  emitClickEvent: (baseVariable: string | number) => void;\n}\nclass BaseVariableLink extends React.Component<BaseVariableLinkProps> {\n  public render() {\n    return <Link onClick={this.emitClickEvent}>{this.props.baseVariable}</Link>;\n  }\n  private emitClickEvent = () => {\n    this.props.emitClickEvent(this.props.baseVariable);\n  };\n}\n\ntype Color = string | (() => string);\n\nconst getColorValue = (color: Color) => {\n  if (isFunction(color)) {\n    return color();\n  }\n\n  return color;\n};\n\nfunction isColorExtended(color: Color) {\n  const colorValue = getColorValue(color);\n\n  const style = new Option().style;\n  style.color = colorValue;\n\n  if (colorValue) {\n    return isColor(colorValue) || style.color === colorValue;\n  }\n\n  return false;\n}\n"]}

package/internal/ThemePlayground/__creevey__/ThemeProvider.creevey.d.mts

@@ -1 +1 @@
-export {};
+export {};

package/internal/ThemePlayground/__creevey__/ThemeProvider.creevey.mjs

@@ -0,0 +1,160 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { story, kind, test } from 'creevey';
+import { delay } from '../../../lib/delay.mjs';
+kind('ThemeProvider', function () {
+    story('Playground', function (_a) {
+        var setStoryParameters = _a.setStoryParameters;
+        setStoryParameters({
+            skip: {
+                'repeating tests': {
+                    tests: ['theme 2022 top', 'theme 2022 bottom', 'theme 2022 dark top', 'theme 2022 dark bottom'],
+                    in: /^(?!\b(chrome2022|firefox2022)\b)/,
+                },
+            },
+        });
+        test('theme 2022 top', function (context) { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: return [4 /*yield*/, context.webdriver
+                            .actions({ bridge: true })
+                            .click(context.webdriver.findElement({ css: '[data-tab-id="lightTheme"]' }))
+                            .perform()];
+                    case 1:
+                        _c.sent();
+                        return [4 /*yield*/, delay(500)];
+                    case 2:
+                        _c.sent();
+                        _b = (_a = context).matchImage;
+                        return [4 /*yield*/, context.webdriver.takeScreenshot()];
+                    case 3: return [4 /*yield*/, _b.apply(_a, [_c.sent(), 'theme 2022 top'])];
+                    case 4:
+                        _c.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        test('theme 2022 bottom', function (context) { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: return [4 /*yield*/, context.webdriver
+                            .actions({ bridge: true })
+                            .click(context.webdriver.findElement({ css: '[data-tab-id="lightTheme"]' }))
+                            .perform()];
+                    case 1:
+                        _c.sent();
+                        return [4 /*yield*/, context.webdriver.executeScript(function () {
+                                document.documentElement.scrollTop = document.documentElement.scrollHeight;
+                            })];
+                    case 2:
+                        _c.sent();
+                        return [4 /*yield*/, delay(1000)];
+                    case 3:
+                        _c.sent();
+                        _b = (_a = context).matchImage;
+                        return [4 /*yield*/, context.webdriver.takeScreenshot()];
+                    case 4: return [4 /*yield*/, _b.apply(_a, [_c.sent(), 'theme 2022 bottom'])];
+                    case 5:
+                        _c.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        test('theme 2022 dark top', function (context) { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: return [4 /*yield*/, context.webdriver
+                            .actions({ bridge: true })
+                            .click(context.webdriver.findElement({ css: '[data-tab-id="darkTheme"]' }))
+                            .perform()];
+                    case 1:
+                        _c.sent();
+                        return [4 /*yield*/, delay(500)];
+                    case 2:
+                        _c.sent();
+                        _b = (_a = context).matchImage;
+                        return [4 /*yield*/, context.webdriver.takeScreenshot()];
+                    case 3: return [4 /*yield*/, _b.apply(_a, [_c.sent(), 'theme 2022 dark top'])];
+                    case 4:
+                        _c.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        test('theme 2022 dark bottom', function (context) { return __awaiter(void 0, void 0, void 0, function () {
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: return [4 /*yield*/, context.webdriver
+                            .actions({ bridge: true })
+                            .click(context.webdriver.findElement({ css: '[data-tab-id="darkTheme"]' }))
+                            .perform()];
+                    case 1:
+                        _c.sent();
+                        return [4 /*yield*/, context.webdriver.executeScript(function () {
+                                document.documentElement.scrollTop = document.documentElement.scrollHeight;
+                            })];
+                    case 2:
+                        _c.sent();
+                        return [4 /*yield*/, delay(1000)];
+                    case 3:
+                        _c.sent();
+                        _b = (_a = context).matchImage;
+                        return [4 /*yield*/, context.webdriver.takeScreenshot()];
+                    case 4: return [4 /*yield*/, _b.apply(_a, [_c.sent(), 'theme 2022 dark bottom'])];
+                    case 5:
+                        _c.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+    story('UnlinkVars', function (_a) {
+        var setStoryParameters = _a.setStoryParameters;
+        setStoryParameters({
+            skip: {
+                'themes do not affect logic': {
+                    in: ['chrome2022Dark', 'firefox2022', 'firefox2022Dark'],
+                },
+            },
+        });
+    });
+});
+//# sourceMappingURL=ThemeProvider.creevey.mjs.map

package/internal/ThemePlayground/__creevey__/ThemeProvider.creevey.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.creevey.mjs","sourceRoot":"","sources":["../../../../internal/ThemePlayground/__creevey__/ThemeProvider.creevey.mts"],"names":[],"mappings":"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","sourcesContent":["import { story, kind, test } from 'creevey';\n\nimport { delay } from '../../../lib/delay.mjs';\n\nkind('ThemeProvider', () => {\n  story('Playground', ({ setStoryParameters }) => {\n    setStoryParameters({\n      skip: {\n        'repeating tests': {\n          tests: ['theme 2022 top', 'theme 2022 bottom', 'theme 2022 dark top', 'theme 2022 dark bottom'],\n          in: /^(?!\\b(chrome2022|firefox2022)\\b)/,\n        },\n      },\n    });\n\n    test('theme 2022 top', async (context) => {\n      await context.webdriver\n        .actions({ bridge: true })\n        .click(context.webdriver.findElement({ css: '[data-tab-id=\"lightTheme\"]' }))\n        .perform();\n      await delay(500);\n      await context.matchImage(await context.webdriver.takeScreenshot(), 'theme 2022 top');\n    });\n\n    test('theme 2022 bottom', async (context) => {\n      await context.webdriver\n        .actions({ bridge: true })\n        .click(context.webdriver.findElement({ css: '[data-tab-id=\"lightTheme\"]' }))\n        .perform();\n      await context.webdriver.executeScript(function () {\n        document.documentElement.scrollTop = document.documentElement.scrollHeight;\n      });\n      await delay(1000);\n      await context.matchImage(await context.webdriver.takeScreenshot(), 'theme 2022 bottom');\n    });\n\n    test('theme 2022 dark top', async (context) => {\n      await context.webdriver\n        .actions({ bridge: true })\n        .click(context.webdriver.findElement({ css: '[data-tab-id=\"darkTheme\"]' }))\n        .perform();\n      await delay(500);\n      await context.matchImage(await context.webdriver.takeScreenshot(), 'theme 2022 dark top');\n    });\n\n    test('theme 2022 dark bottom', async (context) => {\n      await context.webdriver\n        .actions({ bridge: true })\n        .click(context.webdriver.findElement({ css: '[data-tab-id=\"darkTheme\"]' }))\n        .perform();\n      await context.webdriver.executeScript(function () {\n        document.documentElement.scrollTop = document.documentElement.scrollHeight;\n      });\n      await delay(1000);\n      await context.matchImage(await context.webdriver.takeScreenshot(), 'theme 2022 dark bottom');\n    });\n  });\n\n  story('UnlinkVars', ({ setStoryParameters }) => {\n    setStoryParameters({\n      skip: {\n        'themes do not affect logic': {\n          in: ['chrome2022Dark', 'firefox2022', 'firefox2022Dark'],\n        },\n      },\n    });\n  });\n});\n"]}

package/internal/ThemePlayground/__stories__/ThemePlayground.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Story } from '../../../typings/stories.js';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Playground: Story;
+export declare const UnlinkVars: Story;

package/internal/ThemePlayground/__stories__/ThemePlayground.stories.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ThemeContextPlayground } from '../ThemeContextPlayground.js';
+import { UnlinkVarsPlayground } from '../UnlinkVarsPlayground.js';
+export default { title: 'ThemeProvider' };
+export var Playground = function () { return React.createElement(ThemeContextPlayground, null); };
+Playground.storyName = 'playground';
+export var UnlinkVars = function () { return React.createElement(UnlinkVarsPlayground, null); };
+//# sourceMappingURL=ThemePlayground.stories.js.map

package/internal/ThemePlayground/__stories__/ThemePlayground.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePlayground.stories.js","sourceRoot":"","sources":["../../../../internal/ThemePlayground/__stories__/ThemePlayground.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE,CAAC;AAE1C,MAAM,CAAC,IAAM,UAAU,GAAU,cAAM,OAAA,oBAAC,sBAAsB,OAAG,EAA1B,CAA0B,CAAC;AAClE,UAAU,CAAC,SAAS,GAAG,YAAY,CAAC;AAEpC,MAAM,CAAC,IAAM,UAAU,GAAU,cAAM,OAAA,oBAAC,oBAAoB,OAAG,EAAxB,CAAwB,CAAC","sourcesContent":["import React from 'react';\n\nimport type { Story } from '../../../typings/stories.js';\nimport { ThemeContextPlayground } from '../ThemeContextPlayground.js';\nimport { UnlinkVarsPlayground } from '../UnlinkVarsPlayground.js';\n\nexport default { title: 'ThemeProvider' };\n\nexport const Playground: Story = () => <ThemeContextPlayground />;\nPlayground.storyName = 'playground';\n\nexport const UnlinkVars: Story = () => <UnlinkVarsPlayground />;\n"]}

package/internal/ThemePlayground/__stories__/ThemeVersioning.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Story, Meta } from '../../../typings/stories.js';
+declare const meta: Meta;
+export default meta;
+export declare const BasicTheme: Story;
+export declare const Theme1_0: Story;
+export declare const Theme1_1: Story;

package/internal/ThemePlayground/__stories__/ThemeVersioning.stories.js

@@ -0,0 +1,124 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+var _a, _b;
+import React from 'react';
+import { createTheme, isThemeGTE, markThemeVersion } from '../../../lib/theming/ThemeHelpers.js';
+import { BasicThemeClassForExtension } from '../../../internal/themes/BasicTheme.js';
+var meta = {
+    title: 'ThemeVersions/Test',
+    parameters: {
+        creevey: {
+            skip: {
+                'no themes': { in: /^(?!\bchrome2022\b)/ },
+            },
+        },
+    },
+};
+export default meta;
+var TestThemeClass = /** @class */ (function (_super) {
+    __extends(TestThemeClass, _super);
+    function TestThemeClass() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TestThemeClass.color = 'initial';
+    TestThemeClass.textTransform = 'none';
+    TestThemeClass.fontStyle = 'normal';
+    return TestThemeClass;
+}(BasicThemeClassForExtension));
+var TEST_THEME_BASIC = createTheme({ themeClass: TestThemeClass });
+var TEST_THEME_1_0 = createTheme({
+    themeClass: (_a = /** @class */ (function (_super) {
+            __extends(class_1, _super);
+            function class_1() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            return class_1;
+        }(/** @class */ (function () {
+        function class_2() {
+        }
+        return class_2;
+    }()))),
+        __setFunctionName(_a, "themeClass"),
+        _a.color = 'red',
+        _a.textTransform = 'lowercase',
+        _a),
+    themeMarkers: [markThemeVersion('1.0')],
+    prototypeTheme: TEST_THEME_BASIC,
+});
+var TEST_THEME_1_1 = createTheme({
+    themeClass: (_b = /** @class */ (function (_super) {
+            __extends(class_3, _super);
+            function class_3() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            return class_3;
+        }(/** @class */ (function () {
+        function class_4() {
+        }
+        return class_4;
+    }()))),
+        __setFunctionName(_b, "themeClass"),
+        _b.color = 'green',
+        _b.fontStyle = 'italic',
+        _b),
+    themeMarkers: [markThemeVersion('1.1')],
+    prototypeTheme: TEST_THEME_1_0,
+});
+var Component = function (_c) {
+    var theme = _c.theme;
+    var styles = {
+        color: theme.color,
+        fontStyle: theme.fontStyle,
+        textTransform: theme.textTransform,
+    };
+    var themeVersionList = Object.entries({
+        '1_0': isThemeGTE(theme, '1.0'),
+        '1_1': isThemeGTE(theme, '1.1'),
+    })
+        .filter(function (_c) {
+        var isDetected = _c[1];
+        return isDetected;
+    })
+        .map(function (_c) {
+        var version = _c[0];
+        return React.createElement("li", { key: version }, version);
+    });
+    var versionListElement = null;
+    if (isThemeGTE(theme, '1.1')) {
+        versionListElement = React.createElement("ul", null, themeVersionList);
+    }
+    else if (isThemeGTE(theme, '1.0')) {
+        versionListElement = React.createElement("ol", null, themeVersionList);
+    }
+    return (React.createElement("div", null,
+        React.createElement("span", { style: styles }, "Test Component."),
+        React.createElement("pre", null, JSON.stringify(styles, null, 2)),
+        React.createElement("div", null,
+            React.createElement("span", null,
+                "Detected theme versions:\u00A0",
+                themeVersionList.length === 0 && 'none'),
+            versionListElement)));
+};
+export var BasicTheme = function () { return React.createElement(Component, { theme: TEST_THEME_BASIC }); };
+export var Theme1_0 = function () { return React.createElement(Component, { theme: TEST_THEME_1_0 }); };
+Theme1_0.storyName = 'Theme 1_0';
+export var Theme1_1 = function () { return React.createElement(Component, { theme: TEST_THEME_1_1 }); };
+Theme1_1.storyName = 'Theme 1_1';
+//# sourceMappingURL=ThemeVersioning.stories.js.map

package/internal/ThemePlayground/__stories__/ThemeVersioning.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeVersioning.stories.js","sourceRoot":"","sources":["../../../../internal/ThemePlayground/__stories__/ThemeVersioning.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { CSSProperties } from 'react';\nimport React from 'react';\n\nimport type { Story, Meta } from '../../../typings/stories.js';\nimport { createTheme, isThemeGTE, markThemeVersion } from '../../../lib/theming/ThemeHelpers.js';\nimport { BasicThemeClassForExtension } from '../../../internal/themes/BasicTheme.js';\nimport type { ThemeVersions } from '../../../lib/theming/ThemeVersions.js';\n\nconst meta: Meta = {\n  title: 'ThemeVersions/Test',\n  parameters: {\n    creevey: {\n      skip: {\n        'no themes': { in: /^(?!\\bchrome2022\\b)/ },\n      },\n    },\n  },\n};\n\nexport default meta;\n\nclass TestThemeClass extends BasicThemeClassForExtension {\n  public static color = 'initial';\n  public static textTransform = 'none';\n  public static fontStyle = 'normal';\n}\n\ntype TestThemeIn = Partial<typeof TestThemeClass>;\n\nconst TEST_THEME_BASIC = createTheme({ themeClass: TestThemeClass });\n\nconst TEST_THEME_1_0 = createTheme({\n  themeClass: class extends (class {} as typeof TestThemeClass) {\n    public static color = 'red';\n    public static textTransform = 'lowercase';\n  },\n  themeMarkers: [markThemeVersion('1.0' as ThemeVersions)],\n  prototypeTheme: TEST_THEME_BASIC,\n});\n\nconst TEST_THEME_1_1 = createTheme({\n  themeClass: class extends (class {} as typeof TestThemeClass) {\n    public static color = 'green';\n    public static fontStyle = 'italic';\n  },\n  themeMarkers: [markThemeVersion('1.1' as ThemeVersions)],\n  prototypeTheme: TEST_THEME_1_0,\n});\n\nconst Component = ({ theme }: { theme: TestThemeIn }) => {\n  const styles = {\n    color: theme.color,\n    fontStyle: theme.fontStyle,\n    textTransform: theme.textTransform as CSSProperties['textTransform'],\n  };\n\n  const themeVersionList = Object.entries({\n    '1_0': isThemeGTE(theme, '1.0' as ThemeVersions),\n    '1_1': isThemeGTE(theme, '1.1' as ThemeVersions),\n  })\n    .filter(([, isDetected]) => isDetected)\n    .map(([version]) => <li key={version}>{version}</li>);\n\n  let versionListElement: React.ReactNode = null;\n\n  if (isThemeGTE(theme, '1.1' as ThemeVersions)) {\n    versionListElement = <ul>{themeVersionList}</ul>;\n  } else if (isThemeGTE(theme, '1.0' as ThemeVersions)) {\n    versionListElement = <ol>{themeVersionList}</ol>;\n  }\n\n  return (\n    <div>\n      <span style={styles}>Test Component.</span>\n      <pre>{JSON.stringify(styles, null, 2)}</pre>\n      <div>\n        <span>Detected theme versions:&nbsp;{themeVersionList.length === 0 && 'none'}</span>\n        {versionListElement}\n      </div>\n    </div>\n  );\n};\n\nexport const BasicTheme: Story = () => <Component theme={TEST_THEME_BASIC} />;\n\nexport const Theme1_0: Story = () => <Component theme={TEST_THEME_1_0} />;\nTheme1_0.storyName = 'Theme 1_0';\n\nexport const Theme1_1: Story = () => <Component theme={TEST_THEME_1_1} />;\nTheme1_1.storyName = 'Theme 1_1';\n"]}

package/internal/ThemePlayground/constants.d.ts

@@ -1,15 +1,15 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare enum ThemeType {
-    LightTheme = "lightTheme",
-    DarkTheme = "darkTheme"
-}
-export declare const VARIABLES_GROUPS: ({
-    title: string;
-    prefix: string;
-    isCommon: boolean;
-} | {
-    title: string;
-    prefix: string;
-    isCommon?: undefined;
-})[];
-export declare const DEPRECATED_VARIABLES: Array<keyof Theme>;
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare enum ThemeType {
+    LightTheme = "lightTheme",
+    DarkTheme = "darkTheme"
+}
+export declare const VARIABLES_GROUPS: ({
+    title: string;
+    prefix: string;
+    isCommon: boolean;
+} | {
+    title: string;
+    prefix: string;
+    isCommon?: undefined;
+})[];
+export declare const DEPRECATED_VARIABLES: Array<keyof Theme>;

package/internal/ThemePlayground/constants.js

@@ -0,0 +1,39 @@
+export var ThemeType;
+(function (ThemeType) {
+    ThemeType["LightTheme"] = "lightTheme";
+    ThemeType["DarkTheme"] = "darkTheme";
+})(ThemeType || (ThemeType = {}));
+export var VARIABLES_GROUPS = [
+    { title: 'Common', prefix: 'null', isCommon: true },
+    { title: 'Button', prefix: 'btn' },
+    { title: 'Border', prefix: 'border' },
+    { title: 'Checkbox', prefix: 'checkbox' },
+    { title: 'DatePicker', prefix: 'date calendar picker' },
+    { title: 'Dropdown', prefix: 'dropdown' },
+    { title: 'Input', prefix: 'input' },
+    { title: 'Link', prefix: 'link' },
+    { title: 'Loader', prefix: 'loader' },
+    { title: 'Menu', prefix: 'menu' },
+    { title: 'Modal', prefix: 'modal' },
+    { title: 'MiniModal', prefix: 'miniModal' },
+    { title: 'Paging', prefix: 'paging' },
+    { title: 'Popup', prefix: 'popup' },
+    { title: 'Radio', prefix: 'radio' },
+    { title: 'SidePage', prefix: 'sidePage' },
+    { title: 'Tabs', prefix: 'tab' },
+    { title: 'Textarea', prefix: 'textarea' },
+    { title: 'Toast', prefix: 'toast' },
+    { title: 'Toggle', prefix: 'toggle' },
+    { title: 'Tooltip', prefix: 'tooltip' },
+    { title: 'Token', prefix: 'token' },
+    { title: 'TokenInput', prefix: 'tokenInput' },
+    { title: 'Select', prefix: 'select' },
+    { title: 'Spinner', prefix: 'spinner' },
+    { title: 'Switcher', prefix: 'switcher' },
+    { title: 'Legacy', prefix: 'chb slt' },
+    { title: 'GlobalLoader', prefix: 'globalLoader' },
+    { title: 'CloseButtonIcon', prefix: 'closeBtnIcon' },
+    { title: 'react-ui-validations', prefix: 'validations' },
+];
+export var DEPRECATED_VARIABLES = [];
+//# sourceMappingURL=constants.js.map

package/internal/ThemePlayground/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../internal/ThemePlayground/constants.ts"],"names":[],"mappings":"AAEA,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,sCAAyB,CAAA;IACzB,oCAAuB,CAAA;AACzB,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAED,MAAM,CAAC,IAAM,gBAAgB,GAAG;IAC9B,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE;IACnD,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE;IAClC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE;IACrC,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE;IACzC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,sBAAsB,EAAE;IACvD,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE;IACzC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE;IACnC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;IACjC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE;IACrC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;IACjC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE;IACnC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE;IAC3C,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE;IACrC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE;IACnC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE;IACnC,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE;IACzC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE;IAChC,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE;IACzC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE;IACnC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE;IACrC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IACvC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE;IACnC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE;IAC7C,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE;IACrC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE;IACvC,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE;IACzC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE;IACtC,EAAE,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,cAAc,EAAE;IACjD,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,EAAE,cAAc,EAAE;IACpD,EAAE,KAAK,EAAE,sBAAsB,EAAE,MAAM,EAAE,aAAa,EAAE;CACzD,CAAC;AAEF,MAAM,CAAC,IAAM,oBAAoB,GAAuB,EAAE,CAAC","sourcesContent":["import type { Theme } from '../../lib/theming/Theme.js';\n\nexport enum ThemeType {\n  LightTheme = 'lightTheme',\n  DarkTheme = 'darkTheme',\n}\n\nexport const VARIABLES_GROUPS = [\n  { title: 'Common', prefix: 'null', isCommon: true },\n  { title: 'Button', prefix: 'btn' },\n  { title: 'Border', prefix: 'border' },\n  { title: 'Checkbox', prefix: 'checkbox' },\n  { title: 'DatePicker', prefix: 'date calendar picker' },\n  { title: 'Dropdown', prefix: 'dropdown' },\n  { title: 'Input', prefix: 'input' },\n  { title: 'Link', prefix: 'link' },\n  { title: 'Loader', prefix: 'loader' },\n  { title: 'Menu', prefix: 'menu' },\n  { title: 'Modal', prefix: 'modal' },\n  { title: 'MiniModal', prefix: 'miniModal' },\n  { title: 'Paging', prefix: 'paging' },\n  { title: 'Popup', prefix: 'popup' },\n  { title: 'Radio', prefix: 'radio' },\n  { title: 'SidePage', prefix: 'sidePage' },\n  { title: 'Tabs', prefix: 'tab' },\n  { title: 'Textarea', prefix: 'textarea' },\n  { title: 'Toast', prefix: 'toast' },\n  { title: 'Toggle', prefix: 'toggle' },\n  { title: 'Tooltip', prefix: 'tooltip' },\n  { title: 'Token', prefix: 'token' },\n  { title: 'TokenInput', prefix: 'tokenInput' },\n  { title: 'Select', prefix: 'select' },\n  { title: 'Spinner', prefix: 'spinner' },\n  { title: 'Switcher', prefix: 'switcher' },\n  { title: 'Legacy', prefix: 'chb slt' },\n  { title: 'GlobalLoader', prefix: 'globalLoader' },\n  { title: 'CloseButtonIcon', prefix: 'closeBtnIcon' },\n  { title: 'react-ui-validations', prefix: 'validations' },\n];\n\nexport const DEPRECATED_VARIABLES: Array<keyof Theme> = [];\n"]}

package/internal/ThemePlayground/helpers.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const getComponentsFromPropsList: <P extends Record<string, string>>(component: React.ReactElement<P, string | React.JSXElementConstructor<any>>, propsList: P[]) => React.ReactElement<P, string | React.JSXElementConstructor<any>>[];
+import React from 'react';
+export declare const getComponentsFromPropsList: <P extends Record<string, string>>(component: React.ReactElement<P>, propsList: P[]) => React.ReactElement<P, string | React.JSXElementConstructor<any>>[];

package/internal/ThemePlayground/helpers.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from 'react';
+import { Checkbox } from '../../components/Checkbox/index.js';
+export var getComponentsFromPropsList = function (component, propsList) {
+    return propsList.reduce(function (result, props, index) {
+        // NOTE: все это ради чекбокса с фокусом, т.к. нет ни focused, ни autofocus; а ref+focus() снаружи нестабилен
+        var isCheckbox = component.type === Checkbox;
+        if (isCheckbox) {
+            var checkboxProps = props;
+            if (checkboxProps.focused) {
+                checkboxProps.ref = function (el) {
+                    if (el) {
+                        el.setState({ focusedByTab: true });
+                    }
+                };
+                delete checkboxProps.focused;
+            }
+        }
+        var elementWithProps = React.cloneElement(component, __assign(__assign({}, props), { key: index }));
+        return __spreadArray(__spreadArray([], result, true), [elementWithProps], false);
+    }, []);
+};
+//# sourceMappingURL=helpers.js.map

package/internal/ThemePlayground/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../../internal/ThemePlayground/helpers.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,MAAM,CAAC,IAAM,0BAA0B,GAAG,UACxC,SAAgC,EAChC,SAAc;IAEd,OAAO,SAAS,CAAC,MAAM,CAAC,UAAC,MAAoC,EAAE,KAAK,EAAE,KAAK;QACzE,6GAA6G;QAC7G,IAAM,UAAU,GAAG,SAAS,CAAC,IAAI,KAAK,QAAQ,CAAC;QAC/C,IAAI,UAAU,EAAE,CAAC;YACf,IAAM,aAAa,GAAG,KAAsE,CAAC;YAC7F,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;gBAC1B,aAAa,CAAC,GAAG,GAAG,UAAC,EAAE;oBACrB,IAAI,EAAE,EAAE,CAAC;wBACP,EAAE,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;oBACtC,CAAC;gBACH,CAAC,CAAC;gBACF,OAAO,aAAa,CAAC,OAAO,CAAC;YAC/B,CAAC;QACH,CAAC;QAED,IAAM,gBAAgB,GAAG,KAAK,CAAC,YAAY,CAAC,SAAS,wBAAO,KAAK,KAAE,GAAG,EAAE,KAAK,IAAG,CAAC;QAEjF,uCAAW,MAAM,UAAE,gBAAgB,UAAE;IACvC,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Checkbox } from '../../components/Checkbox/index.js';\n\nexport const getComponentsFromPropsList = <P extends Record<string, string>>(\n  component: React.ReactElement<P>,\n  propsList: P[],\n) => {\n  return propsList.reduce((result: Array<React.ReactElement<P>>, props, index) => {\n    // NOTE: все это ради чекбокса с фокусом, т.к. нет ни focused, ни autofocus; а ref+focus() снаружи нестабилен\n    const isCheckbox = component.type === Checkbox;\n    if (isCheckbox) {\n      const checkboxProps = props as unknown as { ref: (el: Checkbox) => void; focused?: boolean };\n      if (checkboxProps.focused) {\n        checkboxProps.ref = (el) => {\n          if (el) {\n            el.setState({ focusedByTab: true });\n          }\n        };\n        delete checkboxProps.focused;\n      }\n    }\n\n    const elementWithProps = React.cloneElement(component, { ...props, key: index });\n\n    return [...result, elementWithProps];\n  }, []);\n};\n"]}

package/internal/ThemeShowcase/ThemeShowcase.d.ts

@@ -1,22 +1,22 @@
-import React from 'react';
-import { ComboBoxItem } from '../../components/ComboBox';
-interface ShowcaseProps {
-    isDebugMode?: boolean;
-}
-interface ShowcaseState {
-    selectedVariable?: ComboBoxItem;
-}
-export declare class ThemeShowcase extends React.Component<ShowcaseProps, ShowcaseState> {
-    state: ShowcaseState;
-    private isUnmounting;
-    private variablesDiff;
-    constructor(props: ShowcaseProps);
-    render(): React.JSX.Element;
-    componentWillUnmount(): void;
-    private getValues;
-    private getItems;
-    private handleVariableChange;
-    private handleUnexpectedVariableInput;
-    private resetVariable;
-}
-export {};
+import React from 'react';
+import type { ComboBoxItem } from '../../components/ComboBox/index.js';
+interface ShowcaseProps {
+    isDebugMode?: boolean;
+}
+interface ShowcaseState {
+    selectedVariable?: ComboBoxItem;
+}
+export declare class ThemeShowcase extends React.Component<ShowcaseProps, ShowcaseState> {
+    state: ShowcaseState;
+    private isUnmounting;
+    private variablesDiff;
+    constructor(props: ShowcaseProps);
+    render(): React.JSX.Element;
+    componentWillUnmount(): void;
+    private getValues;
+    private getItems;
+    private handleVariableChange;
+    private handleUnexpectedVariableInput;
+    private resetVariable;
+}
+export {};