@strato-admin/core 0.1.1 → 0.3.0

package/dist/ra-core/src/i18n/TranslationUtils.js

@@ -0,0 +1,70 @@
+import merge from 'lodash/merge.js';
+import { DEFAULT_LOCALE } from './index';
+/**
+ * Resolve the browser locale according to the value of the global window.navigator
+ *
+ * Use it to determine the <Admin> locale at runtime.
+ *
+ * @example
+ *    import * as React from "react";
+ *    import { Admin, Resource, resolveBrowserLocale } from 'react-admin';
+ *    import polyglotI18nProvider from 'ra-i18n-polyglot';
+ *    import englishMessages from 'ra-language-english';
+ *    import frenchMessages from 'ra-language-french';
+ *
+ *    const messages = {
+ *        fr: frenchMessages,
+ *        en: englishMessages,
+ *    };
+ *    const i18nProvider = polyglotI18nProvider(
+ *        locale => messages[locale] ? messages[locale] : messages.en,
+ *        resolveBrowserLocale()
+ *    );
+ *
+ *    const App = () => (
+ *        <Admin i18nProvider={i18nProvider}>
+ *            ...
+ *        </Admin>
+ *    );
+ *
+ * @param {string} defaultLocale Defaults to 'en'
+ * @param options
+ * @param {boolean} options.fullLocale Defaults to false
+ */
+export const resolveBrowserLocale = (defaultLocale, options) => {
+    // from http://blog.ksol.fr/user-locale-detection-browser-javascript/
+    // Rely on the window.navigator object to determine user locale
+    const { language, browserLanguage, userLanguage } = window.navigator;
+    const locale = language ||
+        browserLanguage ||
+        userLanguage ||
+        defaultLocale ||
+        DEFAULT_LOCALE;
+    return options?.fullLocale ? locale : locale.split('-')[0];
+};
+/**
+ * Compose translations from multiple packages for a single language (eg: 'english').
+ *
+ * Use it to merge translations from addons with the main react-admin translations.
+ *
+ * @example
+ *     import * as React from "react";
+ *     import { Admin, Resource, mergeTranslations } from 'react-admin';
+ *     import polyglotI18nProvider from 'ra-i18n-polyglot';
+ *     import englishMessages from 'ra-language-english';
+ *     import englishTreeMessages from 'ra-tree-language-english';
+ *
+ *     const messages = {
+ *        en: mergeTranslations(englishMessages, englishTreeMessages),
+ *     };
+ *     const i18nProvider = polyglotI18nProvider(
+ *        locale => messages[locale] ? messages[locale] : messages.en
+ *    );
+ *
+ *    const App = () => (
+ *        <Admin i18nProvider={i18nProvider}>
+ *            ...
+ *        </Admin>
+ *    );
+ */
+export const mergeTranslations = (...translationsModules) => merge({}, ...translationsModules);

package/dist/ra-core/src/i18n/index.d.ts

@@ -0,0 +1,20 @@
+export declare const DEFAULT_LOCALE = "en";
+export * from './substituteTokens';
+export * from './TestTranslationProvider';
+export * from './I18nContext';
+export * from './I18nContextProvider';
+export * from './Translate';
+export * from './TranslationMessages';
+export * from './TranslatableContext';
+export * from './TranslatableContextProvider';
+export * from './TranslationUtils';
+export * from './useLocaleState';
+export * from './useLocale';
+export * from './useLocales';
+export * from './useResourceTranslation';
+export * from './useSetLocale';
+export * from './useTranslatable';
+export * from './useTranslatableContext';
+export * from './useTranslate';
+export * from './useTranslateLabel';
+export * from './useI18nProvider';

package/dist/ra-core/src/i18n/index.js

@@ -0,0 +1,20 @@
+export const DEFAULT_LOCALE = 'en';
+export * from './substituteTokens';
+export * from './TestTranslationProvider';
+export * from './I18nContext';
+export * from './I18nContextProvider';
+export * from './Translate';
+export * from './TranslationMessages';
+export * from './TranslatableContext';
+export * from './TranslatableContextProvider';
+export * from './TranslationUtils';
+export * from './useLocaleState';
+export * from './useLocale';
+export * from './useLocales';
+export * from './useResourceTranslation';
+export * from './useSetLocale';
+export * from './useTranslatable';
+export * from './useTranslatableContext';
+export * from './useTranslate';
+export * from './useTranslateLabel';
+export * from './useI18nProvider';

