Ask Question

How can I remove Chakra specific props from storybook control?

I adapted the default chakra <Button> component and want to add it to Storybook.
But I see in the control tab the whole chakra related props which I don't want to have.
Is there a way how get rid of them?

chakrastorybook

141 views

Authorยดs AnkiCodes image

AnkiCodes

Last edited on

1 Answer available

Best answer

My current solution is to exclude each chakra props specifically from control tab

export default {
    title: "Components/Form/Buttons",
    argTypes: {
        ...STORYBOOK_EXCLUDE_CHAKRA_PROPS,
    },
} as Meta;

The STORYBOOK_EXCLUDE_CHAKRA_PROPS in extracted into separate const file.

export const STORYBOOK_DISABLE_CONTROL = { table: { disable: true } };

export const STORYBOOK_EXCLUDE_CHAKRA_PROPS = {
    as: STORYBOOK_DISABLE_CONTROL,
    _hover: STORYBOOK_DISABLE_CONTROL,
    _active: STORYBOOK_DISABLE_CONTROL,
    _focus: STORYBOOK_DISABLE_CONTROL,
    _highlighted: STORYBOOK_DISABLE_CONTROL,
    _focusWithin: STORYBOOK_DISABLE_CONTROL,
    _focusVisible: STORYBOOK_DISABLE_CONTROL,
    _disabled: STORYBOOK_DISABLE_CONTROL,
    _readOnly: STORYBOOK_DISABLE_CONTROL,
    _before: STORYBOOK_DISABLE_CONTROL,
    _after: STORYBOOK_DISABLE_CONTROL,
    _empty: STORYBOOK_DISABLE_CONTROL,
    _expanded: STORYBOOK_DISABLE_CONTROL,
    _checked: STORYBOOK_DISABLE_CONTROL,
    _grabbed: STORYBOOK_DISABLE_CONTROL,
    _pressed: STORYBOOK_DISABLE_CONTROL,
    _invalid: STORYBOOK_DISABLE_CONTROL,
    _valid: STORYBOOK_DISABLE_CONTROL,
    _loading: STORYBOOK_DISABLE_CONTROL,
    _selected: STORYBOOK_DISABLE_CONTROL,
    _hidden: STORYBOOK_DISABLE_CONTROL,
    _autofill: STORYBOOK_DISABLE_CONTROL,
    _even: STORYBOOK_DISABLE_CONTROL,
    _odd: STORYBOOK_DISABLE_CONTROL,
    _first: STORYBOOK_DISABLE_CONTROL,
    _last: STORYBOOK_DISABLE_CONTROL,
    _notFirst: STORYBOOK_DISABLE_CONTROL,
    _notLast: STORYBOOK_DISABLE_CONTROL,
    _visited: STORYBOOK_DISABLE_CONTROL,
    _activeLink: STORYBOOK_DISABLE_CONTROL,
    _indeterminate: STORYBOOK_DISABLE_CONTROL,
    _groupHover: STORYBOOK_DISABLE_CONTROL,
    _groupFocus: STORYBOOK_DISABLE_CONTROL,
    _groupActive: STORYBOOK_DISABLE_CONTROL,
    _groupDisabled: STORYBOOK_DISABLE_CONTROL,
    _groupInvalid: STORYBOOK_DISABLE_CONTROL,
    _groupChecked: STORYBOOK_DISABLE_CONTROL,
    _placeholder: STORYBOOK_DISABLE_CONTROL,
    _fullScreen: STORYBOOK_DISABLE_CONTROL,
    _selection: STORYBOOK_DISABLE_CONTROL,
    _rtl: STORYBOOK_DISABLE_CONTROL,
    _mediaDark: STORYBOOK_DISABLE_CONTROL,
    _dark: STORYBOOK_DISABLE_CONTROL,
};