react-intlayer 1.0.0

package/dist/esm/server/serverContext.d.mts

@@ -0,0 +1,43 @@
+/**
+ * Creates a new datastore for a given server context.
+ * Attempts to closely mimic the `createContext` API.
+ *
+ * @example
+ * const LocaleServerContext = createServerContext<string | null>(null);
+ *
+ * <LocaleServerContext.Provider value={locale}>
+ *      {children}
+ * </LocaleServerContext.Provider>
+ */
+declare const createServerContext: <T>(defaultValue?: T) => ServerContext<T>;
+/**
+ * Fetches a value present in a given server context.
+ * Attempts to closely mimic the `useContext` API.
+ *
+ * @example
+ * getServerContext(LocaleServerContext);
+ */
+declare const getServerContext: <T>({
+  _storage,
+  _defaultValue,
+}: ServerContext<T>) => T | undefined;
+type ServerContext<T> = {
+  Provider: ({
+    children,
+    value,
+  }: {
+    children: React.ReactNode;
+    value: T;
+  }) => React.ReactNode;
+  Consumer: ({
+    children,
+  }: {
+    children: (context: T | undefined) => React.ReactNode;
+  }) => React.ReactNode;
+  _storage: () => {
+    value: T | undefined;
+  };
+  _defaultValue: T | undefined;
+};
+
+export { createServerContext, getServerContext };

package/dist/esm/server/serverContext.mjs

@@ -0,0 +1,33 @@
+import react from "react";
+const cacheFallback = () => () => ({ value: void 0 });
+const createServerContext = (defaultValue) => {
+  throwInClient();
+  const cache = react.cache ?? cacheFallback;
+  const getCache = cache(() => ({
+    value: void 0,
+  }));
+  return {
+    Provider: ({ children, value }) => {
+      getCache().value = value;
+      return children;
+    },
+    Consumer: ({ children }) => {
+      const store = getCache();
+      return children(store ? store.value : defaultValue);
+    },
+    _storage: getCache,
+    _defaultValue: defaultValue,
+  };
+};
+const getServerContext = ({ _storage, _defaultValue }) => {
+  const store = _storage();
+  if (!store) return _defaultValue;
+  return store.value;
+};
+const throwInClient = () => {
+  if (typeof window !== "undefined") {
+    throw new Error(`createServerContext only works in Server Components`);
+  }
+};
+export { createServerContext, getServerContext };
+//# sourceMappingURL=serverContext.mjs.map

