@nocobase/portal-template-default 1.0.1 → 1.0.3

package/registry/nocobase-i18n/demo/index.tsx

@@ -0,0 +1,209 @@
+import { useGetLocale, useTranslate } from "@refinedev/core";
+import { Database, Languages, PanelsTopLeft } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { nocobaseClient } from "@/lib/nocobase/client";
+import {
+  LanguageSwitcher,
+  useEnabledLocales,
+} from "@/extensions/nocobase-i18n";
+import { I18nPromptGenerator } from "./prompt-generator";
+
+export function I18nDemoPage() {
+  const t = useTranslate();
+  const getLocale = useGetLocale();
+  const locale = getLocale();
+  const locales = useEnabledLocales();
+  const canSwitchLanguage = locales.length > 1;
+
+  return (
+    <div className="space-y-10 pb-12">
+      <header className="space-y-2">
+        <div className="flex items-center gap-2">
+          <Badge variant="secondary">i18n</Badge>
+          <Badge variant="outline">{locale}</Badge>
+        </div>
+        <h1 className="text-2xl font-semibold tracking-[-0.025em] sm:text-3xl">
+          {t("demo.title", { ns: "nocobase-i18n" }, "Internationalization")}
+        </h1>
+        <p className="max-w-3xl text-sm leading-6 text-muted-foreground">
+          {t(
+            "demo.description",
+            { ns: "nocobase-i18n" },
+            "An optional hybrid locale runtime with frontend UI resources and selected NocoBase dynamic namespaces."
+          )}
+        </p>
+      </header>
+
+      <section className="grid gap-5 xl:grid-cols-3">
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2">
+              <Languages className="size-4" />
+              {t(
+                "demo.switcher.title",
+                { ns: "nocobase-i18n" },
+                "Language switcher"
+              )}
+            </CardTitle>
+            <CardDescription>
+              {t(
+                "demo.switcher.description",
+                { ns: "nocobase-i18n" },
+                "The same reusable component is also integrated into the signed-in user menu."
+              )}
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {canSwitchLanguage ? (
+              <LanguageSwitcher className="max-w-sm" />
+            ) : (
+              <div className="flex items-start gap-3 rounded-lg border bg-muted/30 p-4">
+                <Languages className="mt-0.5 size-5 shrink-0 text-muted-foreground" />
+                <div>
+                  <p className="text-sm font-medium">
+                    {t(
+                      "demo.switcher.unavailable.title",
+                      { ns: "nocobase-i18n" },
+                      "Only one language is enabled"
+                    )}
+                  </p>
+                  <p className="mt-1 text-xs leading-5 text-muted-foreground">
+                    {t(
+                      "demo.switcher.unavailable.description",
+                      { ns: "nocobase-i18n" },
+                      "Enable another language in NocoBase system settings to display the switcher."
+                    )}
+                  </p>
+                </div>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <CapabilityCard
+          icon={<PanelsTopLeft className="size-4" />}
+          title={t(
+            "demo.frontend.title",
+            { ns: "nocobase-i18n" },
+            "Application UI translations"
+          )}
+          description={t(
+            "demo.frontend.description",
+            { ns: "nocobase-i18n" },
+            "Starter and Registry components keep their interface messages in local resource files."
+          )}
+        >
+          <div className="divide-y rounded-lg border">
+            <DemoRow
+              label={t(
+                "language.current",
+                { ns: "nocobase-i18n" },
+                "Current language"
+              )}
+              value={locale}
+            />
+            <DemoRow
+              label={t(
+                "demo.frontend.actions",
+                { ns: "nocobase-i18n" },
+                "Common actions"
+              )}
+              value={`${t("buttons.apply", "Apply")} · ${t(
+                "buttons.clear",
+                "Clear"
+              )}`}
+            />
+          </div>
+        </CapabilityCard>
+
+        <CapabilityCard
+          icon={<Database className="size-4" />}
+          title={t(
+            "demo.server.title",
+            { ns: "nocobase-i18n" },
+            "NocoBase metadata translations"
+          )}
+          description={t(
+            "demo.server.description",
+            { ns: "nocobase-i18n" },
+            "Collection and field labels are loaded from dynamic server namespaces such as lm-collections."
+          )}
+        >
+          <div className="divide-y rounded-lg border">
+            <DemoRow
+              label="Users"
+              value={t("Users", { ns: "lm-collections" }, "Users")}
+            />
+            <DemoRow
+              label="Nickname"
+              value={t("Nickname", { ns: "lm-collections" }, "Nickname")}
+            />
+            <DemoRow
+              label="X-Locale"
+              value={nocobaseClient.getLocale() ?? locale}
+              code
+            />
+          </div>
+        </CapabilityCard>
+      </section>
+
+      <section className="border-t pt-8">
+        <I18nPromptGenerator />
+      </section>
+    </div>
+  );
+}
+
+function DemoRow({
+  code,
+  label,
+  value,
+}: {
+  code?: boolean;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-4 px-3 py-2.5">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      {code ? (
+        <code className="rounded bg-muted px-2 py-1 text-xs">{value}</code>
+      ) : (
+        <span className="text-sm font-medium">{value}</span>
+      )}
+    </div>
+  );
+}
+
+function CapabilityCard({
+  children,
+  description,
+  icon,
+  title,
+}: {
+  children: React.ReactNode;
+  description: string;
+  icon: React.ReactNode;
+  title: string;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          {icon}
+          {title}
+        </CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className="text-sm">{children}</CardContent>
+    </Card>
+  );
+}

