@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-eab52adf66

package/cjs/lib/theming/ThemeContext.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ThemeContext: React.Context<Readonly<typeof import("../../internal/themes/BasicTheme").BasicThemeClass>>;

package/cjs/lib/theming/ThemeContext.js

@@ -0,0 +1,8 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ThemeContext = void 0;var _react = _interopRequireDefault(require("react"));
+
+var _ThemeFactory = require("./ThemeFactory");
+
+var ThemeContext = exports.ThemeContext = /*#__PURE__*/_react.default.createContext(_ThemeFactory.ThemeFactory.defaultTheme);
+
+ThemeContext.displayName = 'ThemeContext';
+ThemeContext.__KONTUR_REACT_UI__ = 'ThemeContext';

package/cjs/lib/theming/ThemeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_ThemeFactory","ThemeContext","exports","React","createContext","ThemeFactory","defaultTheme","displayName","__KONTUR_REACT_UI__"],"sources":["ThemeContext.ts"],"sourcesContent":["import React from 'react';\n\nimport { ThemeFactory } from './ThemeFactory';\n\nexport const ThemeContext = React.createContext(ThemeFactory.defaultTheme);\n\nThemeContext.displayName = 'ThemeContext';\nThemeContext.__KONTUR_REACT_UI__ = 'ThemeContext';\n"],"mappings":"kKAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;;AAEA,IAAAC,aAAA,GAAAD,OAAA;;AAEO,IAAME,YAAY,GAAAC,OAAA,CAAAD,YAAA,gBAAGE,cAAK,CAACC,aAAa,CAACC,0BAAY,CAACC,YAAY,CAAC;;AAE1EL,YAAY,CAACM,WAAW,GAAG,cAAc;AACzCN,YAAY,CAACO,mBAAmB,GAAG,cAAc","ignoreList":[]}

package/cjs/lib/theming/ThemeContext.md

