Using Controls in Storybook with Mithril (TypeScript)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import m from "mithril"; | |
export default { | |
title: "Example/Controls", | |
}; | |
interface Args { | |
list: number[]; | |
toggle: boolean; | |
numberBox: number; | |
numberSlider: number; | |
jsonEditor: unknown; // This is an object. | |
radio: RadioOptions; | |
inlineRadio: RadioOptions; | |
multiCheck: RadioOptions[]; | |
inlineMultiCheck: RadioOptions[]; | |
singleSelect: RadioOptions; | |
multiSelect: RadioOptions[]; | |
text: string; | |
colorPicker: string; | |
date: string; | |
} | |
export const controls = (args: Args): m.Component => { | |
console.log(args); | |
return { | |
view: () => m("pre", JSON.stringify(args, undefined, 2)), | |
}; | |
}; | |
// This is the output in a <pre>: | |
// { | |
// "list": [ | |
// 1, | |
// 2, | |
// 3 | |
// ], | |
// "toggle": true, | |
// "numberBox": 3, | |
// "numberSlider": 2, | |
// "jsonEditor": { | |
// "data": "foo" | |
// }, | |
// "radio": "loading", | |
// "inlineRadio": "error", | |
// "multiCheck": [ | |
// "loading", | |
// "ready" | |
// ], | |
// "inlineMultiCheck": [ | |
// "loading" | |
// ], | |
// "singleSelect": "ready", | |
// "multiSelect": [ | |
// "loading", | |
// "loading" | |
// ], | |
// "text": "Column", | |
// "colorPicker": "blue", | |
// "date": "2020-08-16 12:30" | |
// } | |
enum RadioOptions { | |
Loading = "loading", | |
Error = "error", | |
Ready = "ready", | |
} | |
// Annotations: https://storybook.js.org/docs/mithril/essentials/controls#annotation | |
controls.args = { | |
list: [1, 2, 3], | |
toggle: true, | |
numberBox: 3, | |
numberSlider: 2, | |
jsonEditor: { data: "foo" }, | |
radio: RadioOptions.Loading, | |
inlineRadio: RadioOptions.Error, | |
multiCheck: [RadioOptions.Loading, RadioOptions.Ready], | |
inlineMultiCheck: [RadioOptions.Loading], | |
singleSelect: RadioOptions.Ready, | |
multiSelect: [RadioOptions.Loading, RadioOptions.Loading], | |
text: "Column", | |
colorPicker: "blue", | |
date: "2020-08-16 12:30", | |
} as Args; | |
controls.argTypes = { | |
list: { name: "List", control: { type: "array", separator: "," } }, | |
toggle: { name: "Toggle", control: { type: "boolean" } }, | |
numberBox: { | |
name: "Number", | |
control: { type: "number", min: 0, max: 20, step: 1 }, | |
}, | |
numberSlider: { | |
name: "Number Slider", | |
control: { type: "range", min: 0, max: 20, step: 2 }, | |
}, | |
jsonEditor: { name: "JSON Editor", control: { type: "object" } }, | |
radio: { name: "Radio", control: { type: "radio", options: RadioOptions } }, | |
inlineRadio: { | |
name: "Inline Radio", | |
control: { type: "inline-radio", options: RadioOptions }, | |
}, | |
multiCheck: { | |
name: "MultiCheck", | |
control: { type: "check", options: RadioOptions }, | |
}, | |
inlineMultiCheck: { | |
name: "Inline MultiCheck", | |
control: { type: "inline-check", options: RadioOptions }, | |
}, | |
singleSelect: { | |
name: "Single Select", | |
control: { type: "select", options: RadioOptions }, | |
}, | |
multiSelect: { | |
name: "Multi Select", | |
control: { type: "multi-select", options: RadioOptions }, | |
}, | |
text: { name: "Text", control: { type: "text" } }, | |
colorPicker: { name: "Color Picker", control: { type: "color" } }, | |
date: { name: "Date", control: { type: "date" } }, | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment