Merge pull request #745 from objectstack-ai/copilot/add-app-creation-wizard

Author: hotlong

ROADMAP.md

@@ -446,17 +446,25 @@ ObjectUI is a universal Server-Driven UI (SDUI) engine built on React + Tailwind
 - [x] Disabled state support
 
 **i18n:**
-- [x] `appDesigner` section with 54 keys added to all 10 locales (en, zh, ja, de, fr, es, ar, ru, pt, ko)
+- [x] `appDesigner` section with 94 keys added to all 10 locales (en, zh, ja, de, fr, es, ar, ru, pt, ko)
+- [x] `useDesignerTranslation` safe wrapper hook with English fallback (no I18nProvider required)
+- [x] AppCreationWizard fully i18n-integrated (all labels, buttons, step names, validation messages)
+- [x] NavigationDesigner fully i18n-integrated (type badges, quick-add labels, aria-labels, preview)
+
+**UX Enhancements:**
+- [x] Cancel confirmation dialog with unsaved-changes detection
+- [x] `onSaveDraft` callback for partial progress save
+- [x] `useConfirmDialog` hook integration for cancel workflow
 
 **Testing:**
 - [x] 9 type tests (isValidAppName, wizardDraftToAppSchema, type shapes)
-- [x] 31 AppCreationWizard tests (rendering, steps 1-4, navigation, callbacks, read-only)
-- [x] 18 NavigationDesigner tests (rendering, add, remove, groups, badges, read-only)
+- [x] 41 AppCreationWizard tests (rendering, steps 1-4, navigation, callbacks, cancel confirm, save draft, i18n, read-only)
+- [x] 18 NavigationDesigner tests (rendering, add, remove, groups, badges, i18n, read-only)
 - [x] 7 EditorModeToggle tests (render, active mode, onChange, accessibility, disabled)
-- [x] 14 DashboardEditor tests (rendering, add/remove widgets, property panel, read-only)
-- [x] 10 PageCanvasEditor tests (rendering, add/remove components, property panel, read-only)
-- [x] 14 ObjectViewConfigurator tests (rendering, view type switch, column visibility, toggles, read-only)
-- [x] **Total: 103 new tests, all passing**
+- [x] 10 DashboardEditor tests (rendering, add/remove widgets, property panel, read-only)
+- [x] 9 PageCanvasEditor tests (rendering, add/remove components, property panel, read-only)
+- [x] 12 ObjectViewConfigurator tests (rendering, view type switch, column visibility, toggles, read-only)
+- [x] **Total: 165 tests across 9 files, all passing**
 
 **ComponentRegistry:**
 - [x] Registered: `app-creation-wizard`, `navigation-designer`, `dashboard-editor`, `page-canvas-editor`, `object-view-configurator`

packages/i18n/src/locales/ar.ts

