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

package/data/templates/dashboard-composer/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/dashboard-composer/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/dashboard-composer/calendar-panel-contract.ts

@@ -0,0 +1,72 @@
+import type {
+  SchedulerRootProps,
+  SchedulerView,
+  SchedulerWeekDay,
+} from '@utopia-studio-design/design-system/Calendar'
+import {
+  calendarLocaleOptions,
+  getCalendarSchedulerLabels,
+  type CalendarLocale,
+} from './calendar-localization'
+
+export type CalendarPanelDirection = 'inherit' | 'auto' | 'ltr' | 'rtl'
+
+export interface CalendarPanelConfiguration {
+  direction?: 'ltr' | 'rtl'
+  initialScrollHour: number
+  locale: CalendarLocale
+  secondaryCalendar?: string
+  showAgendaAlternative: boolean
+  timezone: string
+  view: SchedulerView
+  weekStartsOn?: SchedulerWeekDay
+}
+
+export interface CalendarPanelContext {
+  compact: boolean
+  direction: 'ltr' | 'rtl'
+}
+
+const schedulerViews: SchedulerView[] = ['month', 'week', 'day', 'agenda']
+const directionModes: CalendarPanelDirection[] = ['inherit', 'auto', 'ltr', 'rtl']
+
+export function resolveCalendarPanelConfiguration(
+  props: Record<string, unknown>,
+  context: CalendarPanelContext,
+): CalendarPanelConfiguration & Pick<SchedulerRootProps, 'calendarSystem' | 'labels'> {
+  const configuredView = schedulerViews.includes(props.view as SchedulerView)
+    ? props.view as SchedulerView
+    : 'week'
+  const locale = calendarLocaleOptions.includes(props.locale as CalendarLocale)
+    ? props.locale as CalendarLocale
+    : 'en-US'
+  const directionMode = directionModes.includes(props.direction as CalendarPanelDirection)
+    ? props.direction as CalendarPanelDirection
+    : 'inherit'
+  const direction = directionMode === 'inherit'
+    ? context.direction
+    : directionMode === 'auto' ? undefined : directionMode
+  const weekStartsOn = Number.isInteger(props.weekStartsOn)
+    && Number(props.weekStartsOn) >= 0
+    && Number(props.weekStartsOn) <= 6
+    ? props.weekStartsOn as SchedulerWeekDay
+    : undefined
+  const initialScrollHour = Number.isFinite(props.initialScrollHour)
+    ? Math.min(23, Math.max(0, Number(props.initialScrollHour)))
+    : 8
+
+  return {
+    calendarSystem: 'gregory',
+    direction,
+    initialScrollHour,
+    labels: getCalendarSchedulerLabels(locale),
+    locale,
+    secondaryCalendar: props.secondaryCalendar === 'islamic-umalqura'
+      ? 'islamic-umalqura'
+      : undefined,
+    showAgendaAlternative: props.showAgendaAlternative === true,
+    timezone: typeof props.timeZone === 'string' && props.timeZone ? props.timeZone : 'UTC',
+    view: context.compact && configuredView === 'week' ? 'day' : configuredView,
+    weekStartsOn,
+  }
+}

package/data/templates/dashboard-composer/dashboard-composer.css

