From 2ae3f9999d15957100e683fea1b91a098602f12b Mon Sep 17 00:00:00 2001 From: CharlesChen Date: Thu, 26 Mar 2026 09:19:51 +0800 Subject: [PATCH 1/4] docs(i18n): translate Storybook docs and UI strings to English - Replace Chinese copy in Getting Started MDX, foundation stories, and component stories. - Update default aria-labels and related comments in Sidebar, Tabs, Breadcrumb, DatePicker, Pagination, Switch, and AlertDialog. - Align Button and orbie icon map comments with English; clarify Vite config and Storybook manager theme comment. Made-with: Cursor --- .storybook/manager.ts | 3 ++- src/components/AlertDialog/AlertDialog.tsx | 4 ++-- src/components/Breadcrumb/Breadcrumb.tsx | 6 +++--- src/components/Button/Button.tsx | 8 ++++---- src/components/DatePicker/DatePicker.tsx | 8 ++++---- src/components/DatePicker/calendarGrid.ts | 2 +- src/components/Pagination/Pagination.tsx | 6 +++--- src/components/Sidebar/Sidebar.tsx | 2 +- src/components/Switch/Switch.tsx | 2 +- src/components/Tabs/Tabs.tsx | 2 +- src/icons/orbieIconMap.tsx | 2 +- stories/Components/AlertDialog.stories.tsx | 4 ++-- stories/Components/Badge.stories.tsx | 4 ++-- stories/Components/Breadcrumb.stories.tsx | 8 ++++---- stories/Components/Button.stories.tsx | 2 +- stories/Components/DatePicker.stories.tsx | 2 +- stories/Foundations/Colors.stories.tsx | 6 +++--- stories/Foundations/Icons.stories.tsx | 7 ++++--- stories/GettingStarted/Installing.mdx | 14 +++++++------- stories/GettingStarted/Welcome.mdx | 20 ++++++++++---------- vite.config.ts | 2 +- 21 files changed, 58 insertions(+), 56 deletions(-) diff --git a/.storybook/manager.ts b/.storybook/manager.ts index d531d40..cb8a07e 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -2,7 +2,8 @@ import { addons } from '@storybook/manager-api'; import { create } from '@storybook/theming/create'; /** - * Strapi Design System 使用清晰的品牌色與文件風格；此處採相近的「設計系統文件」基調（亮色、品牌主色）。 + * Strapi Design System uses crisp brand colors and a documentation-style layout; here we adopt a similar + * "design system documentation" look (light theme, brand primary color). * @see https://design-system.strapi.io/ */ const theme = create({ diff --git a/src/components/AlertDialog/AlertDialog.tsx b/src/components/AlertDialog/AlertDialog.tsx index a0b005e..74a56ad 100644 --- a/src/components/AlertDialog/AlertDialog.tsx +++ b/src/components/AlertDialog/AlertDialog.tsx @@ -2,7 +2,7 @@ import type { ReactNode } from 'react'; import { useId } from 'react'; import './AlertDialog.css'; -/** Figma `Type=Desktop`（9:8006）與 `Type=Mobile`（9:7999）。 */ +/** Figma `Type=Desktop` (9:8006) and `Type=Mobile` (9:7999). */ export type AlertDialogLayout = 'desktop' | 'mobile'; export type AlertDialogAction = { @@ -18,7 +18,7 @@ export type AlertDialogProps = { secondaryAction: AlertDialogAction; primaryAction: AlertDialogAction; className?: string; - /** 設為 true 時加上 `aria-modal`（外層需搭配遮罩與 focus trap 才算完整 modal）。 */ + /** When set to true, adds `aria-modal` (the outer scope should include an overlay and focus trap for a complete modal). */ modal?: boolean; }; diff --git a/src/components/Breadcrumb/Breadcrumb.tsx b/src/components/Breadcrumb/Breadcrumb.tsx index b3cd5c4..301201c 100644 --- a/src/components/Breadcrumb/Breadcrumb.tsx +++ b/src/components/Breadcrumb/Breadcrumb.tsx @@ -8,7 +8,7 @@ export type BreadcrumbEntry = export type BreadcrumbProps = { items: BreadcrumbEntry[]; - /** `nav` 的 `aria-label` */ + /** `nav` aria-label */ ariaLabel?: string; className?: string; }; @@ -20,7 +20,7 @@ const iconProps = { focusable: false as const, }; -export function Breadcrumb({ items, ariaLabel = '麵包屑', className }: BreadcrumbProps) { +export function Breadcrumb({ items, ariaLabel = 'Breadcrumb', className }: BreadcrumbProps) { const rootClass = ['sds-breadcrumb', className].filter(Boolean).join(' '); return ( @@ -42,7 +42,7 @@ export function Breadcrumb({ items, ariaLabel = '麵包屑', className }: Breadc function BreadcrumbSegment({ item }: { item: BreadcrumbEntry }) { if ('ellipsis' in item && item.ellipsis) { return ( - + ); diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index fdda4f0..4fa2d42 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -3,7 +3,7 @@ import './Button.css'; /** * Orbie Button page — Primary / Secondary (solid gray) / Outline / Ghost / Ghost Muted / Destructive. - * `danger` 為 `destructive` 別名（向後相容）。 + * `danger` is an alias for `destructive` (backwards compatible). */ export type ButtonVariant = | 'primary' @@ -14,16 +14,16 @@ export type ButtonVariant = | 'destructive' | 'danger'; -/** `md` = Regular（min-height 36）；`sm` = Small（min-height 32）。 */ +/** `md` = Regular (min-height 36); `sm` = Small (min-height 32). */ export type ButtonSize = 'sm' | 'md'; export type ButtonProps = { children: ReactNode; variant?: ButtonVariant; size?: ButtonSize; - /** 左側圖示（設計稿約 13.25px） */ + /** Left icon (about 13.25px in the design). */ iconLeft?: ReactNode; - /** 右側圖示 */ + /** Right icon. */ iconRight?: ReactNode; } & Omit, 'children'>; diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx index be4ac65..a14ea18 100644 --- a/src/components/DatePicker/DatePicker.tsx +++ b/src/components/DatePicker/DatePicker.tsx @@ -12,7 +12,7 @@ import './DatePicker.css'; const WEEKDAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] as const; export type DatePickerCalendarProps = { - /** 當月任意一天（僅年月有效） */ + /** Any day in the current month (only year/month are used). */ month: Date; selected: Date | null; onSelect: (date: Date) => void; @@ -40,11 +40,11 @@ export function DatePickerCalendar({ return (
-

{title}

-
@@ -193,7 +193,7 @@ export function DatePicker({ {open ? ( -
+
void; className?: string; boundaryCount?: number; siblingCount?: number; - /** 是否顯示前後的標籤（Previous/Next） */ + /** Whether to show the Previous/Next labels. */ showNavLabel?: boolean; }; diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx index 1fad6ce..259611c 100644 --- a/src/components/Sidebar/Sidebar.tsx +++ b/src/components/Sidebar/Sidebar.tsx @@ -29,7 +29,7 @@ export type SidebarProps = { onItemClick?: (item: SidebarItem) => void; }; -export function Sidebar({ collapsed = false, groups, ariaLabel = '側欄', className, onItemClick }: SidebarProps) { +export function Sidebar({ collapsed = false, groups, ariaLabel = 'Sidebar', className, onItemClick }: SidebarProps) { const rootClass = ['sds-sidebar', collapsed ? 'sds-sidebar--collapsed' : 'sds-sidebar--expanded', className] .filter(Boolean) .join(' '); diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx index e710f3f..902976a 100644 --- a/src/components/Switch/Switch.tsx +++ b/src/components/Switch/Switch.tsx @@ -5,7 +5,7 @@ export type SwitchProps = { onCheckedChange: (checked: boolean) => void; disabled?: boolean; className?: string; - /** 用於 aria-label；若你外層有