package/dist/esm/server/serverContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/server/serverContext.ts"],"sourcesContent":["/**\n * Creates a new datastore for a given server context.\n * Attempts to closely mimic the `createContext` API.\n *\n * @example\n * const LocaleServerContext = createServerContext<string | null>(null);\n *\n * <LocaleServerContext.Provider value={locale}>\n *      {children}\n * </LocaleServerContext.Provider>\n */\n\nimport react from 'react';\n\ntype CacheType<T> = () => { value: T | undefined };\n\nconst cacheFallback = () => () => ({ value: undefined });\n\nexport const createServerContext = <T>(defaultValue?: T): ServerContext<T> => {\n  throwInClient();\n\n  const cache = react.cache<CacheType<T>> ?? cacheFallback;\n\n  const getCache = cache(() => ({\n    value: undefined,\n  }));\n\n  return {\n    Provider: ({ children, value }) => {\n      getCache().value = value;\n      return children;\n    },\n    Consumer: ({ children }) => {\n      const store = getCache();\n      return children(store ? store.value : defaultValue);\n    },\n    _storage: getCache,\n    _defaultValue: defaultValue,\n  };\n};\n\n/**\n * Fetches a value present in a given server context.\n * Attempts to closely mimic the `useContext` API.\n *\n * @example\n * getServerContext(LocaleServerContext);\n */\nexport const getServerContext = <T>({\n  _storage,\n  _defaultValue,\n}: ServerContext<T>) => {\n  // throwInClient();\n  const store = _storage();\n  if (!store) return _defaultValue;\n  return store.value;\n};\n\ntype ServerContext<T> = {\n  Provider: ({\n    children,\n    value,\n  }: {\n    children: React.ReactNode;\n    value: T;\n  }) => React.ReactNode;\n  Consumer: ({\n    children,\n  }: {\n    children: (context: T | undefined) => React.ReactNode;\n  }) => React.ReactNode;\n  _storage: () => { value: T | undefined };\n  _defaultValue: T | undefined;\n};\n\n/**\n * Throws if called within a client component environment.\n * Useful to help prevent mistakes.\n */\nconst throwInClient = (): void | never => {\n  // If window.document is defined we're in a client component\n  if (typeof window !== 'undefined') {\n    throw new Error(`createServerContext only works in Server Components`);\n  }\n};\n"],"mappings":"AAYA,OAAO,WAAW;AAIlB,MAAM,gBAAgB,MAAM,OAAO,EAAE,OAAO,OAAU;AAE/C,MAAM,sBAAsB,CAAI,iBAAuC;AAC5E,gBAAc;AAEd,QAAM,QAAQ,MAAM,SAAuB;AAE3C,QAAM,WAAW,MAAM,OAAO;AAAA,IAC5B,OAAO;AAAA,EACT,EAAE;AAEF,SAAO;AAAA,IACL,UAAU,CAAC,EAAE,UAAU,MAAM,MAAM;AACjC,eAAS,EAAE,QAAQ;AACnB,aAAO;AAAA,IACT;AAAA,IACA,UAAU,CAAC,EAAE,SAAS,MAAM;AAC1B,YAAM,QAAQ,SAAS;AACvB,aAAO,SAAS,QAAQ,MAAM,QAAQ,YAAY;AAAA,IACpD;AAAA,IACA,UAAU;AAAA,IACV,eAAe;AAAA,EACjB;AACF;AASO,MAAM,mBAAmB,CAAI;AAAA,EAClC;AAAA,EACA;AACF,MAAwB;AAEtB,QAAM,QAAQ,SAAS;AACvB,MAAI,CAAC;AAAO,WAAO;AACnB,SAAO,MAAM;AACf;AAuBA,MAAM,gBAAgB,MAAoB;AAExC,MAAI,OAAO,WAAW,aAAa;AACjC,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACF;","names":[]}

package/dist/esm/server/useIntlayer.d.mts

@@ -0,0 +1,7 @@
+import { UseIntlayer } from "../useIntlayerBase.mjs";
+import "@intlayer/config/client";
+import "intlayer";
+
+declare const useIntlayer: UseIntlayer;
+
+export { useIntlayer };

package/dist/esm/server/useIntlayer.mjs

@@ -0,0 +1,9 @@
+import { useIntlayerBase } from "../useIntlayerBase.mjs";
+import { LocaleServerContext } from "./LocaleServerContextProvider.mjs";
+import { getServerContext } from "./serverContext.mjs";
+const useIntlayer = (id, locale) => {
+  const localeTarget = locale ?? getServerContext(LocaleServerContext);
+  return useIntlayerBase(id, localeTarget);
+};
+export { useIntlayer };
+//# sourceMappingURL=useIntlayer.mjs.map

package/dist/esm/server/useIntlayer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/server/useIntlayer.ts"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport {\n  type DictionaryKeys,\n  useIntlayerBase,\n  type UseIntlayer,\n} from '../useIntlayerBase';\nimport { LocaleServerContext } from './LocaleServerContextProvider';\nimport { getServerContext } from './serverContext';\n\nexport const useIntlayer: UseIntlayer = <T extends DictionaryKeys>(\n  id: T,\n  locale?: Locales\n) => {\n  const localeTarget = locale ?? getServerContext<Locales>(LocaleServerContext);\n\n  return useIntlayerBase(id, localeTarget);\n};\n"],"mappings":"AACA;AAAA,EAEE;AAAA,OAEK;AACP,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAE1B,MAAM,cAA2B,CACtC,IACA,WACG;AACH,QAAM,eAAe,UAAU,iBAA0B,mBAAmB;AAE5E,SAAO,gBAAgB,IAAI,YAAY;AACzC;","names":[]}

package/dist/esm/server/useTraduction.d.mts

@@ -0,0 +1,7 @@
+import { LanguageContent } from "@intlayer/core";
+
+declare const useTraduction: <Content>(
+  languageContent: LanguageContent<Content>
+) => Content;
+
+export { useTraduction };

package/dist/esm/server/useTraduction.mjs

@@ -0,0 +1,9 @@
+import { getTranslation } from "../getTranslation.mjs";
+import { LocaleServerContext } from "./LocaleServerContextProvider.mjs";
+import { getServerContext } from "./serverContext.mjs";
+const useTraduction = (languageContent) => {
+  const locale = getServerContext(LocaleServerContext);
+  return getTranslation(languageContent, locale);
+};
+export { useTraduction };
+//# sourceMappingURL=useTraduction.mjs.map

