@startsimpli/ui 0.4.13 → 0.4.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.13",
+  "version": "0.4.14",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -66,6 +66,7 @@
     "date-fns": "^3.6.0",
     "dompurify": "^3.4.1",
     "lucide-react": "^0.408.0",
+    "react-big-calendar": "^1.19.4",
     "react-day-picker": "^9.14.0",
     "tailwind-merge": "^2.6.1",
     "tailwindcss-animate": "^1.0.7",
@@ -81,6 +82,7 @@
     "@types/jest": "^30.0.0",
     "@types/node": "^20.19.39",
     "@types/react": "^19.2.14",
+    "@types/react-big-calendar": "^1.16.3",
     "@types/react-dom": "^19.2.3",
     "eslint": "^8.57.1",
     "identity-obj-proxy": "^3.0.0",

package/src/components/__tests__/calendar-view.test.tsx

@@ -0,0 +1,97 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { CalendarView, type CalendarEvent } from '../calendar/calendar-view'
+
+const FIXED_DATE = new Date('2026-04-15T12:00:00Z')
+
+const sampleEvents: CalendarEvent[] = [
+  {
+    id: 'meet-1',
+    title: 'Investor Sync — Sequoia',
+    start: new Date('2026-04-15T16:00:00Z'),
+    end: new Date('2026-04-15T16:30:00Z'),
+  },
+  {
+    id: 'meet-2',
+    title: 'Demo with Acme',
+    start: '2026-04-16T17:00:00Z',
+    end: '2026-04-16T17:45:00Z',
+  },
+]
+
+describe('CalendarView', () => {
+  it('renders without crashing in month view', () => {
+    render(
+      <CalendarView
+        events={sampleEvents}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+      />
+    )
+    // The toolbar's "Today" button is always rendered by react-big-calendar
+    expect(screen.getByText('Today')).toBeInTheDocument()
+  })
+
+  it('renders event titles on the grid', () => {
+    render(
+      <CalendarView
+        events={sampleEvents}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+      />
+    )
+    expect(screen.getByText(/Investor Sync — Sequoia/)).toBeInTheDocument()
+    expect(screen.getByText(/Demo with Acme/)).toBeInTheDocument()
+  })
+
+  it('fires onEventClick with the original event when an event is clicked', () => {
+    const onEventClick = jest.fn()
+    render(
+      <CalendarView
+        events={sampleEvents}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+        onEventClick={onEventClick}
+      />
+    )
+    fireEvent.click(screen.getByText(/Investor Sync — Sequoia/))
+    expect(onEventClick).toHaveBeenCalledTimes(1)
+    expect(onEventClick.mock.calls[0][0].id).toBe('meet-1')
+    expect(onEventClick.mock.calls[0][0].title).toBe('Investor Sync — Sequoia')
+  })
+
+  it('accepts string dates in events and normalizes them', () => {
+    // Verifies the toDate / normalizeEvent path
+    render(
+      <CalendarView
+        events={[
+          { id: 'x', title: 'Stringy', start: '2026-04-15T16:00:00Z' },
+        ]}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+      />
+    )
+    expect(screen.getByText(/Stringy/)).toBeInTheDocument()
+  })
+
+  it('passes through resource payload to onEventClick', () => {
+    interface MyMeeting {
+      uuid: string
+      attendees: number
+    }
+    const meeting: MyMeeting = { uuid: 'abc-123', attendees: 5 }
+    const onEventClick = jest.fn()
+    render(
+      <CalendarView<MyMeeting>
+        events={[
+          { id: 'r1', title: 'WithResource', start: FIXED_DATE, resource: meeting },
+        ]}
+        defaultDate={FIXED_DATE}
+        defaultView="month"
+        onEventClick={onEventClick}
+      />
+    )
+    fireEvent.click(screen.getByText(/WithResource/))
+    expect(onEventClick).toHaveBeenCalledTimes(1)
+    expect(onEventClick.mock.calls[0][0].resource).toEqual(meeting)
+  })
+})

