@utopia-studio-design/design-system-cli 0.8.1 → 0.8.2

package/data/blocks/ux-pattern-examples/WorkflowExamples.tsx

@@ -0,0 +1,190 @@
+import { WorkflowExample, type WorkflowProps } from './WorkflowExample'
+import { workflowDefinitions } from './workflow-definitions'
+
+export function AccountProtectionExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'account-protection-01')!} />
+}
+
+export function WelcomeExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'welcome-01')!} />
+}
+
+export function SetupProgressExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'setup-progress-01')!} />
+}
+
+export function ProfileSetupExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'profile-setup-01')!} />
+}
+
+export function CredentialsExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'credentials-01')!} />
+}
+
+export function AgreementsExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'agreements-01')!} />
+}
+
+export function OrientationExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'orientation-01')!} />
+}
+
+export function PlanSelectionExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'plan-selection-01')!} />
+}
+
+export function ProfileEditingExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'profile-editing-01')!} />
+}
+
+export function AccountSettingsExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'account-settings-01')!} />
+}
+
+export function BookingRequestExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'booking-request-01')!} />
+}
+
+export function SessionListExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'session-list-01')!} />
+}
+
+export function SessionDetailExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'session-detail-01')!} />
+}
+
+export function RequestDecisionExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'request-decision-01')!} />
+}
+
+export function ConnectivityCheckExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'connectivity-check-01')!} />
+}
+
+export function SessionFeedbackExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'session-feedback-01')!} />
+}
+
+export function StructuredAssessmentExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'structured-assessment-01')!} />
+}
+
+export function VerificationQueueExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'verification-queue-01')!} />
+}
+
+export function VerificationChecklistExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'verification-checklist-01')!} />
+}
+
+export function ClosureQueueExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'closure-queue-01')!} />
+}
+
+export function MatchingEscalationsExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'matching-escalations-01')!} />
+}
+
+export function DeviceMonitoringExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'device-monitoring-01')!} />
+}
+
+export function ProviderConnectionsExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'provider-connections-01')!} />
+}
+
+export function IncidentTrackingExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'incident-tracking-01')!} />
+}
+
+export function AuditLogExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'audit-log-01')!} />
+}
+
+export function SubscriptionsExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'subscriptions-01')!} />
+}
+
+export function SubscriptionCreateExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'subscription-create-01')!} />
+}
+
+export function CreditAllocationExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'credit-allocation-01')!} />
+}
+
+export function PaymentCycleExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'payment-cycle-01')!} />
+}
+
+export function CreditTransactionsExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'credit-transactions-01')!} />
+}
+
+export function InvoicesExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'invoices-01')!} />
+}
+
+export function TeamAllocationsExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'team-allocations-01')!} />
+}
+
+export function PersonalOverviewExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'personal-overview-01')!} />
+}
+
+export function ExpertOverviewExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'expert-overview-01')!} />
+}
+
+export function SubscriptionDetailExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'subscription-detail-01')!} />
+}
+
+export function CreditBalanceExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'credit-balance-01')!} />
+}
+
+export function SkillProgressionExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'skill-progression-01')!} />
+}
+
+export function AnalyticsExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'analytics-01')!} />
+}
+
+export function BroadcastManagementExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'broadcast-management-01')!} />
+}
+
+export function BroadcastScheduleExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'broadcast-schedule-01')!} />
+}
+
+export function MediaLibraryExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'media-library-01')!} />
+}
+
+export function BroadcastViewerExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'broadcast-viewer-01')!} />
+}
+
+export function LiveSessionExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'live-session-01')!} />
+}
+
+export function ArticleLibraryExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'article-library-01')!} />
+}
+
+export function ProductIntroductionExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'product-introduction-01')!} />
+}
+
+export function ContactFormExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'contact-form-01')!} />
+}
+
+export function LoadingRecoveryExample(props: WorkflowProps) {
+  return <WorkflowExample {...props} definition={workflowDefinitions.find(d => d.id === 'loading-recovery-01')!} />
+}

package/data/blocks/ux-pattern-examples/copy.ts

