IBX-10900: [Storybook] AltRadioInput params issues

GrabowskiM · GrabowskiM · commit d8c964e3f03f · 2025-12-12T09:26:48.000+01:00
diff --git a/packages/components/src/components/Accordion/Accordion.stories.tsx b/packages/components/src/components/Accordion/Accordion.stories.tsx
@@ -36,6 +36,9 @@ const meta: Meta<typeof Accordion> = {
         header: 'Lorem ipsum',
         onHandleExpand: action('on-click'),
     },
+    argTypes: {
+        onHandleExpand: { control: { disable: true } },
+    },
 };
 
 export default meta;
diff --git a/packages/components/src/components/AltRadio/AltRadioInput/AltRadioInput.stories.tsx b/packages/components/src/components/AltRadio/AltRadioInput/AltRadioInput.stories.tsx
@@ -17,6 +17,13 @@ const meta: Meta<typeof AltRadioInputStateful> = {
         onFocus: action('on-focus'),
         onInput: action('on-input'),
     },
+    argTypes: {
+        onBlur: { control: { disable: true } },
+        onChange: { control: { disable: true } },
+        onFocus: { control: { disable: true } },
+        onInput: { control: { disable: true } },
+        ref: { control: { disable: true } },
+    },
     decorators: [
         (Story) => {
             return (
diff --git a/packages/components/src/components/AltRadio/AltRadiosListField/AltRadiosListField.stories.tsx b/packages/components/src/components/AltRadio/AltRadiosListField/AltRadiosListField.stories.tsx
@@ -18,6 +18,9 @@ const meta: Meta<typeof AltRadiosListFieldStateful> = {
             { id: 'item3', label: 'Item 3', value: 'item3' },
         ],
     },
+    argTypes: {
+        onChange: { control: { disable: true } },
+    },
 };
 
 export default meta;
diff --git a/packages/components/src/components/Button/Button.stories.tsx b/packages/components/src/components/Button/Button.stories.tsx
@@ -12,6 +12,9 @@ const meta: Meta<typeof Button> = {
         children: 'Button label',
         onClick: action('on-click'),
     },
+    argTypes: {
+        onClick: { control: { disable: true } },
+    },
 };
 
 export default meta;
diff --git a/packages/components/src/components/Checkbox/CheckboxField/CheckboxField.stories.tsx b/packages/components/src/components/Checkbox/CheckboxField/CheckboxField.stories.tsx
@@ -16,6 +16,13 @@ const meta: Meta<typeof CheckboxFieldStateful> = {
         onFocus: action('on-focus'),
         onInput: action('on-input'),
     },
+    argTypes: {
+        onBlur: { control: { disable: true } },
+        onChange: { control: { disable: true } },
+        onFocus: { control: { disable: true } },
+        onInput: { control: { disable: true } },
+        ref: { control: { disable: true } },
+    },
 };
 
 export default meta;
diff --git a/packages/components/src/components/Checkbox/CheckboxInput/CheckboxInput.stories.tsx b/packages/components/src/components/Checkbox/CheckboxInput/CheckboxInput.stories.tsx
@@ -14,6 +14,13 @@ const meta: Meta<typeof CheckboxInputStateful> = {
         onFocus: action('on-focus'),
         onInput: action('on-input'),
     },
+    argTypes: {
+        onBlur: { control: { disable: true } },
+        onChange: { control: { disable: true } },
+        onFocus: { control: { disable: true } },
+        onInput: { control: { disable: true } },
+        ref: { control: { disable: true } },
+    },
 };
 
 export default meta;
diff --git a/packages/components/src/components/Checkbox/CheckboxesListField/CheckboxesListField.stories.tsx b/packages/components/src/components/Checkbox/CheckboxesListField/CheckboxesListField.stories.tsx
@@ -18,6 +18,9 @@ const meta: Meta<typeof CheckboxesListFieldStateful> = {
             { id: 'item3', label: 'Item 3', value: 'item3' },
         ],
     },
+    argTypes: {
+        onChange: { control: { disable: true } },
+    },
 };
 
 export default meta;
diff --git a/packages/components/src/components/Chip/Chip.stories.tsx b/packages/components/src/components/Chip/Chip.stories.tsx
@@ -11,6 +11,9 @@ const meta: Meta<typeof Chip> = {
         onDelete: action('onDelete'),
         isDeletable: true,
     },
