admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Update the frontend to adhere to the custom eslint rule twenty/no-spread-props (#1958)

Browse Source 
* Update the frontend to adhere to the custom eslint rule `twenty/no-spread-props`

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Update the frontend to adhere to the custom eslint rule `twenty/no-spread-props`

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* resolve bug with data-testid

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
This commit is contained in:
gitstart-twenty
2023-10-10 16:40:49 +03:00
committed by GitHub
parent 5dddd77eb3
commit bf397bc6ec
33 changed files with 276 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/modules/ui/input/components/Radio.tsx
View File

@ -118,7 +118,6 @@ export const Radio = ({
size = RadioSize.Small,
labelPosition = LabelPosition.Right,
disabled = false,
...restProps
}: RadioProps) => {
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
onChange?.(event);
@ -126,8 +125,7 @@ export const Radio = ({
};
return (
// eslint-disable-next-line twenty/no-spread-props
<StyledContainer {...restProps} labelPosition={labelPosition}>
<StyledContainer labelPosition={labelPosition}>
<StyledRadioInput
type="radio"
id="input-radio"

4
front/src/modules/ui/input/image/components/ImageInput.tsx
View File

@ -95,7 +95,6 @@ export const ImageInput = ({
isUploading = false,
errorMessage,
disabled = false,
...restProps
}: ImageInputProps) => {
const theme = useTheme();
const hiddenFileInput = React.useRef<HTMLInputElement>(null);
@ -104,8 +103,7 @@ export const ImageInput = ({
};
return (
// eslint-disable-next-line twenty/no-spread-props
<StyledContainer {...restProps}>
<StyledContainer>
<StyledPicture
withPicture={!!picture}
disabled={disabled}

23
front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx
View File

@ -34,11 +34,16 @@ export type SingleEntitySelectProps<
export const SingleEntitySelect = <
CustomEntityForSelect extends EntityForSelect,
>({
EmptyIcon,
disableBackgroundBlur = false,
emptyLabel,
entitiesToSelect,
loading,
onCancel,
onCreate,
onEntitySelected,
selectedEntity,
width,
...props
}: SingleEntitySelectProps<CustomEntityForSelect>) => {
const containerRef = useRef<HTMLDivElement>(null);
@ -69,11 +74,17 @@ export const SingleEntitySelect = <
/>
<StyledDropdownMenuSeparator />
<SingleEntitySelectBase
// eslint-disable-next-line twenty/no-spread-props
{...props}
onCancel={onCancel}
onCreate={onCreate}
showCreateButton={showCreateButton}
{...{
EmptyIcon,
emptyLabel,
entitiesToSelect,
loading,
onCancel,
onCreate,
onEntitySelected,
selectedEntity,
showCreateButton,
}}
/>
</StyledDropdownMenu>
);

27
front/src/modules/ui/input/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx
View File

@ -34,7 +34,17 @@ const meta: Meta<typeof SingleEntitySelect> = {
),
},
},
render: (args) => {
render: ({
EmptyIcon,
disableBackgroundBlur = false,
emptyLabel,
loading,
onCancel,
onCreate,
onEntitySelected,
selectedEntity,
width,
}) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const relationPickerSearchFilter = useRecoilScopedValue(
relationPickerSearchFilterScopedState,
@ -42,11 +52,20 @@ const meta: Meta<typeof SingleEntitySelect> = {
return (
<SingleEntitySelect
// eslint-disable-next-line twenty/no-spread-props
{...args}
{...{
EmptyIcon,
disableBackgroundBlur,
emptyLabel,
loading,
onCancel,
onCreate,
onEntitySelected,
selectedEntity,
width,
}}
entitiesToSelect={entities.filter(
(entity) =>
entity.id !== args.selectedEntity?.id &&
entity.id !== selectedEntity?.id &&
entity.name.includes(relationPickerSearchFilter),
)}
/>

16
front/src/modules/ui/input/text/components/TextInputSettings.tsx
View File

@ -113,7 +113,10 @@ const TextInputComponent = (
required,
type,
disableHotkeys = false,
...props
autoFocus,
placeholder,
disabled,
tabIndex,
}: TextInputComponentProps,
// eslint-disable-next-line twenty/component-props-naming
ref: ForwardedRef<HTMLInputElement>,
@ -163,19 +166,14 @@ const TextInputComponent = (
<StyledInput
autoComplete="off"
ref={combinedRef}
tabIndex={props.tabIndex ?? 0}
tabIndex={tabIndex ?? 0}
onFocus={handleFocus}
onBlur={handleBlur}
value={value}
required={required}
type={passwordVisible ? 'text' : type}
onChange={(event: ChangeEvent<HTMLInputElement>) => {
if (onChange) {
onChange(event.target.value);
}
onChange?.(event.target.value);
}}
// eslint-disable-next-line twenty/no-spread-props
{...props}
{...{ autoFocus, disabled, placeholder, required, value }}
/>
<StyledTrailingIconContainer>
{error && (

66
front/src/modules/ui/input/text/components/__stories__/TextInput.stories.tsx
View File

@ -21,15 +21,38 @@ export default meta;
type Story = StoryObj<typeof TextInputSettings>;
const FakeTextInput = ({
autoFocus,
disableHotkeys = false,
disabled,
error,
fullWidth,
label,
onBlur,
onChange,
onFocus,
placeholder,
required,
tabIndex,
type,
value: initialValue,
...props
}: React.ComponentProps<typeof TextInputSettings>) => {
const [value, setValue] = useState(initialValue);
return (
<TextInputSettings
// eslint-disable-next-line twenty/no-spread-props
{...props}
{...{
autoFocus,
disableHotkeys,
disabled,
error,
fullWidth,
label,
onBlur,
onFocus,
placeholder,
required,
tabIndex,
type,
}}
value={value}
onChange={(text) => {
setValue(text);
@ -42,8 +65,41 @@ const FakeTextInput = ({
export const Default: Story = {
argTypes: { value: { control: false } },
args: { value: 'A good value ' },
// eslint-disable-next-line twenty/no-spread-props
render: (args) => <FakeTextInput {...args} />,
render: ({
autoFocus,
disableHotkeys,
disabled,
error,
fullWidth,
label,
onBlur,
onChange,
onFocus,
placeholder,
required,
tabIndex,
type,
value,
}) => (
<FakeTextInput
{...{
autoFocus,
disableHotkeys,
disabled,
error,
fullWidth,
label,
onBlur,
onChange,
onFocus,
placeholder,
required,
tabIndex,
type,
value,
}}
/>
),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);