@ttoss/react-i18n 1.17.0

package/README.md

@@ -0,0 +1,79 @@
+# @ttoss/i18n
+
+## About
+
+**@ttoss/react-i18n** is a library that provides a simple way to internationalize your React application using ttoss ecosystem.
+
+## Get Started
+
+### Install @ttoss/i18n
+
+```shell
+yarn add @ttoss/react-i18n
+```
+
+## Examples of use
+
+### Index.tsx
+
+Import the I18nProvider and wrap your application with it. Add to it a function called `loadLocaleData` to load all the translation data.
+
+```tsx title="src/index.tsx"
+import { I18nProvider, LoadLocaleData } from '@ttoss/react-i18n';
+
+const loadLocaleData: LoadLocaleData = (locale) => {
+  switch (locale) {
+    case 'pt-BR':
+      return import('../i18n/compiled-lang/pt-BR.json');
+    default:
+      return import('../i18n/compiled-lang/en.json');
+  }
+};
+
+ReactDOM.render(
+  <I18nProvider
+    locale={window.navigator.language}
+    loadLocaleData={loadLocaleData}
+  >
+    <App />
+  </I18nProvider>,
+  document.getElementById('root')
+);
+```
+
+### App.tsx
+
+Then import the useI18n hook and extract the intl, to get access to the `formatMessage` function and many others (using `defineMessages` is optional).
+
+```tsx title="src/App.tsx"
+import { useI18n, defineMessages } from '@ttoss/react-i18n';
+
+const messages = defineMessages({
+  myNameIs: {
+    description: 'My name is',
+    defaultValue: 'My name is {name}',
+  },
+});
+
+const App = () => {
+  const { intl, setLocale } = useI18n();
+
+  const [name, setName] = React.useState('Rayza');
+
+  return (
+    <div>
+      <div>
+        <button onClick={() => setLocale('en-US')}>en-US</button>
+
+        <button onClick={() => setLocale('pt-BR')}>pt-BR</button>
+      </div>
+
+      <input value={name} onChange={(e) => setName(e.target.value)} />
+
+      <h3>{intl.formatMessage(messages.myNameIs, { name })}</h3>
+    </div>
+  );
+};
+
+export default App;
+```

package/bin/cli.js

@@ -0,0 +1,56 @@
+#!/usr/bin/env node
+
+const { compile, extract } = require('@formatjs/cli');
+const fs = require('fs');
+const glob = require('glob');
+const path = require('path');
+
+const DEFAULT_DIR = 'i18n';
+
+const EXTRACT_DIR = path.join(DEFAULT_DIR, 'lang');
+
+const COMPILE_DIR = path.join(DEFAULT_DIR, 'compiled-lang');
+
+const args = process.argv.slice(2);
+
+(async () => {
+  /**
+   * Extract
+   */
+  const extractedDataAsString = await extract(glob.sync('src/**/*.{ts,tsx}'), {
+    idInterpolationPattern: '[sha512:contenthash:base64:6]',
+  });
+
+  await fs.promises.mkdir(EXTRACT_DIR, { recursive: true });
+
+  await fs.promises.writeFile(
+    path.join(EXTRACT_DIR, 'en.json'),
+    extractedDataAsString
+  );
+
+  if (args.includes('--no-compile')) {
+    return;
+  }
+
+  /**
+   * Compile
+   */
+  await fs.promises.mkdir(COMPILE_DIR, {
+    recursive: true,
+  });
+
+  const translations = glob.sync(EXTRACT_DIR + '/*.json');
+
+  for (const translation of translations) {
+    const filename = translation.split('/').pop();
+
+    const compiledDataAsString = await compile([translation], {
+      ast: true,
+    });
+
+    await fs.promises.writeFile(
+      path.join(COMPILE_DIR, filename),
+      compiledDataAsString
+    );
+  }
+})();

package/dist/esm/index.js