package/dist/ra-core/src/i18n/substituteTokens.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Replace tokens by their value in the given string
+ *
+ * @param {string} template The template with interpolation tokens, e.g. 'Hello, %{name}'
+ * @param {object} data The data to interpolate, e.g. { name: 'John' }
+ * @returns {string} The interpolated string, e.g. 'Hello, John'
+ */
+export declare const substituteTokens: (template: any, data: any) => any;

package/dist/ra-core/src/i18n/substituteTokens.js

@@ -0,0 +1,18 @@
+/**
+ * Replace tokens by their value in the given string
+ *
+ * @param {string} template The template with interpolation tokens, e.g. 'Hello, %{name}'
+ * @param {object} data The data to interpolate, e.g. { name: 'John' }
+ * @returns {string} The interpolated string, e.g. 'Hello, John'
+ */
+export const substituteTokens = (template, data) => template && data
+    ? String.prototype.replace.call(template, defaultTokenRegex, function (expression, argument) {
+        if (!data.hasOwnProperty(argument) ||
+            data[argument] == null) {
+            return expression;
+        }
+        return data[argument];
+    })
+    : template;
+// tokens are like 'Hello, %{name}'
+const defaultTokenRegex = /%\{(.*?)\}/g;

package/dist/ra-core/src/i18n/useI18nProvider.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Get the i18nProvider instance declared in the <Admin> component
+ *
+ * @example
+ *
+ * const CurrentLanguage = () => {
+ *    const i18nProvider = useI18nProvider();
+ *    const locale = i18nProvider.getLocale();
+ *    return <span>{locale}</span>;
+ * };
+ */
+export declare const useI18nProvider: () => import("@strato-admin/core").I18nProvider;

package/dist/ra-core/src/i18n/useI18nProvider.js

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { I18nContext } from './I18nContext';
+/**
+ * Get the i18nProvider instance declared in the <Admin> component
+ *
+ * @example
+ *
+ * const CurrentLanguage = () => {
+ *    const i18nProvider = useI18nProvider();
+ *    const locale = i18nProvider.getLocale();
+ *    return <span>{locale}</span>;
+ * };
+ */
+export const useI18nProvider = () => useContext(I18nContext);

package/dist/ra-core/src/i18n/useLocale.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Get the current locale
+ *
+ * @example
+ *
+ * import { useLocale } from 'react-admin';
+ *
+ * const availableLanguages = {
+ *     en: 'English',
+ *     fr: 'Français',
+ * }
+ * const CurrentLanguage = () => {
+ *     const locale = useLocale();
+ *     return <span>{availableLanguages[locale]}</span>;
+ * }
+ */
+export declare const useLocale: () => string;

package/dist/ra-core/src/i18n/useLocale.js

@@ -0,0 +1,21 @@
+import { useLocaleState } from './useLocaleState';
+/**
+ * Get the current locale
+ *
+ * @example
+ *
+ * import { useLocale } from 'react-admin';
+ *
+ * const availableLanguages = {
+ *     en: 'English',
+ *     fr: 'Français',
+ * }
+ * const CurrentLanguage = () => {
+ *     const locale = useLocale();
+ *     return <span>{availableLanguages[locale]}</span>;
+ * }
+ */
+export const useLocale = () => {
+    const [locale] = useLocaleState();
+    return locale;
+};

package/dist/ra-core/src/i18n/useLocaleState.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Get the current locale and the ability to change it
+ *
+ * @example
+ *
+ * import { useLocaleState } from 'react-admin';
+ *
+ * const availableLanguages = {
+ *     en: 'English',
+ *     fr: 'Français',
+ * }
+ * const LocaleSwitcher = () => {
+ *     const [locale, setLocale] = useLocaleState();
+ *     return (
+ *         <div>
+ *             <div>Language</div>
+ *             <Button disabled={locale === 'fr'} onClick={() => setLocale('fr')}>
+ *                 English
+ *             </Button>
+ *             <Button disabled={locale === 'en'} onClick={() => setLocale('en')}>
+ *                 French
+ *             </Button>
+ *         </div>
+ *     );
+ * };
+ */
+export declare const useLocaleState: () => [string, (value: string | ((value: string) => void), defaultValue?: string | undefined) => void];

package/dist/ra-core/src/i18n/useLocaleState.js

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { useI18nProvider } from './useI18nProvider';
+import { useStore } from '../store/useStore';
+/**
+ * Get the current locale and the ability to change it
+ *
+ * @example
+ *
+ * import { useLocaleState } from 'react-admin';
+ *
+ * const availableLanguages = {
+ *     en: 'English',
+ *     fr: 'Français',
+ * }
+ * const LocaleSwitcher = () => {
+ *     const [locale, setLocale] = useLocaleState();
+ *     return (
+ *         <div>
+ *             <div>Language</div>
+ *             <Button disabled={locale === 'fr'} onClick={() => setLocale('fr')}>
+ *                 English
+ *             </Button>
+ *             <Button disabled={locale === 'en'} onClick={() => setLocale('en')}>
+ *                 French
+ *             </Button>
+ *         </div>
+ *     );
+ * };
+ */
+export const useLocaleState = () => {
+    const i18nProvider = useI18nProvider();
+    const defaultLocale = useMemo(() => i18nProvider.getLocale(), [i18nProvider]);
+    return useStore('locale', defaultLocale);
+};