package/src/components/__tests__/upcoming-meetings.test.tsx

@@ -0,0 +1,104 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { UpcomingMeetings, type UpcomingMeeting } from '../calendar/upcoming-meetings'
+
+const sampleMeetings: UpcomingMeeting[] = [
+  {
+    id: 1,
+    title: 'Sequoia partner sync',
+    scheduled_at: '2026-04-29T16:00:00Z',
+    status: 'confirmed',
+    investor_name: 'Roelof Botha',
+    investor_email: 'roelof@sequoia.com',
+    meeting_link: 'https://meet.google.com/abc',
+  },
+  {
+    id: 2,
+    title: 'Acme partner intro',
+    scheduled_at: '2026-04-30T14:00:00Z',
+    status: 'pending',
+    investor_email: 'partner@acme.vc',
+  },
+  {
+    id: 3,
+    title: 'Cancelled call',
+    scheduled_at: '2026-05-01T10:00:00Z',
+    status: 'cancelled',
+  },
+]
+
+describe('UpcomingMeetings', () => {
+  it('renders the title and each meeting title', () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} />)
+    expect(screen.getByText('Upcoming Meetings')).toBeInTheDocument()
+    expect(screen.getByText('Sequoia partner sync')).toBeInTheDocument()
+    expect(screen.getByText('Acme partner intro')).toBeInTheDocument()
+    expect(screen.getByText('Cancelled call')).toBeInTheDocument()
+  })
+
+  it('shows the right status badge per meeting', () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} />)
+    expect(screen.getByText('Confirmed')).toBeInTheDocument()
+    expect(screen.getByText('Pending')).toBeInTheDocument()
+    expect(screen.getByText('Cancelled')).toBeInTheDocument()
+  })
+
+  it('renders skeletons in loading state', () => {
+    const { container } = render(
+      <UpcomingMeetings meetings={[]} loading loadingRowCount={5} />
+    )
+    // Skeletons render as empty divs with animate-pulse — count them by class.
+    const skeletons = container.querySelectorAll('.animate-pulse')
+    expect(skeletons).toHaveLength(5)
+  })
+
+  it('renders empty state when no meetings', () => {
+    render(<UpcomingMeetings meetings={[]} />)
+    expect(screen.getByText('No upcoming meetings')).toBeInTheDocument()
+  })
+
+  it('does not render Schedule CTA when onSchedule is not provided', () => {
+    render(<UpcomingMeetings meetings={[]} />)
+    expect(screen.queryByText('Schedule one')).not.toBeInTheDocument()
+  })
+
+  it('renders Schedule CTA when onSchedule is provided and fires it on click', () => {
+    const onSchedule = jest.fn()
+    render(<UpcomingMeetings meetings={[]} onSchedule={onSchedule} />)
+    const cta = screen.getByText('Schedule one')
+    expect(cta).toBeInTheDocument()
+    fireEvent.click(cta)
+    expect(onSchedule).toHaveBeenCalledTimes(1)
+  })
+
+  it('fires onMeetingClick with the original meeting payload', () => {
+    const onMeetingClick = jest.fn()
+    render(<UpcomingMeetings meetings={sampleMeetings} onMeetingClick={onMeetingClick} />)
+    fireEvent.click(screen.getByText('Sequoia partner sync'))
+    expect(onMeetingClick).toHaveBeenCalledTimes(1)
+    expect(onMeetingClick.mock.calls[0][0].id).toBe(1)
+    expect(onMeetingClick.mock.calls[0][0].investor_name).toBe('Roelof Botha')
+  })
+
+  it('renders View all link when viewAllHref is provided', () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} viewAllHref="/calendar" />)
+    const link = screen.getByText('View all')
+    expect(link.closest('a')).toHaveAttribute('href', '/calendar')
+  })
+
+  it('renders Join link when meeting_link is set', () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} />)
+    const join = screen.getByText('Join')
+    expect(join.closest('a')).toHaveAttribute('href', 'https://meet.google.com/abc')
+  })
+
+  it("falls back to investor_email when investor_name is absent", () => {
+    render(<UpcomingMeetings meetings={sampleMeetings} />)
+    expect(screen.getByText('partner@acme.vc')).toBeInTheDocument()
+  })
+
+  it('uses a custom title when title prop is provided', () => {
+    render(<UpcomingMeetings meetings={[]} title="This Week's Calls" />)
+    expect(screen.getByText("This Week's Calls")).toBeInTheDocument()
+    expect(screen.queryByText('Upcoming Meetings')).not.toBeInTheDocument()
+  })
+})

