From 2b4613820227dc13057f0e837818c2d8fd6fc15f Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Fri, 22 Jul 2022 17:19:16 +0100 Subject: [PATCH] improve meta and story typings (#52659) --- .betterer.results | 154 ++---------------- .../src/components/Alert/Alert.story.tsx | 10 +- .../src/components/Badge/Badge.story.tsx | 10 +- .../components/BarGauge/BarGauge.story.tsx | 6 +- .../components/BigValue/BigValue.story.tsx | 6 +- .../src/components/Button/Button.story.tsx | 12 +- .../ButtonCascader/ButtonCascader.story.tsx | 12 +- .../CallToActionCard.story.internal.tsx | 6 +- .../src/components/Card/Card.story.tsx | 24 +-- .../components/Cascader/Cascader.story.tsx | 12 +- .../ClickOutsideWrapper.story.tsx | 5 +- .../ClipboardButton.story.internal.tsx | 6 +- .../Collapse/CollapsableSection.story.tsx | 5 +- .../components/Collapse/Collapse.story.tsx | 5 +- .../ColorPicker/ColorPicker.story.tsx | 13 +- .../ColorPicker/ColorPickerPopover.story.tsx | 10 +- .../ColorPicker/NamedColorsPalette.story.tsx | 6 +- .../ColorPicker/SpectrumPalette.story.tsx | 8 +- .../ConfirmButton/ConfirmButton.story.tsx | 6 +- .../ConfirmModal/ConfirmModal.story.tsx | 15 +- .../ContextMenu/ContextMenu.story.tsx | 5 +- .../DataSourceHttpSettings.story.tsx | 7 +- .../DatePicker/DatePicker.story.tsx | 5 +- .../DatePickerWithInput.story.tsx | 5 +- .../DateTimePicker/DateTimePicker.story.tsx | 12 +- .../RelativeTimeRangePicker.story.tsx | 5 +- .../DateTimePickers/TimeOfDayPicker.story.tsx | 5 +- .../DateTimePickers/TimeRangeInput.story.tsx | 10 +- .../DateTimePickers/TimeRangePicker.story.tsx | 6 +- .../DateTimePickers/TimeZonePicker.story.tsx | 5 +- .../DateTimePickers/WeekStartPicker.story.tsx | 5 +- .../src/components/Drawer/Drawer.story.tsx | 13 +- .../Dropdown/ButtonSelect.story.internal.tsx | 10 +- .../EmptySearchResult.story.tsx | 5 +- .../ErrorBoundary/ErrorBoundary.story.tsx | 5 +- .../FileDropzone/FileDropzone.story.tsx | 12 +- .../FileDropzone/FileListItem.story.tsx | 8 +- .../FileUpload/FileUpload.story.tsx | 10 +- .../FilterPill/FilterPill.story.tsx | 10 +- .../FormField/FormField.story.internal.tsx | 14 +- .../FormattedValueDisplay.story.tsx | 5 +- .../src/components/Forms/Checkbox.story.tsx | 5 +- .../src/components/Forms/Field.story.tsx | 12 +- .../src/components/Forms/FieldSet.story.tsx | 5 +- .../Forms/FieldValidationMessage.story.tsx | 12 +- .../components/Forms/InlineField.story.tsx | 15 +- .../components/Forms/InlineFieldRow.story.tsx | 5 +- .../components/Forms/InlineLabel.story.tsx | 5 +- .../src/components/Forms/Label.story.tsx | 9 +- .../Legacy/Input/Input.story.internal.tsx | 6 +- .../Legacy/Select/Select.story.internal.tsx | 8 +- .../Legacy/Switch/Switch.story.internal.tsx | 12 +- .../src/components/Forms/Legend.story.tsx | 10 +- .../RadioButtonGroup.story.tsx | 6 +- .../RadioButtonList/RadioButtonList.story.tsx | 6 +- .../src/components/Icon/Icon.story.tsx | 5 +- .../IconButton/IconButton.story.tsx | 5 +- .../src/components/InfoBox/InfoBox.story.tsx | 11 +- .../InfoTooltip.story.internal.tsx | 9 +- .../components/Input/AutoSizeInput.story.tsx | 6 +- .../src/components/Input/Input.story.tsx | 6 +- .../LoadingPlaceholder.story.tsx | 7 +- .../components/Menu/Menu.story.internal.tsx | 15 +- .../src/components/Modal/Modal.story.tsx | 6 +- .../Monaco/CodeEditor.story.internal.tsx | 10 +- .../PageLayout/PageToolbar.story.tsx | 5 +- .../Pagination/Pagination.story.tsx | 9 +- .../PanelChrome/PanelChrome.story.tsx | 5 +- .../PanelContainer/PanelContainer.story.tsx | 10 +- .../PluginSignatureBadge.story.tsx | 8 +- .../QueryField/QueryField.story.tsx | 7 +- .../RefreshPicker/RefreshPicker.story.tsx | 9 +- .../SecretFormField.story.internal.tsx | 12 +- .../SecretInput/SecretInput.story.tsx | 8 +- .../SecretTextArea/SecretTextArea.story.tsx | 12 +- .../src/components/Segment/Segment.story.tsx | 5 +- .../components/Segment/SegmentAsync.story.tsx | 5 +- .../components/Segment/SegmentInput.story.tsx | 5 +- .../src/components/Select/Select.story.tsx | 6 +- .../components/Slider/RangeSlider.story.tsx | 40 ++--- .../src/components/Slider/Slider.story.tsx | 61 +++---- .../src/components/Spinner/Spinner.story.tsx | 6 +- .../StatsPicker/StatsPicker.story.tsx | 12 +- .../src/components/Switch/Switch.story.tsx | 12 +- .../src/components/Table/Table.story.tsx | 28 ++-- .../TableInputCSV.story.internal.tsx | 10 +- .../src/components/Tabs/Tabs.story.tsx | 8 +- .../src/components/Tags/Tag.story.tsx | 24 +-- .../src/components/Tags/TagList.story.tsx | 22 +-- .../components/TagsInput/TagsInput.story.tsx | 14 +- .../components/TextArea/TextArea.story.tsx | 6 +- .../components/ThemeDemos/ThemeDemo.story.tsx | 9 +- .../ToolbarButton/ToolbarButton.story.tsx | 40 +++-- .../src/components/Tooltip/Tooltip.story.tsx | 8 +- .../Typography/Typography.story.tsx | 7 +- .../UnitPicker/UnitPicker.story.tsx | 7 +- .../ValuePicker/ValuePicker.story.tsx | 9 +- .../components/VizLayout/VizLayout.story.tsx | 6 +- .../components/VizLegend/VizLegend.story.tsx | 6 +- .../VizTooltip/SeriesTable.story.tsx | 12 +- 100 files changed, 579 insertions(+), 563 deletions(-) diff --git a/.betterer.results b/.betterer.results index ce0dc696f0c..0ff5d1dc90e 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1326,31 +1326,13 @@ exports[`better eslint`] = { "packages/grafana-ui/src/components/Alert/Alert.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], - "packages/grafana-ui/src/components/BigValue/BigValue.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], - "packages/grafana-ui/src/components/Button/Button.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], - "packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/Card/Card.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "packages/grafana-ui/src/components/Cascader/Cascader.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/Cascader/Cascader.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], @@ -1361,31 +1343,15 @@ exports[`better eslint`] = { "packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], [0, 0, 0, "Unexpected any. Specify a different type.", "2"], [0, 0, 0, "Do not use any type assertions.", "3"] ], - "packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx:5381": [ - [0, 0, 0, "Unexpected any. Specify a different type.", "0"], - [0, 0, 0, "Unexpected any. Specify a different type.", "1"] - ], "packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], - "packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], - "packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], @@ -1428,9 +1394,6 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "6"], [0, 0, 0, "Unexpected any. Specify a different type.", "7"] ], - "packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], @@ -1447,8 +1410,7 @@ exports[`better eslint`] = { ], "packages/grafana-ui/src/components/Dropdown/ButtonSelect.story.internal.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "Do not use any type assertions.", "1"], - [0, 0, 0, "Unexpected any. Specify a different type.", "2"] + [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], "packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], @@ -1458,26 +1420,12 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "packages/grafana-ui/src/components/FileDropzone/FileDropzone.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/FileDropzone/FileDropzone.test.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "packages/grafana-ui/src/components/FileDropzone/FileListItem.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "Do not use any type assertions.", "1"], - [0, 0, 0, "Unexpected any. Specify a different type.", "2"] - ], - "packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/FilterInput/FilterInput.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], @@ -1485,18 +1433,12 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/Forms/Form.story.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], [0, 0, 0, "Do not use any type assertions.", "2"], [0, 0, 0, "Unexpected any. Specify a different type.", "3"] ], - "packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/Forms/Legacy/Input/Input.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"], @@ -1505,10 +1447,6 @@ exports[`better eslint`] = { "packages/grafana-ui/src/components/Forms/Legacy/Select/IndicatorsContainer.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "packages/grafana-ui/src/components/Forms/Legacy/Select/Select.story.internal.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "Unexpected any. Specify a different type.", "1"] - ], "packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], @@ -1525,18 +1463,9 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.story.internal.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], - "packages/grafana-ui/src/components/Forms/Legend.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/Gauge/Gauge.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] @@ -1595,18 +1524,16 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "0"] ], "packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "Unexpected any. Specify a different type.", "1"], - [0, 0, 0, "Do not use any type assertions.", "2"], - [0, 0, 0, "Unexpected any. Specify a different type.", "3"], - [0, 0, 0, "Do not use any type assertions.", "4"] + [0, 0, 0, "Unexpected any. Specify a different type.", "0"], + [0, 0, 0, "Do not use any type assertions.", "1"], + [0, 0, 0, "Unexpected any. Specify a different type.", "2"], + [0, 0, 0, "Do not use any type assertions.", "3"] ], "packages/grafana-ui/src/components/Input/Input.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "Unexpected any. Specify a different type.", "1"], - [0, 0, 0, "Do not use any type assertions.", "2"], - [0, 0, 0, "Unexpected any. Specify a different type.", "3"], - [0, 0, 0, "Do not use any type assertions.", "4"] + [0, 0, 0, "Unexpected any. Specify a different type.", "0"], + [0, 0, 0, "Do not use any type assertions.", "1"], + [0, 0, 0, "Unexpected any. Specify a different type.", "2"], + [0, 0, 0, "Do not use any type assertions.", "3"] ], "packages/grafana-ui/src/components/JSONFormatter/JSONFormatter.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], @@ -1673,9 +1600,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "2"], [0, 0, 0, "Do not use any type assertions.", "3"] ], - "packages/grafana-ui/src/components/Modal/Modal.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/Modal/ModalsContext.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], @@ -1684,9 +1608,6 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "4"], [0, 0, 0, "Unexpected any. Specify a different type.", "5"] ], - "packages/grafana-ui/src/components/Monaco/CodeEditor.story.internal.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/PanelChrome/PanelContext.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] @@ -1694,9 +1615,6 @@ exports[`better eslint`] = { "packages/grafana-ui/src/components/PanelChrome/index.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "packages/grafana-ui/src/components/PanelContainer/PanelContainer.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/PluginSignatureBadge/PluginSignatureBadge.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] @@ -1720,12 +1638,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "1"], [0, 0, 0, "Unexpected any. Specify a different type.", "2"] ], - "packages/grafana-ui/src/components/SecretFormField/SecretFormField.story.internal.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], - "packages/grafana-ui/src/components/SecretTextArea/SecretTextArea.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/Segment/Segment.story.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], @@ -1773,9 +1685,8 @@ exports[`better eslint`] = { ], "packages/grafana-ui/src/components/Select/Select.story.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "Do not use any type assertions.", "1"], - [0, 0, 0, "Unexpected any. Specify a different type.", "2"], - [0, 0, 0, "Unexpected any. Specify a different type.", "3"] + [0, 0, 0, "Unexpected any. Specify a different type.", "1"], + [0, 0, 0, "Unexpected any. Specify a different type.", "2"] ], "packages/grafana-ui/src/components/Select/SelectBase.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], @@ -1869,34 +1780,14 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "19"], [0, 0, 0, "Unexpected any. Specify a different type.", "20"] ], - "packages/grafana-ui/src/components/Slider/RangeSlider.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "Do not use any type assertions.", "1"], - [0, 0, 0, "Do not use any type assertions.", "2"] - ], - "packages/grafana-ui/src/components/Slider/Slider.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"], - [0, 0, 0, "Do not use any type assertions.", "1"], - [0, 0, 0, "Do not use any type assertions.", "2"], - [0, 0, 0, "Do not use any type assertions.", "3"], - [0, 0, 0, "Do not use any type assertions.", "4"], - [0, 0, 0, "Do not use any type assertions.", "5"] - ], "packages/grafana-ui/src/components/Sparkline/Sparkline.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"] ], - "packages/grafana-ui/src/components/Spinner/Spinner.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], - [0, 0, 0, "Unexpected any. Specify a different type.", "2"], - [0, 0, 0, "Do not use any type assertions.", "3"] - ], - "packages/grafana-ui/src/components/Switch/Switch.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] + [0, 0, 0, "Unexpected any. Specify a different type.", "2"] ], "packages/grafana-ui/src/components/Table/BarGaugeCell.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] @@ -1930,9 +1821,6 @@ exports[`better eslint`] = { "packages/grafana-ui/src/components/Table/JSONViewCell.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "packages/grafana-ui/src/components/Table/Table.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/Table/Table.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"], @@ -1994,9 +1882,6 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "11"], [0, 0, 0, "Unexpected any. Specify a different type.", "12"] ], - "packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.story.internal.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/TableInputCSV/TableInputCSV.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] @@ -2005,12 +1890,6 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"] ], - "packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], - "packages/grafana-ui/src/components/TextArea/TextArea.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] @@ -2031,9 +1910,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "2"], [0, 0, 0, "Unexpected any. Specify a different type.", "3"] ], - "packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/ToolbarButton/ToolbarButton.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], @@ -2055,9 +1931,6 @@ exports[`better eslint`] = { "packages/grafana-ui/src/components/UnitPicker/UnitPicker.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/VizLegend/VizLegendListItem.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], @@ -2072,9 +1945,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "3"], [0, 0, 0, "Do not use any type assertions.", "4"] ], - "packages/grafana-ui/src/components/VizTooltip/SeriesTable.story.tsx:5381": [ - [0, 0, 0, "Do not use any type assertions.", "0"] - ], "packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], diff --git a/packages/grafana-ui/src/components/Alert/Alert.story.tsx b/packages/grafana-ui/src/components/Alert/Alert.story.tsx index ac1cd03c2b6..4b28f8b653a 100644 --- a/packages/grafana-ui/src/components/Alert/Alert.story.tsx +++ b/packages/grafana-ui/src/components/Alert/Alert.story.tsx @@ -1,5 +1,5 @@ import { action } from '@storybook/addon-actions'; -import { Story } from '@storybook/react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; import React from 'react'; import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui'; @@ -8,11 +8,9 @@ import { StoryExample } from '../../utils/storybook/StoryExample'; import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory'; import mdx from '../Alert/Alert.mdx'; -import { Props } from './Alert'; - const severities: AlertVariant[] = ['error', 'warning', 'info', 'success']; -export default { +const meta: ComponentMeta = { title: 'Overlays/Alert', component: Alert, decorators: [withCenteredStory, withHorizontallyCenteredStory], @@ -32,7 +30,7 @@ export default { }, }; -export const Examples: Story = ({ severity, title, buttonContent }) => { +export const Examples: ComponentStory = ({ severity, title, buttonContent }) => { return ( @@ -190,3 +188,5 @@ Examples.args = { title: 'Some very important message', buttonContent: 'Close', }; + +export default meta; diff --git a/packages/grafana-ui/src/components/Badge/Badge.story.tsx b/packages/grafana-ui/src/components/Badge/Badge.story.tsx index 7bf2c11bbcb..c651bb07200 100644 --- a/packages/grafana-ui/src/components/Badge/Badge.story.tsx +++ b/packages/grafana-ui/src/components/Badge/Badge.story.tsx @@ -1,14 +1,14 @@ -import { Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; -import { Badge, BadgeProps } from '@grafana/ui'; +import { Badge } from '@grafana/ui'; import { iconOptions } from '../../utils/storybook/knobs'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import mdx from './Badge.mdx'; -export default { +const meta: ComponentMeta = { title: 'Data Display/Badge', component: Badge, decorators: [withCenteredStory], @@ -22,7 +22,7 @@ export default { }, }; -const Template: Story = (args) => ; +const Template: ComponentStory = (args) => ; export const Basic = Template.bind({}); @@ -31,3 +31,5 @@ Basic.args = { color: 'blue', icon: 'rocket', }; + +export default meta; diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx index 6857739711b..5ecd90bf95a 100644 --- a/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx +++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx @@ -10,7 +10,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { Props } from './BarGauge'; import mdx from './BarGauge.mdx'; -export default { +const meta: Meta = { title: 'Visualizations/BarGauge', component: BarGauge, decorators: [withCenteredStory], @@ -58,7 +58,7 @@ export default { threshold1Color: { control: 'color' }, threshold2Color: { control: 'color' }, }, -} as Meta; +}; interface StoryProps extends Partial { numeric: number; @@ -125,3 +125,5 @@ barGaugeHorizontal.args = { width: 500, orientation: VizOrientation.Horizontal, }; + +export default meta; diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx index 4376f990360..6a6d08aa64d 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx @@ -16,7 +16,7 @@ import { } from './BigValue'; import mdx from './BigValue.mdx'; -export default { +const meta: Meta = { title: 'Visualizations/BigValue', component: BigValue, decorators: [withCenteredStory], @@ -48,7 +48,7 @@ export default { }, color: { control: 'color' }, }, -} as Meta; +}; interface StoryProps extends Partial { numeric: number; @@ -110,3 +110,5 @@ Basic.args = { color: 'red', textMode: BigValueTextMode.Auto, }; + +export default meta; diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx index 66588655cbc..04c171eb70d 100644 --- a/packages/grafana-ui/src/components/Button/Button.story.tsx +++ b/packages/grafana-ui/src/components/Button/Button.story.tsx @@ -1,15 +1,15 @@ -import { Story, Meta } from '@storybook/react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; import React from 'react'; import { ComponentSize } from '../../types/size'; import { Card } from '../Card/Card'; import { HorizontalGroup, VerticalGroup } from '../Layout/Layout'; -import { allButtonVariants, allButtonFills, Button, ButtonProps } from './Button'; +import { allButtonVariants, allButtonFills, Button } from './Button'; import mdx from './Button.mdx'; import { ButtonGroup } from './ButtonGroup'; -export default { +const meta: ComponentMeta = { title: 'Buttons/Button', component: Button, parameters: { @@ -17,9 +17,9 @@ export default { page: mdx, }, }, -} as Meta; +}; -export const Variants: Story = () => { +export const Variants: ComponentStory = () => { const sizes: ComponentSize[] = ['lg', 'md', 'sm']; return ( @@ -87,3 +87,5 @@ export const Variants: Story = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx index c4970a83e33..bd5793dc52c 100644 --- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx +++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.story.tsx @@ -1,13 +1,11 @@ -import { Story, Meta } from '@storybook/react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; import React from 'react'; import { ButtonCascader } from '@grafana/ui'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { ButtonCascaderProps } from './ButtonCascader'; - -export default { +const meta: ComponentMeta = { title: 'Forms/Cascader/ButtonCascader', component: ButtonCascader, decorators: [withCenteredStory], @@ -35,9 +33,9 @@ export default { icon: { control: { type: 'select', options: ['plus', 'minus', 'table'] } }, options: { control: 'object' }, }, -} as Meta; +}; -const Template: Story = ({ children, ...args }) => { +const Template: ComponentStory = ({ children, ...args }) => { return {children}; }; @@ -47,3 +45,5 @@ export const withIcon = Template.bind({}); withIcon.args = { icon: 'plus', }; + +export default meta; diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx index b048dfb9acf..2229da38eb7 100644 --- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx +++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.internal.tsx @@ -6,7 +6,7 @@ import { Button } from '../Button/Button'; import { CallToActionCard, CallToActionCardProps } from './CallToActionCard'; -export default { +const meta: Meta = { title: 'Layout/CallToActionCard', component: CallToActionCard, parameters: { @@ -17,7 +17,7 @@ export default { argTypes: { Element: { control: { type: 'select', options: ['button', 'custom'] } }, }, -} as Meta; +}; interface StoryProps extends Partial { Element: string; @@ -47,3 +47,5 @@ Basic.args = { H1Text: 'This is just H1 tag, you can any component as CTA element', buttonText: 'Add datasource', }; + +export default meta; diff --git a/packages/grafana-ui/src/components/Card/Card.story.tsx b/packages/grafana-ui/src/components/Card/Card.story.tsx index a6e06b499bd..d4538fb3c96 100644 --- a/packages/grafana-ui/src/components/Card/Card.story.tsx +++ b/packages/grafana-ui/src/components/Card/Card.story.tsx @@ -1,4 +1,4 @@ -import { Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; @@ -7,12 +7,12 @@ import { IconButton } from '../IconButton/IconButton'; import { VerticalGroup } from '../Layout/Layout'; import { TagList } from '../Tags/TagList'; -import { Card, Props } from './Card'; +import { Card } from './Card'; import mdx from './Card.mdx'; const logo = 'https://grafana.com/static/assets/img/apple-touch-icon.png'; -export default { +const meta: ComponentMeta = { title: 'General/Card', component: Card, decorators: [withCenteredStory], @@ -26,7 +26,7 @@ export default { }, }; -export const Basic: Story = ({ disabled }) => { +export const Basic: ComponentStory = ({ disabled }) => { return ( Filter by name @@ -38,7 +38,7 @@ export const Basic: Story = ({ disabled }) => { ); }; -export const AsLink: Story = ({ disabled }) => { +export const AsLink: ComponentStory = ({ disabled }) => { return ( @@ -63,7 +63,7 @@ export const AsLink: Story = ({ disabled }) => { ); }; -export const WithTags: Story = ({ disabled }) => { +export const WithTags: ComponentStory = ({ disabled }) => { return ( Elasticsearch – Custom Templated Query @@ -75,7 +75,7 @@ export const WithTags: Story = ({ disabled }) => { ); }; -export const WithMedia: Story = ({ disabled }) => { +export const WithMedia: ComponentStory = ({ disabled }) => { return ( 1-ops-tools1-fallback @@ -91,7 +91,7 @@ export const WithMedia: Story = ({ disabled }) => { ); }; -export const WithActions: Story = ({ disabled }) => { +export const WithActions: ComponentStory = ({ disabled }) => { return ( 1-ops-tools1-fallback @@ -120,7 +120,7 @@ export const WithActions: Story = ({ disabled }) => { ); }; -export const Full: Story = ({ disabled }) => { +export const Full: ComponentStory = ({ disabled }) => { return ( Card title @@ -157,7 +157,7 @@ export const Full: Story = ({ disabled }) => { ); }; -export const Selected: Story = () => { +export const Selected: ComponentStory = () => { return ( Spaces @@ -169,7 +169,7 @@ export const Selected: Story = () => { ); }; -export const NotSelected: Story = () => { +export const NotSelected: ComponentStory = () => { return ( Tabs @@ -180,3 +180,5 @@ export const NotSelected: Story = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx b/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx index 537f64a44b7..efe3d6f63cd 100644 --- a/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx +++ b/packages/grafana-ui/src/components/Cascader/Cascader.story.tsx @@ -1,11 +1,11 @@ -import { Story, Meta } from '@storybook/react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; import React from 'react'; import { Cascader } from '@grafana/ui'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { CascaderOption, CascaderProps } from './Cascader'; +import { CascaderOption } from './Cascader'; import mdx from './Cascader.mdx'; const onSelect = (val: string) => console.log(val); @@ -34,7 +34,7 @@ const options = [ }, ]; -export default { +const meta: ComponentMeta = { title: 'Forms/Cascader', component: Cascader, decorators: [withCenteredStory], @@ -62,9 +62,9 @@ export default { argTypes: { width: { control: { type: 'range', min: 0, max: 70 } }, }, -} as Meta; +}; -const Template: Story = (args) => ; +const Template: ComponentStory = (args) => ; export const Simple = Template.bind({}); Simple.args = { @@ -101,3 +101,5 @@ export const WithOptionsStateUpdate = () => { return ; }; + +export default meta; diff --git a/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.story.tsx b/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.story.tsx index e9b5a6b1e50..133c5f236b8 100644 --- a/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.story.tsx +++ b/packages/grafana-ui/src/components/ClickOutsideWrapper/ClickOutsideWrapper.story.tsx @@ -1,4 +1,5 @@ import { action } from '@storybook/addon-actions'; +import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; @@ -6,7 +7,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { ClickOutsideWrapper } from './ClickOutsideWrapper'; import mdx from './ClickOutsideWrapper.mdx'; -export default { +const meta: ComponentMeta = { title: 'Layout/ClickOutsideWrapper', component: ClickOutsideWrapper, decorators: [withCenteredStory], @@ -24,3 +25,5 @@ export const basic = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx index 035a82a7c9c..cbd3573fa5e 100644 --- a/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx +++ b/packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx @@ -8,7 +8,7 @@ import { Input } from '../Input/Input'; import { ClipboardButton as ClipboardButtonImpl, Props } from './ClipboardButton'; import mdx from './ClipboardButton.mdx'; -export default { +const meta: Meta = { title: 'Buttons/ClipboardButton', component: ClipboardButtonImpl, decorators: [withCenteredStory], @@ -20,7 +20,7 @@ export default { exclude: ['variant', 'icon', 'className', 'fullWidth', 'getText', 'onClipboardCopy', 'onClipboardError'], }, }, -} as Meta; +}; interface StoryProps extends Partial { inputText: string; @@ -57,3 +57,5 @@ export const AsInputFieldAddon: Story = (args) => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/Collapse/CollapsableSection.story.tsx b/packages/grafana-ui/src/components/Collapse/CollapsableSection.story.tsx index a86051a369e..8fd704b000c 100644 --- a/packages/grafana-ui/src/components/Collapse/CollapsableSection.story.tsx +++ b/packages/grafana-ui/src/components/Collapse/CollapsableSection.story.tsx @@ -1,9 +1,10 @@ +import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { CollapsableSection } from './CollapsableSection'; import mdx from './CollapsableSection.mdx'; -export default { +const meta: ComponentMeta = { title: 'Layout/CollapsableSection', component: CollapsableSection, parameters: { @@ -20,3 +21,5 @@ export const simple = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.story.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.story.tsx index 9d8fc0ca0d5..0085d26e784 100644 --- a/packages/grafana-ui/src/components/Collapse/Collapse.story.tsx +++ b/packages/grafana-ui/src/components/Collapse/Collapse.story.tsx @@ -1,3 +1,4 @@ +import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { UseState } from '../../utils/storybook/UseState'; @@ -6,7 +7,7 @@ import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/st import { Collapse, ControlledCollapse } from './Collapse'; import mdx from './Collapse.mdx'; -export default { +const meta: ComponentMeta = { title: 'Layout/Collapse', component: Collapse, decorators: [withCenteredStory, withHorizontallyCenteredStory], @@ -43,3 +44,5 @@ export const controlled = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx index 203c6332098..b96f68c3ebc 100644 --- a/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx @@ -1,6 +1,6 @@ import { action } from '@storybook/addon-actions'; import { useArgs } from '@storybook/client-api'; -import { Meta, Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; import { SeriesColorPicker, ColorPicker } from '@grafana/ui'; @@ -9,10 +9,9 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; import mdx from './ColorPicker.mdx'; -import { ColorPickerInput, ColorPickerInputProps } from './ColorPickerInput'; -import { ColorPickerProps } from './ColorPickerPopover'; +import { ColorPickerInput } from './ColorPickerInput'; -const meta: Meta = { +const meta: ComponentMeta = { title: 'Pickers and Editors/ColorPicker', component: ColorPicker, subcomponents: { SeriesColorPicker, ColorPickerInput }, @@ -31,7 +30,7 @@ const meta: Meta = { }, }; -export const Basic: Story = ({ color, enableNamedColors }) => { +export const Basic: ComponentStory = ({ color, enableNamedColors }) => { const [, updateArgs] = useArgs(); return renderComponentWithTheme(ColorPicker, { enableNamedColors, @@ -43,7 +42,7 @@ export const Basic: Story = ({ color, enableNamedColors }) => }); }; -export const SeriesPicker: Story = ({ color, enableNamedColors }) => { +export const SeriesPicker: ComponentStory = ({ color, enableNamedColors }) => { const [, updateArgs] = useArgs(); return ( = ({ color, enableNamedColors ); }; -export const Input: Story = ({ color }) => { +export const Input: ComponentStory = ({ color }) => { const [, updateArgs] = useArgs(); return ( = { title: 'Pickers and Editors/ColorPicker/Popovers', component: ColorPickerPopover, subcomponents: { SeriesColorPickerPopover }, @@ -14,7 +16,7 @@ export default { export const basic = () => { return renderComponentWithTheme(ColorPickerPopover, { color: '#BC67E6', - onChange: (color: any) => { + onChange: (color: string) => { console.log(color); }, }); @@ -23,8 +25,10 @@ export const basic = () => { export const seriesColorPickerPopover = () => { return renderComponentWithTheme(SeriesColorPickerPopover, { color: '#BC67E6', - onChange: (color: any) => { + onChange: (color: string) => { console.log(color); }, }); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx index f5f20cca365..56b0ccda0e0 100644 --- a/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx @@ -6,7 +6,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import mdx from './ColorPicker.mdx'; import { NamedColorsPalette, NamedColorsPaletteProps } from './NamedColorsPalette'; -export default { +const meta: Meta = { title: 'Pickers and Editors/ColorPicker/Palettes/NamedColorsPalette', component: NamedColorsPalette, decorators: [withCenteredStory], @@ -21,7 +21,7 @@ export default { argTypes: { selectedColor: { control: { type: 'select', options: ['green', 'red', 'light-blue', 'yellow'] } }, }, -} as Meta; +}; interface StoryProps extends Partial { selectedColor: string; @@ -35,3 +35,5 @@ export const NamedColors: Story = ({ selectedColor }) => { NamedColors.args = { color: 'green', }; + +export default meta; diff --git a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx index 4ba6ad3d9ed..a16aab3bcfd 100644 --- a/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx +++ b/packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx @@ -1,14 +1,14 @@ import { action } from '@storybook/addon-actions'; import { useArgs } from '@storybook/client-api'; -import { Meta, Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme'; import mdx from './ColorPicker.mdx'; -import SpectrumPalette, { SpectrumPaletteProps } from './SpectrumPalette'; +import SpectrumPalette from './SpectrumPalette'; -const meta: Meta = { +const meta: ComponentMeta = { title: 'Pickers and Editors/ColorPicker/Palettes/SpectrumPalette', component: SpectrumPalette, decorators: [withCenteredStory], @@ -25,7 +25,7 @@ const meta: Meta = { }, }; -export const Simple: Story = ({ color }) => { +export const Simple: ComponentStory = ({ color }) => { const [, updateArgs] = useArgs(); return renderComponentWithTheme(SpectrumPalette, { color, diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx index adab9546c4f..1968ae5bc90 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx @@ -11,7 +11,7 @@ import { Props } from './ConfirmButton'; import mdx from './ConfirmButton.mdx'; import { DeleteButton } from './DeleteButton'; -export default { +const meta: Meta = { title: 'Buttons/ConfirmButton', component: ConfirmButton, decorators: [withCenteredStory], @@ -41,7 +41,7 @@ export default { }, size: { control: { type: 'select' }, options: ['xs', 'sm', 'md', 'lg'] }, }, -} as Meta; +}; interface StoryProps extends Partial { buttonText: string; @@ -94,3 +94,5 @@ export const Delete: Story = (args) => { /> ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx index 11fef1700df..2255b431718 100644 --- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx +++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx @@ -1,17 +1,16 @@ import { action } from '@storybook/addon-actions'; -import { Meta, Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; import { ConfirmModal } from '@grafana/ui'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { ConfirmModalProps } from './ConfirmModal'; import mdx from './ConfirmModal.mdx'; const defaultExcludes = ['onConfirm', 'onDismiss', 'onAlternative']; -export default { +const meta: ComponentMeta = { title: 'Overlays/ConfirmModal', component: ConfirmModal, decorators: [withCenteredStory], @@ -28,7 +27,7 @@ export default { body: { control: { type: 'text' } }, description: { control: { type: 'text' } }, }, -} as Meta; +}; const defaultActions = { onConfirm: () => { @@ -42,7 +41,7 @@ const defaultActions = { }, }; -export const Basic: Story = ({ +export const Basic: ComponentStory = ({ title, body, description, @@ -83,7 +82,7 @@ Basic.args = { isOpen: true, }; -export const AlternativeAction: Story = ({ +export const AlternativeAction: ComponentStory = ({ title, body, description, @@ -127,7 +126,7 @@ AlternativeAction.args = { isOpen: true, }; -export const WithConfirmation: Story = ({ +export const WithConfirmation: ComponentStory = ({ title, body, description, @@ -170,3 +169,5 @@ WithConfirmation.args = { icon: 'trash-alt', isOpen: true, }; + +export default meta; diff --git a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.story.tsx b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.story.tsx index 077dc698184..4489725ae93 100644 --- a/packages/grafana-ui/src/components/ContextMenu/ContextMenu.story.tsx +++ b/packages/grafana-ui/src/components/ContextMenu/ContextMenu.story.tsx @@ -1,3 +1,4 @@ +import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; @@ -9,7 +10,7 @@ import { ContextMenu } from './ContextMenu'; import mdx from './ContextMenu.mdx'; import { WithContextMenu } from './WithContextMenu'; -export default { +const meta: ComponentMeta = { title: 'General/ContextMenu', component: ContextMenu, decorators: [withCenteredStory], @@ -54,3 +55,5 @@ export const WithState = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx index 717140fef68..5fb84412557 100644 --- a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx +++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx @@ -1,13 +1,12 @@ import { action } from '@storybook/addon-actions'; import { useArgs } from '@storybook/client-api'; -import { Meta, Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; import { DataSourceSettings } from '@grafana/data'; import { DataSourceHttpSettings } from './DataSourceHttpSettings'; import mdx from './DataSourceHttpSettings.mdx'; -import { HttpSettingsProps } from './types'; const settingsMock: DataSourceSettings = { id: 4, @@ -38,7 +37,7 @@ const settingsMock: DataSourceSettings = { readOnly: true, }; -const meta: Meta = { +const meta: ComponentMeta = { title: 'Data Source/DataSourceHttpSettings', component: DataSourceHttpSettings, parameters: { @@ -55,7 +54,7 @@ const meta: Meta = { }, }; -export const Basic: Story = (args) => { +export const Basic: ComponentStory = (args) => { const [, updateArgs] = useArgs(); return ( = { title: 'Pickers and Editors/TimePickers/Pickers And Editors/DatePicker', component: DatePicker, decorators: [withCenteredStory], @@ -28,3 +29,5 @@ export const Basic = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.story.tsx index 2ccd0ee3121..9350812b641 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.story.tsx @@ -1,3 +1,4 @@ +import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; import { withCenteredStory } from '../../../utils/storybook/withCenteredStory'; @@ -5,7 +6,7 @@ import { withCenteredStory } from '../../../utils/storybook/withCenteredStory'; import { DatePickerWithInput } from './DatePickerWithInput'; import mdx from './DatePickerWithInput.mdx'; -export default { +const meta: ComponentMeta = { title: 'Pickers and Editors/TimePickers/DatePickerWithInput', component: DatePickerWithInput, decorators: [withCenteredStory], @@ -21,3 +22,5 @@ export const Basic = () => { return setDate(newDate)} />; }; + +export default meta; diff --git a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.story.tsx index ac6a6500eeb..54ff4dcb5d4 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.story.tsx @@ -1,14 +1,14 @@ -import { Story, Meta } from '@storybook/react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; import { dateTime, DateTime } from '@grafana/data'; import { withCenteredStory } from '../../../utils/storybook/withCenteredStory'; -import { DateTimePicker, Props } from './DateTimePicker'; +import { DateTimePicker } from './DateTimePicker'; import mdx from './DateTimePicker.mdx'; -export default { +const meta: ComponentMeta = { title: 'Pickers and Editors/TimePickers/DateTimePicker', decorators: [withCenteredStory], component: DateTimePicker, @@ -25,9 +25,9 @@ export default { page: mdx, }, }, -} as Meta; +}; -export const Basic: Story = ({ label }) => { +export const Basic: ComponentStory = ({ label }) => { const [date, setDate] = useState(dateTime('2021-05-05 12:00:00')); return ; }; @@ -35,3 +35,5 @@ export const Basic: Story = ({ label }) => { Basic.args = { label: 'Date', }; + +export default meta; diff --git a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx index c726f5f86c6..8513d8403eb 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx @@ -1,4 +1,5 @@ import { action } from '@storybook/addon-actions'; +import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { UseState } from '../../../utils/storybook/UseState'; @@ -6,7 +7,7 @@ import { withCenteredStory } from '../../../utils/storybook/withCenteredStory'; import { RelativeTimeRangePicker } from './RelativeTimeRangePicker'; -export default { +const meta: ComponentMeta = { title: 'Pickers and Editors/TimePickers/RelativeTimeRangePicker', component: RelativeTimeRangePicker, decorators: [withCenteredStory], @@ -37,3 +38,5 @@ export const basic = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.story.tsx index 72d768b27b1..532515643f3 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.story.tsx @@ -1,4 +1,5 @@ import { action } from '@storybook/addon-actions'; +import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { dateTime } from '@grafana/data'; @@ -7,7 +8,7 @@ import { TimeOfDayPicker } from '@grafana/ui'; import { UseState } from '../../utils/storybook/UseState'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -export default { +const meta: ComponentMeta = { title: 'Pickers and Editors/TimePickers/TimeOfDayPicker', component: TimeOfDayPicker, decorators: [withCenteredStory], @@ -53,3 +54,5 @@ export const onlyMinutes = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.story.tsx index 36706e2ad7b..2297ceb4083 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.story.tsx @@ -1,5 +1,5 @@ import { action } from '@storybook/addon-actions'; -import { Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; import { dateTime, DefaultTimeZone, TimeRange, TimeZone } from '@grafana/data'; @@ -11,7 +11,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { TimeRangeInputProps } from './TimeRangeInput'; import mdx from './TimeRangeInput.mdx'; -export default { +const meta: ComponentMeta = { title: 'Pickers and Editors/TimePickers/TimeRangeInput', component: TimeRangeInput, decorators: [withCenteredStory], @@ -55,7 +55,7 @@ const getComponentWithState = (initialState: State, props: TimeRangeInputProps) ); -export const Relative: Story = (props) => { +export const Relative: ComponentStory = (props) => { const to = dateTime(); const from = to.subtract(6, 'h'); @@ -75,7 +75,7 @@ export const Relative: Story = (props) => { ); }; -export const Absolute: Story = (props) => { +export const Absolute: ComponentStory = (props) => { const to = dateTime(); const from = to.subtract(6, 'h'); @@ -94,3 +94,5 @@ export const Absolute: Story = (props) => { props ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.story.tsx index 7ca94e6aab2..a24b68827ff 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.story.tsx @@ -1,5 +1,5 @@ import { action } from '@storybook/addon-actions'; -import { Story } from '@storybook/react'; +import { Meta, Story } from '@storybook/react'; import React from 'react'; import { dateTime, TimeRange, DefaultTimeZone, TimeZone, isDateTime } from '@grafana/data'; @@ -12,7 +12,7 @@ import { HorizontalGroup, VerticalGroup } from '../Layout/Layout'; import { TimeRangePickerProps } from './TimeRangePicker'; -export default { +const meta: Meta = { title: 'Pickers and Editors/TimePickers/TimeRangePicker', component: TimeRangePicker, decorators: [withCenteredStory], @@ -126,3 +126,5 @@ export const Absolute: Story = (props) => { props ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.story.tsx index b476337e708..26d404d74c4 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.story.tsx @@ -1,4 +1,5 @@ import { action } from '@storybook/addon-actions'; +import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { TimeZonePicker } from '@grafana/ui'; @@ -6,7 +7,7 @@ import { TimeZonePicker } from '@grafana/ui'; import { UseState } from '../../utils/storybook/UseState'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -export default { +const meta: ComponentMeta = { title: 'Pickers and Editors/TimePickers/TimeZonePicker', component: TimeZonePicker, decorators: [withCenteredStory], @@ -37,3 +38,5 @@ export const basic = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx index e42e3c87c02..93bbcfab8dc 100644 --- a/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx +++ b/packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx @@ -1,4 +1,5 @@ import { action } from '@storybook/addon-actions'; +import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { WeekStartPicker } from '@grafana/ui'; @@ -6,7 +7,7 @@ import { WeekStartPicker } from '@grafana/ui'; import { UseState } from '../../utils/storybook/UseState'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -export default { +const meta: ComponentMeta = { title: 'Pickers and Editors/TimePickers/WeekStartPicker', component: WeekStartPicker, decorators: [withCenteredStory], @@ -36,3 +37,5 @@ export const basic = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx index fb491d5c8c1..babb7940c84 100644 --- a/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx +++ b/packages/grafana-ui/src/components/Drawer/Drawer.story.tsx @@ -1,4 +1,4 @@ -import { Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React, { useState } from 'react'; import { Button, Drawer, Tab, TabsBar } from '@grafana/ui'; @@ -6,10 +6,9 @@ import { Button, Drawer, Tab, TabsBar } from '@grafana/ui'; import { UseState } from '../../utils/storybook/UseState'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { Props } from './Drawer'; import mdx from './Drawer.mdx'; -export default { +const meta: ComponentMeta = { title: 'Overlays/Drawer', component: Drawer, decorators: [withCenteredStory], @@ -38,7 +37,7 @@ export default { }, }; -export const Global: Story = (args) => { +export const Global: ComponentStory = (args) => { return ( {(state, updateValue) => { @@ -80,7 +79,7 @@ Global.args = { title: 'Drawer title', }; -export const LongContent: Story = (args) => { +export const LongContent: ComponentStory = (args) => { return ( {(state, updateValue) => { @@ -181,7 +180,7 @@ LongContent.args = { title: 'Drawer title with long content', }; -export const InLine: Story = (args) => { +export const InLine: ComponentStory = (args) => { return ( {(state, updateValue) => { @@ -255,3 +254,5 @@ export function WithTabs() { ); } + +export default meta; diff --git a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.story.internal.tsx b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.story.internal.tsx index 0fda4e017c9..ad926aa87fd 100644 --- a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.story.internal.tsx +++ b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.story.internal.tsx @@ -1,5 +1,5 @@ import { action } from '@storybook/addon-actions'; -import { Meta, Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; import { SelectableValue } from '@grafana/data'; @@ -10,7 +10,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { ButtonSelect } from './ButtonSelect'; -export default { +const meta: ComponentMeta = { title: 'Forms/Select/ButtonSelect', component: ButtonSelect, decorators: [withCenteredStory], @@ -19,9 +19,9 @@ export default { exclude: ['className', 'options', 'value', 'tooltipContent'], }, }, -} as Meta; +}; -export const Basic: Story = (args) => { +export const Basic: ComponentStory = (args) => { const initialValue: SelectableValue = { label: 'A label', value: 'A value' }; const options: Array> = [initialValue, { label: 'Another label', value: 'Another value' }]; return ( @@ -51,3 +51,5 @@ Basic.args = { narrow: true, variant: 'default', }; + +export default meta; diff --git a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.story.tsx b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.story.tsx index 90e18b2c0ac..f1de3f97fd1 100644 --- a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.story.tsx +++ b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.story.tsx @@ -1,3 +1,4 @@ +import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory'; @@ -5,7 +6,7 @@ import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredS import { EmptySearchResult } from './EmptySearchResult'; import mdx from './EmptySearchResult.mdx'; -export default { +const meta: ComponentMeta = { title: 'Visualizations/EmptySearchResult', component: EmptySearchResult, decorators: [withCenteredStory], @@ -19,3 +20,5 @@ export default { export const Basic = () => { return Could not find anything matching your query; }; + +export default meta; diff --git a/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.story.tsx b/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.story.tsx index 885cd49be2f..3ba3e113241 100644 --- a/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.story.tsx +++ b/packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.story.tsx @@ -1,3 +1,4 @@ +import { ComponentMeta } from '@storybook/react'; import React, { useState } from 'react'; import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory'; @@ -9,7 +10,7 @@ import { ErrorBoundary, ErrorBoundaryAlert } from './ErrorBoundary'; import mdx from './ErrorBoundary.mdx'; import { ErrorWithStack } from './ErrorWithStack'; -export default { +const meta: ComponentMeta = { title: 'General/ErrorBoundary', component: ErrorBoundary, decorators: [withCenteredStory], @@ -59,3 +60,5 @@ export const BoundaryAlert = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.story.tsx b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.story.tsx index d335d69bd00..93fc9103bd3 100644 --- a/packages/grafana-ui/src/components/FileDropzone/FileDropzone.story.tsx +++ b/packages/grafana-ui/src/components/FileDropzone/FileDropzone.story.tsx @@ -1,13 +1,13 @@ -import { Meta, Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; -import { FileDropzone, FileDropzoneProps } from '@grafana/ui'; +import { FileDropzone } from '@grafana/ui'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import mdx from './FileDropzone.mdx'; -export default { +const meta: ComponentMeta = { title: 'Forms/FileDropzone', component: FileDropzone, decorators: [withCenteredStory], @@ -16,9 +16,9 @@ export default { page: mdx, }, }, -} as Meta; +}; -const Template: Story = (args) => ; +const Template: ComponentStory = (args) => ; export const Basic = Template.bind({}); @@ -31,3 +31,5 @@ export const OnlyAcceptingCertainFiles = Template.bind({}); OnlyAcceptingCertainFiles.args = { options: { accept: { 'application/json': ['.json'] } }, }; + +export default meta; diff --git a/packages/grafana-ui/src/components/FileDropzone/FileListItem.story.tsx b/packages/grafana-ui/src/components/FileDropzone/FileListItem.story.tsx index 654922796e9..dbeb9959a40 100644 --- a/packages/grafana-ui/src/components/FileDropzone/FileListItem.story.tsx +++ b/packages/grafana-ui/src/components/FileDropzone/FileListItem.story.tsx @@ -6,7 +6,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { FileListItem as FileListItemComponent, FileListItemProps } from './FileListItem'; import mdx from './FileListItem.mdx'; -export default { +const meta: Meta = { title: 'Forms/FileListItem', component: FileListItemComponent, decorators: [withCenteredStory], @@ -21,10 +21,12 @@ export default { removeFile: { action: 'removeFile' }, }, args: { - file: { file: { name: 'some-file.jpg', size: 123456 } as any, id: '1', error: new DOMException('error') }, + file: { file: { name: 'some-file.jpg', size: 123456 }, id: '1', error: new DOMException('error') }, }, -} as Meta; +}; export const FileListItem: Story = (args) => { return ; }; + +export default meta; diff --git a/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx b/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx index a0d32acb972..9bded3c14d1 100644 --- a/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx +++ b/packages/grafana-ui/src/components/FileUpload/FileUpload.story.tsx @@ -1,4 +1,4 @@ -import { Meta, Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; import { FileUpload } from '@grafana/ui'; @@ -7,7 +7,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import mdx from './FileUpload.mdx'; -export default { +const meta: ComponentMeta = { title: 'Forms/FileUpload', component: FileUpload, decorators: [withCenteredStory], @@ -27,9 +27,9 @@ export default { options: ['xs', 'sm', 'md', 'lg'], }, }, -} as Meta; +}; -export const Basic: Story = (args) => { +export const Basic: ComponentStory = (args) => { return ( { Basic.args = { size: 'md', }; + +export default meta; diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx index 0a5c007ae5f..e892d618a1c 100644 --- a/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx +++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.story.tsx @@ -1,4 +1,4 @@ -import { Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React, { useState } from 'react'; import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory'; @@ -6,10 +6,10 @@ import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredS import { getAvailableIcons } from '../../types'; import { HorizontalGroup } from '../Layout/Layout'; -import { FilterPill, FilterPillProps } from './FilterPill'; +import { FilterPill } from './FilterPill'; import mdx from './FilterPill.mdx'; -export default { +const meta: ComponentMeta = { title: 'General/FilterPill', component: FilterPill, decorators: [withCenteredStory], @@ -24,7 +24,7 @@ export default { }, }; -export const Basic: Story = (args) => { +export const Basic: ComponentStory = (args) => { return ; }; @@ -46,3 +46,5 @@ Basic.args = { label: 'Test', icon: undefined, }; + +export default meta; diff --git a/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx b/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx index 5b3fe2a013a..6d289048d27 100644 --- a/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx +++ b/packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx @@ -1,11 +1,11 @@ -import { Meta, Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; -import { FormField, Props } from './FormField'; +import { FormField } from './FormField'; -export default { +const meta: ComponentMeta = { title: 'Forms/Legacy/FormField', component: FormField, decorators: [withCenteredStory], @@ -24,16 +24,18 @@ export default { labelWidth: { control: { type: 'range', min: 5, max: 30 } }, tooltip: { control: { type: 'text' } }, }, -} as Meta; +}; -export const Basic: Story = (args) => { +export const Basic: ComponentStory = (args) => { return ; }; -export const WithTooltip: Story = ({ tooltip, ...args }) => { +export const WithTooltip: ComponentStory = ({ tooltip, ...args }) => { return ; }; WithTooltip.args = { tooltip: 'This is a tooltip with information about this FormField', }; + +export default meta; diff --git a/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.story.tsx b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.story.tsx index 94f6827be04..923114c0fbe 100644 --- a/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.story.tsx +++ b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.story.tsx @@ -1,3 +1,4 @@ +import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory'; @@ -5,7 +6,7 @@ import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredS import { FormattedValueDisplay } from './FormattedValueDisplay'; import mdx from './FormattedValueDisplay.mdx'; -export default { +const meta: ComponentMeta = { title: 'Visualizations/FormattedValueDisplay', component: FormattedValueDisplay, decorators: [withCenteredStory], @@ -19,3 +20,5 @@ export default { export const basic = () => { return ; }; + +export default meta; diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx index c80d0a25f20..55425a2d7f7 100644 --- a/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx +++ b/packages/grafana-ui/src/components/Forms/Checkbox.story.tsx @@ -1,3 +1,4 @@ +import { ComponentMeta } from '@storybook/react'; import React, { useState, useCallback } from 'react'; import { VerticalGroup } from '../Layout/Layout'; @@ -6,7 +7,7 @@ import { Checkbox } from './Checkbox'; import mdx from './Checkbox.mdx'; import { Field } from './Field'; -export default { +const meta: ComponentMeta = { title: 'Forms/Checkbox', component: Checkbox, parameters: { @@ -79,3 +80,5 @@ export const InAField = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/Forms/Field.story.tsx b/packages/grafana-ui/src/components/Forms/Field.story.tsx index 859fc811c77..aaf108766dd 100644 --- a/packages/grafana-ui/src/components/Forms/Field.story.tsx +++ b/packages/grafana-ui/src/components/Forms/Field.story.tsx @@ -1,12 +1,12 @@ -import { Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React, { useState, useCallback } from 'react'; import { Input, Switch } from '..'; -import { Field, FieldProps } from './Field'; +import { Field } from './Field'; import mdx from './Field.mdx'; -export default { +const meta: ComponentMeta = { title: 'Forms/Field', component: Field, argTypes: { @@ -27,7 +27,7 @@ export default { }, }; -export const Simple: Story = (args) => ( +export const Simple: ComponentStory = (args) => (
@@ -45,7 +45,7 @@ Simple.args = { horizontal: false, }; -export const HorizontalLayout: Story = (args) => { +export const HorizontalLayout: ComponentStory = (args) => { const [checked, setChecked] = useState(false); const onChange = useCallback((e) => setChecked(e.currentTarget.checked), [setChecked]); return ( @@ -66,3 +66,5 @@ HorizontalLayout.args = { error: 'Not valid input', horizontal: true, }; + +export default meta; diff --git a/packages/grafana-ui/src/components/Forms/FieldSet.story.tsx b/packages/grafana-ui/src/components/Forms/FieldSet.story.tsx index da5856bb665..e054fed345a 100644 --- a/packages/grafana-ui/src/components/Forms/FieldSet.story.tsx +++ b/packages/grafana-ui/src/components/Forms/FieldSet.story.tsx @@ -1,3 +1,4 @@ +import { ComponentMeta } from '@storybook/react'; import React from 'react'; import { Input, Form, FieldSet, Field } from '@grafana/ui'; @@ -7,7 +8,7 @@ import { Button } from '../Button'; import mdx from './FieldSet.mdx'; -export default { +const meta: ComponentMeta = { title: 'Forms/FieldSet', component: FieldSet, decorators: [withCenteredStory], @@ -46,3 +47,5 @@ export const basic = () => { ); }; + +export default meta; diff --git a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx index b9fe82c76da..26665dad2f5 100644 --- a/packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx +++ b/packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx @@ -1,10 +1,10 @@ -import { Meta, Story } from '@storybook/react'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; import { FieldValidationMessage } from './FieldValidationMessage'; import mdx from './FieldValidationMessage.mdx'; -const story = { +const meta: ComponentMeta = { title: 'Forms/FieldValidationMessage', component: FieldValidationMessage, parameters: { @@ -24,10 +24,8 @@ const story = { }, }; -export default story as Meta; - -type Args = typeof story['args']; - -export const Basic: Story = (args) => { +export const Basic: ComponentStory = (args) => { return {args.children}; }; + +export default meta; diff --git a/packages/grafana-ui/src/components/Forms/InlineField.story.tsx b/packages/grafana-ui/src/components/Forms/InlineField.story.tsx index 0cfcf0b718f..b006d9f2d00 100644 --- a/packages/grafana-ui/src/components/Forms/InlineField.story.tsx +++ b/packages/grafana-ui/src/components/Forms/InlineField.story.tsx @@ -1,4 +1,5 @@ import { action } from '@storybook/addon-actions'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; import React from 'react'; import { Input } from '../Input/Input'; @@ -7,7 +8,7 @@ import { Select } from '../Select/Select'; import { InlineField } from './InlineField'; import mdx from './InlineField.mdx'; -export default { +const meta: ComponentMeta = { title: 'Forms/InlineField', component: InlineField, parameters: { @@ -17,7 +18,7 @@ export default { }, }; -export const basic = () => { +export const basic: ComponentStory = () => { return ( @@ -25,7 +26,7 @@ export const basic = () => { ); }; -export const withTooltip = () => { +export const withTooltip: ComponentStory = () => { return ( @@ -33,7 +34,7 @@ export const withTooltip = () => { ); }; -export const grow = () => { +export const grow: ComponentStory = () => { return ( @@ -41,7 +42,7 @@ export const grow = () => { ); }; -export const withSelect = () => { +export const withSelect: ComponentStory = () => { return (