package/registry/nocobase-i18n/demo/prompt-generator.tsx

@@ -0,0 +1,155 @@
+import { useTranslate } from "@refinedev/core";
+import { Check, ChevronDown, Copy, Sparkles } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+export function I18nPromptGenerator() {
+  const t = useTranslate();
+  const [scene, setScene] = useState("A customer support workspace");
+  const [languages, setLanguages] = useState("English and Simplified Chinese");
+  const [copied, setCopied] = useState(false);
+  const [copyError, setCopyError] = useState(false);
+
+  const prompt = useMemo(
+    () => `Build a complete multilingual scene in the NocoBase Admin Starter.
+
+Application scene
+- Product or page: ${scene}
+- Supported languages: ${languages}
+- Translate the complete visible user flow, including empty, loading, validation, and error states.
+
+Implementation contract
+- Use the installed @/extensions/nocobase-i18n runtime and the application's translation and locale hooks.
+- Put application-owned React messages in src/locales and register the app namespace through registerTranslationResources from @/lib/i18n.
+- Keep each Registry component's messages in its own namespace and register them with registerLocaleResources().
+- Do not place application messages inside src/extensions/nocobase-i18n/locales because installed Registry files may be refreshed independently.
+- Use the reusable LanguageSwitcher when the page needs an explicit language control; the signed-in user menu already includes one.
+- Keep Starter and Registry UI resources local. Use app:getLang only for registered dynamic server namespaces such as lm-collections.
+- Let the shared NocoBase client send the selected locale through X-Locale.
+- Preserve compatibility when server metadata contains exact {{t("...")}} expressions.
+- Provide complete React components, locale resource files, route/resource integration, and realistic visible content.`,
+    [languages, scene]
+  );
+
+  return (
+    <details open className="group rounded-xl border bg-muted/15">
+      <summary className="flex cursor-pointer list-none items-center gap-2 px-4 py-3 text-sm font-medium marker:hidden">
+        <Sparkles className="size-4 text-primary" />
+        {t("demo.prompt.title", { ns: "nocobase-i18n" }, "Prompt generator")}
+        <ChevronDown className="ml-auto size-4 text-muted-foreground transition-transform group-open:rotate-180" />
+      </summary>
+      <div className="grid items-start gap-5 border-t p-4 xl:grid-cols-[360px_minmax(0,1fr)]">
+        <Card className="gap-0 py-0">
+          <CardHeader className="border-b py-4">
+            <CardTitle className="text-base">
+              {t(
+                "demo.prompt.settings",
+                { ns: "nocobase-i18n" },
+                "Scene settings"
+              )}
+            </CardTitle>
+            <CardDescription>
+              {t(
+                "demo.prompt.description",
+                { ns: "nocobase-i18n" },
+                "Describe a complete multilingual application scene and generate an implementation prompt."
+              )}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-5 py-5">
+            <div className="space-y-2">
+              <Label htmlFor="i18n-prompt-scene">
+                {t(
+                  "demo.prompt.scene",
+                  { ns: "nocobase-i18n" },
+                  "Application scene"
+                )}
+              </Label>
+              <Input
+                id="i18n-prompt-scene"
+                value={scene}
+                onChange={(event) => setScene(event.target.value)}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="i18n-prompt-languages">
+                {t(
+                  "demo.prompt.languages",
+                  { ns: "nocobase-i18n" },
+                  "Languages"
+                )}
+              </Label>
+              <Textarea
+                id="i18n-prompt-languages"
+                value={languages}
+                onChange={(event) => setLanguages(event.target.value)}
+                className="min-h-24"
+              />
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="min-w-0 gap-0 overflow-hidden py-0">
+          <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
+            <div>
+              <div className="text-sm font-medium">
+                {t(
+                  "demo.prompt.output",
+                  { ns: "nocobase-i18n" },
+                  "Generated prompt"
+                )}
+              </div>
+              <div className="text-xs text-muted-foreground">
+                {t(
+                  "demo.prompt.outputDescription",
+                  { ns: "nocobase-i18n" },
+                  "Updates as you change the scene and language requirements."
+                )}
+              </div>
+            </div>
+            <Button
+              size="sm"
+              onClick={async () => {
+                try {
+                  await navigator.clipboard.writeText(prompt);
+                  setCopyError(false);
+                  setCopied(true);
+                  window.setTimeout(() => setCopied(false), 1500);
+                } catch {
+                  setCopyError(true);
+                }
+              }}
+            >
+              {copied ? <Check /> : <Copy />}
+              {copied
+                ? t("demo.prompt.copied", { ns: "nocobase-i18n" }, "Copied")
+                : t("demo.prompt.copy", { ns: "nocobase-i18n" }, "Copy prompt")}
+            </Button>
+          </div>
+          {copyError ? (
+            <p className="border-b px-4 py-2 text-xs text-destructive">
+              {t(
+                "demo.prompt.copyError",
+                { ns: "nocobase-i18n" },
+                "Clipboard access failed. Select the prompt and copy it manually."
+              )}
+            </p>
+          ) : null}
+          <pre className="max-h-[520px] overflow-auto whitespace-pre-wrap bg-muted/25 p-5 font-mono text-xs leading-5 text-muted-foreground">
+            {prompt}
+          </pre>
+        </Card>
+      </div>
+    </details>
+  );
+}

