Fix/storybook typescript errors

src/components/button-group/button-group.stories.tsx

@@ -1,9 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { ButtonGroup } from './button-group'
 
-const meta: Meta<typeof ButtonGroup> = {
+type ButtonGroupStoryArgs = {
+  normalLabel: string
+  disabledLabel: string
+  activeLabel: string
+  activeDisabledLabel: string
+  extraLabel: string
+}
+
+const meta: Meta<ButtonGroupStoryArgs> = {
   title: 'ButtonGroup',
-  component: ButtonGroup,
   args: {
     normalLabel: 'Normal',
     disabledLabel: 'Disabled',
@@ -12,11 +19,11 @@ const meta: Meta<typeof ButtonGroup> = {
     extraLabel: 'Button 1',
   },
   argTypes: {
-    normalLabel: { control: 'text' },
-    disabledLabel: { control: 'text' },
-    activeLabel: { control: 'text' },
-    activeDisabledLabel: { control: 'text' },
-    extraLabel: { control: 'text' },
+    normalLabel: { control: { type: 'text' } },
+    disabledLabel: { control: { type: 'text' } },
+    activeLabel: { control: { type: 'text' } },
+    activeDisabledLabel: { control: { type: 'text' } },
+    extraLabel: { control: { type: 'text' } },
   },
   parameters: {
     options: {
@@ -26,7 +33,7 @@ const meta: Meta<typeof ButtonGroup> = {
 }
 
 export default meta
-type Story = StoryObj<typeof ButtonGroup>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   render: ({

src/components/disclosure/disclosure.stories.tsx

@@ -1,16 +1,20 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { Disclosure } from './disclosure'
 
-const meta: Meta<typeof Disclosure> = {
+type DisclosureStoryArgs = {
+  buttonLabel: string
+  panelContent: string
+}
+
+const meta: Meta<DisclosureStoryArgs> = {
   title: 'Disclosure',
-  component: Disclosure,
   args: {
     buttonLabel: 'Disclosure Button',
     panelContent: 'Disclosure Content',
   },
   argTypes: {
-    buttonLabel: { control: 'text' },
-    panelContent: { control: 'text' },
+    buttonLabel: { control: { type: 'text' } },
+    panelContent: { control: { type: 'text' } },
   },
   parameters: {
     options: {
@@ -20,7 +24,7 @@ const meta: Meta<typeof Disclosure> = {
 }
 
 export default meta
-type Story = StoryObj<typeof Disclosure>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   render: ({ buttonLabel, panelContent }) => (

src/components/divider-line/divider-line.stories.tsx

@@ -2,7 +2,12 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import { DividerLine } from './divider-line'
 
-const meta: Meta<typeof DividerLine> = {
+type DividerLineStoryArgs = {
+  padding: number
+  showIcons: boolean
+}
+
+const meta: Meta<DividerLineStoryArgs> = {
   title: 'DividerLine',
   component: DividerLine,
   args: {
@@ -11,23 +16,23 @@ const meta: Meta<typeof DividerLine> = {
   },
   argTypes: {
     padding: { control: { type: 'range', min: 0, max: 32, step: 2 } },
-    showIcons: { control: 'boolean' },
+    showIcons: { control: { type: 'boolean' } },
   },
   parameters: { layout: 'fullscreen' },
-  render: ({ padding, showIcons }) => (
-    <div style={{ padding }}>
-      {showIcons ?
+  render: (args: DividerLineStoryArgs) => (
+    <div style={{ padding: args.padding }}>
+      {args.showIcons ?
         <span>🌞</span>
       : null}
       <DividerLine />
-      {showIcons ?
+      {args.showIcons ?
         <span>🌙</span>
       : null}
     </div>
   ),
 }
 
 export default meta
-type Story = StoryObj<typeof DividerLine>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}

src/components/featured-tag/featured-tag.stories.tsx

@@ -4,22 +4,26 @@ import { FeaturedTag } from './featured-tag'
 import { Panel } from '../panel'
 import { FormField } from '../form-field'
 
-const meta: Meta<typeof FeaturedTag> = {
+type FeaturedTagStoryArgs = {
+  tagLabel: string
+  panelText: string
+}
+
+const meta: Meta<FeaturedTagStoryArgs> = {
   title: 'Input/FeaturedTag',
-  component: FeaturedTag,
   args: {
     tagLabel: 'Recommended!',
     panelText: 'This example uses a Panel component',
   },
   argTypes: {
-    tagLabel: { control: 'text' },
-    panelText: { control: 'text' },
+    tagLabel: { control: { type: 'text' } },
+    panelText: { control: { type: 'text' } },
   },
 }
 
 export default meta
 
-type Story = StoryObj<typeof FeaturedTag>
+type Story = StoryObj<typeof meta>
 
 const RadioBoxWithRecommendationTag = ({ tagLabel }: { tagLabel: string }) => {
   const [value, setValue] = useState('value_1')

src/components/form-field/multi-combobox/multi-combobox-badges.stories.tsx

@@ -1,21 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { FormField } from '../form-field'
-import { hiddenArgControl } from '../../../util/storybook-utils'
 import {
   MultiComboboxBadgeStory,
   multiComboboxArgTypes,
   multiComboboxArgs,
+  type MultiComboboxStoryArgs,
 } from './multi-combobox.story-helpers'
 
-const meta: Meta = {
+const meta: Meta<MultiComboboxStoryArgs> = {
   title: 'Input/MultiCombobox/Badges',
-  component: FormField.MultiCombobox,
   args: multiComboboxArgs,
   argTypes: {
     ...multiComboboxArgTypes,
-    value: hiddenArgControl,
-    onChange: hiddenArgControl,
-    className: hiddenArgControl,
   },
   parameters: {
     controls: {
@@ -26,15 +21,15 @@ const meta: Meta = {
 
 export default meta
 
-type Story = StoryObj<typeof FormField.MultiCombobox>
+type Story = StoryObj<typeof meta>
 
 export const Badges: Story = {
   render: ({ label, description, placeholder, width }) => (
-    <div style={{ width }}>
+    <div style={{ width: width ?? 288 }}>
       <MultiComboboxBadgeStory
-        label={label as string}
-        description={description as string}
-        placeholder={placeholder as string}
+        label={label}
+        description={description}
+        placeholder={placeholder}
       />
     </div>
   ),

src/components/form-field/multi-combobox/multi-combobox-custom-value.stories.tsx

@@ -1,21 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { FormField } from '../form-field'
-import { hiddenArgControl } from '../../../util/storybook-utils'
 import {
   MultiComboboxCustomValueStory,
   multiComboboxArgTypes,
   multiComboboxArgs,
+  type MultiComboboxStoryArgs,
 } from './multi-combobox.story-helpers'
 
-const meta: Meta = {
+const meta: Meta<MultiComboboxStoryArgs> = {
   title: 'Input/MultiCombobox/CustomValue',
-  component: FormField.MultiCombobox,
   args: multiComboboxArgs,
   argTypes: {
     ...multiComboboxArgTypes,
-    value: hiddenArgControl,
-    onChange: hiddenArgControl,
-    className: hiddenArgControl,
   },
   parameters: {
     controls: {
@@ -26,15 +21,15 @@ const meta: Meta = {
 
 export default meta
 
-type Story = StoryObj<typeof FormField.MultiCombobox>
+type Story = StoryObj<typeof meta>
 
 export const CustomValue: Story = {
   render: ({ label, description, placeholder, width }) => (
-    <div style={{ width }}>
+    <div style={{ width: width ?? 288 }}>
       <MultiComboboxCustomValueStory
-        label={label as string}
-        description={description as string}
-        placeholder={placeholder as string}
+        label={label}
+        description={description}
+        placeholder={placeholder}
       />
     </div>
   ),

src/components/form-field/multi-combobox/multi-combobox-tags.stories.tsx

@@ -1,21 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { FormField } from '../form-field'
-import { hiddenArgControl } from '../../../util/storybook-utils'
 import {
   MultiComboboxTagStory,
   multiComboboxArgTypes,
   multiComboboxArgs,
+  type MultiComboboxStoryArgs,
 } from './multi-combobox.story-helpers'
 
-const meta: Meta = {
+const meta: Meta<MultiComboboxStoryArgs> = {
   title: 'Input/MultiCombobox/Tags',
-  component: FormField.MultiCombobox,
   args: multiComboboxArgs,
   argTypes: {
     ...multiComboboxArgTypes,
-    value: hiddenArgControl,
-    onChange: hiddenArgControl,
-    className: hiddenArgControl,
   },
   parameters: {
     controls: {
@@ -26,15 +21,15 @@ const meta: Meta = {
 
 export default meta
 
-type Story = StoryObj<typeof FormField.MultiCombobox>
+type Story = StoryObj<typeof meta>
 
 export const Tags: Story = {
   render: ({ label, description, placeholder, width }) => (
-    <div style={{ width }}>
+    <div style={{ width: width ?? 288 }}>
       <MultiComboboxTagStory
-        label={label as string}
-        description={description as string}
-        placeholder={placeholder as string}
+        label={label}
+        description={description}
+        placeholder={placeholder}
       />
     </div>
   ),

src/components/form-field/multi-combobox/multi-combobox.stories.tsx

@@ -1,22 +1,17 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { FormField } from '../form-field'
-import { hiddenArgControl } from '../../../util/storybook-utils'
 import {
   MultiComboboxTextStory,
   multiComboboxArgTypes,
   multiComboboxArgs,
+  type MultiComboboxStoryArgs,
 } from './multi-combobox.story-helpers'
 
-const meta: Meta = {
+const meta: Meta<MultiComboboxStoryArgs> = {
   title: 'Input/MultiCombobox',
-  component: FormField.MultiCombobox,
   args: multiComboboxArgs,
   argTypes: {
     ...multiComboboxArgTypes,
-    value: hiddenArgControl,
-    onChange: hiddenArgControl,
-    className: hiddenArgControl,
   },
   parameters: {
     controls: {
@@ -27,15 +22,15 @@ const meta: Meta = {
 
 export default meta
 
-type Story = StoryObj<typeof FormField.MultiCombobox>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   render: ({ label, description, placeholder, width }) => (
-    <div style={{ width }}>
+    <div style={{ width: width ?? 288 }}>
       <MultiComboboxTextStory
-        label={label as string}
-        description={description as string}
-        placeholder={placeholder as string}
+        label={label}
+        description={description}
+        placeholder={placeholder}
       />
     </div>
   ),

src/components/form-field/multi-combobox/multi-combobox.story-helpers.tsx

@@ -18,10 +18,10 @@ export const multiComboboxArgs: MultiComboboxStoryArgs = {
 }
 
 export const multiComboboxArgTypes = {
-  label: { control: 'text' },
-  description: { control: 'text' },
-  placeholder: { control: 'text' },
-  width: { control: { type: 'range', min: 200, max: 360, step: 16 } },
+  label: { control: { type: 'text' as const } },
+  description: { control: { type: 'text' as const } },
+  placeholder: { control: { type: 'text' as const } },
+  width: { control: { type: 'range' as const, min: 200, max: 360, step: 16 } },
 }
 
 const people = [