Skip to main content
InVision Support Home Page
InVision ambassador ambassador
Julien Bernard
Julien Bernard

Plan to update sample generator code to new controls addon

I wondering if you had plan to upgrade the sample code generator to be able to use new controls addon instead of old knobs ? For the moment when I use controls addon instead of knobs on one of my component, I have an error : Failed to build sample code.

This post is associated with a known feature request: [[ problemTicketSubject ]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

1

comments

Sort by

Andrew Harvard
InVision ambassador Andrew Harvard , ambassador Edited

I ran into an issue about a month ago and learned from Support that the latest dsm-storybook package does not support all aspects of Storybook 6...yet. There is a known issue around the use of the Template.bind({}) syntax.

0
Andrew Harvard
InVision ambassador Andrew Harvard , ambassador

Julien Bernard, have a look at the code examples posted to this thread: https://support.invisionapp.com/hc/en-us/community/posts/360073119111-Storybook-V6-Support

You'll find React and HTML examples. Even though the Template.bind({}) syntax is not supported, you can chain args to your story definitions and then Storybook will render Controls (if the addon is configured to render)

0
Julien Bernard
InVision ambassador Julien Bernard , ambassador

Andrew-Harvard we use vue, I tried your solution, the controls works but the sample code generator no. The props values is not replaced by values you chose in controls. 

For example, my code sample kept like that : 

<my-icon
:icon="icon"
:color="color"
/>

It should be for example :

<my-icon
icon="delete"
color="primary"
/>
0
Andrew Harvard
InVision ambassador Andrew Harvard , ambassador Edited

Hey Julien Bernard, glad to hear controls are working! I'm curious, when you say code generated are you talking about that source block that displays under the controls on for the docs tab? If so, the issue may be that Storybook/Vue lacks support: https://storybook.js.org/docs/react/api/frameworks-feature-support#core-frameworks

With Storybook/HTML that source code block feature (dynamic source) is not supported either. So, I have configured it to not show (see docs.source.type below) and we are relying on storybook-addon-html to display source markup, on the canvas side of things.

// preview.js
import { withHTML } from '@whitespace/storybook-addon-html/html';
import { withDsm } from '@invisionapp/dsm-storybook';

export const parameters = {
  ...
  docs: {
...
    source: {
      type: 'dynamic',
    },
  },
};

export const decorators = [withHTML, withDsm];
0
Julien Bernard
InVision ambassador Julien Bernard , ambassador Edited

Hey Andrew, thanks for the information !

I speak about the code under controls, yes.

I read the code of dsm-cli and I saw that this snippet was based on knobs and not on controls for now... I assume you didn't use this feature ?

0
Rob Wood
InVision ambassador Rob Wood , ambassador

Hi Julien Bernard. Do you have an example of the code you used in order to get the controls working please? I've created my story in Vue using the Template.bind({}) syntax but trying to publish this to DSM won't work. Thanks.

0
Julien Bernard
InVision ambassador Julien Bernard , ambassador

Hello Rob,

I didn't use Template.bind({}). Here is an exemple of what it worked on DSM:

export default {
title: "Button",
component: myButton,
parameters: {
"in-dsm":{
id: "xxx",
componentPath: "./myButton.vue"
}
},
argTypes: {
value: {
control: "text",
description: "The content of the button",
name: "Default Slot",
table: { category: "slots" }
},
size: {
control: {
type: "inline-radio",
options: ["sm", "md", "lg"],
table: { type: { detail: "text" } }
}
}
}
};

const defaultArgs = {
variant: "primary",
disabled: false,
value: "Value",
size: "md",
loading: false
};

export const primaryButton = (args, { argTypes }) => ({
components: { myButton },
props: Object.keys(argTypes),
template: `<my-button
:variant='variant'
:disabled='disabled'
:size='size'
:loading='loading'
@click='click'
>{{ value }}</my-button>`,
methods: actions("click")
});
primaryButton.args = { ...defaultArgs, variant: "primary" };
1
Rob Wood
InVision ambassador Rob Wood , ambassador

Thanks for the response Julien Bernard. I've managed to get this working but it's a shame that Template.bind({}) isn't supported at the moment as it's much less code repetition.

Thanks for the code example.

0

join the conversation

To comment, sign up or sign in.