From 2a9b09e3636cf4b06a35bab3d8cbe0b9725cc003 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Wed, 17 May 2023 08:40:07 -0500 Subject: [PATCH 01/15] docs: add information about @storybook/preview-api useArgs hook Provide example for those migrating from v6 to v7 and were previously using the @storybook/client-api useArgs hook --- docs/writing-stories/args.md | 37 ++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 4d3a53652ff7..f329e1fb0453 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -207,6 +207,43 @@ Similarly, special formats are available for dates and colors. Date objects will Args specified through the URL will extend and override any default values of args set on the story. +## Setting args from withihn a story + +Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Switch component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`: + +```ts +// my-component/component.stories.tsx + +import { StoryObj, Meta } from "@storybook/react"; +import { useArgs } from "@storybook/preview-api"; +import { Switch } from "."; + +export const meta: Meta = { + title: "Inputs/Switch", + component: Switch +}; +export default meta; + +type Story = StoryObj; + +export const Standard = { + ...template, + args: { + isChecked: false, + label: "Switch Me!" + }, + render: (args) => { + const [{ isChecked }, updateArgs] = useArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; + } +}; +``` + ## Mapping to complex arg values Complex values such as JSX elements cannot be serialized to the manager (e.g., the Controls addon) or synced with the URL. Arg values can be "mapped" from a simple string to a complex type using the `mapping` property in `argTypes` to work around this limitation. It works in any arg but makes the most sense when used with the `select` control type. From 9e5f9817d641177f365a321a0ecce963573f8a9e Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Wed, 17 May 2023 08:46:31 -0500 Subject: [PATCH 02/15] docs: fix issue with code sample Removed remnant of template method. Shoudl be GTG now. --- docs/writing-stories/args.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index f329e1fb0453..50440ee76564 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -226,8 +226,7 @@ export default meta; type Story = StoryObj; -export const Standard = { - ...template, +export const Example = { args: { isChecked: false, label: "Switch Me!" From b701f0fa547361f730769cffcaad511310612b12 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Wed, 17 May 2023 09:03:41 -0500 Subject: [PATCH 03/15] docs: fix code block - remove unnecessary export Removed unnecessary export --- docs/writing-stories/args.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 50440ee76564..17dbe3bc8754 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -218,7 +218,7 @@ import { StoryObj, Meta } from "@storybook/react"; import { useArgs } from "@storybook/preview-api"; import { Switch } from "."; -export const meta: Meta = { +const meta: Meta = { title: "Inputs/Switch", component: Switch }; From aade9cc5f33fdf327f24460c5deb5c0fc5e48fa1 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Wed, 17 May 2023 09:25:39 -0500 Subject: [PATCH 04/15] docs: now passes eslint Made changes to code block to ensure that it will pass eslint rule `react-hooks/rules-of-hooks` --- docs/writing-stories/args.md | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 17dbe3bc8754..4006ca9d9f7a 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -216,7 +216,7 @@ Components with interactivity often need their containing component, or page, to import { StoryObj, Meta } from "@storybook/react"; import { useArgs } from "@storybook/preview-api"; -import { Switch } from "."; +import { Switch, SwitchProps } from "."; const meta: Meta = { title: "Inputs/Switch", @@ -226,20 +226,23 @@ export default meta; type Story = StoryObj; +// Separate render logic into a new function that will not cause issues with eslint rule `react-hooks/rules-of-hooks` +const WrappedComponent = (args: SwitchProps) => { + const [{ isChecked }, updateArgs] = UseArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; +} + export const Example = { args: { isChecked: false, label: "Switch Me!" }, - render: (args) => { - const [{ isChecked }, updateArgs] = useArgs(); - - function onChange() { - updateArgs({ isChecked: !isChecked }); - } - - return ; - } + render: (args) => }; ``` From 1d5413028689b53bcb01fca97ed7685ce0a8f7af Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Wed, 17 May 2023 12:38:52 -0500 Subject: [PATCH 05/15] docs: change code block to be minimum example that does not cause eslint or storybook errors --- docs/writing-stories/args.md | 24 +++++++++++------------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 4006ca9d9f7a..5a353bec6dd9 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -216,7 +216,7 @@ Components with interactivity often need their containing component, or page, to import { StoryObj, Meta } from "@storybook/react"; import { useArgs } from "@storybook/preview-api"; -import { Switch, SwitchProps } from "."; +import { Switch } from "."; const meta: Meta = { title: "Inputs/Switch", @@ -226,23 +226,21 @@ export default meta; type Story = StoryObj; -// Separate render logic into a new function that will not cause issues with eslint rule `react-hooks/rules-of-hooks` -const WrappedComponent = (args: SwitchProps) => { - const [{ isChecked }, updateArgs] = UseArgs(); - - function onChange() { - updateArgs({ isChecked: !isChecked }); - } - - return ; -} - export const Example = { args: { isChecked: false, label: "Switch Me!" }, - render: (args) => + render: (args) => { + // eslint-disable-next-line + const [{ isChecked }, updateArgs] = UseArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; + } }; ``` From d12518c66788c47fd0aa0e3c67d5873a93b3b156 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Wed, 17 May 2023 12:42:48 -0500 Subject: [PATCH 06/15] docs: fix typo in header --- docs/writing-stories/args.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 5a353bec6dd9..811d5d06a781 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -207,7 +207,7 @@ Similarly, special formats are available for dates and colors. Date objects will Args specified through the URL will extend and override any default values of args set on the story. -## Setting args from withihn a story +## Setting args from within a story Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Switch component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`: From 665c1a88a6760f3d3167834e2dae1513979a9f2a Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Thu, 18 May 2023 08:00:59 -0500 Subject: [PATCH 07/15] docs: align code pattern to ensure no eslint or storybook issues --- docs/writing-stories/args.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 811d5d06a781..89337d510193 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -231,8 +231,7 @@ export const Example = { isChecked: false, label: "Switch Me!" }, - render: (args) => { - // eslint-disable-next-line + render: function Render(args) { const [{ isChecked }, updateArgs] = UseArgs(); function onChange() { From 449b0529a0031ca0ef8256502d19de02af03a5ff Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Fri, 16 Jun 2023 15:04:41 -0500 Subject: [PATCH 08/15] make changes per recommendations --- .../react/page-story-args-within-story.js.mdx | 27 ++++++++++++ .../react/page-story-args-within-story.ts.mdx | 31 ++++++++++++++ docs/writing-stories/args.md | 41 +++++-------------- 3 files changed, 68 insertions(+), 31 deletions(-) create mode 100644 docs/snippets/react/page-story-args-within-story.js.mdx create mode 100644 docs/snippets/react/page-story-args-within-story.ts.mdx diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx new file mode 100644 index 000000000000..c523c2682eb3 --- /dev/null +++ b/docs/snippets/react/page-story-args-within-story.js.mdx @@ -0,0 +1,27 @@ +```ts +// my-component/component.stories.js|jsx + +import { useArgs } from '@storybook/preview-api'; +import { Switch } from '.'; + +export const meta = { + title: 'Inputs/Switch', + component: Switch, +}; + +export const Example = { + args: { + isChecked: false, + label: 'Switch Me!', + }, + render: function Render(args) { + const [{ isChecked }, updateArgs] = UseArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; + }, +}; +``` diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx new file mode 100644 index 000000000000..fb0fdff989a0 --- /dev/null +++ b/docs/snippets/react/page-story-args-within-story.ts.mdx @@ -0,0 +1,31 @@ +```ts +// my-component/component.stories.ts|tsx + +import { StoryObj, Meta } from '@storybook/react'; +import { useArgs } from '@storybook/preview-api'; +import { Switch } from '.'; + +const meta: Meta = { + title: 'Inputs/Switch', + component: Switch, +}; +export default meta; + +type Story = StoryObj; + +export const Example = { + args: { + isChecked: false, + label: 'Switch Me!', + }, + render: function Render(args) { + const [{ isChecked }, updateArgs] = UseArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; + }, +}; +``` diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 89337d510193..ea83df908531 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -211,37 +211,16 @@ Args specified through the URL will extend and override any default values of ar Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Switch component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`: -```ts -// my-component/component.stories.tsx - -import { StoryObj, Meta } from "@storybook/react"; -import { useArgs } from "@storybook/preview-api"; -import { Switch } from "."; - -const meta: Meta = { - title: "Inputs/Switch", - component: Switch -}; -export default meta; - -type Story = StoryObj; - -export const Example = { - args: { - isChecked: false, - label: "Switch Me!" - }, - render: function Render(args) { - const [{ isChecked }, updateArgs] = UseArgs(); - - function onChange() { - updateArgs({ isChecked: !isChecked }); - } - - return ; - } -}; -``` + + + + + ## Mapping to complex arg values From cec457628d99c542e4d09465e939b619131842b4 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Fri, 16 Jun 2023 15:18:45 -0500 Subject: [PATCH 09/15] fix typos; align style to other js code snippets --- .../react/page-story-args-within-story.js.mdx | 11 ++++++++--- .../react/page-story-args-within-story.ts.mdx | 7 ++++++- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx index c523c2682eb3..ceec5acabc65 100644 --- a/docs/snippets/react/page-story-args-within-story.js.mdx +++ b/docs/snippets/react/page-story-args-within-story.js.mdx @@ -1,10 +1,10 @@ -```ts +```js // my-component/component.stories.js|jsx import { useArgs } from '@storybook/preview-api'; import { Switch } from '.'; -export const meta = { +export default { title: 'Inputs/Switch', component: Switch, }; @@ -14,8 +14,13 @@ export const Example = { isChecked: false, label: 'Switch Me!', }, + /** + * 👇 React things the Storybook function "useArgs" is a hook, but it's really not. + * Using a named capital-letter function prevents an ESLint warning related to this. + * Don't lint? You can use an arrow function instead. + */ render: function Render(args) { - const [{ isChecked }, updateArgs] = UseArgs(); + const [{ isChecked }, updateArgs] = useArgs(); function onChange() { updateArgs({ isChecked: !isChecked }); diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx index fb0fdff989a0..9c1dc3c601d1 100644 --- a/docs/snippets/react/page-story-args-within-story.ts.mdx +++ b/docs/snippets/react/page-story-args-within-story.ts.mdx @@ -18,8 +18,13 @@ export const Example = { isChecked: false, label: 'Switch Me!', }, + /** + * 👇 React things the Storybook function "useArgs" is a hook, but it's really not. + * Using a named capital-letter function prevents an ESLint warning related to this. + * Don't lint? You can use an arrow function instead. + */ render: function Render(args) { - const [{ isChecked }, updateArgs] = UseArgs(); + const [{ isChecked }, updateArgs] = useArgs(); function onChange() { updateArgs({ isChecked: !isChecked }); From 8add32d6d97614d82b64bdec03a6b627ccbef2bd Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Fri, 16 Jun 2023 15:21:47 -0500 Subject: [PATCH 10/15] fix mispelling in comments --- docs/snippets/react/page-story-args-within-story.js.mdx | 2 +- docs/snippets/react/page-story-args-within-story.ts.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx index ceec5acabc65..8b8391d786d7 100644 --- a/docs/snippets/react/page-story-args-within-story.js.mdx +++ b/docs/snippets/react/page-story-args-within-story.js.mdx @@ -15,7 +15,7 @@ export const Example = { label: 'Switch Me!', }, /** - * 👇 React things the Storybook function "useArgs" is a hook, but it's really not. + * 👇 React believes the Storybook function "useArgs" is a hook, but it's really not. * Using a named capital-letter function prevents an ESLint warning related to this. * Don't lint? You can use an arrow function instead. */ diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx index 9c1dc3c601d1..1e232015c992 100644 --- a/docs/snippets/react/page-story-args-within-story.ts.mdx +++ b/docs/snippets/react/page-story-args-within-story.ts.mdx @@ -19,7 +19,7 @@ export const Example = { label: 'Switch Me!', }, /** - * 👇 React things the Storybook function "useArgs" is a hook, but it's really not. + * 👇 React believes the Storybook function "useArgs" is a hook, but it's really not. * Using a named capital-letter function prevents an ESLint warning related to this. * Don't lint? You can use an arrow function instead. */ From f9e2e0d5d8161a29136e0046957e75ffd6122e03 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Fri, 11 Aug 2023 16:05:10 -0500 Subject: [PATCH 11/15] add typescript 4.9 snippet --- .../react/page-story-args-within-story.js.mdx | 15 ++++---- .../page-story-args-within-story.ts-4-9.mdx | 35 +++++++++++++++++++ .../react/page-story-args-within-story.ts.mdx | 21 ++++++----- docs/writing-stories/args.md | 8 ++--- node_modules/.package-lock.json | 6 ++++ 5 files changed, 62 insertions(+), 23 deletions(-) create mode 100644 docs/snippets/react/page-story-args-within-story.ts-4-9.mdx create mode 100644 node_modules/.package-lock.json diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx index 8b8391d786d7..282e81f79cf7 100644 --- a/docs/snippets/react/page-story-args-within-story.js.mdx +++ b/docs/snippets/react/page-story-args-within-story.js.mdx @@ -2,22 +2,21 @@ // my-component/component.stories.js|jsx import { useArgs } from '@storybook/preview-api'; -import { Switch } from '.'; +import { Checkbox } from './checkbox'; export default { - title: 'Inputs/Switch', - component: Switch, + title: 'Inputs/Checkbox', + component: Checkbox, }; export const Example = { args: { isChecked: false, - label: 'Switch Me!', + label: 'Try Me!', }, /** - * 👇 React believes the Storybook function "useArgs" is a hook, but it's really not. - * Using a named capital-letter function prevents an ESLint warning related to this. - * Don't lint? You can use an arrow function instead. + * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name. + * If you are not concerned with linting, you may use an arrow function. */ render: function Render(args) { const [{ isChecked }, updateArgs] = useArgs(); @@ -26,7 +25,7 @@ export const Example = { updateArgs({ isChecked: !isChecked }); } - return ; + return ; }, }; ``` diff --git a/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx b/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx new file mode 100644 index 000000000000..5a23cb8f523e --- /dev/null +++ b/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx @@ -0,0 +1,35 @@ +```ts +// my-component/component.stories.ts|tsx + +import { StoryObj, Meta } from '@storybook/react'; +import { useArgs } from '@storybook/preview-api'; +import { Checkbox } from './checkbox'; + +const meta = { + title: 'Inputs/Checkbox', + component: Checkbox, +} satisfies Meta; +export default meta; + +type Story = StoryObj; + +export const Example = { + args: { + isChecked: false, + label: 'Try Me!', + }, + /** + * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name. + * If you are not concerned with linting, you may use an arrow function. + */ + render: function Render(args) { + const [{ isChecked }, updateArgs] = useArgs(); + + function onChange() { + updateArgs({ isChecked: !isChecked }); + } + + return ; + }, +} satisfies Story; +``` diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx index 1e232015c992..137e37cbf3d6 100644 --- a/docs/snippets/react/page-story-args-within-story.ts.mdx +++ b/docs/snippets/react/page-story-args-within-story.ts.mdx @@ -3,25 +3,24 @@ import { StoryObj, Meta } from '@storybook/react'; import { useArgs } from '@storybook/preview-api'; -import { Switch } from '.'; +import { Checkbox } from './checkbox'; -const meta: Meta = { - title: 'Inputs/Switch', - component: Switch, +const meta: Meta = { + title: 'Inputs/Checkbox', + component: Checkbox, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; -export const Example = { +export const Example: Story = { args: { isChecked: false, - label: 'Switch Me!', + label: 'Try Me!', }, /** - * 👇 React believes the Storybook function "useArgs" is a hook, but it's really not. - * Using a named capital-letter function prevents an ESLint warning related to this. - * Don't lint? You can use an arrow function instead. + * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name. + * If you are not concerned with linting, you may use an arrow function. */ render: function Render(args) { const [{ isChecked }, updateArgs] = useArgs(); @@ -30,7 +29,7 @@ export const Example = { updateArgs({ isChecked: !isChecked }); } - return ; + return ; }, }; ``` diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 6c6b98b1fbf7..dbf89e71aed7 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -215,14 +215,14 @@ Args specified through the URL will extend and override any default values of ar ## Setting args from within a story -Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Switch component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`: +Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Checkbox component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`: diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json new file mode 100644 index 000000000000..b157d40c0f7a --- /dev/null +++ b/node_modules/.package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "@storybook/root", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} From 44fa3c34c7667b5eef546afe9d4e58b20aa8aa35 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Fri, 11 Aug 2023 16:09:27 -0500 Subject: [PATCH 12/15] removed added file. Why wasn't this excluded via .gitignore??? --- node_modules/.package-lock.json | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 node_modules/.package-lock.json diff --git a/node_modules/.package-lock.json b/node_modules/.package-lock.json deleted file mode 100644 index b157d40c0f7a..000000000000 --- a/node_modules/.package-lock.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "name": "@storybook/root", - "lockfileVersion": 3, - "requires": true, - "packages": {} -} From 504fefa0160a02b369318e9a820caf44fb2cbf1f Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Fri, 11 Aug 2023 16:14:47 -0500 Subject: [PATCH 13/15] modify text to align to pull request comment --- docs/writing-stories/args.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index dbf89e71aed7..c0a9bf0d2519 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -215,7 +215,7 @@ Args specified through the URL will extend and override any default values of ar ## Setting args from within a story -Components with interactivity often need their containing component, or page, to respond to events, modify their state, then pass a changed arg back to the rendered component to reflect the change. For example, you would want a Checkbox component to be checked by a user and the arg shown in Storybook to reflect the change. This can be accomplished by using the `useArgs` hook exported by `@storybook/preview-api`: +Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the [`useArgs`](../addons/addons-api.md#useargs) API exported by `@storybook/preview-api`: From 41d8edf15fda19a3be37dd4e0a04e82b841cab82 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Fri, 11 Aug 2023 16:43:41 -0500 Subject: [PATCH 14/15] remove link to incorrect api --- docs/writing-stories/args.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index c0a9bf0d2519..240b96dc3d4d 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -215,7 +215,7 @@ Args specified through the URL will extend and override any default values of ar ## Setting args from within a story -Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the [`useArgs`](../addons/addons-api.md#useargs) API exported by `@storybook/preview-api`: +Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the `useArgs` API exported by `@storybook/preview-api`: From eea29bcf9f26994651043eaa262c55f37e5ac8f0 Mon Sep 17 00:00:00 2001 From: Jon Badgett Date: Sun, 10 Sep 2023 15:22:11 -0500 Subject: [PATCH 15/15] add react IFRenderer to args docs addition --- docs/writing-stories/args.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 240b96dc3d4d..26a61edfb322 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -213,6 +213,8 @@ Similarly, special formats are available for dates and colors. Date objects will Args specified through the URL will extend and override any default values of args set on the story. + + ## Setting args from within a story Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the `useArgs` API exported by `@storybook/preview-api`: @@ -228,6 +230,8 @@ Interactive components often need to be controlled by their containing component + + ## Mapping to complex arg values Complex values such as JSX elements cannot be serialized to the manager (e.g., the Controls addon) or synced with the URL. Arg values can be "mapped" from a simple string to a complex type using the `mapping` property in `argTypes` to work around this limitation. It works in any arg but makes the most sense when used with the `select` control type.