IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana UI: Bump to Storybook 8 (#87722)

Browse Source 
* 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>
This commit is contained in:
Jack Westbrook 2024-05-15 15:49:00 +02:00 committed by GitHub
parent 6127dfd322
commit 65b2834420
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
101 changed files with 1848 additions and 3042 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

253
.yarn/patches/@storybook-blocks-npm-7.4.5-5a2374564a.patch
View File

File diff suppressed because one or more lines are too long

142
.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch Normal file
View File

File diff suppressed because one or more lines are too long

3
.yarnrc.yml
View File

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

6
package.json
View File

@ -125,7 +125,7 @@
"@types/ol-ext": "npm:@siedlerchr/types-ol-ext@3.2.4", "@types/ol-ext": "npm:@siedlerchr/types-ol-ext@3.2.4",
"@types/pluralize": "^0.0.33", "@types/pluralize": "^0.0.33",
"@types/prismjs": "1.26.4", "@types/prismjs": "1.26.4",
"@types/react": "18.2.79", "@types/react": "18.3.2",
"@types/react-beautiful-dnd": "13.1.8", "@types/react-beautiful-dnd": "13.1.8",
"@types/react-dom": "18.2.25", "@types/react-dom": "18.2.25",
"@types/react-grid-layout": "1.3.5", "@types/react-grid-layout": "1.3.5",
@ -411,10 +411,10 @@
"debug@npm:^0.7.4": "2.6.9", "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", "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", "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.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", "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": { "workspaces": {
"packages": [ "packages": [

2
packages/grafana-data/package.json
View File

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

2
packages/grafana-flamegraph/package.json
View File

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

2
packages/grafana-icons/package.json
View File

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

2
packages/grafana-o11y-ds-frontend/package.json
View File

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

2
packages/grafana-prometheus/package.json
View File

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

2
packages/grafana-runtime/package.json
View File

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

2
packages/grafana-sql/package.json
View File

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

28
packages/grafana-ui/.storybook/main.ts
View File

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

34
packages/grafana-ui/package.json
View File

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

4
packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.mdx
View File

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

6
packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.story.tsx
View File

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

8
packages/grafana-ui/src/components/Badge/Badge.story.tsx
View File

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

1
packages/grafana-ui/src/components/BarGauge/BarGauge.mdx
View File

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

6
packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx
View File

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

6
packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
View File

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

4
packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.internal.story.tsx
View File

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

6
packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.internal.story.tsx
View File

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

2
packages/grafana-ui/src/components/Collapse/CollapsableSection.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/Collapse/Collapse.mdx
View File

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

2
packages/grafana-ui/src/components/Collapse/Collapse.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/ColorPicker/Palettes.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React, { useState } from 'react'; import React, { useState } from 'react';

8
packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx
View File

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

2
packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.mdx
View File

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

2
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { StoryFn, Meta } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/DateTimePickers/TimeOfDayPicker.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.mdx
View File

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

2
packages/grafana-ui/src/components/DateTimePickers/TimeRangeInput.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/DateTimePickers/WeekStartPicker.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/Dropdown/ButtonSelect.internal.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/FileDropzone/FileDropzone.mdx
View File

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

2
packages/grafana-ui/src/components/FileDropzone/FileListItem.mdx
View File

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

4
packages/grafana-ui/src/components/FileDropzone/FileListItem.story.tsx
View File

@ -1,4 +1,4 @@
import { Meta, Story } from '@storybook/react'; import { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';
import { FileListItem as FileListItemComponent, FileListItemProps } from './FileListItem'; 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} />; return <FileListItemComponent {...args} />;
}; };

2
packages/grafana-ui/src/components/FileUpload/FileUpload.mdx
View File

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

2
packages/grafana-ui/src/components/Forms/Checkbox.mdx
View File

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

2
packages/grafana-ui/src/components/Forms/Field.mdx
View File

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

4
packages/grafana-ui/src/components/Forms/FieldArray.story.tsx
View File

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

2
packages/grafana-ui/src/components/Forms/FieldSet.mdx
View File

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

4
packages/grafana-ui/src/components/Forms/Form.story.tsx
View File

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

2
packages/grafana-ui/src/components/Forms/Label.mdx
View File

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

4
packages/grafana-ui/src/components/Forms/Legacy/Input/Input.internal.story.tsx
View File

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

2
packages/grafana-ui/src/components/Forms/Legacy/Select/Select.internal.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';

2
packages/grafana-ui/src/components/Forms/Legend.mdx
View File

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

2
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.mdx
View File

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

4
packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.story.tsx
View File

@ -1,4 +1,4 @@
import { Meta, Story } from '@storybook/react'; import { Meta, StoryFn } from '@storybook/react';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { RadioButtonGroup } from './RadioButtonGroup'; 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 [selected, setSelected] = useState('elastic');
const options = [ const options = [

2
packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.mdx
View File

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

6
packages/grafana-ui/src/components/Forms/RadioButtonList/RadioButtonList.story.tsx
View File

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

6
packages/grafana-ui/src/components/InlineToast/InlineToast.internal.story.tsx
View File

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

2
packages/grafana-ui/src/components/InlineToast/InlineToast.mdx
View File

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

2
packages/grafana-ui/src/components/Input/AutoSizeInput.mdx
View File

@ -9,7 +9,7 @@ You can use it or regular text input. When used, AutoSizeInput resizes itself to
## Prefix and suffix ## 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 ```jsx
<AutoSizeInput prefix={<Icon name="search" />} /> <AutoSizeInput prefix={<Icon name="search" />} />

16
packages/grafana-ui/src/components/Input/AutoSizeInput.story.tsx
View File

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

2
packages/grafana-ui/src/components/Input/Input.mdx
View File

@ -9,7 +9,7 @@ Used for regular text input. For an array of data or tree-structured data, consi
## Prefix and suffix ## 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 ```jsx
<Input prefix={<Icon name="search" />} /> <Input prefix={<Icon name="search" />} />

6
packages/grafana-ui/src/components/Input/Input.story.tsx
View File

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

6
packages/grafana-ui/src/components/Layout/Layout.story.tsx
View File

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

4
packages/grafana-ui/src/components/Link/TextLink.mdx
View File

@ -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 { TextLink } from './TextLink';
import { Basic } from './TextLink.story.tsx'; 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 ## <a name="propstable"/>Props table
<ArgsTable of={TextLink} /> <ArgTypes of={TextLink} />
## <a name="related"/>Related ## <a name="related"/>Related

6
packages/grafana-ui/src/components/List/List.internal.story.tsx
View File

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { Story, Meta } from '@storybook/react'; import { StoryFn, Meta } from '@storybook/react';
import React from 'react'; import React from 'react';
import tinycolor from 'tinycolor2'; 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(); const { rawRenderer, customRenderer } = getItem();
return ( return (
<List <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); const { rawRenderer, customRenderer } = getItem(true);
return ( return (
<InlineList <InlineList

2
packages/grafana-ui/src/components/Modal/Modal.mdx
View File

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

8
packages/grafana-ui/src/components/Modal/Modal.story.tsx
View File

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

2
packages/grafana-ui/src/components/Pagination/Pagination.mdx
View File

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

2
packages/grafana-ui/src/components/PanelChrome/PanelChrome.mdx
View File

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

2
packages/grafana-ui/src/components/RefreshPicker/RefreshPicker.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

2
packages/grafana-ui/src/components/SecretFormField/SecretFormField.internal.story.tsx
View File

@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions'; 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 { Meta, StoryFn } from '@storybook/react';
import React from 'react'; import React from 'react';

26
packages/grafana-ui/src/components/Select/Select.story.tsx
View File

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

4
packages/grafana-ui/src/components/Spinner/Spinner.story.tsx
View File

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

2
packages/grafana-ui/src/components/Switch/Switch.mdx
View File

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

2
packages/grafana-ui/src/components/Table/Table.mdx
View File

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

6
packages/grafana-ui/src/components/Tabs/Tabs.story.tsx
View File

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

4
packages/grafana-ui/src/components/Text/Text.mdx
View File

@ -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 { Text } from './Text';
import { TextLink } from '../Link/TextLink.tsx'; import { TextLink } from '../Link/TextLink.tsx';
import { Basic } from './Text.story.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 ## <a name="propstable"/>Props table
<ArgsTable of={Text} /> <ArgTypes of={Text} />

4
packages/grafana-ui/src/components/TextArea/TextArea.story.tsx
View File

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

6
packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.story.tsx
View File

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

2
packages/grafana-ui/src/components/UnitPicker/UnitPicker.mdx
View File

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

6
packages/grafana-ui/src/components/UsersIndicator/UserIcon.story.tsx
View File

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

8
packages/grafana-ui/src/components/UsersIndicator/UsersIndicator.story.tsx
View File

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

2
packages/grafana-ui/src/components/ValuePicker/ValuePicker.mdx
View File

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

6
packages/grafana-ui/src/components/VizLayout/VizLayout.story.tsx
View File

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

6
packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx
View File

@ -1,4 +1,4 @@
import { Story, Meta } from '@storybook/react'; import { StoryFn, Meta } from '@storybook/react';
import React, { FC, useEffect, useState } from 'react'; import React, { FC, useEffect, useState } from 'react';
import { DisplayValue, GrafanaTheme2 } from '@grafana/data'; 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 ( return (
<div style={{ width: containerWidth }}> <div style={{ width: containerWidth }}>
<LegendStoryDemo <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[] = [ const stats: DisplayValue[] = [
{ {
title: 'Min', title: 'Min',

4
packages/grafana-ui/src/graveyard/Graph/GraphWithLegend.internal.story.tsx
View File

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

4
packages/grafana-ui/src/utils/storybook/icons.ts
View File

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

5
packages/grafana-ui/src/utils/storybook/themeStorybookControls.tsx
View File

@ -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],
};

10
packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx
View File

@ -1,5 +1,5 @@
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { DecoratorFn } from '@storybook/react'; import { Args, Decorator } from '@storybook/react';
import React from 'react'; import React from 'react';
interface Props { 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 ( return (
<StoryContainer <StoryContainer width={args.containerWidth} height={args.containerHeight} showBoundaries={args.showBoundaries}>
width={context.args.containerWidth}
height={context.args.containerHeight}
showBoundaries={context.args.showBoundaries}
>
{story()} {story()}
</StoryContainer> </StoryContainer>
); );

4
packages/grafana-ui/src/utils/storybook/withTheme.tsx
View File

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

4
packages/grafana-ui/src/utils/useDelayedSwitch.internal.story.tsx
View File

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

2
public/app/plugins/datasource/azuremonitor/package.json
View File

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

2
public/app/plugins/datasource/cloud-monitoring/package.json
View File

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

2
public/app/plugins/datasource/grafana-postgresql-datasource/package.json
View File

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

2
public/app/plugins/datasource/grafana-pyroscope-datasource/package.json
View File

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

2
public/app/plugins/datasource/grafana-testdata-datasource/package.json
View File

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

2
public/app/plugins/datasource/jaeger/package.json
View File

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

2
public/app/plugins/datasource/mysql/package.json
View File

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

2
public/app/plugins/datasource/parca/package.json
View File

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

2
public/app/plugins/datasource/tempo/package.json
View File

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

2
public/app/plugins/datasource/zipkin/package.json
View File

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

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