cursedbelt 5.93.0 → 5.95.0

package/src/react/components/CommentThread.spec.tsx

@@ -134,4 +134,29 @@ describe('CommentThread', () => {
     fireEvent.click(replyBtn!);
     expect(onPost).toHaveBeenCalledWith('My reply', 'p1');
   });
+
+  test('a voice comment plays inline, and a voice-only one draws no empty text line', () => {
+    const { getByRole, container } = render(
+      <CommentThread comments={[makeComment({ body: '', audioUrl: 'https://media.test/c1.webm' })]} onPost={() => {}} />,
+    );
+    expect(getByRole('button', { name: 'Play voice comment by Alice' })).toBeTruthy();
+    expect(container.querySelector('audio')?.getAttribute('src')).toBe('https://media.test/c1.webm');
+    expect(container.querySelector('p.whitespace-pre-wrap')).toBeNull();
+  });
+
+  test('a deleted voice comment plays nothing', () => {
+    const { queryByRole, getByText } = render(
+      <CommentThread comments={[makeComment({ deleted: true, audioUrl: 'https://media.test/c1.webm' })]} onPost={() => {}} />,
+    );
+    expect(getByText('deleted')).toBeTruthy();
+    expect(queryByRole('button', { name: /Play voice comment/ })).toBeNull();
+  });
+
+  test('the record button appears only when the app takes voice comments', () => {
+    const without = render(<CommentThread comments={[]} onPost={() => {}} />);
+    expect(without.queryByRole('button', { name: 'Record a voice comment' })).toBeNull();
+    without.unmount();
+    const withVoice = render(<CommentThread comments={[]} onPost={() => {}} onPostVoice={() => {}} />);
+    expect(withVoice.getByRole('button', { name: 'Record a voice comment' })).toBeTruthy();
+  });
 });

package/src/react/components/CommentThread.tsx

