React UI

https://tech.skbkontur.ru/react-ui/
Admin
React UI is a library of common React components and related utilities developed by SKB Kontur,...
Tokens:61,003
Snippets:1,091
Trust Score:9.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install React UI

Source: https://tech.skbkontur.ru/react-ui

Use yarn to add the library to your project.

```bash
yarn add @skbkontur/react-ui
```

--------------------------------

### Install react-ui-validations

Source: https://tech.skbkontur.ru/react-ui-validations#/getting-started

Use npm to add the library to your project dependencies.

```bash
npm install --save @skbkontur/react-ui-validations
```

--------------------------------

### Theme Customization

Source: https://tech.skbkontur.ru/react-ui#!/Components/Button/Button

Example of applying a custom theme to the button.

```jsx
<ThemeContext.Provider value={THEME}>
  <Button>Ok</Button>
</ThemeContext.Provider>
```

--------------------------------

### Example less variables input

Source: https://tech.skbkontur.ru/react-ui#/Migration

Source less file containing variables to be converted.

```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;
```

--------------------------------

### StrictMode Compatibility for Components

Source: https://tech.skbkontur.ru/react-ui#зависимости

Examples of how to implement components for StrictMode compatibility using forwardRef, useImperativeHandle, or class methods.

```javascript
import { Hint } from '@skbkontur/react-ui';

const CustomFunctionComponent = React.forwardRef(
  (props, ref) => <div ref={ref}>children text</div>
);

export const WithFunctionChildren = () => (
  <React.StrictMode>
    <Hint pos="top" text="Something will never be changed" manual opened>
      <CustomFunctionComponent/>
    </Hint>
  </React.StrictMode>
);
```

```javascript
import { Hint } from '@skbkontur/react-ui';

const ImperativeHandleComponent = React.forwardRef(function FN(_, ref) {
  const rootNode = React.useRef < HTMLDivElement > (null);
  React.useImperativeHandle(ref, () => ({
    foo: 'bar',
    getRootNode: () => rootNode.current,
  }));
  return <div ref={rootNode}>children text</div>;
});

export const WithImperativeHandleChildren = () => (
  <React.StrictMode>
    <Hint pos="top" text="Something will never be changed" manual opened>
      <ImperativeHandleComponent/>
    </Hint>
  </React.StrictMode>
);
```

```javascript
import { Hint } from '@skbkontur/react-ui';

class CustomClassComponent extends React.Component {
  rootNode = React.createRef();

  render() {
    return <div ref={this.rootNode}>children text</div>;
  }

  getRootNode() {
    return this.rootNode.current;
  }
}

export const WithClassChildren = () => (
  <React.StrictMode>
    <Hint pos="top" text="Something will never be changed" manual opened>
      <CustomClassComponent/>
    </Hint>
  </React.StrictMode>
);
```

--------------------------------

### Input types

Source: https://tech.skbkontur.ru/react-ui#!/Components/Input/Input

Examples demonstrating different HTML input types supported by the component.

```tsx
<Input type="text" />
<Input type="password" />
<Input type="email" />
```

--------------------------------

### Example less variables and generated theme

Source: https://tech.skbkontur.ru/react-ui#!/Migration/Migration

Input less variables and the resulting JavaScript theme object.

```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;
```

```javascript
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',
};
```

--------------------------------

### DatePicker Range Limits

Source: https://tech.skbkontur.ru/react-ui#/Components/DatePicker

Example of defining minDate and maxDate constraints.

```text
minDate = 22.12.2012  
maxDate = 02.05.2018
```

--------------------------------

### Production Calendar API Request

Source: https://tech.skbkontur.ru/react-ui#/Components/DatePicker

Example URL for fetching production calendar data from data.gov.ru.

```text
https://data.gov.ru/api/json/dataset/7708660670-proizvcalendar/version/20151123T183036/content?search=2021&access_token=31de6d0b90f51a7aa3ee2d518d50f4e9
```

--------------------------------

### ColorFunctions usage examples

Source: https://tech.skbkontur.ru/react-ui#/Customization/ThemeContext

