@snack-uikit/locale 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.4.0 (2024-02-12)
+
+
+### Bug Fixes
+
+* **FF-4205:** add typing to ru locale to match texts ([fd4a435](https://github.com/cloud-ru-tech/snack-uikit/commit/fd4a43532bb8a349d8e1f765285491ae65c00882))
+
+
+### Features
+
+* **FF-4205:** changed api of useLocale hook ([5c19647](https://github.com/cloud-ru-tech/snack-uikit/commit/5c19647f21d072e92c48c4b9588ed9df86c0ae86))
+
+
+
+
+
 # 0.3.0 (2024-02-09)
 
 

package/README.md

@@ -54,7 +54,7 @@ const lang = 'en_GB'; // or 'ru_RU' or 'custom_LANG'
 | name | type | default value | description |
 |------|------|---------------|-------------|
 | lang* | `string` | - |  |
-| locales | `OverrideLocales` | - |  |
+| locales | `PartialObjectDeep<Record<string, { firstLevelTrans: string; Table: { searchPlaceholder: string; noData: { title: string; }; noResults: { title: string; description: string; }; errorData: { title: string; description: string; }; rowsOptionsLabel: string; export: string; }; Chips: { ...; }; Fields: { ...; }; }>>` | - |  |
 ## useLocale
 `helper` 
 

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

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
-import { LocaleLang, OverrideLocales } from '../../types';
+import { LocaleDictionary, LocaleLang, OverrideLocales } from '../../types';
 export declare const DEFAULT_LANG = "en_GB";
 export type LocaleContextType = {
     lang: LocaleLang;
     locales: OverrideLocales;
+    localesByLang: LocaleDictionary;
 };
 export declare const LocaleContext: import("react").Context<LocaleContextType>;
 export type LocaleProviderProps = {

package/dist/components/LocaleProvider/LocaleProvider.js

@@ -6,8 +6,9 @@ export const DEFAULT_LANG = 'en_GB';
 export const LocaleContext = createContext({
     lang: DEFAULT_LANG,
     locales: LOCALES,
+    localesByLang: LOCALES.en_GB,
 });
-export function LocaleProvider({ lang: langProp = DEFAULT_LANG, locales: localesProp, children }) {
+export function LocaleProvider({ lang: langProp, locales: localesProp, children }) {
     const locales = useMemo(() => {
         if (localesProp) {
             return merge({}, LOCALES, localesProp);
@@ -15,5 +16,13 @@ export function LocaleProvider({ lang: langProp = DEFAULT_LANG, locales: locales
         return LOCALES;
     }, [localesProp]);
     const lang = useMemo(() => langProp.replace('-', '_'), [langProp]);
-    return _jsx(LocaleContext.Provider, { value: { lang, locales }, children: 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, locales]);
+    return _jsx(LocaleContext.Provider, { value: { lang, locales, localesByLang }, children: children });
 }

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

@@ -1,9 +1,16 @@
-import { LocaleDictionary, LocaleLang } from '../../types';
+import { DottedTranslationKey, LocaleDictionary, LocaleLang } from '../../types';
 type LocaleComponentName = keyof LocaleDictionary;
+type GetLocaleText<T extends keyof LocaleDictionary | undefined = undefined> = (key: DottedTranslationKey<T>) => string;
 /**
  * Inner hook to use translations
  * @function helper
  */
-export declare function useLocale(): [LocaleDictionary, LocaleLang];
-export declare function useLocale<C extends LocaleComponentName = LocaleComponentName>(componentName: C): [LocaleDictionary[C], LocaleLang];
+export declare function useLocale(): {
+    t: GetLocaleText;
+    lang: LocaleLang;
+};
+export declare function useLocale<C extends LocaleComponentName = LocaleComponentName>(componentName: C): {
+    t: GetLocaleText<C>;
+    lang: LocaleLang;
+};
 export {};

package/dist/components/LocaleProvider/hooks.js

@@ -1,17 +1,30 @@
-import { useContext, useMemo } from 'react';
-import { DEFAULT_LANG, LocaleContext } from './LocaleProvider';
+import { useCallback, useContext, useMemo } from 'react';
+import { LocaleContext } from './LocaleProvider';
 export function useLocale(componentName) {
-    const { locales: ctxLocales, lang } = useContext(LocaleContext);
+    const { localesByLang, lang } = useContext(LocaleContext);
     const locales = useMemo(() => {
-        let localesObj = ctxLocales[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 = ctxLocales[DEFAULT_LANG];
-        }
         if (!componentName) {
-            return localesObj;
+            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) => 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 (localesObj[componentName] || {});
-    }, [componentName, lang, ctxLocales]);
-    return [locales, lang];
+        return translation;
+    }, [lang, locales]);
+    return {
+        t: getLocaleText,
+        lang,
+    };
 }

package/dist/locales/ru_RU.d.ts

@@ -1,27 +1,2 @@
-export declare const ru_RU: {
-    Table: {
-        searchPlaceholder: string;
-        noData: {
-            title: string;
-        };
-        noResults: {
-            title: string;
-            description: string;
-        };
-        errorData: {
-            title: string;
-            description: string;
-        };
-        rowsOptionsLabel: string;
-        export: string;
-    };
-    Chips: {
-        clearAllButton: string;
-    };
-    Fields: {
-        limitTooltip: {
-            max: string;
-            min: string;
-        };
-    };
-};
+import { en_GB } from './en_GB';
+export declare const ru_RU: typeof en_GB;

package/dist/typeUtils.d.ts

@@ -23,4 +23,8 @@ type PartialReadonlySetDeep<T> = unknown & ReadonlySet<PartialDeep<T>>;
 type PartialObjectDeep<ObjectType extends object> = {
     [KeyType in keyof ObjectType]?: PartialDeep<ObjectType[KeyType]>;
 };
+export type PathsToStringProps<T> = T extends string ? [] : {
+    [K in Extract<keyof T, string>]: [K, ...PathsToStringProps<T[K]>];
+}[Extract<keyof T, string>];
+export type Join<T extends string[], D extends string> = T extends [] ? never : T extends [infer F] ? F : T extends [infer F, ...infer R] ? F extends string ? `${F}${D}${Join<Extract<R, string[]>, D>}` : never : string;
 export {};

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 import { LOCALES } from './locales';
-import { PartialDeep } from './typeUtils';
+import { Join, PartialDeep, PathsToStringProps } 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<KnownLocaleLang, LocaleDictionary>> & Record<string, LocaleDictionary>;
+export type OverrideLocales = PartialDeep<Record<LocaleLang, LocaleDictionary>>;
+export type DottedTranslationKey<C extends keyof LocaleDictionary | undefined = undefined> = C extends string ? Join<PathsToStringProps<LocaleDictionary[C]>, '.'> : Join<PathsToStringProps<LocaleDictionary>, '.'>;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Locale",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,5 +37,5 @@
   "devDependencies": {
     "@types/lodash.merge": "4.6.9"
   },
-  "gitHead": "3a1dd5498600db7f34a4681a70254b81337ddeb4"
+  "gitHead": "5e7b0b6d34f40c4266070bf918e9cdf127ac882c"
 }

package/src/components/LocaleProvider/LocaleProvider.tsx

@@ -2,18 +2,20 @@ import merge from 'lodash.merge';
 import { createContext, ReactNode, useMemo } from 'react';
 
 import { LOCALES } from '../../locales';
-import { LocaleLang, OverrideLocales } from '../../types';
+import { KnownLocaleLang, LocaleDictionary, LocaleLang, OverrideLocales } from '../../types';
 
 export const DEFAULT_LANG = 'en_GB';
 
 export type LocaleContextType = {
   lang: LocaleLang;
   locales: OverrideLocales;
+  localesByLang: LocaleDictionary;
 };
 
 export const LocaleContext = createContext<LocaleContextType>({
   lang: DEFAULT_LANG,
   locales: LOCALES,
+  localesByLang: LOCALES.en_GB,
 });
 
 export type LocaleProviderProps = {
@@ -22,7 +24,7 @@ export type LocaleProviderProps = {
   children: ReactNode;
 };
 
-export function LocaleProvider({ lang: langProp = DEFAULT_LANG, locales: localesProp, children }: LocaleProviderProps) {
+export function LocaleProvider({ lang: langProp, locales: localesProp, children }: LocaleProviderProps) {
   const locales = useMemo(() => {
     if (localesProp) {
       return merge({}, LOCALES, localesProp);
@@ -33,5 +35,19 @@ export function LocaleProvider({ lang: langProp = DEFAULT_LANG, locales: locales
 
   const lang = useMemo(() => langProp.replace('-', '_') as LocaleLang, [langProp]);
 
-  return <LocaleContext.Provider value={{ lang, locales }}>{children}</LocaleContext.Provider>;
+  const localesByLang = useMemo(() => {
+    let localesObj = locales[lang as KnownLocaleLang];
+
+    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] as LocaleDictionary;
+    }
+
+    return localesObj;
+  }, [lang, locales]);
+
+  return <LocaleContext.Provider value={{ lang, locales, localesByLang }}>{children}</LocaleContext.Provider>;
 }

package/src/components/LocaleProvider/hooks.ts

@@ -1,39 +1,62 @@
-import { useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo } from 'react';
 
-import { KnownLocaleLang, LocaleDictionary, LocaleLang } from '../../types';
-import { DEFAULT_LANG, LocaleContext, LocaleContextType } from './LocaleProvider';
+import { DottedTranslationKey, LocaleDictionary, LocaleLang } from '../../types';
+import { LocaleContext, LocaleContextType } from './LocaleProvider';
+
+type ValueOf<T> = T[keyof T];
 
 type LocaleComponentName = keyof LocaleDictionary;
 
+type GetLocaleText<T extends keyof LocaleDictionary | undefined = undefined> = (key: DottedTranslationKey<T>) => string;
+
 /**
  * Inner hook to use translations
  * @function helper
  */
-export function useLocale(): [LocaleDictionary, LocaleLang];
+export function useLocale(): { t: GetLocaleText; lang: LocaleLang };
 export function useLocale<C extends LocaleComponentName = LocaleComponentName>(
   componentName: C,
-): [LocaleDictionary[C], LocaleLang];
+): { t: GetLocaleText<C>; lang: LocaleLang };
 
 export function useLocale<C extends LocaleComponentName = LocaleComponentName>(componentName?: C) {
-  const { locales: ctxLocales, lang } = useContext<LocaleContextType>(LocaleContext);
+  const { localesByLang, lang } = useContext<LocaleContextType>(LocaleContext);
 
   const locales = useMemo(() => {
-    let localesObj = ctxLocales[lang as KnownLocaleLang];
+    if (!componentName) {
+      return localesByLang;
+    }
 
-    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`,
-      );
+    return (localesByLang[componentName] || {}) as LocaleDictionary[C];
+  }, [componentName, localesByLang]);
 
-      localesObj = ctxLocales[DEFAULT_LANG] as LocaleDictionary;
-    }
+  const getLocaleText: GetLocaleText<C> = useCallback(
+    key => {
+      let translation = '';
 
-    if (!componentName) {
-      return localesObj as LocaleDictionary;
-    }
+      const complexKey = key.split('.');
+
+      if (complexKey.length === 1) {
+        translation = locales[key as keyof typeof locales] as unknown as string;
+      } else {
+        translation = complexKey.reduce<LocaleDictionary | ValueOf<LocaleDictionary> | string>(
+          (acc, cur) => acc[cur as keyof typeof acc],
+          locales,
+        ) as string;
+      }
+
+      if (!translation?.length) {
+        console.warn(`Snack-uikit: the '${key}' key is not found in the current locale '${lang}'.`);
+
+        return key;
+      }
 
-    return (localesObj[componentName] || {}) as LocaleDictionary[C];
-  }, [componentName, lang, ctxLocales]);
+      return translation;
+    },
+    [lang, locales],
+  );
 
-  return [locales, lang];
+  return {
+    t: getLocaleText,
+    lang,
+  };
 }

package/src/locales/ru_RU.ts

@@ -1,4 +1,6 @@
-export const ru_RU = {
+import { en_GB } from './en_GB';
+
+export const ru_RU: typeof en_GB = {
   Table: {
     searchPlaceholder: 'Поиск',
     noData: {

package/src/typeUtils.ts

@@ -46,3 +46,19 @@ type PartialReadonlySetDeep<T> = unknown & ReadonlySet<PartialDeep<T>>;
 type PartialObjectDeep<ObjectType extends object> = {
   [KeyType in keyof ObjectType]?: PartialDeep<ObjectType[KeyType]>;
 };
+
+export type PathsToStringProps<T> = T extends string
+  ? []
+  : {
+      [K in Extract<keyof T, string>]: [K, ...PathsToStringProps<T[K]>];
+    }[Extract<keyof T, string>];
+
+export type Join<T extends string[], D extends string> = T extends []
+  ? never
+  : T extends [infer F]
+    ? F
+    : T extends [infer F, ...infer R]
+      ? F extends string
+        ? `${F}${D}${Join<Extract<R, string[]>, D>}`
+        : never
+      : string;

package/src/types.ts

@@ -1,5 +1,5 @@
 import { LOCALES } from './locales';
-import { PartialDeep } from './typeUtils';
+import { Join, PartialDeep, PathsToStringProps } from './typeUtils';
 
 export type KnownLocaleLang = keyof typeof LOCALES;
 
@@ -7,4 +7,10 @@ export type LocaleLang = KnownLocaleLang | string;
 
 export type LocaleDictionary = typeof LOCALES.en_GB;
 
-export type OverrideLocales = PartialDeep<Record<KnownLocaleLang, LocaleDictionary>> & Record<string, LocaleDictionary>;
+// TODO: temporary changed type to fix typings mismatch for "locale" prop in LocaleProvider
+// export type OverrideLocales = PartialDeep<Record<KnownLocaleLang, LocaleDictionary>> | Record<string, LocaleDictionary>;
+export type OverrideLocales = PartialDeep<Record<LocaleLang, LocaleDictionary>>;
+
+export type DottedTranslationKey<C extends keyof LocaleDictionary | undefined = undefined> = C extends string
+  ? Join<PathsToStringProps<LocaleDictionary[C]>, '.'>
+  : Join<PathsToStringProps<LocaleDictionary>, '.'>;