react-intlayer 1.2.0 → 2.0.0

package/src/client/IntlayerClientProvider.tsx

@@ -1,26 +1,29 @@
 'use client';
 
-import {
-  intlayerIntlConfiguration,
-  type Locales,
-} from '@intlayer/config/client';
+import { getConfiguration, type Locales } from '@intlayer/config/client';
 import {
   type PropsWithChildren,
   createContext,
   useContext,
+  useMemo,
   type FC,
+  useState,
+  useCallback,
 } from 'react';
-import { localeCookie } from './useLocaleCookie';
+import { ContentEditionLayout } from './ContentEditionLayout';
+import { localeCookie, setLocaleCookie } from './useLocaleCookie';
 
 type IntlayerValue = {
   locale: Locales;
+  setLocale: (newLocale: Locales) => void;
 };
 
 /**
  * Context that store the current locale on the client side
  */
 export const IntlayerClientContext = createContext<IntlayerValue>({
-  locale: localeCookie ?? intlayerIntlConfiguration.defaultLocale,
+  locale: localeCookie ?? getConfiguration().internationalization.defaultLocale,
+  setLocale: () => null,
 });
 
 /**
@@ -29,7 +32,7 @@ export const IntlayerClientContext = createContext<IntlayerValue>({
 export const useIntlayerContext = () => useContext(IntlayerClientContext);
 
 export type IntlayerClientProviderProps = PropsWithChildren & {
-  locale: Locales;
+  locale?: Locales;
 };
 
 /**
@@ -38,8 +41,43 @@ export type IntlayerClientProviderProps = PropsWithChildren & {
 export const IntlayerClientProvider: FC<IntlayerClientProviderProps> = ({
   locale,
   children,
-}) => (
-  <IntlayerClientContext.Provider value={{ locale }}>
-    {children}
-  </IntlayerClientContext.Provider>
-);
+}) => {
+  const { defaultLocale, locales: availableLocales } =
+    getConfiguration().internationalization;
+
+  const [currentLocale, setCurrentLocale] = useState(
+    locale ?? localeCookie ?? defaultLocale
+  );
+
+  const setLocale = useCallback(
+    (newLocale: Locales) => {
+      if (currentLocale.toString() === newLocale.toString()) return;
+
+      if (!availableLocales.includes(newLocale)) {
+        console.error(`Locale ${locale} is not available`);
+        return;
+      }
+
+      setCurrentLocale(newLocale); // Update state
+      setLocaleCookie(newLocale); // Optionally set cookie for persistence
+    },
+    [availableLocales, currentLocale, locale]
+  );
+
+  const value: IntlayerValue = useMemo<IntlayerValue>(
+    () => ({ locale: currentLocale, setLocale }),
+    [currentLocale, setLocale]
+  );
+
+  return (
+    <IntlayerClientContext.Provider value={value}>
+      <ContentEditionLayout
+        locale={currentLocale}
+        setLocale={setLocale}
+        localeList={availableLocales}
+      >
+        {children}
+      </ContentEditionLayout>
+    </IntlayerClientContext.Provider>
+  );
+};

package/src/client/getBrowserLocale.tsx

@@ -0,0 +1,192 @@
+import { getConfiguration, type Locales } from '@intlayer/config/client';
+import { localeList } from '@intlayer/core';
+
+export enum LanguageDetector {
+  Querystring = 'querystring',
+  Cookie = 'cookie',
+  LocalStorage = 'localStorage',
+  SessionStorage = 'sessionStorage',
+  Navigator = 'navigator',
+  HtmlTag = 'htmlTag',
+}
+
+// Default settings for the language detector
+type LanguageDetectorOptions = {
+  order?: LanguageDetector[];
+  lookupQuerystring?: string;
+  lookupCookie?: string;
+  lookupLocalStorage?: string;
+  lookupSessionStorage?: string;
+  excludeCacheFor?: string[];
+  htmlTag?: HTMLElement | null;
+};
+
+const getDefaultsOptions = (): LanguageDetectorOptions => {
+  const { middleware } = getConfiguration();
+
+  return {
+    order: [
+      LanguageDetector.Querystring,
+      LanguageDetector.Cookie,
+      LanguageDetector.Navigator,
+      LanguageDetector.HtmlTag,
+    ],
+    lookupQuerystring: 'locale',
+    lookupCookie: middleware.cookieName,
+    htmlTag: document.documentElement,
+  };
+};
+
+// Helper functions for various checks and operations
+const isLocalStorageAvailable = (): boolean => {
+  try {
+    if (typeof window === 'undefined') return false;
+    const testKey = 'intlayer.translate.boo';
+    window.localStorage.setItem(testKey, 'foo');
+    window.localStorage.removeItem(testKey);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const isSessionStorageAvailable = (): boolean => {
+  try {
+    if (typeof window === 'undefined') return false;
+    const testKey = 'intlayer.translate.boo';
+    window.sessionStorage.setItem(testKey, 'foo');
+    window.sessionStorage.removeItem(testKey);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+// Function to detect language using different detectors
+const detectLanguage = (
+  order: string[],
+  options: LanguageDetectorOptions
+): Record<LanguageDetector, Locales | Locales[]> => {
+  const detected: Record<LanguageDetector, Locales | Locales[]> = {} as Record<
+    LanguageDetector,
+    Locales | Locales[]
+  >;
+
+  const queryStringDetector = () => {
+    if (typeof window === 'undefined') return;
+    const search = window.location.search || '';
+    const params = new URLSearchParams(search);
+    const value = params.get(options.lookupQuerystring ?? '');
+    if (value) {
+      detected[LanguageDetector.Querystring] = value as Locales;
+    }
+  };
+
+  const cookieDetector = () => {
+    if (typeof document === 'undefined') return;
+    const cookies = document.cookie.split(';');
+    const cookieName = `${options.lookupCookie ?? ''}=`;
+    const cookie = cookies.find((c) => c.trim().startsWith(cookieName));
+    if (cookie) {
+      const value = cookie.split('=')[1].trim();
+
+      detected[LanguageDetector.Cookie] = value as Locales;
+    }
+  };
+
+  const localStorageDetector = () => {
+    if (!isLocalStorageAvailable()) return;
+    const value = window.localStorage.getItem(options.lookupLocalStorage ?? '');
+    if (value) {
+      detected[LanguageDetector.LocalStorage] = value as Locales;
+    }
+  };
+
+  const sessionStorageDetector = () => {
+    if (!isSessionStorageAvailable()) return;
+    const value = window.sessionStorage.getItem(
+      options.lookupSessionStorage ?? ''
+    );
+    if (value) {
+      detected[LanguageDetector.SessionStorage] = value as Locales;
+    }
+  };
+
+  const navigatorDetector = () => {
+    if (typeof navigator === 'undefined') return;
+
+    if (navigator.language) {
+      detected[LanguageDetector.Navigator] = navigator.language as Locales;
+    }
+  };
+
+  const htmlTagDetector = () => {
+    const htmlTag = options.htmlTag;
+    if (htmlTag && typeof htmlTag.getAttribute === 'function') {
+      const lang = htmlTag.getAttribute('lang');
+      if (lang) {
+        detected[LanguageDetector.HtmlTag] = lang as Locales;
+      }
+    }
+  };
+
+  // Map detector names to their corresponding functions
+  const detectors: Record<string, () => void> = {
+    [LanguageDetector.Querystring]: queryStringDetector,
+    [LanguageDetector.Cookie]: cookieDetector,
+    [LanguageDetector.LocalStorage]: localStorageDetector,
+    [LanguageDetector.SessionStorage]: sessionStorageDetector,
+    [LanguageDetector.Navigator]: navigatorDetector,
+    [LanguageDetector.HtmlTag]: htmlTagDetector,
+  };
+
+  // Use the provided order to run each detector
+  order.forEach((detectorName) => {
+    detectors[detectorName]?.();
+  });
+
+  return detected;
+};
+
+const getFirstAvailableLocale = (
+  locales: Record<LanguageDetector, Locales | Locales[]>,
+  order: LanguageDetector[]
+): Locales => {
+  const { internationalization } = getConfiguration();
+
+  for (const detector of order) {
+    const localesArray = [locales[detector]].flat() as Locales[];
+
+    for (const locale of localesArray) {
+      if (
+        locale &&
+        (internationalization.locales ?? localeList).includes(locale)
+      ) {
+        return locale;
+      } else if (
+        locale?.includes('-') &&
+        (internationalization.locales ?? localeList).includes(
+          locale.split('-')[0] as Locales
+        )
+      ) {
+        return locale.split('-')[0] as Locales;
+      }
+    }
+  }
+
+  return internationalization.defaultLocale;
+};
+
+/**
+ * Core language detector function
+ * const detectedLanguages = detectLanguage(['LanguageDetector.Cookie', 'LanguageDetector.LocalStorage'], { lookupCookie: 'myCookie' });
+ */
+export const getBrowserLocale = (
+  userOptions: LanguageDetectorOptions | undefined = {}
+): Locales => {
+  const options = { ...getDefaultsOptions(), ...userOptions };
+
+  const locales = detectLanguage(options.order ?? [], options);
+
+  return getFirstAvailableLocale(locales, options.order ?? []);
+};