package/dist/ra-core/src/i18n/useLocales.d.ts

@@ -0,0 +1,31 @@
+/**
+ * A hook that gets the available locales from the i18nProvider.
+ * @example
+ *
+ * import { useLocales } from 'react-admin';
+ *
+ * const LocaleSelector = () => {
+ *     const locales = useLocales();
+ *     const [currentLocale, setCurrentLocale] = useLocaleState();
+ *
+ *     return (
+ *         <select onChange={event => setCurrentLocale(event.target.value)}>
+ *             {locales.map(locale => (
+ *                 <option key={locale.locale} value={locale.locale}>
+ *                     {locale.name}
+ *                 </option>
+ *             )}
+ *         </select>
+ *     );
+ * }
+ */
+export declare const useLocales: (options?: UseLocalesOptions) => {
+    locale: string;
+    name: string;
+}[];
+export interface UseLocalesOptions {
+    locales?: {
+        locale: string;
+        name: string;
+    }[];
+}

package/dist/ra-core/src/i18n/useLocales.js

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { useI18nProvider } from './useI18nProvider';
+/**
+ * A hook that gets the available locales from the i18nProvider.
+ * @example
+ *
+ * import { useLocales } from 'react-admin';
+ *
+ * const LocaleSelector = () => {
+ *     const locales = useLocales();
+ *     const [currentLocale, setCurrentLocale] = useLocaleState();
+ *
+ *     return (
+ *         <select onChange={event => setCurrentLocale(event.target.value)}>
+ *             {locales.map(locale => (
+ *                 <option key={locale.locale} value={locale.locale}>
+ *                     {locale.name}
+ *                 </option>
+ *             )}
+ *         </select>
+ *     );
+ * }
+ */
+export const useLocales = (options) => {
+    const i18nProvider = useI18nProvider();
+    const locales = useMemo(() => (i18nProvider?.getLocales ? i18nProvider?.getLocales() : []), [i18nProvider]);
+    return options?.locales ?? locales;
+};

package/dist/ra-core/src/i18n/useResourceTranslation.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export declare const useResourceTranslation: (params: UseResourceTranslationOptions) => string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null;
+export interface UseResourceTranslationOptions {
+    resourceI18nKey?: string;
+    baseI18nKey: string;
+    userText?: ReactNode;
+    options?: Record<string, any>;
+}

package/dist/ra-core/src/i18n/useResourceTranslation.js

@@ -0,0 +1,18 @@
+import { useTranslate } from './useTranslate';
+export const useResourceTranslation = (params) => {
+    const { resourceI18nKey, baseI18nKey, userText, options } = params;
+    const translate = useTranslate();
+    if (userText !== undefined) {
+        if (typeof userText !== 'string') {
+            return userText;
+        }
+        return translate(userText, { _: userText, ...options });
+    }
+    if (!resourceI18nKey) {
+        return translate(baseI18nKey, options);
+    }
+    return translate(resourceI18nKey, {
+        ...options,
+        _: translate(baseI18nKey, options),
+    });
+};

package/dist/ra-core/src/i18n/useSetLocale.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Set the current locale in the I18nContext and re-render the app when the locale changes.
+ *
+ * @example
+ *
+ * import { useSetLocale } from 'react-admin';
+ *
+ * const availableLanguages = {
+ *     en: 'English',
+ *     fr: 'Français',
+ * }
+ * const LanguageSwitcher = () => {
+ *     const setLocale = useSetLocale();
+ *     return (
+ *         <ul>{
+ *             Object.keys(availableLanguages).map(locale => {
+ *                  <li key={locale} onClick={() => setLocale(locale)}>
+ *                      {availableLanguages[locale]}
+ *                  </li>
+ *              })
+ *         }</ul>
+ *     );
+ * }
+ */
+export declare const useSetLocale: () => (value: string | ((value: string) => void), defaultValue?: string | undefined) => void;

package/dist/ra-core/src/i18n/useSetLocale.js

