@skbkontur/react-ui 1.6.9 → 1.6.11

package/components/ThemeProvider/README.md

@@ -1,172 +1,172 @@
-Кастомизация компонентов с помощью библиотеки [`emotion`](https://github.com/emotion-js/emotion)
-
-ThemeProvider - компонент, передающий объект темы вниз по дереву с помощью полифила [`create-react-context.`](https://github.com/jamiebuilds/create-react-context)
-
-Принимает в качестве пропов `children: React.ReactNode` и `value` типа `IThemeIn`:
-
-```typescript
-import defaultThemeVariables from './components/variables.less';
-import flatThemeVariables from './components/variables.flat.less';
-
-type ThemeType = typeof defaultThemeVariables & typeof flatThemeVariables;
-type ThemeInType = Partial<ThemeType>;
-
-interface IThemeIn extends ThemeInType {}
-```
-
-В качестве базовой темы выступает объект, полученный из переменных `variables.less`. Объект, переданный в `value` будет смерджен с объектом базовой темой.
-
-Помимо базовой темы, есть плоская тема, собранная из переменных `variables.flat.less`.
-Объект плоской темы можно импортировать и передавать в ThemeProvider:
-
-```jsx
-const { default: ThemeProvider } = require('./ThemeProvider');
-const { default: flatTheme } = require('../../lib/theming/themes/FlatTheme');
-const { ShowcaseGroup } = require('./Playground/ShowcaseGroup');
-
-const FlatComponents = () => (
-  <ThemeProvider value={flatTheme}>
-    <ShowcaseGroup />
-  </ThemeProvider>
-);
-
-<FlatComponents />;
-```
-
-### Варианты кастомизации:
-
-Несколько тем одновременно:
-<br/>
-
-```jsx
-const { default: ThemeProvider } = require('./ThemeProvider');
-const { default: flatTheme } = require('../../lib/theming/themes/FlatTheme');
-const { ShowcaseGroup } = require('./Playground/ShowcaseGroup');
-
-const CombinedComponents = () => (
-  <>
-    <ShowcaseGroup title="Default" />
-    <ThemeProvider value={flatTheme}>
-      <div>
-        <ShowcaseGroup title="Flat" />
-      </div>
-    </ThemeProvider>
-  </>
-);
-
-<CombinedComponents />;
-```
-
-Вложенные темы:
-<br/>
-
-```jsx
-const { default: ThemeProvider } = require('./ThemeProvider');
-const { default: flatTheme } = require('../../lib/theming/themes/FlatTheme');
-const { default: defaultTheme } = require('../../lib/theming/themes/DefaultTheme');
-const { default: darkTheme } = require('./Playground/darkTheme');
-const { ShowcaseGroup } = require('./Playground/ShowcaseGroup');
-
-const wrapperStyles = {
-  border: '1px solid rgb(188, 187, 187)',
-  padding: '0 15px 15px',
-  marginTop: 25,
-};
-
-const NestedThemes = () => (
-  <ThemeProvider value={flatTheme}>
-    <div style={{ ...wrapperStyles, width: 750 }}>
-      <ShowcaseGroup title="Flat Theme" />
-      <ThemeProvider value={defaultTheme}>
-        <div style={wrapperStyles}>
-          <ShowcaseGroup title="Default Theme" />
-          <ThemeProvider value={darkTheme}>
-            <div style={{ ...wrapperStyles, background: '#000', color: '#fff' }}>
-              <ShowcaseGroup title="Dark Theme" />
-            </div>
-          </ThemeProvider>
-        </div>
-      </ThemeProvider>
-    </div>
-  </ThemeProvider>
-);
-
-<NestedThemes />;
-```
-
-### Переход с кастомизации с помощью `less`
-
-Для перехода с кастомизации посредстовом переопределения less-переменных, необходимо превратить less-переменные в объект темы.
-Это можно сделать с помощью <a target="_blank" href="https://raw.githubusercontent.com/skbkontur/retail-ui/master/packages/react-ui-codemodes/customization/variablesConverter.js">скрипта</a>
-
-Скрипту необходимо передать два параметра: `variables` - путь до файла с перменными и `output` - путь до файла, в который нужно записать объект темы. Если по пути, переданному в `output`, файла не существует, файл будет создан. В противном случае, он будет перезаписан.
-
-Перед запуском скрипт необходимо скачать и положить в папку с проектом. В процессе конвертации используется пакет [less.js](https://www.npmjs.com/package/less), который скрипт возьмет из зависимостей проекта.
-
-Пример использования:
-
-```shell
-node variablesConverter.js variables=../../less/myVariables.less output=../theme/theme.js
-```
-
-Для следующего содержимого myVariables.less:
-
-```less
-@btn-danger-bg: #e14c30;
-@warning-main: #f69c00;
-@error-main: #d70c17;
-@border-color-gray-dark: rgba(0, 0, 0, 0.28);
-@border-color-gray-light: rgba(0, 0, 0, 0.15);
-@tab-color-hover-error: lighten(@btn-danger-bg, 20%);
-@toggle-bg-warning: @warning-main;
-@toggle-bg-error: @error-main;
-```
-
-Сгенерируется файл theme.js:
-
-```typescript
-export default {
-  btnDangerBg: '#e14c30',
-  warningMain: '#f69c00',
-  errorMain: '#d70c17',
-  borderColorGrayDark: 'rgba(0, 0, 0, 0.28)',
-  borderColorGrayLight: 'rgba(0, 0, 0, 0.15)',
-  tabColorHoverError: '#ee9989',
-  toggleBgWarning: '#f69c00',
-  toggleBgError: '#d70c17',
-};
-```
-
-Далее объект из theme.js можно передавать в ThemeProvider:
-
-```typescript
-import ReactDOM from 'react-dom';
-import React from 'react';
-import ThemeProvider from '${retail-ui|@skbkontur/react-ui}/components/ThemeProvider';
-
-import App from './components/App';
-import theme from './theme/theme';
-
-ReactDOM.render(
-  <ThemeProvider value={theme}>
-    <App />
-  </ThemeProvider>,
-  document.getElementById('app'),
-);
-```
-
-В случае, если приложение не является полноценным React-приложением, и тему нужно переопределить единоразово, то можно воспользоваться методом `overrideDefaultTheme` в `ThemeFactory`:
-
-```typescript
-// точка входа в приложение
-...
-import theme from './theme/theme';
-import ThemeFactory from '${retail-ui|@skbkontur/react-ui}/lib/theming/ThemeFactory';
-
-ThemeFactory.overrideDefaultTheme(theme);
-...
-```
-
-### Список кастомизируемых компонентов
-
-Посмотреть, какие компоненты можно кастомизировать, а также увидеть, какие переменные используются в каждом из них, можно в [таблице](#/Customization/ThemeShowcase)
+Кастомизация компонентов с помощью библиотеки [`emotion`](https://github.com/emotion-js/emotion)
+
+ThemeProvider - компонент, передающий объект темы вниз по дереву с помощью полифила [`create-react-context.`](https://github.com/jamiebuilds/create-react-context)
+
+Принимает в качестве пропов `children: React.ReactNode` и `value` типа `IThemeIn`:
+
+```typescript
+import defaultThemeVariables from './components/variables.less';
+import flatThemeVariables from './components/variables.flat.less';
+
+type ThemeType = typeof defaultThemeVariables & typeof flatThemeVariables;
+type ThemeInType = Partial<ThemeType>;
+
+interface IThemeIn extends ThemeInType {}
+```
+
+В качестве базовой темы выступает объект, полученный из переменных `variables.less`. Объект, переданный в `value` будет смерджен с объектом базовой темой.
+
+Помимо базовой темы, есть плоская тема, собранная из переменных `variables.flat.less`.
+Объект плоской темы можно импортировать и передавать в ThemeProvider:
+
+```jsx
+const { default: ThemeProvider } = require('./ThemeProvider');
+const { default: flatTheme } = require('../../lib/theming/themes/FlatTheme');
+const { ShowcaseGroup } = require('./Playground/ShowcaseGroup');
+
+const FlatComponents = () => (
+  <ThemeProvider value={flatTheme}>
+    <ShowcaseGroup />
+  </ThemeProvider>
+);
+
+<FlatComponents />;
+```
+
+### Варианты кастомизации:
+
+Несколько тем одновременно:
+<br/>
+
+```jsx
+const { default: ThemeProvider } = require('./ThemeProvider');
+const { default: flatTheme } = require('../../lib/theming/themes/FlatTheme');
+const { ShowcaseGroup } = require('./Playground/ShowcaseGroup');
+
+const CombinedComponents = () => (
+  <>
+    <ShowcaseGroup title="Default" />
+    <ThemeProvider value={flatTheme}>
+      <div>
+        <ShowcaseGroup title="Flat" />
+      </div>
+    </ThemeProvider>
+  </>
+);
+
+<CombinedComponents />;
+```
+
+Вложенные темы:
+<br/>
+
+```jsx
+const { default: ThemeProvider } = require('./ThemeProvider');
+const { default: flatTheme } = require('../../lib/theming/themes/FlatTheme');
+const { default: defaultTheme } = require('../../lib/theming/themes/DefaultTheme');
+const { default: darkTheme } = require('./Playground/darkTheme');
+const { ShowcaseGroup } = require('./Playground/ShowcaseGroup');
+
+const wrapperStyles = {
+  border: '1px solid rgb(188, 187, 187)',
+  padding: '0 15px 15px',
+  marginTop: 25,
+};
+
+const NestedThemes = () => (
+  <ThemeProvider value={flatTheme}>
+    <div style={{ ...wrapperStyles, width: 750 }}>
+      <ShowcaseGroup title="Flat Theme" />
+      <ThemeProvider value={defaultTheme}>
+        <div style={wrapperStyles}>
+          <ShowcaseGroup title="Default Theme" />
+          <ThemeProvider value={darkTheme}>
+            <div style={{ ...wrapperStyles, background: '#000', color: '#fff' }}>
+              <ShowcaseGroup title="Dark Theme" />
+            </div>
+          </ThemeProvider>
+        </div>
+      </ThemeProvider>
+    </div>
+  </ThemeProvider>
+);
+
+<NestedThemes />;
+```
+
+### Переход с кастомизации с помощью `less`
+
+Для перехода с кастомизации посредстовом переопределения less-переменных, необходимо превратить less-переменные в объект темы.
+Это можно сделать с помощью <a target="_blank" href="https://raw.githubusercontent.com/skbkontur/retail-ui/master/packages/react-ui-codemodes/customization/variablesConverter.js">скрипта</a>
+
+Скрипту необходимо передать два параметра: `variables` - путь до файла с перменными и `output` - путь до файла, в который нужно записать объект темы. Если по пути, переданному в `output`, файла не существует, файл будет создан. В противном случае, он будет перезаписан.
+
+Перед запуском скрипт необходимо скачать и положить в папку с проектом. В процессе конвертации используется пакет [less.js](https://www.npmjs.com/package/less), который скрипт возьмет из зависимостей проекта.
+
+Пример использования:
+
+```shell
+node variablesConverter.js variables=../../less/myVariables.less output=../theme/theme.js
+```
+
+Для следующего содержимого myVariables.less:
+
+```less
+@btn-danger-bg: #e14c30;
+@warning-main: #f69c00;
+@error-main: #d70c17;
+@border-color-gray-dark: rgba(0, 0, 0, 0.28);
+@border-color-gray-light: rgba(0, 0, 0, 0.15);
+@tab-color-hover-error: lighten(@btn-danger-bg, 20%);
+@toggle-bg-warning: @warning-main;
+@toggle-bg-error: @error-main;
+```
+
+Сгенерируется файл theme.js:
+
+```typescript
+export default {
+  btnDangerBg: '#e14c30',
+  warningMain: '#f69c00',
+  errorMain: '#d70c17',
+  borderColorGrayDark: 'rgba(0, 0, 0, 0.28)',
+  borderColorGrayLight: 'rgba(0, 0, 0, 0.15)',
+  tabColorHoverError: '#ee9989',
+  toggleBgWarning: '#f69c00',
+  toggleBgError: '#d70c17',
+};
+```
+
+Далее объект из theme.js можно передавать в ThemeProvider:
+
+```typescript
+import ReactDOM from 'react-dom';
+import React from 'react';
+import ThemeProvider from '${retail-ui|@skbkontur/react-ui}/components/ThemeProvider';
+
+import App from './components/App';
+import theme from './theme/theme';
+
+ReactDOM.render(
+  <ThemeProvider value={theme}>
+    <App />
+  </ThemeProvider>,
+  document.getElementById('app'),
+);
+```
+
+В случае, если приложение не является полноценным React-приложением, и тему нужно переопределить единоразово, то можно воспользоваться методом `overrideDefaultTheme` в `ThemeFactory`:
+
+```typescript
+// точка входа в приложение
+...
+import theme from './theme/theme';
+import ThemeFactory from '${retail-ui|@skbkontur/react-ui}/lib/theming/ThemeFactory';
+
+ThemeFactory.overrideDefaultTheme(theme);
+...
+```
+
+### Список кастомизируемых компонентов
+
+Посмотреть, какие компоненты можно кастомизировать, а также увидеть, какие переменные используются в каждом из них, можно в [таблице](#/Customization/ThemeShowcase)

package/components/ThemeShowcase/README.md

@@ -1,13 +1,13 @@
-### Таблица переменных
-
-Список использующихся переменных для каждого кастомизируемого компонента.
-<br/>
-Таблица фильтруется по названию переменной.
-<br/>
-Значения в колонке `Variable name` кликабельны.
-
-```jsx
-const { default: ThemeShowcase } = require('./ThemeShowcase');
-
-<ThemeShowcase />;
-```
+### Таблица переменных
+
+Список использующихся переменных для каждого кастомизируемого компонента.
+<br/>
+Таблица фильтруется по названию переменной.
+<br/>
+Значения в колонке `Variable name` кликабельны.
+
+```jsx
+const { default: ThemeShowcase } = require('./ThemeShowcase');
+
+<ThemeShowcase />;
+```

package/components/Toast/README.md

@@ -1,39 +1,39 @@
-Вызов статических методов
-
-```js
-const { default: Button } = require('../Button');
-
-function showComplexNotification() {
-  Toast.push('Successfully saved', {
-    label: 'Cancel',
-    handler: () => Toast.push('Canceled'),
-  });
-}
-
-<Button onClick={showComplexNotification}>Show notification</Button>;
-```
-
-Использование `ref`
-
-```js
-class Toaster extends React.Component {
-  showNotification() {
-    this.notifier.push('Successfully');
-  }
-
-  render() {
-    return (
-      <div>
-        <Toast
-          ref={el => {
-            this.notifier = el;
-          }}
-        />
-        <Button onClick={() => this.showNotification()}>Show notification</Button>
-      </div>
-    );
-  }
-}
-
-<Toaster />;
-```
+Вызов статических методов
+
+```js
+const { default: Button } = require('../Button');
+
+function showComplexNotification() {
+  Toast.push('Successfully saved', {
+    label: 'Cancel',
+    handler: () => Toast.push('Canceled'),
+  });
+}
+
+<Button onClick={showComplexNotification}>Show notification</Button>;
+```
+
+Использование `ref`
+
+```js
+class Toaster extends React.Component {
+  showNotification() {
+    this.notifier.push('Successfully');
+  }
+
+  render() {
+    return (
+      <div>
+        <Toast
+          ref={el => {
+            this.notifier = el;
+          }}
+        />
+        <Button onClick={() => this.showNotification()}>Show notification</Button>
+      </div>
+    );
+  }
+}
+
+<Toaster />;
+```

package/components/Toast/Toast.js.flow

@@ -1,29 +1,29 @@
-/* @flow */
-import ToastView from './ToastView';
-
-export type Action = {|
-  label: string,
-  handler: () => void,
-|};
-
-export type ToastState = {|
-  notification: ?string,
-  action: ?Action,
-  id: number,
-|};
-
-export type ToastProps = {|
-  onPush?: (notification: string, action?: Action) => void,
-  onClose?: (notification: string, action?: Action) => void,
-|};
-
-declare class Toast extends React$Component<ToastProps, ToastState> {
-  static push(notification: string, action?: Action): void,
-  static close(): void,
-
-  _toast: ?ToastView,
-  push(notification: string, action?: Action): void,
-  close: () => void,
-}
-
-export default Toast;
+/* @flow */
+import ToastView from './ToastView';
+
+export type Action = {|
+  label: string,
+  handler: () => void,
+|};
+
+export type ToastState = {|
+  notification: ?string,
+  action: ?Action,
+  id: number,
+|};
+
+export type ToastProps = {|
+  onPush?: (notification: string, action?: Action) => void,
+  onClose?: (notification: string, action?: Action) => void,
+|};
+
+declare class Toast extends React$Component<ToastProps, ToastState> {
+  static push(notification: string, action?: Action): void,
+  static close(): void,
+
+  _toast: ?ToastView,
+  push(notification: string, action?: Action): void,
+  close: () => void,
+}
+
+export default Toast;

package/components/Toast/ToastStatic.js.flow

@@ -1,10 +1,10 @@
-/* @flow */
-import type { Action } from './Toast';
-
-declare class ToastStatic {
-  static push: (notification: string, action?: Action | void) => void,
-  static _push: (notification: string, action?: Action | void) => void,
-  static close: () => void,
-}
-
-export default ToastStatic;
+/* @flow */
+import type { Action } from './Toast';
+
+declare class ToastStatic {
+  static push: (notification: string, action?: Action | void) => void,
+  static _push: (notification: string, action?: Action | void) => void,
+  static close: () => void,
+}
+
+export default ToastStatic;

package/components/Toast/ToastView.js.flow

@@ -1,16 +1,16 @@
-/* @flow */
-
-export type ToastViewProps = {|
-  children?: string,
-  action?: ?{|
-    label: string,
-    handler: () => void,
-  |},
-  onClose?: () => void,
-  onMouseEnter?: () => void,
-  onMouseLeave?: () => void,
-|};
-
-declare class ToastView extends React$Component<ToastViewProps> {}
-
-export default ToastView;
+/* @flow */
+
+export type ToastViewProps = {|
+  children?: string,
+  action?: ?{|
+    label: string,
+    handler: () => void,
+  |},
+  onClose?: () => void,
+  onMouseEnter?: () => void,
+  onMouseLeave?: () => void,
+|};
+
+declare class ToastView extends React$Component<ToastViewProps> {}
+
+export default ToastView;

package/components/Toast/index.js.flow

@@ -1,2 +1,2 @@
-/* @flow */
-export { default, ToastProps, ToastState } from './Toast';
+/* @flow */
+export { default, ToastProps, ToastState } from './Toast';

package/components/Toggle/README.md

@@ -1,9 +1,9 @@
-```js
-let initialState = { checked: false };
-
-let toggle = () => setState(state => ({ checked: !state.checked }));
-
-<div>
-  <Toggle checked={state.checked} onChange={toggle} /> {state.checked ? 'On' : 'Off'}
-</div>;
-```
+```js
+let initialState = { checked: false };
+
+let toggle = () => setState(state => ({ checked: !state.checked }));
+
+<div>
+  <Toggle checked={state.checked} onChange={toggle} /> {state.checked ? 'On' : 'Off'}
+</div>;
+```

package/components/Toggle/Toggle.js.flow

@@ -1,28 +1,28 @@
-/* @flow */
-import type { InputEventHandler, FocusEventHandler } from '../eventHandlers';
-
-export type ToggleProps = {|
-  checked?: boolean,
-  defaultChecked?: boolean,
-  disabled?: boolean,
-  onChange?: (value: boolean) => void,
-  changeEventHandler?: InputEventHandler<HTMLInputElement>,
-  warning?: boolean,
-  error?: boolean,
-  loading?: boolean,
-  autoFocus?: boolean,
-  onFocus?: FocusEventHandler<HTMLInputElement>,
-  onBlur?: FocusEventHandler<HTMLInputElement>,
-  color?: string,
-|};
-
-export type ToggleState = {|
-  checked?: boolean,
-  focusByTab?: boolean,
-|};
-
-declare class Toggle extends React$Component<ToggleProps, ToggleState> {
-  focus: () => void;
-}
-
-export default Toggle;
+/* @flow */
+import type { InputEventHandler, FocusEventHandler } from '../eventHandlers';
+
+export type ToggleProps = {|
+  checked?: boolean,
+  defaultChecked?: boolean,
+  disabled?: boolean,
+  onChange?: (value: boolean) => void,
+  changeEventHandler?: InputEventHandler<HTMLInputElement>,
+  warning?: boolean,
+  error?: boolean,
+  loading?: boolean,
+  autoFocus?: boolean,
+  onFocus?: FocusEventHandler<HTMLInputElement>,
+  onBlur?: FocusEventHandler<HTMLInputElement>,
+  color?: string,
+|};
+
+export type ToggleState = {|
+  checked?: boolean,
+  focusByTab?: boolean,
+|};
+
+declare class Toggle extends React$Component<ToggleProps, ToggleState> {
+  focus: () => void;
+}
+
+export default Toggle;

package/components/Toggle/index.js.flow

@@ -1,2 +1,2 @@
-/* @flow */
-export { default, ToggleProps } from './Toggle';
+/* @flow */
+export { default, ToggleProps } from './Toggle';