Storybook control with dash in name.

[Artemisia-Absinthium]

Hello everyone,

I have a question about arg/Parameter naming and the Storybook loading process from JSON.

I am working at GitHub and looking to improve the accessibility on Primer, our view component library.

We have a component with that story JSON file.

{
  "title": "Primer/Hellip Button",
  "stories": [
    {
      "name": "hellip_button",
      "parameters": {
        "server": {
          "id": "primer/hellip_button/hellip_button"
        }
      },
      "args": {
        "aria-label": "button label",
        "inline": false
      },
      "argTypes": {
        "aria-label": {
          "control": {
            "type": "text"
          },
          "name": "Aria Label"
        },
        "inline": {
          "control": {
            "type": "boolean"
          },
          "name": "Inline"
        }
      }
    }
  ]
}

As you can see, there is the "aria-label" argument. Written with a dash.

Because of that dash, I end up having that error when running the Storybook website. And my component is not visible in the stories list.

index.js:49 Unexpected error while loading ./stories/primer/auto_complete/input.stories.json: Error: Module parse failed: Unexpected token (15:6)
File was processed with these loaders:
 * ./node_modules/@storybook/server/dist/cjs/server/loader.js
You may need an additional loader to handle the result of these loaders.
| auto_complete_input.args = {
|   type: "text",
>   aria-label: "Search fruits"
| };
| auto_complete_input.argTypes = {

Can any of you tell me if it is a known limitation of the parsing process? Or if something similar was noticed before?

And also, thanks for your work on Storybook; it is a super useful project!

[shilman]

Discussed here #14908

[Artemisia-Absinthium]

Thank you for the links! ✨