@@ -0,0 +1,29 @@
+import { useLocaleState } from './useLocaleState';
+/**
+ * Set the current locale in the I18nContext and re-render the app when the locale changes.
+ *
+ * @example
+ *
+ * import { useSetLocale } from 'react-admin';
+ *
+ * const availableLanguages = {
+ *     en: 'English',
+ *     fr: 'Français',
+ * }
+ * const LanguageSwitcher = () => {
+ *     const setLocale = useSetLocale();
+ *     return (
+ *         <ul>{
+ *             Object.keys(availableLanguages).map(locale => {
+ *                  <li key={locale} onClick={() => setLocale(locale)}>
+ *                      {availableLanguages[locale]}
+ *                  </li>
+ *              })
+ *         }</ul>
+ *     );
+ * }
+ */
+export const useSetLocale = () => {
+    const [, setLocale] = useLocaleState();
+    return setLocale;
+};

package/dist/ra-core/src/i18n/useTranslatable.d.ts

@@ -0,0 +1,29 @@
+import { TranslatableContextValue } from './TranslatableContext';
+/**
+ * Hook supplying the logic to translate a field value in multiple languages.
+ *
+ * @param options The hook options
+ * @param {string} options.defaultLocale The locale of the default selected locale. Defaults to 'en'.
+ * @param {string[]} options.locales An array of the supported locales. Each is an object with a locale and a name property. For example { locale: 'en', name: 'English' }.
+ *
+ * @returns
+ * An object with following properties and methods:
+ * - selectedLocale: The locale of the currently selected locale
+ * - locales: An array of the supported locales
+ * - getLabel: A function which returns the translated label for the given field
+ * - getSource: A function which returns the source for the given field
+ * - selectLocale: A function which set the selected locale
+ */
+export declare const useTranslatable: (options: UseTranslatableOptions) => TranslatableContextValue;
+export type UseTranslatableOptions = {
+    defaultLocale?: string;
+    locales: string[];
+};
+/**
+ * Returns a record where translatable fields have their values set to the value of the given locale.
+ * This is necessary because the fields rely on the RecordContext to get their values and have no knowledge of the locale.
+ *
+ * Given the record { title: { en: 'title_en', fr: 'title_fr' } } and the locale 'fr',
+ * the record for the locale 'fr' will be { title: 'title_fr' }
+ */
+export declare const getRecordForLocale: (record: {} | undefined, locale: string) => any;

package/dist/ra-core/src/i18n/useTranslatable.js

@@ -0,0 +1,98 @@
+import { useState, useMemo } from 'react';
+import set from 'lodash/set.js';
+import get from 'lodash/get.js';
+import cloneDeep from 'lodash/cloneDeep.js';
+import { useLocaleState } from './useLocaleState';
+/**
+ * Hook supplying the logic to translate a field value in multiple languages.
+ *
+ * @param options The hook options
+ * @param {string} options.defaultLocale The locale of the default selected locale. Defaults to 'en'.
+ * @param {string[]} options.locales An array of the supported locales. Each is an object with a locale and a name property. For example { locale: 'en', name: 'English' }.
+ *
+ * @returns
+ * An object with following properties and methods:
+ * - selectedLocale: The locale of the currently selected locale
+ * - locales: An array of the supported locales
+ * - getLabel: A function which returns the translated label for the given field
+ * - getSource: A function which returns the source for the given field
+ * - selectLocale: A function which set the selected locale
+ */
+export const useTranslatable = (options) => {
+    const [localeFromUI] = useLocaleState();
+    const { defaultLocale = localeFromUI, locales } = options;
+    const [selectedLocale, setSelectedLocale] = useState(defaultLocale);
+    const context = useMemo(() => ({
+        locales,
+        selectedLocale: selectedLocale || 'en',
+        selectLocale: setSelectedLocale,
+        getRecordForLocale,
+    }), [locales, selectedLocale]);
+    return context;
+};
+/**
+ * Returns a record where translatable fields have their values set to the value of the given locale.
+ * This is necessary because the fields rely on the RecordContext to get their values and have no knowledge of the locale.
+ *
+ * Given the record { title: { en: 'title_en', fr: 'title_fr' } } and the locale 'fr',
+ * the record for the locale 'fr' will be { title: 'title_fr' }
+ */
+export const getRecordForLocale = (record, locale) => {
+    if (!record) {
+        return record;
+    }
+    // Get all paths of the record
+    const paths = getRecordPaths(record);
+    // For each path, if a path ends with the locale, set the value of the path without the locale
+    // to the value of the path with the locale
+    const recordForLocale = paths.reduce((acc, path) => {
+        if (path.includes(locale)) {
+            const pathWithoutLocale = path.slice(0, -1);
+            const value = get(record, path);
+            return set(acc, pathWithoutLocale, value);
+        }
+        return acc;
+    }, cloneDeep(record));
+    return recordForLocale;
+};
+// Return all the possible paths of the record as an array of arrays
+// For example, given the record
+//     {
+//         title: { en: 'title_en', fr: 'title_fr' },
+//         items: [
+//             { description: { en: 'item1_en', fr: 'item1_fr' } },
+//             { description: { en: 'item2_en', fr: 'item2_fr' } }
+//         ]
+//     },
+// the paths will be
+//     [
+//         ['title'],
+//         ['title', 'en'],
+//         ['title', 'fr'],
+//         ['items'],
+//         ['items', '0'],
+//         ['items', '0', 'description'],
+//         ['items', '0', 'description', 'en'],
+//         ['items', '0', 'description', 'fr'],
+//         ['items', '1'],
+//         ['items', '1', 'description'],
+//         ['items', '1', 'description', 'en'],
+//         ['items', '1', 'description', 'fr']]
+const getRecordPaths = (record = {}, path = []) => {
+    return Object.entries(record).reduce((acc, [key, value]) => {
+        if (value !== null && typeof value === 'object') {
+            return [
+                ...acc,
+                [...path, key],
+                ...getRecordPaths(value, [...path, key]),
+            ];
+        }
+        if (Array.isArray(value)) {
+            return value.reduce((acc, item, index) => [
+                ...acc,
+                ...getRecordPaths(item, [...path, key, `${index}`]),
+            ], acc);
+        }
+        return [...acc, [...path, key]];
+    }, []);
+};