@@ -0,0 +1,69 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// tsup.inject.js
+import * as React from "react";
+
+// src/index.ts
+import { defineMessages, defineMessage, FormattedMessage } from "react-intl";
+
+// src/i18Provider.tsx
+import * as React2 from "react";
+import { IntlProvider } from "react-intl";
+import { Fragment, jsx } from "react/jsx-runtime";
+var DEFAULT_LOCALE = "en";
+var I18nConfigContext = React2.createContext({
+  defaultLocale: DEFAULT_LOCALE,
+  setLocale: () => {
+    return null;
+  }
+});
+var I18nProvider = ({
+  children,
+  locale: initialLocale,
+  loadLocaleData,
+  ...intlConfig
+}) => {
+  const [locale, setLocale] = React2.useState(initialLocale || DEFAULT_LOCALE);
+  const [messages, setMessages] = React2.useState();
+  React2.useEffect(() => {
+    if (loadLocaleData) {
+      loadLocaleData(locale).then((message) => {
+        return setMessages(message);
+      });
+    }
+  }, [loadLocaleData, locale]);
+  return /* @__PURE__ */ jsx(I18nConfigContext.Provider, {
+    value: {
+      defaultLocale: DEFAULT_LOCALE,
+      locale,
+      setLocale,
+      ...intlConfig
+    },
+    children: /* @__PURE__ */ jsx(IntlProvider, {
+      defaultLocale: DEFAULT_LOCALE,
+      locale,
+      messages,
+      ...intlConfig,
+      children: /* @__PURE__ */ jsx(Fragment, {
+        children
+      })
+    })
+  });
+};
+
+// src/useI18n.ts
+import * as React3 from "react";
+import { useIntl } from "react-intl";
+var useI18n = () => {
+  const intl = useIntl();
+  const config = React3.useContext(I18nConfigContext);
+  return { ...config, intl };
+};
+export {
+  DEFAULT_LOCALE,
+  FormattedMessage,
+  I18nProvider,
+  defineMessage,
+  defineMessages,
+  useI18n
+};

package/dist/index.d.ts

@@ -0,0 +1,27 @@
+import * as react_intl from 'react-intl';
+export { FormattedMessage, defineMessage, defineMessages } from 'react-intl';
+import * as React from 'react';
+
+declare type MessagesType = any;
+declare type LoadLocaleData = (locale: string) => Promise<MessagesType>;
+declare type I18nProviderProps = {
+    locale?: string;
+    loadLocaleData?: LoadLocaleData;
+    children?: React.ReactNode;
+};
+/**
+ * `DEFAULT_LOCALE` must be `en` because is the default of the other modules.
+ */
+declare const DEFAULT_LOCALE = "en";
+declare const I18nProvider: ({ children, locale, loadLocaleData, ...intlConfig }: I18nProviderProps) => JSX.Element;
+
+declare const useI18n: () => {
+    intl: react_intl.IntlShape;
+    locale?: string | undefined;
+    loadLocaleData?: LoadLocaleData | undefined;
+    children?: React.ReactNode;
+    defaultLocale: string;
+    setLocale: (language: string) => void;
+};
+
+export { DEFAULT_LOCALE, I18nProvider, I18nProviderProps, LoadLocaleData, useI18n };

package/dist/index.js

