fix: select options, default values

leverage inference of control types by args attribute

Author: Michael Adlfinger

src/Alert/index.stories.tsx

@@ -5,26 +5,18 @@ import { Alert, AlertProps } from './index';
 
 export default {
   title: 'Alert',
+  args: {
+    closable: false,
+    showIcon: false,
+    type: 'success',
+  },
   argTypes: {
     onClose: { action: 'clicked' },
-    closable: {
-      control: {
-        type: 'boolean',
-        checked: false,
-      },
-    },
-    showIcon: {
-      control: {
-        type: 'boolean',
-        checked: false,
-      },
-    },
     type: {
       control: {
         type: 'inline-radio',
-        options: ['success', 'info', 'warning', 'error'],
-        default: 'success',
       },
+      options: ['success', 'info', 'warning', 'error'],
     },
   },
 };

src/Avatar/index.stories.tsx

@@ -10,6 +10,9 @@ import { Avatar, AvatarProps, UserAvatar, UserAvatarProps } from './index';
 
 export default {
   title: 'Avatar',
+  args: {
+    username: 'ABC',
+  },
 };
 
 export const Default: Story<AvatarProps> = function Default(args) {
@@ -31,16 +34,12 @@ export const CustomizableUserAvatar: Story<UserAvatarProps> =
     return <UserAvatar {...args} />;
   };
 
-CustomizableUserAvatar.argTypes = {
-  username: { control: { type: 'text' }, defaultValue: 'ABC' },
-};
-
 export const VariableUserAvatars: Story<Omit<UserAvatarProps, 'username'>> =
   function VariableUserAvatars(args) {
     return (
       <>
         {range(1, 50).map((i) => (
-          <UserAvatar key={i} username={randomString()} {...args} />
+          <UserAvatar key={i} {...args} username={randomString()} />
         ))}
       </>
     );

src/Button/index.stories.tsx

@@ -20,24 +20,18 @@ import {
 export default {
   title: 'Button',
   component: Button,
+  args: {
+    loading: false,
+    disabled: false,
+  },
   argTypes: {
     color: { control: 'color' },
     onClick: { action: 'clicked' },
     size: {
       control: {
         type: 'select',
-        options: ['small', 'medium', 'large'],
-      },
-    },
-    loading: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
       },
+      options: ['small', 'medium', 'large'],
     },
   },
 };

src/Fields/index.stories.tsx

@@ -24,6 +24,10 @@ import { formItemFieldProps } from './formItemFieldProps';
 
 export default {
   title: 'Fields',
+  args: {
+    disabled: false,
+    hasError: false,
+  },
 };
 
 type FormType = {
@@ -87,20 +91,6 @@ export const ControlledError: Story<{
     </FieldProvider>
   );
 };
-ControlledError.argTypes = {
-  disabled: {
-    control: {
-      type: 'boolean',
-      checked: false,
-    },
-  },
-  hasError: {
-    control: {
-      type: 'boolean',
-      checked: false,
-    },
-  },
-};
 
 export const NestedProviders: Story<FieldProviderProps> =
   function NestedProviders(props) {
@@ -119,14 +109,6 @@ export const NestedProviders: Story<FieldProviderProps> =
       </FieldProvider>
     );
   };
-NestedProviders.argTypes = {
-  disabled: {
-    control: {
-      type: 'boolean',
-      checked: false,
-    },
-  },
-};
 
 function AllFields() {
   const formMethods = useFormContext<FormType>();

src/Form/index.stories.tsx

@@ -8,9 +8,11 @@ import { Form, FormProps } from './index';
 
 export default {
   title: 'Form',
+  args: {
+    bordered: false,
+    loading: false,
+  },
   argTypes: {
-    bordered: { control: 'boolean' },
-    loading: { control: 'boolean' },
     onFinish: { action: 'clicked' },
     onFinishFailed: { action: 'clicked' },
   },

src/Image/index.stories.tsx

@@ -6,7 +6,9 @@ import { Image, ImageProps } from './index';
 export default {
   title: 'Image',
   component: Image,
-  argTypes: { width: { control: { type: 'number' }, defaultValue: 200 } },
+  args: {
+    width: 200,
+  },
 };
 
 export const Default: Story<ImageProps> = function Default(args) {

src/ImageMap/index.stories.tsx

@@ -11,6 +11,9 @@ import { PopoverArea } from './PopoverArea';
 
 export default {
   title: 'ImageMap',
+  args: {
+    src: 'https://picsum.photos/600/600',
+  },
 };
 
 export const TecanLayoutExample: Story = function Default() {
@@ -63,10 +66,3 @@ export const Default: Story<ImageMapProps> = function Default(args) {
     </ImageMap>
   );
 };
-
-Default.argTypes = {
-  src: {
-    control: { type: 'text' },
-    defaultValue: 'https://picsum.photos/600/600',
-  },
-};

src/List/index.stories.tsx

@@ -6,9 +6,9 @@ import { List, ListProps } from './index';
 export default {
   title: 'List',
   component: List,
-  argTypes: {
-    bordered: { control: 'boolean' },
-    loading: { control: 'boolean' },
+  args: {
+    bordered: false,
+    loading: false,
   },
 };
 

src/Modal/index.stories.tsx

@@ -9,8 +9,8 @@ import { WithModal, WithModalProps } from './WithModal';
 
 export default {
   title: 'Modal',
-  argTypes: {
-    width: { control: 'number' },
+  args: {
+    width: 500,
   },
 };
 

src/Plate/index.stories.tsx

@@ -15,9 +15,9 @@ import { Plate } from './index';
 
 export default {
   title: 'Plate',
-  argTypes: {
-    loading: { control: 'boolean' },
-    isDraggable: { control: 'boolean' },
+  args: {
+    isDraggable: false,
+    loading: false,
   },
 };