{
const isModel = isFirstRow && col === 0
const ghostIdx = isFirstRow ? col - 1 : col
- const isGhost = isFirstRow ? col > 0 && col <= ghostCopies : col < ghostCopies
+ const isGhost = isFirstRow
+ ? col > 0 && col <= ghostCopies
+ : col < ghostCopies
return (
@@ -143,12 +154,19 @@ function PracticeGrid({
)
}
-export function Preview({ selectedConsonantIds, selectedVowelIds, config }: PreviewProps) {
- const consonants = THAI_CONSONANTS.filter((c) => selectedConsonantIds.includes(c.id))
+export function Preview({
+ selectedConsonantIds,
+ selectedVowelIds,
+ config,
+}: PreviewProps) {
+ const consonants = THAI_CONSONANTS.filter((c) =>
+ selectedConsonantIds.includes(c.id),
+ )
const vowels = THAI_VOWELS.filter((v) => selectedVowelIds.includes(v.id))
const fontFamily = FONT_FAMILY_MAP[config.font] || '"Sarabun", sans-serif'
- const fontLabel = FONT_OPTIONS.find((f) => f.id === config.font)?.label || 'Traditional'
+ const fontLabel =
+ FONT_OPTIONS.find((f) => f.id === config.font)?.label || 'Traditional'
const totalChars = consonants.length + vowels.length
const subtitle = buildWorksheetSubtitle({
consonantCount: consonants.length,
@@ -157,12 +175,13 @@ export function Preview({ selectedConsonantIds, selectedVowelIds, config }: Prev
})
return (
-
+
{totalChars === 0 ? (
-
-
- {EMPTY_WORKSHEET_MESSAGE}
-
+
+
{EMPTY_WORKSHEET_MESSAGE}
) : (
{WORKSHEET_TITLE}
-
- {subtitle}
-
+
{subtitle}
-
-
+
+
{consonants.map((c) => (
-
+
{c.char}
{
})
it('renders rows control', () => {
- render()
+ render(
+ ,
+ )
expect(screen.getByLabelText(/^rows$/i)).toBeInTheDocument()
})
@@ -34,34 +36,40 @@ describe('SheetOptions', () => {
const input = screen.getByLabelText(/^rows$/i)
fireEvent.change(input, { target: { value: '4' } })
expect(mockOnChange).toHaveBeenLastCalledWith(
- expect.objectContaining({ rowsPerCharacter: 4 })
+ expect.objectContaining({ rowsPerCharacter: 4 }),
)
})
it('renders columns control with default selected', () => {
- render()
+ render(
+ ,
+ )
const columnsSelect = screen.getByLabelText(/^columns$/i)
expect(columnsSelect).toBeInTheDocument()
expect(columnsSelect).toHaveValue('3')
})
it('renders ghost copies control', () => {
- render()
+ render(
+ ,
+ )
expect(screen.getByLabelText(/^ghost copies$/i)).toBeInTheDocument()
})
it('orders the first three controls as rows, columns, and ghost copies', () => {
- render()
+ render(
+ ,
+ )
const selects = screen.getAllByRole('combobox')
- expect(selects.slice(0, 3).map((select) => select.getAttribute('id'))).toEqual([
- 'rows-per-char',
- 'columns',
- 'ghost-copies',
- ])
+ expect(
+ selects.slice(0, 3).map((select) => select.getAttribute('id')),
+ ).toEqual(['rows-per-char', 'columns', 'ghost-copies'])
})
it('does not render a paper size control', () => {
- render()
+ render(
+ ,
+ )
expect(screen.queryByLabelText(/paper size/i)).not.toBeInTheDocument()
})
@@ -70,7 +78,7 @@ describe('SheetOptions', () => {
+ />,
)
expect(screen.getByRole('option', { name: '5 copies' })).not.toBeDisabled()
expect(screen.getByRole('option', { name: '6 copies' })).toBeDisabled()
@@ -96,18 +104,28 @@ describe('SheetOptions', () => {
}
render()
- fireEvent.change(screen.getByLabelText(/^columns$/i), { target: { value: '5' } })
+ fireEvent.change(screen.getByLabelText(/^columns$/i), {
+ target: { value: '5' },
+ })
expect(mockOnChange).toHaveBeenLastCalledWith(
- expect.objectContaining({ columns: 5, ghostCopiesPerRow: 5 })
+ expect.objectContaining({ columns: 5, ghostCopiesPerRow: 5 }),
)
})
it('omits 10 columns for the medium font size', () => {
- render()
+ render(
+ ,
+ )
- expect(screen.getByRole('option', { name: '3 columns' })).toBeInTheDocument()
- expect(screen.getByRole('option', { name: '9 columns' })).toBeInTheDocument()
- expect(screen.queryByRole('option', { name: '10 columns' })).not.toBeInTheDocument()
+ expect(
+ screen.getByRole('option', { name: '3 columns' }),
+ ).toBeInTheDocument()
+ expect(
+ screen.getByRole('option', { name: '9 columns' }),
+ ).toBeInTheDocument()
+ expect(
+ screen.queryByRole('option', { name: '10 columns' }),
+ ).not.toBeInTheDocument()
})
it('limits large font size to 3 through 7 columns', () => {
@@ -115,15 +133,27 @@ describe('SheetOptions', () => {
+ />,
)
- expect(screen.getByRole('option', { name: '3 columns' })).toBeInTheDocument()
- expect(screen.getByRole('option', { name: '4 columns' })).toBeInTheDocument()
- expect(screen.getByRole('option', { name: '5 columns' })).toBeInTheDocument()
- expect(screen.getByRole('option', { name: '6 columns' })).toBeInTheDocument()
- expect(screen.getByRole('option', { name: '7 columns' })).toBeInTheDocument()
- expect(screen.queryByRole('option', { name: '8 columns' })).not.toBeInTheDocument()
+ expect(
+ screen.getByRole('option', { name: '3 columns' }),
+ ).toBeInTheDocument()
+ expect(
+ screen.getByRole('option', { name: '4 columns' }),
+ ).toBeInTheDocument()
+ expect(
+ screen.getByRole('option', { name: '5 columns' }),
+ ).toBeInTheDocument()
+ expect(
+ screen.getByRole('option', { name: '6 columns' }),
+ ).toBeInTheDocument()
+ expect(
+ screen.getByRole('option', { name: '7 columns' }),
+ ).toBeInTheDocument()
+ expect(
+ screen.queryByRole('option', { name: '8 columns' }),
+ ).not.toBeInTheDocument()
})
it('exposes columns up to 12 for the small font size', () => {
@@ -131,10 +161,12 @@ describe('SheetOptions', () => {
+ />,
)
- expect(screen.getByRole('option', { name: '12 columns' })).toBeInTheDocument()
+ expect(
+ screen.getByRole('option', { name: '12 columns' }),
+ ).toBeInTheDocument()
})
it('falls back to the largest allowed column value if the current config is out of range', () => {
@@ -142,31 +174,39 @@ describe('SheetOptions', () => {
+ />,
)
expect(screen.getByLabelText(/^columns$/i)).toHaveValue('7')
})
it('renders grid guide dropdown with 3 options', () => {
- render()
+ render(
+ ,
+ )
const gridSelect = screen.getByLabelText(/grid guide/i)
expect(gridSelect).toBeInTheDocument()
const options = screen.getAllByRole('option')
- const gridOptions = options.filter((o) => o.getAttribute('value')?.match(/cross|sandwich|thai/))
+ const gridOptions = options.filter((o) =>
+ o.getAttribute('value')?.match(/cross|sandwich|thai/),
+ )
expect(gridOptions.length).toBeGreaterThanOrEqual(3)
expect(screen.getByRole('option', { name: 'Thai' })).toBeInTheDocument()
})
it('renders font dropdown with default selected', () => {
- render()
+ render(
+ ,
+ )
const fontSelect = screen.getByRole('combobox', { name: /^font$/i })
expect(fontSelect).toBeInTheDocument()
expect(fontSelect).toHaveValue('traditional')
})
it('renders font size dropdown', () => {
- render()
+ render(
+ ,
+ )
expect(screen.getByLabelText(/font size/i)).toBeInTheDocument()
expect(screen.getByRole('option', { name: 'Small' })).toBeInTheDocument()
expect(screen.getByRole('option', { name: 'Medium' })).toBeInTheDocument()
diff --git a/src/components/SheetOptions.tsx b/src/components/SheetOptions.tsx
index d6cdd90..12675c7 100644
--- a/src/components/SheetOptions.tsx
+++ b/src/components/SheetOptions.tsx
@@ -21,8 +21,12 @@ const labelClasses =
export function SheetOptions({ config, onChange }: SheetOptionsProps) {
const allowedColumnOptions = getAllowedColumnOptions(config.fontSize)
- const fallbackColumns = allowedColumnOptions[allowedColumnOptions.length - 1]?.value ?? config.columns
- const selectedColumns = allowedColumnOptions.some((option) => option.value === config.columns)
+ const fallbackColumns =
+ allowedColumnOptions[allowedColumnOptions.length - 1]?.value ??
+ config.columns
+ const selectedColumns = allowedColumnOptions.some(
+ (option) => option.value === config.columns,
+ )
? config.columns
: fallbackColumns
@@ -39,7 +43,10 @@ export function SheetOptions({ config, onChange }: SheetOptionsProps) {
}
return (
-
+
Sheet Options
@@ -50,7 +57,9 @@ export function SheetOptions({ config, onChange }: SheetOptionsProps) {