@@ -0,0 +1,106 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DEFAULT_LOCALE: () => DEFAULT_LOCALE,
+  FormattedMessage: () => import_react_intl3.FormattedMessage,
+  I18nProvider: () => I18nProvider,
+  defineMessage: () => import_react_intl3.defineMessage,
+  defineMessages: () => import_react_intl3.defineMessages,
+  useI18n: () => useI18n
+});
+module.exports = __toCommonJS(src_exports);
+
+// tsup.inject.js
+var React = __toESM(require("react"));
+
+// src/index.ts
+var import_react_intl3 = require("react-intl");
+
+// src/i18Provider.tsx
+var React2 = __toESM(require("react"));
+var import_react_intl = require("react-intl");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_LOCALE = "en";
+var I18nConfigContext = React2.createContext({
+  defaultLocale: DEFAULT_LOCALE,
+  setLocale: () => {
+    return null;
+  }
+});
+var I18nProvider = ({
+  children,
+  locale: initialLocale,
+  loadLocaleData,
+  ...intlConfig
+}) => {
+  const [locale, setLocale] = React2.useState(initialLocale || DEFAULT_LOCALE);
+  const [messages, setMessages] = React2.useState();
+  React2.useEffect(() => {
+    if (loadLocaleData) {
+      loadLocaleData(locale).then((message) => {
+        return setMessages(message);
+      });
+    }
+  }, [loadLocaleData, locale]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(I18nConfigContext.Provider, {
+    value: {
+      defaultLocale: DEFAULT_LOCALE,
+      locale,
+      setLocale,
+      ...intlConfig
+    },
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_intl.IntlProvider, {
+      defaultLocale: DEFAULT_LOCALE,
+      locale,
+      messages,
+      ...intlConfig,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+        children
+      })
+    })
+  });
+};
+
+// src/useI18n.ts
+var React3 = __toESM(require("react"));
+var import_react_intl2 = require("react-intl");
+var useI18n = () => {
+  const intl = (0, import_react_intl2.useIntl)();
+  const config = React3.useContext(I18nConfigContext);
+  return { ...config, intl };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_LOCALE,
+  FormattedMessage,
+  I18nProvider,
+  defineMessage,
+  defineMessages,
+  useI18n
+});

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@ttoss/react-i18n",
+  "version": "1.17.0",
+  "license": "UNLICENSED",
+  "author": "ttoss",
+  "contributors": [
+    "Pedro Arantes <arantespp@gmail.com> (https://arantespp.com)",
+    "Rayza Oliveira Costa <rayza.ocr@gmail.com> (https://bio.link/rayza)"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "bin": {
+    "ttoss-i18n": "./bin/cli.js"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "yarn workspace @ttoss/storybook run dev",
+    "pretest": "yarn run pretest:extract && yarn run pretest:compile",
+    "test": "jest",
+    "pretest:compile": "yarn run pretest:compile:en && yarn run pretest:compile:ptBR",
+    "pretest:compile:en": "formatjs compile i18n/lang/en.json --ast --out-file i18n/compiled-lang/en.json",
+    "pretest:compile:ptBR": "formatjs compile i18n/lang/pt-BR.json --ast --out-file i18n/compiled-lang/pt-BR.json",
+    "pretest:extract": "formatjs extract 'tests/**/*.ts*' --out-file i18n/lang/en.json"
+  },
+  "typings": "dist/index.d.ts",
+  "dependencies": {
+    "glob": "^8.0.3",
+    "react-intl": "^6.2.5"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@formatjs/cli": "^5.1.7",
+    "@ttoss/config": "^1.21.0",
+    "@ttoss/test-utils": "^1.18.1"
+  },
+  "keywords": [
+    "React",
+    "ui",
+    "user interface"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "9fa7581b00cd6971aa59e3a684c9372b27c35ca9"
+}

package/src/i18Provider.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { IntlProvider } from 'react-intl';
+
+export type MessagesType = any;
+
+// eslint-disable-next-line no-unused-vars
+export type LoadLocaleData = (locale: string) => Promise<MessagesType>;
+
+export type I18nProviderProps = {
+  locale?: string;
+  loadLocaleData?: LoadLocaleData;
+  children?: React.ReactNode;
+};
+
+/**
+ * `DEFAULT_LOCALE` must be `en` because is the default of the other modules.
+ */
+export const DEFAULT_LOCALE = 'en';
+
+export type I18nConfigContextProps = Omit<
+  I18nProviderProps,
+  'LoadLocaleData'
+> & {
+  defaultLocale: string;
+  // eslint-disable-next-line no-unused-vars
+  setLocale: (language: string) => void;
+};
+
+export const I18nConfigContext = React.createContext<I18nConfigContextProps>({
+  defaultLocale: DEFAULT_LOCALE,
+  setLocale: () => {
+    return null;
+  },
+});
+
+export const I18nProvider = ({
+  children,
+  locale: initialLocale,
+  loadLocaleData,
+  ...intlConfig
+}: I18nProviderProps) => {
+  const [locale, setLocale] = React.useState(initialLocale || DEFAULT_LOCALE);
+
+  const [messages, setMessages] = React.useState<MessagesType>();
+
+  React.useEffect(() => {
+    if (loadLocaleData) {
+      loadLocaleData(locale).then((message) => {
+        return setMessages(message);
+      });
+    }
+  }, [loadLocaleData, locale]);
+
+  return (
+    <I18nConfigContext.Provider
+      value={{
+        defaultLocale: DEFAULT_LOCALE,
+        locale,
+        setLocale,
+        ...intlConfig,
+      }}
+    >
+      <IntlProvider
+        defaultLocale={DEFAULT_LOCALE}
+        locale={locale}
+        messages={messages}
+        {...intlConfig}
+      >
+        <>{children}</>
+      </IntlProvider>
+    </I18nConfigContext.Provider>
+  );
+};

package/src/index.ts

@@ -0,0 +1,8 @@
+export { defineMessages, defineMessage, FormattedMessage } from 'react-intl';
+export {
+  I18nProvider,
+  I18nProviderProps,
+  LoadLocaleData,
+  DEFAULT_LOCALE,
+} from './i18Provider';
+export { useI18n } from './useI18n';

package/src/useI18n.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { I18nConfigContext } from './i18Provider';
+import { useIntl } from 'react-intl';
+
+export const useI18n = () => {
+  const intl = useIntl();
+
+  const config = React.useContext(I18nConfigContext);
+
+  return { ...config, intl };
+};