package/registry/nocobase-i18n/extension.tsx

@@ -0,0 +1,46 @@
+import type { AppExtension } from "@/app/extension";
+import { LoadingState } from "@/components/app-shell/loading-state";
+import { Languages } from "lucide-react";
+import { lazy, Suspense } from "react";
+import { Route } from "react-router";
+import { LanguageUserMenuItems } from "./components";
+import { i18nProvider } from "./i18n-provider";
+import { LocalePreferenceProvider } from "./provider";
+
+const I18nDemoPage = lazy(() =>
+  import("./demo").then((module) => ({ default: module.I18nDemoPage }))
+);
+
+const nocobaseI18nExtension: AppExtension = {
+  id: "nocobase-i18n",
+  i18nProvider,
+  Provider: LocalePreferenceProvider,
+  UserMenuItems: LanguageUserMenuItems,
+  resources: [
+    {
+      name: "i18n-demo",
+      list: "/i18n",
+      meta: {
+        label: "Internationalization",
+        i18nKey: "navigation.demo",
+        i18nOptions: { ns: "nocobase-i18n" },
+        icon: <Languages />,
+        description: "Optional frontend internationalization for the Starter.",
+        acl: { type: "authenticated" },
+      },
+    },
+  ],
+  routes: (
+    <Route
+      key="nocobase-i18n-demo"
+      path="/i18n"
+      element={
+        <Suspense fallback={<LoadingState className="min-h-80" />}>
+          <I18nDemoPage />
+        </Suspense>
+      }
+    />
+  ),
+};
+
+export default nocobaseI18nExtension;

package/registry/nocobase-i18n/i18n-provider.ts

@@ -0,0 +1,9 @@
+import type { I18nProvider } from "@refinedev/core";
+
+import { changeLocale, getCurrentLocale, translate } from "./runtime";
+
+export const i18nProvider: I18nProvider = {
+  translate,
+  changeLocale,
+  getLocale: getCurrentLocale,
+};

package/registry/nocobase-i18n/index.ts

@@ -0,0 +1,6 @@
+export * from "./components";
+export * from "./i18n-provider";
+export * from "./locale-store";
+export * from "./provider";
+export * from "./runtime";
+export * from "./server-resources";

package/registry/nocobase-i18n/locale-store.ts

