@snack-uikit/locale 0.13.0 → 0.13.1-preview-9354ceb8.0

package/README.md

@@ -49,20 +49,20 @@ const lang = 'en_GB'; // or 'ru_RU' or 'custom_LANG'
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
-
 ## LocaleProvider
-
 ### Props
-
-| name    | type                                                                                                                                                                                                                                                                                                                              | default value | description |
-| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ----------- |
-| lang\*  | `string`                                                                                                                                                                                                                                                                                                                          | -             |             |
-| locales | `PartialObjectDeep<Record<string, { Table: { searchPlaceholder: string; noData: { title: string; }; noResults: { title: string; description: string; }; errorData: { title: string; description: string; }; rowsOptionsLabel: string; export: string; groupSelectButton: { ...; }; }; ... 7 more ...; ToastUpload: { ...; }; }>>` | -             |             |
-
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| lang* | "en-GB" \| "ru-RU" | - |  |
 ## useLocale
-
-`helper`
+`helper` 
 
 Inner hook to use translations
+## createLocaleContext
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| extendedDictionary | `ExtendedDictionary<D>` | - |  |
+
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/cjs/components/LocaleProvider/LocaleProvider.d.ts

@@ -1,15 +1,41 @@
 import { ReactNode } from 'react';
-import { LocaleDictionary, LocaleLang, OverrideLocales } from '../../types';
-export declare const DEFAULT_LANG = "en_GB";
-export type LocaleContextType = {
+import { Dictionary, DottedTranslationKey, ExtendedDictionary, LocaleDictionary, LocaleLang } from '../../types';
+export declare const DEFAULT_LANG = "en-GB";
+export type LocaleContextType<D extends Dictionary> = {
     lang: LocaleLang;
-    locales: OverrideLocales;
-    localesByLang: LocaleDictionary;
+    localesByLang: LocaleDictionary<D>;
 };
-export declare const LocaleContext: import("react").Context<LocaleContextType>;
 export type LocaleProviderProps = {
     lang: LocaleLang;
-    locales?: OverrideLocales;
     children: ReactNode;
 };
-export declare function LocaleProvider({ lang: langProp, locales: localesProp, children }: LocaleProviderProps): import("react/jsx-runtime").JSX.Element;
+export type ContextOptions<D extends Dictionary> = {
+    extendedDictionary?: ExtendedDictionary<D>;
+};
+type LocaleComponentName<D extends Dictionary> = keyof LocaleDictionary<D>;
+type GetLocaleText<D extends Dictionary, T extends keyof LocaleDictionary<D> | undefined = undefined> = (key: DottedTranslationKey<D, T>) => string;
+export declare function createLocaleContext<D extends Dictionary>({ extendedDictionary }: ContextOptions<D>): {
+    LocaleContext: import("react").Context<LocaleContextType<D>>;
+    LocaleProvider: ({ lang, children }: LocaleProviderProps) => import("react/jsx-runtime").JSX.Element;
+    useLocale: {
+        (): {
+            t: GetLocaleText<D>;
+            lang: LocaleLang;
+        };
+        <C extends LocaleComponentName<D> = "Table" | "List" | "Chips" | "Fields" | "SearchPrivate" | "ColorPicker" | "Calendar" | "Toolbar" | "ToastUpload" | keyof D>(componentName: C): {
+            t: GetLocaleText<D, C>;
+            lang: LocaleLang;
+        };
+    };
+};
+export declare const LocaleProvider: ({ lang, children }: LocaleProviderProps) => import("react/jsx-runtime").JSX.Element, useLocale: {
+    (): {
+        t: GetLocaleText<Dictionary>;
+        lang: LocaleLang;
+    };
+    <C extends string = string>(componentName: C): {
+        t: GetLocaleText<Dictionary, C>;
+        lang: LocaleLang;
+    };
+};
+export {};

package/dist/cjs/components/LocaleProvider/LocaleProvider.js

@@ -5,48 +5,89 @@ var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
     "default": mod
   };
 };