package/dist/esm/server/useTraduction.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/server/useTraduction.ts"],"sourcesContent":["import type { Locales } from '@intlayer/config/client';\nimport type { LanguageContent } from '@intlayer/core';\nimport { getTranslation } from '../getTranslation';\nimport { LocaleServerContext } from './LocaleServerContextProvider';\nimport { getServerContext } from './serverContext';\n\nexport const useTraduction = <Content>(\n  languageContent: LanguageContent<Content>\n) => {\n  const locale = getServerContext<Locales>(LocaleServerContext);\n\n  return getTranslation(languageContent, locale);\n};\n"],"mappings":"AAEA,SAAS,sBAAsB;AAC/B,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AAE1B,MAAM,gBAAgB,CAC3B,oBACG;AACH,QAAM,SAAS,iBAA0B,mBAAmB;AAE5D,SAAO,eAAe,iBAAiB,MAAM;AAC/C;","names":[]}

package/dist/esm/useIntlayerBase.d.mts

@@ -0,0 +1,23 @@
+import { Locales } from "@intlayer/config/client";
+import { IntlayerDictionaryTypesConnector } from "intlayer";
+
+/**
+ * @intlayer/dictionaries-entry is a package that only returns the dictionary entry path.
+ * Using an external package allow to alias it in the bundle configuration (such as webpack).
+ * The alias allow hot reload the app (such as nextjs) on any dictionary change.
+ */
+
+type StringFallback<T> = T extends never ? string : T;
+type DictionaryKeys = StringFallback<keyof IntlayerDictionaryTypesConnector>;
+type UseIntlayer = <T extends DictionaryKeys>(
+  id: T,
+  locale?: Locales
+) => IntlayerDictionaryTypesConnector[T];
+declare const useIntlayerBase: UseIntlayer;
+
+export {
+  type DictionaryKeys,
+  type StringFallback,
+  type UseIntlayer,
+  useIntlayerBase,
+};

package/dist/esm/useIntlayerBase.mjs

@@ -0,0 +1,8 @@
+import dictionaries from "@intlayer/dictionaries-entry";
+import { processDictionary } from "./processDictionary/index.mjs";
+const useIntlayerBase = (id, locale) => {
+  const dictionary = dictionaries[id];
+  return processDictionary(dictionary, locale);
+};
+export { useIntlayerBase };
+//# sourceMappingURL=useIntlayerBase.mjs.map

