control variables not shown in preview

[leu2tm]

Hi,

I have some trouble understanding how to reflect the variables from controls to the preview. Do i need knobs or does it work with the @storybook/addon-controls? Also when using vue framework.

Also I am a bit unsure how the codesandbox will transfer the files, is it through the tabs name?

Does the tab property have a close dependency to language and codesandbox?

TestTable.stories.js

export default {
  title: 'Components/Table',
  decorators: [withPreview],
  argTypes: {
      name: { control: 'text' }
  },
};

const exampleTemplate = (args, {argTypes}) => ({
    components: {TestTable},
    props: Object.keys(argTypes),
    template: '<test-table :name="name"></test-table>',
});

export const DefaultTable = exampleTemplate.bind({})

PreviewExample.parameters = {
    preview: [
        {
            tab: "Vue",
            template: previewTemplate`
                <test-table :name="name"></test-table>
            `,
            copy: true,
            codesandbox: DEFAULT_VUE_CODESANDBOX([]),
        },
    ],
}

This doesn't work when mixing tab, language and codesandbox:

export const PreviewExample = exampleTemplate.bind({})

PreviewExample.parameters = {
    preview: [
        {
            tab: "Random",
            template: previewTemplate`
                <test-table></test-table>
            `,
            language: "html",
            copy: true,
            codesandbox: DEFAULT_VUE_CODESANDBOX([]),
        },
    ],
}

And how do I use this in my example?:

const CodeSandboxTemplate = (previews) => ({
    // react, angular, svelte, lit, preact, vue
    framework: "FRAMEWORK_TYPE",
      files: {
        // Tab name and code order (Mostly 0)
        "src/App.tsx": previews["TAB NAME"][0],
        "src/styles.css": previews["TAB NAME2"][0],
    },
    // External modules except framework modules used in code
    userDependencies: ["[email protected]"],
});

Sincerely, leu2tm

[daybrush]

@leu2tm

Yes. Only one of the controls or knobs can be used.

And CODESANDBOX depends on the name of the tab.

https://github.com/naver/storybook-addon-preview#codesandbox

Thank you :)