+var _a;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LocaleContext = exports.DEFAULT_LANG = void 0;
-exports.LocaleProvider = LocaleProvider;
+exports.useLocale = exports.LocaleProvider = exports.DEFAULT_LANG = void 0;
+exports.createLocaleContext = createLocaleContext;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const lodash_merge_1 = __importDefault(require("lodash.merge"));
 const react_1 = require("react");
 const locales_1 = require("../../locales");
-exports.DEFAULT_LANG = 'en_GB';
-exports.LocaleContext = (0, react_1.createContext)({
-  lang: exports.DEFAULT_LANG,
-  locales: locales_1.LOCALES,
-  localesByLang: locales_1.LOCALES.en_GB
-});
-function LocaleProvider(_ref) {
+exports.DEFAULT_LANG = 'en-GB';
+function mergeLocaleWithExtension(extension) {
+  return (0, lodash_merge_1.default)({}, locales_1.LOCALES, extension);
+}
+function createLocaleContext(_ref) {
   let {
-    lang: langProp,
-    locales: localesProp,
-    children
+    extendedDictionary
   } = _ref;
-  const locales = (0, react_1.useMemo)(() => {
-    if (localesProp) {
-      return (0, lodash_merge_1.default)({}, locales_1.LOCALES, localesProp);
-    }
-    return locales_1.LOCALES;
-  }, [localesProp]);
-  const lang = (0, react_1.useMemo)(() => langProp.replace('-', '_'), [langProp]);
-  const localesByLang = (0, react_1.useMemo)(() => {
-    let localesObj = locales[lang];
-    if (!localesObj) {
-      console.warn(`Snack-uikit: localization for lang ${lang} was not found. Make sure you are using correct lang or passed proper locales to LocaleProvider. For now default language (${exports.DEFAULT_LANG}) will be used`);
-      localesObj = locales[exports.DEFAULT_LANG];
-    }
-    return localesObj;
-  }, [lang, locales]);
-  return (0, jsx_runtime_1.jsx)(exports.LocaleContext.Provider, {
-    value: {
-      lang,
-      locales,
-      localesByLang
-    },
-    children: children
+  const locales = mergeLocaleWithExtension(extendedDictionary);
+  const LocaleContext = (0, react_1.createContext)({
+    lang: exports.DEFAULT_LANG,
+    localesByLang: locales['en-GB']
   });
-}
+  function LocaleProvider(_ref2) {
+    let {
+      lang,
+      children
+    } = _ref2;
+    const localesByLang = (0, react_1.useMemo)(() => {
+      let localesObj = locales[lang];
+      if (!localesObj) {
+        console.warn(`Snack-uikit: localization for lang ${lang} was not found. Make sure you are using correct lang or passed proper locales to LocaleProvider. For now default language (${exports.DEFAULT_LANG}) will be used`);
+        localesObj = locales[exports.DEFAULT_LANG];
+      }
+      return localesObj;
+    }, [lang]);
+    return (0, jsx_runtime_1.jsx)(LocaleContext.Provider, {
+      value: {
+        lang,
+        localesByLang
+      },
+      children: children
+    });
+  }
+  function useLocale(componentName) {
+    const {
+      localesByLang,
+      lang
+    } = (0, react_1.useContext)(LocaleContext);
+    const locales = (0, react_1.useMemo)(() => {
+      if (!componentName) {
+        return localesByLang;
+      }
+      return localesByLang[componentName] || {};
+    }, [componentName, localesByLang]);
+    const getLocaleText = (0, react_1.useCallback)(key => {
+      let translation = '';
+      const complexKey = key.split('.');
+      if (complexKey.length === 1) {
+        translation = locales[key];
+      } else {
+        translation = complexKey.reduce((acc, cur) => {
+          if (typeof acc === 'string') {
+            return acc;
+          }
+          return acc[cur];
+        }, locales);
+      }
+      if (!(translation === null || translation === void 0 ? void 0 : translation.length)) {
+        console.warn(`Snack-uikit: the '${key}' key is not found in the current locale '${lang}'.`);
+        return key;
+      }
+      return translation;
+    }, [lang, locales]);
+    return {
+      t: getLocaleText,
+      lang
+    };
+  }
+  return {
+    LocaleContext,
+    LocaleProvider,
+    useLocale
+  };
+}
+_a = createLocaleContext({}), exports.LocaleProvider = _a.LocaleProvider, exports.useLocale = _a.useLocale;

package/dist/cjs/components/LocaleProvider/Sample.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type SampleWrapperProps = {
+    children: ReactNode;
+};
+export declare function SampleWrapper({ children }: SampleWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function OldDictionaryItemSample(): import("react/jsx-runtime").JSX.Element;
+export declare function NewDictionarySample(): import("react/jsx-runtime").JSX.Element;
+export declare function NewDictSimpleTranslationComponent(): import("react/jsx-runtime").JSX.Element;
+export declare function NewDictDeepTranslationComponent(): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/cjs/components/LocaleProvider/Sample.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SampleWrapper = SampleWrapper;
+exports.OldDictionaryItemSample = OldDictionaryItemSample;
+exports.NewDictionarySample = NewDictionarySample;
+exports.NewDictSimpleTranslationComponent = NewDictSimpleTranslationComponent;
+exports.NewDictDeepTranslationComponent = NewDictDeepTranslationComponent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LocaleProvider_1 = require("./LocaleProvider");
+const sampleExtensionEn = {
+  Table: {
+    searchPlaceholder: 'SearchOverriden'
+  },
+  ButtonPredefined: {
+    create: 'Create',
+    cancel: 'Cancel',
+    refetch: 'Refetch'
+  },
+  Site: {
+    Section: {
+      Basic: {
+        ShowMore: 'Show More'
+      },
+      PersonalManager: {
+        title: 'More than regular support',
+        subtitle: 'Full support for solving your problems and achieving business results'
+      }
+    }
+  }
+};
+const sampleExtensionRu = {
+  Table: {
+    searchPlaceholder: 'SearchOverriden'
+  },
+  ButtonPredefined: {
+    create: 'Создать',
+    cancel: 'Отмена',
+    refetch: 'Обновить'
+  },
+  Site: {
+    Section: {
+      Basic: {
+        ShowMore: 'Показать еще'
+      },
+      PersonalManager: {
+        title: 'Больше чем просто поддержка',
+        subtitle: 'Полное сопровождение для решения ваших задач и понятный бизнес-результат'
+      }
+    }
+  }
+};
+const extension = {
+  'en-GB': sampleExtensionEn,
+  'ru-RU': sampleExtensionRu
+};
+const {
+  LocaleProvider,
+  useLocale
+} = (0, LocaleProvider_1.createLocaleContext)({
+  extendedDictionary: extension
+});
+function SampleWrapper(_ref) {
+  let {
+    children
+  } = _ref;
+  return (0, jsx_runtime_1.jsx)(LocaleProvider, {
+    lang: 'ru-RU',
+    children: children
+  });
+}
+function OldDictionaryItemSample() {
+  const {
+    t
+  } = useLocale('Table');
+  return (0, jsx_runtime_1.jsxs)("div", {
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      children: t('searchPlaceholder')
+    }), (0, jsx_runtime_1.jsx)("div", {
+      children: t('noResults.title')
+    })]
+  });
+}
+function NewDictionarySample() {
+  const {
+    t
+  } = useLocale();
+  return (0, jsx_runtime_1.jsxs)("div", {
+    children: [(0, jsx_runtime_1.jsx)("div", {
+      children: t('Table.searchPlaceholder')
+    }), (0, jsx_runtime_1.jsx)("div", {
+      children: t('Table.noResults.title')
+    }), (0, jsx_runtime_1.jsx)("div", {
+      children: t('ButtonPredefined.create')
+    }), (0, jsx_runtime_1.jsx)("div", {
+      children: t('Site.Section.PersonalManager.title')
+    })]
+  });
+}
+function NewDictSimpleTranslationComponent() {
+  const {
+    t
+  } = useLocale('ButtonPredefined');
+  return (0, jsx_runtime_1.jsx)("div", {
+    children: t('create')
+  });
+}
+function NewDictDeepTranslationComponent() {
+  const {
+    t
+  } = useLocale('Site');
+  return (0, jsx_runtime_1.jsx)("div", {
+    children: t('Section.PersonalManager.title')
+  });
+}