package/dist/esm/useIntlayerBase.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/useIntlayerBase.ts"],"sourcesContent":["/**\n * @intlayer/dictionaries-entry is a package that only returns the dictionary entry path.\n * Using an external package allow to alias it in the bundle configuration (such as webpack).\n * The alias allow hot reload the app (such as nextjs) on any dictionary change.\n */\nimport type { Locales } from '@intlayer/config/client';\nimport dictionaries from '@intlayer/dictionaries-entry';\nimport type { IntlayerDictionaryTypesConnector } from 'intlayer';\nimport type { Content } from './processDictionary/contentDictionary';\nimport { processDictionary } from './processDictionary/index';\n\nexport type StringFallback<T> = T extends never ? string : T; // If no keys are found, return string to disable error, and accept any string as dictionary key\nexport type DictionaryKeys = StringFallback<\n  keyof IntlayerDictionaryTypesConnector\n>;\n\nexport type UseIntlayer = <T extends DictionaryKeys>(\n  id: T,\n  locale?: Locales\n) => IntlayerDictionaryTypesConnector[T];\n\nexport const useIntlayerBase: UseIntlayer = <T extends DictionaryKeys>(\n  id: T,\n  locale?: Locales\n) => {\n  const dictionary: Content = dictionaries[id];\n\n  return processDictionary(\n    dictionary,\n    locale\n  ) as IntlayerDictionaryTypesConnector[T];\n};\n"],"mappings":"AAMA,OAAO,kBAAkB;AAGzB,SAAS,yBAAyB;AAY3B,MAAM,kBAA+B,CAC1C,IACA,WACG;AACH,QAAM,aAAsB,aAAa,EAAE;AAE3C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "react-intlayer",
+  "version": "1.0.0",
+  "private": false,
+  "description": "Internationalization layer for React applications - Layer of abstraction between the business logic and the data access layer. Manage internationalization in a simple way, through TypeScript, JavaScript or JSON declaration file.",
+  "keywords": [
+    "intlayer",
+    "layer",
+    "abstraction",
+    "data",
+    "internationalization",
+    "i18n",
+    "typescript",
+    "javascript",
+    "react",
+    "json",
+    "file"
+  ],
+  "homepage": "https://github.com/aypineau/intlayer",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aypineau/intlayer"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Aymeric PINEAU",
+    "url": "https://github.com/aypineau"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/esm/index.d.mts",
+      "require": "./dist/cjs/index.cjs",
+      "import": "./dist/esm/index.mjs"
+    },
+    "./server": {
+      "types": "./dist/esm/server/index.d.mts",
+      "require": "./dist/cjs/server/index.cjs",
+      "import": "./dist/esm/server/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./src/index.ts",
+  "typesVersions": {
+    "*": {
+      "package.json": [
+        "./package.json"
+      ]
+    }
+  },
+  "files": [
+    "./dist",
+    "./src",
+    "./package.json"
+  ],
+  "dependencies": {
+    "js-cookie": "^3.0.5",
+    "react-cookie": "^7.1.4",
+    "@intlayer/config": "^1.0.0",
+    "@intlayer/core": "^1.0.0",
+    "@intlayer/dictionaries-entry": "^1.0.0",
+    "intlayer": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.78",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "5.0.5",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.3",
+    "@utils/eslint-config": "^1.0.0",
+    "@utils/ts-config": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "engines": {
+    "node": ">=14.18"
+  },
+  "bug": {
+    "url": "https://github.com/aypineau/intlayer/issues"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rimraf ./dist",
+    "dev": "tsup --watch",
+    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs",
+    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs --fix",
+    "prettier:fix": "prettier --write src/**/*",
+    "test": "",
+    "typecheck": "tsup--project ./tsconfig.json --noEmit"
+  }
+}

package/src/ContentEditor/ContentEditor.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import {
+  useEffect,
+  useState,
+  useRef,
+  useCallback,
+  type FC,
+  type MouseEventHandler,
+} from 'react';
+
+type ContentEditorProps = {
+  children?: string;
+};
+
+const PRESS_DETECT_DURATION = 500;
+
+export const ContentEditor: FC<ContentEditorProps> = ({ children }) => {
+  const divRef = useRef<HTMLDivElement>(null);
+  const [isEditing, setIsEditing] = useState(false);
+  const pressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleOnLongPress = () => {
+    setIsEditing(true);
+  };
+
+  const startPressTimer = () => {
+    pressTimerRef.current = setTimeout(() => {
+      handleOnLongPress();
+    }, PRESS_DETECT_DURATION);
+  };
+
+  const clearPressTimer = () => {
+    if (pressTimerRef.current) {
+      clearTimeout(pressTimerRef.current);
+      pressTimerRef.current = null;
+    }
+  };
+
+  const handleMouseDown = () => {
+    clearPressTimer(); // Ensure any previous timer is cleared
+    startPressTimer();
+  };
+
+  const handleMouseUp = () => {
+    clearPressTimer();
+  };
+
+  // Use useCallback to ensure the function identity remains stable
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (divRef.current && !divRef.current.contains(event.target as Node)) {
+        setIsEditing(false);
+      }
+    },
+    [divRef]
+  );
+
+  useEffect(() => {
+    // Attach click outside listener
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      // Cleanup
+      document.removeEventListener('mousedown', handleClickOutside);
+      clearPressTimer(); // Ensure to clear the timer when component unmounts
+    };
+  }, [handleClickOutside]);
+
+  const handleOnClick: MouseEventHandler<HTMLDivElement> = (e) => {
+    if (isEditing) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  const handleOnBlur = () => {
+    // Stop editing when the element loses focus
+    setIsEditing(false);
+  };
+
+  const onContentChange = (_e: React.FormEvent<HTMLDivElement>) => {
+    // console.log(e.currentTarget.textContent);
+  };
+
+  return (
+    <div
+      role="textbox"
+      tabIndex={0}
+      onKeyUp={() => null}
+      contentEditable={isEditing}
+      onInput={onContentChange}
+      onClick={handleOnClick}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      onTouchStart={handleMouseDown}
+      onTouchEnd={handleMouseUp}
+      onTouchCancel={handleMouseUp}
+      onBlur={handleOnBlur}
+      suppressContentEditableWarning={true} // To suppress the warning for controlled components
+      style={
+        isEditing
+          ? {
+              backgroundColor: 'transparent',
+              cursor: 'text',
+              display: 'inline',
+            }
+          : { cursor: 'pointer', display: 'inline' }
+      }
+      ref={divRef}
+    >
+      {children}
+    </div>
+  );
+};

