GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-02 05:03:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' into future/base

Browse Source
This commit is contained in:
Norbert de Langen 2022-07-02 22:44:09 +02:00
commit 379d8b83bd
No known key found for this signature in database
GPG Key ID: FD0E78AF9A837762
2 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
examples/official-storybook/stories/core/args.stories.js → examples/official-storybook/stories/core/args.stories.tsx
View File

@ -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<typeof useArgs>[1];
type ResetArgs = ReturnType<typeof useArgs>[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<CustomArgs>();
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' },

8
lib/addons/src/hooks.ts
View File

@ -424,21 +424,21 @@ export function useParameter<S>(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 = Args>(): [SpecificArgs, (newArgs: Partial<SpecificArgs>) => 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<SpecificArgs>) => 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 */