Examples of using ColorFunctions to modify various color formats.

```typescript
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';
```

--------------------------------

### Semantic Heading Hierarchy

Source: https://tech.skbkontur.ru/react-ui#/Accessibility

Example of a proper document structure using semantic header, main, and article tags with nested heading levels.

```html
<header>
  <h1>Страница отчёта</h1>
</header>
<main>
  <article>
    <h2>Отчёт 1</h2>
  </article>
  <article>
    <h2>Отчёт 2</h2>
    <div>
      <h3>Подпункт 1</h3>
    </div>
  </article>
</main>
```

--------------------------------

### DatePicker Localization Interface and Defaults

Source: https://tech.skbkontur.ru/react-ui#/Components/DatePicker

Interface definition and example locale objects for Russian and British English.

```typescript
interface DatePickerLocale {
  today?: string;
  months?: string[];
  order?: DateOrder;
  separator?: DateSeparator;
  todayAriaLabel?: string
  selectMonthAriaLabel?: string;
  selectYearAriaLabel?: string;
  selectChosenAriaLabel?: string;
  dayCellChooseDateAriaLabel?: string;
}

const ru_RU = {
  today: 'Сегодня',
  months: [
    'Январь',
    'Февраль',
    'Март',
    'Апрель',
    'Май',
    'Июнь',
    'Июль',
    'Август',
    'Сентябрь',
    'Октябрь',
    'Ноябрь',
    'Декабрь',
  ],
  order: DateOrder.DMY,
  separator: DateSeparator.Dot,
  todayAriaLabel: 'Перейти к сегодняшней дате',
  selectMonthAriaLabel: 'месяц',
  selectYearAriaLabel: 'год',
  selectChosenAriaLabel: 'Выбранный',
  dayCellChooseDateAriaLabel: 'Выбрать дату',
};

const en_GB = {
  today: 'Today',
  months: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ],
  order: DateOrder.MDY,
  separator: DateSeparator.Slash,
  todayAriaLabel: "Go to today's date",
  selectMonthAriaLabel: 'month',
  selectYearAriaLabel: 'year',
  selectChosenAriaLabel: 'Chosen',
  dayCellChooseDateAriaLabel: 'Choose date',
};
```

--------------------------------

### Configure .npmrc for addons

Source: https://tech.skbkontur.ru/react-ui#/Migration

Set up the registry configuration in .npmrc to access the @skbkontur/react-ui-addons package.

```text
@skbkontur:registry = "https://nexus.kontur.host/repository/kontur-npm-group/"
```

--------------------------------

### Mounting and Customization

Source: https://tech.skbkontur.ru/react-ui#!/Components/GlobalLoader/GlobalLoader

Basic implementation of the GlobalLoader component.

```tsx
<GlobalLoader />
```

--------------------------------

### MaskedInput mask property

Source: https://tech.skbkontur.ru/react-ui#/Components/MaskedInput

Defines the input pattern, shown here with a phone number example.

```text
value: ""
```

--------------------------------

### Customizing error messages with ValidationWrapper

Source: https://tech.skbkontur.ru/react-ui-validations#/api

Example of using renderMessage to specify tooltip positioning.

```jsx
// ...
<ValidationWrapper
    renderMessage={tooltip('top center')}
    validationInfo={{ ... }}>
// ...
</ValidationWrapper>
```

--------------------------------

### Enable flat theme via ThemeFactory

Source: https://tech.skbkontur.ru/react-ui#/Migration

Replace legacy upgrade calls with ThemeFactory.overrideDefaultTheme for the flat theme.

```javascript
import ThemeFactory from '@skbkontur/react-ui/lib/theming/ThemeFactory';
import FlatTheme from '@skbkontur/react-ui/lib/theming/themes/FlatTheme';

// вместо:
// Uprgades.enableFlatDesign();
ThemeFactory.overrideDefaultTheme(FLAT_THEME);
```

--------------------------------

### Configure ResponsiveLayout with custom media queries

Source: https://tech.skbkontur.ru/react-ui#/Components/ResponsiveLayout

