dosubot[bot] commented on issue #29244:
URL: https://github.com/apache/superset/issues/29244#issuecomment-2166811308
<!-- Greeting -->
Hey @msyavuz! 👋 I'm here to help you with any bugs, questions, or
contributions you have in mind. I'm a bot designed to assist you while we wait
for a human maintainer.
<!-- Answer -->
To fix the custom Storybook controls for the `Alert`, `AsyncAceEditor`,
`Badge`, and `Button` components in the Apache Superset project, you need to
ensure that the `args` and `argTypes` properties are correctly defined to
provide the necessary controls in the Storybook UI. Here are the configurations
for each component:
### Alert Component
```tsx
export const InteractiveAlert = (args: AlertProps) => (
<>
<Alert {...args} />
Some content to test the `roomBelow` prop
</>
);
InteractiveAlert.args = {
closable: true,
roomBelow: false,
type: 'info',
message: smallText,
description: bigText,
showIcon: true,
};
InteractiveAlert.argTypes = {
onClose: { action: 'onClose' },
type: {
control: { type: 'select', options: ['info', 'error', 'warning',
'success'] },
},
};
```
### AsyncAceEditor Component
```tsx
export const AsyncAceEditor = (
args: AsyncAceEditorOptions & { editorType: EditorType },
) => {
const { editorType, ...props } = args;
const Editor = parseEditorType(editorType);
return <Editor {...props} />;
};
AsyncAceEditor.args = {
defaultTabSize: 2,
width: '100%',
height: '500px',
value: `{"text": "Simple text"}`,
};
AsyncAceEditor.argTypes = {
editorType: {
defaultValue: 'json',
control: { type: 'select', options: editorTypes },
},
defaultTheme: {
defaultValue: 'github',
control: { type: 'radio', options: ['textmate', 'github'] },
},
};
```
### Badge Component
```tsx
export const InteractiveBadge = (args: BadgeProps) => <Badge {...args} />;
InteractiveBadge.args = {
count: null,
color: null,
text: 'Text',
textColor: null,
status: 'success',
size: 'default',
};
InteractiveBadge.argTypes = {
status: {
control: {
type: 'select',
options: [undefined, 'default', 'error', 'warning', 'success',
'processing'],
},
},
size: {
control: {
type: 'select',
options: ['default', 'small'],
},
},
color: {
control: {
type: 'select',
options: [undefined, 'pink', 'red', 'yellow', 'orange', 'cyan',
'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'],
},
},
textColor: {
control: {
type: 'select',
options: [undefined, 'pink', 'red', 'yellow', 'orange', 'cyan',
'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'],
},
},
count: {
control: {
type: 'select',
options: [undefined, ...Array(100).keys()],
},
},
};
```
### Button Component
Ensure that the `args` and `argTypes` are defined similarly to provide
controls for the Button component properties.
This setup ensures that the properties are available as controls in the
Storybook UI, allowing users to select different options for these properties.
The `args` property provides default values for the component's props, ensuring
that the component renders correctly with initial values
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/src/components/AsyncAceEditor/AsyncAceEditor.stories.tsx)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/src/components/Alert/Alert.stories.tsx)</sup><sup>[[3]](https://github.com/apache/superset/blob/master/superset-frontend/src/components/Badge/Badge.stories.tsx)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org
