@nocobase/portal-template-default 1.0.0 → 1.0.2

package/src/components/data-table/data-table.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import type { HttpError, BaseRecord } from "@refinedev/core";
+import { useTranslate, type HttpError, type BaseRecord } from "@refinedev/core";
 import type { UseTableReturnType } from "@refinedev/react-table";
-import type { Column } from "@tanstack/react-table";
 import { flexRender } from "@tanstack/react-table";
 import { Loader2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
@@ -16,6 +15,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { DataTablePagination } from "@/components/data-table/data-table-pagination";
+import { getCommonStyles } from "@/components/data-table/data-table-styles";
 import { cn } from "@/lib/utils";
 
 type DataTableProps<TData extends BaseRecord> = {
@@ -25,6 +25,7 @@ type DataTableProps<TData extends BaseRecord> = {
 export function DataTable<TData extends BaseRecord>({
   table,
 }: DataTableProps<TData>) {
+  const translate = useTranslate();
   const {
     reactTable: { getHeaderGroups, getRowModel, getAllColumns },
     refineCore: {
@@ -198,6 +199,11 @@ export function DataTable<TData extends BaseRecord>({
               <DataTableNoData
                 isOverflowing={isOverflowing}
                 columnsLength={columns.length}
+                title={translate("table.empty.title", "No data to display")}
+                description={translate(
+                  "table.empty.description",
+                  "This table is empty for the time being."
+                )}
               />
             )}
           </TableBody>
@@ -220,9 +226,13 @@ export function DataTable<TData extends BaseRecord>({
 function DataTableNoData({
   isOverflowing,
   columnsLength,
+  title,
+  description,
 }: {
   isOverflowing: { horizontal: boolean; vertical: boolean };
   columnsLength: number;
+  title: string;
+  description: string;
 }) {
   return (
     <TableRow className="hover:bg-transparent">
@@ -252,10 +262,10 @@ function DataTableNoData({
           }}
         >
           <div className={cn("text-lg", "font-semibold", "text-foreground")}>
-            No data to display
+            {title}
           </div>
           <div className={cn("text-sm", "text-muted-foreground")}>
-            This table is empty for the time being.
+            {description}
           </div>
         </div>
       </TableCell>
@@ -263,59 +273,4 @@ function DataTableNoData({
   );
 }
 
-export function getCommonStyles<TData>({
-  column,
-  isOverflowing,
-}: {
-  column: Column<TData>;
-  isOverflowing: {
-    horizontal: boolean;
-    vertical: boolean;
-  };
-}): React.CSSProperties {
-  const isPinned = column.getIsPinned();
-  const isLastLeftPinnedColumn =
-    isPinned === "left" && column.getIsLastColumn("left");
-  const isFirstRightPinnedColumn =
-    isPinned === "right" && column.getIsFirstColumn("right");
-
-  return {
-    boxShadow:
-      isOverflowing.horizontal && isLastLeftPinnedColumn
-        ? "-4px 0 4px -4px var(--border) inset"
-        : isOverflowing.horizontal && isFirstRightPinnedColumn
-        ? "4px 0 4px -4px var(--border) inset"
-        : undefined,
-    left:
-      isOverflowing.horizontal && isPinned === "left"
-        ? `${column.getStart("left")}px`
-        : undefined,
-    right:
-      isOverflowing.horizontal && isPinned === "right"
-        ? `${column.getAfter("right")}px`
-        : undefined,
-    opacity: 1,
-    position: isOverflowing.horizontal && isPinned ? "sticky" : "relative",
-    background: isOverflowing.horizontal && isPinned ? "var(--background)" : "",
-    borderTopRightRadius:
-      isOverflowing.horizontal && isPinned === "right"
-        ? "var(--radius)"
-        : undefined,
-    borderBottomRightRadius:
-      isOverflowing.horizontal && isPinned === "right"
-        ? "var(--radius)"
-        : undefined,
-    borderTopLeftRadius:
-      isOverflowing.horizontal && isPinned === "left"
-        ? "var(--radius)"
-        : undefined,
-    borderBottomLeftRadius:
-      isOverflowing.horizontal && isPinned === "left"
-        ? "var(--radius)"
-        : undefined,
-    width: column.getSize(),
-    zIndex: isOverflowing.horizontal && isPinned ? 1 : 0,
-  };
-}
-
 DataTable.displayName = "DataTable";

package/src/components/resources/resource-label.ts

@@ -0,0 +1,101 @@
+import {
+  type IResourceItem,
+  useTranslate,
+  useUserFriendlyName,
+} from "@refinedev/core";
+
+import {
+  parseTranslationExpression,
+  type TranslationOptions,
+} from "@/lib/i18n";
+
+export type ResourceLabelForm = "plural" | "singular";
+
+type ResourceLabelMeta = {
+  i18nKey?: string;
+  i18nOptions?: TranslationOptions;
+  i18nSingularKey?: string;
+  label?: unknown;
+  singularLabel?: unknown;
+};
+
+type Translate = ReturnType<typeof useTranslate>;
+type UserFriendlyName = ReturnType<typeof useUserFriendlyName>;
+
+function translateWithFallback(
+  translate: Translate,
+  key: string,
+  fallback: string,
+  options?: TranslationOptions
+) {
+  const translated = options
+    ? translate(key, options, fallback)
+    : translate(key, fallback);
+
+  return !translated || translated === key ? fallback : translated;
+}
+
+function resolveExplicitLabel(value: unknown, translate: Translate) {
+  if (typeof value !== "string") {
+    return value == null ? undefined : String(value);
+  }
+
+  const expression = parseTranslationExpression(value);
+  if (!expression) return value;
+
+  const fallback = expression.options?.defaultValue ?? expression.key;
+  return translateWithFallback(
+    translate,
+    expression.key,
+    fallback,
+    expression.options
+  );
+}
+
+export function getResourceLabel(
+  resource: IResourceItem | undefined,
+  form: ResourceLabelForm,
+  translate: Translate,
+  getUserFriendlyName: UserFriendlyName,
+  fallbackIdentifier?: string
+) {
+  const meta = resource?.meta as ResourceLabelMeta | undefined;
+  const topLevelLabel = (
+    resource as (IResourceItem & { label?: unknown }) | undefined
+  )?.label;
+  const explicitLabel =
+    form === "singular"
+      ? meta?.singularLabel ?? meta?.label ?? topLevelLabel
+      : meta?.label ?? topLevelLabel;
+  const fallback =
+    resolveExplicitLabel(explicitLabel, translate) ??
+    getUserFriendlyName(
+      fallbackIdentifier ?? resource?.identifier ?? resource?.name ?? "",
+      form
+    );
+  const i18nKey =
+    form === "singular"
+      ? meta?.i18nSingularKey ?? meta?.i18nKey
+      : meta?.i18nKey;
+
+  return i18nKey
+    ? translateWithFallback(translate, i18nKey, fallback, meta?.i18nOptions)
+    : fallback;
+}
+
+export function useResourceLabel(
+  resource: IResourceItem | undefined,
+  form: ResourceLabelForm,
+  fallbackIdentifier?: string
+) {
+  const translate = useTranslate();
+  const getUserFriendlyName = useUserFriendlyName();
+
+  return getResourceLabel(
+    resource,
+    form,
+    translate,
+    getUserFriendlyName,
+    fallbackIdentifier
+  );
+}

package/src/components/resources/views/create-view.tsx

@@ -1,15 +1,12 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import {
-  useBack,
-  useResourceParams,
-  useUserFriendlyName,
-} from "@refinedev/core";
+import { useBack, useResourceParams, useTranslate } from "@refinedev/core";
 import type { PropsWithChildren } from "react";
 import { Breadcrumb } from "@/components/app-shell/breadcrumb";
 import { Button } from "@/components/ui/button";
 import { ArrowLeftIcon } from "lucide-react";
+import { useResourceLabel } from "@/components/resources/resource-label";
 
 type CreateViewProps = PropsWithChildren<{
   className?: string;
@@ -38,18 +35,25 @@ export const CreateViewHeader = ({
   headerClassName,
 }: CreateHeaderProps) => {
   const back = useBack();
-
-  const getUserFriendlyName = useUserFriendlyName();
+  const translate = useTranslate();
 
   const { resource, identifier } = useResourceParams({
     resource: resourceFromProps,
   });
 
-  const resourceTitle = getUserFriendlyName(
-    resource?.meta?.label ?? identifier ?? resource?.name,
-    "singular"
+  const resourceTitle = useResourceLabel(resource, "singular", identifier);
+  const title =
+    titleFromProps ??
+    translate(
+      "views.create.title",
+      { resource: resourceTitle },
+      `Create ${resourceTitle}`
+    );
+  const description = translate(
+    "views.create.description",
+    { resource: resourceTitle.toLocaleLowerCase() },
+    `Add a new ${resourceTitle.toLocaleLowerCase()} to your NocoBase workspace.`
   );
-  const title = titleFromProps ?? `Create ${resourceTitle}`;
 
   return (
     <div className={cn("flex flex-col", "gap-3", wrapperClassName)}>
@@ -62,6 +66,7 @@ export const CreateViewHeader = ({
           size="icon"
           className="mt-0.5 rounded-lg"
           onClick={back}
+          aria-label={translate("buttons.cancel", "Cancel")}
         >
           <ArrowLeftIcon className="h-4 w-4" />
         </Button>
@@ -69,9 +74,7 @@ export const CreateViewHeader = ({
           <h2 className="text-3xl font-semibold tracking-[-0.035em]">
             {title}
           </h2>
-          <p className="mt-2 text-sm text-muted-foreground">
-            Add a new {resourceTitle.toLowerCase()} to your NocoBase workspace.
-          </p>
+          <p className="mt-2 text-sm text-muted-foreground">{description}</p>
         </div>
       </div>
     </div>

package/src/components/resources/views/edit-view.tsx

@@ -1,16 +1,13 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import {
-  useBack,
-  useResourceParams,
-  useUserFriendlyName,
-} from "@refinedev/core";
+import { useBack, useResourceParams, useTranslate } from "@refinedev/core";
 import type { PropsWithChildren } from "react";
 import { Breadcrumb } from "@/components/app-shell/breadcrumb";
 import { Button } from "@/components/ui/button";
 import { RefreshButton } from "@/components/resources/buttons/refresh";
 import { ArrowLeftIcon } from "lucide-react";
+import { useResourceLabel } from "@/components/resources/resource-label";
 
 type EditViewProps = PropsWithChildren<{
   className?: string;
@@ -41,8 +38,7 @@ export const EditViewHeader = ({
   headerClassName,
 }: EditViewHeaderProps) => {
   const back = useBack();
-
-  const getUserFriendlyName = useUserFriendlyName();
+  const translate = useTranslate();
 
   const { resource, identifier } = useResourceParams({
     resource: resourceFromProps,
@@ -51,11 +47,19 @@ export const EditViewHeader = ({
 
   const resourceName = resource?.name ?? identifier;
 
-  const resourceTitle = getUserFriendlyName(
-    resource?.meta?.label ?? identifier ?? resource?.name,
-    "singular"
+  const resourceTitle = useResourceLabel(resource, "singular", identifier);
+  const title =
+    titleFromProps ??
+    translate(
+      "views.edit.title",
+      { resource: resourceTitle },
+      `Edit ${resourceTitle}`
+    );
+  const description = translate(
+    "views.edit.description",
+    { resource: resourceTitle.toLocaleLowerCase() },
+    `Update this ${resourceTitle.toLocaleLowerCase()} while NocoBase keeps the data consistent.`
   );
-  const title = titleFromProps ?? `Edit ${resourceTitle}`;
 
   return (
     <div className={cn("flex flex-col", "gap-3", wrapperClassName)}>
@@ -74,6 +78,7 @@ export const EditViewHeader = ({
             size="icon"
             className="mt-0.5 rounded-lg"
             onClick={back}
+            aria-label={translate("buttons.cancel", "Cancel")}
           >
             <ArrowLeftIcon className="h-4 w-4" />
           </Button>
@@ -81,10 +86,7 @@ export const EditViewHeader = ({
             <h2 className="text-3xl font-semibold tracking-[-0.035em]">
               {title}
             </h2>
-            <p className="mt-2 text-sm text-muted-foreground">
-              Update this {resourceTitle.toLowerCase()} while NocoBase keeps
-              the data consistent.
-            </p>
+            <p className="mt-2 text-sm text-muted-foreground">{description}</p>
           </div>
         </div>
 

package/src/components/resources/views/list-view.tsx

@@ -2,9 +2,11 @@
 
 import type { PropsWithChildren } from "react";
 
-import { useResourceParams, useUserFriendlyName } from "@refinedev/core";
+import { useResourceParams, useTranslate } from "@refinedev/core";
 import { Breadcrumb } from "@/components/app-shell/breadcrumb";
 import { CreateButton } from "@/components/resources/buttons/create";
+import { useResourceLabel } from "@/components/resources/resource-label";
+import { resolveTranslatableText, type TranslationOptions } from "@/lib/i18n";
 import { cn } from "@/lib/utils";
 
 type ListViewProps = PropsWithChildren<{
@@ -35,22 +37,30 @@ export const ListViewHeader = ({
   wrapperClassName,
   headerClassName,
 }: ListHeaderProps) => {
-  const getUserFriendlyName = useUserFriendlyName();
-
   const { resource, identifier } = useResourceParams({
     resource: resourceFromProps,
   });
+  const translate = useTranslate();
   const resourceName = identifier ?? resource?.name;
 
   const isCreateButtonVisible = canCreate ?? !!resource?.create;
 
-  const title =
-    titleFromProps ??
-    getUserFriendlyName(
-      resource?.meta?.label ?? identifier ?? resource?.name,
-      "plural"
-    );
-  const description = resource?.meta?.description as string | undefined;
+  const resourceTitle = useResourceLabel(resource, "plural", identifier);
+  const title = titleFromProps ?? resourceTitle;
+  const meta = resource?.meta as
+    | {
+        description?: string;
+        descriptionI18nKey?: string;
+        i18nOptions?: TranslationOptions;
+      }
+    | undefined;
+  const description = meta?.descriptionI18nKey
+    ? translate(
+        meta.descriptionI18nKey,
+        meta.i18nOptions,
+        meta.description ?? meta.descriptionI18nKey
+      )
+    : resolveTranslatableText(meta?.description);
 
   return (
     <div className={cn("flex flex-col", "gap-3", wrapperClassName)}>

package/src/components/resources/views/show-view.tsx

@@ -3,25 +3,29 @@
 import type { PropsWithChildren } from "react";
 
 import { ArrowLeftIcon } from "lucide-react";
-import {
-  useBack,
-  useResourceParams,
-  useUserFriendlyName,
-} from "@refinedev/core";
+import { useBack, useResourceParams, useTranslate } from "@refinedev/core";
 import { Breadcrumb } from "@/components/app-shell/breadcrumb";
 import { Button } from "@/components/ui/button";
 import { RefreshButton } from "@/components/resources/buttons/refresh";
 import { cn } from "@/lib/utils";
 import { EditButton } from "../buttons/edit";
+import { useResourceLabel } from "@/components/resources/resource-label";
 
 type ShowViewProps = PropsWithChildren<{
   className?: string;
+  resource?: string;
+  title?: string;
 }>;
 
-export function ShowView({ children, className }: ShowViewProps) {
+export function ShowView({
+  children,
+  className,
+  resource,
+  title,
+}: ShowViewProps) {
   return (
     <div className={cn("flex flex-col", "gap-6", className)}>
-      <ShowViewHeader />
+      <ShowViewHeader resource={resource} title={title} />
       {children}
     </div>
   );
@@ -41,8 +45,7 @@ export const ShowViewHeader = ({
   headerClassName,
 }: ShowViewHeaderProps) => {
   const back = useBack();
-
-  const getUserFriendlyName = useUserFriendlyName();
+  const translate = useTranslate();
 
   const { resource, identifier } = useResourceParams({
     resource: resourceFromProps,
@@ -51,12 +54,12 @@ export const ShowViewHeader = ({
 
   const resourceName = resource?.name ?? identifier;
 
-  const title =
-    titleFromProps ??
-    getUserFriendlyName(
-      resource?.meta?.label ?? identifier ?? resource?.name,
-      "singular"
-    );
+  const resourceTitle = useResourceLabel(resource, "singular", identifier);
+  const title = titleFromProps ?? resourceTitle;
+  const description = translate(
+    "views.show.description",
+    "Review the record and its NocoBase-managed data."
+  );
 
   return (
     <div className={cn("flex flex-col", "gap-3", wrapperClassName)}>
@@ -75,6 +78,7 @@ export const ShowViewHeader = ({
             size="icon"
             className="mt-0.5 rounded-lg"
             onClick={back}
+            aria-label={translate("buttons.cancel", "Cancel")}
           >
             <ArrowLeftIcon className="h-4 w-4" />
           </Button>
@@ -82,9 +86,7 @@ export const ShowViewHeader = ({
             <h2 className="text-3xl font-semibold tracking-[-0.035em]">
               {title}
             </h2>
-            <p className="mt-2 text-sm text-muted-foreground">
-              Review the record and its NocoBase-managed data.
-            </p>
+            <p className="mt-2 text-sm text-muted-foreground">{description}</p>
           </div>
         </div>
 

package/src/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 
+import "./locales";
 import App from "./App";
 
 const container = document.getElementById("root") as HTMLElement;
@@ -12,6 +13,4 @@ const root = createRoot(container);
 //   </React.StrictMode>
 // );
 
-root.render(
-  <App />
-);
+root.render(<App />);

package/src/lib/i18n.ts

@@ -0,0 +1,161 @@
+export type TranslationOptions = Record<string, unknown> & {
+  defaultValue?: string;
+  ns?: string | string[];
+};
+
+export type TranslationResolver = (
+  key: string,
+  options?: TranslationOptions,
+  defaultMessage?: string
+) => string;
+
+export type TranslationExpression = {
+  key: string;
+  options?: TranslationOptions;
+};
+
+export type TranslationResource = Record<string, string | number | boolean>;
+
+export type TranslationResourceBundle = Record<string, TranslationResource>;
+
+type TranslationResourceListener = (
+  namespace: string,
+  resources: TranslationResourceBundle
+) => void;
+
+let translationResolver: TranslationResolver | undefined;
+const translationResources = new Map<string, TranslationResourceBundle>();
+const translationResourceListeners = new Set<TranslationResourceListener>();
+
+const quotedValuePattern = `(?:"(?:\\\\.|[^"\\\\])*"|'(?:\\\\.|[^'\\\\])*')`;
+const translationExpressionPattern = new RegExp(
+  `^\\s*\\{\\{\\s*t\\(\\s*(${quotedValuePattern})\\s*(?:,\\s*(\\{[\\s\\S]*\\}))?\\s*\\)\\s*\\}\\}\\s*$`
+);
+
+function decodeQuotedValue(value: string) {
+  if (value.startsWith('"')) {
+    try {
+      return JSON.parse(value) as string;
+    } catch {
+      return value.slice(1, -1);
+    }
+  }
+
+  return value
+    .slice(1, -1)
+    .replace(/\\'/g, "'")
+    .replace(/\\"/g, '"')
+    .replace(/\\n/g, "\n")
+    .replace(/\\r/g, "\r")
+    .replace(/\\t/g, "\t")
+    .replace(/\\\\/g, "\\");
+}
+
+function parsePrimitive(value: string): unknown {
+  const normalized = value.trim();
+  if (normalized.startsWith('"') || normalized.startsWith("'")) {
+    return decodeQuotedValue(normalized);
+  }
+  if (normalized === "true") return true;
+  if (normalized === "false") return false;
+  if (normalized === "null") return null;
+  if (/^-?\d+(?:\.\d+)?$/.test(normalized)) return Number(normalized);
+  return undefined;
+}
+
+function parseOptions(source?: string): TranslationOptions | undefined {
+  if (!source) return undefined;
+
+  const options: TranslationOptions = {};
+  const propertyPattern = new RegExp(
+    `([A-Za-z_$][\\w$]*)\\s*:\\s*(${quotedValuePattern}|-?\\d+(?:\\.\\d+)?|true|false|null)`,
+    "g"
+  );
+
+  for (const match of source.matchAll(propertyPattern)) {
+    const value = parsePrimitive(match[2]);
+    if (typeof value !== "undefined") options[match[1]] = value;
+  }
+
+  const namespaceArray = source.match(/\bns\s*:\s*\[([^\]]*)\]/);
+  if (namespaceArray) {
+    const namespaces = [
+      ...namespaceArray[1].matchAll(new RegExp(quotedValuePattern, "g")),
+    ].map((match) => decodeQuotedValue(match[0]));
+    if (namespaces.length) options.ns = namespaces;
+  }
+
+  return Object.keys(options).length ? options : undefined;
+}
+
+export function parseTranslationExpression(
+  value: string
+): TranslationExpression | undefined {
+  const match = translationExpressionPattern.exec(value);
+  if (!match) return undefined;
+
+  return {
+    key: decodeQuotedValue(match[1]),
+    options: parseOptions(match[2]),
+  };
+}
+
+export function setTranslationResolver(resolver?: TranslationResolver) {
+  translationResolver = resolver;
+  return () => {
+    if (translationResolver === resolver) translationResolver = undefined;
+  };
+}
+
+export function registerTranslationResources(
+  namespace: string,
+  resources: TranslationResourceBundle
+) {
+  const current = translationResources.get(namespace) ?? {};
+  const merged = Object.fromEntries(
+    [...new Set([...Object.keys(current), ...Object.keys(resources)])].map(
+      (locale) => [
+        locale,
+        {
+          ...(current[locale] ?? {}),
+          ...(resources[locale] ?? {}),
+        },
+      ]
+    )
+  );
+
+  translationResources.set(namespace, merged);
+  translationResourceListeners.forEach((listener) =>
+    listener(namespace, resources)
+  );
+}
+
+export function getTranslationResources() {
+  return [...translationResources.entries()];
+}
+
+export function subscribeTranslationResources(
+  listener: TranslationResourceListener
+) {
+  translationResourceListeners.add(listener);
+  return () => translationResourceListeners.delete(listener);
+}
+
+export function resolveTranslatableText(
+  value: unknown,
+  options?: TranslationOptions
+): string {
+  if (typeof value !== "string") return value == null ? "" : String(value);
+
+  const expression = parseTranslationExpression(value);
+  if (!expression) {
+    return translationResolver && options
+      ? translationResolver(value, options, value)
+      : value;
+  }
+
+  const defaultMessage = expression.options?.defaultValue ?? expression.key;
+  return translationResolver
+    ? translationResolver(expression.key, expression.options, defaultMessage)
+    : defaultMessage;
+}