Pass custom media queries to extend or override the default layout flags.

```tsx
import { ResponsiveLayout } from '@skbkontur/react-ui';

const customMediaQueries = {
  isTablet: '(min-width: 577px)',
  isDesktop: '(min-width: 1280px)',
};

class SomeComponent {
  public render() {
    return (
      <ResponsiveLayout customMediaQueries={customMediaQueries}>
        {
          ({ isMobile, isTablet, isDesktop }) => {
            /* ... */
          }
        }
      </ResponsiveLayout>
    )
  }
}
```

--------------------------------

### Enable flat theme via ThemeContext

Source: https://tech.skbkontur.ru/react-ui#/Migration

Apply the flat theme using ThemeContext.Provider.

```javascript
import ThemeProvider from '@skbkontur/react-ui/components/ThemeProvider';
import FlatTheme from '@skbkontur/react-ui/lib/theming/themes/FlatTheme';

const App = (
  <ThemeContext.Provider value={FLAT_THEME}>
    <div />
  </ThemeContext.Provider>
);
```

--------------------------------

### DimensionFunctions usage examples

Source: https://tech.skbkontur.ru/react-ui#/Customization/ThemeContext

Utility function for shifting dimension values, defaulting to pixels if no unit is provided.

```typescript
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 знаков
```

--------------------------------

### Migrate Theme and Locale providers

Source: https://tech.skbkontur.ru/react-ui#/Migration

Replace legacy ThemeProvider and LocaleProvider with native React Context providers.

```javascript
import LocaleProvider, { LangCodes } from '@skbkontur/react-ui/components/LocaleProvider'
import ThemeProvider from '@skbkontur/react-ui/components/ThemeProvider'

/* ... */
const MyTheme = { /* ... */ }

<ThemeProvider value={MyTheme}>
  <LocaleProvider landCode={LangCodes.en_GB}>
    {/* ... */}
  </LocalProvider>
</ThemeProvider>
```

```javascript
import { LocaleContext, LangCodes, ThemeContext, ThemeFactory } from '@skbkontur/react-ui'

/* ... */
const MyTheme = ThemeFactory.create({ /* ... */ })

<ThemeContext.Provider value={MyTheme}>
  <LocaleContext.Provider value={{ langCode: LangCodes.en_GB }}>
    {/* ... */}
  </LocaleContext.Provider>
</ThemeContext.Provider>
```

--------------------------------

### Basic Component Usage

Source: https://tech.skbkontur.ru/react-ui

Import components and use them within your React application.

```javascript
import { Button, Toast } from '@skbkontur/react-ui';

const MyApp = () => (
  <div>
    Click this button <Button onClick={() => Toast.push('Hey!')}>Click me</Button>
  </div>
);
```

--------------------------------

### Providing a theme

Source: https://tech.skbkontur.ru/react-ui#/Customization/ThemeContext

Use ThemeContext.Provider to set the theme for child components.

```javascript
import { ThemeContext } from '@skbkontur/react-ui';

<ThemeContext.Provider value={theme}>{/* ... */}</ThemeContext.Provider>;
```

--------------------------------

### Apply theme via ThemeProvider

Source: https://tech.skbkontur.ru/react-ui#/Migration

Wrap the application with ThemeProvider to apply the custom theme object.

```javascript
import ReactDOM from 'react-dom';
import React from 'react';
import ThemeFactory from '@skbkontur/react-ui/lib/theming/ThemeFactory';
import ThemeProvider from '@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'),
);
```

--------------------------------

### Create a custom theme with ThemeFactory

Source: https://tech.skbkontur.ru/react-ui#/Customization/ThemeContext

Uses ThemeFactory.create to extend a base theme with custom variables.

```typescript
import { ThemeFactory, LIGHT_THEME } from '@skbkontur/react-ui';

const myFlatTheme = ThemeFactory.create({ btnBorderRadiusSmall: '10px' }, LIGHT_THEME);
```

--------------------------------

### Create a custom responsive hook

Source: https://tech.skbkontur.ru/react-ui#/Mobiles