@@ -0,0 +1,6 @@
+export type ExampleLocale = 'ko' | 'en' | 'ar'
+export const exampleCopy = {
+  ko: { workspace: '작업 공간', signup: '계정 만들기', signupHint: '작업을 시작할 계정 정보를 입력하세요.', name: '이름', email: '이메일', password: '비밀번호', passwordHint: '8자 이상 입력하세요. 실제 비밀번호는 사용하지 마세요.', terms: '예시 이용약관에 동의합니다.', submit: '계정 만들기', complete: '준비가 끝났어요', completeHint: '예시 흐름을 완료했어요. 실제 계정이나 작업 공간은 생성되지 않아요.', again: '다시 살펴보기', basics: '기본 정보', preferences: '작업 방식', finish: '완료', current: '진행 중', done: '완료', locked: '이전 단계 필요', stepLabel: '설정 진행', org: '작업 공간 이름', next: '계속', previous: '이전', choose: '어떻게 작업하나요?', solo: '혼자 작업', team: '팀과 함께', start: '작업 공간 시작하기', startHint: '기본 정보를 정하고 작업을 시작해 보세요.', review: '요청 검토', reviewHint: '진행 중인 요청을 살펴보고 검토 대상을 선택하세요.', sample: '대화형 예시 · 입력한 내용은 저장되지 않아요.' },
+  en: { workspace: 'Workspace', signup: 'Create an account', signupHint: 'Enter your account details to get started.', name: 'Name', email: 'Email', password: 'Password', passwordHint: 'At least 8 characters. Do not use a real password.', terms: 'I agree to the sample terms.', submit: 'Create account', complete: 'You’re ready', completeHint: 'Example complete. No account or workspace has been created.', again: 'Explore again', basics: 'Basics', preferences: 'Preferences', finish: 'Complete', current: 'Current', done: 'Done', locked: 'Previous step required', stepLabel: 'Setup progress', org: 'Workspace name', next: 'Continue', previous: 'Back', choose: 'How will you work?', solo: 'On my own', team: 'With a team', start: 'Start a workspace', startHint: 'Set up the basics and get ready to work.', review: 'Review requests', reviewHint: 'Inspect ongoing requests and choose an item to review.', sample: 'Interactive example · nothing you enter is saved.' },
+  ar: { workspace: 'مساحة العمل', signup: 'إنشاء حساب', signupHint: 'أدخل معلومات حسابك للبدء.', name: 'الاسم', email: 'البريد الإلكتروني', password: 'كلمة المرور', passwordHint: 'ثمانية أحرف على الأقل. لا تستخدم كلمة مرور حقيقية.', terms: 'أوافق على الشروط التجريبية.', submit: 'إنشاء حساب', complete: 'أنت جاهز', completeHint: 'اكتمل المثال. لم يتم إنشاء حساب أو مساحة عمل.', again: 'استكشاف مجدداً', basics: 'الأساسيات', preferences: 'التفضيلات', finish: 'الإكمال', current: 'الحالي', done: 'مكتمل', locked: 'الخطوة السابقة مطلوبة', stepLabel: 'تقدم الإعداد', org: 'اسم مساحة العمل', next: 'متابعة', previous: 'رجوع', choose: 'كيف ستعمل؟', solo: 'بمفردي', team: 'مع فريق', start: 'بدء مساحة عمل', startHint: 'اضبط الأساسيات واستعد للعمل.', review: 'مراجعة الطلبات', reviewHint: 'استعرض الطلبات واختر عنصراً للمراجعة.', sample: 'مثال تفاعلي · لا يتم حفظ المدخلات.' },
+}

package/data/blocks/ux-pattern-examples/ux-examples.css

@@ -0,0 +1,18 @@
+:root { --ux-example-min-height: 38rem; --ux-example-form-width: 25rem; --ux-example-setup-width: 44rem; }
+/* Scope the bounded field geometry to examples in this release; room styling is unchanged. */
+.ux-example :is(.uds-input, .uds-input-shell, .uds-native-select) { border-radius: var(--radius-input); }
+.ux-example .uds-textarea { border-radius: var(--radius-textarea); }
+.ux-example { display: flex; flex-direction: column; min-block-size: var(--ux-example-min-height); min-inline-size: 0; color: var(--foreground); background: var(--background); font-size: var(--font-size-body); line-height: var(--line-height-body); }
+.ux-example h3 { margin: 0; font-size: var(--font-size-page-title); line-height: var(--line-height-tight); font-weight: var(--font-weight-strong); }
+.ux-example p { margin: 0; color: var(--foreground-muted); }
+.ux-example__bar { padding: var(--space-5) var(--space-6); border-block-end: var(--border-width-hairline) solid var(--border); background: var(--surface); }
+.ux-example__center { display: grid; place-items: center; flex: 1; padding: var(--space-8) var(--space-5); }
+.ux-example__form { display: grid; gap: var(--space-4); inline-size: 100%; max-inline-size: var(--ux-example-form-width); }
+.ux-example form { display: grid; gap: var(--space-4); }
+.ux-example__check { display: flex; align-items: center; gap: var(--space-2); }
+.ux-example__check button { flex-shrink: 0; }
+.ux-example__actions { display: flex; gap: var(--space-3); justify-content: end; }
+.ux-example__setup { display: grid; gap: var(--space-6); inline-size: 100%; max-inline-size: var(--ux-example-setup-width); margin-inline: auto; padding: var(--space-8) var(--space-5); flex: 1; align-content: start; }
+.ux-example__workspace { display: grid; gap: var(--space-5); padding: var(--space-6); min-inline-size: 0; flex: 1; }
+.ux-example footer { padding: var(--space-4) var(--space-5); color: var(--foreground-muted); text-align: center; font-size: var(--font-size-small); border-block-start: var(--border-width-hairline) solid var(--border); }
+@media(max-width: 40rem) { .ux-example__workspace { padding: var(--space-4); } .ux-example h3 { font-size: var(--font-size-body-lg); } }