package/src/ContentEditor/contentRender.tsx

@@ -0,0 +1,11 @@
+import { ContentEditor } from './ContentEditor';
+
+export const contentRender = (content: string) => {
+  const isEditable = process.env.NODE_ENV === 'development';
+
+  if (isEditable && ContentEditor) {
+    return (<ContentEditor>{content}</ContentEditor>) as unknown as string;
+  }
+
+  return content;
+};

package/src/ContentEditor/index.tsx

@@ -0,0 +1,2 @@
+export * from './ContentEditor';
+export * from './contentRender';

package/src/LocaleContextProvider.tsx

@@ -0,0 +1,26 @@
+import { intlayerIntlConfiguration } from '@intlayer/config/client';
+import React, { type FC } from 'react';
+import {
+  LocaleClientContextProvider,
+  type LocaleClientContextProviderProps,
+} from './client/LocaleClientContextProvider';
+import {
+  LocaleServerContextProvider,
+  type LocaleServerContextProviderProps,
+} from './server/LocaleServerContextProvider';
+
+const defaultLocale = intlayerIntlConfiguration.defaultLocale;
+
+type LocaleContextProviderProps = LocaleClientContextProviderProps &
+  LocaleServerContextProviderProps;
+
+export const LocaleContextProvider: FC<LocaleContextProviderProps> = ({
+  children,
+  locale = defaultLocale,
+}) => (
+  <LocaleServerContextProvider locale={locale}>
+    <LocaleClientContextProvider locale={locale}>
+      {children}
+    </LocaleClientContextProvider>
+  </LocaleServerContextProvider>
+);

package/src/client/LocaleClientContextProvider.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import {
+  intlayerIntlConfiguration,
+  type Locales,
+} from '@intlayer/config/client';
+import {
+  type PropsWithChildren,
+  createContext,
+  useContext,
+  type FC,
+} from 'react';
+import { localeCookie } from './useLocaleCookie';
+
+type LocaleContextValue = {
+  locale: Locales;
+};
+
+export const LocaleClientContext = createContext<LocaleContextValue>({
+  locale: localeCookie ?? intlayerIntlConfiguration.defaultLocale,
+});
+
+export const useLocaleContext = () => useContext(LocaleClientContext);
+
+export type LocaleClientContextProviderProps = PropsWithChildren & {
+  locale: Locales;
+};
+
+export const LocaleClientContextProvider: FC<
+  LocaleClientContextProviderProps
+> = ({ locale, children }) => (
+  <LocaleClientContext.Provider value={{ locale }}>
+    {children}
+  </LocaleClientContext.Provider>
+);

package/src/client/index.ts

@@ -0,0 +1,14 @@
+export type { LocaleClientContextProviderProps } from './LocaleClientContextProvider';
+export {
+  LocaleClientContext,
+  useLocaleContext,
+  LocaleClientContextProvider,
+} from './LocaleClientContextProvider';
+export { useIntlayer } from './useIntlayer';
+export { useLocale } from './useLocale';
+export { useTraduction } from './useTraduction';
+export {
+  useLocaleCookie,
+  localeCookie,
+  setLocaleCookie,
+} from './useLocaleCookie';

package/src/client/useContent.ts

@@ -0,0 +1,17 @@
+import type { LanguageContent } from '@intlayer/core';
+import { useLocale } from './useLocale';
+import { useTraduction } from './useTraduction';
+
+export const useContent = <Content>(
+  languageContent: LanguageContent<Content>
+) => {
+  const { locale } = useLocale();
+
+  const content = useTraduction(languageContent);
+
+  return {
+    locale,
+    content,
+    t: useTraduction,
+  };
+};

package/src/client/useIntlayer.ts

@@ -0,0 +1,20 @@
+'use client';
+
+import type { Locales } from '@intlayer/config/client';
+import { useContext } from 'react';
+import {
+  type DictionaryKeys,
+  useIntlayerBase,
+  type UseIntlayer,
+} from '../useIntlayerBase';
+import { LocaleClientContext } from './LocaleClientContextProvider';
+
+export const useIntlayer: UseIntlayer = <T extends DictionaryKeys>(
+  id: T,
+  locale?: Locales
+) => {
+  const { locale: currentLocale } = useContext(LocaleClientContext);
+  const localeTarget = locale ?? currentLocale;
+
+  return useIntlayerBase(id, localeTarget);
+};

