Using Chakra components with storybook controls and args

Feature request

Is your feature request related to a problem? Please describe.

I am trying to extend Chakra components for our design system and show them in storybook, my problem is that the controls tab and prop table are bloated with the styled props I was trying to make a story for the Checkbox component and this is how the control tab and props table looked

control tab

props table

I want to show only the main props (isChecked, isDisabled, value, etc.) that are the same as the one in the docs

Describe the solution you’d like

I am not sure exactly how to approach this issue, in storybook main.js file there is a way to filter props as mentioned here but what props should we filter on? I am aware that chakra exports propNames but am still left with 115 controls 😓. propNames doesn’t include props such as [sx, style, aria-hidden, onInput, …] so maybe chakra can export a more comprehensive propNames.

Describe alternatives you’ve considered

in storybook you could make it not infer the types from the component and you write the args manually as specified here I guess this would work but that means we’ll have to manually write the main props for each component.

Additional context

Am not sure if this issue is directly related to Chakra, maybe it could be better submitted in the storybook repo

[mkosir]

If somebody is missing full context where to put filtering props, it’s in the Storybook main.js file.
In my case I added it as such

module.exports = {
...
  typescript: {
    check: false,
    checkOptions: {},
    reactDocgen: 'react-docgen-typescript',
    reactDocgenTypescriptOptions: {
      compilerOptions: {
        allowSyntheticDefaultImports: false,
        esModuleInterop: false,
      },
      shouldExtractLiteralValuesFromEnum: true,
      propFilter: (prop) => {
        const isStyledSystemProp = excludedPropNames.includes(prop.name);
        const isHTMLElementProp = prop.parent?.fileName.includes('node_modules') ?? false;
        return !(isStyledSystemProp || isHTMLElementProp);
      },
    },
  },
};

[cameronevans]

@hazem3500 this filter is working for me to just document component’s own props & inherited chakra component props

propFilter: (prop) =>
            prop.parent !== undefined &&
            (!prop.parent.fileName.includes('node_modules') ||
              (prop.parent.fileName.includes('node_modules') &&
                prop.parent.fileName.includes('node_modules/@chakra-ui/') &&
                !prop.parent.fileName.includes(
                  'node_modules/@chakra-ui/styled-system'
                ))),