@nocobase/portal-template-default 1.0.9 → 1.0.11

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

@@ -1,209 +0,0 @@
-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" },
-            "Optional NocoBase server translations and language controls built on the Starter's internationalization runtime."
-          )}
-        </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" },
-            "The Starter provides the runtime while application and Registry components keep their 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

@@ -1,132 +0,0 @@
-import { useTranslate } from "@refinedev/core";
-import { ChevronDown, Sparkles } from "lucide-react";
-import { useMemo, useState } from "react";
-
-import { PromptOutput } from "@/components/demo/prompt-output";
-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 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 Starter's @/providers/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.
-- Reuse the Starter's shared system settings instead of requesting systemSettings:get again.
-- Keep Starter and Registry UI resources local. Use app:getLang only for registered dynamic server namespaces such as lm-collections when the NocoBase i18n Registry is installed.
-- 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>
-        <PromptOutput
-          title={t(
-            "demo.prompt.output",
-            { ns: "nocobase-i18n" },
-            "Generated prompt"
-          )}
-          description={t(
-            "demo.prompt.outputDescription",
-            { ns: "nocobase-i18n" },
-            "Updates as you change the scene and language requirements."
-          )}
-          prompt={prompt}
-          copyLabel={t(
-            "demo.prompt.copy",
-            { ns: "nocobase-i18n" },
-            "Copy prompt"
-          )}
-          copiedLabel={t(
-            "demo.prompt.copied",
-            { ns: "nocobase-i18n" },
-            "Copied"
-          )}
-          copyErrorLabel={t(
-            "demo.prompt.copyError",
-            { ns: "nocobase-i18n" },
-            "Clipboard access failed. Select the prompt and copy it manually."
-          )}
-        />
-      </div>
-    </details>
-  );
-}

package/registry/nocobase-i18n/extension.tsx