Extend the base responsive layout functionality by defining custom media queries for different device types.

```javascript
import { useResponsiveLayout as useResponsiveLayoutOrigin } from '@skbkontur/react-ui';

const customMediaQueries = {
  isTablet: '(min-width: 577px)',
  isDesktop: '(min-width: 1280px)',
};

const useResponsiveLayout = () => {
    return useResponsiveLayoutOrigin({ customMediaQueries })
};

function SomeComponent(props) {
  const { isMobile, isTablet, isDesktop } = useResponsiveLayout();

  if (isMobile) {
    return /* ... */
  } else if (isTablet) {
    return /* ... */
  } else {
    return /* ... */
  }
}
```

--------------------------------

### Show notification with static method

Source: https://tech.skbkontur.ru/react-ui#/Components/Toast

Basic usage of the Toast.push static method to display a notification.

```javascript
Toast.push('Show notification');
```

--------------------------------

### Basic Button Usage

Source: https://tech.skbkontur.ru/react-ui#!/Components/Button/Button

A standard button implementation accepting all HTMLButtonElement props.

```jsx
<Button>Создать отчёт</Button>
```

--------------------------------

### Define ResponsiveLayoutOptions interface

Source: https://tech.skbkontur.ru/react-ui#/Mobiles

The structure for passing custom media queries to the responsive layout system.

```typescript
export type MediaQueriesType = Record<string, string>;

export interface ResponsiveLayoutOptions<MQ extends MediaQueriesType> {
  customMediaQueries?: MQ;
}
```

--------------------------------

### Migrate to named imports

Source: https://tech.skbkontur.ru/react-ui#/Migration

Transition from individual component imports to named imports from the root package to support tree-shaking.

```javascript
import Button from '@skbkontur/react-ui/Button';
import Input from '@skbkontur/react-ui/Input';
```

```javascript
import { Button, Input } from '@skbkontur/react-ui;
```

--------------------------------

### Apply Legacy Theme

Source: https://tech.skbkontur.ru/react-ui#/Migration

Use the ThemeContext provider to manually apply a legacy theme if the new 8px default theme is not desired.

```javascript
import { ThemeContext, DEFAULT_THEME_OLD } from '@skbkontur/react-ui';

<ThemeContext.Provider value={DEFAULT_THEME_OLD}>...</ThemeContext.Provider>;
```

--------------------------------

### ThemeContext.Provider

Source: https://tech.skbkontur.ru/react-ui#!/Customization/ThemeContext/ThemeContext

Provides a theme to all components within the component tree.

```APIDOC
## ThemeContext.Provider

### Description
Wraps the component tree to provide a specific theme to all child components.

### Usage
```javascript
import { ThemeContext } from '@skbkontur/react-ui';

<ThemeContext.Provider value={theme}>{/* ... */}</ThemeContext.Provider>;
```
```

--------------------------------

### Apply custom theme to addons

Source: https://tech.skbkontur.ru/react-ui#/Customization/ThemeContext

Use ThemeFactory to create a theme object and pass it to the ThemeContext.Provider to style addons components.

```typescript
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>;
```

--------------------------------

### Managing via Props

Source: https://tech.skbkontur.ru/react-ui#!/Components/GlobalLoader/GlobalLoader

Controlling the loader state using active and rejected properties.

```tsx
<GlobalLoader active={true} rejected={false} />
```

--------------------------------

### Update package imports

Source: https://tech.skbkontur.ru/react-ui#/Migration

Replace imports from the deprecated retail-ui package with the new @skbkontur/react-ui package.

```javascript
import Button from 'retail-ui/Button';
      |    |    |    |    |    |
      V    V    V    V    V    V
import Button from '@skbkontur/react-ui/Button';
```

--------------------------------

### Implement ResponsiveLayout with render prop

Source: https://tech.skbkontur.ru/react-ui#/Components/ResponsiveLayout

Use the render prop pattern to access layout flags within the component's children.

