@startsimpli/ui 0.4.13 → 0.4.15

package/src/components/__tests__/workspace.test.tsx

@@ -0,0 +1,106 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { SplitPane } from '../workspace/SplitPane'
+import { DualPaneWorkspace } from '../workspace/DualPaneWorkspace'
+
+describe('SplitPane', () => {
+  it('renders both panes', () => {
+    render(<SplitPane first={<div>LEFT</div>} second={<div>RIGHT</div>} />)
+    expect(screen.getByText('LEFT')).toBeInTheDocument()
+    expect(screen.getByText('RIGHT')).toBeInTheDocument()
+  })
+
+  it('exposes an accessible resizer separator with aria values', () => {
+    render(
+      <SplitPane
+        first={<div>L</div>}
+        second={<div>R</div>}
+        initialSize={40}
+        minSize={20}
+        maxSize={80}
+      />
+    )
+    const sep = screen.getByRole('separator')
+    expect(sep).toHaveAttribute('aria-orientation', 'vertical')
+    expect(sep).toHaveAttribute('aria-valuenow', '40')
+    expect(sep).toHaveAttribute('aria-valuemin', '20')
+    expect(sep).toHaveAttribute('aria-valuemax', '80')
+  })
+
+  it('grows the first pane on ArrowRight and shrinks on ArrowLeft', () => {
+    const onResize = jest.fn()
+    render(
+      <SplitPane first={<div>L</div>} second={<div>R</div>} initialSize={50} onResize={onResize} />
+    )
+    const sep = screen.getByRole('separator')
+    fireEvent.keyDown(sep, { key: 'ArrowRight' })
+    expect(Number(sep.getAttribute('aria-valuenow'))).toBeGreaterThan(50)
+    fireEvent.keyDown(sep, { key: 'ArrowLeft' })
+    fireEvent.keyDown(sep, { key: 'ArrowLeft' })
+    expect(Number(sep.getAttribute('aria-valuenow'))).toBeLessThan(50)
+    expect(onResize).toHaveBeenCalled()
+  })
+
+  it('clamps size to min/max', () => {
+    render(<SplitPane first={<div>L</div>} second={<div>R</div>} initialSize={22} minSize={20} maxSize={80} />)
+    const sep = screen.getByRole('separator')
+    // hammer left many times — must not drop below min
+    for (let i = 0; i < 20; i++) fireEvent.keyDown(sep, { key: 'ArrowLeft' })
+    expect(Number(sep.getAttribute('aria-valuenow'))).toBe(20)
+  })
+
+  it('persists size to localStorage when storageKey is set', () => {
+    window.localStorage.clear()
+    render(<SplitPane first={<div>L</div>} second={<div>R</div>} initialSize={50} storageKey="sp-test" />)
+    const sep = screen.getByRole('separator')
+    fireEvent.keyDown(sep, { key: 'ArrowRight' })
+    expect(window.localStorage.getItem('sp-test')).not.toBeNull()
+  })
+})
+
+describe('DualPaneWorkspace', () => {
+  it('renders left and right content with labels and an optional toolbar', () => {
+    render(
+      <DualPaneWorkspace
+        leftLabel="Chat"
+        rightLabel="Slides"
+        toolbar={<div>TOOLBAR</div>}
+        left={<div>CHAT_PANE</div>}
+        right={<div>SLIDES_PANE</div>}
+        layout="split"
+      />
+    )
+    expect(screen.getByText('CHAT_PANE')).toBeInTheDocument()
+    expect(screen.getByText('SLIDES_PANE')).toBeInTheDocument()
+    expect(screen.getByText('TOOLBAR')).toBeInTheDocument()
+  })
+
+  it('stacks panes when layout="stack"', () => {
+    const { container } = render(
+      <DualPaneWorkspace left={<div>L</div>} right={<div>R</div>} layout="stack" />
+    )
+    const root = container.querySelector('[data-layout="stack"]')
+    expect(root).toBeInTheDocument()
+    // both panes still rendered when stacked
+    expect(screen.getByText('L')).toBeInTheDocument()
+    expect(screen.getByText('R')).toBeInTheDocument()
+  })
+
+  it('collapses a pane when collapsible and the collapse control is used', () => {
+    render(
+      <DualPaneWorkspace
+        leftLabel="Chat"
+        rightLabel="Slides"
+        left={<div>CHAT_PANE</div>}
+        right={<div>SLIDES_PANE</div>}
+        layout="split"
+        collapsible
+      />
+    )
+    const collapseLeft = screen.getByRole('button', { name: /collapse chat/i })
+    fireEvent.click(collapseLeft)
+    expect(screen.queryByText('CHAT_PANE')).not.toBeInTheDocument()
+    // right still visible, and an expand affordance appears
+    expect(screen.getByText('SLIDES_PANE')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /expand chat/i })).toBeInTheDocument()
+  })
+})