+    argTypes: {
+        onDelete: { control: { disable: true } },
+    },
 };
 
 export default meta;
diff --git a/packages/components/src/components/Dropdown/DropdownMultiInput/DropdownMultiInput.stories.tsx b/packages/components/src/components/Dropdown/DropdownMultiInput/DropdownMultiInput.stories.tsx
@@ -18,6 +18,9 @@ const meta: Meta<typeof DropdownMultiInputStateful> = {
         name: 'default-input',
         onChange: action('on-change'),
     },
+    argTypes: {
+        onChange: { control: { disable: true } },
+    },
     decorators: [DropdownDecorator],
 };
 
diff --git a/packages/components/src/components/Dropdown/DropdownSingleInput/DropdownSingleInput.stories.tsx b/packages/components/src/components/Dropdown/DropdownSingleInput/DropdownSingleInput.stories.tsx
@@ -18,6 +18,9 @@ const meta: Meta<typeof DropdownSingleInputStateful> = {
         name: 'default-input',
         onChange: action('on-change'),
     },
+    argTypes: {
+        onChange: { control: { disable: true } },
+    },
     decorators: [DropdownDecorator],
 };
 
diff --git a/packages/components/src/components/Expander/Expander.stories.tsx b/packages/components/src/components/Expander/Expander.stories.tsx
@@ -12,6 +12,9 @@ const meta: Meta<typeof Expander> = {
         type: ExpanderType.Caret,
         onClick: action('on-click'),
     },
+    argTypes: {
+        onClick: { control: { disable: true } },
+    },
 };
 
 export default meta;
diff --git a/packages/components/src/components/InputText/InputTextField/InputTextField.stories.ts b/packages/components/src/components/InputText/InputTextField/InputTextField.stories.ts
@@ -17,6 +17,10 @@ const meta: Meta<typeof InputTextFieldStateful> = {
         onChange: action('on-change'),
         onValidate: action('on-validate'),
     },
+    argTypes: {
+        onChange: { control: { disable: true } },
+        onValidate: { control: { disable: true } },
+    },
 };
 
 export default meta;
diff --git a/packages/components/src/components/InputText/InputTextInput/InputTextInput.stories.tsx b/packages/components/src/components/InputText/InputTextInput/InputTextInput.stories.tsx
@@ -13,6 +13,13 @@ const meta: Meta<typeof InputTextInputStateful> = {
         onFocus: action('on-focus'),
         onInput: action('on-input'),
     },
+    argTypes: {
+        onBlur: { control: { disable: true } },
+        onChange: { control: { disable: true } },
+        onFocus: { control: { disable: true } },
+        onInput: { control: { disable: true } },
+        ref: { control: { disable: true } },
+    },
 };
 
 export default meta;
diff --git a/packages/components/src/components/OverflowList/OverflowList.stories.tsx b/packages/components/src/components/OverflowList/OverflowList.stories.tsx
@@ -34,6 +34,10 @@ const meta: Meta<typeof OverflowList<ItemType>> = {
         ),
         renderMore: ({ hiddenCount }) => <div className="ids-overflow-list__item ids-overflow-list__item--more">+ {hiddenCount}</div>,
     },
+    argTypes: {
+        renderItem: { control: { disable: true } },
+        renderMore: { control: { disable: true } },
+    },
     decorators: [
         (Story, { parameters }) => {
             return (
diff --git a/packages/components/src/components/RadioButton/RadioButtonField/RadioButtonField.stories.tsx b/packages/components/src/components/RadioButton/RadioButtonField/RadioButtonField.stories.tsx
@@ -17,6 +17,13 @@ const meta: Meta<typeof RadioButtonFieldStateful> = {
         onFocus: action('on-focus'),
         onInput: action('on-input'),
     },
+    argTypes: {
+        onBlur: { control: { disable: true } },
+        onChange: { control: { disable: true } },
+        onFocus: { control: { disable: true } },
+        onInput: { control: { disable: true } },
+        ref: { control: { disable: true } },
+    },
     decorators: [FormDecorator],
 };
 
diff --git a/packages/components/src/components/RadioButton/RadioButtonInput/RadioButtonInput.stories.tsx b/packages/components/src/components/RadioButton/RadioButtonInput/RadioButtonInput.stories.tsx
@@ -15,6 +15,13 @@ const meta: Meta<typeof RadioButtonInputStateful> = {
         onFocus: action('on-focus'),
         onInput: action('on-input'),
     },
+    argTypes: {
+        onBlur: { control: { disable: true } },
+        onChange: { control: { disable: true } },
+        onFocus: { control: { disable: true } },
+        onInput: { control: { disable: true } },
+        ref: { control: { disable: true } },
+    },
     decorators: [FormDecorator],
 };
 
diff --git a/packages/components/src/components/RadioButton/RadioButtonsListField/RadioButtonsListField.stories.tsx b/packages/components/src/components/RadioButton/RadioButtonsListField/RadioButtonsListField.stories.tsx
@@ -19,6 +19,9 @@ const meta: Meta<typeof RadioButtonsListFieldStateful> = {
             { id: 'item3', label: 'Item 3', value: 'item3' },
         ],
     },