```tsx
import { ResponsiveLayout } from '@skbkontur/react-ui';

class SomeComponent {
  public render() {
    return (
      <ResponsiveLayout>
        {
          ({ isMobile }) => {
            /* ... */
          }
        }
      </ResponsiveLayout>
    )
  }
}
```

--------------------------------

### Implementing Accessible Images

Source: https://tech.skbkontur.ru/react-ui#/Accessibility

Use the alt attribute to provide descriptive text for informative images, ensuring screen readers can convey the content effectively.

```html
<picture>
  <img src=".../images/graph.png" alt="На графике изображено количество принятых отчётов с первого раза. С первого раза принимаются 80% отчётов за год, 10% со второй попытки и оставшиеся 10% с третьей или больше.">
</picture>
```

--------------------------------

### Triggering a customized toast

Source: https://tech.skbkontur.ru/react-ui#/Components/SingleToast

Shows how to trigger a toast with custom styling applied via theme variables.

```tsx
SingleToast.push('Показать тост с жёлтым фоном', { theme: { toastBg: 'yellow' } });
```

--------------------------------

### Implement Server-Side Rendering with Emotion

Source: https://tech.skbkontur.ru/react-ui#/SSR

Configures the server to extract critical CSS using Emotion's cache and inject it into the HTML response.

```javascript
import React from 'react';
import { renderToString } from 'react-dom/server';
import { CacheProvider } from '@emotion/react';
import createEmotionServer, { EmotionCritical } from '@emotion/server/create-instance';
import { cache } from '@skbkontur/react-ui/lib/theming/Emotion';

import { App } from './App';

const { extractCritical } = createEmotionServer(cache);

const element = (
  <CacheProvider value={cache}>
    <App />
  </CacheProvider>
);

const { html, css, ids } = extractCritical(renderToString(element));

res.status(200).header('Content-Type', 'text/html').send(`<!DOCTYPE html>
<html>
  <head>
    <style data-emotion-css="${cache.key} ${ids.join(' ')}">${css}</style>
  </head>
  <body>
    <div id="root">${html}</div>
    <script src="client.js"></script>
  </body>
</html>`);
```

--------------------------------

### Triggering a static toast

Source: https://tech.skbkontur.ru/react-ui#/Components/SingleToast

Demonstrates how to invoke a standard toast using the component's static methods.

```tsx
SingleToast.push('Показать статический тост');
```

--------------------------------

### Apply legacy theme using ThemeContext

Source: https://tech.skbkontur.ru/react-ui#/Migration

Use ThemeContext to manually apply a previous theme version when migrating to newer library versions.

```javascript
import { ThemeContext, DEFAULT_THEME_8PX } from '@skbkontur/react-ui';

<ThemeContext.Provider value={DEFAULT_THEME_8PX}>...</ThemeContext.Provider>;
```

--------------------------------

### Use ref with Toast

Source: https://tech.skbkontur.ru/react-ui#/Components/Toast

Accessing the Toast component instance using a ref.

```javascript
const toastRef = React.createRef();
<Toast ref={toastRef} />;
```

--------------------------------

### Button Themes

Source: https://tech.skbkontur.ru/react-ui#!/Components/Button/Button

Demonstrates various visual styles available for the button component.

```jsx
<Button>Default</Button>
<Button use="primary">Primary</Button>
<Button use="success">Success</Button>
<Button use="danger">Danger</Button>
<Button use="pay">Pay</Button>
<Button use="text">Text</Button>
<Button use="backless">Backless</Button>
<Button use="link">Link</Button>
```

--------------------------------

### GlobalLoader Static Methods

Source: https://tech.skbkontur.ru/react-ui#/Components/GlobalLoader

Static methods used to control the state of the GlobalLoader instance.

```APIDOC
## GlobalLoader Static Methods

### Description
Methods to control the global loading state. Only one instance of GlobalLoader should exist in the application.

### Methods
- **start()**: Initiates the loading state.
- **done()**: Marks the loading process as successfully completed.
- **reject()**: Marks the loading process as failed.
- **accept()**: Accepts the current loading state.
```

--------------------------------