package/src/components/calendar/calendar-view.tsx

@@ -0,0 +1,222 @@
+"use client"
+
+/**
+ * CalendarView — shared month/week/day event grid.
+ *
+ * Wraps react-big-calendar with a date-fns localizer pre-wired and a
+ * simplified event shape so consumers don't have to reach for raw RBC types.
+ *
+ * IMPORTANT: react-big-calendar ships its own CSS. Consumers must import
+ * `react-big-calendar/lib/css/react-big-calendar.css` once at the app level
+ * (e.g. in _app.tsx / layout.tsx). This package does NOT auto-inject CSS so
+ * consumers can layer Tailwind overrides predictably.
+ *
+ * lifecycle:calendar-ui (raise-simpli-k4u)
+ */
+
+import * as React from "react"
+import {
+  Calendar,
+  dateFnsLocalizer,
+  Views,
+  type View,
+  type SlotInfo,
+} from "react-big-calendar"
+import { format, parse, startOfWeek, getDay } from "date-fns"
+import { enUS } from "date-fns/locale"
+
+const locales = { "en-US": enUS }
+
+const localizer = dateFnsLocalizer({
+  format,
+  parse,
+  startOfWeek: () => startOfWeek(new Date(), { weekStartsOn: 0 }),
+  getDay,
+  locales,
+})
+
+/** Domain-friendly event shape callers pass in. */
+export interface CalendarEvent<T = unknown> {
+  /** Stable identifier — passed through to onEventClick payload */
+  id: string | number
+  /** Event title shown on the grid */
+  title: string
+  /** Event start (Date or ISO string) */
+  start: Date | string
+  /** Event end. If omitted, defaults to start + 30min */
+  end?: Date | string
+  /** Whether to render as all-day across the top of the day */
+  allDay?: boolean
+  /** Optional pass-through payload (the original ScheduledMeeting / etc.) */
+  resource?: T
+}
+
+interface InternalRBCEvent {
+  id: string | number
+  title: string
+  start: Date
+  end: Date
+  allDay: boolean
+  resource: unknown
+}
+
+const DEFAULT_DURATION_MS = 30 * 60 * 1000
+
+function toDate(value: Date | string): Date {
+  return value instanceof Date ? value : new Date(value)
+}
+
+function normalizeEvent(e: CalendarEvent): InternalRBCEvent {
+  const start = toDate(e.start)
+  const end = e.end ? toDate(e.end) : new Date(start.getTime() + DEFAULT_DURATION_MS)
+  return {
+    id: e.id,
+    title: e.title,
+    start,
+    end,
+    allDay: e.allDay ?? false,
+    resource: e.resource,
+  }
+}
+
+export type CalendarViewMode = "month" | "week" | "day" | "agenda"
+
+const VIEW_BY_MODE: Record<CalendarViewMode, View> = {
+  month: Views.MONTH,
+  week: Views.WEEK,
+  day: Views.DAY,
+  agenda: Views.AGENDA,
+}
+
+export interface CalendarViewProps<T = unknown> {
+  /** Events to render on the grid */
+  events: CalendarEvent<T>[]
+  /** Currently navigated date (controlled) */
+  date?: Date
+  /** Default date if uncontrolled */
+  defaultDate?: Date
+  /** Active view (controlled) */
+  view?: CalendarViewMode
+  /** Default view if uncontrolled */
+  defaultView?: CalendarViewMode
+  /** Allowed views the toolbar can switch between */
+  views?: CalendarViewMode[]
+  /** Fires when the user clicks an event. Receives the original event passed in. */
+  onEventClick?: (event: CalendarEvent<T>) => void
+  /** Fires when the user clicks an empty slot (or drags to select a range). */
+  onSlotClick?: (slot: { start: Date; end: Date; action: "click" | "select" }) => void
+  /** Fires when the user navigates to a new date. */
+  onNavigate?: (date: Date) => void
+  /** Fires when the user changes view. */
+  onViewChange?: (view: CalendarViewMode) => void
+  /** Allow drag-to-select empty time slots (defaults true). */
+  selectable?: boolean
+  /** Min height for the grid (default 600px). */
+  minHeight?: number
+  /** className passed to the wrapping div for Tailwind overrides. */
+  className?: string
+}
+
+/**
+ * Shared calendar grid. Pre-wired with date-fns localizer.
+ *
+ * @example
+ * import "react-big-calendar/lib/css/react-big-calendar.css"
+ * import { CalendarView } from "@startsimpli/ui"
+ *
+ * <CalendarView
+ *   events={meetings.map(m => ({
+ *     id: m.id,
+ *     title: m.title,
+ *     start: m.scheduled_at,
+ *     end: addMinutes(new Date(m.scheduled_at), m.duration_minutes),
+ *     resource: m,
+ *   }))}
+ *   onEventClick={e => openMeetingDialog(e.resource)}
+ *   onSlotClick={s => openCreateMeetingDialog(s.start)}
+ * />
+ */
+export function CalendarView<T = unknown>({
+  events,
+  date,
+  defaultDate,
+  view,
+  defaultView,
+  views,
+  onEventClick,
+  onSlotClick,
+  onNavigate,
+  onViewChange,
+  selectable = true,
+  minHeight = 600,
+  className,
+}: CalendarViewProps<T>) {
+  const normalized = React.useMemo(() => events.map(normalizeEvent), [events])
+
+  // Map our public CalendarEvent[] back from the internal event RBC hands us
+  // on click — keeps the consumer API clean (they only see what they passed).
+  const eventByInternalId = React.useMemo(() => {
+    const map = new Map<string | number, CalendarEvent<T>>()
+    for (const e of events) map.set(e.id, e)
+    return map
+  }, [events])
+
+  const handleSelectEvent = React.useCallback(
+    (rbcEvent: object) => {
+      const id = (rbcEvent as InternalRBCEvent).id
+      const original = eventByInternalId.get(id)
+      if (original && onEventClick) onEventClick(original)
+    },
+    [eventByInternalId, onEventClick],
+  )
+
+  const handleSelectSlot = React.useCallback(
+    (slot: SlotInfo) => {
+      if (!onSlotClick) return
+      onSlotClick({
+        start: slot.start as Date,
+        end: slot.end as Date,
+        action: slot.action === "select" ? "select" : "click",
+      })
+    },
+    [onSlotClick],
+  )
+
+  const handleViewChange = React.useCallback(
+    (v: View) => {
+      if (!onViewChange) return
+      const mode = (Object.entries(VIEW_BY_MODE).find(([, val]) => val === v)?.[0] ?? "month") as CalendarViewMode
+      onViewChange(mode)
+    },
+    [onViewChange],
+  )
+
+  const allowedViews = React.useMemo<View[]>(
+    () => (views ?? ["month", "week", "day", "agenda"]).map(v => VIEW_BY_MODE[v]),
+    [views],
+  )
+
+  return (
+    <div className={className} style={{ minHeight }}>
+      <Calendar
+        localizer={localizer}
+        events={normalized}
+        startAccessor="start"
+        endAccessor="end"
+        titleAccessor="title"
+        allDayAccessor="allDay"
+        date={date}
+        defaultDate={defaultDate}
+        view={view ? VIEW_BY_MODE[view] : undefined}
+        defaultView={defaultView ? VIEW_BY_MODE[defaultView] : undefined}
+        views={allowedViews}
+        onSelectEvent={handleSelectEvent}
+        onSelectSlot={handleSelectSlot}
+        onNavigate={onNavigate}
+        onView={handleViewChange}
+        selectable={selectable}
+        style={{ height: "100%", minHeight }}
+      />
+    </div>
+  )
+}

