diff options
Diffstat (limited to 'src/components/atoms/forms/fields')
17 files changed, 54 insertions, 77 deletions
diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx index cb017da..60dd352 100644 --- a/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx +++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useCallback, useState } from 'react'; import { BooleanField } from './boolean-field'; /** @@ -138,15 +138,12 @@ const Template: ComponentStory<typeof BooleanField> = ({ ...args }) => { const [isChecked, setIsChecked] = useState(checked); + const handleChange = useCallback(() => { + setIsChecked((prev) => !prev); + }, []); return ( - <BooleanField - isChecked={isChecked} - onChange={() => { - setIsChecked(!isChecked); - }} - {...args} - /> + <BooleanField isChecked={isChecked} onChange={handleChange} {...args} /> ); }; diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx index 1c7fe36..82c42d9 100644 --- a/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx +++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { BooleanField } from './boolean-field'; const handleChange = () => { @@ -19,7 +19,7 @@ describe('boolean field', () => { value="checkbox" /> ); - expect(screen.getByRole('checkbox')).toBeInTheDocument(); + expect(rtlScreen.getByRole('checkbox')).toBeInTheDocument(); }); it('renders a radio button', () => { @@ -32,6 +32,6 @@ describe('boolean field', () => { value="checkbox" /> ); - expect(screen.getByRole('radio')).toBeInTheDocument(); + expect(rtlScreen.getByRole('radio')).toBeInTheDocument(); }); }); diff --git a/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx b/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx index 7985c0b..5476cf5 100644 --- a/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx +++ b/src/components/atoms/forms/fields/boolean-field/boolean-field.tsx @@ -1,4 +1,4 @@ -import { FC, InputHTMLAttributes } from 'react'; +import type { FC, InputHTMLAttributes } from 'react'; import styles from './boolean-field.module.scss'; export type BooleanFieldProps = Omit< diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx b/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx index 59f9a4b..75fff77 100644 --- a/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx +++ b/src/components/atoms/forms/fields/checkbox/checkbox.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Checkbox } from './checkbox'; const doNothing = () => { @@ -16,7 +16,7 @@ describe('Checkbox', () => { value="checkbox" /> ); - expect(screen.getByRole('checkbox')).not.toBeChecked(); + expect(rtlScreen.getByRole('checkbox')).not.toBeChecked(); }); it('renders a checked checkbox', () => { @@ -29,6 +29,6 @@ describe('Checkbox', () => { value="checkbox" /> ); - expect(screen.getByRole('checkbox')).toBeChecked(); + expect(rtlScreen.getByRole('checkbox')).toBeChecked(); }); }); diff --git a/src/components/atoms/forms/fields/checkbox/checkbox.tsx b/src/components/atoms/forms/fields/checkbox/checkbox.tsx index 2ac3809..9c175b7 100644 --- a/src/components/atoms/forms/fields/checkbox/checkbox.tsx +++ b/src/components/atoms/forms/fields/checkbox/checkbox.tsx @@ -1,5 +1,5 @@ -import { FC } from 'react'; -import { BooleanField, BooleanFieldProps } from '../boolean-field'; +import type { FC } from 'react'; +import { BooleanField, type BooleanFieldProps } from '../boolean-field'; export type CheckboxProps = Omit<BooleanFieldProps, 'type'>; @@ -9,5 +9,6 @@ export type CheckboxProps = Omit<BooleanFieldProps, 'type'>; * Render a checkbox input type. */ export const Checkbox: FC<CheckboxProps> = (props) => ( + // eslint-disable-next-line react/jsx-no-literals -- Type allowed <BooleanField {...props} type="checkbox" /> ); diff --git a/src/components/atoms/forms/fields/fields.module.scss b/src/components/atoms/forms/fields/fields.module.scss index f09117d..363c7ee 100644 --- a/src/components/atoms/forms/fields/fields.module.scss +++ b/src/components/atoms/forms/fields/fields.module.scss @@ -2,7 +2,6 @@ @use "../../../../styles/abstracts/mixins" as mix; .field { - width: 100%; padding: var(--spacing-2xs) var(--spacing-xs); background: var(--color-bg-tertiary); border: fun.convert-px(2) solid var(--color-border); diff --git a/src/components/atoms/forms/fields/input/input.stories.tsx b/src/components/atoms/forms/fields/input/input.stories.tsx index 35657f8..4744bc5 100644 --- a/src/components/atoms/forms/fields/input/input.stories.tsx +++ b/src/components/atoms/forms/fields/input/input.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ChangeEvent, useCallback, useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { type ChangeEvent, useCallback, useState } from 'react'; import { Input } from './input'; /** @@ -187,50 +187,50 @@ const Template: ComponentStory<typeof Input> = ({ }; /** - * Input Story - DateTime + * Input Story - DateTimeField */ -export const DateTime = Template.bind({}); -DateTime.args = { +export const DateTimeField = Template.bind({}); +DateTimeField.args = { id: 'field-storybook', name: 'field-storybook', type: 'datetime-local', }; /** - * Input Story - Email + * Input Story - EmailField */ -export const Email = Template.bind({}); -Email.args = { +export const EmailField = Template.bind({}); +EmailField.args = { id: 'field-storybook', name: 'field-storybook', type: 'email', }; /** - * Input Story - Numeric + * Input Story - NumericField */ -export const Numeric = Template.bind({}); -Numeric.args = { +export const NumericField = Template.bind({}); +NumericField.args = { id: 'field-storybook', name: 'field-storybook', type: 'number', }; /** - * Input Story - Text + * Input Story - TextField */ -export const Text = Template.bind({}); -Text.args = { +export const TextField = Template.bind({}); +TextField.args = { id: 'field-storybook', name: 'field-storybook', type: 'text', }; /** - * Input Story - Time + * Input Story - TimeField */ -export const Time = Template.bind({}); -Time.args = { +export const TimeField = Template.bind({}); +TimeField.args = { id: 'field-storybook', name: 'field-storybook', type: 'time', diff --git a/src/components/atoms/forms/fields/input/input.test.tsx b/src/components/atoms/forms/fields/input/input.test.tsx index a5c4898..e97237d 100644 --- a/src/components/atoms/forms/fields/input/input.test.tsx +++ b/src/components/atoms/forms/fields/input/input.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Input } from './input'; const doNothing = () => { @@ -17,7 +17,7 @@ describe('Input', () => { value="" /> ); - expect(screen.getByRole('textbox')).toHaveAttribute('type', 'text'); + expect(rtlScreen.getByRole('textbox')).toHaveAttribute('type', 'text'); }); it('renders a search input', () => { @@ -30,6 +30,6 @@ describe('Input', () => { value="" /> ); - expect(screen.getByRole('searchbox')).toHaveAttribute('type', 'search'); + expect(rtlScreen.getByRole('searchbox')).toHaveAttribute('type', 'search'); }); }); diff --git a/src/components/atoms/forms/fields/input/input.tsx b/src/components/atoms/forms/fields/input/input.tsx index 0f0736c..c47534f 100644 --- a/src/components/atoms/forms/fields/input/input.tsx +++ b/src/components/atoms/forms/fields/input/input.tsx @@ -8,7 +8,7 @@ import styles from '../fields.module.scss'; export type InputProps = Omit< InputHTMLAttributes<HTMLInputElement>, - 'disabled' | 'hidden' | 'readonly' | 'required' | 'type' + 'disabled' | 'readonly' | 'required' | 'type' > & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'id' | 'name'>> & { /** @@ -18,12 +18,6 @@ export type InputProps = Omit< */ isDisabled?: boolean; /** - * Should the field be hidden? - * - * @default false - */ - isHidden?: boolean; - /** * Should the field be readonly? * * @default false @@ -45,7 +39,6 @@ const InputWithRef = ( { className = '', isDisabled = false, - isHidden = false, isReadOnly = false, isRequired = false, ...props diff --git a/src/components/atoms/forms/fields/radio/radio.test.tsx b/src/components/atoms/forms/fields/radio/radio.test.tsx index ba8d68f..55eda9d 100644 --- a/src/components/atoms/forms/fields/radio/radio.test.tsx +++ b/src/components/atoms/forms/fields/radio/radio.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Radio } from './radio'; const doNothing = () => { @@ -11,7 +11,7 @@ describe('Radio', () => { render( <Radio id="radio" name="radio" onChange={doNothing} value="radio" /> ); - expect(screen.getByRole('radio')).not.toBeChecked(); + expect(rtlScreen.getByRole('radio')).not.toBeChecked(); }); it('renders a checked radio', () => { @@ -24,6 +24,6 @@ describe('Radio', () => { value="radio" /> ); - expect(screen.getByRole('radio')).toBeChecked(); + expect(rtlScreen.getByRole('radio')).toBeChecked(); }); }); diff --git a/src/components/atoms/forms/fields/radio/radio.tsx b/src/components/atoms/forms/fields/radio/radio.tsx index 6430b4a..5a518c7 100644 --- a/src/components/atoms/forms/fields/radio/radio.tsx +++ b/src/components/atoms/forms/fields/radio/radio.tsx @@ -1,5 +1,5 @@ -import { FC } from 'react'; -import { BooleanField, BooleanFieldProps } from '../boolean-field'; +import type { FC } from 'react'; +import { BooleanField, type BooleanFieldProps } from '../boolean-field'; export type RadioProps = Omit<BooleanFieldProps, 'type'>; @@ -9,5 +9,6 @@ export type RadioProps = Omit<BooleanFieldProps, 'type'>; * Render a radio input type. */ export const Radio: FC<RadioProps> = (props) => ( + // eslint-disable-next-line react/jsx-no-literals -- Type allowed <BooleanField {...props} type="radio" /> ); diff --git a/src/components/atoms/forms/fields/select/select.stories.tsx b/src/components/atoms/forms/fields/select/select.stories.tsx index c9e02d2..fddf354 100644 --- a/src/components/atoms/forms/fields/select/select.stories.tsx +++ b/src/components/atoms/forms/fields/select/select.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ChangeEvent, useCallback, useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { type ChangeEvent, useCallback, useState } from 'react'; import { Select as SelectComponent } from './select'; const selectOptions = [ diff --git a/src/components/atoms/forms/fields/select/select.test.tsx b/src/components/atoms/forms/fields/select/select.test.tsx index ae76c45..821a9aa 100644 --- a/src/components/atoms/forms/fields/select/select.test.tsx +++ b/src/components/atoms/forms/fields/select/select.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { Select } from './select'; const doNothing = () => { @@ -25,7 +25,7 @@ describe('Select', () => { /> ); - expect(screen.getByRole('combobox')).toHaveValue(selected.value); + expect(rtlScreen.getByRole('combobox')).toHaveValue(selected.value); }); it('renders the select options', () => { @@ -39,6 +39,6 @@ describe('Select', () => { /> ); - expect(screen.getAllByRole('option')).toHaveLength(selectOptions.length); + expect(rtlScreen.getAllByRole('option')).toHaveLength(selectOptions.length); }); }); diff --git a/src/components/atoms/forms/fields/select/select.tsx b/src/components/atoms/forms/fields/select/select.tsx index 887dacc..7399727 100644 --- a/src/components/atoms/forms/fields/select/select.tsx +++ b/src/components/atoms/forms/fields/select/select.tsx @@ -1,4 +1,4 @@ -import { FC, SelectHTMLAttributes } from 'react'; +import type { FC, SelectHTMLAttributes } from 'react'; import styles from '../fields.module.scss'; export type SelectOptions = { @@ -18,7 +18,7 @@ export type SelectOptions = { export type SelectProps = Omit< SelectHTMLAttributes<HTMLSelectElement>, - 'disabled' | 'hidden' | 'required' + 'disabled' | 'required' > & { /** * Should the select field be disabled? @@ -27,12 +27,6 @@ export type SelectProps = Omit< */ isDisabled?: boolean; /** - * Should the select field be hidden? - * - * @default false - */ - isHidden?: boolean; - /** * Is the select field required? * * @default false @@ -52,7 +46,6 @@ export type SelectProps = Omit< export const Select: FC<SelectProps> = ({ className = '', isDisabled = false, - isHidden = false, isRequired = false, options, ...props diff --git a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx index 2e77cb7..21214bd 100644 --- a/src/components/atoms/forms/fields/text-area/text-area.stories.tsx +++ b/src/components/atoms/forms/fields/text-area/text-area.stories.tsx @@ -1,5 +1,5 @@ -import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { ChangeEvent, useCallback, useState } from 'react'; +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { type ChangeEvent, useCallback, useState } from 'react'; import { TextArea as TextAreaComponent } from './text-area'; /** diff --git a/src/components/atoms/forms/fields/text-area/text-area.test.tsx b/src/components/atoms/forms/fields/text-area/text-area.test.tsx index 0079440..923f494 100644 --- a/src/components/atoms/forms/fields/text-area/text-area.test.tsx +++ b/src/components/atoms/forms/fields/text-area/text-area.test.tsx @@ -1,5 +1,5 @@ import { describe, expect, it } from '@jest/globals'; -import { render, screen } from '../../../../../../tests/utils'; +import { render, screen as rtlScreen } from '@testing-library/react'; import { TextArea } from './text-area'; const doNothing = () => { @@ -16,6 +16,6 @@ describe('TextArea', () => { value="" /> ); - expect(screen.getByRole('textbox')).toBeInTheDocument(); + expect(rtlScreen.getByRole('textbox')).toBeInTheDocument(); }); }); diff --git a/src/components/atoms/forms/fields/text-area/text-area.tsx b/src/components/atoms/forms/fields/text-area/text-area.tsx index bd99d7d..adb12eb 100644 --- a/src/components/atoms/forms/fields/text-area/text-area.tsx +++ b/src/components/atoms/forms/fields/text-area/text-area.tsx @@ -19,12 +19,6 @@ export type TextAreaProps = AllowedTextAreaProps & { */ isDisabled?: boolean; /** - * Should the field be hidden? - * - * @default false - */ - isHidden?: boolean; - /** * Should the field be readonly? * * @default false @@ -42,7 +36,6 @@ const TextAreaWithRef = ( { className = '', isDisabled = false, - isHidden = false, isReadOnly = false, isRequired = false, ...props |