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

Chore: Upgrade Storybook to v7 (#65943)

Browse Source 
* chore(grafana-ui): begin migration to storybook7

* refactor(storybook): begin cleanup of storybook and addon configs

* chore(storybook): add storybook/blocks to keep yarn berry happy

* chore(storybook): rename intro story for storybook 7

* chore(stories): rename internal stories to support SB7 story name mapper

* chore(betterer): update glob to support internal story renaming

* chore(stories): silence TS errors for subcomponents in SB7

* fix(clickoutsidewrapper): window | document can be undefined not null

* chore(storybook): remove patch for 6.5.16

* revert(storybook): put back story globs

* docs(storybook): replace removed <Props /> with <ArgsTypes /> in mdx files

* docs(storybook): use ArgTypes instead of ArgsTable

* chore(storybook): use correct ArgTypes import name in mdx files

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

* chore(storybook): rename deprecated ComponentStory and ComponentMeta for v7

* feat(storybook): add STORY env var to customise which stories storybook should load

* chore(storybook): bump to 7.0.4

* fix(storybook): set esbuild minify target to fix erroring docs in production builds

* fix(toolbarbuttonrow): fix import path to prevent error in storybook doc

* docs(storybook): fix up some more stories

* chore(storybook): more config updates to match storybook documentation

* chore(storybook): bump to 7.0.5

* Apply suggestions from code review

Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>

* chore(storybook): fix broken merge causing types issues

* chore(storybook): mimic broken alphabetical storySort and docs overview ordering

* docs(storybook): fix button docs adding p tags due to mdx2

* chore(storybook): bump to 7.0.10

* chore(storybook): apply patch on yarn install

* chore(text): update stories for storybook 7

* fix(storybook): make sure globs don't include internal stories in production

---------

Co-authored-by: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
This commit is contained in:
Jack Westbrook
2023-05-11 14:26:12 +02:00
committed by GitHub
parent 704ab1ca9b
commit 33ba5310ab
192 changed files with 3471 additions and 6375 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.betterer.ts
View File

@@ -9,7 +9,7 @@ export default {
countEslintErrors()
.include('**/*.{ts,tsx}')
.exclude(/public\/app\/angular/),
'no undocumented stories': () => countUndocumentedStories().include('**/*.story.tsx'),
'no undocumented stories': () => countUndocumentedStories().include('**/!(*.internal).story.tsx'),
};
function countUndocumentedStories() {

14
.yarn/patches/@storybook-addon-docs-npm-6.5.16-56ecbd77e7.patch
View File

@@ -1,14 +0,0 @@
diff --git a/dist/ts3.9/blocks/DocsContainer.d.ts b/dist/ts3.9/blocks/DocsContainer.d.ts
index be330e44bebb02eaf2c92d365d4e7dc1da452465..6c8b1d42bea2e184456e2757eb2ee20076ba43b3 100644
--- a/dist/ts3.9/blocks/DocsContainer.d.ts
+++ b/dist/ts3.9/blocks/DocsContainer.d.ts
@@ -1,7 +1,8 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
import { AnyFramework } from '@storybook/csf';
import { DocsContextProps } from './DocsContext';
export interface DocsContainerProps<TFramework extends AnyFramework = AnyFramework> {
context: DocsContextProps<TFramework>;
+ children?: ReactNode;
}
export declare const DocsContainer: FunctionComponent<DocsContainerProps>;

20
.yarn/patches/@storybook-blocks-npm-7.0.10-b101e8dcba.patch Normal file
View File

File diff suppressed because one or more lines are too long

28
.yarnrc.yml
View File

@@ -3,33 +3,9 @@ enableTelemetry: false
nodeLinker: pnp
packageExtensions:
'@storybook/addon-docs@6.5.16':
peerDependencies:
'@babel/core': ^7.0.0
'@storybook/manager-webpack5': 6.5.16
'webpack': 5.74.0
'@storybook/addon-essentials@6.5.16':
peerDependencies:
'@storybook/components': 6.5.16
'@storybook/core-events': 6.5.16
'@storybook/manager-webpack5': 6.5.16
'@storybook/theming': 6.5.16
'@storybook/core-server@6.5.16':
peerDependencies:
'@babel/core': ^7.0.0
'@storybook/core@6.5.16':
peerDependencies:
'@babel/core': ^7.0.0
'@storybook/manager-webpack5': 6.5.16
'@storybook/csf-tools@6.5.16':
peerDependencies:
'@babel/core': ^7.0.0
'@storybook/mdx2-csf@0.0.3':
'@storybook/core-common@*':
dependencies:
'@babel/types': ^7.14.8
'@storybook/react@6.5.16':
peerDependencies:
'@storybook/manager-webpack5': 6.5.16
'@storybook/react-webpack5': '*'
doctrine@3.0.0:
dependencies:
assert: 2.0.0

12
package.json
View File

@@ -422,21 +422,11 @@
"@types/slate": "0.47.11",
"@rushstack/rig-package": "0.3.18",
"@rushstack/ts-command-line": "4.13.2",
"@storybook/builder-webpack4/css-loader": "6.7.3",
"@storybook/builder-webpack4/html-webpack-plugin": "5.5.0",
"@storybook/builder-webpack4/webpack": "5.76.0",
"@storybook/core-common/webpack": "5.76.0",
"@storybook/core-server/webpack": "5.76.0",
"@storybook/manager-webpack4/css-loader": "6.7.3",
"@storybook/manager-webpack4/html-webpack-plugin": "5.5.0",
"@storybook/manager-webpack4/webpack": "5.76.0",
"@storybook/builder-webpack5/webpack": "5.76.0",
"@storybook/manager-webpack5/webpack": "5.76.0",
"ngtemplate-loader/loader-utils": "^2.0.0",
"trim": "0.0.3",
"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/addon-docs@6.5.16": "patch:@storybook/addon-docs@npm:6.5.16#.yarn/patches/@storybook-addon-docs-npm-6.5.16-56ecbd77e7.patch"
"@storybook/blocks@7.0.10": "patch:@storybook/blocks@npm%3A7.0.10#./.yarn/patches/@storybook-blocks-npm-7.0.10-b101e8dcba.patch"
},
"workspaces": {
"packages": [

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

@@ -1,14 +1,16 @@
import path from 'path';
import type { StorybookConfig } from '@storybook/react/types';
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';
import { getIconSubDir } from '../src/components/Icon/utils';
const stories = ['../src/**/*.story.@(tsx|mdx)'];
// Internal stories should only be visible during development
const storyGlob =
process.env.NODE_ENV === 'production'
? '../src/components/**/!(*.internal).story.tsx'
: '../src/components/**/*.story.tsx';
if (process.env.NODE_ENV !== 'production') {
stories.push('../src/**/*.story.internal.@(tsx|mdx)');
}
const stories = ['../src/Intro.mdx', storyGlob];
// We limit icon paths to only the available icons so publishing
// doesn't require uploading 1000s of unused assets.
@@ -25,20 +27,10 @@ const iconPaths = Object.keys(availableIconsIndex)
const mainConfig: StorybookConfig = {
stories,
addons: [
{
// work around docs 6.5.x not resolving correctly with yarn PnP
name: path.dirname(require.resolve('@storybook/addon-docs/package.json')),
options: {
configureJSX: true,
babelOptions: {},
},
},
{
name: '@storybook/addon-essentials',
options: {
backgrounds: false,
// work around docs 6.5.x not resolving correctly with yarn PnP
docs: false,
},
},
'@storybook/addon-a11y',
@@ -62,31 +54,49 @@ const mainConfig: StorybookConfig = {
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: {
builder: {
name: 'webpack5',
options: {
core: {},
docs: {
autodocs: true,
},
framework: {
name: '@storybook/react-webpack5',
options: {
fastRefresh: true,
builder: {
fsCache: true,
},
},
},
features: {
previewMdx2: true,
},
framework: '@storybook/react',
logLevel: 'debug',
reactOptions: {
fastRefresh: true,
},
staticDirs: [
{ from: '../../../public/fonts', to: '/public/fonts' },
{ from: '../../../public/img/grafana_text_logo-dark.svg', to: '/public/img/grafana_text_logo-dark.svg' },
{ from: '../../../public/img/grafana_text_logo-light.svg', to: '/public/img/grafana_text_logo-light.svg' },
{ from: '../../../public/img/fav32.png', to: '/public/img/fav32.png' },
{ from: '../../../public/lib', to: '/public/lib' },
{
from: '../../../public/fonts',
to: '/public/fonts',
},
{
from: '../../../public/img/grafana_text_logo-dark.svg',
to: '/public/img/grafana_text_logo-dark.svg',
},
{
from: '../../../public/img/grafana_text_logo-light.svg',
to: '/public/img/grafana_text_logo-light.svg',
},
{
from: '../../../public/img/fav32.png',
to: '/public/img/fav32.png',
},
{
from: '../../../public/lib',
to: '/public/lib',
},
...iconPaths,
],
typescript: {
@@ -119,5 +129,4 @@ const mainConfig: StorybookConfig = {
return config;
},
};
module.exports = mainConfig;

9
packages/grafana-ui/.storybook/manager.ts
View File

@@ -1,9 +1,14 @@
import { addons } from '@storybook/addons';
import { addons } from '@storybook/manager-api';
import { GrafanaDark } from './storybookTheme';
addons.setConfig({
isFullscreen: false,
panelPosition: 'right',
showNav: true,
showPanel: true,
showToolbar: true,
sidebar: {
showRoots: false,
showRoots: true,
},
theme: GrafanaDark,
});

61
packages/grafana-ui/.storybook/preview.ts
View File

@@ -1,4 +1,6 @@
import { Preview } from '@storybook/react';
import 'jquery';
import '../../../public/vendor/flot/jquery.flot.js';
import '../../../public/vendor/flot/jquery.flot.selection';
import '../../../public/vendor/flot/jquery.flot.time';
@@ -8,8 +10,10 @@ import '../../../public/vendor/flot/jquery.flot.fillbelow';
import '../../../public/vendor/flot/jquery.flot.crosshair';
import '../../../public/vendor/flot/jquery.flot.dashes';
import '../../../public/vendor/flot/jquery.flot.gauge';
import { withTheme } from '../src/utils/storybook/withTheme';
import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer';
// @ts-ignore
import lightTheme from './grafana.light.scss';
// @ts-ignore
@@ -26,31 +30,38 @@ const handleThemeChange = (theme: any) => {
}
};
export const decorators = [withTheme(handleThemeChange)];
export const parameters = {
actions: { argTypesRegex: '^on[A-Z].*' },
darkMode: {
dark: GrafanaDark,
light: GrafanaLight,
},
docs: {
container: ThemedDocsContainer,
},
knobs: {
disable: true,
},
layout: 'fullscreen',
options: {
showPanel: true,
panelPosition: 'right',
showNav: true,
isFullscreen: false,
isToolshown: true,
storySort: {
method: 'alphabetical',
// Order Docs Overview and Docs Overview/Intro story first
order: ['Docs Overview', ['Intro']],
const preview: Preview = {
decorators: [withTheme(handleThemeChange)],
parameters: {
actions: { argTypesRegex: '^on[A-Z].*' },
darkMode: {
dark: GrafanaDark,
light: GrafanaLight,
},
docs: {
container: ThemedDocsContainer,
},
knobs: {
disable: true,
},
layout: 'fullscreen',
options: {
// Sort stories first by Docs Overview, then alphabetically
// We should be able to use the builtin alphabetical sort, but is broken in SB 7.0
// https://github.com/storybookjs/storybook/issues/22470
storySort: (a, b) => {
if (a.title.startsWith('Docs Overview')) {
if (b.title.startsWith('Docs Overview')) {
return 0;
}
return -1;
} else if (b.title.startsWith('Docs Overview')) {
return 1;
}
return a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true });
},
},
},
};
export default preview;

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

@@ -35,8 +35,8 @@
"build": "tsc -p ./tsconfig.build.json && rollup -c rollup.config.ts",
"bundle": "rollup -c rollup.config.ts",
"clean": "rimraf ./dist ./compiled ./package.tgz",
"storybook": "start-storybook -p 9001 -c .storybook",
"storybook:build": "build-storybook -o ./dist/storybook -c .storybook",
"storybook": "storybook dev -p 9001 -c .storybook --no-open",
"storybook:build": "storybook build -o ./dist/storybook -c .storybook",
"typecheck": "tsc --emitDeclarationOnly false --noEmit",
"generate-icons-bundle-cache-file": "node ./scripts/generate-icon-bundle.js",
"prepack": "cp package.json package.json.bak && node ../../scripts/prepare-packagejson.js",
@@ -117,22 +117,21 @@
"@grafana/tsconfig": "^1.2.0-rc1",
"@mdx-js/react": "1.6.22",
"@rollup/plugin-node-resolve": "15.0.1",
"@storybook/addon-a11y": "6.5.16",
"@storybook/addon-actions": "6.5.16",
"@storybook/addon-docs": "6.5.16",
"@storybook/addon-essentials": "6.5.16",
"@storybook/addon-storysource": "6.5.16",
"@storybook/addons": "6.5.16",
"@storybook/api": "6.5.16",
"@storybook/builder-webpack5": "6.5.16",
"@storybook/client-api": "6.5.16",
"@storybook/components": "6.5.16",
"@storybook/core-events": "6.5.16",
"@storybook/manager-webpack5": "6.5.16",
"@storybook/mdx2-csf": "0.0.3",
"@storybook/addon-a11y": "7.0.10",
"@storybook/addon-actions": "7.0.10",
"@storybook/addon-docs": "7.0.10",
"@storybook/addon-essentials": "7.0.10",
"@storybook/addon-storysource": "7.0.10",
"@storybook/api": "7.0.10",
"@storybook/blocks": "7.0.10",
"@storybook/client-api": "7.0.10",
"@storybook/components": "7.0.10",
"@storybook/core-events": "7.0.10",
"@storybook/mdx2-csf": "1.0.0",
"@storybook/preset-scss": "1.0.3",
"@storybook/react": "6.5.16",
"@storybook/theming": "6.5.16",
"@storybook/react": "7.0.10",
"@storybook/react-webpack5": "7.0.10",
"@storybook/theming": "7.0.10",
"@testing-library/dom": "9.0.1",
"@testing-library/jest-dom": "5.16.5",
"@testing-library/react": "14.0.0",
@@ -181,8 +180,9 @@
"rollup-plugin-node-externals": "^5.0.0",
"rollup-plugin-svg-import": "^1.6.0",
"sass-loader": "13.2.0",
"storybook": "7.0.10",
"storybook-addon-turbo-build": "1.1.0",
"storybook-dark-mode": "2.1.1",
"storybook-dark-mode": "3.0.0",
"style-loader": "3.3.1",
"typescript": "4.8.4",
"webpack": "5.76.0"

2
packages/grafana-ui/src/Intro.story.mdx → packages/grafana-ui/src/Intro.mdx
View File

@@ -1,4 +1,4 @@
import { Meta } from '@storybook/addon-docs/blocks';
import { Meta } from '@storybook/blocks';
<Meta title="Docs Overview/Intro" parameters={{ options: { isToolshown: false }, id: 1 }} />

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

@@ -1,4 +1,4 @@
import { Meta, Props, ArgsTable } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Alert } from './Alert';
<Meta title="MDX|Alert" component={Alert} />
@@ -155,4 +155,4 @@ appEvents.publish({
</Alert>
```
<ArgsTable of={Alert} />
<ArgTypes of={Alert} />

11
packages/grafana-ui/src/components/Alert/InlineBanner.story.tsx
View File

@@ -1,12 +1,13 @@
import { action } from '@storybook/addon-actions';
import { ComponentStory, Meta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
import { StoryExample } from '../../utils/storybook/StoryExample';
import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from '../Alert/Alert.mdx';
import mdx from './Alert.mdx';
const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
@@ -27,7 +28,7 @@ const meta: Meta = {
},
};
export const Basic: ComponentStory<typeof Alert> = (args) => {
export const Basic: StoryFn<typeof Alert> = (args) => {
return (
<div>
<Alert {...args}>
@@ -44,7 +45,7 @@ Basic.args = {
title: 'Basic',
};
export const WithActions: ComponentStory<typeof Alert> = (args) => {
export const WithActions: StoryFn<typeof Alert> = (args) => {
return (
<Alert {...args}>
<VerticalGroup>
@@ -61,7 +62,7 @@ WithActions.args = {
buttonContent: 'Close',
};
export const Examples: ComponentStory<typeof Alert> = () => {
export const Examples: StoryFn<typeof Alert> = () => {
return (
<VerticalGroup>
<StoryExample name="With buttonContent and children">

9
packages/grafana-ui/src/components/Alert/Toast.story.tsx
View File

@@ -1,16 +1,17 @@
import { action } from '@storybook/addon-actions';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { Alert, AlertVariant, VerticalGroup } from '@grafana/ui';
import { StoryExample } from '../../utils/storybook/StoryExample';
import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from '../Alert/Alert.mdx';
import mdx from './Alert.mdx';
const severities: AlertVariant[] = ['error', 'warning', 'info', 'success'];
const meta: ComponentMeta<typeof Alert> = {
const meta: Meta<typeof Alert> = {
title: 'Overlays/Alert/Toast',
component: Alert,
decorators: [withCenteredStory, withHorizontallyCenteredStory],
@@ -30,7 +31,7 @@ const meta: ComponentMeta<typeof Alert> = {
},
};
export const Basic: ComponentStory<typeof Alert> = (args) => {
export const Basic: StoryFn<typeof Alert> = (args) => {
return (
<div className="page-alert-list">
<Alert {...args} elevated>

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

@@ -1,4 +1,4 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Badge } from './Badge';
<Meta title="MDX|Badge" component={Badge} />
@@ -7,4 +7,4 @@ import { Badge } from './Badge';
The badge component adds meta information to other content, for example about release status or new elements. You can add any `Icon` component or use the badge without an icon.
<Props of={Badge} />
<ArgTypes of={Badge} />

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

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { Badge } from '@grafana/ui';
@@ -8,7 +8,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './Badge.mdx';
const meta: ComponentMeta<typeof Badge> = {
const meta: Meta<typeof Badge> = {
title: 'Data Display/Badge',
component: Badge,
decorators: [withCenteredStory],
@@ -22,7 +22,7 @@ const meta: ComponentMeta<typeof Badge> = {
},
};
const Template: ComponentStory<typeof Badge> = (args) => <Badge {...args} />;
const Template: StoryFn<typeof Badge> = (args) => <Badge {...args} />;
export const Basic = Template.bind({});

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

@@ -1,4 +1,4 @@
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { BarGauge } from './BarGauge';
<Meta title="MDX|BarGauge" component={BarGauge} />
@@ -45,4 +45,4 @@ const value = {
/>;
```
<Props of={BarGauge} />
<ArgTypes of={BarGauge} />

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

@@ -1,4 +1,4 @@
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { BigValue } from './BigValue';
<Meta title="MDX|BigValue" component={BigValue} />
@@ -72,4 +72,4 @@ return (
### Props
<Props of={BigValue} />
<ArgTypes of={BigValue} />

34
packages/grafana-ui/src/components/Button/Button.mdx
View File

@@ -1,4 +1,4 @@
import { Meta, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
import { Meta, Preview, ArgTypes } from '@storybook/blocks';
import { Button, LinkButton } from './Button';
<Meta title="MDX|Button" component={Button} />
@@ -14,13 +14,13 @@ If there is no primary action, all `Button` components should be secondary.
<Preview>
<div>
<Button variant="primary" size="sm" style={{ margin: '5px' }}>
Small
{'Small'}
</Button>
<Button variant="primary" size="md" style={{ margin: '5px' }}>
Medium
{'Medium'}
</Button>
<Button variant="primary" size="lg" style={{ margin: '5px' }}>
Large
{'Large'}
</Button>
</div>
</Preview>
@@ -35,13 +35,13 @@ The secondary `Button` is the default button style and can trigger various actio
<Preview>
<div>
<Button variant="secondary" size="sm" style={{ margin: '5px' }}>
Small
{'Small'}
</Button>
<Button variant="secondary" size="md" style={{ margin: '5px' }}>
Medium
{'Medium'}
</Button>
<Button variant="secondary" size="lg" style={{ margin: '5px' }}>
Large
{'Large'}
</Button>
</div>
</Preview>
@@ -53,13 +53,13 @@ Used for triggering a removing or deleting action. Because of its dominant color
<Preview>
<div>
<Button variant="destructive" size="sm" style={{ margin: '5px' }}>
Small
{'Small'}
</Button>
<Button variant="destructive" size="md" style={{ margin: '5px' }}>
Medium
{'Medium'}
</Button>
<Button variant="destructive" size="lg" style={{ margin: '5px' }}>
Large
{'Large'}
</Button>
</div>
</Preview>
@@ -69,18 +69,18 @@ Used for triggering a removing or deleting action. Because of its dominant color
<Preview>
<div>
<Button fill="text" size="sm" style={{ margin: '5px' }}>
Small
{'Small'}
</Button>
<Button fill="text" size="md" style={{ margin: '5px' }}>
Medium
{'Medium'}
</Button>
<Button fill="text" size="lg" style={{ margin: '5px' }}>
Large
{'Large'}
</Button>
</div>
</Preview>
<ArgsTable of={Button} />
<ArgTypes of={Button} />
## Links
@@ -89,13 +89,13 @@ To add an anchor that looks like a button use the `<LinkButton>` component and p
<Preview>
<div>
<LinkButton href="/" size="sm" style={{ margin: '5px' }}>
Small
{'Small'}
</LinkButton>
<LinkButton href="/" size="md" style={{ margin: '5px' }}>
Medium
{'Medium'}
</LinkButton>
<LinkButton href="/" size="lg" style={{ margin: '5px' }}>
Large
{'Large'}
</LinkButton>
</div>
</Preview>

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

@@ -1,4 +1,4 @@
import { ComponentStory } from '@storybook/react';
import { StoryFn } from '@storybook/react';
import React from 'react';
import { ComponentSize } from '../../types/size';
@@ -36,7 +36,7 @@ export default {
},
};
export const Examples: ComponentStory<typeof Button> = () => {
export const Examples: StoryFn<typeof Button> = () => {
return (
<VerticalGroup>
{allButtonFills.map((buttonFill) => (
@@ -104,7 +104,7 @@ export const Examples: ComponentStory<typeof Button> = () => {
);
};
export const Basic: ComponentStory<typeof Button> = (args: ButtonProps) => <Button {...args} />;
export const Basic: StoryFn<typeof Button> = (args: ButtonProps) => <Button {...args} />;
Basic.args = {
children: 'Example button',

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

@@ -1,11 +1,11 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { ButtonCascader } from '@grafana/ui';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
const meta: ComponentMeta<typeof ButtonCascader> = {
const meta: Meta<typeof ButtonCascader> = {
title: 'Forms/Cascader/ButtonCascader',
component: ButtonCascader,
decorators: [withCenteredStory],
@@ -35,7 +35,7 @@ const meta: ComponentMeta<typeof ButtonCascader> = {
},
};
const Template: ComponentStory<typeof ButtonCascader> = ({ children, ...args }) => {
const Template: StoryFn<typeof ButtonCascader> = ({ children, ...args }) => {
return <ButtonCascader {...args}>{children}</ButtonCascader>;
};

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

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

@@ -1,4 +1,4 @@
import { Meta, Preview, Props } from '@storybook/addon-docs/blocks';
import { Meta, Preview, ArgTypes } from '@storybook/blocks';
import { Card } from './Card';
import { Button } from '../Button';
import { IconButton } from '../IconButton/IconButton';
@@ -447,4 +447,4 @@ Card can have a disabled state, effectively making it and its actions non-clicka
### Props
<Props of={Card} />
<ArgTypes of={Card} />

20
packages/grafana-ui/src/components/Card/Card.story.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -12,7 +12,7 @@ import mdx from './Card.mdx';
const logo = 'https://grafana.com/static/assets/img/apple-touch-icon.png';
const meta: ComponentMeta<typeof Card> = {
const meta: Meta<typeof Card> = {
title: 'General/Card',
component: Card,
decorators: [withCenteredStory],
@@ -26,7 +26,7 @@ const meta: ComponentMeta<typeof Card> = {
},
};
export const Basic: ComponentStory<typeof Card> = ({ disabled }) => {
export const Basic: StoryFn<typeof Card> = ({ disabled }) => {
return (
<Card disabled={disabled}>
<Card.Heading>Filter by name</Card.Heading>
@@ -38,7 +38,7 @@ export const Basic: ComponentStory<typeof Card> = ({ disabled }) => {
);
};
export const AsLink: ComponentStory<typeof Card> = ({ disabled }) => {
export const AsLink: StoryFn<typeof Card> = ({ disabled }) => {
return (
<VerticalGroup>
<Card href="https://grafana.com" disabled={disabled}>
@@ -63,7 +63,7 @@ export const AsLink: ComponentStory<typeof Card> = ({ disabled }) => {
);
};
export const WithTags: ComponentStory<typeof Card> = ({ disabled }) => {
export const WithTags: StoryFn<typeof Card> = ({ disabled }) => {
return (
<Card disabled={disabled}>
<Card.Heading>Elasticsearch – Custom Templated Query</Card.Heading>
@@ -75,7 +75,7 @@ export const WithTags: ComponentStory<typeof Card> = ({ disabled }) => {
);
};
export const WithMedia: ComponentStory<typeof Card> = ({ disabled }) => {
export const WithMedia: StoryFn<typeof Card> = ({ disabled }) => {
return (
<Card disabled={disabled}>
<Card.Heading>1-ops-tools1-fallback</Card.Heading>
@@ -91,7 +91,7 @@ export const WithMedia: ComponentStory<typeof Card> = ({ disabled }) => {
</Card>
);
};
export const WithActions: ComponentStory<typeof Card> = ({ disabled }) => {
export const WithActions: StoryFn<typeof Card> = ({ disabled }) => {
return (
<Card disabled={disabled}>
<Card.Heading>1-ops-tools1-fallback</Card.Heading>
@@ -120,7 +120,7 @@ export const WithActions: ComponentStory<typeof Card> = ({ disabled }) => {
);
};
export const Full: ComponentStory<typeof Card> = ({ disabled }) => {
export const Full: StoryFn<typeof Card> = ({ disabled }) => {
return (
<Card disabled={disabled}>
<Card.Heading>Card title</Card.Heading>
@@ -157,7 +157,7 @@ export const Full: ComponentStory<typeof Card> = ({ disabled }) => {
);
};
export const Selected: ComponentStory<typeof Card> = () => {
export const Selected: StoryFn<typeof Card> = () => {
return (
<Card isSelected>
<Card.Heading>Spaces</Card.Heading>
@@ -169,7 +169,7 @@ export const Selected: ComponentStory<typeof Card> = () => {
);
};
export const NotSelected: ComponentStory<typeof Card> = () => {
export const NotSelected: StoryFn<typeof Card> = () => {
return (
<Card isSelected={false}>
<Card.Heading>Tabs</Card.Heading>

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

@@ -1,4 +1,4 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Cascader } from './Cascader';
<Meta title="MDX|Cascader" component={Cascader} />
@@ -9,4 +9,4 @@ The cascader component is a `Select` with a cascading flyout menu. When you have
You can either use the `Simple` cascader component for an empty input as default state or use the `initialValue` or `allowCustomValue` fields to pre-fill your cascader. Initial value means that one of the options from your cascaded list is pre-selected. Custom value means that apart from existing options from the list, your users can add custom values to the list by typing them in the `Select` input.
<Props of={Cascader} />
<ArgTypes of={Cascader} />

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

@@ -1,4 +1,4 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { Cascader } from '@grafana/ui';
@@ -34,7 +34,7 @@ const options = [
},
];
const meta: ComponentMeta<typeof Cascader> = {
const meta: Meta<typeof Cascader> = {
title: 'Forms/Cascader',
component: Cascader,
decorators: [withCenteredStory],
@@ -64,7 +64,7 @@ const meta: ComponentMeta<typeof Cascader> = {
},
};
const Template: ComponentStory<typeof Cascader> = (args) => <Cascader {...args} />;
const Template: StoryFn<typeof Cascader> = (args) => <Cascader {...args} />;
export const Simple = Template.bind({});
Simple.args = {

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

@@ -1,4 +1,4 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { ClickOutsideWrapper } from './ClickOutsideWrapper';
<Meta title="MDX|ClickOutsideWrapper" component={ClickOutsideWrapper} />
@@ -16,4 +16,4 @@ Useful for components that require an action being triggered when a click outsid
</ClickOutsideWrapper>
```
<Props of={ClickOutsideWrapper} />
<ArgTypes of={ClickOutsideWrapper} />

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

@@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { ComponentMeta } from '@storybook/react';
import { Meta } from '@storybook/react';
import React from 'react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -7,7 +7,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { ClickOutsideWrapper } from './ClickOutsideWrapper';
import mdx from './ClickOutsideWrapper.mdx';
const meta: ComponentMeta<typeof ClickOutsideWrapper> = {
const meta: Meta<typeof ClickOutsideWrapper> = {
title: 'Layout/ClickOutsideWrapper',
component: ClickOutsideWrapper,
decorators: [withCenteredStory],

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

@@ -24,7 +24,7 @@ interface State {
export class ClickOutsideWrapper extends PureComponent<React.PropsWithChildren<Props>, State> {
static defaultProps = {
includeButtonPress: true,
parent: typeof window !== 'undefined' ? window : null,
parent: typeof window !== 'undefined' ? window : undefined,
useCapture: false,
};
myRef = createRef<HTMLDivElement>();

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

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

@@ -1,4 +1,4 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { ClipboardButton } from './ClipboardButton';
<Meta title="MDX|ClipboardButton" component={ClipboardButton} />
@@ -34,4 +34,4 @@ Commonly it is passed in the `addonAfter` prop on `<Input />`
/>
```
<Props of={ClipboardButton} />
<ArgTypes of={ClipboardButton} />

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

@@ -1,4 +1,4 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { CollapsableSection } from './CollapsableSection';
<Meta title="MDX|CollapsableSection" component={CollapsableSection} />
@@ -7,4 +7,4 @@ import { CollapsableSection } from './CollapsableSection';
A simple container for enabling collapsing/expanding of content.
<Props of={CollapsableSection} />
<ArgTypes of={CollapsableSection} />

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

@@ -1,6 +1,6 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -8,7 +8,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { CollapsableSection, Props } from './CollapsableSection';
import mdx from './CollapsableSection.mdx';
const meta: ComponentMeta<typeof CollapsableSection> = {
const meta: Meta<typeof CollapsableSection> = {
title: 'Layout/CollapsableSection',
component: CollapsableSection,
decorators: [withCenteredStory],
@@ -31,7 +31,7 @@ const meta: ComponentMeta<typeof CollapsableSection> = {
},
};
export const Basic: ComponentStory<typeof CollapsableSection> = ({ children, ...args }: Props) => {
export const Basic: StoryFn<typeof CollapsableSection> = ({ children, ...args }: Props) => {
const [, updateArgs] = useArgs();
const onToggle = (isOpen: boolean) => {

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

@@ -1,4 +1,4 @@
import { Meta, Preview, Props } from '@storybook/addon-docs/blocks';
import { Meta, Preview, ArgTypes } from '@storybook/blocks';
import { Collapse } from './Collapse';
# Collapse
@@ -15,4 +15,4 @@ const [isOpen, setIsOpen] = useState(false);
</Collapse>;
```
<Props of={Collapse} />
<ArgTypes of={Collapse} />

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

@@ -1,6 +1,6 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -10,7 +10,7 @@ import mdx from './Collapse.mdx';
const EXCLUDED_PROPS = ['className', 'onToggle'];
const meta: ComponentMeta<typeof Collapse> = {
const meta: Meta<typeof Collapse> = {
title: 'Layout/Collapse',
component: Collapse,
decorators: [withCenteredStory, withHorizontallyCenteredStory],
@@ -33,7 +33,7 @@ const meta: ComponentMeta<typeof Collapse> = {
},
};
export const Basic: ComponentStory<typeof Collapse> = (args) => {
export const Basic: StoryFn<typeof Collapse> = (args) => {
const [, updateArgs] = useArgs();
return (
<Collapse
@@ -48,7 +48,7 @@ export const Basic: ComponentStory<typeof Collapse> = (args) => {
);
};
export const Controlled: ComponentStory<typeof ControlledCollapse> = (args) => {
export const Controlled: StoryFn<typeof ControlledCollapse> = (args) => {
return (
<ControlledCollapse {...args}>
<p>{args.children}</p>

5
packages/grafana-ui/src/components/ColorPicker/ColorPicker.mdx
View File

@@ -1,6 +1,5 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { ColorPicker } from './ColorPicker';
import { ColorPickerInput } from './ColorPickerInput';
<Meta title="Pickers and Editors/ColorPicker/ColorPicker" />
@@ -18,4 +17,4 @@ Color picker component, modified to be used inside forms. Supports all usual inp
The format in which the color is returned to the `onChange` callback can be customised via `returnColorAs` prop.
<Props of={ColorPicker} />
<ArgTypes of={ColorPicker} />

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

@@ -1,6 +1,6 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { SeriesColorPicker, ColorPicker, clearButtonStyles, useStyles2 } from '@grafana/ui';
@@ -11,9 +11,12 @@ import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
import mdx from './ColorPicker.mdx';
import { ColorPickerInput } from './ColorPickerInput';
const meta: ComponentMeta<typeof ColorPicker> = {
const meta: Meta<typeof ColorPicker> = {
title: 'Pickers and Editors/ColorPicker',
component: ColorPicker,
// SB7 has broken subcomponent types due to dropping support for the feature
// https://github.com/storybookjs/storybook/issues/20782
// @ts-ignore
subcomponents: { SeriesColorPicker, ColorPickerInput },
decorators: [withCenteredStory],
parameters: {
@@ -30,7 +33,7 @@ const meta: ComponentMeta<typeof ColorPicker> = {
},
};
export const Basic: ComponentStory<typeof ColorPicker> = ({ color, enableNamedColors }) => {
export const Basic: StoryFn<typeof ColorPicker> = ({ color, enableNamedColors }) => {
const [, updateArgs] = useArgs();
return renderComponentWithTheme(ColorPicker, {
enableNamedColors,
@@ -42,7 +45,7 @@ export const Basic: ComponentStory<typeof ColorPicker> = ({ color, enableNamedCo
});
};
export const SeriesPicker: ComponentStory<typeof SeriesColorPicker> = ({ color, enableNamedColors }) => {
export const SeriesPicker: StoryFn<typeof SeriesColorPicker> = ({ color, enableNamedColors }) => {
const [, updateArgs] = useArgs();
const clearButton = useStyles2(clearButtonStyles);
return (
@@ -72,7 +75,7 @@ export const SeriesPicker: ComponentStory<typeof SeriesColorPicker> = ({ color,
);
};
export const Input: ComponentStory<typeof ColorPickerInput> = ({ color }) => {
export const Input: StoryFn<typeof ColorPickerInput> = ({ color }) => {
const [, updateArgs] = useArgs();
return (
<ColorPickerInput

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

@@ -1,4 +1,4 @@
import { ComponentMeta } from '@storybook/react';
import { Meta } from '@storybook/react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
@@ -6,9 +6,12 @@ import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
import { ColorPickerPopover } from './ColorPickerPopover';
import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
const meta: ComponentMeta<typeof ColorPickerPopover> = {
const meta: Meta<typeof ColorPickerPopover> = {
title: 'Pickers and Editors/ColorPicker/Popovers',
component: ColorPickerPopover,
// SB7 has broken subcomponent types due to dropping support for the feature
// https://github.com/storybookjs/storybook/issues/20782
// @ts-ignore
subcomponents: { SeriesColorPickerPopover },
decorators: [withCenteredStory],
};

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

@@ -1,6 +1,6 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
@@ -8,7 +8,7 @@ import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
import mdx from './ColorPicker.mdx';
import SpectrumPalette from './SpectrumPalette';
const meta: ComponentMeta<typeof SpectrumPalette> = {
const meta: Meta<typeof SpectrumPalette> = {
title: 'Pickers and Editors/ColorPicker/Palettes/SpectrumPalette',
component: SpectrumPalette,
decorators: [withCenteredStory],
@@ -25,7 +25,7 @@ const meta: ComponentMeta<typeof SpectrumPalette> = {
},
};
export const Simple: ComponentStory<typeof SpectrumPalette> = ({ color }) => {
export const Simple: StoryFn<typeof SpectrumPalette> = ({ color }) => {
const [, updateArgs] = useArgs();
return renderComponentWithTheme(SpectrumPalette, {
color,

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

@@ -1,4 +1,4 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { ConfirmButton } from './ConfirmButton';
<Meta title="MDX|ConfirmButton" component={ConfirmButton} />
@@ -29,4 +29,4 @@ Apart from the button variant, you can also modify the button size and the butto
</ConfirmButton>
```
<Props of={ConfirmButton} />
<ArgTypes of={ConfirmButton} />

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

@@ -15,6 +15,9 @@ const meta: Meta = {
title: 'Buttons/ConfirmButton',
component: ConfirmButton,
decorators: [withCenteredStory],
// SB7 has broken subcomponent types due to dropping support for the feature
// https://github.com/storybookjs/storybook/issues/20782
// @ts-ignore
subcomponents: { DeleteButton },
parameters: {
docs: {

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

@@ -1,4 +1,4 @@
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { ConfirmModal } from './ConfirmModal';
<Meta title="MDX|ConfirmModal" component={ConfirmModal} />
@@ -21,4 +21,4 @@ Used to request user for action confirmation, e.g. deleting items. Triggers prov
/>
```
<Props of={ConfirmModal} />
<ArgTypes of={ConfirmModal} />

10
packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.story.tsx
View File

@@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { ConfirmModal } from '@grafana/ui';
@@ -10,7 +10,7 @@ import mdx from './ConfirmModal.mdx';
const defaultExcludes = ['onConfirm', 'onDismiss', 'onAlternative'];
const meta: ComponentMeta<typeof ConfirmModal> = {
const meta: Meta<typeof ConfirmModal> = {
title: 'Overlays/ConfirmModal',
component: ConfirmModal,
decorators: [withCenteredStory],
@@ -41,7 +41,7 @@ const defaultActions = {
},
};
export const Basic: ComponentStory<typeof ConfirmModal> = ({
export const Basic: StoryFn<typeof ConfirmModal> = ({
title,
body,
description,
@@ -85,7 +85,7 @@ Basic.args = {
isOpen: true,
};
export const AlternativeAction: ComponentStory<typeof ConfirmModal> = ({
export const AlternativeAction: StoryFn<typeof ConfirmModal> = ({
title,
body,
description,
@@ -129,7 +129,7 @@ AlternativeAction.args = {
isOpen: true,
};
export const WithConfirmation: ComponentStory<typeof ConfirmModal> = ({
export const WithConfirmation: StoryFn<typeof ConfirmModal> = ({
title,
body,
description,

6
packages/grafana-ui/src/components/ContextMenu/ContextMenu.mdx
View File

@@ -1,4 +1,4 @@
import { Props } from '@storybook/addon-docs/blocks';
import { ArgTypes } from '@storybook/blocks';
import { ContextMenu } from './ContextMenu';
import { WithContextMenu } from './WithContextMenu';
@@ -31,8 +31,8 @@ There are controlled and uncontrolled versions of the component available. With
### Props of ContextMenu
<Props of={ContextMenu} />
<ArgTypes of={ContextMenu} />
### Props of WithContextMenu
<Props of={WithContextMenu} />
<ArgTypes of={WithContextMenu} />

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

@@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -10,7 +10,7 @@ import mdx from './ContextMenu.mdx';
import { renderMenuItems } from './ContextMenuStoryHelper';
import { WithContextMenu, WithContextMenuProps } from './WithContextMenu';
const meta: ComponentMeta<typeof ContextMenu> = {
const meta: Meta<typeof ContextMenu> = {
title: 'General/ContextMenu',
component: ContextMenu,
decorators: [withCenteredStory],
@@ -34,11 +34,11 @@ const renderHeader = (): React.ReactNode => {
return <h6>Menu</h6>;
};
export const Basic: ComponentStory<typeof ContextMenu> = (args: ContextMenuProps) => {
export const Basic: StoryFn<typeof ContextMenu> = (args: ContextMenuProps) => {
return <ContextMenu {...args} onClose={() => action('onClose')('closed menu')} renderHeader={renderHeader} />;
};
export const WithState: ComponentStory<typeof WithContextMenu> = (args: WithContextMenuProps) => {
export const WithState: StoryFn<typeof WithContextMenu> = (args: WithContextMenuProps) => {
return (
<WithContextMenu {...args}>
{({ openMenu }) => <IconButton name="info-circle" onClick={openMenu} />}

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

@@ -1,4 +1,4 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { DataSourceHttpSettings } from './DataSourceHttpSettings';
<Meta title="MDX|DataSourceHttpSettings" component={DataSourceHttpSettings} />
@@ -33,4 +33,4 @@ export const ConfigEditor = (props: Props) => {
};
```
<Props of={DataSourceHttpSettings} />
<ArgTypes of={DataSourceHttpSettings} />

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

@@ -1,6 +1,6 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { DataSourceSettings } from '@grafana/data';
@@ -37,7 +37,7 @@ const settingsMock: DataSourceSettings<any, any> = {
readOnly: true,
};
const meta: ComponentMeta<typeof DataSourceHttpSettings> = {
const meta: Meta<typeof DataSourceHttpSettings> = {
title: 'Data Source/DataSourceHttpSettings',
component: DataSourceHttpSettings,
parameters: {
@@ -54,7 +54,7 @@ const meta: ComponentMeta<typeof DataSourceHttpSettings> = {
},
};
export const Basic: ComponentStory<typeof DataSourceHttpSettings> = (args) => {
export const Basic: StoryFn<typeof DataSourceHttpSettings> = (args) => {
const [, updateArgs] = useArgs();
return (
<DataSourceHttpSettings

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

@@ -1,4 +1,4 @@
import { ArgsTable } from '@storybook/addon-docs/blocks';
import { ArgTypes } from '@storybook/blocks';
import { DatePicker } from './DatePicker';
# DatePicker
@@ -24,4 +24,4 @@ return (
### Props
<ArgsTable of={DatePicker} />
<ArgTypes of={DatePicker} />

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

@@ -1,4 +1,4 @@
import { ComponentMeta } from '@storybook/react';
import { Meta } from '@storybook/react';
import React, { useState } from 'react';
import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
@@ -7,7 +7,7 @@ import { Button } from '../../Button/Button';
import { DatePicker, DatePickerProps } from './DatePicker';
import mdx from './DatePicker.mdx';
const meta: ComponentMeta<typeof DatePicker> = {
const meta: Meta<typeof DatePicker> = {
title: 'Pickers and Editors/TimePickers/Pickers And Editors/DatePicker',
component: DatePicker,
decorators: [withCenteredStory],

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

@@ -1,4 +1,4 @@
import { ArgsTable } from '@storybook/addon-docs/blocks';
import { ArgTypes } from '@storybook/blocks';
import { DatePickerWithInput } from './DatePickerWithInput';
# DatePickerWithInput
@@ -17,4 +17,4 @@ return <DatePickerWithInput width={40} value={date} onChange={(newDate) => setDa
### Props
<ArgsTable of={DatePickerWithInput} />
<ArgTypes of={DatePickerWithInput} />

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

@@ -1,6 +1,6 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React from 'react';
import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
@@ -15,7 +15,7 @@ const today = new Date();
const minimumDate = new Date();
minimumDate.setMonth(minimumDate.getMonth() - 1);
const meta: ComponentMeta<typeof DatePickerWithInput> = {
const meta: Meta<typeof DatePickerWithInput> = {
title: 'Pickers and Editors/TimePickers/DatePickerWithInput',
component: DatePickerWithInput,
decorators: [withCenteredStory],
@@ -38,7 +38,7 @@ const meta: ComponentMeta<typeof DatePickerWithInput> = {
},
};
export const Basic: ComponentStory<typeof DatePickerWithInput> = (args) => {
export const Basic: StoryFn<typeof DatePickerWithInput> = (args) => {
const [, updateArgs] = useArgs();
// the minDate arg can change from Date object to number, we need to handle this

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

@@ -1,4 +1,4 @@
import { ArgsTable } from '@storybook/addon-docs/blocks';
import { ArgTypes } from '@storybook/blocks';
import { DateTimePicker } from './DateTimePicker';
# DateTimePicker
@@ -38,4 +38,4 @@ return (
### Props
<ArgsTable of={DateTimePicker} />
<ArgTypes of={DateTimePicker} />

13
packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.story.tsx
View File

@@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { StoryFn, Meta } from '@storybook/react';
import React, { useState } from 'react';
import { dateTime, DateTime } from '@grafana/data';
@@ -16,7 +16,7 @@ const today = new Date();
const minimumDate = new Date();
minimumDate.setDate(minimumDate.getDate() - 7);
const meta: ComponentMeta<typeof DateTimePicker> = {
const meta: Meta<typeof DateTimePicker> = {
title: 'Pickers and Editors/TimePickers/DateTimePicker',
decorators: [withCenteredStory],
component: DateTimePicker,
@@ -43,12 +43,7 @@ const meta: ComponentMeta<typeof DateTimePicker> = {
},
};
export const OnlyWorkingHoursEnabled: ComponentStory<typeof DateTimePicker> = ({
label,
minDate,
maxDate,
showSeconds,
}) => {
export const OnlyWorkingHoursEnabled: StoryFn<typeof DateTimePicker> = ({ label, minDate, maxDate, showSeconds }) => {
const [date, setDate] = useState<DateTime>(dateTime(today));
// the minDate arg can change from Date object to number, we need to handle this
// scenario to avoid a crash in the component's story.
@@ -71,7 +66,7 @@ export const OnlyWorkingHoursEnabled: ComponentStory<typeof DateTimePicker> = ({
);
};
export const Basic: ComponentStory<typeof DateTimePicker> = ({ label, minDate, maxDate, showSeconds }) => {
export const Basic: StoryFn<typeof DateTimePicker> = ({ label, minDate, maxDate, showSeconds }) => {
const [date, setDate] = useState<DateTime>(dateTime(today));
// the minDate arg can change from Date object to number, we need to handle this
// scenario to avoid a crash in the component's story.

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

@@ -1,13 +1,13 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { withCenteredStory } from '../../../utils/storybook/withCenteredStory';
import { RelativeTimeRangePicker } from './RelativeTimeRangePicker';
const meta: ComponentMeta<typeof RelativeTimeRangePicker> = {
const meta: Meta<typeof RelativeTimeRangePicker> = {
title: 'Pickers and Editors/TimePickers/RelativeTimeRangePicker',
component: RelativeTimeRangePicker,
decorators: [withCenteredStory],
@@ -24,7 +24,7 @@ const meta: ComponentMeta<typeof RelativeTimeRangePicker> = {
},
};
export const Basic: ComponentStory<typeof RelativeTimeRangePicker> = (args) => {
export const Basic: StoryFn<typeof RelativeTimeRangePicker> = (args) => {
const [, updateArgs] = useArgs();
return (
<RelativeTimeRangePicker

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

@@ -1,6 +1,6 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { dateTime } from '@grafana/data';
@@ -8,7 +8,7 @@ import { TimeOfDayPicker } from '@grafana/ui';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
const meta: ComponentMeta<typeof TimeOfDayPicker> = {
const meta: Meta<typeof TimeOfDayPicker> = {
title: 'Pickers and Editors/TimePickers/TimeOfDayPicker',
component: TimeOfDayPicker,
decorators: [withCenteredStory],
@@ -23,7 +23,7 @@ const meta: ComponentMeta<typeof TimeOfDayPicker> = {
argTypes: { value: { control: 'date' } },
};
export const Basic: ComponentStory<typeof TimeOfDayPicker> = (args) => {
export const Basic: StoryFn<typeof TimeOfDayPicker> = (args) => {
const [, updateArgs] = useArgs();
return (
<TimeOfDayPicker

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

@@ -1,4 +1,4 @@
import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Story, Preview, ArgTypes } from '@storybook/blocks';
import { TimeRangeInput } from './TimeRangeInput';
# TimeRangeInput
@@ -34,4 +34,4 @@ import { TimeRangeInput } from '@grafana/ui';
### Props
<Props of={TimeRangeInput} />
<ArgTypes of={TimeRangeInput} />

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

@@ -1,6 +1,6 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { dateTime, DefaultTimeZone, isDateTime, TimeRange } from '@grafana/data';
@@ -32,7 +32,7 @@ const nullRange = {
},
};
const meta: ComponentMeta<typeof TimeRangeInput> = {
const meta: Meta<typeof TimeRangeInput> = {
title: 'Pickers and Editors/TimePickers/TimeRangeInput',
component: TimeRangeInput,
decorators: [withCenteredStory],
@@ -57,7 +57,7 @@ const meta: ComponentMeta<typeof TimeRangeInput> = {
},
};
export const Basic: ComponentStory<typeof TimeRangeInput> = (args) => {
export const Basic: StoryFn<typeof TimeRangeInput> = (args) => {
const [, updateArgs] = useArgs();
return (
<TimeRangeInput

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

@@ -1,6 +1,6 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { dateTime, DefaultTimeZone } from '@grafana/data';
@@ -11,7 +11,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
const to = dateTime();
const from = to.subtract(6, 'h');
const meta: ComponentMeta<typeof TimeRangePicker> = {
const meta: Meta<typeof TimeRangePicker> = {
title: 'Pickers and Editors/TimePickers/TimeRangePicker',
component: TimeRangePicker,
decorators: [withCenteredStory],
@@ -42,7 +42,7 @@ const meta: ComponentMeta<typeof TimeRangePicker> = {
},
};
export const Basic: ComponentStory<typeof TimeRangePicker> = (args) => {
export const Basic: StoryFn<typeof TimeRangePicker> = (args) => {
const [, updateArgs] = useArgs();
return (
<TimeRangePicker

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

@@ -1,13 +1,13 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { TimeZonePicker } from '@grafana/ui';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
const meta: ComponentMeta<typeof TimeZonePicker> = {
const meta: Meta<typeof TimeZonePicker> = {
title: 'Pickers and Editors/TimePickers/TimeZonePicker',
component: TimeZonePicker,
decorators: [withCenteredStory],
@@ -28,7 +28,7 @@ const meta: ComponentMeta<typeof TimeZonePicker> = {
},
};
export const Basic: ComponentStory<typeof TimeZonePicker> = (args) => {
export const Basic: StoryFn<typeof TimeZonePicker> = (args) => {
const [, updateArgs] = useArgs();
return (
<TimeZonePicker

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

@@ -1,13 +1,13 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { WeekStartPicker } from '@grafana/ui';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
const meta: ComponentMeta<typeof WeekStartPicker> = {
const meta: Meta<typeof WeekStartPicker> = {
title: 'Pickers and Editors/TimePickers/WeekStartPicker',
component: WeekStartPicker,
decorators: [withCenteredStory],
@@ -18,7 +18,7 @@ const meta: ComponentMeta<typeof WeekStartPicker> = {
},
};
export const Basic: ComponentStory<typeof WeekStartPicker> = (args) => {
export const Basic: StoryFn<typeof WeekStartPicker> = (args) => {
const [, updateArgs] = useArgs();
return (
<WeekStartPicker

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

@@ -1,4 +1,4 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Drawer } from './Drawer';
<Meta title="MDX|Drawer" component={Drawer} />
@@ -37,4 +37,4 @@ The Drawer supports 3 sizes: `sm`, `md`, and `lg`. This option defines a width i
## Props
<Props of={Drawer} />
<ArgTypes of={Drawer} />

10
packages/grafana-ui/src/components/Drawer/Drawer.story.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useState } from 'react';
import { Button, Drawer, Tab, TabsBar } from '@grafana/ui';
@@ -7,7 +7,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './Drawer.mdx';
const meta: ComponentMeta<typeof Drawer> = {
const meta: Meta<typeof Drawer> = {
title: 'Overlays/Drawer',
component: Drawer,
decorators: [withCenteredStory],
@@ -32,7 +32,7 @@ const meta: ComponentMeta<typeof Drawer> = {
},
};
export const Global: ComponentStory<typeof Drawer> = (args) => {
export const Global: StoryFn<typeof Drawer> = (args) => {
const [isOpen, setIsOpen] = useState(false);
return (
<>
@@ -60,7 +60,7 @@ Global.args = {
title: 'Drawer title',
};
export const LongContent: ComponentStory<typeof Drawer> = (args) => {
export const LongContent: StoryFn<typeof Drawer> = (args) => {
const [isOpen, setIsOpen] = useState(false);
return (
<>
@@ -141,7 +141,7 @@ LongContent.args = {
title: 'Drawer title with long content',
};
export const WithTabs: ComponentStory<typeof Drawer> = (args) => {
export const WithTabs: StoryFn<typeof Drawer> = (args) => {
const [isOpen, setIsOpen] = useState(false);
const [activeTab, setActiveTab] = useState('options');

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

@@ -1,13 +1,13 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { ButtonSelect } from './ButtonSelect';
const meta: ComponentMeta<typeof ButtonSelect> = {
const meta: Meta<typeof ButtonSelect> = {
title: 'Forms/Select/ButtonSelect',
component: ButtonSelect,
decorators: [withCenteredStory],
@@ -25,7 +25,7 @@ const meta: ComponentMeta<typeof ButtonSelect> = {
},
};
export const Basic: ComponentStory<typeof ButtonSelect> = (args) => {
export const Basic: StoryFn<typeof ButtonSelect> = (args) => {
const [, updateArgs] = useArgs();
return (
<div style={{ marginLeft: '100px', position: 'relative', display: 'inline-block' }}>

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

@@ -1,4 +1,4 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Dropdown } from './Dropdown';
@@ -32,4 +32,4 @@ return (
);
```
<Props of={Dropdown} />
<ArgTypes of={Dropdown} />

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

@@ -1,4 +1,4 @@
import { ComponentMeta } from '@storybook/react';
import { Meta } from '@storybook/react';
import React from 'react';
import { StoryExample } from '../../utils/storybook/StoryExample';
@@ -10,7 +10,7 @@ import { Menu } from '../Menu/Menu';
import { Dropdown } from './Dropdown';
import mdx from './Dropdown.mdx';
const meta: ComponentMeta<typeof Dropdown> = {
const meta: Meta<typeof Dropdown> = {
title: 'Overlays/Dropdown',
component: Dropdown,
decorators: [withCenteredStory],

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

@@ -1,4 +1,4 @@
import { ArgsTable } from '@storybook/addon-docs/blocks';
import { ArgTypes } from '@storybook/blocks';
import { EmptySearchResult } from './EmptySearchResult';
# EmptySearchResult
@@ -15,4 +15,4 @@ import { EmptySearchResult } from '@grafana/ui';
### Props
<ArgsTable of={EmptySearchResult} />
<ArgTypes of={EmptySearchResult} />

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

@@ -1,4 +1,4 @@
import { ComponentMeta } from '@storybook/react';
import { Meta } from '@storybook/react';
import React from 'react';
import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
@@ -6,7 +6,7 @@ import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredS
import { EmptySearchResult } from './EmptySearchResult';
import mdx from './EmptySearchResult.mdx';
const meta: ComponentMeta<typeof EmptySearchResult> = {
const meta: Meta<typeof EmptySearchResult> = {
title: 'Visualizations/EmptySearchResult',
component: EmptySearchResult,
decorators: [withCenteredStory],

6
packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.mdx
View File

@@ -1,4 +1,4 @@
import { ArgsTable } from '@storybook/addon-docs/blocks';
import { ArgTypes } from '@storybook/blocks';
import { ErrorBoundary, ErrorBoundaryAlert } from './ErrorBoundary';
import { ErrorWithStack } from './ErrorWithStack';
@@ -37,7 +37,7 @@ import { ErrorBoundaryAlert } from '@grafana/ui';
### Props
<ArgsTable of={ErrorBoundaryAlert} />
<ArgTypes of={ErrorBoundaryAlert} />
# ErrorWithStack
@@ -53,7 +53,7 @@ import { ErrorWithStack } from '@grafana/ui';
### Props
<ArgsTable of={ErrorWithStack} />
<ArgTypes of={ErrorWithStack} />
# withErrorBoundary

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

@@ -1,4 +1,4 @@
import { ComponentMeta } from '@storybook/react';
import { Meta } from '@storybook/react';
import React, { useState } from 'react';
import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
@@ -10,7 +10,7 @@ import { ErrorBoundary, ErrorBoundaryAlert } from './ErrorBoundary';
import mdx from './ErrorBoundary.mdx';
import { ErrorWithStack } from './ErrorWithStack';
const meta: ComponentMeta<typeof ErrorBoundary> = {
const meta: Meta<typeof ErrorBoundary> = {
title: 'General/ErrorBoundary',
component: ErrorBoundary,
decorators: [withCenteredStory],

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

@@ -1,4 +1,4 @@
import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Story, Preview, ArgTypes } from '@storybook/blocks';
import { FileDropzone } from './FileDropzone';
# FileDropzone
@@ -15,4 +15,4 @@ import { FileDropzone } from '@grafana/ui';
### Props
<Props of={FileDropzone} />
<ArgTypes of={FileDropzone} />

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

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { FileDropzone } from '@grafana/ui';
@@ -7,7 +7,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './FileDropzone.mdx';
const meta: ComponentMeta<typeof FileDropzone> = {
const meta: Meta<typeof FileDropzone> = {
title: 'Forms/FileDropzone',
component: FileDropzone,
decorators: [withCenteredStory],
@@ -18,7 +18,7 @@ const meta: ComponentMeta<typeof FileDropzone> = {
},
};
const Template: ComponentStory<typeof FileDropzone> = (args) => <FileDropzone {...args} />;
const Template: StoryFn<typeof FileDropzone> = (args) => <FileDropzone {...args} />;
export const Basic = Template.bind({});

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

@@ -1,4 +1,4 @@
import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Story, Preview, ArgTypes } from '@storybook/blocks';
import { FileListItem } from './FileListItem';
# FileListItem
@@ -15,4 +15,4 @@ import { FileListItem } from '@grafana/ui';
### Props
<Props of={FileListItem} />
<ArgTypes of={FileListItem} />

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

@@ -1,4 +1,4 @@
import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Story, Preview, ArgTypes } from '@storybook/blocks';
import { FileUpload } from './FileUpload';
# FileUpload
@@ -17,4 +17,4 @@ import { FileUpload } from '@grafana/ui';
### Props
<Props of={FileUpload} />
<ArgTypes of={FileUpload} />

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

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { FileUpload } from '@grafana/ui';
@@ -7,7 +7,7 @@ import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './FileUpload.mdx';
const meta: ComponentMeta<typeof FileUpload> = {
const meta: Meta<typeof FileUpload> = {
title: 'Forms/FileUpload',
component: FileUpload,
decorators: [withCenteredStory],
@@ -29,7 +29,7 @@ const meta: ComponentMeta<typeof FileUpload> = {
},
};
export const Basic: ComponentStory<typeof FileUpload> = (args) => {
export const Basic: StoryFn<typeof FileUpload> = (args) => {
return (
<FileUpload
size={args.size}

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

@@ -1,4 +1,4 @@
import { Props } from '@storybook/addon-docs/blocks';
import { ArgTypes } from '@storybook/blocks';
import { FilterPill } from './FilterPill';
# FilterPill
@@ -15,4 +15,4 @@ import { FilterPill } from '@grafana/ui';
### Props
<Props of={FilterPill} />
<ArgTypes of={FilterPill} />

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

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useState } from 'react';
import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
@@ -9,7 +9,7 @@ import { HorizontalGroup } from '../Layout/Layout';
import { FilterPill } from './FilterPill';
import mdx from './FilterPill.mdx';
const meta: ComponentMeta<typeof FilterPill> = {
const meta: Meta<typeof FilterPill> = {
title: 'General/FilterPill',
component: FilterPill,
decorators: [withCenteredStory],
@@ -24,7 +24,7 @@ const meta: ComponentMeta<typeof FilterPill> = {
},
};
export const Basic: ComponentStory<typeof FilterPill> = (args) => {
export const Basic: StoryFn<typeof FilterPill> = (args) => {
return <FilterPill {...args} />;
};

8
packages/grafana-ui/src/components/FormField/FormField.story.internal.tsx → packages/grafana-ui/src/components/FormField/FormField.internal.story.tsx
View File

@@ -1,11 +1,11 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { FormField } from './FormField';
const meta: ComponentMeta<typeof FormField> = {
const meta: Meta<typeof FormField> = {
title: 'Forms/Legacy/FormField',
component: FormField,
decorators: [withCenteredStory],
@@ -26,11 +26,11 @@ const meta: ComponentMeta<typeof FormField> = {
},
};
export const Basic: ComponentStory<typeof FormField> = (args) => {
export const Basic: StoryFn<typeof FormField> = (args) => {
return <FormField {...args} />;
};
export const WithTooltip: ComponentStory<typeof FormField> = ({ tooltip, ...args }) => {
export const WithTooltip: StoryFn<typeof FormField> = ({ tooltip, ...args }) => {
return <FormField {...args} tooltip={tooltip} />;
};

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

@@ -1,4 +1,4 @@
import { Props } from '@storybook/addon-docs/blocks';
import { ArgTypes } from '@storybook/blocks';
import { FormattedValueDisplay } from './FormattedValueDisplay';
# FormattedValueDisplay
@@ -13,4 +13,4 @@ Used to display a value, which also supports prefix and suffix.
### Props
<Props of={FormattedValueDisplay} />
<ArgTypes of={FormattedValueDisplay} />

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

@@ -1,4 +1,4 @@
import { ComponentMeta } from '@storybook/react';
import { Meta } from '@storybook/react';
import React from 'react';
import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
@@ -6,7 +6,7 @@ import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredS
import { FormattedValueDisplay } from './FormattedValueDisplay';
import mdx from './FormattedValueDisplay.mdx';
const meta: ComponentMeta<typeof FormattedValueDisplay> = {
const meta: Meta<typeof FormattedValueDisplay> = {
title: 'Visualizations/FormattedValueDisplay',
component: FormattedValueDisplay,
decorators: [withCenteredStory],

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

@@ -1,4 +1,4 @@
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Checkbox } from './Checkbox';
<Meta title="MDX|Checkbox" component={Checkbox} />
@@ -41,4 +41,4 @@ import { Forms } from '@grafana/ui';
### Props
<Props of={Checkbox} />
<ArgTypes of={Checkbox} />

10
packages/grafana-ui/src/components/Forms/Checkbox.story.tsx
View File

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useState, useCallback } from 'react';
import { VerticalGroup } from '../Layout/Layout';
@@ -7,7 +7,7 @@ import { Checkbox } from './Checkbox';
import mdx from './Checkbox.mdx';
import { Field } from './Field';
const meta: ComponentMeta<typeof Checkbox> = {
const meta: Meta<typeof Checkbox> = {
title: 'Forms/Checkbox',
component: Checkbox,
parameters: {
@@ -20,7 +20,7 @@ const meta: ComponentMeta<typeof Checkbox> = {
},
};
export const Basic: ComponentStory<typeof Checkbox> = (args) => {
export const Basic: StoryFn<typeof Checkbox> = (args) => {
const [checked, setChecked] = useState(false);
const onChange = useCallback(
(e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked),
@@ -64,7 +64,7 @@ export const StackedList = () => {
);
};
export const InAField: ComponentStory<typeof Checkbox> = (args) => {
export const InAField: StoryFn<typeof Checkbox> = (args) => {
return (
<div>
<Field {...args}>
@@ -82,7 +82,7 @@ InAField.args = {
indeterminate: false,
};
export const AllStates: ComponentStory<typeof Checkbox> = (args) => {
export const AllStates: StoryFn<typeof Checkbox> = (args) => {
const [checked, setChecked] = useState(false);
const onChange = useCallback(
(e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked),

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

@@ -1,4 +1,4 @@
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Field } from './Field';
<Meta title="MDX|Field" component={Field} />
@@ -19,4 +19,4 @@ import { Forms } from '@grafana/ui';
### Props
<Props of={Field} />
<ArgTypes of={Field} />

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

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useState, useCallback } from 'react';
import { Input, Switch } from '..';
@@ -6,7 +6,7 @@ import { Input, Switch } from '..';
import { Field } from './Field';
import mdx from './Field.mdx';
const meta: ComponentMeta<typeof Field> = {
const meta: Meta<typeof Field> = {
title: 'Forms/Field',
component: Field,
argTypes: {
@@ -27,7 +27,7 @@ const meta: ComponentMeta<typeof Field> = {
},
};
export const Simple: ComponentStory<typeof Field> = (args) => (
export const Simple: StoryFn<typeof Field> = (args) => (
<div>
<Field {...args}>
<Input id="thisField" />
@@ -45,7 +45,7 @@ Simple.args = {
horizontal: false,
};
export const HorizontalLayout: ComponentStory<typeof Field> = (args) => {
export const HorizontalLayout: StoryFn<typeof Field> = (args) => {
const [checked, setChecked] = useState(false);
const onChange = useCallback(
(e: React.FormEvent<HTMLInputElement>) => setChecked(e.currentTarget.checked),

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

@@ -1,4 +1,4 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { FieldArray } from './FieldArray';
<Meta title="MDX|FieldArray" component={FieldArray} />
@@ -37,4 +37,4 @@ The `FieldArray` component exposes its API via render prop. Properties exposed a
### Props
<Props of={FieldArray} />
<ArgTypes of={FieldArray} />

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

@@ -1,4 +1,4 @@
import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Story, Preview, ArgTypes } from '@storybook/blocks';
import { FieldSet } from './FieldSet';
# FieldSet
@@ -39,4 +39,4 @@ import { FieldSet } from '@grafana/ui';
### Props
<Props of={FieldSet} />
<ArgTypes of={FieldSet} />

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

@@ -1,4 +1,4 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { Input, Form, FieldSet, Field } from '@grafana/ui';
@@ -9,7 +9,7 @@ import { Button } from '../Button';
import { Props } from './FieldSet';
import mdx from './FieldSet.mdx';
const meta: ComponentMeta<typeof FieldSet> = {
const meta: Meta<typeof FieldSet> = {
title: 'Forms/FieldSet',
component: FieldSet,
decorators: [withCenteredStory],
@@ -29,7 +29,7 @@ const meta: ComponentMeta<typeof FieldSet> = {
},
};
export const Basic: ComponentStory<typeof FieldSet> = (args: Props) => {
export const Basic: StoryFn<typeof FieldSet> = (args: Props) => {
return (
<Form onSubmit={() => console.log('Submit')}>
{() => (

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

@@ -1,4 +1,4 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { FieldValidationMessage } from './FieldValidationMessage';
<Meta title="MDX|FieldValidationMessage" component={FieldValidationMessage} />
@@ -25,4 +25,4 @@ export const CustomFormField = () => {
};
```
<Props of={FieldValidationMessage} />
<ArgTypes of={FieldValidationMessage} />

6
packages/grafana-ui/src/components/Forms/FieldValidationMessage.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 { FieldValidationMessage } from './FieldValidationMessage';
import mdx from './FieldValidationMessage.mdx';
const meta: ComponentMeta<typeof FieldValidationMessage> = {
const meta: Meta<typeof FieldValidationMessage> = {
title: 'Forms/FieldValidationMessage',
component: FieldValidationMessage,
parameters: {
@@ -24,7 +24,7 @@ const meta: ComponentMeta<typeof FieldValidationMessage> = {
},
};
export const Basic: ComponentStory<typeof FieldValidationMessage> = (args) => {
export const Basic: StoryFn<typeof FieldValidationMessage> = (args) => {
return <FieldValidationMessage horizontal={args.horizontal}>{args.children}</FieldValidationMessage>;
};

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

@@ -1,4 +1,4 @@
import { Meta, Props } from '@storybook/addon-docs/blocks';
import { Meta, ArgTypes } from '@storybook/blocks';
import { Form } from './Form';
<Meta title="MDX|Form" component={Form} />
@@ -291,4 +291,4 @@ In a nutshell, the two most important changes are:
### Props
<Props of={Form} />
<ArgTypes of={Form} />

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

@@ -1,4 +1,4 @@
import { Props } from '@storybook/addon-docs/blocks';
import { ArgTypes } from '@storybook/blocks';
import { InlineField } from './InlineField';
# InlineField
@@ -17,4 +17,4 @@ If `tooltip` prop is provided, an info icon with supplied tooltip content will b
</InlineField>
```
<Props of={InlineField} />
<ArgTypes of={InlineField} />

16
packages/grafana-ui/src/components/Forms/InlineField.story.tsx
View File

@@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { Input } from '../Input/Input';
@@ -8,7 +8,7 @@ import { Select } from '../Select/Select';
import { InlineField } from './InlineField';
import mdx from './InlineField.mdx';
const meta: ComponentMeta<typeof InlineField> = {
const meta: Meta<typeof InlineField> = {
title: 'Forms/InlineField',
component: InlineField,
argTypes: {
@@ -27,7 +27,7 @@ const meta: ComponentMeta<typeof InlineField> = {
},
};
export const basic: ComponentStory<typeof InlineField> = (args) => {
export const basic: StoryFn<typeof InlineField> = (args) => {
return (
<InlineField {...args}>
<Input placeholder="Inline input" />
@@ -48,7 +48,7 @@ basic.args = {
validationMessageHorizontalOverflow: false,
};
export const withTooltip: ComponentStory<typeof InlineField> = (args) => {
export const withTooltip: StoryFn<typeof InlineField> = (args) => {
return (
<InlineField {...args}>
<Input placeholder="Inline input" />
@@ -62,7 +62,7 @@ withTooltip.args = {
label: 'Label',
};
export const grow: ComponentStory<typeof InlineField> = (args) => {
export const grow: StoryFn<typeof InlineField> = (args) => {
return (
<InlineField {...args}>
<Input placeholder="Inline input" />
@@ -76,7 +76,7 @@ grow.args = {
grow: true,
};
export const withSelect: ComponentStory<typeof InlineField> = (args) => {
export const withSelect: StoryFn<typeof InlineField> = (args) => {
return (
<InlineField {...args}>
<Select
@@ -96,7 +96,7 @@ withSelect.args = {
label: 'Select option',
};
export const multiple: ComponentStory<typeof InlineField> = () => {
export const multiple: StoryFn<typeof InlineField> = () => {
return (
<>
<InlineField label="Field 1">
@@ -112,7 +112,7 @@ export const multiple: ComponentStory<typeof InlineField> = () => {
);
};
export const error: ComponentStory<typeof InlineField> = (args) => {
export const error: StoryFn<typeof InlineField> = (args) => {
return (
<InlineField {...args}>
<Input placeholder="Inline input" />

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

@@ -1,4 +1,4 @@
import { ComponentMeta } from '@storybook/react';
import { Meta } from '@storybook/react';
import React from 'react';
import { Input } from '../Input/Input';
@@ -7,7 +7,7 @@ import { InlineField } from './InlineField';
import { InlineFieldRow } from './InlineFieldRow';
import mdx from './InlineFieldRow.mdx';
const meta: ComponentMeta<typeof InlineFieldRow> = {
const meta: Meta<typeof InlineFieldRow> = {
title: 'Forms/InlineFieldRow',
component: InlineFieldRow,
parameters: {

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

@@ -1,4 +1,4 @@
import { Props } from '@storybook/addon-docs/blocks';
import { ArgTypes } from '@storybook/blocks';
import { InlineLabel } from './InlineLabel';
# InlineLabel
@@ -15,4 +15,4 @@ For query editor readability, the label text should be as short as possible (4 w
</InlineLabel>
```
<Props of={InlineLabel} />
<ArgTypes of={InlineLabel} />

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

@@ -1,10 +1,10 @@
import { ComponentMeta } from '@storybook/react';
import { Meta } from '@storybook/react';
import React from 'react';
import { InlineLabel, Props } from './InlineLabel';
import mdx from './InlineLabel.mdx';
const meta: ComponentMeta<typeof InlineLabel> = {
const meta: Meta<typeof InlineLabel> = {
title: 'Forms/InlineLabel',
component: InlineLabel,
parameters: {

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

@@ -1,4 +1,4 @@
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
import { Label } from './Label';
<Meta title="MDX|Label" component={Label} />
@@ -11,4 +11,4 @@ This label component is used in full-page forms in Grafana, for example in the d
### Props
<Props of={Label} />
<ArgTypes of={Label} />

8
packages/grafana-ui/src/components/Forms/Label.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 { Label } from './Label';
import mdx from './Label.mdx';
const meta: ComponentMeta<typeof Label> = {
const meta: Meta<typeof Label> = {
title: 'Forms/Label',
component: Label,
argTypes: {
@@ -18,7 +18,7 @@ const meta: ComponentMeta<typeof Label> = {
},
};
export const simple: ComponentStory<typeof Label> = (args) => {
export const simple: StoryFn<typeof Label> = (args) => {
return <Label {...args} />;
};
@@ -31,7 +31,7 @@ simple.args = {
description: 'Option description',
};
export const categorised: ComponentStory<typeof Label> = (args) => {
export const categorised: StoryFn<typeof Label> = (args) => {
return <Label {...args} />;
};

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

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

@@ -1,6 +1,6 @@
import { action } from '@storybook/addon-actions';
import { useArgs } from '@storybook/client-api';
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useCallback } from 'react';
import { SelectableValue } from '@grafana/data';
@@ -9,7 +9,7 @@ import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory
import { Select, AsyncSelect as AsyncSelectComponent } from './Select';
const meta: ComponentMeta<typeof Select> = {
const meta: Meta<typeof Select> = {
title: 'Forms/Legacy/Select',
component: Select,
decorators: [withCenteredStory],
@@ -65,7 +65,7 @@ const options = [
{ label: 'Another label', value: 'Another value ' },
];
export const Basic: ComponentStory<typeof Select> = (args) => {
export const Basic: StoryFn<typeof Select> = (args) => {
const [, updateArgs] = useArgs();
return (
<Select
@@ -83,7 +83,7 @@ Basic.args = {
width: 20,
};
export const AsyncSelect: ComponentStory<typeof AsyncSelectComponent> = (args) => {
export const AsyncSelect: StoryFn<typeof AsyncSelectComponent> = (args) => {
const [, updateArgs] = useArgs();
const loadAsyncOptions = useCallback(
(inputValue: string) => {

6
packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.story.internal.tsx → packages/grafana-ui/src/components/Forms/Legacy/Switch/Switch.internal.story.tsx
View File

@@ -1,9 +1,9 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React, { useState } from 'react';
import { Switch } from './Switch';
const meta: ComponentMeta<typeof Switch> = {
const meta: Meta<typeof Switch> = {
title: 'Forms/Legacy/Switch',
component: Switch,
parameters: {
@@ -13,7 +13,7 @@ const meta: ComponentMeta<typeof Switch> = {
},
};
const SwitchWrapper: ComponentStory<typeof Switch> = ({ label, ...args }) => {
const SwitchWrapper: StoryFn<typeof Switch> = ({ label, ...args }) => {
const [checked, setChecked] = useState(false);
return <Switch {...args} label={label} checked={checked} onChange={() => setChecked(!checked)} />;
};

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

@@ -1,4 +1,4 @@
import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
import { Story, Preview, ArgTypes } from '@storybook/blocks';
import { Legend } from './Legend';
<Meta title="MDX|Legend" component={Legend} />
@@ -19,4 +19,4 @@ import { Forms } from '@grafana/ui';
### Props
<Props of={Legend} />
<ArgTypes of={Legend} />

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

@@ -1,11 +1,11 @@
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Meta, StoryFn } from '@storybook/react';
import React from 'react';
import { Legend } from '@grafana/ui';
import mdx from './Legend.mdx';
const meta: ComponentMeta<typeof Legend> = {
const meta: Meta<typeof Legend> = {
title: 'Forms/Legend',
component: Legend,
parameters: {
@@ -21,7 +21,7 @@ const meta: ComponentMeta<typeof Legend> = {
},
};
export const Basic: ComponentStory<typeof Legend> = (args) => {
export const Basic: StoryFn<typeof Legend> = (args) => {
return <Legend>{args.children}</Legend>;
};
Basic.args = {

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