package/src/client/useLocale.ts

@@ -0,0 +1,19 @@
+'use client';
+
+import { intlayerIntlConfiguration } from '@intlayer/config/client';
+import { localeList } from '@intlayer/core';
+import { useContext } from 'react';
+import { LocaleClientContext } from './LocaleClientContextProvider';
+
+const { defaultLocale, locales: availableLocales } = intlayerIntlConfiguration;
+
+export const useLocale = () => {
+  const { locale } = useContext(LocaleClientContext);
+
+  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
+  };
+};

package/src/client/useLocaleCookie.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-redundant-type-constituents */
+import {
+  type Locales,
+  intlayerMiddlewareConfiguration,
+} from '@intlayer/config/client';
+import Cookies from 'js-cookie';
+
+const { cookieName } = intlayerMiddlewareConfiguration;
+
+const cookieAttributes: Cookies.CookieAttributes = {
+  path: '/',
+  expires: undefined,
+  domain: undefined,
+  secure: false,
+  sameSite: 'strict',
+};
+
+export const localeCookie = Cookies.get(cookieName) as Locales | undefined;
+
+export const setLocaleCookie = (locale: Locales) => {
+  Cookies.set(cookieName, locale, cookieAttributes);
+};
+
+export const useLocaleCookie = () => ({
+  localeCookie,
+  setLocaleCookie,
+});

package/src/client/useTraduction.ts

@@ -0,0 +1,12 @@
+import type { LanguageContent } from '@intlayer/core';
+import { useContext } from 'react';
+import { getTranslation } from '../getTranslation';
+import { LocaleClientContext } from './LocaleClientContextProvider';
+
+export const useTraduction = <Content>(
+  languageContent: LanguageContent<Content>
+): Content => {
+  const { locale } = useContext(LocaleClientContext);
+
+  return getTranslation(languageContent, locale);
+};

package/src/getEnumeration.ts

@@ -0,0 +1,18 @@
+import { type QuantityContent, getEnumerationContent } from '@intlayer/core';
+import { contentRender } from './ContentEditor/contentRender';
+
+export const getEnumeration = <Content>(
+  enumerationContent: QuantityContent<Content>,
+  quantity: number
+): Content => {
+  const result: Content = getEnumerationContent<Content>(
+    enumerationContent,
+    quantity
+  );
+
+  if (typeof result === 'string') {
+    return contentRender(result) as Content;
+  }
+
+  return result;
+};

package/src/getTranslation.ts

@@ -0,0 +1,24 @@
+import {
+  type Locales,
+  intlayerIntlConfiguration,
+} from '@intlayer/config/client';
+import { type LanguageContent, getTranslationContent } from '@intlayer/core';
+import { contentRender } from './ContentEditor/contentRender';
+
+export const getTranslation = <Content>(
+  languageContent: LanguageContent<Content>,
+  locale?: Locales
+): Content => {
+  const { defaultLocale } = intlayerIntlConfiguration;
+
+  const result: Content = getTranslationContent<Content>(
+    languageContent,
+    locale ?? defaultLocale
+  );
+
+  if (typeof result === 'string') {
+    return contentRender(result) as Content;
+  }
+
+  return result;
+};

package/src/index.ts

@@ -0,0 +1,14 @@
+export { getTranslation } from './getTranslation';
+export {
+  LocaleClientContextProvider,
+  type LocaleClientContextProviderProps,
+  LocaleClientContext,
+  useLocaleContext,
+  useIntlayer,
+  useLocale,
+  useTraduction,
+  useLocaleCookie,
+  localeCookie,
+  setLocaleCookie,
+} from './client/index';
+export {} from './client/useLocaleCookie';

package/src/processDictionary/contentDictionary.d.ts

@@ -0,0 +1,27 @@
+import { type TranslationContent } from '@intlayer/core';
+
+export type ContentValue =
+  | string
+  | {
+      [key: string]: ContentValue;
+    }
+  | TranslationContent<unknown>;
+
+export type Content = Record<string, ContentValue | undefined>;
+
+export type TransformedContentValue =
+  | string
+  | {
+      [key: string]: TransformedContentValue;
+    }
+  | undefined
+  | ((quantity: number) => TransformedContentValue);
+
+export type TransformedContent = Record<
+  string,
+  TransformedContentValue | undefined
+>;
+
+export type ContentDictionary = Content & {
+  id: string;
+};