@@ -0,0 +1,134 @@
+import { useSyncExternalStore } from "react";
+
+export type LocaleDirection = "ltr" | "rtl";
+
+export type LocaleDefinition = {
+  locale: string;
+  label: string;
+  direction?: LocaleDirection;
+};
+
+export const DEFAULT_LOCALE = "en-US";
+
+const localeDefinitions = new Map<string, LocaleDefinition>([
+  ["en-US", { locale: "en-US", label: "English", direction: "ltr" }],
+  ["zh-CN", { locale: "zh-CN", label: "简体中文", direction: "ltr" }],
+]);
+const listeners = new Set<() => void>();
+let enabledLocaleCodes: string[] = [];
+let enabledLocaleSnapshot: LocaleDefinition[] = [];
+
+function emitChange() {
+  for (const listener of listeners) listener();
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+function refreshSnapshot() {
+  const nextSnapshot = enabledLocaleCodes
+    .map((locale) => localeDefinitions.get(locale))
+    .filter((definition): definition is LocaleDefinition =>
+      Boolean(definition)
+    );
+  const changed =
+    nextSnapshot.length !== enabledLocaleSnapshot.length ||
+    nextSnapshot.some((definition, index) => {
+      const current = enabledLocaleSnapshot[index];
+      return (
+        definition.locale !== current?.locale ||
+        definition.label !== current.label ||
+        definition.direction !== current.direction
+      );
+    });
+
+  if (!changed) return;
+  enabledLocaleSnapshot = nextSnapshot;
+  emitChange();
+}
+
+export function getLocaleDirection(locale: string): LocaleDirection {
+  return /^(ar|fa|he|ku|ur)(-|$)/i.test(locale) ? "rtl" : "ltr";
+}
+
+export function getLocaleLabel(locale: string) {
+  const existing = localeDefinitions.get(locale)?.label;
+  if (existing && existing !== locale) return existing;
+
+  try {
+    return (
+      new Intl.DisplayNames([locale], { type: "language" }).of(locale) ?? locale
+    );
+  } catch {
+    return locale;
+  }
+}
+
+export function registerLocale(definition: LocaleDefinition) {
+  const current = localeDefinitions.get(definition.locale);
+  const currentLabel =
+    current?.label && current.label !== definition.locale
+      ? current.label
+      : undefined;
+  localeDefinitions.set(definition.locale, {
+    locale: definition.locale,
+    label:
+      definition.label && definition.label !== definition.locale
+        ? definition.label
+        : currentLabel ?? getLocaleLabel(definition.locale),
+    direction:
+      definition.direction ??
+      current?.direction ??
+      getLocaleDirection(definition.locale),
+  });
+
+  if (enabledLocaleCodes.includes(definition.locale)) refreshSnapshot();
+}
+
+export function setEnabledLocales(locales: string[]) {
+  enabledLocaleCodes = [...new Set(locales.filter(Boolean))];
+  for (const locale of enabledLocaleCodes) {
+    if (!localeDefinitions.has(locale)) {
+      localeDefinitions.set(locale, {
+        locale,
+        label: getLocaleLabel(locale),
+        direction: getLocaleDirection(locale),
+      });
+    }
+  }
+  refreshSnapshot();
+}
+
+export function getLocaleDefinitions() {
+  return enabledLocaleSnapshot;
+}
+
+export function useEnabledLocales() {
+  return useSyncExternalStore(
+    subscribe,
+    getLocaleDefinitions,
+    getLocaleDefinitions
+  );
+}
+
+export function resolveSupportedLocale(locale?: string) {
+  if (!locale) return DEFAULT_LOCALE;
+
+  const exact = [...localeDefinitions.keys()].find(
+    (candidate) => candidate.toLowerCase() === locale.toLowerCase()
+  );
+  if (exact) return exact;
+
+  const language = locale.split("-")[0]?.toLowerCase();
+  return (
+    [...localeDefinitions.keys()].find(
+      (candidate) => candidate.split("-")[0]?.toLowerCase() === language
+    ) ?? DEFAULT_LOCALE
+  );
+}
+
+export function getLocaleDefinition(locale: string) {
+  return localeDefinitions.get(locale);
+}

package/registry/nocobase-i18n/locales/en-US.ts

@@ -0,0 +1,89 @@
+const enUS = {
+  starter: {
+    "shell.workspace": "AI application workspace",
+    "shell.footer.freedom": "AI builds freely.",
+    "shell.footer.reliability": "NocoBase keeps it reliable.",
+    "auth.signOut": "Sign out",
+    "auth.signingOut": "Signing out...",
+    "buttons.apply": "Apply",
+    "buttons.clear": "Clear",
+    "buttons.undo": "Undo",
+    "pages.error.title": "Page not found.",
+    "pages.error.description": "The page you're looking for does not exist.",
+    "pages.error.backHome": "Back to homepage",
+    "table.filter.text.placeholder": "Filter by...",
+    "table.filter.numeric.placeholder": "Filter by...",
+    "table.filter.combobox.placeholder": "Select...",
+    "table.filter.combobox.search": "Search...",
+    "table.filter.combobox.noResults": "Results not found.",
+    "table.filter.operator.placeholder": "Search operator...",
+    "table.filter.operator.noResults": "No operator found.",
+    "table.filter.operator.eq": "Equals",
+    "table.filter.operator.ne": "Not equals",
+    "table.filter.operator.lt": "Less than",
+    "table.filter.operator.gt": "Greater than",
+    "table.filter.operator.lte": "Less than or equal",
+    "table.filter.operator.gte": "Greater than or equal",
+    "table.filter.operator.in": "Includes in an array",
+    "table.filter.operator.nin": "Not includes in an array",
+    "table.filter.operator.ina": "Includes in an array (case sensitive)",
+    "table.filter.operator.nina": "Not includes in an array (case sensitive)",
+    "table.filter.operator.contains": "Contains",
+    "table.filter.operator.ncontains": "Not contains",
+    "table.filter.operator.containss": "Contains (case sensitive)",
+    "table.filter.operator.ncontainss": "Not contains (case sensitive)",
+    "table.filter.operator.between": "Between",
+    "table.filter.operator.nbetween": "Not between",
+    "table.filter.operator.null": "Is null",
+    "table.filter.operator.nnull": "Is not null",
+    "table.filter.operator.startswith": "Starts with",
+    "table.filter.operator.nstartswith": "Not starts with",
+    "table.filter.operator.startswiths": "Starts with (case sensitive)",
+    "table.filter.operator.nstartswiths": "Not starts with (case sensitive)",
+    "table.filter.operator.endswith": "Ends with",
+    "table.filter.operator.nendswith": "Not ends with",
+    "table.filter.operator.endswiths": "Ends with (case sensitive)",
+    "table.filter.operator.nendswiths": "Not ends with (case sensitive)",
+    "table.filter.operator.eqs": "Equals (case sensitive)",
+    "table.filter.operator.nes": "Not equals (case sensitive)",
+  },
+  "nocobase-i18n": {
+    "language.label": "Language",
+    "language.current": "Current language",
+    "language.switchError": "Unable to switch language.",
+    "navigation.group": "Localization",
+    "navigation.demo": "Internationalization",
+    "demo.title": "Internationalization",
+    "demo.description":
+      "An optional hybrid locale runtime with frontend UI resources and selected NocoBase dynamic namespaces.",
+    "demo.switcher.title": "Language switcher",
+    "demo.switcher.description":
+      "The same reusable component is also integrated into the signed-in user menu.",
+    "demo.switcher.unavailable.title": "Only one language is enabled",
+    "demo.switcher.unavailable.description":
+      "Enable another language in NocoBase system settings to display the switcher.",
+    "demo.frontend.title": "Application UI translations",
+    "demo.frontend.description":
+      "Starter and Registry components keep their interface messages in local resource files.",
+    "demo.frontend.actions": "Common actions",
+    "demo.server.title": "NocoBase metadata translations",
+    "demo.server.description":
+      "Collection and field labels are loaded from dynamic server namespaces such as lm-collections.",
+    "demo.currentLocale": "Current locale: {{locale}}",
+    "demo.prompt.title": "Prompt generator",
+    "demo.prompt.description":
+      "Describe a complete multilingual application scene and generate an implementation prompt.",
+    "demo.prompt.settings": "Scene settings",
+    "demo.prompt.scene": "Application scene",
+    "demo.prompt.languages": "Languages",
+    "demo.prompt.copy": "Copy prompt",
+    "demo.prompt.copied": "Copied",
+    "demo.prompt.copyError":
+      "Clipboard access failed. Select the prompt and copy it manually.",
+    "demo.prompt.output": "Generated prompt",
+    "demo.prompt.outputDescription":
+      "Updates as you change the scene and language requirements.",
+  },
+} as const;
+
+export default enUS;