@betterstart/cli 0.1.3 → 0.1.4

package/templates/ui/curriculum-editor.tsx

@@ -0,0 +1,601 @@
+'use client'
+
+import { Clock, Plus, X } from 'lucide-react'
+import * as React from 'react'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion'
+import { Button } from './button'
+import { FormDescription, FormLabel } from './form'
+import { Input } from './input'
+import { Placeholder } from './placeholder'
+import { Separator } from './separator'
+import { Textarea } from './textarea'
+import { ToggleGroup, ToggleGroupItem } from './toggle-group'
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface CurriculumSequentialItem {
+  title?: string
+  description?: string
+}
+
+export interface CurriculumWeeklyItem {
+  title?: string
+  description?: string
+}
+
+export interface CurriculumWeek {
+  weekNumber: number
+  weekTitle?: string
+  weekDescription?: string
+  durationHours?: number
+  items: CurriculumWeeklyItem[]
+}
+
+export type CurriculumMode = 'sequential' | 'weekly'
+
+// CurriculumData stores BOTH items and weeks - mode determines which editor to show
+// This prevents data loss when toggling between modes
+export interface CurriculumData {
+  mode: CurriculumMode
+  items: CurriculumSequentialItem[]
+  weeks: CurriculumWeek[]
+}
+
+export interface CurriculumEditorProps {
+  /** Current curriculum value */
+  value: CurriculumData | null | undefined
+  /** Callback when curriculum changes */
+  onChange: (curriculum: CurriculumData) => void
+  /** Whether the form is submitting */
+  disabled?: boolean
+  /** Label for the field */
+  label?: string
+  /** Hint text */
+  hint?: string
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export const CurriculumEditor = ({
+  value,
+  onChange,
+  disabled = false,
+  label = 'Curriculum',
+  hint
+}: CurriculumEditorProps) => {
+  // Default to sequential mode with empty items/weeks
+  const currentMode: CurriculumMode = value?.mode || 'sequential'
+  const [expandedItem, setExpandedItem] = React.useState<string | undefined>(undefined)
+  const [expandedWeek, setExpandedWeek] = React.useState<string | undefined>(undefined)
+
+  // Get items and weeks - both are always available in the data structure
+  const sequentialItems: CurriculumSequentialItem[] = value?.items || []
+  const weeklyData: CurriculumWeek[] = value?.weeks || []
+
+  // ========== Mode Change ==========
+  // Simply switch the mode - data for both modes is preserved
+  const handleModeChange = (newMode: CurriculumMode) => {
+    if (newMode === currentMode) return
+    onChange({
+      mode: newMode,
+      items: sequentialItems,
+      weeks: weeklyData
+    })
+  }
+
+  // ========== Sequential Mode Handlers ==========
+  const addSequentialItem = () => {
+    const newItems = [...sequentialItems, { title: '', description: '' }]
+    onChange({ mode: currentMode, items: newItems, weeks: weeklyData })
+    setExpandedItem(`item-${newItems.length}`)
+  }
+
+  const removeSequentialItem = (index: number) => {
+    const newItems = sequentialItems.filter((_, i) => i !== index)
+    onChange({ mode: currentMode, items: newItems, weeks: weeklyData })
+  }
+
+  const updateSequentialItem = (
+    index: number,
+    field: keyof CurriculumSequentialItem,
+    newValue: string
+  ) => {
+    const newItems = [...sequentialItems]
+    newItems[index] = { ...newItems[index], [field]: newValue }
+    onChange({ mode: currentMode, items: newItems, weeks: weeklyData })
+  }
+
+  // ========== Weekly Mode Handlers ==========
+  const addWeek = () => {
+    const nextWeekNumber =
+      weeklyData.length > 0 ? Math.max(...weeklyData.map((w) => w.weekNumber)) + 1 : 1
+    const newWeeks: CurriculumWeek[] = [
+      ...weeklyData,
+      { weekNumber: nextWeekNumber, weekTitle: '', weekDescription: '', items: [] }
+    ]
+    onChange({ mode: currentMode, items: sequentialItems, weeks: newWeeks })
+    setExpandedWeek(`week-${newWeeks.length}`)
+  }
+
+  const removeWeek = (weekIndex: number) => {
+    const newWeeks = weeklyData.filter((_, i) => i !== weekIndex)
+    // Renumber weeks
+    const renumberedWeeks = newWeeks.map((week, i) => ({ ...week, weekNumber: i + 1 }))
+    onChange({ mode: currentMode, items: sequentialItems, weeks: renumberedWeeks })
+  }
+
+  const updateWeek = (
+    weekIndex: number,
+    field: 'weekTitle' | 'weekDescription' | 'durationHours',
+    newValue: string | number
+  ) => {
+    const newWeeks = [...weeklyData]
+    newWeeks[weekIndex] = { ...newWeeks[weekIndex], [field]: newValue }
+    onChange({ mode: currentMode, items: sequentialItems, weeks: newWeeks })
+  }
+
+  const addWeekItem = (weekIndex: number) => {
+    const newWeeks = [...weeklyData]
+    newWeeks[weekIndex] = {
+      ...newWeeks[weekIndex],
+      items: [...newWeeks[weekIndex].items, { title: '', description: '' }]
+    }
+    onChange({ mode: currentMode, items: sequentialItems, weeks: newWeeks })
+  }
+
+  const removeWeekItem = (weekIndex: number, itemIndex: number) => {
+    const newWeeks = [...weeklyData]
+    newWeeks[weekIndex] = {
+      ...newWeeks[weekIndex],
+      items: newWeeks[weekIndex].items.filter((_, i) => i !== itemIndex)
+    }
+    onChange({ mode: currentMode, items: sequentialItems, weeks: newWeeks })
+  }
+
+  const updateWeekItem = (
+    weekIndex: number,
+    itemIndex: number,
+    field: keyof CurriculumWeeklyItem,
+    newValue: string
+  ) => {
+    const newWeeks = [...weeklyData]
+    const newItems = [...newWeeks[weekIndex].items]
+    newItems[itemIndex] = { ...newItems[itemIndex], [field]: newValue }
+    newWeeks[weekIndex] = { ...newWeeks[weekIndex], items: newItems }
+    onChange({ mode: currentMode, items: sequentialItems, weeks: newWeeks })
+  }
+
+  // ========== Render ==========
+  return (
+    <div className="space-y-4">
+      {/* Header with mode toggle */}
+      <div className="flex items-center justify-between">
+        <FormLabel className="text-base">{label}</FormLabel>
+        <ToggleGroup
+          type="single"
+          value={currentMode}
+          onValueChange={(val) => val && handleModeChange(val as CurriculumMode)}
+          disabled={disabled}
+          className="bg-muted rounded-md corner-squircle p-0.5"
+        >
+          <ToggleGroupItem
+            value="sequential"
+            size="sm"
+            className="text-xs px-3 data-[state=on]:bg-background data-[state=on]:shadow-sm"
+          >
+            Sequential
+          </ToggleGroupItem>
+          <ToggleGroupItem
+            value="weekly"
+            size="sm"
+            className="text-xs px-3 data-[state=on]:bg-background data-[state=on]:shadow-sm"
+          >
+            Weekly
+          </ToggleGroupItem>
+        </ToggleGroup>
+      </div>
+
+      {hint && <FormDescription>{hint}</FormDescription>}
+
+      {/* Sequential Mode */}
+      {currentMode === 'sequential' && (
+        <SequentialEditor
+          items={sequentialItems}
+          expandedItem={expandedItem}
+          setExpandedItem={setExpandedItem}
+          disabled={disabled}
+          onAdd={addSequentialItem}
+          onRemove={removeSequentialItem}
+          onUpdate={updateSequentialItem}
+        />
+      )}
+
+      {/* Weekly Mode */}
+      {currentMode === 'weekly' && (
+        <WeeklyEditor
+          weeks={weeklyData}
+          expandedWeek={expandedWeek}
+          setExpandedWeek={setExpandedWeek}
+          disabled={disabled}
+          onAddWeek={addWeek}
+          onRemoveWeek={removeWeek}
+          onUpdateWeek={updateWeek}
+          onAddItem={addWeekItem}
+          onRemoveItem={removeWeekItem}
+          onUpdateItem={updateWeekItem}
+        />
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Sequential Editor Sub-component
+// ============================================================================
+
+interface SequentialEditorProps {
+  items: CurriculumSequentialItem[]
+  expandedItem: string | undefined
+  setExpandedItem: (value: string | undefined) => void
+  disabled: boolean
+  onAdd: () => void
+  onRemove: (index: number) => void
+  onUpdate: (index: number, field: keyof CurriculumSequentialItem, value: string) => void
+}
+
+const SequentialEditor = ({
+  items,
+  expandedItem,
+  setExpandedItem,
+  disabled,
+  onAdd,
+  onRemove,
+  onUpdate
+}: SequentialEditorProps) => {
+  if (items.length === 0) {
+    return (
+      <Placeholder
+        label="No curriculum items added yet"
+        description="Add items to build your curriculum content."
+        action={
+          <Button type="button" variant="outline" size="lg" onClick={onAdd} disabled={disabled}>
+            <Plus className="size-4 mr-2" />
+            Add Item
+          </Button>
+        }
+      />
+    )
+  }
+
+  return (
+    <div className="space-y-5">
+      <div className="flex items-center justify-between">
+        <FormLabel className="text-base">Items</FormLabel>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onAdd}
+          disabled={disabled || items.length >= 50}
+        >
+          <Plus className="size-3" />
+          Add Item
+        </Button>
+      </div>
+
+      <Accordion
+        type="single"
+        collapsible
+        className="w-full gap-1 flex flex-col"
+        value={expandedItem}
+        onValueChange={setExpandedItem}
+      >
+        {items.map((item, index) => (
+          <AccordionItem key={index} value={`item-${index + 1}`} className="p-0 border-none">
+            <div className="space-y-5 rounded-lg border p-4 bg-secondary/50 corner-squircle [&_h3]:m-0 w-full">
+              <AccordionTrigger className="flex items-center p-0 justify-between w-full">
+                <div className="flex w-full items-center justify-between">
+                  <h4 className="text-sm font-medium w-full">
+                    {item.title || `Item ${index + 1}`}
+                  </h4>
+                  <Button asChild variant="ghost" size="sm" disabled={disabled}>
+                    <span
+                      role="button"
+                      tabIndex={0}
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        onRemove(index)
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault()
+                          e.stopPropagation()
+                          onRemove(index)
+                        }
+                      }}
+                      className="cursor-pointer"
+                    >
+                      <X className="size-3" />
+                    </span>
+                  </Button>
+                </div>
+              </AccordionTrigger>
+              <AccordionContent className="flex flex-col gap-4 px-1">
+                <Separator className="mt-2" />
+                <div className="space-y-5">
+                  <div className="space-y-2">
+                    <span className="text-sm font-medium">Title</span>
+                    <Input
+                      value={item.title || ''}
+                      onChange={(e) => onUpdate(index, 'title', e.target.value)}
+                      placeholder="Enter title"
+                      disabled={disabled}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <span className="text-sm font-medium">Description</span>
+                    <Textarea
+                      value={item.description || ''}
+                      onChange={(e) => onUpdate(index, 'description', e.target.value)}
+                      placeholder="Enter description"
+                      disabled={disabled}
+                      className="min-h-[80px] resize-y"
+                    />
+                  </div>
+                </div>
+              </AccordionContent>
+            </div>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  )
+}
+
+// ============================================================================
+// Weekly Editor Sub-component
+// ============================================================================
+
+interface WeeklyEditorProps {
+  weeks: CurriculumWeek[]
+  expandedWeek: string | undefined
+  setExpandedWeek: (value: string | undefined) => void
+  disabled: boolean
+  onAddWeek: () => void
+  onRemoveWeek: (weekIndex: number) => void
+  onUpdateWeek: (
+    weekIndex: number,
+    field: 'weekTitle' | 'weekDescription' | 'durationHours',
+    value: string | number
+  ) => void
+  onAddItem: (weekIndex: number) => void
+  onRemoveItem: (weekIndex: number, itemIndex: number) => void
+  onUpdateItem: (
+    weekIndex: number,
+    itemIndex: number,
+    field: keyof CurriculumWeeklyItem,
+    value: string
+  ) => void
+}
+
+const WeeklyEditor = ({
+  weeks,
+  expandedWeek,
+  setExpandedWeek,
+  disabled,
+  onAddWeek,
+  onRemoveWeek,
+  onUpdateWeek,
+  onAddItem,
+  onRemoveItem,
+  onUpdateItem
+}: WeeklyEditorProps) => {
+  if (weeks.length === 0) {
+    return (
+      <Placeholder
+        label="No weeks added yet"
+        description="Add weeks to organize your curriculum by time periods."
+        action={
+          <Button type="button" variant="outline" size="lg" onClick={onAddWeek} disabled={disabled}>
+            <Plus className="size-4 mr-2" />
+            Add Week
+          </Button>
+        }
+      />
+    )
+  }
+
+  return (
+    <div className="space-y-5">
+      <div className="flex items-center justify-between">
+        <FormLabel className="text-base">Weeks</FormLabel>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={onAddWeek}
+          disabled={disabled || weeks.length >= 20}
+        >
+          <Plus className="size-3" />
+          Add Week
+        </Button>
+      </div>
+
+      <Accordion
+        type="single"
+        collapsible
+        className="w-full gap-1 flex flex-col"
+        value={expandedWeek}
+        onValueChange={setExpandedWeek}
+      >
+        {weeks.map((week, weekIndex) => (
+          <AccordionItem
+            key={weekIndex}
+            value={`week-${weekIndex + 1}`}
+            className="p-0 border-none"
+          >
+            <div className="space-y-5 rounded-lg border p-4 bg-secondary/50 corner-squircle [&_h3]:m-0 w-full">
+              <AccordionTrigger className="flex items-center p-0 justify-between w-full">
+                <div className="flex w-full items-center justify-between">
+                  <div className="flex flex-col items-start">
+                    <h4 className="text-sm font-medium">
+                      Week {week.weekNumber}
+                      {week.weekTitle && `: ${week.weekTitle}`}
+                    </h4>
+                    {week.durationHours && (
+                      <span className="text-xs text-muted-foreground flex items-center gap-1">
+                        <Clock className="size-3" />
+                        {week.durationHours} hours
+                      </span>
+                    )}
+                  </div>
+                  <Button asChild variant="ghost" size="sm" disabled={disabled}>
+                    <span
+                      role="button"
+                      tabIndex={0}
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        onRemoveWeek(weekIndex)
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault()
+                          e.stopPropagation()
+                          onRemoveWeek(weekIndex)
+                        }
+                      }}
+                      className="cursor-pointer"
+                    >
+                      <X className="size-3" />
+                    </span>
+                  </Button>
+                </div>
+              </AccordionTrigger>
+
+              <AccordionContent className="flex flex-col gap-4 px-1">
+                <Separator className="mt-2" />
+
+                {/* Week metadata */}
+                <div className="grid gap-4 sm:grid-cols-2">
+                  <div className="space-y-2">
+                    <span className="text-sm font-medium">Week Title (optional)</span>
+                    <Input
+                      value={week.weekTitle || ''}
+                      onChange={(e) => onUpdateWeek(weekIndex, 'weekTitle', e.target.value)}
+                      placeholder="e.g., Introduction"
+                      disabled={disabled}
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <span className="text-sm font-medium">Duration (hours)</span>
+                    <Input
+                      type="number"
+                      value={week.durationHours || ''}
+                      onChange={(e) =>
+                        onUpdateWeek(
+                          weekIndex,
+                          'durationHours',
+                          e.target.value ? Number(e.target.value) : 0
+                        )
+                      }
+                      placeholder="e.g., 10"
+                      disabled={disabled}
+                      min={0}
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-2">
+                  <span className="text-sm font-medium">Week Overview (optional)</span>
+                  <Textarea
+                    value={week.weekDescription || ''}
+                    onChange={(e) => onUpdateWeek(weekIndex, 'weekDescription', e.target.value)}
+                    placeholder="Brief overview of what students will learn this week..."
+                    disabled={disabled}
+                    className="min-h-[60px] resize-y"
+                  />
+                </div>
+
+                <Separator />
+
+                {/* Week items */}
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium text-muted-foreground">
+                      Topics ({week.items.length})
+                    </span>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={() => onAddItem(weekIndex)}
+                      disabled={disabled || week.items.length >= 20}
+                    >
+                      <Plus className="size-3" />
+                      Add Topic
+                    </Button>
+                  </div>
+
+                  {week.items.length === 0 ? (
+                    <div className="rounded-md corner-squircle border border-dashed p-4 text-center text-sm text-muted-foreground">
+                      No topics added yet. Click &quot;Add Topic&quot; to add content.
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {week.items.map((item, itemIndex) => (
+                        <div
+                          key={itemIndex}
+                          className="group relative rounded-md corner-squircle border p-3 bg-background"
+                        >
+                          <div className="flex gap-3">
+                            <span className="text-xs font-medium text-muted-foreground pt-2">
+                              {itemIndex + 1}.
+                            </span>
+                            <div className="flex-1 space-y-3">
+                              <Input
+                                value={item.title || ''}
+                                onChange={(e) =>
+                                  onUpdateItem(weekIndex, itemIndex, 'title', e.target.value)
+                                }
+                                placeholder="Topic title"
+                                disabled={disabled}
+                                className="h-8 text-sm"
+                              />
+                              <Textarea
+                                value={item.description || ''}
+                                onChange={(e) =>
+                                  onUpdateItem(weekIndex, itemIndex, 'description', e.target.value)
+                                }
+                                placeholder="Topic description (optional)"
+                                disabled={disabled}
+                                className="min-h-[50px] resize-y text-sm"
+                              />
+                            </div>
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              onClick={() => onRemoveItem(weekIndex, itemIndex)}
+                              disabled={disabled}
+                              className="size-7 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                            >
+                              <X className="size-3" />
+                            </Button>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </AccordionContent>
+            </div>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </div>
+  )
+}

package/templates/ui/date-picker.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+import { cn } from '@cms/utils/cn'
+import { format } from 'date-fns'
+import { CalendarIcon } from 'lucide-react'
+import * as React from 'react'
+import { Button } from './button'
+import { Calendar } from './calendar'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
+
+interface DatePickerProps {
+  value?: string
+  onChange?: (value: string) => void
+  disabled?: boolean
+  placeholder?: string
+  className?: string
+  /** Start year for the year dropdown (defaults to 1900) */
+  startYear?: number
+  /** End year for the year dropdown (defaults to current year + 100) */
+  endYear?: number
+}
+
+export function DatePicker({
+  value,
+  onChange,
+  disabled,
+  placeholder = 'Pick a date',
+  className,
+  startYear = 2022,
+  endYear = new Date().getFullYear() + 5
+}: DatePickerProps) {
+  const [date, setDate] = React.useState<Date | undefined>(value ? new Date(value) : undefined)
+  const [open, setOpen] = React.useState(false)
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="lg"
+          className={cn(
+            'w-full justify-start text-left font-normal pl-3!',
+            !date && 'text-muted-foreground',
+            className
+          )}
+          disabled={disabled}
+        >
+          <CalendarIcon className="size-4" />
+          {date ? format(date, 'PPP') : <span>{placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0 overflow-hidden" align="start">
+        <Calendar
+          mode="single"
+          selected={date}
+          captionLayout="dropdown"
+          startMonth={new Date(startYear, 0)}
+          endMonth={new Date(endYear, 11)}
+          onSelect={(_date) => {
+            setDate(_date)
+            if (onChange) {
+              onChange(_date ? format(_date, 'yyyy-MM-dd') : '')
+            }
+            setOpen(false)
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}