@@ -0,0 +1,328 @@
+.ceramic-todo-list {
+  display: grid;
+  align-content: start;
+  gap: var(--space-3);
+  min-inline-size: 0;
+  block-size: 100%;
+  padding: var(--space-4);
+  background: var(--surface);
+  color: var(--foreground);
+}
+
+.ceramic-todo-list > header,
+.ceramic-todo-items > li,
+.ceramic-todo-items label,
+.ceramic-todo-items > li > div,
+.ceramic-todo-create,
+.ceramic-dashboard-block-toolbar,
+.ceramic-dashboard-block-toolbar > div {
+  display: flex;
+  align-items: center;
+}
+
+.ceramic-todo-list > header,
+.ceramic-todo-items > li,
+.ceramic-dashboard-block-toolbar {
+  justify-content: space-between;
+}
+
+.ceramic-todo-list > header {
+  flex-wrap: wrap;
+  gap: var(--space-3);
+  padding-block-end: var(--space-3);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-todo-list > header > div {
+  display: grid;
+  min-inline-size: 0;
+  gap: var(--space-1);
+}
+
+.ceramic-todo-list h2,
+.ceramic-todo-list p {
+  margin: 0;
+}
+
+.ceramic-todo-list > 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-todo-items {
+  display: grid;
+  gap: var(--space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ceramic-todo-items > li {
+  gap: var(--space-2);
+  min-inline-size: 0;
+  padding-block: var(--space-2);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+}
+
+.ceramic-todo-list[data-density='compact'] .ceramic-todo-items > li {
+  padding-block: var(--space-1);
+}
+
+.ceramic-todo-list[data-density='comfortable'] .ceramic-todo-items > li {
+  padding-block: var(--space-3);
+}
+
+.ceramic-todo-items label {
+  gap: var(--space-2);
+  min-inline-size: 0;
+}
+
+.ceramic-todo-items label > span {
+  overflow-wrap: anywhere;
+}
+
+.ceramic-todo-items > li[data-completed='true'] label > span {
+  color: var(--muted-foreground);
+  text-decoration: line-through;
+}
+
+.ceramic-todo-items > li > div {
+  flex: 0 0 auto;
+  gap: var(--space-1);
+  color: var(--muted-foreground);
+  font-size: var(--font-size-small);
+}
+
+.ceramic-todo-state {
+  display: grid;
+  gap: var(--space-1);
+  min-block-size: 8rem;
+  align-content: center;
+  justify-items: start;
+  color: var(--muted-foreground);
+}
+
+.ceramic-todo-state strong {
+  color: var(--foreground);
+}
+
+.ceramic-todo-create {
+  gap: var(--space-2);
+  min-inline-size: 0;
+  margin-block-start: auto;
+  padding-block-start: var(--space-2);
+}
+
+.ceramic-todo-create .uds-input {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  inline-size: 100%;
+}
+
+.ceramic-todo-create .uds-button {
+  flex: 0 0 auto;
+}
+
+.ceramic-dashboard-renderer {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--space-3);
+  min-inline-size: 0;
+}
+
+.ceramic-dashboard-block {
+  display: flex;
+  flex-direction: column;
+  grid-column: var(--ceramic-block-column) / span var(--ceramic-block-span);
+  min-inline-size: 0;
+  overflow: clip;
+  border: var(--border-width-hairline) solid var(--border);
+  background: var(--surface);
+}
+
+.ceramic-dashboard-block > :not(.ceramic-dashboard-block-toolbar) {
+  flex: 1 1 auto;
+  min-block-size: 0;
+}
+
+.ceramic-dashboard-block[data-locked='true'] {
+  border-color: var(--interaction-selection-border);
+}
+
+.ceramic-dashboard-block-toolbar {
+  gap: var(--space-2);
+  min-inline-size: 0;
+  padding: var(--space-2) var(--space-3);
+  border-block-end: var(--border-width-hairline) solid var(--border);
+  background: var(--muted);
+}
+
+.ceramic-dashboard-block-toolbar > div {
+  gap: var(--space-1);
+  min-inline-size: 0;
+}
+
+.ceramic-dashboard-block-toolbar strong {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ceramic-dashboard-missing,
+.ceramic-dashboard-error {
+  display: grid;
+  gap: var(--space-1);
+  padding: var(--space-4);
+  color: var(--muted-foreground);
+}
+
+.ceramic-dashboard-missing strong,
+.ceramic-dashboard-error strong {
+  color: var(--foreground);
+}
+
+.ceramic-dashboard-block .uds-scheduler-root {
+  border: 0;
+}
+
+.ceramic-puck-canvas {
+  container-name: ceramic-puck-canvas;
+  container-type: inline-size;
+  min-block-size: 100%;
+  min-inline-size: 0;
+  padding: var(--space-4);
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.ceramic-puck-canvas > [class*='_DropZone_'] {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  align-items: start;
+  gap: var(--space-3);
+  min-inline-size: 0;
+}
+
+.ceramic-puck-block-preview {
+  display: flex;
+  flex-direction: column;
+  grid-column: span var(--ceramic-puck-span);
+  min-block-size: 20rem;
+  min-inline-size: 0;
+  overflow: clip;
+  border: var(--border-width-hairline) solid var(--border);
+  background: var(--surface);
+}
+
+.ceramic-puck-block-preview[data-block-type='calendar-panel'] {
+  block-size: 34rem;
+  min-block-size: 34rem;
+}
+
+.ceramic-puck-block-preview[data-block-type='todo-list'] {
+  container-type: inline-size;
+}
+
+.ceramic-puck-block-preview[data-block-type='activity-feed'] {
+  min-block-size: 24rem;
+}
+
+.ceramic-puck-block-preview[data-block-type='agent-status'] {
+  min-block-size: 30rem;
+}
+
+.ceramic-puck-block-preview[data-block-type='issue-table'],
+.ceramic-puck-block-preview[data-block-type='chart-panel'] {
+  min-block-size: 34rem;
+}
+
+.ceramic-puck-block-preview[data-locked='true'] {
+  border-color: var(--interaction-selection-border);
+}
+
+.ceramic-puck-block-preview .uds-scheduler-root,
+.ceramic-puck-block-preview .ceramic-kpi-grid {
+  border: 0;
+}
+
+.ceramic-issue-table-block,
+.ceramic-chart-panel-block {
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  block-size: 100%;
+  padding: var(--space-3);
+  background: var(--surface);
+}
+
+.ceramic-issue-table-block .uds-database-root {
+  block-size: 100%;
+}
+
+.ceramic-chart-panel-state {
+  display: grid;
+  place-content: center;
+  justify-items: start;
+  gap: var(--space-2);
+  min-block-size: 20rem;
+  padding: var(--space-4);
+  color: var(--muted-foreground);
+}
+
+.ceramic-chart-panel-state strong {
+  color: var(--foreground);
+}
+
+@container (max-width: 30rem) {
+  .ceramic-puck-block-preview .ceramic-todo-items > li {
+    align-items: start;
+    flex-direction: column;
+  }
+
+  .ceramic-puck-block-preview .ceramic-todo-items > li > div {
+    padding-inline-start: calc(var(--control-size-sm) + var(--space-2));
+  }
+}
+
+@container ceramic-puck-canvas (max-width: 42rem) {
+  .ceramic-puck-block-preview {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 48rem) {
+  .ceramic-dashboard-block {
+    grid-column: 1 / -1;
+    grid-row: auto;
+  }
+
+  .ceramic-puck-block-preview {
+    grid-column: 1 / -1;
+  }
+
+  .ceramic-dashboard-block-toolbar {
+    align-items: start;
+  }
+}
+
+@media (max-width: 28rem) {
+  .ceramic-dashboard-block-toolbar > div:first-child .uds-badge {
+    display: none;
+  }
+
+  .ceramic-dashboard-block-toolbar > div:first-child strong {
+    overflow: visible;
+    white-space: normal;
+  }
+
+  .ceramic-todo-items > li {
+    align-items: start;
+    flex-direction: column;
+  }
+
+  .ceramic-todo-items > li > div {
+    padding-inline-start: calc(var(--control-size-sm) + var(--space-2));
+  }
+}