feat: add i18n checker (ui) (#17283)

web/app/dev-only/i18n-checker/page.tsx

@@ -0,0 +1,164 @@
+'use client'
+import { resources } from '@/i18n/i18next-config'
+import { useEffect, useState } from 'react'
+import cn from '@/utils/classnames'
+
+export default function I18nTest() {
+  const [langs, setLangs] = useState<Lang[]>([])
+
+  useEffect(() => {
+    setLangs(genLangs())
+  }, [])
+
+  return (
+    <div
+      style={{
+        height: 'calc(100% - 6em)',
+        overflowY: 'auto',
+        margin: '1em 1em 5em',
+      }}
+    >
+
+      <div style={{ minHeight: '75vh' }}>
+        <h2>Summary</h2>
+
+        <table
+          className={cn('mt-2 min-w-[340px] border-collapse border-0')}
+        >
+          <thead className="system-xs-medium-uppercase text-text-tertiary">
+            <tr>
+              <td className="w-5 min-w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1">
+                #
+              </td>
+              <td className="w-20 min-w-20 whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
+                lang
+              </td>
+              <td className="w-20 min-w-20 whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
+                count
+              </td>
+              <td className="w-20 min-w-20 whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
+                missing
+              </td>
+              <td className="w-20 min-w-20 whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
+                extra
+              </td>
+            </tr>
+          </thead>
+          <tbody className="system-sm-regular text-text-secondary">
+            {langs.map(({ locale, count, missing, extra }, idx) => <tr key={locale}>
+              <td className="">{idx}</td>
+              <td className="p-1.5">{locale}</td>
+              <td>{count}</td>
+              <td>{missing.length}</td>
+              <td>{extra.length}</td>
+            </tr>)}
+          </tbody>
+        </table>
+      </div>
+
+      <h2>Details</h2>
+
+      <table
+        className={cn('mt-2 w-full min-w-[340px] border-collapse border-0')}
+      >
+        <thead className="system-xs-medium-uppercase text-text-tertiary">
+          <tr>
+            <td className="w-5 min-w-5 whitespace-nowrap rounded-l-lg bg-background-section-burn pl-2 pr-1">
+              #
+            </td>
+            <td className="w-20 min-w-20 whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
+              lang
+            </td>
+            <td className="w-full whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
+              missing
+            </td>
+            <td className="w-full whitespace-nowrap bg-background-section-burn py-1.5 pl-3">
+              extra
+            </td>
+          </tr>
+        </thead>
+
+        <tbody>
+          {langs.map(({ locale, missing, extra }, idx) => {
+            return (<tr key={locale}>
+              <td className="py-2 align-top">{idx}</td>
+              <td className="py-2 align-top">{locale}</td>
+              <td className="py-2 align-top">
+                <ul>
+                  {missing.map(key => (
+                    <li key={key}>{key}</li>
+                  ))}
+                </ul>
+              </td>
+              <td className="py-2 align-top">
+                <ul>
+                  {extra.map(key => (
+                    <li key={key}>{key}</li>
+                  ))}
+                </ul>
+              </td>
+            </tr>
+            )
+          })}
+        </tbody>
+      </table>
+
+    </div>
+  )
+}
+
+function genLangs() {
+  const langs_: Lang[] = []
+  let en!: Lang
+
+  for (const [key, value] of Object.entries(resources)) {
+    const keys = getNestedKeys(value.translation)
+    const lang: Lang = {
+      locale: key,
+      keys: new Set(keys),
+      count: keys.length,
+      missing: [],
+      extra: [],
+    }
+
+    langs_.push(lang)
+    if (key === 'en-US') en = lang
+  }
+
+  for (const lang of langs_) {
+    const missing: string[] = []
+    const extra: string[] = []
+
+    for (const key of lang.keys)
+      if (!en.keys.has(key)) extra.push(key)
+
+    for (const key of en.keys)
+      if (!lang.keys.has(key)) missing.push(key)
+
+    lang.missing = missing
+    lang.extra = extra
+  }
+  return langs_
+}
+
+function getNestedKeys(translation: Record<string, any>): string[] {
+  const nestedKeys: string[] = []
+  const iterateKeys = (obj: Record<string, any>, prefix = '') => {
+    for (const key in obj) {
+      const nestedKey = prefix ? `${prefix}.${key}` : key
+      //   nestedKeys.push(nestedKey);
+      if (typeof obj[key] === 'object') iterateKeys(obj[key], nestedKey)
+      else if (typeof obj[key] === 'string') nestedKeys.push(nestedKey)
+    }
+  }
+  iterateKeys(translation)
+  return nestedKeys
+}
+
+type Lang = {
+  locale: string;
+  keys: Set<string>;
+  count: number;
+  missing: string[];
+  extra: string[];
+}

web/app/dev-only/layout.tsx

@@ -0,0 +1,9 @@
+import type React from 'react'
+import { notFound } from 'next/navigation'
+
+export default async function Layout({ children }: React.PropsWithChildren) {
+  if (process.env.NODE_ENV !== 'development')
+    notFound()
+
+  return children
+}