feat: use lang from uikit provider

.storybook/preview.tsx

@@ -5,31 +5,26 @@ import '@gravity-ui/uikit/styles/styles.css';
 
 import React from 'react';
 
-import {
-    Lang,
-    MobileProvider,
-    ThemeProvider,
-    ToasterComponent,
-    ToasterProvider,
-    configure,
-} from '@gravity-ui/uikit';
+import {settings} from '@gravity-ui/date-utils';
+import {MobileProvider, ThemeProvider, ToasterComponent, ToasterProvider} from '@gravity-ui/uikit';
 import {toaster} from '@gravity-ui/uikit/toaster-singleton';
 import type {Decorator, Preview} from '@storybook/react-webpack5';
 import {MINIMAL_VIEWPORTS} from 'storybook/viewport';
 
 import {DocsDecorator} from '../src/demo/DocsDecorator/DocsDecorator';
 
-import {WithLang} from './decorators/withLang';
 import {themes} from './theme';
 
-configure({
-    lang: Lang.En,
-});
+settings.loadLocale('ru');
 
 const WithContextProvider: Decorator = (Story, context) => {
     return (
         <React.StrictMode>
-            <ThemeProvider theme={context.globals.theme} direction={context.globals.direction}>
+            <ThemeProvider
+                theme={context.globals.theme}
+                direction={context.globals.direction}
+                lang={context.globals.lang}
+            >
                 <MobileProvider mobile={context.globals.platform === 'mobile'}>
                     <ToasterProvider toaster={toaster}>
                         <Story {...context} />
@@ -46,9 +41,6 @@ const preview: Preview = {
         docs: {
             theme: themes.light,
             container: DocsDecorator,
-            canvas: {
-                className: 'g-storybook-docs-decorator__canvas',
-            },
             codePanel: true,
         },
         jsx: {showFunctions: false}, // Do not show functions in sources
@@ -61,10 +53,9 @@ const preview: Preview = {
             },
         },
     },
-    decorators: [WithLang, WithContextProvider],
+    decorators: [WithContextProvider],
     globalTypes: {
         theme: {
-            defaultValue: 'light',
             toolbar: {
                 title: 'Theme',
                 icon: 'mirror',
@@ -78,7 +69,6 @@ const preview: Preview = {
             },
         },
         lang: {
-            defaultValue: 'en',
             toolbar: {
                 title: 'Language',
                 icon: 'globe',
@@ -90,7 +80,6 @@ const preview: Preview = {
             },
         },
         direction: {
-            defaultValue: 'ltr',
             toolbar: {
                 title: 'Direction',
                 icon: 'menu',
@@ -102,7 +91,6 @@ const preview: Preview = {
             },
         },
         platform: {
-            defaultValue: 'desktop',
             toolbar: {
                 title: 'Platform',
                 items: [
@@ -113,6 +101,12 @@ const preview: Preview = {
             },
         },
     },
+    initialGlobals: {
+        theme: 'light',
+        lang: 'en',
+        direction: 'ltr',
+        platform: 'desktop',
+    },
 };
 
 export default preview;

README.md

@@ -3,7 +3,95 @@
 ## Install
 
 ```shell
-npm install --save-dev @gravity-ui/uikit @gravity-ui/date-components
+npm install react react-dom @gravity-ui/uikit @gravity-ui/date-components @gravity-ui/date-utils
+```
+
+## Usage
+
+```jsx
+import {createRoot} from 'react-dom/client';
+import {DatePicker} from '@gravity-ui/date-components';
+import {ThemeProvider} from '@gravity-ui/uikit';
+
+import '@gravity-ui/uikit/styles/styles.css';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <h1>DatePicker</h1>
+      <form>
+        <label forHtml="date-picker">Date:</label>
+        <DatePicker id="date-picker" name="date" />
+      </form>
+    </ThemeProvider>
+  );
+}
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+```
+
+### Localization
+
+```jsx
+import {settings} from '@gravity-ui/date-utils';
+
+// Load date locales that will be used in an application.
+settings.loadLocale('ru');
+
+function App() {
+  return (
+    // Set the language to use with components.
+    <ThemeProvider lang="ru">
+      <h1>DatePicker</h1>
+      <form>
+        <label forHtml="date-picker">Дата:</label>
+        <DatePicker id="date-picker" name="date" />
+      </form>
+    </ThemeProvider>
+  );
+}
+```
+
+If the app supports language switching, preload all supported locales when the app first loads, or load the locales before switching the language:
+
+```jsx
+// Preload locales
+settings.loadLocale('ru');
+settings.loadLocale('nl');
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+
+// or load locales on demand.
+
+function App() {
+  const [lang, setLang] = React.useState('en');
+
+  const handleLangChange = (newLang) => {
+    settings.loadLocale(newLang).then(() => {
+      setLang(newLang);
+    });
+  };
+
+  return <ThemeProvider lang={lang}>...</ThemeProvider>;
+}
+```
+
+The components have translations into English and Russian. To add translations into other languages, use `addLanguageKeysets` from `@gravity-ui/uikit`:
+
+```ts
+import {addLanguageKeysets} from '@gravity-ui/uikit/i18n';
+import type {Keysets, PartialKeysets} from '@gravity-ui/date-components';
+
+// Use the Keyset type to specify translations for all available components
+addLanguageKeysets<Keysets>(lang, {...});
+
+// or use the PartialKeysets type to specify only the ones you need
+addLanguageKeysets<PartialKeysets>(lang, {...});
+
+// To specify translations for some components
+addLanguageKeysets<Pick<Keysets, 'g-date-calendar' | 'g-date-date-field' | 'g-date-date-picker'>>(lang, {...});
 ```
 
 ## Development

commitlint.config.js

@@ -1,4 +1,4 @@
-/** @type import('@commitlint/types').UserConfig */
+/** @type {import('@commitlint/types').UserConfig} */
 const config = {
     extends: ['@commitlint/config-conventional'],
 };

eslint.config.mjs

@@ -3,20 +3,23 @@ import a11yConfig from '@gravity-ui/eslint-config/a11y';
 import clientConfig from '@gravity-ui/eslint-config/client';
 import importOrderConfig from '@gravity-ui/eslint-config/import-order';
 import prettierConfig from '@gravity-ui/eslint-config/prettier';
-import {defineConfig} from 'eslint/config';
+import {defineConfig, globalIgnores} from 'eslint/config';
 import reactCompiler from 'eslint-plugin-react-compiler';
 import storybookPlugin from 'eslint-plugin-storybook';
 import testingLibraryPlugin from 'eslint-plugin-testing-library';
 import globals from 'globals';
 
 export default defineConfig([
-    ...baseConfig,
-    ...clientConfig,
-    ...prettierConfig,
-    ...importOrderConfig,
-    ...a11yConfig,
-    ...storybookPlugin.configs['flat/recommended'],
-    {...reactCompiler.configs.recommended, rules: {'react-compiler/react-compiler': 'warn'}},
+    baseConfig,
+    clientConfig,
+    prettierConfig,
+    importOrderConfig,
+    a11yConfig,
+    storybookPlugin.configs['flat/recommended'],
+    {
+        extends: [reactCompiler.configs.recommended],
+        rules: {'react-compiler/react-compiler': 'warn'},
+    },
     {
         rules: {
             complexity: 'off',
@@ -56,5 +59,5 @@ export default defineConfig([
     },
     {files: ['**/__stories__/**/*.[jt]s?(x)'], rules: {'no-console': 'off'}},
     {files: ['**/*.js', '!src/**/*'], languageOptions: {globals: {...globals.node}}},
-    {ignores: ['dist', 'storybook-static', '!/.storybook']},
+    globalIgnores(['dist', 'storybook-static', '!/.storybook']),
 ]);