Issue #40 - Fix to be applied of Storybook Approach

[vchandran8]

Hi Team,

I am able find the fix working fine with "*.figma.tsx" file approach. with #40 . Is the same applied to storybook file approach?

I have below props update in the storybook file of my component but I am not able to add the JSON parameter from Figma property.

Story Definition.

export default {
    title: "Checkbox",
    component: Checkbox,
    parameters: {
        design: {
            type: 'figma',
            url: '{{URL}}',
            examples: [Template],
            props: {
                // These are the properties that map one-to-one with the Figma properties to React props
                label: figma.string("Item label"),
                value: figma.string("Item label"),
                inValid: figma.enum("State", { "Item Error": true }),
                disabled: figma.enum("State", { Disabled: true }),
                // To add the validation message conditionally, we need to use the enum type "State" and set the value to "Item Error
                validationMessage: figma.enum("State", { "Item Error": figma.string("Item error text") }),
                // To add selected vaue conditionally, we need to use the boolean type "Checeked" and figma.enum type "State" and set the value to "Selected hover"
                checked: figma.boolean("Checked", {
                    true: figma.enum("State", { Selected: true, "Selected hover": true }),
                    false: false,
                }),
                state: figma.enum("State", {
                    Default: "default",
                    Hover: "hover",
                    "Item Error": "item-error",
                    Selected: "selected",
                    Disabled: "disabled",
                    "Selected hover": "selected-hover",
                }),
            }
        },
    },
    argTypes: {
        onChange: {
            table: {
                category: 'Events',
            },
        },
    },
} as ComponentMeta<typeof MLDCReactCheckbox>;

I tried with below story created but it was not mapping the prop to inputExtraProps JSON attribute "required: prop.state" .

const Template: ComponentStory<typeof Checkbox> = (
   args: CheckboxProps
) => (
   <div>
       <Checkbox {...args} id="items"
           onChange={
               function noRefCheck() { }
           }
           className="checkbox-sample"
           data-testid="sample-checkbox"
           inputExtraProps={{
               //TODO : Figma Not supporting this mapping and they working on the fix.
               **required: prop.state,**    //Both args.state and prop.state not working
              
           }} />
       <div
           style={{ marginTop: "20px" }}
           data-testid="placeholder"
           id="placeholder"
       ></div>
   </div>
);

Please share any example of mapping figma prop to react JSON HTML attributes from Storybook file approach.

Let me know if I need to create a separate issue for this.

CC : @tomduncalf-figma

Thanks, Veera

[tomduncalf-figma]

Hey Veera, this should work, can you let us know what error you are seeing please?

[vchandran8]

Hey @tomduncalf-figma ,

The below are the error attached when try to use both prop/args variable. (the same logic working fine with figma.tsx file approach). In the figma.tsx file, the example used but storybook the template which defined not consider props or args.state.

Thanks, Veera

[vchandran8]

@tomduncalf-figma Do we have any update on this? Appreciate if this request is taking care.

[tomduncalf-figma]

Hey @vchandran8, sorry for the delay getting back to you. It looks like you're returning a prop called state from the Code Connect props mapping, but there's no state property on the type you're using for args, MLCDReactCheckboxProps. Is it possible that the property is missing or called something else in the component?

You could also modify the args type to be e.g. MLCDReactCheckboxProps & { state: string }, but I would have thought state should be one of the actual component's props

[vchandran8]

Thanks for the input. The suggestion you gave is working fine.

Better we add these examples in the documentation for storybook approach and I see it has very minimal detail.

[tomduncalf-figma]

Agreed, we will revisit our documentation around this! Thanks