@@ -0,0 +1,265 @@
+Для кастомизации компонентов используется ThemeContext, реализуемый через `React.Context<Theme>`
+
+Механизм работы: динамические стили генерируются в зависимости от темы в процессе render'а с помощью <a href="https://www.npmjs.com/package/emotion" target="_blank">emotion</a>, полученные классы добавляются в `className` соответствующих элементов.
+
+Тема задается с помощью `ThemeContext.Provider`:
+
+```jsx static
+import { ThemeContext } from '@skbkontur/react-ui';
+
+<ThemeContext.Provider value={theme}>{/* ... */}</ThemeContext.Provider>;
+```
+
+Использовать тему в компоненте можно через `ThemeContext.Consumer`:
+
+```jsx static
+import { ThemeContext, Button } from '@skbkontur/react-ui';
+
+<ThemeContext.Consumer>
+  {theme => /* ... */ }
+</ThemeContext.Consumer>
+```
+
+`useContext` в функциональных компонентах:
+
+```typescript static
+const theme = useContext(ThemeContext);
+```
+
+или задать `contextType` для класса:
+
+```typescript static
+public static contextType = ThemeContext;
+public context: Theme = this.context;
+```
+
+Список существующих тем:
+
+| Имя                     | Описание                                          |
+|-------------------------|---------------------------------------------------|
+| `LIGHT_THEME` | Текущая светлая тема, включена по умолчанию. Всегда включает в себя актуальные визуальные обновления. |
+| `DARK_THEME` | Текущая тёмная тема. Всегда включает в себя актуальные визуальные обновления. |
+| `LIGHT_THEME_2022_0` | Вариант светлой темы без актуальных визуальных обновлений. |
+| `DARK_THEME_2022_0` | Вариант тёмной темы без актуальных визуальных обновлений. |
+
+Если не нужны постоянные визуальные изменения, то можно использовать вариант `_2022_N`. В будущем, новые варианты с постфиксом `_2022_N` будут появлятся при обновлении дизайн системы.
+
+## Примеры использования
+
+### Создание собственной темы
+
+Собственные значения нужно передать в `ThemeFactory.create` и получившуюся тему можно использовать в `ThemeContext.Provider`. `ThemeFactory` расширяет переданный объект, задавая в качестве прототипа объект темы по умолчанию.
+
+```jsx harmony
+import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+const myTheme = ThemeFactory.create({ btnBorderRadiusSmall: '10px' });
+
+<ThemeContext.Provider value={myTheme}>
+  <div style={{height: '100%', background: '#fff', padding: '16px'}}>
+    <ShowcaseGroup title="My Theme" />
+  </div>
+</ThemeContext.Provider>;
+```
+
+Вторым аргументом `ThemeFactory.create` может принимать объект, который будет использован в качестве базовой темы.
+
+```jsx static
+import { ThemeFactory, LIGHT_THEME } from '@skbkontur/react-ui';
+
+const myFlatTheme = ThemeFactory.create({ btnBorderRadiusSmall: '10px' }, LIGHT_THEME);
+```
+
+### Использование темы в своих компонентах
+
+```jsx harmony
+import { useContext } from 'react';
+import { ThemeContext, Button } from '@skbkontur/react-ui';
+
+function ButtonLinkWrapper(props) {
+  const theme = useContext(ThemeContext);
+
+  return (
+    <Button use="link" {...props}>
+      {props.children}
+      <span style={{ color: theme.textColorDefault }}> ↗</span>
+    </Button>
+  );
+}
+
+<ButtonLinkWrapper>ButtonLinkWrapper</ButtonLinkWrapper>;
+```
+
+### Добавление своих переменных
+
+Если вы хотите дополнить одну из тем новыми переменными для своих компонентов, то вы можете использовать отдельный контекст в расширенным объектом темы.
+
+```jsx harmony
+import { useContext } from 'react';
+import { ThemeFactory, Button } from '@skbkontur/react-ui';
+
+const MyThemeContext = React.createContext(ThemeFactory.create({ myTextColor: 'orange' }));
+
+MyThemeContext.displayName = 'MyThemeContext';
+
+function ButtonLinkWrapper(props) {
+  const theme = useContext(MyThemeContext);
+
+  return (
+    <Button use="link" {...props}>
+      {props.children}
+      <span style={{ color: theme.myTextColor }}> ↗</span>
+    </Button>
+  );
+}
+
+<ButtonLinkWrapper>ButtonLinkWrapper</ButtonLinkWrapper>;
+```
+
+### Кастомизация в legacy-приложениях
+
+В случае, если контролы рендерятся через какую-то общую обертку, достаточно добавить в нее `ThemeContext.Provider` с вашей темой. В противном случае, вам подойдет метод `ThemeFactory.overrideDefaultTheme()`.
+
+```typescript static
+import theme from './theme/theme';
+import { ThemeFactory } from '@skbkontur/react-ui/lib/theming/ThemeFactory';
+
+ThemeFactory.overrideDefaultTheme(theme);
+```
+
+### Варианты кастомизации:
+
+Несколько тем одновременно:
+<br/>
+
+```jsx harmony
+import { ThemeContext, LIGHT_THEME, DARK_THEME } from '@skbkontur/react-ui';
+import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+const CombinedComponents = () => (
+  <>
+    <div style={{height: '100%', background: '#fff', padding: '16px'}}>
+      <ThemeContext.Provider value={LIGHT_THEME}>
+        <div>
+          <ShowcaseGroup title="LIGHT_THEME" />
+        </div>
+      </ThemeContext.Provider>
+    </div>
+    <div style={{height: '100%', background: '#000', padding: '16px'}}>
+      <ThemeContext.Provider value={DARK_THEME}>
+        <div>
+          <ShowcaseGroup title="DARK_THEME" />
+        </div>
+      </ThemeContext.Provider>
+    </div>
+  </ >
+);
+
+<CombinedComponents />;
+```
+
+Вложенные темы:
+<br/>
+
+```jsx harmony
+import { ThemeContext, LIGHT_THEME, DARK_THEME } from '@skbkontur/react-ui';
+import { ShowcaseGroup } from '@skbkontur/react-ui/internal/ThemePlayground/ShowcaseGroup';
+
+const wrapperStyles = {
+  border: '1px solid rgb(188, 187, 187)',
+  padding: '0 15px 15px',
+  marginTop: 25,
+};
+
+const NestedThemes = () => (
+  <ThemeContext.Provider value={ LIGHT_THEME }>
+    <div style={{ ...wrapperStyles, width: 750, background: '#fff' }}>
+      <ShowcaseGroup title="LIGHT_THEME" />
+        <ThemeContext.Provider value={ DARK_THEME }>
+          <div style={{ ...wrapperStyles, background: '#000', color: '#fff' }}>
+            <ShowcaseGroup title="DARK_THEME" />
+          </div>
+        </ThemeContext.Provider>
+    </div>
+  </ThemeContext.Provider>
+);
+
+<NestedThemes />;
+```
+
+## Кастомизация @skbkontur/react-ui-addons
+
+Компоненты `@skbkontur/react-ui-addons` так же поддерживают кастомизацию через `ThemeContext` из `@skbkontur/react-ui`. Достаточно переопределить нужные переменные, которые перечислены на страницах компонентов в [докумендации аддонов](https://ui.gitlab-pages.kontur.host/docs/#/react-ui-addons).
+
+```tsx static
+import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
+import { Logotype, AddonsThemeIn } from '@skbkontur/react-ui-addons';
+
+const myTheme = ThemeFactory.create<AddonsThemeIn>({
+  logoColor: 'black',
+});
+
+<ThemeContext.Provider value={myTheme}>
+  <Logotype />
+</ThemeContext.Provider>;
+```
+
+## Дополнительно
+
+### ColorFunctions.ts / DimensionFunctions.ts
+
+Несколько функций по работе с цветом вынесены из less в js, их можно использовать в своих темах (_ColorFunctions.ts_):
+
+```typescript static
+import { ColorFunctions } from '@skbkontur/react-ui'
+
+ColorFunctions.lighten(colorString: string, amount: number | string, method?: 'absolute' | 'relative'): string
+ColorFunctions.darken(colorString: string, amount: number | string, method?: 'absolute' | 'relative'): string
+ColorFunctions.contrast(colorString: string, darkString?: string, lightString?: string, threshold: number = 0.43): string
+ColorFunctions.red(colorString: string): string
+ColorFunctions.green(colorString: string): string
+ColorFunctions.blue(colorString: string): string
+ColorFunctions.alpha(colorString: string): string
+ColorFunctions.isValid(colorString: string): boolean // проверяет, можно ли распарсить строку в цвет
+```
+
+Документацию по их работе можно найти на сайте [less](http://lesscss.org/functions/#color-operations).
+В качестве colorString можно передать цвет в одном из форматов: `keyword`, `hex`, `rgb(r, g, b)`, `rgba(r, g, b, a)`, `hsl(h, s, l)`, `hsla(h, s, l, a)`.
+В качестве `amount` можно передать строку вида 'N%' или число от 0 до 1.
+Все значения больше или меньше возможных обрезаются. Например, для `rgba(300, -100, 123, 20)` `r=255, g=0, b=123, a=1`.
+Если распарсить `colorString` не получилось - выбрасывается исключение.
+Если это возможно, результат возвращается в том же виде, что и входная строка:
+
+```typescript static
+import { ColorFunctions } from '@skbkontur/react-ui'
+
+ColorFunctions.lighten('hsl(90, 0.8, 0.2)', '20%') === 'hsl(90, 0.8, 0.4)';
+ColorFunctions.lighten('rgba(50, 50, 50, 0.2)', '20%') === 'rgba(102, 102, 102, 0.2)';
+ColorFunctions.lighten('#80e619', 0.2) === '#b3f075';
+ColorFunctions.lighten('crimson', '20%') === '#f16581';
+```
+
+Для работы с размерами предусмотрена одна функция (_DimensionFunctions.ts_):
+
+```typescript static
+shift(value: string, shift: string): string
+
+// пример
+import { DimensionFunctions } from '@skbkontur/react-ui'
+
+DimensionFunctions.shift('100%', '-20') === '80%'
+DimensionFunctions.shift('2em', '+2') === '4em'
+DimensionFunctions.shift('12', '+1') === '13px'  //если единица измерения не указана - используется px
+DimensionFunctions.shift('10.2', '12.333451') === '22.5335px' //дробная часть округляется до 4 знаков
+```
+
+### Список кастомизируемых компонентов
+
+Посмотреть, какие компоненты можно кастомизировать, а также увидеть, какие переменные используются в каждом из них, можно в [таблице](#/Customization/ThemeShowcase)
+Информация собирается в рантайме с помощью `Proxy`, поэтому в IE таблица не отображается.
+
+### Playground
+
+Внутренний компонент `Playground` (_components/internal/ThemePlayground/Playground.tsx_) можно использовать для построения своей темы.
+Для удобства в редакторе добавлено действие "вывести тему в консоль".

package/cjs/lib/theming/ThemeFactory.d.ts

@@ -0,0 +1,17 @@
+import type { NoInfer } from '../utils';
+import type { Theme, ThemeIn } from './Theme';
+export declare class ThemeFactory {
+    /**
+     * The default theme created with Object.create() is needed for the "overrideBaseTheme" to work.
+     *
+     * Themes should be frozen objects. But it is not possible to define properties on frozen objects.
+     * So, an object created by Object.create({ *frozen_object* }) acts as frozen too,
+     * but allows to apply Object.defineProperty to his own properties.
+     */
+    private static readonly overridableDefaultTheme;
+    static get defaultTheme(): Theme;
+    static create<T>(theme: ThemeIn & NoInfer<T>, baseTheme?: Theme): Readonly<Theme & NoInfer<T>>;
+    static overrideBaseTheme(theme: Theme): void;
+    static getKeys<T extends Theme>(theme: T): (keyof T)[];
+    private static constructTheme;
+}

package/cjs/lib/theming/ThemeFactory.js

@@ -0,0 +1,73 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ThemeFactory = void 0;var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _utils = require("../utils");
+
+
+var _ThemeHelpers = require("./ThemeHelpers");
+var _LightTheme = require("./themes/LightTheme");var
+
+ThemeFactory = exports.ThemeFactory = /*#__PURE__*/function () {function ThemeFactory() {}ThemeFactory.
+
+
+
+
+
+
+
+
+
+
+
+
+
+  create = function create(theme, baseTheme) {
+    var base = baseTheme || this.defaultTheme;
+    return this.constructTheme(base, theme);
+  };ThemeFactory.
+
+  overrideBaseTheme = function overrideBaseTheme(theme) {var _this = this;
+    // copying theme variables
+    ThemeFactory.getKeys(this.defaultTheme).forEach(function (variableName) {
+      var descriptor = (0, _ThemeHelpers.findPropertyDescriptor)(theme, variableName);
+      Object.defineProperty(_this.defaultTheme, variableName, descriptor);
+    });
+
+    // copying theme markers
+    Object.values(_ThemeHelpers.REACT_UI_THEME_MARKERS).forEach(function (marker) {
+      var descriptor = (0, _ThemeHelpers.findPropertyDescriptor)(theme, marker.key);
+      Object.defineProperty(_this.defaultTheme, marker.key, descriptor);
+    });
+  };ThemeFactory.
+
+  getKeys = function getKeys(theme) {
+    var keys = [];
+    while ((0, _utils.isNonNullable)(theme)) {
+      Object.keys(theme).forEach(function (key) {
+        if (!keys.includes(key)) {
+          keys.push(key);
+        }
+      });
+      // TODO: Enable `no-param-reassign` rule.
+      // eslint-disable-next-line no-param-reassign
+      theme = Object.getPrototypeOf(theme);
+    }
+
+    return keys.sort();
+  };ThemeFactory.
+
+  constructTheme = function constructTheme(base, theme) {
+    var newTheme = Object.create(base);
+    Object.keys(theme).forEach(function (propName) {
+      var descriptor = Object.getOwnPropertyDescriptor(theme, propName);
+      if (descriptor) {
+        Object.defineProperty(newTheme, propName, descriptor);
+      }
+    });
+
+    return Object.freeze(newTheme);
+  };return (0, _createClass2.default)(ThemeFactory, null, [{ key: "defaultTheme", get: function get() {return this.overridableDefaultTheme;} }]);}(); /**
+ * The default theme created with Object.create() is needed for the "overrideBaseTheme" to work.
+ *
+ * Themes should be frozen objects. But it is not possible to define properties on frozen objects.
+ * So, an object created by Object.create({ *frozen_object* }) acts as frozen too,
+ * but allows to apply Object.defineProperty to his own properties.
+ */ThemeFactory.overridableDefaultTheme = Object.create(_LightTheme.LIGHT_THEME);

package/cjs/lib/theming/ThemeFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_utils","require","_ThemeHelpers","_LightTheme","ThemeFactory","exports","create","theme","baseTheme","base","defaultTheme","constructTheme","overrideBaseTheme","_this","getKeys","forEach","variableName","descriptor","findPropertyDescriptor","Object","defineProperty","values","REACT_UI_THEME_MARKERS","marker","key","keys","isNonNullable","includes","push","getPrototypeOf","sort","newTheme","propName","getOwnPropertyDescriptor","freeze","_createClass2","default","get","overridableDefaultTheme","LIGHT_THEME"],"sources":["ThemeFactory.ts"],"sourcesContent":["import type { NoInfer } from '../utils';\nimport { isNonNullable } from '../utils';\n\nimport type { Theme, ThemeIn } from './Theme';\nimport { findPropertyDescriptor, REACT_UI_THEME_MARKERS } from './ThemeHelpers';\nimport { LIGHT_THEME } from './themes/LightTheme';\n\nexport class ThemeFactory {\n  /**\n   * The default theme created with Object.create() is needed for the \"overrideBaseTheme\" to work.\n   *\n   * Themes should be frozen objects. But it is not possible to define properties on frozen objects.\n   * So, an object created by Object.create({ *frozen_object* }) acts as frozen too,\n   * but allows to apply Object.defineProperty to his own properties.\n   */\n  private static readonly overridableDefaultTheme: Theme = Object.create(LIGHT_THEME);\n\n  public static get defaultTheme(): Theme {\n    return this.overridableDefaultTheme;\n  }\n\n  public static create<T>(theme: ThemeIn & NoInfer<T>, baseTheme?: Theme): Readonly<Theme & NoInfer<T>> {\n    const base = baseTheme || this.defaultTheme;\n    return this.constructTheme(base, theme);\n  }\n\n  public static overrideBaseTheme(theme: Theme) {\n    // copying theme variables\n    ThemeFactory.getKeys(this.defaultTheme).forEach((variableName) => {\n      const descriptor = findPropertyDescriptor(theme, variableName);\n      Object.defineProperty(this.defaultTheme, variableName, descriptor);\n    });\n\n    // copying theme markers\n    Object.values(REACT_UI_THEME_MARKERS).forEach((marker) => {\n      const descriptor = findPropertyDescriptor(theme, marker.key);\n      Object.defineProperty(this.defaultTheme, marker.key, descriptor);\n    });\n  }\n\n  public static getKeys<T extends Theme>(theme: T) {\n    const keys: Array<keyof T> = [];\n    while (isNonNullable(theme)) {\n      (Object.keys(theme) as typeof keys).forEach((key) => {\n        if (!keys.includes(key)) {\n          keys.push(key);\n        }\n      });\n      // TODO: Enable `no-param-reassign` rule.\n      // eslint-disable-next-line no-param-reassign\n      theme = Object.getPrototypeOf(theme);\n    }\n\n    return keys.sort();\n  }\n\n  private static constructTheme(base: Theme, theme: ThemeIn) {\n    const newTheme = Object.create(base);\n    Object.keys(theme).forEach((propName) => {\n      const descriptor = Object.getOwnPropertyDescriptor(theme, propName);\n      if (descriptor) {\n        Object.defineProperty(newTheme, propName, descriptor);\n      }\n    });\n\n    return Object.freeze(newTheme);\n  }\n}\n"],"mappings":";AACA,IAAAA,MAAA,GAAAC,OAAA;;;AAGA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA,wBAAkD;;AAErCG,YAAY,GAAAC,OAAA,CAAAD,YAAA,sCAAAA,aAAA,IAAAA,YAAA;;;;;;;;;;;;;;EAcTE,MAAM,GAApB,SAAAA,OAAwBC,KAA2B,EAAEC,SAAiB,EAAgC;IACpG,IAAMC,IAAI,GAAGD,SAAS,IAAI,IAAI,CAACE,YAAY;IAC3C,OAAO,IAAI,CAACC,cAAc,CAACF,IAAI,EAAEF,KAAK,CAAC;EACzC,CAAC,CAAAH,YAAA;;EAEaQ,iBAAiB,GAA/B,SAAAA,kBAAgCL,KAAY,EAAE,KAAAM,KAAA;IAC5C;IACAT,YAAY,CAACU,OAAO,CAAC,IAAI,CAACJ,YAAY,CAAC,CAACK,OAAO,CAAC,UAACC,YAAY,EAAK;MAChE,IAAMC,UAAU,GAAG,IAAAC,oCAAsB,EAACX,KAAK,EAAES,YAAY,CAAC;MAC9DG,MAAM,CAACC,cAAc,CAACP,KAAI,CAACH,YAAY,EAAEM,YAAY,EAAEC,UAAU,CAAC;IACpE,CAAC,CAAC;;IAEF;IACAE,MAAM,CAACE,MAAM,CAACC,oCAAsB,CAAC,CAACP,OAAO,CAAC,UAACQ,MAAM,EAAK;MACxD,IAAMN,UAAU,GAAG,IAAAC,oCAAsB,EAACX,KAAK,EAAEgB,MAAM,CAACC,GAAG,CAAC;MAC5DL,MAAM,CAACC,cAAc,CAACP,KAAI,CAACH,YAAY,EAAEa,MAAM,CAACC,GAAG,EAAEP,UAAU,CAAC;IAClE,CAAC,CAAC;EACJ,CAAC,CAAAb,YAAA;;EAEaU,OAAO,GAArB,SAAAA,QAAuCP,KAAQ,EAAE;IAC/C,IAAMkB,IAAoB,GAAG,EAAE;IAC/B,OAAO,IAAAC,oBAAa,EAACnB,KAAK,CAAC,EAAE;MAC1BY,MAAM,CAACM,IAAI,CAAClB,KAAK,CAAC,CAAiBQ,OAAO,CAAC,UAACS,GAAG,EAAK;QACnD,IAAI,CAACC,IAAI,CAACE,QAAQ,CAACH,GAAG,CAAC,EAAE;UACvBC,IAAI,CAACG,IAAI,CAACJ,GAAG,CAAC;QAChB;MACF,CAAC,CAAC;MACF;MACA;MACAjB,KAAK,GAAGY,MAAM,CAACU,cAAc,CAACtB,KAAK,CAAC;IACtC;;IAEA,OAAOkB,IAAI,CAACK,IAAI,CAAC,CAAC;EACpB,CAAC,CAAA1B,YAAA;;EAEcO,cAAc,GAA7B,SAAAA,eAA8BF,IAAW,EAAEF,KAAc,EAAE;IACzD,IAAMwB,QAAQ,GAAGZ,MAAM,CAACb,MAAM,CAACG,IAAI,CAAC;IACpCU,MAAM,CAACM,IAAI,CAAClB,KAAK,CAAC,CAACQ,OAAO,CAAC,UAACiB,QAAQ,EAAK;MACvC,IAAMf,UAAU,GAAGE,MAAM,CAACc,wBAAwB,CAAC1B,KAAK,EAAEyB,QAAQ,CAAC;MACnE,IAAIf,UAAU,EAAE;QACdE,MAAM,CAACC,cAAc,CAACW,QAAQ,EAAEC,QAAQ,EAAEf,UAAU,CAAC;MACvD;IACF,CAAC,CAAC;;IAEF,OAAOE,MAAM,CAACe,MAAM,CAACH,QAAQ,CAAC;EAChC,CAAC,YAAAI,aAAA,CAAAC,OAAA,EAAAhC,YAAA,WAAAoB,GAAA,kBAAAa,GAAA,EAjDD,SAAAA,IAAA,EAAwC,CACtC,OAAO,IAAI,CAACC,uBAAuB,CACrC,CAAC,UAXD;AACF;AACA;AACA;AACA;AACA;AACA,GAPalC,YAAY,CAQCkC,uBAAuB,GAAUnB,MAAM,CAACb,MAAM,CAACiC,uBAAW,CAAC","ignoreList":[]}

package/cjs/lib/theming/ThemeHelpers.d.ts

@@ -0,0 +1,68 @@
+import type { Theme, ThemeIn } from './Theme';
+import type { ThemeVersions } from './ThemeVersions';
+export type Marker = (theme: Theme) => Theme;
+export type Markers = Marker[];
+/**
+ * Makes all computable theme variables (getters) visible to the Object.keys(theme)
+ * @param theme Theme object
+ * @returns The given theme object with all getters made enumerable
+ */
+export declare const exposeGetters: (theme: Theme) => Theme;
+export declare const REACT_UI_THEME_MARKERS: {
+    darkTheme: {
+        key: string;
+        value: true;
+    };
+    themeVersion: {
+        key: string;
+        value: ThemeVersions | null;
+    };
+};
+export declare const REACT_UI_DARK_THEME_KEY: string;
+export declare const isDarkTheme: (theme: Theme | ThemeIn) => boolean;
+/**
+ * Marks the given theme as "dark"
+ * @param theme Theme object
+ * @returns The given theme object with a "dark theme" mark
+ */
+export declare const markAsDarkTheme: Marker;
+/**
+ * Creates a marker for the theme, that will mark it with a version
+ * @param version Theme version
+ * @returns A marker that marks the given theme with the given version once applied
+ */
+export declare const markThemeVersion: (version: ThemeVersions) => Marker;
+/**
+ * Checks if the given theme's version is "greater or equal" then the given version
+ * @param theme Theme object
+ * @param version A string version
+ * @returns Boolean result
+ */
+export declare const isThemeGTE: (theme: Theme | ThemeIn, version: ThemeVersions) => boolean;
+/**
+ * Finds the given theme's object property descriptor by its name
+ * @param theme Theme object
+ * @param propName The property name
+ * @returns The found descriptor or an empty object
+ */
+export declare function findPropertyDescriptor(theme: Theme, propName: string): PropertyDescriptor;
+/**
+ * Marks the given theme with the given markers
+ * @param theme Theme object
+ * @param markers Markers array
+ * @returns The given theme marked with the given marks
+ */
+export declare function applyMarkers(theme: Theme, markers: Markers): Theme;
+/**
+ * Creates a theme object out of the given class with variables
+ * @param options Options object
+ * @param options.themeClass A class with variables
+ * @param [options.prototypeTheme] An optional prototype theme, that will be the base for the new theme
+ * @param [options.themeMarkers] An optional array of markers, that new them will be marked of
+ * @returns The new theme object
+ */
+export declare function createTheme(options: {
+    themeClass: Theme;
+    prototypeTheme?: Theme;
+    themeMarkers?: Markers;
+}): Theme;

package/cjs/lib/theming/ThemeHelpers.js

@@ -0,0 +1,157 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.REACT_UI_THEME_MARKERS = exports.REACT_UI_DARK_THEME_KEY = void 0;exports.applyMarkers = applyMarkers;exports.createTheme = createTheme;exports.exposeGetters = void 0;exports.findPropertyDescriptor = findPropertyDescriptor;exports.markThemeVersion = exports.markAsDarkTheme = exports.isThemeGTE = exports.isDarkTheme = void 0;var _warning = _interopRequireDefault(require("warning"));
+
+
+var _utils = require("../utils");
+
+
+
+var _ThemeVersions = require("./ThemeVersions");
+
+
+
+
+/**
+ * Makes all computable theme variables (getters) visible to the Object.keys(theme)
+ * @param theme Theme object
+ * @returns The given theme object with all getters made enumerable
+ */
+var exposeGetters = exports.exposeGetters = function exposeGetters(theme) {
+  var descriptors = Object.getOwnPropertyDescriptors(theme);
+  Object.keys(descriptors).forEach(function (key) {
+    var descriptor = descriptors[key];
+    if (typeof descriptor.get === 'function' && descriptor.configurable) {
+      descriptor.enumerable = true;
+      Object.defineProperty(theme, key, descriptor);
+    }
+  });
+  return theme;
+};
+
+var REACT_UI_THEME_MARKERS = exports.REACT_UI_THEME_MARKERS =
+
+
+
+
+
+
+
+
+{
+  darkTheme: {
+    key: '__IS_REACT_UI_DARK_THEME__',
+    value: true
+  },
+  themeVersion: {
+    key: '__REACT_UI_THEME_VERSION__',
+    value: null
+  }
+};
+
+// backward compatible
+var REACT_UI_DARK_THEME_KEY = exports.REACT_UI_DARK_THEME_KEY = REACT_UI_THEME_MARKERS.darkTheme.key;
+
+var isDarkTheme = exports.isDarkTheme = function isDarkTheme(theme) {
+  // @ts-expect-error: internal value.
+  return theme[REACT_UI_THEME_MARKERS.darkTheme.key] === REACT_UI_THEME_MARKERS.darkTheme.value;
+};
+
+/**
+ * Marks the given theme as "dark"
+ * @param theme Theme object
+ * @returns The given theme object with a "dark theme" mark
+ */
+var markAsDarkTheme = exports.markAsDarkTheme = function markAsDarkTheme(theme) {var _Object$create;
+  return Object.create(theme, (_Object$create = {}, _Object$create[
+  REACT_UI_THEME_MARKERS.darkTheme.key] = {
+    value: REACT_UI_THEME_MARKERS.darkTheme.value,
+    writable: false,
+    enumerable: false,
+    configurable: false
+  }, _Object$create)
+  );
+};
+
+/**
+ * Creates a marker for the theme, that will mark it with a version
+ * @param version Theme version
+ * @returns A marker that marks the given theme with the given version once applied
+ */
+var markThemeVersion = exports.markThemeVersion = function markThemeVersion(version) {return function (theme) {var _Object$create2;
+    return Object.create(theme, (_Object$create2 = {}, _Object$create2[
+    REACT_UI_THEME_MARKERS.themeVersion.key] = {
+      value: version || REACT_UI_THEME_MARKERS.themeVersion.value,
+      writable: false,
+      enumerable: false,
+      configurable: false
+    }, _Object$create2)
+    );
+  };};
+
+/**
+ * Checks if the given theme's version is "greater or equal" then the given version
+ * @param theme Theme object
+ * @param version A string version
+ * @returns Boolean result
+ */
+var isThemeGTE = exports.isThemeGTE = function isThemeGTE(theme, version) {
+  var themeVersion =
+  // @ts-expect-error: internal value.
+  theme[REACT_UI_THEME_MARKERS.themeVersion.key];
+
+  if (!themeVersion) {
+    (0, _warning.default)(true, "[ThemeHelpers]: The theme doesn't have a version. Checking for " + version + ".");
+    return false;
+  }
+
+  return (0, _ThemeVersions.isThemeVersionGTE)(themeVersion, version);
+};
+
+/**
+ * Finds the given theme's object property descriptor by its name
+ * @param theme Theme object
+ * @param propName The property name
+ * @returns The found descriptor or an empty object
+ */
+function findPropertyDescriptor(theme, propName) {
+  // TODO: Rewrite for loop.
+  // TODO: Enable `no-param-reassign` rule.
+  // eslint-disable-next-line no-param-reassign
+  for (; (0, _utils.isNonNullable)(theme); theme = Object.getPrototypeOf(theme)) {
+    if (Object.prototype.hasOwnProperty.call(theme, propName)) {
+      return Object.getOwnPropertyDescriptor(theme, propName) || {};
+    }
+  }
+  return {};
+}
+
+/**
+ * Marks the given theme with the given markers
+ * @param theme Theme object
+ * @param markers Markers array
+ * @returns The given theme marked with the given marks
+ */
+function applyMarkers(theme, markers) {
+  return markers.reduce(function (markedTheme, marker) {
+    return marker(markedTheme);
+  }, Object.create(theme));
+}
+
+/**
+ * Creates a theme object out of the given class with variables
+ * @param options Options object
+ * @param options.themeClass A class with variables
+ * @param [options.prototypeTheme] An optional prototype theme, that will be the base for the new theme
+ * @param [options.themeMarkers] An optional array of markers, that new them will be marked of
+ * @returns The new theme object
+ */
+function createTheme(options) {
+  var themeClass = options.themeClass,prototypeTheme = options.prototypeTheme,_options$themeMarkers = options.themeMarkers,themeMarkers = _options$themeMarkers === void 0 ? [] : _options$themeMarkers;
+
+  if (prototypeTheme) {
+    Object.setPrototypeOf(themeClass, prototypeTheme);
+  }
+
+  var theme = applyMarkers(exposeGetters(themeClass), themeMarkers);
+
+  return Object.freeze(theme);
+}

package/cjs/lib/theming/ThemeHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_warning","_interopRequireDefault","require","_utils","_ThemeVersions","exposeGetters","exports","theme","descriptors","Object","getOwnPropertyDescriptors","keys","forEach","key","descriptor","get","configurable","enumerable","defineProperty","REACT_UI_THEME_MARKERS","darkTheme","value","themeVersion","REACT_UI_DARK_THEME_KEY","isDarkTheme","markAsDarkTheme","_Object$create","create","writable","markThemeVersion","version","_Object$create2","isThemeGTE","warning","isThemeVersionGTE","findPropertyDescriptor","propName","isNonNullable","getPrototypeOf","prototype","hasOwnProperty","call","getOwnPropertyDescriptor","applyMarkers","markers","reduce","markedTheme","marker","createTheme","options","themeClass","prototypeTheme","_options$themeMarkers","themeMarkers","setPrototypeOf","freeze"],"sources":["ThemeHelpers.ts"],"sourcesContent":["import warning from 'warning';\n\nimport type { Nullable } from '../../typings/utility-types';\nimport { isNonNullable } from '../utils';\n\nimport type { Theme, ThemeIn } from './Theme';\nimport type { ThemeVersions } from './ThemeVersions';\nimport { isThemeVersionGTE } from './ThemeVersions';\n\nexport type Marker = (theme: Theme) => Theme;\nexport type Markers = Marker[];\n\n/**\n * Makes all computable theme variables (getters) visible to the Object.keys(theme)\n * @param theme Theme object\n * @returns The given theme object with all getters made enumerable\n */\nexport const exposeGetters = (theme: Theme): Theme => {\n  const descriptors = Object.getOwnPropertyDescriptors(theme);\n  Object.keys(descriptors).forEach((key) => {\n    const descriptor = descriptors[key];\n    if (typeof descriptor.get === 'function' && descriptor.configurable) {\n      descriptor.enumerable = true;\n      Object.defineProperty(theme, key, descriptor);\n    }\n  });\n  return theme;\n};\n\nexport const REACT_UI_THEME_MARKERS: {\n  darkTheme: {\n    key: string;\n    value: true;\n  };\n  themeVersion: {\n    key: string;\n    value: ThemeVersions | null;\n  };\n} = {\n  darkTheme: {\n    key: '__IS_REACT_UI_DARK_THEME__',\n    value: true,\n  },\n  themeVersion: {\n    key: '__REACT_UI_THEME_VERSION__',\n    value: null,\n  },\n};\n\n// backward compatible\nexport const REACT_UI_DARK_THEME_KEY = REACT_UI_THEME_MARKERS.darkTheme.key;\n\nexport const isDarkTheme = (theme: Theme | ThemeIn): boolean => {\n  // @ts-expect-error: internal value.\n  return theme[REACT_UI_THEME_MARKERS.darkTheme.key] === REACT_UI_THEME_MARKERS.darkTheme.value;\n};\n\n/**\n * Marks the given theme as \"dark\"\n * @param theme Theme object\n * @returns The given theme object with a \"dark theme\" mark\n */\nexport const markAsDarkTheme: Marker = (theme) => {\n  return Object.create(theme, {\n    [REACT_UI_THEME_MARKERS.darkTheme.key]: {\n      value: REACT_UI_THEME_MARKERS.darkTheme.value,\n      writable: false,\n      enumerable: false,\n      configurable: false,\n    },\n  });\n};\n\n/**\n * Creates a marker for the theme, that will mark it with a version\n * @param version Theme version\n * @returns A marker that marks the given theme with the given version once applied\n */\nexport const markThemeVersion: (version: ThemeVersions) => Marker = (version) => (theme) => {\n  return Object.create(theme, {\n    [REACT_UI_THEME_MARKERS.themeVersion.key]: {\n      value: version || REACT_UI_THEME_MARKERS.themeVersion.value,\n      writable: false,\n      enumerable: false,\n      configurable: false,\n    },\n  });\n};\n\n/**\n * Checks if the given theme's version is \"greater or equal\" then the given version\n * @param theme Theme object\n * @param version A string version\n * @returns Boolean result\n */\nexport const isThemeGTE = (theme: Theme | ThemeIn, version: ThemeVersions): boolean => {\n  const themeVersion: Nullable<ThemeVersions> =\n    // @ts-expect-error: internal value.\n    theme[REACT_UI_THEME_MARKERS.themeVersion.key];\n\n  if (!themeVersion) {\n    warning(true, `[ThemeHelpers]: The theme doesn't have a version. Checking for ${version}.`);\n    return false;\n  }\n\n  return isThemeVersionGTE(themeVersion, version);\n};\n\n/**\n * Finds the given theme's object property descriptor by its name\n * @param theme Theme object\n * @param propName The property name\n * @returns The found descriptor or an empty object\n */\nexport function findPropertyDescriptor(theme: Theme, propName: string) {\n  // TODO: Rewrite for loop.\n  // TODO: Enable `no-param-reassign` rule.\n  // eslint-disable-next-line no-param-reassign\n  for (; isNonNullable(theme); theme = Object.getPrototypeOf(theme)) {\n    if (Object.prototype.hasOwnProperty.call(theme, propName)) {\n      return Object.getOwnPropertyDescriptor(theme, propName) || {};\n    }\n  }\n  return {};\n}\n\n/**\n * Marks the given theme with the given markers\n * @param theme Theme object\n * @param markers Markers array\n * @returns The given theme marked with the given marks\n */\nexport function applyMarkers(theme: Theme, markers: Markers): Theme {\n  return markers.reduce((markedTheme, marker) => {\n    return marker(markedTheme);\n  }, Object.create(theme));\n}\n\n/**\n * Creates a theme object out of the given class with variables\n * @param options Options object\n * @param options.themeClass A class with variables\n * @param [options.prototypeTheme] An optional prototype theme, that will be the base for the new theme\n * @param [options.themeMarkers] An optional array of markers, that new them will be marked of\n * @returns The new theme object\n */\nexport function createTheme(options: { themeClass: Theme; prototypeTheme?: Theme; themeMarkers?: Markers }): Theme {\n  const { themeClass, prototypeTheme, themeMarkers = [] } = options;\n\n  if (prototypeTheme) {\n    Object.setPrototypeOf(themeClass, prototypeTheme);\n  }\n\n  const theme = applyMarkers(exposeGetters(themeClass), themeMarkers);\n\n  return Object.freeze(theme);\n}\n"],"mappings":"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","ignoreList":[]}

package/cjs/lib/theming/ThemeVersions.d.ts

@@ -0,0 +1,25 @@
+export type ThemeVersions = '5.0' | '5.1';
+export interface ThemeVersionParsed {
+    major: number;
+    minor: number;
+}
+/**
+ * Converts a string theme version to the object with numbers
+ * @param str A string with version (e.g. "1.0")
+ * @param [separator="."] Optional major and minor string separator. By default is "."
+ * @returns An object of type { major: number; minor: number } or null, if the given string is invalid
+ */
+export declare const parseThemeVersion: (str: string, separator?: string) => ThemeVersionParsed | null;
+/**
+ * Extracts a version from a theme name
+ * @param name A string theme name (e.g. "LIGHT_THEME_1_0")
+ * @returns An object of type { major: number; minor: number } or null, if the given string is invalid or contains no version
+ */
+export declare const parseVersionFromThemeName: (name: string) => ThemeVersionParsed | null;
+/**
+ * Checks if one string theme version is "greater or equal" than another one
+ * @param v1 The version being compared (e.g. "1.0")
+ * @param v2 The version being compared to (e.g. "2.0")
+ * @returns Boolean result
+ */
+export declare const isThemeVersionGTE: (v1: ThemeVersions, v2: ThemeVersions) => boolean;