Great add-on but slight problem with ts

[AskMP]

argTypes is a "Partial<ArgTypes>" type object which doesn't support quoted deep linked attributes. I'm wondering what would be the best manner in which to append that type other than simply adding "|any" to the end of the storybook types description file (line 1154 of storybook->types->dist->index.d.ts).

[eliasm307]

Hi @AskMP thanks for the feedback however I'm having trouble trying to understand the issue.

None of the types used in this addon are exposed to apps that use the addon, there is just one parameter which is a boolean, so it doesnt matter what argTypes type is used in the addon? Please let me know if I'm missing something

quoted deep linked attributes

Could you please clarify what this means? Do you have some example code?

best manner in which to append that type other than simply adding "|any" to the end of the storybook types description file (line 1154 of storybook->types->dist->index.d.ts)

Are you able to provide a link or a picture or something to the file you are referring to?

[shaheemMPM]

I'm encountering a similar issue when using this addon with TypeScript.

Here's an example of how my Storybook configuration looks:

export default {
  ...
  parameters: {
    deepControls: { enabled: true },
  },
  args: {
    editingMode: false,
    showSlNo: true,
    theme: {
      color: "#029CFD",
    },
  },
  argTypes: {
    editingMode: {
      options: [true, false],
      control: { type: "radio" },
      description: "Switch between editing and preview mode",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: false },
      },
    },
    showSlNo: {
      options: [true, false],
      control: { type: "radio" },
      description: "Show serial number column",
      table: {
        type: { summary: "boolean" },
        defaultValue: { summary: false },
      },
    },
    // @ts-ignore
    "theme.color": {
      control: {
        type: "color",
        presetColors: ["red", "green"],
      },
    },
  },
  ...
};

In this configuration, you'll notice that I've used // @ts-ignore to achieve the desired output.

[eliasm307]

Hi @shaheemMPM thanks for the comment however in your code example you dont use // @ts-ignore, so I'm confused? Which part gives you an issue?

[shaheemMPM]

@eliasm307 My apologies for the confusion. It was indeed a mistake on my part. I've updated the initial comment to include the // @ts-ignore line. Thank you for your understanding.

[eliasm307]

@shaheemMPM Thanks for the details. I've published v0.3.0 of the package with a type utility to help with this, I've added information on how to use it in the readme ie see https://github.com/eliasm307/storybook-addon-deep-controls#typescript

Let me know if you still have issues