engineering/tpmjs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2.2k

style: apply Biome formatting

Browse source 
- Format 18 files with Biome
- Fix array formatting and line breaks in variants and test files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ajax Davis 2025-11-27 02:46:30 +10:00
parent ad811134da
commit f7626f7070
18 changed files with 63 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/ui/package.json
View file

@ -88,9 +88,7 @@
"default": "./dist/FormField/FormField.js"
}
},
"files": [
"dist"
],
"files": ["dist"],
"scripts": {
"build": "NODE_OPTIONS='--max-old-space-size=4096' tsup",
"dev": "tsup --watch",

22
packages/ui/src/Checkbox/Checkbox.test.tsx
View file

@ -107,9 +107,7 @@ describe('Checkbox', () => {
const wrapper = container.querySelector('div');
const children = Array.from(wrapper?.children || []);
const labelIndex = children.findIndex((child) => child.tagName === 'LABEL');
const inputWrapperIndex = children.findIndex((child) =>
child.querySelector('input')
);
const inputWrapperIndex = children.findIndex((child) => child.querySelector('input'));
expect(inputWrapperIndex).toBeLessThan(labelIndex);
});
@ -123,9 +121,7 @@ describe('Checkbox', () => {
const wrapper = container.querySelector('div');
const children = Array.from(wrapper?.children || []);
const labelIndex = children.findIndex((child) => child.tagName === 'LABEL');
const inputWrapperIndex = children.findIndex((child) =>
child.querySelector('input')
);
const inputWrapperIndex = children.findIndex((child) => child.querySelector('input'));
expect(labelIndex).toBeLessThan(inputWrapperIndex);
});
});
@ -251,18 +247,12 @@ describe('Checkbox', () => {
it('should support aria-describedby', () => {
render(<Checkbox aria-describedby="description" />);
expect(screen.getByRole('checkbox')).toHaveAttribute(
'aria-describedby',
'description'
);
expect(screen.getByRole('checkbox')).toHaveAttribute('aria-describedby', 'description');
});
it('should support aria-labelledby', () => {
render(<Checkbox aria-labelledby="label-id" />);
expect(screen.getByRole('checkbox')).toHaveAttribute(
'aria-labelledby',
'label-id'
);
expect(screen.getByRole('checkbox')).toHaveAttribute('aria-labelledby', 'label-id');
});
it('should support aria-required', () => {
@ -519,9 +509,7 @@ describe('Checkbox', () => {
const user = userEvent.setup();
const ControlledCheckbox = () => {
const [checked, setChecked] = React.useState(false);
return (
<Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />
);
return <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />;
};
render(<ControlledCheckbox />);

12
packages/ui/src/Checkbox/Checkbox.tsx
View file

@ -120,12 +120,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
d="M4 8H12"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
/>
<path d="M4 8H12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
</svg>
</span>
);
@ -133,10 +128,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
const labelElement = label ? (
<label
htmlFor={checkboxId}
className={cn(
checkboxLabelVariants({ size }),
labelPosition === 'left' ? 'mr-2' : 'ml-2'
)}
className={cn(checkboxLabelVariants({ size }), labelPosition === 'left' ? 'mr-2' : 'ml-2')}
>
{label}
</label>

11
packages/ui/src/FormField/FormField.test.tsx
View file

@ -191,10 +191,7 @@ describe('FormField', () => {
it('should hide helper text when error is present', () => {
render(
<FormField
helperText="This is helper text"
error="This is an error"
>
<FormField helperText="This is helper text" error="This is an error">
<input />
</FormField>
);
@ -390,11 +387,7 @@ describe('FormField', () => {
it('should work with success state and helper text', () => {
render(
<FormField
label="Username"
state="success"
helperText="Username is available!"
>
<FormField label="Username" state="success" helperText="Username is available!">
<input />
</FormField>
);

5
packages/ui/src/FormField/FormField.tsx
View file

@ -126,10 +126,7 @@ export function FormField({
{/* Helper text (shown only if no error) */}
{!error && helperText && (
<div
id={helperId}
className={cn(formFieldHelperVariants({ state: effectiveState }))}
>
<div id={helperId} className={cn(formFieldHelperVariants({ state: effectiveState }))}>
{helperText}
</div>
)}

22
packages/ui/src/Radio/Radio.test.tsx
View file

@ -1,10 +1,10 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { createRef } from 'react';
import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { Radio } from './Radio';
import { RadioGroup } from './RadioGroup';
import React from 'react';
describe('Radio', () => {
describe('Rendering', () => {
@ -347,10 +347,7 @@ describe('Radio', () => {
<Radio value="option1" aria-describedby="description" />
</RadioGroup>
);
expect(screen.getByRole('radio')).toHaveAttribute(
'aria-describedby',
'description'
);
expect(screen.getByRole('radio')).toHaveAttribute('aria-describedby', 'description');
});
it('should support aria-labelledby', () => {
@ -573,10 +570,7 @@ describe('RadioGroup', () => {
<Radio value="option1" />
</RadioGroup>
);
expect(screen.getByRole('radiogroup')).toHaveAttribute(
'aria-label',
'Choose size'
);
expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-label', 'Choose size');
});
it('should support aria-labelledby', () => {
@ -585,10 +579,7 @@ describe('RadioGroup', () => {
<Radio value="option1" />
</RadioGroup>
);
expect(screen.getByRole('radiogroup')).toHaveAttribute(
'aria-labelledby',
'label-id'
);
expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-labelledby', 'label-id');
});
it('should support aria-describedby', () => {
@ -597,10 +588,7 @@ describe('RadioGroup', () => {
<Radio value="option1" />
</RadioGroup>
);
expect(screen.getByRole('radiogroup')).toHaveAttribute(
'aria-describedby',
'description-id'
);
expect(screen.getByRole('radiogroup')).toHaveAttribute('aria-describedby', 'description-id');
});
it('should support aria-required', () => {

5
packages/ui/src/Radio/Radio.tsx
View file

@ -89,10 +89,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
const labelElement = label ? (
<label
htmlFor={radioId}
className={cn(
radioLabelVariants({ size }),
labelPosition === 'left' ? 'mr-2' : 'ml-2'
)}
className={cn(radioLabelVariants({ size }), labelPosition === 'left' ? 'mr-2' : 'ml-2')}
>
{label}
</label>

3
packages/ui/src/Radio/types.ts
View file

@ -3,8 +3,7 @@ import type { InputHTMLAttributes } from 'react';
/**
* Radio component props
*/
export interface RadioProps
extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
/**
* Visual state of the radio button
* @default 'default'

18
packages/ui/src/Select/Select.test.tsx
View file

@ -231,9 +231,7 @@ describe('Select', () => {
});
it('should apply correct spinner size based on select size', () => {
const { container, rerender } = render(
<Select options={simpleOptions} loading size="sm" />
);
const { container, rerender } = render(<Select options={simpleOptions} loading size="sm" />);
let spinner = container.querySelector('svg.animate-spin');
expect(spinner).toHaveAttribute('width', '14');
@ -300,18 +298,12 @@ describe('Select', () => {
it('should support aria-describedby', () => {
render(<Select options={simpleOptions} aria-describedby="description" />);
expect(screen.getByRole('combobox')).toHaveAttribute(
'aria-describedby',
'description'
);
expect(screen.getByRole('combobox')).toHaveAttribute('aria-describedby', 'description');
});
it('should support aria-labelledby', () => {
render(<Select options={simpleOptions} aria-labelledby="label-id" />);
expect(screen.getByRole('combobox')).toHaveAttribute(
'aria-labelledby',
'label-id'
);
expect(screen.getByRole('combobox')).toHaveAttribute('aria-labelledby', 'label-id');
});
it('should support aria-required', () => {
@ -506,9 +498,7 @@ describe('Select', () => {
});
it('should work with loading and disabled states', () => {
const { container } = render(
<Select options={simpleOptions} loading disabled />
);
const { container } = render(<Select options={simpleOptions} loading disabled />);
const select = screen.getByRole('combobox');
expect(select).toBeDisabled();
expect(container.querySelector('svg.animate-spin')).toBeInTheDocument();

19
packages/ui/src/Select/Select.tsx
View file

@ -98,27 +98,22 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
{hasChildren && children}
{/* Render simple options if provided */}
{!hasChildren && hasOptions &&
{!hasChildren &&
hasOptions &&
options.map((option) => (
<option
key={option.value}
value={option.value}
disabled={option.disabled}
>
<option key={option.value} value={option.value} disabled={option.disabled}>
{option.label}
</option>
))}
{/* Render option groups if provided */}
{!hasChildren && !hasOptions && hasOptionGroups &&
{!hasChildren &&
!hasOptions &&
hasOptionGroups &&
optionGroups.map((group) => (
<optgroup key={group.label} label={group.label}>
{group.options.map((option) => (
<option
key={option.value}
value={option.value}
disabled={option.disabled}
>
<option key={option.value} value={option.value} disabled={option.disabled}>
{option.label}
</option>
))}

3
packages/ui/src/Select/types.ts
View file

@ -39,8 +39,7 @@ export interface SelectOptionGroup {
/**
* Select component props
*/
export interface SelectProps
extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
/**
* Visual state of the select
* @default 'default'

20
packages/ui/src/Slider/Slider.test.tsx
View file

@ -159,10 +159,7 @@ describe('Slider', () => {
});
it('should show marks without labels (just values)', () => {
const marks = [
{ value: 0 },
{ value: 50 },
];
const marks = [{ value: 0 }, { value: 50 }];
render(<Slider marks={marks} />);
expect(screen.getByText('0')).toBeInTheDocument();
@ -282,18 +279,12 @@ describe('Slider', () => {
it('should support aria-labelledby', () => {
render(<Slider aria-labelledby="volume-label" />);
expect(screen.getByRole('slider')).toHaveAttribute(
'aria-labelledby',
'volume-label'
);
expect(screen.getByRole('slider')).toHaveAttribute('aria-labelledby', 'volume-label');
});
it('should support aria-describedby', () => {
render(<Slider aria-describedby="volume-description" />);
expect(screen.getByRole('slider')).toHaveAttribute(
'aria-describedby',
'volume-description'
);
expect(screen.getByRole('slider')).toHaveAttribute('aria-describedby', 'volume-description');
});
});
@ -446,7 +437,10 @@ describe('Slider', () => {
});
it('should work with all props combined', () => {
const marks = [{ value: 0, label: 'Low' }, { value: 100, label: 'High' }];
const marks = [
{ value: 0, label: 'Low' },
{ value: 100, label: 'High' },
];
render(
<Slider
min={0}

3
packages/ui/src/Slider/types.ts
View file

@ -3,8 +3,7 @@ import type { InputHTMLAttributes } from 'react';
/**
* Slider component props
*/
export interface SliderProps
extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
/**
* Minimum value
* @default 0

11
packages/ui/src/Switch/Switch.test.tsx
View file

@ -1,9 +1,9 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { createRef } from 'react';
import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { Switch } from './Switch';
import React from 'react';
describe('Switch', () => {
describe('Rendering', () => {
@ -248,9 +248,7 @@ describe('Switch', () => {
it('should sync hidden input checked state', async () => {
const user = userEvent.setup();
const { container } = render(<Switch name="test" />);
const hiddenInput = container.querySelector(
'input[name="test"]'
) as HTMLInputElement;
const hiddenInput = container.querySelector('input[name="test"]') as HTMLInputElement;
const switchEl = screen.getByRole('switch');
expect(hiddenInput?.checked).toBe(false);
@ -296,10 +294,7 @@ describe('Switch', () => {
it('should support custom aria-labelledby', () => {
render(<Switch aria-labelledby="custom-label" />);
expect(screen.getByRole('switch')).toHaveAttribute(
'aria-labelledby',
'custom-label'
);
expect(screen.getByRole('switch')).toHaveAttribute('aria-labelledby', 'custom-label');
});
it('should set aria-hidden on thumb', () => {

5
packages/ui/src/Switch/variants.ts
View file

@ -102,10 +102,7 @@ export const switchThumbVariants = createVariants({
* Loading spinner variants
*/
export const switchSpinnerVariants = createVariants({
base: [
'absolute inset-0 flex items-center justify-center',
'pointer-events-none',
].join(' '),
base: ['absolute inset-0 flex items-center justify-center', 'pointer-events-none'].join(' '),
variants: {
size: {

16
packages/ui/src/Textarea/Textarea.test.tsx
View file

@ -162,7 +162,9 @@ describe('Textarea', () => {
});
it('shows character count with max length', () => {
const { container } = render(<Textarea showCount maxLength={100} defaultValue="Hello" data-testid="textarea" />);
const { container } = render(
<Textarea showCount maxLength={100} defaultValue="Hello" data-testid="textarea" />
);
const counter = container.querySelector('[aria-live="polite"]');
expect(counter).toBeInTheDocument();
expect(counter?.textContent).toContain('5');
@ -483,7 +485,13 @@ describe('Textarea', () => {
it('works with character counter and error state', () => {
const { container } = render(
<Textarea showCount state="error" maxLength={100} defaultValue="Error text" data-testid="textarea" />
<Textarea
showCount
state="error"
maxLength={100}
defaultValue="Error text"
data-testid="textarea"
/>
);
const textarea = screen.getByTestId('textarea');
expect(textarea.className).toContain('border-error');
@ -551,7 +559,9 @@ describe('Textarea', () => {
});
it('works as controlled component with value prop', () => {
const { rerender } = render(<Textarea value="Controlled" onChange={() => {}} data-testid="textarea" />);
const { rerender } = render(
<Textarea value="Controlled" onChange={() => {}} data-testid="textarea" />
);
const textarea = screen.getByTestId('textarea') as HTMLTextAreaElement;
expect(textarea.value).toBe('Controlled');

3
packages/ui/src/Textarea/types.ts
View file

@ -3,8 +3,7 @@ import type { TextareaHTMLAttributes } from 'react';
/**
* Textarea component props
*/
export interface TextareaProps
extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
/**
* Visual state of the textarea
* @default 'default'

20
packages/ui/src/system/formVariants.ts
View file

@ -49,11 +49,9 @@ export const formControlBase = [
* Error state classes
* Applied when a form field has validation errors
*/
export const formErrorState = [
'border-error',
'focus:border-error',
'focus:ring-error/20',
].join(' ');
export const formErrorState = ['border-error', 'focus:border-error', 'focus:ring-error/20'].join(
' '
);
/**
* Success state classes
@ -69,9 +67,7 @@ export const formSuccessState = [
* Loading state classes
* Applied when a form field is in loading state
*/
export const formLoadingState = ['cursor-wait', 'pointer-events-none', 'opacity-70'].join(
' '
);
export const formLoadingState = ['cursor-wait', 'pointer-events-none', 'opacity-70'].join(' ');
/**
* Helper text base classes
@ -89,11 +85,9 @@ export const formErrorMessage = ['text-sm text-error', 'mt-1.5'].join(' ');
* Label base classes
* For form field labels
*/
export const formLabelBase = [
'text-sm font-medium text-foreground',
'mb-2',
'inline-block',
].join(' ');
export const formLabelBase = ['text-sm font-medium text-foreground', 'mb-2', 'inline-block'].join(
' '
);
/**
* Required indicator classes