Open alina-horbenko-simpligov opened 1 month ago
Disclaimer This information might be inaccurate, due to it being generated automatically
To resolve the issue where InputSignal
and InputSignalWithTransform
values are not set from URL args, follow these steps:
Locate the URL handling logic: Identify where the URL query parameters are parsed and applied to the component inputs. This is likely in the file responsible for initializing the story with URL parameters.
Update the parsing logic: Ensure that the parsing logic correctly identifies and applies values for InputSignal
and InputSignalWithTransform
. This may involve modifying the existing logic to handle these specific types.
Modify the component initialization: In the component where InputSignal
and InputSignalWithTransform
are used, ensure that the initialization logic correctly sets these values from the parsed URL parameters.
Example Code: If the parsing logic is in src/lib/parseUrlParams.ts
, update it as follows:
// src/lib/parseUrlParams.ts
function parseUrlParams(url: string) {
const params = new URLSearchParams(url);
const args = {};
params.forEach((value, key) => {
if (key.startsWith('args')) {
const argKey = key.replace('args.', '');
args[argKey] = value;
}
});
return args;
}
Apply parsed values: In the component initialization, apply the parsed values to InputSignal
and InputSignalWithTransform
.
// src/components/MyComponent.ts
import { parseUrlParams } from '../lib/parseUrlParams';
const urlParams = parseUrlParams(window.location.search); this.size = urlParams.size || 'medium'; this.primary = urlParams.primary !== undefined ? urlParams.primary === 'true' : true; this.focus = urlParams.focus !== undefined ? urlParams.focus === 'true' : false;
These steps should ensure that `InputSignal` and `InputSignalWithTransform` values are correctly set from URL args.
### References
[/code/renderers/server/template/cli/button.stories.json](https://github.com/storybookjs/storybook/blob/next/code/renderers/server/template/cli/button.stories.json)
[/code/presets/server-webpack/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot](https://github.com/storybookjs/storybook/blob/next/code/presets/server-webpack/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot)
[/test-storybooks/server-kitchen-sink/stories/addons/controls.stories.json](https://github.com/storybookjs/storybook/blob/next/test-storybooks/server-kitchen-sink/stories/addons/controls.stories.json)
[/.github/DISCUSSION_TEMPLATE/ideas.yml](https://github.com/storybookjs/storybook/blob/next/.github/DISCUSSION_TEMPLATE/ideas.yml)
[/code/frameworks/angular/template/stories_angular-cli-default-ts](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/template/stories_angular-cli-default-ts)
[/code/frameworks/angular/template/stories_angular-cli-default-ts/signal](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/template/stories_angular-cli-default-ts/signal)
[/code/frameworks/angular/src/builders/build-storybook/schema.json](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/build-storybook/schema.json)
[/.github/DISCUSSION_TEMPLATE/help.yml](https://github.com/storybookjs/storybook/blob/next/.github/DISCUSSION_TEMPLATE/help.yml)
[/.github/DISCUSSION_TEMPLATE/rfc.yml](https://github.com/storybookjs/storybook/blob/next/.github/DISCUSSION_TEMPLATE/rfc.yml)
[/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts](https://github.com/storybookjs/storybook/blob/next/code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts)
[/code/presets/server-webpack/src/lib/compiler/__testfixtures__/controls.json](https://github.com/storybookjs/storybook/blob/next/code/presets/server-webpack/src/lib/compiler/__testfixtures__/controls.json)
[/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.stories.ts](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/template/stories_angular-cli-default-ts/signal/button.stories.ts)
[/code/renderers/server/template/cli/header.stories.json](https://github.com/storybookjs/storybook/blob/next/code/renderers/server/template/cli/header.stories.json)
[/code/frameworks/angular/template/stories_angular-cli-prerelease](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/template/stories_angular-cli-prerelease)
[/code/frameworks/angular/template/stories_angular-cli-prerelease/signal](https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/template/stories_angular-cli-prerelease/signal)
[/code/core/src/preview-api/modules/store/StoryStore.test.ts](https://github.com/storybookjs/storybook/blob/next/code/core/src/preview-api/modules/store/StoryStore.test.ts)
[/docs/writing-stories/args.mdx](https://github.com/storybookjs/storybook/blob/next/docs/writing-stories/args.mdx)
[/code/core/src/manager-api/tests/url.test.js](https://github.com/storybookjs/storybook/blob/next/code/core/src/manager-api/tests/url.test.js)
[/code/renderers/react/template/stories/ts-argtypes.stories.tsx](https://github.com/storybookjs/storybook/blob/next/code/renderers/react/template/stories/ts-argtypes.stories.tsx)
[/code/addons/controls/template/stories/basics.stories.ts](https://github.com/storybookjs/storybook/blob/next/code/addons/controls/template/stories/basics.stories.ts)
[/code/core/template/stories/rendering.stories.ts](https://github.com/storybookjs/storybook/blob/next/code/core/template/stories/rendering.stories.ts)
[/code/core/src/manager-api/modules/url.ts](https://github.com/storybookjs/storybook/blob/next/code/core/src/manager-api/modules/url.ts)
[/code/core/src/csf-tools/CsfFile.test.ts](https://github.com/storybookjs/storybook/blob/next/code/core/src/csf-tools/CsfFile.test.ts)
[/code/core/src/manager/container/Preview.tsx](https://github.com/storybookjs/storybook/blob/next/code/core/src/manager/container/Preview.tsx)
[/docs/essentials/controls.mdx](https://github.com/storybookjs/storybook/blob/next/docs/essentials/controls.mdx)
<details>
<summary>
#### About Greptile
</summary>
This response provides a starting point for your research, not a precise solution.
Help us improve! Please leave a ๐ if this is helpful and ๐ if it is irrelevant.
[Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) ยท [Edit Issue Bot Settings](https://app.greptile.com/apps/github)
</details>
Describe the bug
URL query params
args
are ignored forInputSignal
andInputSignalWithTransform
. When updating values for controls from the control tab, URL gets populated with corresponding values, however when reloading the page with the current URL values for input signals are not set, and when clicking any of other controls - the previous values for input signals are cleared from the URL.Reproduction link
https://stackblitz.com/edit/github-u4zwk1-t9obyy?file=src%2Fstories%2Fbutton.stories.ts
Reproduction steps
small
false
Button test
true
https://githubu4zwk1t9obyy-n4b1--6006--41692973.local-credentialless.webcontainer.io/?path=/story/example-button--primary&args=size:small;primary:!false;label:Button+test;focus:!true
Actual result
InputSignal<string>
and its value from URLsmall
is lost, defaultmedium
value is set insteadInputSignalWithTransform
and its value from URLfalse
is lost, defaulttrue
value is set insteadInputSignal<boolean>
and its value from URLtrue
is lost, defaultfalse
value is set insteadlabel value is set correctly, since its a regular
@Input()
Also, when setting value for any of the controls after reloading the page, you can see that query params for input signals are cleared from the URL, unlike for regular
@Input() label
Expected result
Values for
InputSignal
andInputSignalWithTransform
are set correctly from the URL query paramsSystem
Additional context
No response