simplify

Author: GrabowskiM

packages/components/src/inputs/AltRadio/AltRadio.stories.tsx

@@ -3,19 +3,9 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from 'storybook/actions';
 
-import { AltRadioProps } from './AltRadio.types';
-import { WrappedComponentProps } from '@ids-internal/hoc/withStateChecked';
-
 import { AltRadioStateful } from './AltRadio';
 
-type StoryProps = WrappedComponentProps<AltRadioProps> & {
-    'inputProps.checked'?: boolean;
-    'inputProps.disabled'?: boolean;
-    'inputProps.error'?: boolean;
-    'inputProps.name'?: string;
-};
-
-const meta: Meta<StoryProps> = {
+const meta: Meta<typeof AltRadioStateful> = {
     component: AltRadioStateful,
     parameters: {
         layout: 'centered',
@@ -28,44 +18,20 @@ const meta: Meta<StoryProps> = {
         title: {
             control: 'text',
         },
-        inputProps: {
-            control: false,
-        },
-        'inputProps.checked': {
-            control: 'boolean',
-        },
-        'inputProps.disabled': {
-            control: 'boolean',
-        },
-        'inputProps.error': {
-            control: 'boolean',
-        },
-        'inputProps.name': {
-            control: 'text',
-        },
     },
     args: {
         label: '1:1',
-        inputProps: {
-            name: 'default-input',
-            onBlur: action('on-blur'),
-            onChange: action('on-change'),
-            onFocus: action('on-focus'),
-            onInput: action('on-input'),
-        },
+        name: 'default-input',
+        onBlur: action('on-blur'),
+        onChange: action('on-change'),
+        onFocus: action('on-focus'),
+        onInput: action('on-input'),
     },
     decorators: [
-        (Story, { args }) => {
-            const inputProps = { ...args.inputProps };
-
-            inputProps.checked = args['inputProps.checked'] ?? false;
-            inputProps.disabled = args['inputProps.disabled'] ?? false;
-            inputProps.error = args['inputProps.error'] ?? false;
-            inputProps.name = args['inputProps.name'] ?? '';
-
+        (Story) => {
             return (
                 <form name="default-form">
-                    <Story args={{ ...args, inputProps }} />
+                    <Story />
                 </form>
             );
         },
@@ -74,7 +40,7 @@ const meta: Meta<StoryProps> = {
 
 export default meta;
 
-type Story = StoryObj<StoryProps>;
+type Story = StoryObj<typeof AltRadioStateful>;
 
 export const Empty: Story = {
     name: 'Empty',
@@ -83,36 +49,36 @@ export const Empty: Story = {
 export const EmptyDisabled: Story = {
     name: 'Empty (Disabled)',
     args: {
-        'inputProps.disabled': true,
+        disabled: true,
     },
 };
 
 export const EmptyError: Story = {
     name: 'Empty (Error)',
     args: {
-        'inputProps.error': true,
+        error: true,
     },
 };
 
 export const Checked: Story = {
     name: 'Checked',
     args: {
-        'inputProps.checked': true,
+        checked: true,
     },
 };
 
 export const CheckedDisabled: Story = {
     name: 'Checked (Disabled)',
     args: {
-        'inputProps.disabled': true,
-        'inputProps.checked': true,
+        disabled: true,
+        checked: true,
     },
 };
 
 export const CheckedError: Story = {
     name: 'Checked (Error)',
     args: {
-        'inputProps.error': true,
-        'inputProps.checked': true,
+        error: true,
+        checked: true,
     },
 };

packages/components/src/inputs/AltRadio/AltRadio.test.stories.tsx

@@ -11,13 +11,11 @@ const meta: Meta<typeof AltRadioStateful> = {
     tags: ['!dev'],
     args: {
         label: '1:1',
-        inputProps: {
-            name: 'default-input',
-            onBlur: fn(),
-            onChange: fn(),
-            onFocus: fn(),
-            onInput: fn(),
-        },
+        name: 'default-input',
+        onBlur: fn(),
+        onChange: fn(),
+        onFocus: fn(),
+        onInput: fn(),
     },
 };
 
@@ -32,21 +30,21 @@ export const Default: Story = {
         const input = canvas.getByRole('button');
 
         await step('Radio Button handles focus event', async () => {
-            await expect(args.inputProps.onFocus).not.toHaveBeenCalled();
+            await expect(args.onFocus).not.toHaveBeenCalled();
 
             await userEvent.click(input);
 
-            await expect(args.inputProps.onFocus).toHaveBeenCalledOnce();
-            await expect(args.inputProps.onChange).toHaveBeenCalledOnce();
-            await expect(args.inputProps.onInput).toHaveBeenCalledOnce();
+            await expect(args.onFocus).toHaveBeenCalledOnce();
+            await expect(args.onChange).toHaveBeenCalledOnce();
+            await expect(args.onInput).toHaveBeenCalledOnce();
         });
 
         await step('Radio Button handles blur event', async () => {
-            await expect(args.inputProps.onBlur).not.toHaveBeenCalled();
+            await expect(args.onBlur).not.toHaveBeenCalled();
 
             await userEvent.click(canvasElement);
 
-            await expect(args.inputProps.onBlur).toHaveBeenCalledOnce();
+            await expect(args.onBlur).toHaveBeenCalledOnce();
         });
     },
 };

packages/components/src/inputs/AltRadio/AltRadio.tsx

@@ -6,7 +6,7 @@ import withStateChecked from '@ids-internal/hoc/withStateChecked';
 
 import { AltRadioProps } from './AltRadio.types';
 
-const AltRadio = ({ className = '', label, inputProps }: AltRadioProps) => {
+const AltRadio = ({ className = '', label, ...inputProps }: AltRadioProps) => {
     const { checked = false, disabled = false, error = false, onBlur, onChange, onFocus, onInput } = inputProps;
     const inputRef = useRef<HTMLInputElement>(null);
     const [isFocused, setIsFocused] = useState(false);

packages/components/src/inputs/AltRadio/AltRadio.types.ts

@@ -1,24 +1,7 @@
-import { ReactNode, Ref } from 'react';
+import { ReactNode } from 'react';
 
-import { BaseComponentAriaAttributes } from '@ids-types/general';
+import { BaseChoiceInputProps } from '@ids-internal/partials/BaseChoiceInput';
 
-interface InputPropsType {
-    name: string;
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    onChange?: (value: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: React.FocusEventHandler<HTMLInputElement>;
-    onInput?: (value: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
-    checked?: boolean;
-    disabled?: boolean;
-    error?: boolean;
-    id?: string;
-    className?: string;
-    ref?: Ref<HTMLInputElement>;
-    required?: boolean;
-    value?: string;
-}
-
-export interface AltRadioProps extends BaseComponentAriaAttributes {
+export interface AltRadioProps extends Omit<BaseChoiceInputProps, 'type'> {
     label: ReactNode;
-    inputProps: InputPropsType;
-}
+};