diff --git a/examples/official-storybook/stories/core/args.stories.js b/examples/official-storybook/stories/core/args.stories.tsx similarity index 78% rename from examples/official-storybook/stories/core/args.stories.js rename to examples/official-storybook/stories/core/args.stories.tsx index 4ee37b44f996..2242a1d1f023 100644 --- a/examples/official-storybook/stories/core/args.stories.js +++ b/examples/official-storybook/stories/core/args.stories.tsx @@ -1,8 +1,20 @@ -import React, { useState } from 'react'; +import React, { FC, useState } from 'react'; import { useArgs } from '@storybook/client-api'; -// eslint-disable-next-line react/prop-types -const ArgUpdater = ({ args, updateArgs, resetArgs }) => { +interface CustomArgs { + first?: string; + last?: string; + foo?: string; +} + +type UpdateArgs = ReturnType[1]; +type ResetArgs = ReturnType[2]; + +const ArgUpdater: FC<{ args: CustomArgs; updateArgs: UpdateArgs; resetArgs: ResetArgs }> = ({ + args, + updateArgs, + resetArgs, +}) => { const [argsInput, updateArgsInput] = useState(JSON.stringify(args)); return ( @@ -30,7 +42,7 @@ export default { title: 'Core/Args', decorators: [ (story) => { - const [args, updateArgs, resetArgs] = useArgs(); + const [args, updateArgs, resetArgs] = useArgs(); return ( <> @@ -63,14 +75,14 @@ export const DifferentSet = Template.bind({}); DifferentSet.args = { foo: 'bar', bar: 2, -}; +} as CustomArgs; export const TestUndefinedArgs = Template.bind({}); TestUndefinedArgs.args = { first: 'Bob', last: 'Miller', foo: 'bar', -}; +} as CustomArgs; TestUndefinedArgs.argTypes = { first: { control: { type: 'select' }, diff --git a/lib/addons/src/hooks.ts b/lib/addons/src/hooks.ts index dd329046ca4e..42dab8e2a6c6 100644 --- a/lib/addons/src/hooks.ts +++ b/lib/addons/src/hooks.ts @@ -424,21 +424,21 @@ export function useParameter(parameterKey: string, defaultValue?: S): S | und } /* Returns current value of story args */ -export function useArgs(): [Args, (newArgs: Args) => void, (argNames?: [string]) => void] { +export function useArgs(): [SpecificArgs, (newArgs: Partial) => void, (argNames?: (keyof SpecificArgs)[]) => void] { const channel = addons.getChannel(); const { id: storyId, args } = useStoryContext(); const updateArgs = useCallback( - (updatedArgs: Args) => channel.emit(UPDATE_STORY_ARGS, { storyId, updatedArgs }), + (updatedArgs: Partial) => channel.emit(UPDATE_STORY_ARGS, { storyId, updatedArgs }), [channel, storyId] ); const resetArgs = useCallback( - (argNames?: [string]) => channel.emit(RESET_STORY_ARGS, { storyId, argNames }), + (argNames?: (keyof SpecificArgs)[]) => channel.emit(RESET_STORY_ARGS, { storyId, argNames }), [channel, storyId] ); - return [args, updateArgs, resetArgs]; + return [args as SpecificArgs, updateArgs, resetArgs]; } /* Returns current value of global args */