@utopia-studio-design/design-system-cli 0.4.1 → 0.6.0

package/data/templates/calendar-application/calendar-application.css

@@ -0,0 +1,216 @@
+.ceramic-calendar-sidebar,
+.ceramic-calendar-sidebar fieldset,
+.ceramic-event-editor form {
+  display: grid;
+}
+
+.ceramic-calendar-sidebar {
+  align-content: start;
+  gap: var(--space-5);
+  padding: var(--space-4);
+  border-inline-end: var(--border-width-hairline) solid var(--border);
+  background: var(--surface);
+}
+
+.ceramic-calendar-sidebar-heading {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.ceramic-calendar-sidebar-heading > span {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-eyebrow);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-eyebrow);
+  text-transform: uppercase;
+}
+
+.ceramic-calendar-sidebar-heading > strong {
+  font-size: var(--font-size-body);
+}
+
+.ceramic-calendar-mini {
+  inline-size: 100%;
+  padding: 0;
+  border: 0;
+  background: transparent;
+}
+
+.ceramic-calendar-mini .uds-calendar-month {
+  inline-size: 100%;
+}
+
+.ceramic-calendar-mini .uds-calendar-title {
+  font-size: var(--font-size-small);
+}
+
+.ceramic-calendar-mini .uds-calendar-grid {
+  inline-size: 100%;
+}
+
+.ceramic-calendar-mini .uds-calendar-day-button {
+  inline-size: 100%;
+  min-inline-size: 0;
+  block-size: 1.875rem;
+  min-block-size: 1.875rem;
+  padding: 0;
+  font-size: var(--font-size-eyebrow);
+}
+
+.ceramic-calendar-sidebar fieldset {
+  gap: var(--space-2);
+  margin: 0;
+  padding: var(--space-4) 0 0;
+  border: 0;
+  border-block-start: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-calendar-sidebar legend {
+  margin-block-end: var(--space-3);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-semibold);
+}
+
+.ceramic-calendar-sidebar fieldset label,
+.ceramic-event-checkbox {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: var(--space-2);
+  min-block-size: var(--button-height-sm);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+.ceramic-calendar-sidebar fieldset label > span {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.ceramic-calendar-sidebar fieldset i {
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: var(--radius-round);
+  background: var(--interaction-selection-border);
+}
+
+.ceramic-calendar-sidebar fieldset i[data-resource='customer'] {
+  background: var(--warning);
+}
+
+.ceramic-calendar-sidebar fieldset i[data-resource='focus'] {
+  background: var(--success);
+}
+
+.ceramic-timezone-selector {
+  display: grid;
+  gap: var(--space-2);
+}
+
+.ceramic-agenda-panel {
+  min-inline-size: 0;
+  padding: var(--space-4);
+  overflow: auto;
+  border-inline-start: var(--border-width-hairline) solid var(--border);
+  background: var(--surface);
+}
+
+.ceramic-agenda-panel .uds-scheduler-agenda li {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.ceramic-agenda-panel .uds-scheduler-agenda li > span {
+  display: none;
+}
+
+.ceramic-agenda-panel .uds-scheduler-event {
+  inline-size: 100%;
+}
+
+.ceramic-event-editor-backdrop {
+  position: fixed;
+  z-index: var(--z-overlay);
+  inset: 0;
+  background: var(--overlay);
+}
+
+.ceramic-event-editor {
+  position: fixed;
+  z-index: var(--z-modal);
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: min(100%, 30rem);
+  overflow: auto;
+  padding: var(--space-6);
+  border-inline-start: var(--border-width-strong) solid var(--border);
+  background: var(--popover-surface);
+  color: var(--foreground);
+}
+
+.ceramic-event-editor > header,
+.ceramic-event-editor-actions,
+.ceramic-event-editor-actions > div {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: start;
+  gap: var(--space-2);
+}
+
+.ceramic-event-editor > header,
+.ceramic-event-editor-actions {
+  justify-content: space-between;
+}
+
+.ceramic-event-editor > header > div {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.ceramic-event-editor > header span {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-eyebrow);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-eyebrow);
+  text-transform: uppercase;
+}
+
+.ceramic-event-editor h2 {
+  margin: 0;
+}
+
+.ceramic-event-editor form {
+  gap: var(--space-4);
+  margin-block-start: var(--space-6);
+}
+
+.ceramic-event-editor-actions {
+  margin-block-start: var(--space-2);
+  padding-block-start: var(--space-4);
+  border-block-start: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-event-editor-alert {
+  padding: var(--space-3);
+  border: var(--border-width-hairline) solid var(--destructive-border);
+  border-radius: var(--radius-md);
+  background: var(--destructive-surface);
+  color: var(--destructive-text);
+  font-size: var(--font-size-small);
+}
+
+.ceramic-event-editor-alert:focus {
+  outline: var(--focus-ring-width) solid var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+
+@media (max-width: 44rem) {
+  .ceramic-event-editor {
+    inline-size: 100%;
+    padding: var(--space-4);
+  }
+
+  .ceramic-event-editor-actions > div {
+    flex: 1 1 auto;
+  }
+}

package/data/templates/calendar-application/calendar-localization.ts

@@ -0,0 +1,90 @@
+import type { SchedulerLabelOverrides } from '@utopia-studio-design/design-system/Calendar'
+
+export const calendarLocaleOptions = ['en-US', 'ar-SA', 'ar-EG', 'ar-AE'] as const
+export type CalendarLocale = typeof calendarLocaleOptions[number]
+
+export function isArabicCalendarLocale(locale: string) {
+  return locale.toLowerCase().startsWith('ar')
+}
+
+const arabicSchedulerLabels: SchedulerLabelOverrides = {
+  navigationLabel: 'التنقل بين تواريخ التقويم',
+  changeDateLabel: 'تغيير تاريخ التقويم',
+  previous: 'السابق',
+  today: 'اليوم',
+  next: 'التالي',
+  viewsLabel: 'طرق عرض التقويم',
+  view: { month: 'الشهر', week: 'الأسبوع', day: 'اليوم', agenda: 'جدول الأعمال' },
+  compactView: { month: 'الشهر', week: 'الأسبوع', day: 'اليوم', agenda: 'الأجندة' },
+  newEvent: 'حدث جديد',
+  allDay: 'طوال اليوم',
+  allDayRegion: 'أحداث طوال اليوم',
+  dayView: 'عرض تقويم اليوم',
+  weekView: 'عرض تقويم الأسبوع',
+  monthView: 'عرض تقويم الشهر',
+  monthGrid: 'شبكة تقويم الشهر',
+  agenda: 'جدول الأحداث',
+  accessibleAgenda: 'جدول الأحداث المتاح',
+  noEventsInRange: 'لا توجد أحداث في هذه الفترة.',
+  calendars: (count) => `${new Intl.NumberFormat('ar').format(count)} تقاويم`,
+  more: (count) => `${new Intl.NumberFormat('ar').format(count)} أخرى`,
+  compactMore: (count) => `+${new Intl.NumberFormat('ar').format(count)}`,
+  selectDate: (dateLabel) => `اختيار ${dateLabel}`,
+  selectedEvent: 'الحدث المحدد',
+  selectedActions: 'إجراءات الحدث المحدد',
+  moveResizeActions: 'نقل الحدث المحدد وتغيير مدته',
+  moreActions: 'مزيد من إجراءات الحدث',
+  moveEarlier: 'نقل ١٥ دقيقة إلى وقت أبكر',
+  moveLater: 'نقل ١٥ دقيقة إلى وقت لاحق',
+  extend: 'تمديد ١٥ دقيقة',
+  duplicate: 'تكرار',
+  delete: 'حذف',
+  undo: 'التراجع عن آخر تغيير',
+  saving: 'جارٍ حفظ تغيير التقويم…',
+  saveError: 'فشل تغيير التقويم وتمت استعادته.',
+  conflict: 'يتعارض هذا التغيير مع حدث آخر أو فترة غير متاحة.',
+  loading: 'جارٍ تحميل أحداث التقويم…',
+  emptyTitle: 'لا توجد أحداث مجدولة',
+  emptyDescription: 'أنشئ حدثًا أو غيّر نطاق التاريخ.',
+  errorTitle: 'التقويم غير متاح',
+}
+
+export function getCalendarSchedulerLabels(locale: string) {
+  return isArabicCalendarLocale(locale) ? arabicSchedulerLabels : undefined
+}
+
+export function getCalendarSidebarLabels(locale: string) {
+  return isArabicCalendarLocale(locale) ? {
+    ariaLabel: 'الشريط الجانبي للتقويم',
+    jumpToDate: 'الانتقال إلى تاريخ',
+    schedule: 'الجدول',
+    calendars: 'تقاويمي',
+  } : undefined
+}
+
+export function getCalendarEditorLabels(locale: string) {
+  return isArabicCalendarLocale(locale) ? {
+    ariaLabel: 'محرر الحدث',
+    eyebrow: 'حدث التقويم',
+    newEvent: 'حدث جديد',
+    close: 'إغلاق محرر الحدث',
+    title: 'العنوان',
+    starts: 'يبدأ',
+    ends: 'ينتهي',
+    allDay: 'حدث طوال اليوم',
+    applyTo: 'تطبيق التغيير على',
+    occurrence: 'هذا التكرار',
+    series: 'السلسلة بأكملها',
+    save: 'حفظ الحدث',
+    saving: 'جارٍ حفظ الحدث…',
+    cancel: 'إلغاء',
+    delete: 'حذف الحدث',
+    validationSummary: 'تحقق من الحقول المميزة.',
+    titleRequired: 'أدخل عنوان الحدث.',
+    startRequired: 'أدخل تاريخ ووقت البدء.',
+    endRequired: 'أدخل تاريخ ووقت الانتهاء.',
+    invalidDateTime: 'أدخل تاريخًا ووقتًا صالحين.',
+    endAfterStart: 'يجب أن يكون الانتهاء بعد البدء.',
+    saveError: 'تعذر حفظ الحدث. لا تزال تغييراتك موجودة.',
+  } : undefined
+}

package/data/templates/calendar-application/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en" dir="ltr" data-theme="utopia-default" data-color-mode="light">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="Ceramic application-grade calendar and scheduler template." />
+    <title>Calendar Application — Ceramic Design System</title>
+  </head>
+  <body>
+    <a class="skip-link" href="#main-content">Skip to calendar application</a>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>