package/dist/cjs/components/LocaleProvider/index.d.ts

@@ -1,2 +1 @@
-export { type LocaleProviderProps, LocaleProvider } from './LocaleProvider';
-export { useLocale } from './hooks';
+export { type LocaleProviderProps, LocaleProvider, useLocale, createLocaleContext } from './LocaleProvider';

package/dist/cjs/components/LocaleProvider/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useLocale = exports.LocaleProvider = void 0;
+exports.createLocaleContext = exports.useLocale = exports.LocaleProvider = void 0;
 var LocaleProvider_1 = require("./LocaleProvider");
 Object.defineProperty(exports, "LocaleProvider", {
   enumerable: true,
@@ -11,10 +11,15 @@ Object.defineProperty(exports, "LocaleProvider", {
     return LocaleProvider_1.LocaleProvider;
   }
 });
-var hooks_1 = require("./hooks");
 Object.defineProperty(exports, "useLocale", {
   enumerable: true,
   get: function () {
-    return hooks_1.useLocale;
+    return LocaleProvider_1.useLocale;
+  }
+});
+Object.defineProperty(exports, "createLocaleContext", {
+  enumerable: true,
+  get: function () {
+    return LocaleProvider_1.createLocaleContext;
   }
 });

package/dist/cjs/locales/index.d.ts

@@ -1,5 +1,5 @@
 export declare const LOCALES: {
-    readonly en_GB: {
+    readonly 'en-GB': {
         Table: {
             searchPlaceholder: string;
             noData: {
@@ -76,7 +76,7 @@ export declare const LOCALES: {
             };
         };
     };
-    readonly ru_RU: {
+    readonly 'ru-RU': {
         Table: {
             searchPlaceholder: string;
             noData: {

package/dist/cjs/locales/index.js

@@ -7,6 +7,6 @@ exports.LOCALES = void 0;
 const en_GB_1 = require("./en_GB");
 const ru_RU_1 = require("./ru_RU");
 exports.LOCALES = {
-  en_GB: en_GB_1.en_GB,
-  ru_RU: ru_RU_1.ru_RU
+  'en-GB': en_GB_1.en_GB,
+  'ru-RU': ru_RU_1.ru_RU
 };

package/dist/cjs/typeUtils.d.ts

@@ -1,28 +1,3 @@
-type Primitive = null | undefined | string | number | boolean | symbol | bigint;
-type BuiltIns = Primitive | void | Date | RegExp;
-export type PartialDeep<T> = T extends BuiltIns | ((...arguments_: unknown[]) => unknown) | (new (...arguments_: unknown[]) => unknown) ? T : T extends Map<infer KeyType, infer ValueType> ? PartialMapDeep<KeyType, ValueType> : T extends Set<infer ItemType> ? PartialSetDeep<ItemType> : T extends ReadonlyMap<infer KeyType, infer ValueType> ? PartialReadonlyMapDeep<KeyType, ValueType> : T extends ReadonlySet<infer ItemType> ? PartialReadonlySetDeep<ItemType> : T extends object ? PartialObjectDeep<T> : unknown;
-/**
- Same as `PartialDeep`, but accepts only `Map`s and as inputs. Internal helper for `PartialDeep`.
- */
-type PartialMapDeep<KeyType, ValueType> = unknown & Map<PartialDeep<KeyType>, PartialDeep<ValueType>>;
-/**
- Same as `PartialDeep`, but accepts only `Set`s as inputs. Internal helper for `PartialDeep`.
- */
-type PartialSetDeep<T> = unknown & Set<PartialDeep<T>>;
-/**
- Same as `PartialDeep`, but accepts only `ReadonlyMap`s as inputs. Internal helper for `PartialDeep`.
- */
-type PartialReadonlyMapDeep<KeyType, ValueType> = unknown & ReadonlyMap<PartialDeep<KeyType>, PartialDeep<ValueType>>;
-/**
- Same as `PartialDeep`, but accepts only `ReadonlySet`s as inputs. Internal helper for `PartialDeep`.
- */
-type PartialReadonlySetDeep<T> = unknown & ReadonlySet<PartialDeep<T>>;
-/**
- Same as `PartialDeep`, but accepts only `object`s as inputs. Internal helper for `PartialDeep`.
- */
-type PartialObjectDeep<ObjectType extends object> = {
-    [KeyType in keyof ObjectType]?: PartialDeep<ObjectType[KeyType]>;
-};
 /**
  * https://stackoverflow.com/a/73179989
  */

package/dist/cjs/types.d.ts

@@ -1,7 +1,11 @@
 import { LOCALES } from './locales';
-import { PartialDeep, PathsToProps } from './typeUtils';
-export type KnownLocaleLang = keyof typeof LOCALES;
-export type LocaleLang = KnownLocaleLang | string;
-export type LocaleDictionary = typeof LOCALES.en_GB;
-export type OverrideLocales = PartialDeep<Record<LocaleLang, LocaleDictionary>>;
-export type DottedTranslationKey<C extends keyof LocaleDictionary | undefined = undefined> = C extends keyof LocaleDictionary ? PathsToProps<LocaleDictionary[C], string> : PathsToProps<LocaleDictionary, string>;
+import { PathsToProps } from './typeUtils';
+export type LocaleLang = keyof typeof LOCALES;
+export type TranslatedEntity = {
+    [key: string]: string | TranslatedEntity;
+};
+export type Dictionary = Record<string, TranslatedEntity>;
+export type LocaleDictionary<D extends Dictionary> = (typeof LOCALES)['en-GB'] & D;
+export type Locales<D extends Dictionary> = Record<LocaleLang, LocaleDictionary<D>>;
+export type DottedTranslationKey<D extends Dictionary, C extends keyof LocaleDictionary<D> | undefined = undefined> = C extends keyof LocaleDictionary<D> ? PathsToProps<LocaleDictionary<D>[C], string> : PathsToProps<LocaleDictionary<D>, string>;
+export type ExtendedDictionary<D> = Record<LocaleLang, D>;

package/dist/esm/components/LocaleProvider/LocaleProvider.d.ts

@@ -1,15 +1,41 @@
 import { ReactNode } from 'react';
-import { LocaleDictionary, LocaleLang, OverrideLocales } from '../../types';
-export declare const DEFAULT_LANG = "en_GB";
-export type LocaleContextType = {
+import { Dictionary, DottedTranslationKey, ExtendedDictionary, LocaleDictionary, LocaleLang } from '../../types';
+export declare const DEFAULT_LANG = "en-GB";
+export type LocaleContextType<D extends Dictionary> = {
     lang: LocaleLang;
-    locales: OverrideLocales;
-    localesByLang: LocaleDictionary;
+    localesByLang: LocaleDictionary<D>;
 };
-export declare const LocaleContext: import("react").Context<LocaleContextType>;
 export type LocaleProviderProps = {
     lang: LocaleLang;
-    locales?: OverrideLocales;
     children: ReactNode;
 };
-export declare function LocaleProvider({ lang: langProp, locales: localesProp, children }: LocaleProviderProps): import("react/jsx-runtime").JSX.Element;
+export type ContextOptions<D extends Dictionary> = {
+    extendedDictionary?: ExtendedDictionary<D>;
+};
+type LocaleComponentName<D extends Dictionary> = keyof LocaleDictionary<D>;
+type GetLocaleText<D extends Dictionary, T extends keyof LocaleDictionary<D> | undefined = undefined> = (key: DottedTranslationKey<D, T>) => string;
+export declare function createLocaleContext<D extends Dictionary>({ extendedDictionary }: ContextOptions<D>): {
+    LocaleContext: import("react").Context<LocaleContextType<D>>;
+    LocaleProvider: ({ lang, children }: LocaleProviderProps) => import("react/jsx-runtime").JSX.Element;
+    useLocale: {
+        (): {
+            t: GetLocaleText<D>;
+            lang: LocaleLang;
+        };
+        <C extends LocaleComponentName<D> = "Table" | "List" | "Chips" | "Fields" | "SearchPrivate" | "ColorPicker" | "Calendar" | "Toolbar" | "ToastUpload" | keyof D>(componentName: C): {
+            t: GetLocaleText<D, C>;
+            lang: LocaleLang;
+        };
+    };
+};
+export declare const LocaleProvider: ({ lang, children }: LocaleProviderProps) => import("react/jsx-runtime").JSX.Element, useLocale: {
+    (): {
+        t: GetLocaleText<Dictionary>;
+        lang: LocaleLang;
+    };
+    <C extends string = string>(componentName: C): {
+        t: GetLocaleText<Dictionary, C>;
+        lang: LocaleLang;
+    };
+};
+export {};

package/dist/esm/components/LocaleProvider/LocaleProvider.js

@@ -1,28 +1,65 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import merge from 'lodash.merge';
-import { createContext, useMemo } from 'react';
+import { createContext, useCallback, useContext, useMemo } from 'react';
 import { LOCALES } from '../../locales';
-export const DEFAULT_LANG = 'en_GB';
-export const LocaleContext = createContext({
-    lang: DEFAULT_LANG,
-    locales: LOCALES,
-    localesByLang: LOCALES.en_GB,
-});
-export function LocaleProvider({ lang: langProp, locales: localesProp, children }) {
-    const locales = useMemo(() => {
-        if (localesProp) {
-            return merge({}, LOCALES, localesProp);
-        }
-        return LOCALES;
-    }, [localesProp]);
-    const lang = useMemo(() => langProp.replace('-', '_'), [langProp]);
-    const localesByLang = useMemo(() => {
-        let localesObj = locales[lang];
-        if (!localesObj) {
-            console.warn(`Snack-uikit: localization for lang ${lang} was not found. Make sure you are using correct lang or passed proper locales to LocaleProvider. For now default language (${DEFAULT_LANG}) will be used`);
-            localesObj = locales[DEFAULT_LANG];
-        }
-        return localesObj;
-    }, [lang, locales]);
-    return _jsx(LocaleContext.Provider, { value: { lang, locales, localesByLang }, children: children });
+export const DEFAULT_LANG = 'en-GB';
+function mergeLocaleWithExtension(extension) {
+    return merge({}, LOCALES, extension);
 }
+export function createLocaleContext({ extendedDictionary }) {
+    const locales = mergeLocaleWithExtension(extendedDictionary);
+    const LocaleContext = createContext({
+        lang: DEFAULT_LANG,
+        localesByLang: locales['en-GB'],
+    });
+    function LocaleProvider({ lang, children }) {
+        const localesByLang = useMemo(() => {
+            let localesObj = locales[lang];
+            if (!localesObj) {
+                console.warn(`Snack-uikit: localization for lang ${lang} was not found. Make sure you are using correct lang or passed proper locales to LocaleProvider. For now default language (${DEFAULT_LANG}) will be used`);
+                localesObj = locales[DEFAULT_LANG];
+            }
+            return localesObj;
+        }, [lang]);
+        return _jsx(LocaleContext.Provider, { value: { lang, localesByLang }, children: children });
+    }
+    function useLocale(componentName) {
+        const { localesByLang, lang } = useContext(LocaleContext);
+        const locales = useMemo(() => {
+            if (!componentName) {
+                return localesByLang;
+            }
+            return (localesByLang[componentName] || {});
+        }, [componentName, localesByLang]);
+        const getLocaleText = useCallback(key => {
+            let translation = '';
+            const complexKey = key.split('.');
+            if (complexKey.length === 1) {
+                translation = locales[key];
+            }
+            else {
+                translation = complexKey.reduce((acc, cur) => {
+                    if (typeof acc === 'string') {
+                        return acc;
+                    }
+                    return acc[cur];
+                }, locales);
+            }
+            if (!(translation === null || translation === void 0 ? void 0 : translation.length)) {
+                console.warn(`Snack-uikit: the '${key}' key is not found in the current locale '${lang}'.`);
+                return key;
+            }
+            return translation;
+        }, [lang, locales]);
+        return {
+            t: getLocaleText,
+            lang,
+        };
+    }
+    return {
+        LocaleContext,
+        LocaleProvider,
+        useLocale,
+    };
+}
+export const { LocaleProvider, useLocale } = createLocaleContext({});

package/dist/esm/components/LocaleProvider/Sample.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+type SampleWrapperProps = {
+    children: ReactNode;
+};
+export declare function SampleWrapper({ children }: SampleWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare function OldDictionaryItemSample(): import("react/jsx-runtime").JSX.Element;
+export declare function NewDictionarySample(): import("react/jsx-runtime").JSX.Element;
+export declare function NewDictSimpleTranslationComponent(): import("react/jsx-runtime").JSX.Element;
+export declare function NewDictDeepTranslationComponent(): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/LocaleProvider/Sample.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createLocaleContext } from './LocaleProvider';
+const sampleExtensionEn = {
+    Table: {
+        searchPlaceholder: 'SearchOverriden',
+    },
+    ButtonPredefined: {
+        create: 'Create',
+        cancel: 'Cancel',
+        refetch: 'Refetch',
+    },
+    Site: {
+        Section: {
+            Basic: {
+                ShowMore: 'Show More',
+            },
+            PersonalManager: {
+                title: 'More than regular support',
+                subtitle: 'Full support for solving your problems and achieving business results',
+            },
+        },
+    },
+};
+const sampleExtensionRu = {
+    Table: {
+        searchPlaceholder: 'SearchOverriden',
+    },
+    ButtonPredefined: {
+        create: 'Создать',
+        cancel: 'Отмена',
+        refetch: 'Обновить',
+    },
+    Site: {
+        Section: {
+            Basic: {
+                ShowMore: 'Показать еще',
+            },
+            PersonalManager: {
+                title: 'Больше чем просто поддержка',
+                subtitle: 'Полное сопровождение для решения ваших задач и понятный бизнес-результат',
+            },
+        },
+    },
+};
+const extension = {
+    'en-GB': sampleExtensionEn,
+    'ru-RU': sampleExtensionRu,
+};
+const { LocaleProvider, useLocale } = createLocaleContext({ extendedDictionary: extension });
+export function SampleWrapper({ children }) {
+    return _jsx(LocaleProvider, { lang: 'ru-RU', children: children });
+}
+export function OldDictionaryItemSample() {
+    const { t } = useLocale('Table');
+    return (_jsxs("div", { children: [_jsx("div", { children: t('searchPlaceholder') }), _jsx("div", { children: t('noResults.title') })] }));
+}
+export function NewDictionarySample() {
+    const { t } = useLocale();
+    return (_jsxs("div", { children: [_jsx("div", { children: t('Table.searchPlaceholder') }), _jsx("div", { children: t('Table.noResults.title') }), _jsx("div", { children: t('ButtonPredefined.create') }), _jsx("div", { children: t('Site.Section.PersonalManager.title') })] }));
+}
+export function NewDictSimpleTranslationComponent() {
+    const { t } = useLocale('ButtonPredefined');
+    return _jsx("div", { children: t('create') });
+}
+export function NewDictDeepTranslationComponent() {
+    const { t } = useLocale('Site');
+    return _jsx("div", { children: t('Section.PersonalManager.title') });
+}

package/dist/esm/components/LocaleProvider/index.d.ts

@@ -1,2 +1 @@
-export { type LocaleProviderProps, LocaleProvider } from './LocaleProvider';
-export { useLocale } from './hooks';
+export { type LocaleProviderProps, LocaleProvider, useLocale, createLocaleContext } from './LocaleProvider';