@startsimpli/ui 0.4.6 → 0.4.8

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

@@ -0,0 +1,315 @@
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
+import { ProfileForm } from '../profile-form'
+import { ChangePasswordForm } from '../change-password-form'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function changeInput(element: HTMLElement, value: string) {
+  fireEvent.change(element, { target: { value } })
+}
+
+// ---------------------------------------------------------------------------
+// ProfileForm
+// ---------------------------------------------------------------------------
+
+const defaultProfileProps = {
+  initialValues: { firstName: 'Jane', lastName: 'Doe', email: 'jane@example.com' },
+  onSubmit: jest.fn(),
+}
+
+describe('ProfileForm', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders all fields with initial values', () => {
+    render(<ProfileForm {...defaultProfileProps} />)
+
+    expect(screen.getByLabelText('Email')).toHaveValue('jane@example.com')
+    expect(screen.getByLabelText('First name')).toHaveValue('Jane')
+    expect(screen.getByLabelText('Last name')).toHaveValue('Doe')
+  })
+
+  it('email field is always disabled', () => {
+    render(<ProfileForm {...defaultProfileProps} />)
+    expect(screen.getByLabelText('Email')).toBeDisabled()
+  })
+
+  it('save button is disabled when no changes have been made', () => {
+    render(<ProfileForm {...defaultProfileProps} />)
+    expect(screen.getByRole('button', { name: /save changes/i })).toBeDisabled()
+  })
+
+  it('save button becomes enabled after editing first name', () => {
+    render(<ProfileForm {...defaultProfileProps} />)
+    changeInput(screen.getByLabelText('First name'), 'John')
+    expect(screen.getByRole('button', { name: /save changes/i })).toBeEnabled()
+  })
+
+  it('save button becomes enabled after editing last name', () => {
+    render(<ProfileForm {...defaultProfileProps} />)
+    changeInput(screen.getByLabelText('Last name'), 'Smith')
+    expect(screen.getByRole('button', { name: /save changes/i })).toBeEnabled()
+  })
+
+  it('save button is disabled again when edits are reverted', () => {
+    render(<ProfileForm {...defaultProfileProps} />)
+    changeInput(screen.getByLabelText('First name'), 'John')
+    expect(screen.getByRole('button', { name: /save changes/i })).toBeEnabled()
+    changeInput(screen.getByLabelText('First name'), 'Jane')
+    expect(screen.getByRole('button', { name: /save changes/i })).toBeDisabled()
+  })
+
+  it('calls onSubmit with trimmed first_name and last_name', async () => {
+    const onSubmit = jest.fn().mockResolvedValue(undefined)
+    render(<ProfileForm {...defaultProfileProps} onSubmit={onSubmit} />)
+
+    changeInput(screen.getByLabelText('First name'), '  John  ')
+    fireEvent.submit(screen.getByRole('button', { name: /save changes/i }).closest('form')!)
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith({
+        first_name: 'John',
+        last_name: 'Doe',
+      })
+    })
+  })
+
+  it('shows success message after successful submit', async () => {
+    const onSubmit = jest.fn().mockResolvedValue(undefined)
+    render(<ProfileForm {...defaultProfileProps} onSubmit={onSubmit} />)
+
+    changeInput(screen.getByLabelText('First name'), 'John')
+    fireEvent.submit(screen.getByRole('button', { name: /save changes/i }).closest('form')!)
+
+    await waitFor(() => {
+      expect(screen.getByText('Profile updated.')).toBeInTheDocument()
+    })
+  })
+
+  it('shows error message when onSubmit throws', async () => {
+    const onSubmit = jest.fn().mockRejectedValue(new Error('Server error'))
+    render(<ProfileForm {...defaultProfileProps} onSubmit={onSubmit} />)
+
+    changeInput(screen.getByLabelText('First name'), 'John')
+    fireEvent.submit(screen.getByRole('button', { name: /save changes/i }).closest('form')!)
+
+    await waitFor(() => {
+      expect(screen.getByText('Server error')).toBeInTheDocument()
+    })
+  })
+
+  it('shows generic error message when thrown value is not an Error', async () => {
+    const onSubmit = jest.fn().mockRejectedValue('oops')
+    render(<ProfileForm {...defaultProfileProps} onSubmit={onSubmit} />)
+
+    changeInput(screen.getByLabelText('First name'), 'John')
+    fireEvent.submit(screen.getByRole('button', { name: /save changes/i }).closest('form')!)
+
+    await waitFor(() => {
+      expect(screen.getByText('Failed to update profile')).toBeInTheDocument()
+    })
+  })
+
+  it('disables inputs when disabled prop is true', () => {
+    render(<ProfileForm {...defaultProfileProps} disabled />)
+    expect(screen.getByLabelText('First name')).toBeDisabled()
+    expect(screen.getByLabelText('Last name')).toBeDisabled()
+  })
+
+  it('renders card title', () => {
+    render(<ProfileForm {...defaultProfileProps} />)
+    expect(screen.getByText('Profile')).toBeInTheDocument()
+  })
+
+  it('renders card description', () => {
+    render(<ProfileForm {...defaultProfileProps} />)
+    expect(screen.getByText('Update your personal information.')).toBeInTheDocument()
+  })
+
+  it('renders email-cannot-be-changed hint', () => {
+    render(<ProfileForm {...defaultProfileProps} />)
+    expect(screen.getByText('Email cannot be changed.')).toBeInTheDocument()
+  })
+})
+
+// ---------------------------------------------------------------------------
+// ChangePasswordForm
+// ---------------------------------------------------------------------------
+
+const defaultPasswordProps = {
+  onSubmit: jest.fn(),
+}
+
+describe('ChangePasswordForm', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('renders all three password fields', () => {
+    render(<ChangePasswordForm {...defaultPasswordProps} />)
+    expect(screen.getByLabelText('Current password')).toBeInTheDocument()
+    expect(screen.getByLabelText('New password')).toBeInTheDocument()
+    expect(screen.getByLabelText('Confirm new password')).toBeInTheDocument()
+  })
+
+  it('submit button is disabled when fields are empty', () => {
+    render(<ChangePasswordForm {...defaultPasswordProps} />)
+    expect(screen.getByRole('button', { name: /change password/i })).toBeDisabled()
+  })
+
+  it('submit button is disabled when new password is less than 8 characters', () => {
+    render(<ChangePasswordForm {...defaultPasswordProps} />)
+
+    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()
+  })
+
+  it('shows password length hint when new password has 1-7 chars', () => {
+    render(<ChangePasswordForm {...defaultPasswordProps} />)
+    changeInput(screen.getByLabelText('New password'), 'abc')
+    expect(screen.getByText('Must be at least 8 characters.')).toBeInTheDocument()
+  })
+
+  it('hides length hint when new password is empty', () => {
+    render(<ChangePasswordForm {...defaultPasswordProps} />)
+    // Don't type anything — hint should not appear
+    expect(screen.queryByText('Must be at least 8 characters.')).not.toBeInTheDocument()
+  })
+
+  it('submit button is disabled when passwords do not match', () => {
+    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 () => {
+    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 }))
+
+    await waitFor(() => {
+      expect(onSubmit).toHaveBeenCalledWith({
+        old_password: 'oldpassword',
+        new_password: 'newpassword1',
+        new_password_confirm: 'newpassword1',
+      })
+    })
+  })
+
+  it('shows success message and clears fields after successful submit', 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 }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Password changed successfully.')).toBeInTheDocument()
+    })
+
+    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 () => {
+    const onSubmit = jest.fn().mockResolvedValue(undefined)
+    const onSuccess = jest.fn()
+    render(<ChangePasswordForm onSubmit={onSubmit} onSuccess={onSuccess} />)
+
+    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 }))
+
+    await waitFor(() => {
+      expect(onSuccess).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  it('shows error message when onSubmit throws', async () => {
+    const onSubmit = jest.fn().mockRejectedValue(new Error('Wrong password'))
+    render(<ChangePasswordForm onSubmit={onSubmit} />)
+
+    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 }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Wrong password')).toBeInTheDocument()
+    })
+  })
+
+  it('shows generic error when thrown value is not Error instance', async () => {
+    const onSubmit = jest.fn().mockRejectedValue('oops')
+    render(<ChangePasswordForm onSubmit={onSubmit} />)
+
+    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 }))
+
+    await waitFor(() => {
+      expect(screen.getByText('Failed to change password')).toBeInTheDocument()
+    })
+  })
+
+  it('disables all 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', () => {
+    render(<ChangePasswordForm {...defaultPasswordProps} />)
+    // Use role query to specifically find the heading, not the button
+    expect(screen.getByRole('heading', { name: /change password/i })).toBeInTheDocument()
+  })
+
+  it('renders card description', () => {
+    render(<ChangePasswordForm {...defaultPasswordProps} />)
+    expect(
+      screen.getByText(/update your password/i)
+    ).toBeInTheDocument()
+  })
+})