@@ -1,45 +0,0 @@
-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 "./locales";
-import { NocoBaseI18nBootstrap } from "./provider";
-
-const I18nDemoPage = lazy(() =>
-  import("./demo").then((module) => ({ default: module.I18nDemoPage }))
-);
-
-const nocobaseI18nExtension: AppExtension = {
-  id: "nocobase-i18n",
-  Provider: NocoBaseI18nBootstrap,
-  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/index.ts

@@ -1,7 +0,0 @@
-export * from "./components";
-export * from "./provider";
-export * from "./server-resources";
-export {
-  registerLocaleResources,
-  useEnabledLocales,
-} from "@/providers/i18n";

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

@@ -1,39 +0,0 @@
-const enUS = {
-    "language.label": "Language",
-    "language.current": "Current language",
-    "language.switchError": "Unable to switch language.",
-    "navigation.group": "Localization",
-    "navigation.demo": "Internationalization",
-    "demo.title": "Internationalization",
-    "demo.description":
-      "Optional NocoBase server translations and language controls built on the Starter's internationalization runtime.",
-    "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":
-      "The Starter provides the runtime while application and Registry components keep their 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;

package/registry/nocobase-i18n/locales/index.ts

@@ -1,8 +0,0 @@
-import { registerLocaleResources } from "@/providers/i18n";
-import enUS from "./en-US";
-import zhCN from "./zh-CN";
-
-registerLocaleResources("nocobase-i18n", {
-  "en-US": enUS,
-  "zh-CN": zhCN,
-});

package/registry/nocobase-i18n/locales/zh-CN.ts

@@ -1,35 +0,0 @@
-const zhCN = {
-    "language.label": "语言",
-    "language.current": "当前语言",
-    "language.switchError": "无法切换语言。",
-    "navigation.group": "本地化",
-    "navigation.demo": "国际化",
-    "demo.title": "国际化",
-    "demo.description":
-      "基于 Starter 国际化运行时的可选 NocoBase 服务端翻译与语言切换能力。",
-    "demo.switcher.title": "语言切换器",
-    "demo.switcher.description": "同一个可复用组件也会集成到登录用户菜单中。",
-    "demo.switcher.unavailable.title": "当前仅启用一种语言",
-    "demo.switcher.unavailable.description":
-      "请在 NocoBase 系统设置中启用其他语言，语言切换器才会显示。",
-    "demo.frontend.title": "应用 UI 文案翻译",
-    "demo.frontend.description":
-      "Starter 提供运行时，应用和 Registry 组件分别维护自己的本地语言资源。",
-    "demo.frontend.actions": "常用操作",
-    "demo.server.title": "NocoBase 元数据翻译",
-    "demo.server.description":
-      "数据表和字段名称从 lm-collections 等服务端动态 namespace 加载。",
-    "demo.currentLocale": "当前语言：{{locale}}",
-    "demo.prompt.title": "提示词生成器",
-    "demo.prompt.description": "描述完整的多语言应用场景并生成实现提示词。",
-    "demo.prompt.settings": "场景设置",
-    "demo.prompt.scene": "应用场景",
-    "demo.prompt.languages": "语言",
-    "demo.prompt.copy": "复制提示词",
-    "demo.prompt.copied": "已复制",
-    "demo.prompt.copyError": "无法访问剪贴板，请手动选中并复制提示词。",
-    "demo.prompt.output": "生成的提示词",
-    "demo.prompt.outputDescription": "修改场景和语言要求时会实时更新。",
-} as const;
-
-export default zhCN;

package/registry/nocobase-i18n/provider.tsx

@@ -1,44 +0,0 @@
-import { useEffect, useState, type PropsWithChildren } from "react";
-
-import { LoadingState } from "@/components/app-shell/loading-state";
-import { nocobaseClient } from "@/lib/nocobase/client";
-import { setLocalePersistence } from "@/providers/i18n";
-import { useSystemSettings } from "@/providers/system-settings";
-import { loadServerLocaleResources } from "./server-resources";
-
-export function NocoBaseI18nBootstrap({ children }: PropsWithChildren) {
-  const { settings } = useSystemSettings();
-  const [ready, setReady] = useState(false);
-
-  useEffect(
-    () =>
-      setLocalePersistence(async (locale) => {
-        if (!nocobaseClient.getToken()) return;
-        await nocobaseClient.action("users", "updateLang", {
-          method: "POST",
-          body: { appLang: locale },
-        });
-      }),
-    []
-  );
-
-  useEffect(() => {
-    let active = true;
-    void loadServerLocaleResources(settings)
-      .catch((error) => {
-        console.warn("Unable to load NocoBase locale resources", error);
-      })
-      .finally(() => {
-        if (active) setReady(true);
-      });
-    return () => {
-      active = false;
-    };
-  }, [settings]);
-
-  if (!ready) {
-    return <LoadingState className="min-h-80" />;
-  }
-
-  return children;
-}

package/registry/nocobase-i18n/server-resources.ts

@@ -1,166 +0,0 @@
-import { nocobaseClient } from "@/lib/nocobase/client";
-import {
-  type LocaleSystemSettings,
-  applyDocumentLocale,
-  getCurrentLocale,
-  i18n,
-  registerLocale,
-  setEnabledLocales,
-} from "@/providers/i18n";
-
-type ServerLanguagePayload = {
-  lang?: string;
-  resources?: Record<string, Record<string, string>>;
-};
-
-const serverResourceNamespaces = new Set(["lm-collections"]);
-const loadedServerResourceNamespaces = new Set<string>();
-const namespaceLoadPromises = new Map<string, Promise<void>>();
-let cachedServerResources: ServerLanguagePayload["resources"] = {};
-let serverResourcesPromise: Promise<void> | undefined;
-let bootstrapStarted = false;
-let bootstrapComplete = false;
-
-function mergeNamespace(namespace: string, locale?: string) {
-  const resource = cachedServerResources?.[namespace];
-  if (!locale || !resource) return false;
-  i18n.addResourceBundle(locale, namespace, resource, true, false);
-  loadedServerResourceNamespaces.add(namespace);
-  return true;
-}
-
-async function requestServerResources(
-  namespaces: string[],
-  requestedLocale?: string
-) {
-  const payload = await nocobaseClient.action<ServerLanguagePayload>(
-    "app",
-    "getLang",
-    {
-      method: "GET",
-      query: {
-        ...(requestedLocale ? { locale: requestedLocale } : {}),
-        ...(namespaces.length ? { ns: namespaces.join(",") } : {}),
-      },
-      includeRole: false,
-      withAclMeta: false,
-    }
-  );
-
-  cachedServerResources = {
-    ...cachedServerResources,
-    ...payload.resources,
-  };
-  for (const namespace of namespaces) {
-    mergeNamespace(namespace, payload.lang);
-    loadedServerResourceNamespaces.add(namespace);
-  }
-
-  return payload;
-}
-
-async function ensureServerResourceNamespaces(namespaces: string[]) {
-  const pending: Promise<void>[] = [];
-  const missing: string[] = [];
-
-  for (const namespace of namespaces) {
-    if (loadedServerResourceNamespaces.has(namespace)) continue;
-    if (mergeNamespace(namespace, getCurrentLocale())) continue;
-    const existing = namespaceLoadPromises.get(namespace);
-    if (existing) pending.push(existing);
-    else missing.push(namespace);
-  }
-
-  if (missing.length) {
-    const request = requestServerResources(
-      missing,
-      nocobaseClient.getStoredLocale() ?? getCurrentLocale()
-    ).then(() => undefined);
-    for (const namespace of missing) {
-      namespaceLoadPromises.set(namespace, request);
-    }
-    const cleanup = () => {
-      for (const namespace of missing) {
-        if (namespaceLoadPromises.get(namespace) === request) {
-          namespaceLoadPromises.delete(namespace);
-        }
-      }
-    };
-    void request.then(cleanup, cleanup);
-    pending.push(request);
-  }
-
-  await Promise.all(pending);
-}
-
-export function registerServerResourceNamespace(namespace: string) {
-  if (!namespace) return;
-  serverResourceNamespaces.add(namespace);
-
-  if (
-    mergeNamespace(namespace, getCurrentLocale()) ||
-    !bootstrapStarted ||
-    !bootstrapComplete
-  ) {
-    return;
-  }
-
-  void ensureServerResourceNamespaces([namespace]).catch((error) => {
-    console.warn(
-      `Unable to load NocoBase locale namespace ${namespace}`,
-      error
-    );
-  });
-}
-
-export function getServerResourceNamespaces() {
-  return [...serverResourceNamespaces];
-}
-
-export function loadServerLocaleResources(settings?: LocaleSystemSettings) {
-  if (serverResourcesPromise) return serverResourcesPromise;
-
-  bootstrapStarted = true;
-  const requestedLocale = nocobaseClient.getStoredLocale();
-  const initialNamespaces = [...serverResourceNamespaces];
-  const configuredLocales = Array.isArray(settings?.enabledLanguages)
-    ? settings.enabledLanguages
-    : [];
-  if (configuredLocales.length) setEnabledLocales(configuredLocales);
-  const languagePromise = requestServerResources(
-    initialNamespaces,
-    requestedLocale
-  );
-
-  serverResourcesPromise = languagePromise
-    .then(async (payload) => {
-      const serverLocale = payload.lang;
-
-      if (!configuredLocales.length && serverLocale) {
-        setEnabledLocales([serverLocale]);
-      }
-
-      if (serverLocale) {
-        registerLocale({ locale: serverLocale, label: serverLocale });
-        nocobaseClient.setLocale(serverLocale);
-        await i18n.changeLanguage(serverLocale);
-        applyDocumentLocale(serverLocale);
-      }
-
-      bootstrapComplete = true;
-      const lateNamespaces = [...serverResourceNamespaces].filter(
-        (namespace) => !loadedServerResourceNamespaces.has(namespace)
-      );
-      if (lateNamespaces.length) {
-        await ensureServerResourceNamespaces(lateNamespaces);
-      }
-    })
-    .catch((error) => {
-      bootstrapComplete = true;
-      if (!configuredLocales.length) setEnabledLocales([getCurrentLocale()]);
-      serverResourcesPromise = undefined;
-      throw error;
-    });
-
-  return serverResourcesPromise;
-}