package/dist/ra-core/src/i18n/useTranslatableContext.d.ts

@@ -0,0 +1,31 @@
+import { TranslatableContextValue } from './TranslatableContext';
+/**
+ * Gives access to the current TranslatableContext.
+ *
+ * @example
+ * <TranslatableFields
+ *     selector={<MyLanguageSelector />}
+ *     locales={['en', 'fr']}
+ * >
+ *     <TextField source={getSource('title')} />
+ * <TranslatableFields>
+ *
+ * const MyLanguageSelector = () => {
+ *     const {
+ *         locales,
+ *         selectedLocale,
+ *         selectLocale,
+ *     } = useTranslatableContext();
+ *
+ *     return (
+ *         <select onChange={selectLocale}>
+ *             {locales.map((locale) => (
+ *                 <option selected={locale.locale === selectedLocale}>
+ *                     {locale.name}
+ *                 </option>
+ *             ))}
+ *        </select>
+ *     );
+ * }
+ */
+export declare const useTranslatableContext: () => TranslatableContextValue;

package/dist/ra-core/src/i18n/useTranslatableContext.js

@@ -0,0 +1,38 @@
+import { useContext } from 'react';
+import { TranslatableContext, } from './TranslatableContext';
+/**
+ * Gives access to the current TranslatableContext.
+ *
+ * @example
+ * <TranslatableFields
+ *     selector={<MyLanguageSelector />}
+ *     locales={['en', 'fr']}
+ * >
+ *     <TextField source={getSource('title')} />
+ * <TranslatableFields>
+ *
+ * const MyLanguageSelector = () => {
+ *     const {
+ *         locales,
+ *         selectedLocale,
+ *         selectLocale,
+ *     } = useTranslatableContext();
+ *
+ *     return (
+ *         <select onChange={selectLocale}>
+ *             {locales.map((locale) => (
+ *                 <option selected={locale.locale === selectedLocale}>
+ *                     {locale.name}
+ *                 </option>
+ *             ))}
+ *        </select>
+ *     );
+ * }
+ */
+export const useTranslatableContext = () => {
+    const context = useContext(TranslatableContext);
+    if (!context) {
+        throw new Error('useTranslatableContext must be used inside a TranslatableContextProvider');
+    }
+    return context;
+};

package/dist/ra-core/src/i18n/useTranslate.d.ts

@@ -0,0 +1,21 @@
+import { TranslateFunction } from '../types';
+/**
+ * Translate a string using the current locale and the translations from the i18nProvider
+ *
+ * @see Polyglot.t()
+ * @link https://airbnb.io/polyglot.js/#polyglotprototypetkey-interpolationoptions
+ *
+ * @return {Function} A translation function, accepting two arguments
+ *   - a string used as key in the translations
+ *   - an interpolationOptions object
+ *
+ * @example
+ *
+ * import { useTranslate } from 'react-admin';
+ *
+ * const SettingsMenu = () => {
+ *     const translate = useTranslate();
+ *     return <MenuItem>{translate('settings')}</MenuItem>;
+ * }
+ */
+export declare const useTranslate: () => TranslateFunction;