+    argTypes: {
+        onChange: { control: { disable: true } },
+    },
     decorators: [FormDecorator],
 };
 
diff --git a/packages/components/src/components/ToggleButton/ToggleButtonField/ToggleButtonField.stories.tsx b/packages/components/src/components/ToggleButton/ToggleButtonField/ToggleButtonField.stories.tsx
@@ -13,6 +13,9 @@ const meta: Meta<typeof ToggleButtonFieldStateful> = {
         label: 'Input Label',
         onChange: action('on-change'),
     },
+    argTypes: {
+        onChange: { control: { disable: true } },
+    },
 };
 
 export default meta;
diff --git a/packages/components/src/components/ToggleButton/ToggleButtonInput/ToggleButtonInput.stories.tsx b/packages/components/src/components/ToggleButton/ToggleButtonInput/ToggleButtonInput.stories.tsx
@@ -15,6 +15,13 @@ const meta: Meta<typeof ToggleButtonInputStateful> = {
         onFocus: action('on-focus'),
         onInput: action('on-input'),
     },
+    argTypes: {
+        onBlur: { control: { disable: true } },
+        onChange: { control: { disable: true } },
+        onFocus: { control: { disable: true } },
+        onInput: { control: { disable: true } },
+        ref: { control: { disable: true } },
+    },
     decorators: [
         (Story) => {
             return (
diff --git a/packages/components/src/hoc/withStateChecked.tsx b/packages/components/src/hoc/withStateChecked.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 
 type OnChangeFn = (checked: boolean, ...args: any[]) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -13,7 +13,6 @@ export type WithStateCheckedWrappedComponentProps<T extends object> = BaseProps
 export const withStateChecked = <T extends object>(WrappedComponent: FC<any>) => {
     const WrapperComponent = ({ checked, onChange, ...restProps }: WithStateCheckedWrappedComponentProps<T>) => {
         const [componentChecked, setComponentChecked] = useState(checked);
-
         const handleChange = (...args: Parameters<OnChangeFn>): ReturnType<OnChangeFn> => {
             setComponentChecked(args[0]);
 
@@ -22,6 +21,10 @@ export const withStateChecked = <T extends object>(WrappedComponent: FC<any>) =>
             }
         };
 
+        useEffect(() => {
+            setComponentChecked(checked);
+        }, [checked]);
+
         return <WrappedComponent {...restProps} checked={componentChecked} onChange={handleChange} />;
     };
 
diff --git a/packages/components/src/hoc/withStateValue.tsx b/packages/components/src/hoc/withStateValue.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import React, { FC, useEffect, useState } from 'react';
 
 type OnChangeFn<T> = (value: T, ...args: any[]) => any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -13,7 +13,6 @@ export type WIthStateValueWrappedComponentProps<Props, ValueType> = BaseProps<Va
 export const withStateValue = <Props, ValueType>(WrappedComponent: FC<any>) => {
     const WrapperComponent = ({ value, onChange, ...restProps }: WIthStateValueWrappedComponentProps<Props, ValueType>) => {
         const [componentValue, setComponentValue] = useState(value);
-
         const handleChange = (...args: Parameters<OnChangeFn<ValueType>>): ReturnType<OnChangeFn<ValueType>> => {
             setComponentValue(args[0]);
 
@@ -22,6 +21,10 @@ export const withStateValue = <Props, ValueType>(WrappedComponent: FC<any>) => {
             }
         };
 
+        useEffect(() => {
+            setComponentValue(value);
+        }, [value]);
+
         return <WrappedComponent {...restProps} onChange={handleChange} value={componentValue} />;
     };
 
