Add i18next-shopify example app

Shopify · Jun 21, 2023 · 134008a · 134008a
1 parent 522e508
commit 134008a
Show file tree

Hide file tree

Showing 12 changed files with 222 additions and 0 deletions.
diff --git a/examples/by-frameworks/i18next-shopify/.vscode/settings.json b/examples/by-frameworks/i18next-shopify/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+  "i18n-ally.localesPaths": "public/locales",
+  "i18n-ally.enabledFrameworks": ["i18next-shopify"],
+  "i18n-ally.namespace": true,
+  "i18n-ally.pathMatcher": "{locale}/{namespaces}.json",
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.keysInUse": ["description.part2_whatever"]
+  // "i18n-ally.defaultNamespace": "translation"
+}
diff --git a/examples/by-frameworks/i18next-shopify/package.json b/examples/by-frameworks/i18next-shopify/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "react_usinghooks",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "i18next": "20.3.0",
+    "i18next-browser-languagedetector": "6.1.1",
+    "i18next-xhr-backend": "3.2.2",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-i18next": "11.9.0",
+    "@shopify/i18next-shopify": "0.2.3",
+    "react-scripts": "4.0.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}
diff --git a/examples/by-frameworks/i18next-shopify/public/index.html b/examples/by-frameworks/i18next-shopify/public/index.html
@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/by-frameworks/i18next-shopify/public/locales/de/pages/home.json b/examples/by-frameworks/i18next-shopify/public/locales/de/pages/home.json
@@ -0,0 +1,3 @@
+{
+  "title": "Zuhause"
+}
diff --git a/examples/by-frameworks/i18next-shopify/public/locales/de/translation.json b/examples/by-frameworks/i18next-shopify/public/locales/de/translation.json
@@ -0,0 +1,7 @@
+{
+  "title": "Willkommen zu react und react-i18next",
+  "description": {
+    "part1": "Um loszulegen, ändere <1>src/App(DE).js</1> speicheren und neuladen.",
+    "part2": "Ändere die Sprachen zwischen deutsch und englisch mit Hilfe der beiden Schalter."
+  }
+}
diff --git a/examples/by-frameworks/i18next-shopify/public/locales/en/pages/home.json b/examples/by-frameworks/i18next-shopify/public/locales/en/pages/home.json
@@ -0,0 +1,3 @@
+{
+  "title": "Home"
+}
diff --git a/examples/by-frameworks/i18next-shopify/public/locales/en/translation.json b/examples/by-frameworks/i18next-shopify/public/locales/en/translation.json
@@ -0,0 +1,11 @@
+{
+  "title": "hello",
+  "description": {
+    "part1": "To get started, edit <1>src/App.js</1> and save to reload.",
+    "part2": "Switch language between english and german using buttons above."
+  },
+  "titlew": "ok",
+  "foo": {
+    "bar": "foobar"
+  }
+}
diff --git a/examples/by-frameworks/i18next-shopify/src/App.css b/examples/by-frameworks/i18next-shopify/src/App.css
@@ -0,0 +1,10 @@
+.App {
+  text-align: center;
+}
+
+.App-header {
+  background-color: #222;
+  height: 100px;
+  padding: 20px;
+  color: white;
+}
diff --git a/examples/by-frameworks/i18next-shopify/src/App.jsx b/examples/by-frameworks/i18next-shopify/src/App.jsx
@@ -0,0 +1,100 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React, { Component } from "react";
+import { useTranslation, withTranslation, Trans } from "react-i18next";
+import "./App.css";
+
+// use hoc for class based components
+class LegacyWelcomeClass extends Component {
+  render() {
+    const { t } = this.props;
+    return (
+      <div>
+        <h2>Plain Text</h2>
+        <h2>{t("translation.title")}</h2>
+      </div>
+    );
+  }
+}
+const Welcome = withTranslation()(LegacyWelcomeClass);
+
+// Component using the Trans component
+function MyComponent() {
+  return (
+    <Trans i18nKey="translation:description.part1">
+      To get started, edit <code>src/App.js</code> and save to reload.
+    </Trans>
+  );
+}
+
+// page uses the hook
+function Page() {
+  const { t, i18n } = useTranslation();
+
+  const changeLanguage = lng => {
+    i18n.changeLanguage(lng);
+  };
+
+  return (
+    <div className="App">
+      <div className="App-header">
+        <Welcome />
+        <button onClick={() => changeLanguage("de")}>de</button>
+        <button onClick={() => changeLanguage("en")}>en</button>
+      </div>
+      <div className="App-intro">
+        <MyComponent />
+      </div>
+      <div>{t("translation.description.part2")}</div>
+      {/* plain <Trans>, #423 */}
+      <Trans i18nKey="translation.description.part2">Fallback text</Trans>
+    </div>
+  );
+}
+
+// hook with scope
+function Page2() {
+  const { t } = useTranslation(["translation.foo"]);
+
+  // inside default namespace ("foo.bar")
+  t("bar");
+
+  // explicit namespace
+  t("pages.home:title");
+  t("pages/home:title");
+}
+
+// hook with another scope
+function Page3() {
+  const { t } = useTranslation("pages/home");
+
+  t("title");
+
+  // explicit namespace
+  t("translation:title");
+}
+
+// hook with scope in options
+function Page4() {
+  const { t } = useTranslation("pages/home");
+
+  t("title");
+
+  // explicit namespace
+  t("title", { ns: "translation" });
+}
+
+// component with scope in props
+function Page5() {
+  const { t } = useTranslation("pages/home");
+
+  return (
+    <div className="App">
+      <Trans t={t} i18nKey="title"></Trans>
+      {/* explicit namespace */}
+      <Trans t={t} i18nKey="title" ns="translation"></Trans>
+    </div>
+  );
+}
diff --git a/examples/by-frameworks/i18next-shopify/src/i18n.js b/examples/by-frameworks/i18next-shopify/src/i18n.js
@@ -0,0 +1,28 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+import i18n from 'i18next'
+import Backend from 'i18next-xhr-backend'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { initReactI18next } from 'react-i18next'
+
+i18n
+  // load translation using xhr -> see /public/locales
+  // learn more: https://github.com/i18next/i18next-xhr-backend
+  .use(Backend)
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    fallbackLng: 'en',
+    debug: true,
+
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+  })
+
+export default i18n
diff --git a/examples/by-frameworks/i18next-shopify/src/index.css b/examples/by-frameworks/i18next-shopify/src/index.css
@@ -0,0 +1,5 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+}
diff --git a/examples/by-frameworks/i18next-shopify/src/index.js b/examples/by-frameworks/i18next-shopify/src/index.js
@@ -0,0 +1,10 @@
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+
+// import i18n (needs to be bundled ;))
+import './i18n'
+
+ReactDOM.render(<App />, document.getElementById('root'))