package/src/components/calendar/index.ts

@@ -0,0 +1,13 @@
+export { CalendarView } from "./calendar-view"
+export type {
+  CalendarEvent,
+  CalendarViewMode,
+  CalendarViewProps,
+} from "./calendar-view"
+
+export { UpcomingMeetings } from "./upcoming-meetings"
+export type {
+  UpcomingMeeting,
+  UpcomingMeetingStatus,
+  UpcomingMeetingsProps,
+} from "./upcoming-meetings"

package/src/components/calendar/upcoming-meetings.tsx

@@ -0,0 +1,211 @@
+"use client"
+
+/**
+ * UpcomingMeetings — sidebar/widget listing the next N meetings with status,
+ * date, time, and an optional join-link.
+ *
+ * Pure presentational. The consumer owns the data fetch + filtering — pass
+ * the already-filtered, already-sorted meetings via the `meetings` prop. This
+ * keeps the component decoupled from any specific API client or data shape
+ * beyond the small interface declared below.
+ *
+ * lifecycle:calendar-ui (raise-simpli-azc)
+ */
+
+import * as React from "react"
+import { CalendarDays, Clock, ExternalLink, Plus } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"
+import { Button } from "../ui/button"
+import { cn } from "../../utils"
+
+export type UpcomingMeetingStatus = "pending" | "confirmed" | "cancelled" | "completed"
+
+export interface UpcomingMeeting {
+  id: string | number
+  title: string
+  /** ISO 8601 timestamp string */
+  scheduled_at: string
+  status: UpcomingMeetingStatus
+  investor_name?: string
+  investor_email?: string
+  meeting_link?: string
+}
+
+export interface UpcomingMeetingsProps {
+  meetings: UpcomingMeeting[]
+  /** Whether the list is still loading. Renders skeletons. */
+  loading?: boolean
+  /** Optional click handler when a meeting row is clicked (whole row). */
+  onMeetingClick?: (meeting: UpcomingMeeting) => void
+  /** Optional URL for the "View all" header link. Hidden if absent. */
+  viewAllHref?: string
+  /** Optional click handler for the "View all" header link. Used instead of href if provided. */
+  onViewAll?: () => void
+  /** Optional click handler for the empty-state "Schedule one" CTA. Hidden if absent. */
+  onSchedule?: () => void
+  /** Custom class name for the outer Card. */
+  className?: string
+  /** Title shown in the card header. Defaults to "Upcoming Meetings". */
+  title?: string
+  /** Number of skeleton rows to show while loading. Defaults to 3. */
+  loadingRowCount?: number
+}
+
+const STATUS_BADGE: Record<UpcomingMeetingStatus, { label: string; className: string }> = {
+  pending: { label: "Pending", className: "bg-yellow-100 text-yellow-800" },
+  confirmed: { label: "Confirmed", className: "bg-green-100 text-green-800" },
+  cancelled: { label: "Cancelled", className: "bg-red-100 text-red-800" },
+  completed: { label: "Completed", className: "bg-gray-100 text-gray-800" },
+}
+
+function formatDate(isoStr: string): string {
+  return new Date(isoStr).toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+  })
+}
+
+function formatTime(isoStr: string): string {
+  return new Date(isoStr).toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+/**
+ * @example
+ * <UpcomingMeetings
+ *   meetings={upcoming}
+ *   loading={isLoading}
+ *   viewAllHref="/calendar"
+ *   onSchedule={() => setShowSchedule(true)}
+ * />
+ */
+export function UpcomingMeetings({
+  meetings,
+  loading = false,
+  onMeetingClick,
+  viewAllHref,
+  onViewAll,
+  onSchedule,
+  className,
+  title = "Upcoming Meetings",
+  loadingRowCount = 3,
+}: UpcomingMeetingsProps) {
+  return (
+    <Card className={className}>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="text-sm font-semibold flex items-center gap-2">
+            <CalendarDays className="h-4 w-4" />
+            {title}
+          </CardTitle>
+          {(viewAllHref || onViewAll) && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 text-xs"
+              asChild={!!viewAllHref && !onViewAll}
+              onClick={onViewAll}
+            >
+              {viewAllHref && !onViewAll ? <a href={viewAllHref}>View all</a> : <span>View all</span>}
+            </Button>
+          )}
+        </div>
+      </CardHeader>
+
+      <CardContent className="pt-0">
+        {loading ? (
+          <div className="space-y-2">
+            {Array.from({ length: loadingRowCount }).map((_, i) => (
+              <div key={i} className="h-14 bg-muted animate-pulse rounded-md" />
+            ))}
+          </div>
+        ) : meetings.length === 0 ? (
+          <div className="text-center py-6 text-muted-foreground">
+            <CalendarDays className="h-8 w-8 mx-auto mb-2 opacity-40" />
+            <p className="text-xs">No upcoming meetings</p>
+            {onSchedule && (
+              <Button variant="outline" size="sm" className="mt-3 h-7 text-xs" onClick={onSchedule}>
+                <Plus className="mr-1 h-3 w-3" />
+                Schedule one
+              </Button>
+            )}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {meetings.map(m => {
+              const badge = STATUS_BADGE[m.status]
+              const interactive = !!onMeetingClick
+              return (
+                <div
+                  key={m.id}
+                  role={interactive ? "button" : undefined}
+                  tabIndex={interactive ? 0 : undefined}
+                  onClick={interactive ? () => onMeetingClick(m) : undefined}
+                  onKeyDown={
+                    interactive
+                      ? e => {
+                          if (e.key === "Enter" || e.key === " ") {
+                            e.preventDefault()
+                            onMeetingClick(m)
+                          }
+                        }
+                      : undefined
+                  }
+                  className={cn(
+                    "border rounded-lg p-2.5 space-y-1 transition-colors",
+                    interactive && "hover:bg-muted/40 cursor-pointer",
+                  )}
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <p className="font-medium text-xs leading-tight line-clamp-1">{m.title}</p>
+                    <span
+                      className={cn(
+                        "text-[10px] px-1.5 py-0.5 rounded font-medium whitespace-nowrap shrink-0",
+                        badge.className,
+                      )}
+                    >
+                      {badge.label}
+                    </span>
+                  </div>
+
+                  {(m.investor_name || m.investor_email) && (
+                    <p className="text-[11px] text-muted-foreground truncate">
+                      {m.investor_name || m.investor_email}
+                    </p>
+                  )}
+
+                  <div className="flex items-center gap-3 text-[11px] text-muted-foreground">
+                    <span className="flex items-center gap-1">
+                      <CalendarDays className="h-3 w-3" />
+                      {formatDate(m.scheduled_at)}
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Clock className="h-3 w-3" />
+                      {formatTime(m.scheduled_at)}
+                    </span>
+                  </div>
+
+                  {m.meeting_link && (
+                    <a
+                      href={m.meeting_link}
+                      target="_blank"
+                      rel="noreferrer"
+                      onClick={e => e.stopPropagation()}
+                      className="flex items-center gap-1 text-[11px] text-primary hover:underline"
+                    >
+                      <ExternalLink className="h-3 w-3" />
+                      Join
+                    </a>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/src/components/index.ts

@@ -110,6 +110,9 @@ export * from './lists'
 // Pipeline components (StageTransitionModal)
 export * from './pipeline'
 
+// Calendar (month/week/day event grid wrapping react-big-calendar)
+export * from './calendar'
+
 // Activity components (timeline, quick log, log dialog)
 export { ActivityTimeline } from './ActivityTimeline'
 export type { ActivityTimelineProps, ActivityTimelineItem } from './ActivityTimeline'