package/src/components/account/__tests__/account.test.tsx

@@ -148,11 +148,11 @@ describe('ChangePasswordForm', () => {
     jest.clearAllMocks()
   })
 
-  it('renders all three password fields', () => {
+  it('renders both password fields (current + new, no confirm — startsim-nbq)', () => {
     render(<ChangePasswordForm {...defaultPasswordProps} />)
     expect(screen.getByLabelText('Current password')).toBeInTheDocument()
     expect(screen.getByLabelText('New password')).toBeInTheDocument()
-    expect(screen.getByLabelText('Confirm new password')).toBeInTheDocument()
+    expect(screen.queryByLabelText('Confirm new password')).not.toBeInTheDocument()
   })
 
   it('submit button is disabled when fields are empty', () => {
@@ -165,7 +165,6 @@ describe('ChangePasswordForm', () => {
 
     changeInput(screen.getByLabelText('Current password'), 'oldpassword')
     changeInput(screen.getByLabelText('New password'), 'short')
-    changeInput(screen.getByLabelText('Confirm new password'), 'short')
 
     expect(screen.getByRole('button', { name: /change password/i })).toBeDisabled()
   })
@@ -182,40 +181,21 @@ describe('ChangePasswordForm', () => {
     expect(screen.queryByText('Must be at least 8 characters.')).not.toBeInTheDocument()
   })
 
-  it('submit button is disabled when passwords do not match', () => {
+  it('submit button is enabled when current + new (>=8) are filled', () => {
     render(<ChangePasswordForm {...defaultPasswordProps} />)
 
     changeInput(screen.getByLabelText('Current password'), 'oldpassword')
     changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'different123')
-
-    expect(screen.getByRole('button', { name: /change password/i })).toBeDisabled()
-  })
-
-  it('shows mismatch hint when confirm does not match', () => {
-    render(<ChangePasswordForm {...defaultPasswordProps} />)
-    changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'different123')
-    expect(screen.getByText('Passwords do not match.')).toBeInTheDocument()
-  })
-
-  it('submit button is enabled when all fields are valid', () => {
-    render(<ChangePasswordForm {...defaultPasswordProps} />)
-
-    changeInput(screen.getByLabelText('Current password'), 'oldpassword')
-    changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'newpassword1')
 
     expect(screen.getByRole('button', { name: /change password/i })).toBeEnabled()
   })
 
-  it('calls onSubmit with correct payload', async () => {
+  it('calls onSubmit with { old_password, new_password } — no confirm', async () => {
     const onSubmit = jest.fn().mockResolvedValue(undefined)
     render(<ChangePasswordForm onSubmit={onSubmit} />)
 
     changeInput(screen.getByLabelText('Current password'), 'oldpassword')
     changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'newpassword1')
 
     fireEvent.click(screen.getByRole('button', { name: /change password/i }))
 
@@ -223,7 +203,6 @@ describe('ChangePasswordForm', () => {
       expect(onSubmit).toHaveBeenCalledWith({
         old_password: 'oldpassword',
         new_password: 'newpassword1',
-        new_password_confirm: 'newpassword1',
       })
     })
   })
@@ -234,7 +213,6 @@ describe('ChangePasswordForm', () => {
 
     changeInput(screen.getByLabelText('Current password'), 'oldpassword')
     changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'newpassword1')
 
     fireEvent.click(screen.getByRole('button', { name: /change password/i }))
 
@@ -244,7 +222,6 @@ describe('ChangePasswordForm', () => {
 
     expect(screen.getByLabelText('Current password')).toHaveValue('')
     expect(screen.getByLabelText('New password')).toHaveValue('')
-    expect(screen.getByLabelText('Confirm new password')).toHaveValue('')
   })
 
   it('calls onSuccess callback after successful submit', async () => {
@@ -254,7 +231,6 @@ describe('ChangePasswordForm', () => {
 
     changeInput(screen.getByLabelText('Current password'), 'oldpassword')
     changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'newpassword1')
 
     fireEvent.click(screen.getByRole('button', { name: /change password/i }))
 
@@ -269,7 +245,6 @@ describe('ChangePasswordForm', () => {
 
     changeInput(screen.getByLabelText('Current password'), 'wrongold')
     changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'newpassword1')
 
     fireEvent.click(screen.getByRole('button', { name: /change password/i }))
 
@@ -284,7 +259,6 @@ describe('ChangePasswordForm', () => {
 
     changeInput(screen.getByLabelText('Current password'), 'wrongold')
     changeInput(screen.getByLabelText('New password'), 'newpassword1')
-    changeInput(screen.getByLabelText('Confirm new password'), 'newpassword1')
 
     fireEvent.click(screen.getByRole('button', { name: /change password/i }))
 
@@ -293,11 +267,10 @@ describe('ChangePasswordForm', () => {
     })
   })
 
-  it('disables all inputs when disabled prop is true', () => {
+  it('disables both inputs when disabled prop is true', () => {
     render(<ChangePasswordForm {...defaultPasswordProps} disabled />)
     expect(screen.getByLabelText('Current password')).toBeDisabled()
     expect(screen.getByLabelText('New password')).toBeDisabled()
-    expect(screen.getByLabelText('Confirm new password')).toBeDisabled()
   })
 
   it('renders card heading', () => {

package/src/components/account/change-password-form.tsx

@@ -11,7 +11,6 @@ export interface ChangePasswordFormProps {
   onSubmit: (values: {
     old_password: string
     new_password: string
-    new_password_confirm: string
   }) => Promise<void>
   /** Called after a successful password change (e.g. to sign out) */
   onSuccess?: () => void
@@ -21,38 +20,27 @@ export interface ChangePasswordFormProps {
 export function ChangePasswordForm({ onSubmit, onSuccess, disabled }: ChangePasswordFormProps) {
   const [oldPassword, setOldPassword] = useState('')
   const [newPassword, setNewPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
   const [saving, setSaving] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [success, setSuccess] = useState(false)
 
-  const isValid =
-    oldPassword.length > 0 &&
-    newPassword.length >= 8 &&
-    newPassword === confirmPassword
+  const isValid = oldPassword.length > 0 && newPassword.length >= 8
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError(null)
     setSuccess(false)
 
-    if (newPassword !== confirmPassword) {
-      setError('New passwords do not match.')
-      return
-    }
-
     setSaving(true)
 
     try {
       await onSubmit({
         old_password: oldPassword,
         new_password: newPassword,
-        new_password_confirm: confirmPassword,
       })
       setSuccess(true)
       setOldPassword('')
       setNewPassword('')
-      setConfirmPassword('')
       onSuccess?.()
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to change password')
@@ -100,21 +88,6 @@ export function ChangePasswordForm({ onSubmit, onSuccess, disabled }: ChangePass
             )}
           </div>
 
-          <div className="space-y-2">
-            <Label htmlFor="cp-confirm-password">Confirm new password</Label>
-            <Input
-              id="cp-confirm-password"
-              type="password"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-              disabled={disabled || saving}
-              autoComplete="new-password"
-            />
-            {confirmPassword.length > 0 && newPassword !== confirmPassword && (
-              <p className="text-xs text-destructive">Passwords do not match.</p>
-            )}
-          </div>
-
           {error && (
             <p className="text-sm text-destructive">{error}</p>
           )}

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

@@ -0,0 +1,253 @@
+"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
+  /**
+   * Per-event styling. Receives the original CalendarEvent (with resource)
+   * and returns optional className / inline style applied to the rendered
+   * event block. Useful for color-coding by source (e.g. real Outlook event
+   * vs locally-scheduled meeting).
+   */
+  eventPropGetter?: (event: CalendarEvent<T>) => {
+    className?: string
+    style?: React.CSSProperties
+  }
+  /**
+   * When the month grid runs out of vertical space, react-big-calendar
+   * collapses the overflow into a "+N more" link. Set true (default) to
+   * open the day's full event list as a popover when that link is clicked.
+   */
+  popup?: boolean
+}
+
+/**
+ * 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,
+  eventPropGetter,
+  popup = true,
+}: 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],
+  )
+
+  const rbcEventPropGetter = React.useCallback(
+    (rbcEvent: object) => {
+      if (!eventPropGetter) return {}
+      const id = (rbcEvent as InternalRBCEvent).id
+      const original = eventByInternalId.get(id)
+      if (!original) return {}
+      return eventPropGetter(original)
+    },
+    [eventPropGetter, eventByInternalId],
+  )
+
+  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}
+        popup={popup}
+        eventPropGetter={eventPropGetter ? rbcEventPropGetter : undefined}
+        style={{ height: "100%", minHeight }}
+      />
+    </div>
+  )
+}

package/src/components/calendar/index.ts

@@ -0,0 +1,20 @@
+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"
+
+export { MeetingsList } from "./meetings-list"
+export type {
+  MeetingsListItem,
+  MeetingsListProps,
+  MeetingsListStatus,
+} from "./meetings-list"