package/src/client/index.ts

@@ -5,6 +5,7 @@ export {
   IntlayerClientProvider,
 } from './IntlayerClientProvider';
 export { useIntlayer } from './useIntlayer';
+export { useLocaleBase } from './useLocaleBase';
 export { useLocale } from './useLocale';
 export { useTraduction } from './useTraduction';
 export {
@@ -12,3 +13,4 @@ export {
   localeCookie,
   setLocaleCookie,
 } from './useLocaleCookie';
+export { getBrowserLocale } from './getBrowserLocale';

package/src/client/useContent.ts

@@ -1,5 +1,5 @@
 import type { LanguageContent } from '@intlayer/core';
-import { useLocale } from './useLocale';
+import { useLocaleBase } from './useLocaleBase';
 import { useTraduction } from './useTraduction';
 
 /**
@@ -8,7 +8,7 @@ import { useTraduction } from './useTraduction';
 export const useContent = <Content>(
   languageContent: LanguageContent<Content>
 ) => {
-  const { locale } = useLocale();
+  const { locale } = useLocaleBase();
 
   const content = useTraduction(languageContent);
 

package/src/client/useLocale.ts

@@ -1,22 +1,23 @@
 'use client';
 
-import { intlayerIntlConfiguration } from '@intlayer/config/client';
+import { getConfiguration } from '@intlayer/config/client';
 import { localeList } from '@intlayer/core';
 import { useContext } from 'react';
 import { IntlayerClientContext } from './IntlayerClientProvider';
 
-const { defaultLocale, locales: availableLocales } = intlayerIntlConfiguration;
-
 /**
  * On the client side, hook to get the current locale and all related fields
  */
 export const useLocale = () => {
-  const { locale } = useContext(IntlayerClientContext);
+  const { defaultLocale, locales: availableLocales } =
+    getConfiguration().internationalization;
+  const { locale, setLocale } = useContext(IntlayerClientContext);
 
   return {
     locale, // Current locale
     defaultLocale, // Principal locale defined in config
     availableLocales, // List of the available locales defined in config
     localeList, // List of all available locales
+    setLocale, // Function to set the locale
   };
 };

package/src/client/useLocaleBase.ts

@@ -0,0 +1,24 @@
+'use client';
+
+import { getConfiguration } from '@intlayer/config/client';
+import { localeList } from '@intlayer/core';
+import { useContext } from 'react';
+import { IntlayerClientContext } from './IntlayerClientProvider';
+
+const { defaultLocale, locales: availableLocales } =
+  getConfiguration().internationalization;
+
+/**
+ * On the client side, hook to get the current locale and all related fields
+ */
+export const useLocaleBase = () => {
+  const { locale, setLocale } = useContext(IntlayerClientContext);
+
+  return {
+    locale, // Current locale
+    defaultLocale, // Principal locale defined in config
+    availableLocales, // List of the available locales defined in config
+    localeList, // List of all available locales
+    setLocale, // Function to set the locale
+  };
+};

package/src/client/useLocaleCookie.ts

@@ -1,10 +1,7 @@
-import {
-  type Locales,
-  intlayerMiddlewareConfiguration,
-} from '@intlayer/config/client';
+import { type Locales, getConfiguration } from '@intlayer/config/client';
 import Cookies from 'js-cookie';
 
-const { cookieName } = intlayerMiddlewareConfiguration;
+const { cookieName } = getConfiguration().middleware;
 
 const cookieAttributes: Cookies.CookieAttributes = {
   path: '/',

package/src/client/useTraduction.ts

@@ -12,12 +12,13 @@ import { IntlayerClientContext } from './IntlayerClientProvider';
  *
  * Usage:
  *
- * const content = getTranslation<string>({
- * en: 'Hello',
- * fr: 'Bonjour',
- * },
- * 'fr');
+ * ```tsx
+ * const content = useTraduction<string>({
+ *  en: 'Hello',
+ *  fr: 'Bonjour',
+ * }, 'fr');
  * // 'Bonjour'
+ * ```
  *
  * Using TypeScript:
  * - this function will require each locale to be defined if defined in the project configuration.

package/src/craco/craco.config.ts

@@ -0,0 +1,11 @@
+import type { CracoConfig } from '@craco/types';
+import * as intlayerPlugin from './intlayerCracoPlugin';
+
+// Usage Example
+module.exports = {
+  plugins: [
+    {
+      plugin: intlayerPlugin,
+    },
+  ],
+} satisfies CracoConfig;

package/src/craco/intlayerCracoPlugin.ts

@@ -0,0 +1,89 @@
+import { resolve, relative, join } from 'path';
+import type {
+  CracoConfig,
+  CracoConfigOverride,
+  CracoPlugin,
+  WebpackConfigOverride,
+} from '@craco/types';
+import { getConfiguration, formatEnvVariable } from '@intlayer/config';
+import { IntLayerPlugin as IntLayerWebpackPlugin } from '@intlayer/webpack';
+import webpack, { type Configuration as WebpackConfig } from 'webpack';
+
+// Get IntLayer configuration
+const intlayerConfig = getConfiguration();
+
+// Format environment variables
+const env: Record<string, string> = formatEnvVariable('react_app');
+
+// Custom CRACO plugin function to override webpack configuration
+export const overrideWebpackConfig = ({
+  webpackConfig,
+}: WebpackConfigOverride): WebpackConfig => {
+  webpackConfig.externals = {
+    ...(typeof webpackConfig.externals === 'object'
+      ? webpackConfig.externals
+      : {}),
+    esbuild: 'esbuild',
+    module: 'module',
+    fs: 'fs',
+    vm: 'vm',
+  };
+
+  (webpackConfig.module?.rules ?? []).push({
+    test: /\.node$/,
+    use: 'node-loader',
+  });
+
+  // You can add any custom CRACO plugins here if needed
+  // config.plugins.push(new CustomCracoPlugin());
+
+  return webpackConfig;
+};
+
+// Return a CRACO configuration object
+export const overrideCracoConfig = ({
+  cracoConfig,
+}: CracoConfigOverride): CracoConfig => {
+  const { mainDir, baseDir } = intlayerConfig.content;
+
+  const dictionariesPath = join(mainDir, 'dictionaries.mjs');
+  const relativeDictionariesPath = relative(baseDir, dictionariesPath);
+
+  return {
+    ...cracoConfig,
+    webpack: {
+      ...cracoConfig.webpack,
+      plugins: {
+        ...cracoConfig.webpack?.plugins,
+        add: [new webpack.EnvironmentPlugin(env), new IntLayerWebpackPlugin()],
+      },
+      alias: {
+        ...cracoConfig.webpack?.alias,
+        '@intlayer/dictionaries-entry': resolve('./', relativeDictionariesPath),
+      },
+    },
+  };
+};
+
+/**
+ * A CRACO plugin that adds the IntLayer configuration to the webpack configuration and sets the environment variables.
+ *
+ * Usage:
+ *
+ * ```ts
+ * const cracoConfig: CracoConfig = {
+ *  plugins: [
+ *   {
+ *    plugin: intlayerCracoPlugin(),
+ *   },
+ *  ],
+ * };
+ *
+ * export default cracoConfig;
+ * ```
+ *
+ */
+export const plugin: CracoPlugin = {
+  overrideCracoConfig,
+  overrideWebpackConfig,
+};

package/src/getEnumeration.ts

@@ -1,5 +1,4 @@
 import { type QuantityContent, getEnumerationContent } from '@intlayer/core';
-import { contentRender } from './ContentEditor/contentRender';
 
 /**
  * Allow to pick a content based on a quantity.
@@ -8,22 +7,25 @@ import { contentRender } from './ContentEditor/contentRender';
  *
  * Usage:
  *
+ * ```ts
  * const content = getEnumeration({
  *  '<=-2.3': 'You have less than -2.3',
  *  '<1': 'You have less than one',
  *  '2': 'You have two',
  *  '>=3': 'You have three or more',
- * },
- * 2);
+ * }, 2);
  * // 'You have two'
+ * ```
  *
  * The order of the keys will define the priority of the content.
  *
+ * ```ts
  * const content = getEnumeration({
- * '<4': 'You have less than four',
- * '2': 'You have two',
- * });
+ *  '<4': 'You have less than four',
+ *  '2': 'You have two',
+ * }, 2);
  * // 'You have less than four'
+ * ```
  *
  */
 export const getEnumeration = <Content>(
@@ -35,9 +37,5 @@ export const getEnumeration = <Content>(
     quantity
   );
 
-  if (typeof result === 'string') {
-    return contentRender(result) as Content;
-  }
-
   return result;
 };

package/src/getTranslation.ts

@@ -1,9 +1,5 @@
-import {
-  type Locales,
-  intlayerIntlConfiguration,
-} from '@intlayer/config/client';
+import { type Locales, getConfiguration } from '@intlayer/config/client';
 import { type LanguageContent, getTranslationContent } from '@intlayer/core';
-import { contentRender } from './ContentEditor/contentRender';
 
 /**
  *
@@ -14,12 +10,13 @@ import { contentRender } from './ContentEditor/contentRender';
  *
  * Usage:
  *
+ * ```ts
  * const content = getTranslation<string>({
  * en: 'Hello',
  * fr: 'Bonjour',
- * },
- * 'fr');
+ * }, 'fr');
  * // 'Bonjour'
+ * ```
  *
  * Using TypeScript:
  * - this function will require each locale to be defined if defined in the project configuration.
@@ -29,16 +26,12 @@ export const getTranslation = <Content = string>(
   languageContent: LanguageContent<Content>,
   locale?: Locales
 ): Content => {
-  const { defaultLocale } = intlayerIntlConfiguration;
+  const { defaultLocale } = getConfiguration().internationalization;
 
   const result: Content = getTranslationContent<Content>(
     languageContent,
     locale ?? defaultLocale
   );
 
-  if (typeof result === 'string') {
-    return contentRender(result) as Content;
-  }
-
   return result;
 };

package/src/index.ts

@@ -9,5 +9,6 @@ export {
   useLocaleCookie,
   localeCookie,
   setLocaleCookie,
+  getBrowserLocale,
+  useLocaleBase,
 } from './client/index';
-export {} from './client/useLocaleCookie';

package/src/processDictionary/{contentDictionary.d.ts → contentDictionary.ts}

@@ -1,4 +1,5 @@
-import { type TranslationContent } from '@intlayer/core';
+import type { TranslationContent } from '@intlayer/core';
+import type { ReactNode } from 'react';
 
 export type ContentValue =
   | string
@@ -11,16 +12,16 @@ export type Content = Record<string, ContentValue | undefined>;
 
 export type TransformedContentValue =
   | string
+  | ReactNode
   | {
       [key: string]: TransformedContentValue;
     }
   | undefined
   | ((quantity: number) => TransformedContentValue);
 
-export type TransformedContent = Record<
-  string,
-  TransformedContentValue | undefined
->;
+export type TransformedContent =
+  | Record<string, TransformedContentValue | undefined>
+  | ReactNode;
 
 export type ContentDictionary = Content & {
   id: string;