### Configure mobileMediaQuery via ThemeContext

Source: https://tech.skbkontur.ru/react-ui#/Mobiles

Override the default mobile media query by providing a custom value through the ThemeContext.

```javascript
import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';

<ThemeContext.Provider value={ThemeFactory.create({ mobileMediaQuery: '(max-width: 768px)' })}>
      /* ... */
</ThemeContext.Provider>
```

--------------------------------

### Static Methods in Modal

Source: https://tech.skbkontur.ru/react-ui#!/Components/GlobalLoader/GlobalLoader

Triggering the loader using static methods within a modal context.

```tsx
GlobalLoader.start();
// ... logic ...
GlobalLoader.done();
```

--------------------------------

### Run variables converter script

Source: https://tech.skbkontur.ru/react-ui#/Migration

Execute the converter script to transform less variables into a JavaScript theme object.

```bash
node variablesConverter.js variables=../../less/myVariables.less output=../theme/theme.js
```

--------------------------------

### Basic Switcher implementation

Source: https://tech.skbkontur.ru/react-ui#/Components/Switcher

Standard usage of the Switcher component with simple string labels.

```tsx
<Switcher
  items={['One', 'Two', 'Three']}
  value={value}
  onChange={(_, value) => setValue(value)}
/>
```

--------------------------------

### DateInput with Manual Formatting

Source: https://tech.skbkontur.ru/react-ui#!/Components/DateInput/DateInput

Customizing the date order and separator for the DateInput component.

```tsx
YMD
Dot
2012.12.21
```

--------------------------------

### ThemeContext Customization

Source: https://tech.skbkontur.ru/react-ui#!/Customization/ThemeContext/ThemeContext

Use ThemeContext.Provider to apply a custom theme created with ThemeFactory to components.

```APIDOC
## ThemeContext.Provider

### Description
Provides a custom theme to the component tree using the ThemeContext.

### Usage
```javascript
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>;
```
```

--------------------------------

### Date Comparison Utilities

Source: https://tech.skbkontur.ru/react-ui#/Components/Calendar/Calendar.Day

A set of utility functions for comparing dates provided as strings.

```APIDOC
## Date Comparison Functions

### Description
Utility functions to compare two date strings or check if a date falls within a range.

### Signatures
- `isEqual(left: string, right: string): boolean`
- `isLess(left: string, right: string): boolean`
- `isLessOrEqual(left: string, right: string): boolean`
- `isGreater(left: string, right: string): boolean`
- `isGreaterOrEqual(left: string, right: string): boolean`
- `isBetween(date: string, left?: string, right?: string): boolean`
```

--------------------------------

### Basic Inline Validation with Input

Source: https://tech.skbkontur.ru/react-ui-validations#/inline-validations

Demonstrates a standard form line with an Input component using required and email validation props.

```jsx
<Form.Line title='Email'>
  <Input
    required
    email
    value={data.email}
    onValueChange={value => onChange({ email: value })}
  />
</Form.Line>
```

--------------------------------

### Define Select Locale Interface and Defaults

Source: https://tech.skbkontur.ru/react-ui#/Components/Select

Defines the structure for Select component localization and provides default Russian and English implementations.

```typescript
interface SelectLocale {
  placeholder?: React.ReactNode;
}

const ru_RU = {
  placeholder: 'Ничего не выбрано',
};

const en_GB = {
  placeholder: 'Nothing selected',
};
```

--------------------------------

### CalendarLocale Interface

Source: https://tech.skbkontur.ru/react-ui#/Components/Calendar/Calendar

Structure for defining calendar localization settings.

```APIDOC
## CalendarLocale Interface

### Properties
- **months** (string[]) - Optional. Array of month names.
- **selectMonthAriaLabel** (string) - Optional. Aria label for month selection.
- **selectYearAriaLabel** (string) - Optional. Aria label for year selection.
- **selectChosenAriaLabel** (string) - Optional. Aria label for the selected date.
- **dayCellChooseDateAriaLabel** (string) - Optional. Aria label for choosing a date cell.
```
Tokens:
Raw