Grafana UI: Bump to Storybook 8 (#87722)

* chore(storybook): run yarn dlx storybook@latest upgrade

* chore(storybook): remove storybook/blocks patch

* chore(yarn): clean up storybook dependencies

* feat(storybook): migrate to v8 config via migration codemods

* refactor(storybook): update stories to use v8 types via codemod

* refactor(storybook): update stories to use preview-api instead of client-api

* refactor(storybook): replace mdx usage of ArgsTable with PureArgsTable

* refactor(storybook): migrate remaining mdx files to v8 storybook/blocks api

* refactor(storybook): clean up mdx imports and blocks component names

* chore(storybook): clean up typescript configuration

* fix(frontend): align types/react versions across monorepo so grafana ui can be built

* fix(storybook): pub back react-docgen-typescript and use ArgTypes so props tables work

* chore(storybook): patch blocks package to expose Preview component

* revert(storybook): revert changes related to using Canvas component in mdx files

* Storybook upgrade: Fix icon typing (#87793)

fix iconOptions typing

* refactor(storybook): prefer as const over asserting types

* revert(storybook): put back correct case in box.mdx

---------

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
pull/87905/head^2
Jack Westbrook 2 years ago committed by GitHub
parent 6127dfd322
commit 65b2834420
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 253
      .yarn/patches/@storybook-blocks-npm-7.4.5-5a2374564a.patch
  2. 142
      .yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch
  3. 3
      .yarnrc.yml
  4. 6
      package.json
  5. 2
      packages/grafana-data/package.json
  6. 2
      packages/grafana-flamegraph/package.json
  7. 2
      packages/grafana-icons/package.json
  8. 2
      packages/grafana-o11y-ds-frontend/package.json
  9. 2
      packages/grafana-prometheus/package.json
  10. 2
      packages/grafana-runtime/package.json
  11. 2
      packages/grafana-sql/package.json
  12. 28
      packages/grafana-ui/.storybook/main.ts
  13. 34
      packages/grafana-ui/package.json
  14. 4
      packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.mdx
  15. 6
      packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.story.tsx
  16. 8
      packages/grafana-ui/src/components/Badge/Badge.story.tsx
  17. 1
      packages/grafana-ui/src/components/BarGauge/BarGauge.mdx
  18. 6
      packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx
  19. 6
      packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
  20. 4
      packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.internal.story.tsx
  21. 6
      packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.internal.story.tsx
  22. 2
      packages/grafana-ui/src/components/Collapse/CollapsableSection.story.tsx
  23. 2
      packages/grafana-ui/src/components/Collapse/Collapse.mdx
  24. 2
      packages/grafana-ui/src/components/Collapse/Collapse.story.tsx
  25. 2
      packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
  26. 2
      packages/grafana-ui/src/components/ColorPicker/Palettes.story.tsx
  27. 8
      packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx
  28. 2
      packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.mdx
  29. 2
      packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx
  30. 2
      packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.story.tsx
  31. 2
      packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx
  32. 2
      packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.story.tsx
  33. 2
      packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.mdx
  34. 2
      packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.story.tsx
  35. 2
      packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.story.tsx
  36. 2
      packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.story.tsx
  37. 2
      packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx
  38. 2
      packages/grafana-ui/src/components/Dropdown/ButtonSelect.internal.story.tsx
  39. 2
      packages/grafana-ui/src/components/FileDropzone/FileDropzone.mdx
  40. 2
      packages/grafana-ui/src/components/FileDropzone/FileListItem.mdx
  41. 4
      packages/grafana-ui/src/components/FileDropzone/FileListItem.story.tsx
  42. 2
      packages/grafana-ui/src/components/FileUpload/FileUpload.mdx
  43. 2
      packages/grafana-ui/src/components/Forms/Checkbox.mdx
  44. 2
      packages/grafana-ui/src/components/Forms/Field.mdx
  45. 4
      packages/grafana-ui/src/components/Forms/FieldArray.story.tsx
  46. 2
      packages/grafana-ui/src/components/Forms/FieldSet.mdx
  47. 4
      packages/grafana-ui/src/components/Forms/Form.story.tsx
  48. 2
      packages/grafana-ui/src/components/Forms/Label.mdx
  49. 4
      packages/grafana-ui/src/components/Forms/Legacy/Input/Input.internal.story.tsx
  50. 2
      packages/grafana-ui/src/components/Forms/Legacy/Select/Select.internal.story.tsx
  51. 2
      packages/grafana-ui/src/components/Forms/Legend.mdx
  52. 2
      packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.mdx
  53. 4
      packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.story.tsx
  54. 2
      packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.mdx
  55. 6
      packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.story.tsx
  56. 6
      packages/grafana-ui/src/components/InlineToast/InlineToast.internal.story.tsx
  57. 2
      packages/grafana-ui/src/components/InlineToast/InlineToast.mdx
  58. 2
      packages/grafana-ui/src/components/Input/AutoSizeInput.mdx
  59. 16
      packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx
  60. 2
      packages/grafana-ui/src/components/Input/Input.mdx
  61. 6
      packages/grafana-ui/src/components/Input/Input.story.tsx
  62. 6
      packages/grafana-ui/src/components/Layout/Layout.story.tsx
  63. 4
      packages/grafana-ui/src/components/Link/TextLink.mdx
  64. 6
      packages/grafana-ui/src/components/List/List.internal.story.tsx
  65. 2
      packages/grafana-ui/src/components/Modal/Modal.mdx
  66. 8
      packages/grafana-ui/src/components/Modal/Modal.story.tsx
  67. 2
      packages/grafana-ui/src/components/Pagination/Pagination.mdx
  68. 2
      packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx
  69. 2
      packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx
  70. 2
      packages/grafana-ui/src/components/SecretFormField/SecretFormField.internal.story.tsx
  71. 26
      packages/grafana-ui/src/components/Select/Select.story.tsx
  72. 4
      packages/grafana-ui/src/components/Spinner/Spinner.story.tsx
  73. 2
      packages/grafana-ui/src/components/Switch/Switch.mdx
  74. 2
      packages/grafana-ui/src/components/Table/Table.mdx
  75. 6
      packages/grafana-ui/src/components/Tabs/Tabs.story.tsx
  76. 4
      packages/grafana-ui/src/components/Text/Text.mdx
  77. 4
      packages/grafana-ui/src/components/TextArea/TextArea.story.tsx
  78. 6
      packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.story.tsx
  79. 2
      packages/grafana-ui/src/components/UnitPicker/UnitPicker.mdx
  80. 6
      packages/grafana-ui/src/components/UsersIndicator/UserIcon.story.tsx
  81. 8
      packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.story.tsx
  82. 2
      packages/grafana-ui/src/components/ValuePicker/ValuePicker.mdx
  83. 6
      packages/grafana-ui/src/components/VizLayout/VizLayout.story.tsx
  84. 6
      packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx
  85. 4
      packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.internal.story.tsx
  86. 4
      packages/grafana-ui/src/utils/storybook/icons.ts
  87. 5
      packages/grafana-ui/src/utils/storybook/themeStorybookControls.tsx
  88. 10
      packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
  89. 4
      packages/grafana-ui/src/utils/storybook/withTheme.tsx
  90. 4
      packages/grafana-ui/src/utils/useDelayedSwitch.internal.story.tsx
  91. 2
      public/app/plugins/datasource/azuremonitor/package.json
  92. 2
      public/app/plugins/datasource/cloud-monitoring/package.json
  93. 2
      public/app/plugins/datasource/grafana-postgresql-datasource/package.json
  94. 2
      public/app/plugins/datasource/grafana-pyroscope-datasource/package.json
  95. 2
      public/app/plugins/datasource/grafana-testdata-datasource/package.json
  96. 2
      public/app/plugins/datasource/jaeger/package.json
  97. 2
      public/app/plugins/datasource/mysql/package.json
  98. 2
      public/app/plugins/datasource/parca/package.json
  99. 2
      public/app/plugins/datasource/tempo/package.json
  100. 2
      public/app/plugins/datasource/zipkin/package.json
  101. Some files were not shown because too many files have changed in this diff Show More

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -7,9 +7,6 @@ enableTelemetry: false
nodeLinker: node-modules
packageExtensions:
'@storybook/core-common@7.4.5':
dependencies:
'@storybook/react-webpack5': 7.4.5
'croact-css-styled@1.1.9':
dependencies:
croact: 1.0.4

@ -125,7 +125,7 @@
"@types/ol-ext": "npm:@siedlerchr/types-ol-ext@3.2.4",
"@types/pluralize": "^0.0.33",
"@types/prismjs": "1.26.4",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-beautiful-dnd": "13.1.8",
"@types/react-dom": "18.2.25",
"@types/react-grid-layout": "1.3.5",
@ -411,10 +411,10 @@
"debug@npm:^0.7.4": "2.6.9",
"slate-dev-environment@^0.2.2": "patch:slate-dev-environment@npm:0.2.5#.yarn/patches/slate-dev-environment-npm-0.2.5-9aeb7da7b5.patch",
"react-split-pane@0.1.92": "patch:react-split-pane@npm:0.1.92#.yarn/patches/react-split-pane-npm-0.1.92-93dbf51dff.patch",
"@storybook/blocks@7.4.5": "patch:@storybook/blocks@npm%3A7.4.5#./.yarn/patches/@storybook-blocks-npm-7.4.5-5a2374564a.patch",
"history@4.10.1": "patch:history@npm%3A4.10.1#./.yarn/patches/history-npm-4.10.1-ee217563ae.patch",
"history@^4.9.0": "patch:history@npm%3A4.10.1#./.yarn/patches/history-npm-4.10.1-ee217563ae.patch",
"redux": "^5.0.0"
"redux": "^5.0.0",
"@storybook/blocks@npm:8.0.10": "patch:@storybook/blocks@npm%3A8.0.10#~/.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch"
},
"workspaces": {
"packages": [

@ -68,7 +68,7 @@
"@types/lodash": "4.17.1",
"@types/node": "20.12.11",
"@types/papaparse": "5.3.14",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-dom": "18.2.25",
"@types/tinycolor2": "1.4.6",
"esbuild": "0.20.2",

@ -69,7 +69,7 @@
"@types/jest": "^29.5.4",
"@types/lodash": "4.17.1",
"@types/node": "20.12.11",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-virtualized-auto-sizer": "1.0.4",
"@types/tinycolor2": "1.4.6",
"babel-jest": "29.7.0",

@ -46,7 +46,7 @@
"@svgr/plugin-svgo": "^8.1.0",
"@types/babel__core": "^7",
"@types/node": "20.12.11",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-dom": "18.2.25",
"esbuild": "0.20.2",
"prettier": "3.2.5",

@ -37,7 +37,7 @@
"@testing-library/user-event": "14.5.2",
"@types/jest": "^29.5.4",
"@types/node": "20.12.11",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/systemjs": "6.13.5",
"@types/testing-library__jest-dom": "5.14.9",
"jest": "^29.6.4",

@ -95,7 +95,7 @@
"@types/node": "20.12.11",
"@types/pluralize": "^0.0.33",
"@types/prismjs": "1.26.4",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-beautiful-dnd": "13.1.8",
"@types/react-dom": "18.2.25",
"@types/react-highlight-words": "0.16.7",

@ -58,7 +58,7 @@
"@types/history": "4.7.11",
"@types/jest": "29.5.12",
"@types/lodash": "4.17.1",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-dom": "18.2.25",
"@types/systemjs": "6.13.5",
"esbuild": "0.20.2",

@ -43,7 +43,7 @@
"@types/jest": "^29.5.4",
"@types/lodash": "4.17.1",
"@types/node": "20.12.11",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-dom": "18.2.25",
"@types/react-virtualized-auto-sizer": "1.0.4",
"@types/systemjs": "6.13.5",

@ -1,4 +1,4 @@
import path from 'path';
import path, { dirname, join } from 'path';
import type { StorybookConfig } from '@storybook/react-webpack5';
// avoid importing from @grafana/data to prevent node error: ERR_REQUIRE_ESM
import { availableIconsIndex, IconName } from '../../grafana-data/src/types/icon';
@ -33,7 +33,7 @@ const mainConfig: StorybookConfig = {
backgrounds: false,
},
},
'@storybook/addon-a11y',
getAbsolutePath('@storybook/addon-a11y'),
{
name: '@storybook/preset-scss',
options: {
@ -47,27 +47,17 @@ const mainConfig: StorybookConfig = {
},
},
},
'@storybook/addon-storysource',
'storybook-dark-mode',
{
// replace babel-loader in manager and preview with esbuild-loader
name: 'storybook-addon-turbo-build',
options: {
optimizationLevel: 3,
// Target must match storybook 7 manager otherwise minimised docs error in production
esbuildMinifyOptions: {
target: 'chrome100',
minify: true,
},
},
},
getAbsolutePath('@storybook/addon-storysource'),
getAbsolutePath('storybook-dark-mode'),
getAbsolutePath('@storybook/addon-mdx-gfm'),
getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
],
core: {},
docs: {
autodocs: true,
},
framework: {
name: '@storybook/react-webpack5',
name: getAbsolutePath('@storybook/react-webpack5'),
options: {
fastRefresh: true,
builder: {
@ -130,3 +120,7 @@ const mainConfig: StorybookConfig = {
},
};
module.exports = mainConfig;
function getAbsolutePath(value: string): any {
return dirname(require.resolve(join(value, 'package.json')));
}

@ -112,21 +112,22 @@
"@babel/core": "7.24.5",
"@grafana/tsconfig": "^1.3.0-rc1",
"@rollup/plugin-node-resolve": "15.2.3",
"@storybook/addon-a11y": "7.4.5",
"@storybook/addon-actions": "7.4.5",
"@storybook/addon-docs": "7.4.5",
"@storybook/addon-essentials": "7.4.5",
"@storybook/addon-storysource": "7.4.5",
"@storybook/api": "7.4.5",
"@storybook/blocks": "7.4.5",
"@storybook/client-api": "7.4.5",
"@storybook/components": "7.4.5",
"@storybook/core-events": "7.4.5",
"@storybook/addon-a11y": "^8.0.10",
"@storybook/addon-actions": "^8.0.10",
"@storybook/addon-docs": "^8.0.10",
"@storybook/addon-essentials": "^8.0.10",
"@storybook/addon-mdx-gfm": "^8.0.10",
"@storybook/addon-storysource": "^8.0.10",
"@storybook/addon-webpack5-compiler-swc": "^1.0.2",
"@storybook/blocks": "patch:@storybook/blocks@npm%3A8.0.10#~/.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch",
"@storybook/components": "^8.0.10",
"@storybook/core-events": "^8.0.10",
"@storybook/mdx2-csf": "1.1.0",
"@storybook/preset-scss": "1.0.3",
"@storybook/react": "7.4.5",
"@storybook/react-webpack5": "7.4.5",
"@storybook/theming": "7.4.5",
"@storybook/preview-api": "^8.0.10",
"@storybook/react": "^8.0.10",
"@storybook/react-webpack5": "^8.0.10",
"@storybook/theming": "^8.0.10",
"@testing-library/dom": "10.0.0",
"@testing-library/jest-dom": "6.4.2",
"@testing-library/react": "15.0.2",
@ -141,7 +142,7 @@
"@types/mock-raf": "1.0.6",
"@types/node": "20.12.11",
"@types/prismjs": "1.26.4",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-beautiful-dnd": "13.1.8",
"@types/react-color": "3.0.12",
"@types/react-dom": "18.2.25",
@ -177,9 +178,8 @@
"rollup-plugin-node-externals": "^5.0.0",
"rollup-plugin-svg-import": "1.6.0",
"sass-loader": "14.2.1",
"storybook": "7.4.5",
"storybook-addon-turbo-build": "2.0.1",
"storybook-dark-mode": "3.0.1",
"storybook": "^8.0.10",
"storybook-dark-mode": "^4.0.1",
"style-loader": "4.0.0",
"typescript": "5.4.5",
"webpack": "5.91.0"

@ -1,4 +1,4 @@
import { Props, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
import { Preview, ArgTypes } from '@storybook/blocks';
import { AutoSaveField } from './AutoSaveField';
import { Basic } from './AutoSaveField.story.tsx';
@ -267,7 +267,7 @@ _**What can be expected from the request?**_
## <a name="propstable"/>Props table
<ArgsTable of={AutoSaveField} />
<ArgTypes of={AutoSaveField} />
## <a name="related"/>Related

@ -1,4 +1,4 @@
import { Story, Meta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React, { useState } from 'react';
import { Checkbox } from '../Forms/Checkbox';
@ -72,7 +72,7 @@ const themeOptions = [
{ value: 'system', label: 'System' },
];
export const Basic: Story = (args) => {
export const Basic: StoryFn = (args) => {
const [inputValue, setInputValue] = useState('');
return (
<AutoSaveField onFinishChange={args.inputSuccessful ? getSuccess : getError} {...args}>
@ -96,7 +96,7 @@ Basic.args = {
inputSuccessful: false,
};
export const AllComponents: Story = (args) => {
export const AllComponents: StoryFn = (args) => {
const [selected, setSelected] = useState('');
const [checkBoxTest, setCheckBoxTest] = useState(false);
const [textAreaValue, setTextAreaValue] = useState('');

@ -14,7 +14,13 @@ const meta: Meta<typeof Badge> = {
docs: { page: mdx },
},
argTypes: {
icon: { options: iconOptions, control: { type: 'select' } },
icon: {
options: Object.keys(iconOptions),
control: {
type: 'select',
labels: iconOptions,
},
},
color: { control: 'select' },
text: { control: 'text' },
},

@ -34,7 +34,6 @@ const value = {
numeric: value,
};
//...
<BarGauge
value={70}
field={field.config}

@ -1,4 +1,4 @@
import { Story, Meta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
@ -110,14 +110,14 @@ const AddBarGaugeStory = (storyProps: StoryProps) => {
return <BarGauge {...props} />;
};
export const barGaugeVertical: Story<StoryProps> = AddBarGaugeStory.bind({});
export const barGaugeVertical: StoryFn<StoryProps> = AddBarGaugeStory.bind({});
barGaugeVertical.args = {
height: 500,
width: 100,
orientation: VizOrientation.Vertical,
};
export const barGaugeHorizontal: Story<StoryProps> = AddBarGaugeStory.bind({});
export const barGaugeHorizontal: StoryFn<StoryProps> = AddBarGaugeStory.bind({});
barGaugeHorizontal.args = {
height: 100,
width: 500,

@ -1,4 +1,4 @@
import { Story, Meta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { FieldSparkline, FieldType } from '@grafana/data';
@ -57,7 +57,7 @@ interface StoryProps extends Partial<Props> {
valueText: string;
}
export const ApplyNoValue: Story<StoryProps> = ({
export const ApplyNoValue: StoryFn<StoryProps> = ({
valueText,
title,
colorMode,
@ -101,7 +101,7 @@ export const ApplyNoValue: Story<StoryProps> = ({
);
};
export const Basic: Story<StoryProps> = ({
export const Basic: StoryFn<StoryProps> = ({
valueText,
title,
colorMode,

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { Story, Meta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { Button } from '../Button/Button';
@ -25,7 +25,7 @@ interface StoryProps extends Partial<CallToActionCardProps> {
buttonText: string;
}
export const Basic: Story<StoryProps> = (args) => {
export const Basic: StoryFn<StoryProps> = (args) => {
const ctaElements: { [key: string]: JSX.Element } = {
custom: <h1>{args.H1Text}</h1>,
button: (

@ -1,4 +1,4 @@
import { Story, Meta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { Field } from '../Forms/Field';
@ -25,7 +25,7 @@ interface StoryProps extends Partial<Props> {
buttonText: string;
}
export const ClipboardButton: Story<StoryProps> = (args) => {
export const ClipboardButton: StoryFn<StoryProps> = (args) => {
const shareUrl = 'https://grafana.com/d/abcDEF-34t';
return (
@ -35,7 +35,7 @@ export const ClipboardButton: Story<StoryProps> = (args) => {
);
};
export const AsInputFieldAddon: Story<StoryProps> = (args) => {
export const AsInputFieldAddon: StoryFn<StoryProps> = (args) => {
const shareUrl = 'https://grafana.com/d/abcDEF-34t';
return (

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,4 +1,4 @@
import { Meta, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Collapse } from './Collapse';
# Collapse

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React, { useState } from 'react';

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { Meta, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { ConfirmButton } from '@grafana/ui';
@ -48,7 +48,7 @@ interface StoryProps extends Partial<Props> {
buttonText: string;
}
export const Basic: Story<StoryProps> = (args) => {
export const Basic: StoryFn<StoryProps> = (args) => {
return (
<ConfirmButton
closeOnConfirm={args.closeOnConfirm}
@ -65,7 +65,7 @@ export const Basic: Story<StoryProps> = (args) => {
);
};
export const WithCustomButton: Story<StoryProps> = (args) => {
export const WithCustomButton: StoryFn<StoryProps> = (args) => {
return (
<ConfirmButton
closeOnConfirm={args.closeOnConfirm}
@ -84,7 +84,7 @@ export const WithCustomButton: Story<StoryProps> = (args) => {
);
};
export const Delete: Story<StoryProps> = (args) => {
export const Delete: StoryFn<StoryProps> = (args) => {
return (
<DeleteButton
size={args.size}

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { ConfirmModal } from './ConfirmModal';
<Meta title="MDX|ConfirmModal" component={ConfirmModal} />

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,4 +1,4 @@
import { Story, Preview, ArgTypes } from '@storybook/blocks';
import { ArgTypes } from '@storybook/blocks';
import { TimeRangeInput } from './TimeRangeInput';
# TimeRangeInput

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,4 +1,4 @@
import { Story, Preview, ArgTypes } from '@storybook/blocks';
import { ArgTypes } from '@storybook/blocks';
import { FileDropzone } from './FileDropzone';
# FileDropzone

@ -1,4 +1,4 @@
import { Story, Preview, ArgTypes } from '@storybook/blocks';
import { ArgTypes } from '@storybook/blocks';
import { FileListItem } from './FileListItem';
# FileListItem

@ -1,4 +1,4 @@
import { Meta, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { FileListItem as FileListItemComponent, FileListItemProps } from './FileListItem';
@ -22,7 +22,7 @@ const meta: Meta = {
},
};
export const FileListItem: Story<FileListItemProps> = (args) => {
export const FileListItem: StoryFn<FileListItemProps> = (args) => {
return <FileListItemComponent {...args} />;
};

@ -1,4 +1,4 @@
import { Story, Preview, ArgTypes } from '@storybook/blocks';
import { ArgTypes } from '@storybook/blocks';
import { FileUpload } from './FileUpload';
# FileUpload

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Checkbox } from './Checkbox';
<Meta title="MDX|Checkbox" component={Checkbox} />

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Field } from './Field';
<Meta title="MDX|Field" component={Field} />

@ -1,4 +1,4 @@
import { Meta, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { FieldValues } from 'react-hook-form';
@ -29,7 +29,7 @@ const meta: Meta = {
export default meta;
export const Simple: Story = (args) => {
export const Simple: StoryFn = (args) => {
const defaultValues: FieldValues = {
people: [{ firstName: 'Janis', lastName: 'Joplin' }],
};

@ -1,4 +1,4 @@
import { Story, Preview, ArgTypes } from '@storybook/blocks';
import { ArgTypes } from '@storybook/blocks';
import { FieldSet } from './FieldSet';
# FieldSet

@ -1,4 +1,4 @@
import { Story } from '@storybook/react';
import { StoryFn } from '@storybook/react';
import React from 'react';
import { ValidateResult } from 'react-hook-form';
@ -145,7 +145,7 @@ export const DefaultValues = () => {
return <>{renderForm(defaultValues[0])}</>;
};
export const AsyncValidation: Story = ({ passAsyncValidation }) => {
export const AsyncValidation: StoryFn = ({ passAsyncValidation }) => {
return (
<>
<Form

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Label } from './Label';
<Meta title="MDX|Label" component={Label} />

@ -1,4 +1,4 @@
import { Meta, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import { zip, fromPairs } from 'lodash';
import React, { useState } from 'react';
@ -25,7 +25,7 @@ const meta: Meta = {
},
};
const Wrapper: Story = (args) => {
const Wrapper: StoryFn = (args) => {
const [value, setValue] = useState('');
const validations = {
[args.validationEvents]: [

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React, { useCallback } from 'react';

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Legend } from './Legend';
<Meta title="MDX|Legend" component={Legend} />

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { RadioButtonGroup } from './RadioButtonGroup';
<Meta title="MDX|RadioButtonGroup" component={RadioButtonGroup} />

@ -1,4 +1,4 @@
import { Meta, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useState } from 'react';
import { RadioButtonGroup } from './RadioButtonGroup';
@ -25,7 +25,7 @@ const meta: Meta = {
},
};
export const RadioButtons: Story = (args) => {
export const RadioButtons: StoryFn = (args) => {
const [selected, setSelected] = useState('elastic');
const options = [

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { RadioButtonList } from './RadioButtonList';
<Meta title="MDX|RadioButtonList" component={RadioButtonList} />

@ -1,4 +1,4 @@
import { Meta, StoryFn, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useState } from 'react';
import { SelectableValue } from '@grafana/data';
@ -93,7 +93,7 @@ export const WithDescriptions: StoryFn<typeof RadioButtonList> = ({ disabled, di
</div>
);
export const ControlledComponent: Story<RadioButtonListProps<string>> = ({ disabled, disabledOptions }) => {
export const ControlledComponent: StoryFn<RadioButtonListProps<string>> = ({ disabled, disabledOptions }) => {
const [selected, setSelected] = useState<string>(defaultOptions[0].value!);
return (
@ -126,7 +126,7 @@ DisabledList.args = {
disabled: true,
};
export const Dots: Story = () => {
export const Dots: StoryFn = () => {
const Wrapper = ({ title, children }: React.PropsWithChildren<{ title: string }>) => (
<div style={{ marginBottom: 20 }}>
<h5>{title}</h5>

@ -1,4 +1,4 @@
import { Meta, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useState } from 'react';
import { ClipboardButton } from '../ClipboardButton/ClipboardButton';
@ -27,7 +27,7 @@ const story: Meta = {
export default story;
export const InlineToast: Story<InlineToastProps> = (args) => {
export const InlineToast: StoryFn<InlineToastProps> = (args) => {
const [el, setEl] = useState<null | HTMLInputElement>(null);
return (
@ -44,7 +44,7 @@ InlineToast.args = {
suffixIcon: 'check',
};
export const WithAButton: Story<InlineToastProps> = () => {
export const WithAButton: StoryFn<InlineToastProps> = () => {
return (
<ClipboardButton icon="copy" getText={() => 'hello world'}>
Copy surprise

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { InlineToast } from './InlineToast';
<Meta title="MDX|InlineToast" component={InlineToast} />

@ -9,7 +9,7 @@ You can use it or regular text input. When used, AutoSizeInput resizes itself to
## Prefix and suffix
To add more context to the input, you can add either text or an icon before or after the input using the `prefix` and `suffix`. Here are some examples for you to try in the canvas!
To add more context to the input, you can add either text or an icon before or after the input using the `prefix` and `suffix`. Here are some examples for you to try in the Preview!
```jsx
<AutoSizeInput prefix={<Icon name="search" />} />

@ -1,4 +1,4 @@
import { Story, Meta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { Button, AutoSizeInput } from '@grafana/ui';
@ -10,11 +10,11 @@ import { parseAccessory } from './storyUtils';
const icons: { [key: string]: string | undefined } = { ...iconOptions };
Object.keys(icons).forEach((key) => {
icons[key] = `icon-${icons[key]}`;
icons[`icon-${key}`] = icons[key];
});
const prefixSuffixOpts = {
Text: '$',
$: 'Text',
...icons,
};
@ -41,26 +41,28 @@ const meta: Meta = {
prefixVisible: {
control: {
type: 'select',
options: prefixSuffixOpts,
labels: prefixSuffixOpts,
},
options: Object.keys(prefixSuffixOpts),
},
suffixVisible: {
control: {
type: 'select',
options: prefixSuffixOpts,
labels: prefixSuffixOpts,
},
options: Object.keys(prefixSuffixOpts),
},
type: {
control: {
type: 'select',
options: ['text', 'number', 'password'],
},
options: ['text', 'number', 'password'],
},
minWidth: { control: { type: 'range', min: 10, max: 200, step: 10 } },
},
};
export const Simple: Story = (args) => {
export const Simple: StoryFn = (args) => {
const addonAfter = <Button variant="secondary">Load</Button>;
const addonBefore = <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>AutoSizeInput</div>;
const prefix = parseAccessory(args.prefixVisible);

@ -9,7 +9,7 @@ Used for regular text input. For an array of data or tree-structured data, consi
## Prefix and suffix
To add more context to the input you can add either text or an icon before or after the input. You can use the `prefix` and `suffix` props for this. Try some examples in the canvas!
To add more context to the input you can add either text or an icon before or after the input. You can use the `prefix` and `suffix` props for this. Try some examples in the Preview!
```jsx
<Input prefix={<Icon name="search" />} />

@ -1,4 +1,4 @@
import { Story, Meta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React, { useState } from 'react';
import { KeyValue } from '@grafana/data';
@ -63,7 +63,7 @@ const meta: Meta = {
},
};
export const Simple: Story = (args) => {
export const Simple: StoryFn = (args) => {
const addonAfter = <Button variant="secondary">Load</Button>;
const addonBefore = <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>Input</div>;
const prefix = parseAccessory(args.prefixVisible);
@ -91,7 +91,7 @@ Simple.args = {
placeholder: 'Enter your name here...',
};
export const WithFieldValidation: Story = (args) => {
export const WithFieldValidation: StoryFn = (args) => {
const [value, setValue] = useState('');
return (

@ -1,4 +1,4 @@
import { Story, Meta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { Button, VerticalGroup, HorizontalGroup } from '@grafana/ui';
@ -60,7 +60,7 @@ const meta: Meta = {
export default meta;
export const Horizontal: Story<LayoutProps> = (args) => {
export const Horizontal: StoryFn<LayoutProps> = (args) => {
return (
<HorizontalGroup {...args}>
<Button>Save</Button>
@ -69,7 +69,7 @@ export const Horizontal: Story<LayoutProps> = (args) => {
);
};
export const Vertical: Story<LayoutProps> = (args) => {
export const Vertical: StoryFn<LayoutProps> = (args) => {
return (
<VerticalGroup {...args}>
<Button>Save</Button>

@ -1,4 +1,4 @@
import { Meta, Props, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
import { Meta, Preview, ArgTypes } from '@storybook/blocks';
import { TextLink } from './TextLink';
import { Basic } from './TextLink.story.tsx';
@ -143,7 +143,7 @@ Both, **external** and **internal** links can show a specific icon using the `ic
## <a name="propstable"/>Props table
<ArgsTable of={TextLink} />
<ArgTypes of={TextLink} />
## <a name="related"/>Related

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import { Story, Meta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import tinycolor from 'tinycolor2';
@ -69,7 +69,7 @@ const getItem = (inline = false) => {
};
};
export const basic: Story = (args) => {
export const basic: StoryFn = (args) => {
const { rawRenderer, customRenderer } = getItem();
return (
<List
@ -79,7 +79,7 @@ export const basic: Story = (args) => {
);
};
export const inline: Story = (args) => {
export const inline: StoryFn = (args) => {
const { rawRenderer, customRenderer } = getItem(true);
return (
<InlineList

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Modal } from './Modal';
import { ModalTabsHeader } from './ModalTabsHeader';

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import { Story, Meta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import { oneLineTrim } from 'common-tags';
import React, { useState } from 'react';
@ -46,7 +46,7 @@ const meta: Meta = {
},
};
export const Basic: Story = ({ body, title, ...args }) => {
export const Basic: StoryFn = ({ body, title, ...args }) => {
return (
<Modal title={title} {...args}>
{body}
@ -73,7 +73,7 @@ const tabs = [
{ label: '3rd child', value: 'third', active: false },
];
export const WithTabs: Story = (args) => {
export const WithTabs: StoryFn = (args) => {
const [activeTab, setActiveTab] = useState('first');
const modalHeader = (
<ModalTabsHeader
@ -103,7 +103,7 @@ WithTabs.args = {
icon: 'cog',
};
export const UsingContentClassName: Story = ({ title, body, ...args }) => {
export const UsingContentClassName: StoryFn = ({ title, body, ...args }) => {
const override = {
modalContent: css({
backgroundColor: 'darkorange',

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Pagination } from './Pagination';
<Meta title="MDX|Pagination" component={Pagination} />

@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import { Meta, Preview } from '@storybook/addon-docs/blocks';
import { Meta, Preview } from '@storybook/blocks';
import { PanelChrome } from './PanelChrome';
import { action } from '@storybook/addon-actions';

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { useArgs } from '@storybook/preview-api';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';

@ -1,6 +1,6 @@
import { auto } from '@popperjs/core';
import { action } from '@storybook/addon-actions';
import { Meta, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useState } from 'react';
import { SelectableValue, toIconName } from '@grafana/data';
@ -88,7 +88,7 @@ interface StoryProps extends Partial<SelectCommonProps<string>> {
icon: string;
}
export const Basic: Story<StoryProps> = (args) => {
export const Basic: StoryFn<StoryProps> = (args) => {
const [value, setValue] = useState<SelectableValue<string>>();
return (
@ -106,7 +106,7 @@ export const Basic: Story<StoryProps> = (args) => {
);
};
export const BasicVirtualizedList: Story<StoryProps> = (args) => {
export const BasicVirtualizedList: StoryFn<StoryProps> = (args) => {
const [value, setValue] = useState<SelectableValue<string>>();
return (
@ -128,7 +128,7 @@ export const BasicVirtualizedList: Story<StoryProps> = (args) => {
/**
* Uses plain values instead of SelectableValue<T>
*/
export const BasicSelectPlainValue: Story<StoryProps> = (args) => {
export const BasicSelectPlainValue: StoryFn<StoryProps> = (args) => {
const [value, setValue] = useState<string>();
return (
<>
@ -149,7 +149,7 @@ export const BasicSelectPlainValue: Story<StoryProps> = (args) => {
/**
* Uses plain values instead of SelectableValue<T>
*/
export const SelectWithOptionDescriptions: Story = (args) => {
export const SelectWithOptionDescriptions: StoryFn = (args) => {
// TODO this is not working with new Select
const [value, setValue] = useState<number>();
@ -183,7 +183,7 @@ export const SelectWithOptionDescriptions: Story = (args) => {
/**
* Uses plain values instead of SelectableValue<T>
*/
export const MultiPlainValue: Story = (args) => {
export const MultiPlainValue: StoryFn = (args) => {
const [value, setValue] = useState<string[]>();
return (
@ -201,7 +201,7 @@ export const MultiPlainValue: Story = (args) => {
);
};
export const MultiSelectWithOptionGroups: Story = (args) => {
export const MultiSelectWithOptionGroups: StoryFn = (args) => {
const [value, setValue] = useState<string[]>();
return (
@ -223,7 +223,7 @@ export const MultiSelectWithOptionGroups: Story = (args) => {
);
};
export const MultiSelectBasic: Story = (args) => {
export const MultiSelectBasic: StoryFn = (args) => {
const [value, setValue] = useState<Array<SelectableValue<string>>>([]);
return (
@ -249,7 +249,7 @@ MultiSelectBasic.args = {
noMultiValueWrap: false,
};
export const MultiSelectAsync: Story = (args) => {
export const MultiSelectAsync: StoryFn = (args) => {
const [value, setValue] = useState<Array<SelectableValue<string>>>();
return (
@ -270,7 +270,7 @@ MultiSelectAsync.args = {
allowCustomValue: false,
};
export const BasicSelectAsync: Story = (args) => {
export const BasicSelectAsync: StoryFn = (args) => {
const [value, setValue] = useState<SelectableValue<string>>();
return (
@ -288,7 +288,7 @@ export const BasicSelectAsync: Story = (args) => {
);
};
export const AutoMenuPlacement: Story = (args) => {
export const AutoMenuPlacement: StoryFn = (args) => {
const [value, setValue] = useState<SelectableValue<string>>();
return (
@ -312,7 +312,7 @@ AutoMenuPlacement.args = {
menuPlacement: auto,
};
export const WidthAuto: Story = (args) => {
export const WidthAuto: StoryFn = (args) => {
const [value, setValue] = useState<SelectableValue<string>>();
return (
@ -334,7 +334,7 @@ export const WidthAuto: Story = (args) => {
);
};
export const CustomValueCreation: Story = (args) => {
export const CustomValueCreation: StoryFn = (args) => {
const [value, setValue] = useState<SelectableValue<string>>();
const [customOptions, setCustomOptions] = useState<Array<SelectableValue<string>>>([]);
const options = generateOptions();

@ -1,4 +1,4 @@
import { Meta, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { Spinner } from '@grafana/ui';
@ -29,7 +29,7 @@ interface StoryProps extends Partial<Props> {
withStyle: boolean;
}
export const Basic: Story<StoryProps> = (args) => {
export const Basic: StoryFn<StoryProps> = (args) => {
return (
<div>
<Spinner

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Switch } from './Switch';
<Meta title="MDX|Switch" component={Switch} />

@ -1,4 +1,4 @@
import { ArgTypes, Preview } from '@storybook/blocks';
import { ArgTypes } from '@storybook/blocks';
import { Table } from './Table';
# Table

@ -1,4 +1,4 @@
import { Meta, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useState } from 'react';
import { TabsBar, Tab, TabContent, Counter as TabCounter } from '@grafana/ui';
@ -23,7 +23,7 @@ const tabs = [
{ label: '3rd child', key: 'third', active: false },
];
export const Simple: Story = () => {
export const Simple: StoryFn = () => {
const [state, updateState] = useState(tabs);
return (
<DashboardStoryCanvas>
@ -49,7 +49,7 @@ export const Simple: Story = () => {
);
};
export const Counter: Story<CounterProps> = (args) => {
export const Counter: StoryFn<CounterProps> = (args) => {
return <TabCounter {...args} />;
};

@ -1,4 +1,4 @@
import { Meta, Props, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
import { Meta, Preview, ArgTypes } from '@storybook/blocks';
import { Text } from './Text';
import { TextLink } from '../Link/TextLink.tsx';
import { Basic } from './Text.story.tsx';
@ -147,4 +147,4 @@ The Text component can be truncated. However, the Text component element rendere
## <a name="propstable"/>Props table
<ArgsTable of={Text} />
<ArgTypes of={Text} />

@ -1,4 +1,4 @@
import { Meta, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { TextArea } from '@grafana/ui';
@ -21,7 +21,7 @@ const meta: Meta = {
},
};
export const Basic: Story = (args) => {
export const Basic: StoryFn = (args) => {
return (
<div style={{ width: args.containerWidth }}>
<TextArea invalid={args.invalid} placeholder={args.placeholder} cols={args.cols} disabled={args.disabled} />

@ -1,4 +1,4 @@
import { Meta, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { EmotionPerfTest } from './EmotionPerfTest';
@ -16,11 +16,11 @@ const meta: Meta = {
},
};
export const ThemeDemo: Story = () => {
export const ThemeDemo: StoryFn = () => {
return <NewThemeDemoComponent />;
};
export const PerfTest: Story = () => {
export const PerfTest: StoryFn = () => {
return <EmotionPerfTest />;
};

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { ArgTypes } from '@storybook/blocks';
import { UnitPicker } from './UnitPicker';
# UnitPicker

@ -1,10 +1,10 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { UserIcon } from './UserIcon';
import mdx from './UserIcon.mdx';
const meta: ComponentMeta<typeof UserIcon> = {
const meta: Meta<typeof UserIcon> = {
title: 'General/UsersIndicator/UserIcon',
component: UserIcon,
argTypes: {},
@ -28,7 +28,7 @@ const meta: ComponentMeta<typeof UserIcon> = {
},
};
export const Basic: ComponentStory<typeof UserIcon> = (args) => {
export const Basic: StoryFn<typeof UserIcon> = (args) => {
const userView = {
user: {
name: 'John Smith',

@ -1,10 +1,10 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { UsersIndicator } from './UsersIndicator';
import mdx from './UsersIndicator.mdx';
const meta: ComponentMeta<typeof UsersIndicator> = {
const meta: Meta<typeof UsersIndicator> = {
title: 'General/UsersIndicator',
component: UsersIndicator,
argTypes: { limit: { control: { type: 'number', min: 1 } } },
@ -27,7 +27,7 @@ const meta: ComponentMeta<typeof UsersIndicator> = {
},
};
export const Basic: ComponentStory<typeof UsersIndicator> = (args) => {
export const Basic: StoryFn<typeof UsersIndicator> = (args) => {
const users = [
{
name: 'John Doe',
@ -50,7 +50,7 @@ Basic.args = {
limit: 4,
};
export const WithManyUsers: ComponentStory<typeof UsersIndicator> = (args) => {
export const WithManyUsers: StoryFn<typeof UsersIndicator> = (args) => {
const users = [
{
name: 'John Doe',

@ -1,4 +1,4 @@
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { ValuePicker } from './ValuePicker';
<Meta title="MDX|Button" component={ValuePicker} />

@ -1,4 +1,4 @@
import { Meta, Story } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useEffect, useState } from 'react';
import { VizLayout } from './VizLayout';
@ -25,7 +25,7 @@ const createArray = (legendItems: number) => {
return newArray;
};
export const BottomLegend: Story = ({ height, width, legendItems }) => {
export const BottomLegend: StoryFn = ({ height, width, legendItems }) => {
const [items, setItems] = useState(createArray(legendItems));
useEffect(() => {
setItems(createArray(legendItems));
@ -55,7 +55,7 @@ BottomLegend.args = {
legendItems: 2,
};
export const RightLegend: Story = ({ height, width, legendItems, legendWidth }) => {
export const RightLegend: StoryFn = ({ height, width, legendItems, legendWidth }) => {
const [items, setItems] = useState(createArray(legendItems));
useEffect(() => {
setItems(createArray(legendItems));

@ -1,4 +1,4 @@
import { Story, Meta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React, { FC, useEffect, useState } from 'react';
import { DisplayValue, GrafanaTheme2 } from '@grafana/data';
@ -73,7 +73,7 @@ const LegendStoryDemo: FC<LegendStoryDemoProps> = ({ displayMode, seriesCount, n
);
};
export const WithNoValues: Story = ({ containerWidth, seriesCount }) => {
export const WithNoValues: StoryFn = ({ containerWidth, seriesCount }) => {
return (
<div style={{ width: containerWidth }}>
<LegendStoryDemo
@ -98,7 +98,7 @@ export const WithNoValues: Story = ({ containerWidth, seriesCount }) => {
);
};
export const WithValues: Story = ({ containerWidth, seriesCount }) => {
export const WithValues: StoryFn = ({ containerWidth, seriesCount }) => {
const stats: DisplayValue[] = [
{
title: 'Min',

@ -1,4 +1,4 @@
import { Story } from '@storybook/react';
import { StoryFn } from '@storybook/react';
import React from 'react';
import { GraphSeriesXY, FieldType, dateTime, FieldColorModeId } from '@grafana/data';
@ -97,7 +97,7 @@ interface StoryProps extends GraphWithLegendProps {
displayMode: string;
}
export const WithLegend: Story<StoryProps> = ({ rightAxisSeries, displayMode, legendDisplayMode, ...args }) => {
export const WithLegend: StoryFn<StoryProps> = ({ rightAxisSeries, displayMode, legendDisplayMode, ...args }) => {
const props: Partial<GraphWithLegendProps> = {
series: series.map((s) => {
if (

@ -1,11 +1,11 @@
import { getAvailableIcons } from '../../types';
export const iconOptions = {
export const iconOptions: Record<string, string | undefined> = {
None: undefined,
...getAvailableIcons().reduce<Record<string, string>>((prev, c) => {
return {
...prev,
[`Icon: ${c}`]: `${c}`,
[`${c}`]: `Icon: ${c}`,
};
}, {}),
};

@ -1 +1,4 @@
export const SpacingTokenControl = { control: 'select', options: [0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10] };
export const SpacingTokenControl = {
control: 'select' as const,
options: [0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10],
};

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css';
import { DecoratorFn } from '@storybook/react';
import { Args, Decorator } from '@storybook/react';
import React from 'react';
interface Props {
@ -43,13 +43,9 @@ const StoryContainer = ({ width, height, showBoundaries, children }: React.Props
);
};
export const withStoryContainer: DecoratorFn = (story, context) => {
export const withStoryContainer: Decorator<Args> = (story, { args }) => {
return (
<StoryContainer
width={context.args.containerWidth}
height={context.args.containerHeight}
showBoundaries={context.args.showBoundaries}
>
<StoryContainer width={args.containerWidth} height={args.containerHeight} showBoundaries={args.showBoundaries}>
{story()}
</StoryContainer>
);

@ -1,4 +1,4 @@
import { DecoratorFn } from '@storybook/react';
import { Decorator } from '@storybook/react';
import React from 'react';
import { useDarkMode } from 'storybook-dark-mode';
@ -51,6 +51,6 @@ export const renderComponentWithTheme = (component: React.ComponentType<any>, pr
};
export const withTheme =
(handleSassThemeChange: SassThemeChangeHandler): DecoratorFn =>
(handleSassThemeChange: SassThemeChangeHandler): Decorator =>
// eslint-disable-next-line react/display-name
(story) => <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>;

@ -1,4 +1,4 @@
import { Story } from '@storybook/react';
import { StoryFn } from '@storybook/react';
import React from 'react';
import { useDelayedSwitch } from './useDelayedSwitch';
@ -7,7 +7,7 @@ export default {
title: 'useDelayedSwitch',
};
export const Basic: Story = ({ value, delay, duration }) => {
export const Basic: StoryFn = ({ value, delay, duration }) => {
const valueDelayed = useDelayedSwitch(value, { delay, duration });
return <div>{valueDelayed ? 'ON' : 'OFF'}</div>;
};

@ -34,7 +34,7 @@
"@types/lodash": "4.17.1",
"@types/node": "20.12.11",
"@types/prismjs": "1.26.4",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-dom": "18.2.25",
"@types/testing-library__jest-dom": "5.14.9",
"react-select-event": "5.5.1",

@ -36,7 +36,7 @@
"@types/lodash": "4.17.1",
"@types/node": "20.12.11",
"@types/prismjs": "1.26.4",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-dom": "18.2.25",
"@types/react-test-renderer": "18.3.0",
"@types/testing-library__jest-dom": "5.14.9",

@ -23,7 +23,7 @@
"@types/jest": "29.5.12",
"@types/lodash": "4.17.1",
"@types/node": "20.12.11",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/testing-library__jest-dom": "5.14.9",
"ts-node": "10.9.2",
"typescript": "5.4.5",

@ -29,7 +29,7 @@
"@types/lodash": "4.17.1",
"@types/node": "20.12.11",
"@types/prismjs": "1.26.4",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-dom": "18.2.25",
"@types/testing-library__jest-dom": "5.14.9",
"css-loader": "7.1.1",

@ -31,7 +31,7 @@
"@types/jest": "29.5.12",
"@types/lodash": "4.17.1",
"@types/node": "20.12.11",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-dom": "18.2.25",
"@types/testing-library__jest-dom": "5.14.9",
"@types/uuid": "9.0.8",

@ -32,7 +32,7 @@
"@types/lodash": "4.17.1",
"@types/logfmt": "^1.2.3",
"@types/node": "20.12.11",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-dom": "18.2.25",
"@types/react-window": "1.8.8",
"@types/uuid": "9.0.8",

@ -23,7 +23,7 @@
"@types/jest": "29.5.12",
"@types/lodash": "4.17.1",
"@types/node": "20.12.11",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/testing-library__jest-dom": "5.14.9",
"ts-node": "10.9.2",
"typescript": "5.4.5",

@ -24,7 +24,7 @@
"@testing-library/user-event": "14.5.2",
"@types/lodash": "4.17.1",
"@types/node": "20.12.11",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-dom": "18.2.25",
"ts-node": "10.9.2",
"typescript": "5.4.5",

@ -48,7 +48,7 @@
"@types/lodash": "4.17.1",
"@types/node": "20.12.11",
"@types/prismjs": "1.26.4",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-dom": "18.2.25",
"@types/semver": "7.5.8",
"@types/uuid": "9.0.8",

@ -26,7 +26,7 @@
"@types/jest": "29.5.12",
"@types/lodash": "4.17.1",
"@types/node": "20.12.11",
"@types/react": "18.2.79",
"@types/react": "18.3.2",
"@types/react-dom": "18.2.25",
"ts-node": "10.9.2",
"typescript": "5.4.5",

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save