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?
1537 views
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,
};