[Bug]: InputSignal value is not set from the URL args

[alina-horbenko-simpligov]

Describe the bug

URL query params args are ignored for InputSignal and InputSignalWithTransform. 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

1. Open the reproduction link and go to Open Preview in new tab
2. Navigate to Button > Primary story.
3. Update controls with following values:
   • Change size to small
   • Set primary control to false
   • Set label to any other string, e.g. Button test
   • Set focus to true
4. Observe query params of the current URL https://githubu4zwk1t9obyy-n4b1--6006--41692973.local-credentialless.webcontainer.io/?path=/story/example-button--primary&args=size:small;primary:!false;label:Button+test;focus:!true
5. Reload the page and observe values of the controls

Actual result

• size is InputSignal<string> and its value from URL small is lost, default mediumvalue is set instead
• primary is InputSignalWithTransform and its value from URL false is lost, default true value is set instead
• focus is InputSignal<boolean> and its value from URL true is lost, default false value is set instead

label 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 and InputSignalWithTransform are set correctly from the URL query params

System

Storybook Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm <----- active
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @storybook/addon-docs: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/addon-essentials: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/addon-interactions: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/addon-links: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/addon-onboarding: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/angular: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/blocks: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    @storybook/test: ^8.3.0-alpha.3 => 8.3.0-alpha.3 
    storybook: ^8.3.0-alpha.3 => 8.3.0-alpha.3

Additional context

No response

[greptile-apps[bot]]

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:

1. 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.

2. 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.

3. 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.

4. 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;
   }

5. 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>