package/data/blocks/ux-pattern-examples/workflow-copy.ts

@@ -0,0 +1,76 @@
+export type Copy = { en: string; ko: string; ar: string };
+export const L = (en: string, ko: string, ar: string): Copy => ({ en, ko, ar });
+export const workflowCopy = {
+  demo: L(
+    "Interactive example only. Nothing is sent, billed or saved to an account.",
+    "체험용 예시입니다. 실제 전송·결제·계정 저장은 하지 않습니다.",
+    "مثال تفاعلي فقط. لا إرسال أو دفع أو حفظ في حساب."
+  ),
+  save: L("Save example", "예시 저장", "حفظ المثال"),
+  next: L("Continue", "계속", "متابعة"),
+  back: L("Back", "뒤로", "رجوع"),
+  cancel: L("Cancel", "취소", "إلغاء"),
+  saved: L(
+    "Saved in this preview.",
+    "이 미리보기에 저장했어요.",
+    "تم الحفظ في المعاينة."
+  ),
+  done: L("Example completed.", "예시를 완료했어요.", "اكتمل المثال."),
+  reset: L("Start again", "다시 시작", "البدء مجدداً"),
+  error: L(
+    "Check this field.",
+    "입력 내용을 확인하세요.",
+    "تحقق من هذا الحقل."
+  ),
+  required: L("Required", "필수", "مطلوب"),
+  search: L("Search records", "목록 검색", "البحث في السجلات"),
+  status: L("Status", "상태", "الحالة"),
+  category: L("Category", "분류", "الفئة"),
+  all: L("All", "전체", "الكل"),
+  empty: L(
+    "No matching records.",
+    "일치하는 항목이 없어요.",
+    "لا توجد سجلات مطابقة."
+  ),
+  open: L("View details", "자세히 보기", "عرض التفاصيل"),
+  close: L("Close details", "상세 닫기", "إغلاق التفاصيل"),
+  sort: L("Sort", "정렬", "الترتيب"),
+  newest: L("Newest first", "최신순", "الأحدث أولاً"),
+  oldest: L("Oldest first", "오래된순", "الأقدم أولاً"),
+  pass: L("Pass", "통과", "اجتياز"),
+  fail: L("Needs attention", "확인 필요", "يحتاج مراجعة"),
+  pending: L("Pending", "대기", "معلّق"),
+  locked: L(
+    "Finish previous checks first.",
+    "앞의 항목을 먼저 완료하세요.",
+    "أكمل الفحوص السابقة أولاً."
+  ),
+  draft: L("Save draft", "임시 저장", "حفظ مسودة"),
+  submit: L("Submit example", "예시 제출", "إرسال المثال"),
+  confirm: L("Confirm in preview", "미리보기에서 확인", "تأكيد في المعاينة"),
+  confirmHint: L(
+    "Review the details before confirming. This affects preview data only.",
+    "확인 전 내용을 검토하세요. 미리보기 데이터에만 적용됩니다.",
+    "راجع التفاصيل قبل التأكيد. يتأثر بيانات المثال فقط."
+  ),
+  export: L("Export example CSV", "예시 CSV 내보내기", "تصدير CSV تجريبي"),
+  fileError: L(
+    "Choose an allowed file, at most 5 MB.",
+    "허용된 형식의 5MB 이하 파일을 선택하세요.",
+    "اختر ملفاً مسموحاً لا يتجاوز ٥ ميغابايت."
+  ),
+  note: L("Notes", "메모", "ملاحظات"),
+  message: L("Message", "메시지", "رسالة"),
+  send: L("Send in preview", "미리보기에서 보내기", "إرسال في المعاينة"),
+  total: L("Total", "합계", "المجموع"),
+  available: L("Available", "사용 가능", "المتاح"),
+  remaining: L("Remaining", "남은 수량", "المتبقي"),
+  play: L("Play preview", "재생 체험", "تشغيل المعاينة"),
+  pause: L("Pause", "일시 정지", "إيقاف مؤقت"),
+  ended: L("Ended", "종료", "انتهى"),
+  previewMedia: L(
+    "Media placeholder — connect your own media source.",
+    "미디어 예시 영역 — 실제 미디어는 별도로 연결하세요.",
+    "منطقة معاينة — اربط مصدر الوسائط الخاص بك."
+  ),
+};