@@ -1,4 +1,4 @@
-import { Edit2, Send, Trash2 } from 'lucide-react';
+import { Edit2, Mic, Send, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { cn } from '../lib/cn.js';
 import { FIELD_CLASS } from '../lib/field.js';
@@ -9,6 +9,8 @@ import { Button } from './Button.js';
 import { IconButton } from './IconButton.js';
 import { ReactionBar, type ReactionGroup } from './ReactionBar.js';
 import { Skeleton } from './Skeleton.js';
+import { VoiceNote } from './VoiceNote.js';
+import { type VoiceRecording, VoiceRecorder } from './VoiceRecorder.js';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -37,6 +39,8 @@ export interface CommentData {
   /** Whether the current user may delete this comment. */
   canDelete?: boolean;
   reactions?: CommentReactionSummary;
+  /** A voice comment's audio, played inline above its (optional) text. */
+  audioUrl?: string | null;
 }
 
 export interface CommentThreadProps {
@@ -48,6 +52,8 @@ export interface CommentThreadProps {
   onDelete?: (id: string) => void;
   /** Toggle a reaction on a comment. */
   onReact?: (commentId: string, emoji: string) => void;
+  /** Post a voice comment (parentId for a reply). When set, every composer grows a record button. */
+  onPostVoice?: (recording: VoiceRecording, parentId?: string) => void;
   className?: string;
   emptyMessage?: string;
   /** Placeholder for the root-level composer. */
@@ -81,16 +87,19 @@ function formatRelative(target: Date, from = new Date()): string {
 
 function Composer({
   onSubmit,
+  onVoice,
   placeholder,
   autoFocus,
   onCancel,
 }: {
   onSubmit: (body: string) => void;
+  onVoice?: (recording: VoiceRecording) => void;
   placeholder: string;
   autoFocus?: boolean;
   onCancel?: () => void;
 }) {
   const [body, setBody] = useState('');
+  const [recording, setRecording] = useState(false);
   const submit = () => {
     const trimmed = body.trim();
     if (!trimmed) return;
@@ -98,6 +107,18 @@ function Composer({
     setBody('');
   };
 
+  if (recording && onVoice) {
+    return (
+      <VoiceRecorder
+        onCancel={() => setRecording(false)}
+        onDone={(r) => {
+          setRecording(false);
+          onVoice(r);
+        }}
+      />
+    );
+  }
+
   return (
     <div className='flex items-end gap-2'>
       <AutoGrowTextarea
@@ -114,6 +135,11 @@ function Composer({
         // floor on a coarse pointer (DESIGN.md LAY-13).
         className={cn(FIELD_CLASS, 'min-h-9 flex-1', TAP_TARGET_HEIGHT)}
       />
+      {onVoice && (
+        <IconButton label='Record a voice comment' variant='secondary' onClick={() => setRecording(true)}>
+          <Mic />
+        </IconButton>
+      )}
       <Button
         variant='primary'
         size='sm'
@@ -159,6 +185,7 @@ function CommentItem({
   onEdit,
   onDelete,
   onReact,
+  onPostVoice,
 }: {
   comment: CommentData;
   replies: CommentData[];
@@ -166,6 +193,7 @@ function CommentItem({
   onEdit?: (id: string, body: string) => void;
   onDelete?: (id: string) => void;
   onReact?: (commentId: string, emoji: string) => void;
+  onPostVoice?: (recording: VoiceRecording, parentId?: string) => void;
 }) {
   const [replying, setReplying] = useState(false);
   const [editing, setEditing] = useState(false);
@@ -221,14 +249,21 @@ function CommentItem({
                 Cancel
               </Button>
             </div>
+          ) : comment.deleted ? (
+            <p className='mt-0.5 text-sm italic text-muted-foreground'>deleted</p>
           ) : (
-            <p className='mt-0.5 whitespace-pre-wrap break-words text-sm text-foreground'>
-              {comment.deleted ? (
-                <span className='italic text-muted-foreground'>deleted</span>
-              ) : (
-                comment.body
+            <>
+              {comment.audioUrl && (
+                <VoiceNote
+                  src={comment.audioUrl}
+                  label={`Play voice comment by ${comment.author.name || 'someone'}`}
+                  className='mt-1 max-w-80'
+                />
+              )}
+              {comment.body && (
+                <p className='mt-0.5 whitespace-pre-wrap break-words text-sm text-foreground'>{comment.body}</p>
               )}
-            </p>
+            </>
           )}
         </div>
 
@@ -294,6 +329,13 @@ function CommentItem({
                 onPost(body, comment.id);
                 setReplying(false);
               }}
+              onVoice={
+                onPostVoice &&
+                ((r) => {
+                  onPostVoice(r, comment.id);
+                  setReplying(false);
+                })
+              }
             />
           </div>
         )}
@@ -309,6 +351,7 @@ function CommentItem({
                 onEdit={onEdit}
                 onDelete={onDelete}
                 onReact={onReact}
+                onPostVoice={onPostVoice}
               />
             ))}
           </div>
@@ -325,8 +368,9 @@ function CommentItem({
  * query/mutation hooks bundled — wire up your own TanStack Query mutations and pass
  * the results as props.
  *
- * Supports one level of replies, edit, delete (with confirm), and emoji reactions
- * via {@link ReactionBar}. Each interaction calls its corresponding handler; the
+ * Supports one level of replies, edit, delete (with confirm), emoji reactions
+ * via {@link ReactionBar}, and — with `onPostVoice` — voice comments recorded by
+ * {@link VoiceRecorder} and played inline by {@link VoiceNote}. Each interaction calls its corresponding handler; the
  * caller re-renders with fresh data.
  */
 export function CommentThread({
@@ -336,6 +380,7 @@ export function CommentThread({
   onEdit,
   onDelete,
   onReact,
+  onPostVoice,
   className,
   emptyMessage = 'No comments yet — start the conversation.',
   placeholder = 'Add a comment… (⌘/Ctrl+Enter to send)',
@@ -356,6 +401,7 @@ export function CommentThread({
             onEdit={onEdit}
             onDelete={onDelete}
             onReact={onReact}
+            onPostVoice={onPostVoice}
           />
         ))}
       {/* Loading drew nothing at all — only the composer — which read as an empty thread. */}
@@ -363,7 +409,11 @@ export function CommentThread({
       {!isLoading && topLevel.length === 0 && (
         <p className='text-xs text-muted-foreground'>{emptyMessage}</p>
       )}
-      <Composer placeholder={placeholder} onSubmit={(body) => onPost(body)} />
+      <Composer
+        placeholder={placeholder}
+        onSubmit={(body) => onPost(body)}
+        onVoice={onPostVoice && ((r) => onPostVoice(r))}
+      />
     </div>
   );
 }

package/src/react/components/ControlHeightScale.spec.tsx

@@ -72,9 +72,9 @@ describe('control-height-tokens: cross-component parity', () => {
     expect(getByRole('button').className).toContain(TOKEN.lg);
   });
 
-  test('DatePicker trigger honors `size`', () => {
+  test('DatePicker field honors `size`', () => {
     const { getByRole } = render(<DatePicker size='sm' placeholder='Pick' onChange={() => {}} />);
-    expect(getByRole('button').className).toContain(TOKEN.sm);
+    expect(getByRole('textbox').className).toContain(TOKEN.sm);
   });
 
   test('ColorField container honors `size`', () => {

package/src/react/components/DatePicker.spec.tsx

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, mock, test } from 'bun:test';
-import { cleanup, fireEvent, render } from '@testing-library/react';
+import { act, cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { DatePicker } from './DatePicker.js';
 import { DateRangePicker } from './DateRangePicker.js';
 import { DateTimeField } from './DateTimeField.js';
@@ -54,13 +54,194 @@ describe('DatePicker', () => {
     expect(btn).toHaveProperty('disabled', true);
   });
 
-  test('aria-invalid and aria-describedby are forwarded to the trigger', () => {
+  test('aria-invalid and aria-describedby are forwarded to the text field', () => {
     const { getByRole } = render(
       <DatePicker aria-invalid={true} aria-describedby='err' onChange={() => {}} />,
     );
-    const btn = getByRole('button');
-    expect(btn.getAttribute('aria-invalid')).toBe('true');
-    expect(btn.getAttribute('aria-describedby')).toBe('err');
+    const field = getByRole('textbox');
+    expect(field.getAttribute('aria-invalid')).toBe('true');
+    expect(field.getAttribute('aria-describedby')).toBe('err');
+  });
+});
+
+/** Type `text` into the field and leave it (blur commits). */
+function typeAndBlur(field: HTMLElement, text: string) {
+  fireEvent.change(field, { target: { value: text } });
+  fireEvent.blur(field);
+}
+
+describe('DatePicker typing', () => {
+  const forms: Array<[string, string]> = [
+    ['2015-12-05', '2015-12-05'],
+    ['2015-12-5', '2015-12-05'],
+    ['12/5/2015', '2015-12-05'],
+    ['12/05/2015', '2015-12-05'],
+    ['12-5-2015', '2015-12-05'],
+    ['12.5.2015', '2015-12-05'],
+    ['12/05/15', '2015-12-05'],
+    ['12/05/99', '1999-12-05'],
+    ['Dec 5 2015', '2015-12-05'],
+    ['Dec 5, 2015', '2015-12-05'],
+    ['December 5, 2015', '2015-12-05'],
+    ['5 Dec 2015', '2015-12-05'],
+    ['Dec 5th, 2015', '2015-12-05'],
+    ['2015 Dec 5', '2015-12-05'],
+    ['  dec 5 2015  ', '2015-12-05'],
+    ['2/29/2024', '2024-02-29'],
+  ];
+  for (const [typed, iso] of forms) {
+    test(`"${typed}" normalizes to ${iso}`, () => {
+      const onChange = mock((_v: string | undefined) => {});
+      const { getByRole } = render(<DatePicker onChange={onChange} />);
+      typeAndBlur(getByRole('textbox'), typed);
+      expect(onChange.mock.calls).toEqual([[iso]]);
+      expect(getByRole('textbox').getAttribute('aria-invalid')).toBeNull();
+    });
+  }
+
+  test('Enter commits like blur', () => {
+    const onChange = mock((_v: string | undefined) => {});
+    const { getByRole } = render(<DatePicker onChange={onChange} />);
+    const field = getByRole('textbox');
+    fireEvent.change(field, { target: { value: '12/5/2015' } });
+    fireEvent.keyDown(field, { key: 'Enter' });
+    expect(onChange.mock.calls).toEqual([['2015-12-05']]);
+  });
+
+  test('a committed value shows in the display format', () => {
+    const { getByRole, rerender } = render(<DatePicker value='2015-12-05' onChange={() => {}} />);
+    expect((getByRole('textbox') as HTMLInputElement).value).toContain('2015');
+    rerender(<DatePicker value='2024-03-15' onChange={() => {}} />);
+    expect((getByRole('textbox') as HTMLInputElement).value).toContain('2024');
+  });
+
+  const garbage = ['hello', '13/45/2015', '2/30/2015', '12/5', 'Dec 2015', '12/5/215', 'Foo 5 2015', '0000-00-00'];
+  for (const text of garbage) {
+    test(`garbage "${text}" never reaches onChange and shows a reason`, () => {
+      const onChange = mock((_v: string | undefined) => {});
+      const { getByRole } = render(<DatePicker value='2020-01-01' onChange={onChange} />);
+      const field = getByRole('textbox');
+      typeAndBlur(field, text);
+      expect(onChange.mock.calls).toEqual([]);
+      expect(field.getAttribute('aria-invalid')).toBe('true');
+      expect(getByRole('alert').textContent?.length).toBeGreaterThan(0);
+      expect(field.getAttribute('aria-describedby')).toBe(getByRole('alert').id);
+    });
+  }
+
+  test('Escape on invalid text restores the last good value', () => {
+    const onChange = mock((_v: string | undefined) => {});
+    const { getByRole, queryByRole } = render(<DatePicker value='2020-01-01' onChange={onChange} />);
+    const field = getByRole('textbox') as HTMLInputElement;
+    const before = field.value;
+    typeAndBlur(field, 'nonsense');
+    fireEvent.keyDown(field, { key: 'Escape' });
+    expect(field.value).toBe(before);
+    expect(field.getAttribute('aria-invalid')).toBeNull();
+    expect(queryByRole('alert')).toBeNull();
+    expect(onChange.mock.calls).toEqual([]);
+  });
+
+  test('a date before min or after max is refused, and says which bound', () => {
+    const onChange = mock((_v: string | undefined) => {});
+    const { getByRole } = render(
+      <DatePicker min='2010-01-01' max='2020-12-31' onChange={onChange} />,
+    );
+    const field = getByRole('textbox');
+    typeAndBlur(field, '12/31/2009');
+    expect(getByRole('alert').textContent).toContain('on or after');
+    typeAndBlur(field, '1/1/2021');
+    expect(getByRole('alert').textContent).toContain('on or before');
+    expect(onChange.mock.calls).toEqual([]);
+    typeAndBlur(field, '1/1/2020');
+    expect(onChange.mock.calls).toEqual([['2020-01-01']]);
+  });
+
+  test('clearing the text clears the value', () => {
+    const onChange = mock((_v: string | undefined) => {});
+    const { getByRole } = render(<DatePicker value='2020-01-01' onChange={onChange} />);
+    typeAndBlur(getByRole('textbox'), '');
+    expect(onChange.mock.calls).toEqual([[undefined]]);
+  });
+
+  test('the calendar opens on a typed date', () => {
+    const { getByRole, container } = render(<DatePicker value='2024-03-01' onChange={() => {}} />);
+    typeAndBlur(getByRole('textbox'), 'Jul 4 1985');
+    fireEvent.click(container.querySelector('button[aria-haspopup="dialog"]') as HTMLElement);
+    expect(screen.getByRole('button', { name: /July 1985, choose month and year/ })).not.toBeNull();
+  });
+});
+
+describe('DatePicker calendar navigation', () => {
+  function open(value = '2024-03-15', props: Partial<React.ComponentProps<typeof DatePicker>> = {}) {
+    const utils = render(<DatePicker value={value} onChange={() => {}} {...props} />);
+    fireEvent.click(utils.container.querySelector('button[aria-haspopup="dialog"]') as HTMLElement);
+    return utils;
+  }
+  const caption = (re: RegExp) => screen.getByRole('button', { name: re });
+
+  test('Next/Previous year buttons move a year', () => {
+    open();
+    fireEvent.click(screen.getByRole('button', { name: 'Previous year' }));
+    expect(caption(/March 2023/)).not.toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: 'Next year' }));
+    fireEvent.click(screen.getByRole('button', { name: 'Next year' }));
+    expect(caption(/March 2025/)).not.toBeNull();
+  });
+
+  test('month buttons still move a month', () => {
+    open();
+    fireEvent.click(screen.getByRole('button', { name: 'Next month' }));
+    expect(caption(/April 2024/)).not.toBeNull();
+  });
+
+  test('a year step clamps to the min month, and is disabled once there', () => {
+    open('2024-03-15', { min: '2024-01-10', max: '2024-06-20' });
+    fireEvent.click(screen.getByRole('button', { name: 'Previous year' }));
+    expect(caption(/January 2024/)).not.toBeNull();
+    expect((screen.getByRole('button', { name: 'Previous year' }) as HTMLButtonElement).disabled).toBe(true);
+    fireEvent.click(screen.getByRole('button', { name: 'Next year' }));
+    expect(caption(/June 2024/)).not.toBeNull();
+    expect((screen.getByRole('button', { name: 'Next year' }) as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  test('year buttons are disabled when min and max pin the month', () => {
+    open('2024-03-15', { min: '2024-03-01', max: '2024-03-31' });
+    expect((screen.getByRole('button', { name: 'Previous year' }) as HTMLButtonElement).disabled).toBe(true);
+    expect((screen.getByRole('button', { name: 'Next year' }) as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  test('Shift+PageUp moves a year, PageUp a month (and the Shift forms go forward)', () => {
+    open();
+    const press = (name: RegExp, key: string, shiftKey = false) => {
+      const day = screen.getByRole('button', { name });
+      act(() => day.focus());
+      fireEvent.keyDown(day, { key, shiftKey });
+    };
+    press(/March 15th, 2024/, 'PageUp', true);
+    expect(caption(/March 2023/)).not.toBeNull();
+    press(/March 15th, 2023/, 'PageUp');
+    expect(caption(/February 2023/)).not.toBeNull();
+    press(/February 15th, 2023/, 'PageDown', true);
+    expect(caption(/February 2024/)).not.toBeNull();
+  });
+
+  test('the caption opens a year grid, then months: 2024 to 1985 in two picks', () => {
+    open();
+    fireEvent.click(caption(/March 2024, choose month and year/));
+    fireEvent.click(screen.getByRole('button', { name: '1985' }));
+    fireEvent.click(screen.getByRole('button', { name: /July 1985/ }));
+    expect(caption(/July 1985/)).not.toBeNull();
+  });
+
+  test('the month chooser disables months outside min/max', () => {
+    open('2024-03-15', { min: '2023-05-01', max: '2024-08-31' });
+    fireEvent.click(caption(/March 2024, choose month and year/));
+    expect(screen.queryByRole('button', { name: '2022' })).toBeNull();
+    fireEvent.click(screen.getByRole('button', { name: '2023' }));
+    const month = (re: RegExp) => screen.getByRole('button', { name: re }) as HTMLButtonElement;
+    expect(month(/April 2023/).disabled).toBe(true);
+    expect(month(/May 2023/).disabled).toBe(false);
   });
 });