package/src/components/badge/StageBadge.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import * as React from 'react'
+
+export interface StageBadgeConfig {
+  label: string
+  className: string
+}
+
+export interface StageBadgeProps {
+  stage: string
+  configMap: Record<string, StageBadgeConfig>
+  className?: string
+}
+
+const DEFAULT_CONFIG: StageBadgeConfig = {
+  label: '',
+  className: 'bg-gray-100 text-gray-700 border-gray-200',
+}
+
+export function StageBadge({ stage, configMap, className = '' }: StageBadgeProps) {
+  const config = configMap[stage] ?? { ...DEFAULT_CONFIG, label: stage }
+
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border ${config.className} ${className}`}
+    >
+      {config.label}
+    </span>
+  )
+}

package/src/components/badge/index.ts

@@ -1,2 +1,5 @@
 export { StatusBadge } from './StatusBadge'
 export type { StatusBadgeProps, StatusBadgeConfig } from './StatusBadge'
+
+export { StageBadge } from './StageBadge'
+export type { StageBadgeProps, StageBadgeConfig } from './StageBadge'

package/src/components/command-palette/CommandGroup.tsx

@@ -0,0 +1,23 @@
+'use client'
+
+import React from 'react'
+
+export interface CommandGroupProps {
+  label: string
+  /** Whether to show a top border separator */
+  showBorder?: boolean
+  children: React.ReactNode
+}
+
+export function CommandGroup({ label, showBorder = false, children }: CommandGroupProps) {
+  return (
+    <>
+      <div className={`px-3 py-2${showBorder ? ' border-t border-gray-100' : ''}`}>
+        <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+          {label}
+        </p>
+      </div>
+      {children}
+    </>
+  )
+}