@@ -191,6 +191,45 @@ const ar = {
     stripedRows: 'Striped Rows',
     bordered: 'Bordered',
     livePreview: 'Live Preview',
+    stepBasicDesc: 'الاسم والعنوان والتخطيط',
+    stepObjectsDesc: 'اختيار كائنات الأعمال',
+    stepNavigationDesc: 'بناء شجرة التنقل',
+    stepBrandingDesc: 'الشعار والألوان والأيقونة',
+    noObjectsFound: 'لم يتم العثور على كائنات.',
+    noNavItemsHint: 'لا توجد عناصر تنقل بعد. حدد كائنات في الخطوة السابقة أو أضف عناصر يدويًا.',
+    separator: 'فاصل',
+    separatorLabel: '— فاصل —',
+    newGroup: 'مجموعة جديدة',
+    newLink: 'رابط جديد',
+    saveDraft: 'حفظ المسودة',
+    cancelConfirmTitle: 'تجاهل التغييرات؟',
+    cancelConfirmMessage: 'لديك تغييرات غير محفوظة. هل أنت متأكد من الإلغاء؟',
+    confirmDiscard: 'تجاهل',
+    keepEditing: 'متابعة التحرير',
+    navNoItems: 'لا توجد عناصر تنقل. انقر على الأزرار أعلاه لإضافة عناصر.',
+    navNoPreviewItems: 'لا توجد عناصر',
+    navLivePreview: 'معاينة مباشرة',
+    navCollapseGroup: 'طي المجموعة',
+    navExpandGroup: 'توسيع المجموعة',
+    navAddChild: 'إضافة عنصر فرعي',
+    navMoveUp: 'نقل لأعلى',
+    navMoveDown: 'نقل لأسفل',
+    navRemove: 'إزالة',
+    navObjectPage: 'صفحة الكائن',
+    navDashboard: 'لوحة القيادة',
+    navPage: 'صفحة',
+    navReport: 'تقرير',
+    navGroup: 'مجموعة',
+    navUrl: 'رابط',
+    navSeparator: 'فاصل',
+    navTypeObject: 'كائن',
+    navTypeDashboard: 'لوحة القيادة',
+    navTypePage: 'صفحة',
+    navTypeReport: 'تقرير',
+    navTypeUrl: 'رابط',
+    navTypeGroup: 'مجموعة',
+    navTypeSeparator: 'فاصل',
+    navTypeAction: 'إجراء',
   },
   console: {
     title: 'وحدة تحكم ObjectStack',

packages/i18n/src/locales/de.ts

@@ -190,6 +190,45 @@ const de = {
     stripedRows: 'Gestreifte Zeilen',
     bordered: 'Umrandet',
     livePreview: 'Live-Vorschau',
+    stepBasicDesc: 'Name, Titel und Layout',
+    stepObjectsDesc: 'Geschäftsobjekte auswählen',
+    stepNavigationDesc: 'Navigationsbaum erstellen',
+    stepBrandingDesc: 'Logo, Farben und Favicon',
+    noObjectsFound: 'Keine Objekte gefunden.',
+    noNavItemsHint: 'Noch keine Navigationselemente. Wählen Sie Objekte im vorherigen Schritt aus oder fügen Sie manuell hinzu.',
+    separator: 'Trennlinie',
+    separatorLabel: '— Trennlinie —',
+    newGroup: 'Neue Gruppe',
+    newLink: 'Neuer Link',
+    saveDraft: 'Entwurf speichern',
+    cancelConfirmTitle: 'Änderungen verwerfen?',
+    cancelConfirmMessage: 'Sie haben ungespeicherte Änderungen. Möchten Sie wirklich abbrechen?',
+    confirmDiscard: 'Verwerfen',
+    keepEditing: 'Weiter bearbeiten',
+    navNoItems: 'Keine Navigationselemente. Klicken Sie auf die Schaltflächen oben, um Elemente hinzuzufügen.',
+    navNoPreviewItems: 'Keine Elemente',
+    navLivePreview: 'Live-Vorschau',
+    navCollapseGroup: 'Gruppe einklappen',
+    navExpandGroup: 'Gruppe ausklappen',
+    navAddChild: 'Unterelement hinzufügen',
+    navMoveUp: 'Nach oben',
+    navMoveDown: 'Nach unten',
+    navRemove: 'Entfernen',
+    navObjectPage: 'Objektseite',
+    navDashboard: 'Dashboard',
+    navPage: 'Seite',
+    navReport: 'Bericht',
+    navGroup: 'Gruppe',
+    navUrl: 'URL',
+    navSeparator: 'Trennlinie',
+    navTypeObject: 'Objekt',
+    navTypeDashboard: 'Dashboard',
+    navTypePage: 'Seite',
+    navTypeReport: 'Bericht',
+    navTypeUrl: 'URL',
+    navTypeGroup: 'Gruppe',
+    navTypeSeparator: 'Trennlinie',
+    navTypeAction: 'Aktion',
   },
   console: {
     title: 'ObjectStack Konsole',

packages/i18n/src/locales/en.ts

@@ -190,6 +190,45 @@ const en = {
     stripedRows: 'Striped Rows',
     bordered: 'Bordered',
     livePreview: 'Live Preview',
+    stepBasicDesc: 'Name, title, and layout',
+    stepObjectsDesc: 'Select business objects',
+    stepNavigationDesc: 'Build navigation tree',
+    stepBrandingDesc: 'Logo, colors, and favicon',
+    noObjectsFound: 'No objects found.',
+    noNavItemsHint: 'No navigation items yet. Select objects in the previous step or add items manually.',
+    separator: 'Separator',
+    separatorLabel: '— Separator —',
+    newGroup: 'New Group',
+    newLink: 'New Link',
+    saveDraft: 'Save Draft',
+    cancelConfirmTitle: 'Discard changes?',
+    cancelConfirmMessage: 'You have unsaved changes. Are you sure you want to cancel?',
+    confirmDiscard: 'Discard',
+    keepEditing: 'Keep Editing',
+    navNoItems: 'No navigation items. Click buttons above to add items.',
+    navNoPreviewItems: 'No items',
+    navLivePreview: 'Live Preview',
+    navCollapseGroup: 'Collapse group',
+    navExpandGroup: 'Expand group',
+    navAddChild: 'Add child',
+    navMoveUp: 'Move up',
+    navMoveDown: 'Move down',
+    navRemove: 'Remove',
+    navObjectPage: 'Object Page',
+    navDashboard: 'Dashboard',
+    navPage: 'Page',
+    navReport: 'Report',
+    navGroup: 'Group',
+    navUrl: 'URL',
+    navSeparator: 'Separator',
+    navTypeObject: 'Object',
+    navTypeDashboard: 'Dashboard',
+    navTypePage: 'Page',
+    navTypeReport: 'Report',
+    navTypeUrl: 'URL',
+    navTypeGroup: 'Group',
+    navTypeSeparator: 'Separator',
+    navTypeAction: 'Action',
   },
   console: {
     title: 'ObjectStack Console',

packages/i18n/src/locales/es.ts

@@ -190,6 +190,45 @@ const es = {
     stripedRows: 'Filas rayadas',
     bordered: 'Con borde',
     livePreview: 'Vista previa en vivo',
+    stepBasicDesc: 'Nombre, título y diseño',
+    stepObjectsDesc: 'Seleccionar objetos de negocio',
+    stepNavigationDesc: 'Construir árbol de navegación',
+    stepBrandingDesc: 'Logo, colores y favicon',
+    noObjectsFound: 'No se encontraron objetos.',
+    noNavItemsHint: 'Aún no hay elementos de navegación. Seleccione objetos en el paso anterior o agregue elementos manualmente.',
+    separator: 'Separador',
+    separatorLabel: '— Separador —',
+    newGroup: 'Nuevo grupo',
+    newLink: 'Nuevo enlace',
+    saveDraft: 'Guardar borrador',
+    cancelConfirmTitle: '¿Descartar cambios?',
+    cancelConfirmMessage: 'Tiene cambios sin guardar. ¿Está seguro de que desea cancelar?',
+    confirmDiscard: 'Descartar',
+    keepEditing: 'Seguir editando',
+    navNoItems: 'Sin elementos de navegación. Haga clic en los botones de arriba para agregar elementos.',
+    navNoPreviewItems: 'Sin elementos',
+    navLivePreview: 'Vista previa en vivo',
+    navCollapseGroup: 'Contraer grupo',
+    navExpandGroup: 'Expandir grupo',
+    navAddChild: 'Agregar hijo',
+    navMoveUp: 'Mover arriba',
+    navMoveDown: 'Mover abajo',
+    navRemove: 'Eliminar',
+    navObjectPage: 'Página de objeto',
+    navDashboard: 'Panel de control',
+    navPage: 'Página',
+    navReport: 'Informe',
+    navGroup: 'Grupo',
+    navUrl: 'URL',
+    navSeparator: 'Separador',
+    navTypeObject: 'Objeto',
+    navTypeDashboard: 'Panel de control',
+    navTypePage: 'Página',
+    navTypeReport: 'Informe',
+    navTypeUrl: 'URL',
+    navTypeGroup: 'Grupo',
+    navTypeSeparator: 'Separador',
+    navTypeAction: 'Acción',
   },
   console: {
     title: 'Consola ObjectStack',

packages/i18n/src/locales/fr.ts

@@ -190,6 +190,45 @@ const fr = {
     stripedRows: 'Lignes rayées',
     bordered: 'Bordé',
     livePreview: 'Aperçu en direct',
+    stepBasicDesc: 'Nom, titre et mise en page',
+    stepObjectsDesc: 'Sélectionner les objets métier',
+    stepNavigationDesc: "Construire l'arbre de navigation",
+    stepBrandingDesc: 'Logo, couleurs et favicon',
+    noObjectsFound: 'Aucun objet trouvé.',
+    noNavItemsHint: "Pas encore d'éléments de navigation. Sélectionnez des objets à l'étape précédente ou ajoutez-en manuellement.",
+    separator: 'Séparateur',
+    separatorLabel: '— Séparateur —',
+    newGroup: 'Nouveau groupe',
+    newLink: 'Nouveau lien',
+    saveDraft: 'Enregistrer le brouillon',
+    cancelConfirmTitle: 'Abandonner les modifications ?',
+    cancelConfirmMessage: 'Vous avez des modifications non enregistrées. Êtes-vous sûr de vouloir annuler ?',
+    confirmDiscard: 'Abandonner',
+    keepEditing: 'Continuer à éditer',
+    navNoItems: 'Aucun élément de navigation. Cliquez sur les boutons ci-dessus pour ajouter des éléments.',
+    navNoPreviewItems: 'Aucun élément',
+    navLivePreview: 'Aperçu en direct',
+    navCollapseGroup: 'Réduire le groupe',
+    navExpandGroup: 'Développer le groupe',
+    navAddChild: 'Ajouter un enfant',
+    navMoveUp: 'Monter',
+    navMoveDown: 'Descendre',
+    navRemove: 'Supprimer',
+    navObjectPage: "Page d'objet",
+    navDashboard: 'Tableau de bord',
+    navPage: 'Page',
+    navReport: 'Rapport',
+    navGroup: 'Groupe',
+    navUrl: 'URL',
+    navSeparator: 'Séparateur',
+    navTypeObject: 'Objet',
+    navTypeDashboard: 'Tableau de bord',
+    navTypePage: 'Page',
+    navTypeReport: 'Rapport',
+    navTypeUrl: 'URL',
+    navTypeGroup: 'Groupe',
+    navTypeSeparator: 'Séparateur',
+    navTypeAction: 'Action',
   },
   console: {
     title: 'Console ObjectStack',

packages/i18n/src/locales/ja.ts

@@ -190,6 +190,45 @@ const ja = {
     stripedRows: 'ストライプ',
     bordered: 'ボーダー',
     livePreview: 'ライブプレビュー',
+    stepBasicDesc: '名前、タイトル、レイアウト',
+    stepObjectsDesc: 'ビジネスオブジェクトを選択',
+    stepNavigationDesc: 'ナビゲーションツリーを構築',
+    stepBrandingDesc: 'ロゴ、色、ファビコン',
+    noObjectsFound: 'オブジェクトが見つかりません。',
+    noNavItemsHint: 'ナビゲーション項目がありません。前のステップでオブジェクトを選択するか、手動で追加してください。',
+    separator: 'セパレーター',
+    separatorLabel: '— セパレーター —',
+    newGroup: '新しいグループ',
+    newLink: '新しいリンク',
+    saveDraft: '下書き保存',
+    cancelConfirmTitle: '変更を破棄しますか？',
+    cancelConfirmMessage: '保存されていない変更があります。キャンセルしてもよろしいですか？',
+    confirmDiscard: '破棄',
+    keepEditing: '編集を続ける',
+    navNoItems: 'ナビゲーション項目がありません。上のボタンをクリックして追加してください。',
+    navNoPreviewItems: '項目なし',
+    navLivePreview: 'ライブプレビュー',
+    navCollapseGroup: 'グループを折りたたむ',
+    navExpandGroup: 'グループを展開',
+    navAddChild: '子項目を追加',
+    navMoveUp: '上に移動',
+    navMoveDown: '下に移動',
+    navRemove: '削除',
+    navObjectPage: 'オブジェクトページ',
+    navDashboard: 'ダッシュボード',
+    navPage: 'ページ',
+    navReport: 'レポート',
+    navGroup: 'グループ',
+    navUrl: 'URL',
+    navSeparator: 'セパレーター',
+    navTypeObject: 'オブジェクト',
+    navTypeDashboard: 'ダッシュボード',
+    navTypePage: 'ページ',
+    navTypeReport: 'レポート',
+    navTypeUrl: 'URL',
+    navTypeGroup: 'グループ',
+    navTypeSeparator: 'セパレーター',
+    navTypeAction: 'アクション',
   },
   console: {
     title: 'ObjectStack コンソール',

packages/i18n/src/locales/ko.ts

@@ -190,6 +190,45 @@ const ko = {
     stripedRows: 'Striped Rows',
     bordered: 'Bordered',
     livePreview: 'Live Preview',
+    stepBasicDesc: '이름, 제목 및 레이아웃',
+    stepObjectsDesc: '비즈니스 객체 선택',
+    stepNavigationDesc: '네비게이션 트리 구성',
+    stepBrandingDesc: '로고, 색상 및 파비콘',
+    noObjectsFound: '객체를 찾을 수 없습니다.',
+    noNavItemsHint: '네비게이션 항목이 없습니다. 이전 단계에서 객체를 선택하거나 수동으로 추가하세요.',
+    separator: '구분선',
+    separatorLabel: '— 구분선 —',
+    newGroup: '새 그룹',
+    newLink: '새 링크',
+    saveDraft: '임시 저장',
+    cancelConfirmTitle: '변경 사항을 폐기하시겠습니까?',
+    cancelConfirmMessage: '저장되지 않은 변경 사항이 있습니다. 취소하시겠습니까?',
+    confirmDiscard: '폐기',
+    keepEditing: '편집 계속',
+    navNoItems: '네비게이션 항목이 없습니다. 위 버튼을 클릭하여 항목을 추가하세요.',
+    navNoPreviewItems: '항목 없음',
+    navLivePreview: '실시간 미리보기',
+    navCollapseGroup: '그룹 접기',
+    navExpandGroup: '그룹 펼치기',
+    navAddChild: '하위 항목 추가',
+    navMoveUp: '위로 이동',
+    navMoveDown: '아래로 이동',
+    navRemove: '제거',
+    navObjectPage: '객체 페이지',
+    navDashboard: '대시보드',
+    navPage: '페이지',
+    navReport: '리포트',
+    navGroup: '그룹',
+    navUrl: 'URL',
+    navSeparator: '구분선',
+    navTypeObject: '객체',
+    navTypeDashboard: '대시보드',
+    navTypePage: '페이지',
+    navTypeReport: '리포트',
+    navTypeUrl: 'URL',
+    navTypeGroup: '그룹',
+    navTypeSeparator: '구분선',
+    navTypeAction: '액션',
   },
   console: {
     title: 'ObjectStack 콘솔',