mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Grafana UI: Bump to Storybook 8 (#87722)
* chore(storybook): run yarn dlx storybook@latest upgrade * chore(storybook): remove storybook/blocks patch * chore(yarn): clean up storybook dependencies * feat(storybook): migrate to v8 config via migration codemods * refactor(storybook): update stories to use v8 types via codemod * refactor(storybook): update stories to use preview-api instead of client-api * refactor(storybook): replace mdx usage of ArgsTable with PureArgsTable * refactor(storybook): migrate remaining mdx files to v8 storybook/blocks api * refactor(storybook): clean up mdx imports and blocks component names * chore(storybook): clean up typescript configuration * fix(frontend): align types/react versions across monorepo so grafana ui can be built * fix(storybook): pub back react-docgen-typescript and use ArgTypes so props tables work * chore(storybook): patch blocks package to expose Preview component * revert(storybook): revert changes related to using Canvas component in mdx files * Storybook upgrade: Fix icon typing (#87793) fix iconOptions typing * refactor(storybook): prefer as const over asserting types * revert(storybook): put back correct case in box.mdx --------- Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
This commit is contained in:
Jack Westbrook
GitHub
parent
6127dfd322
commit
65b2834420
File diff suppressed because one or more lines are too long
142
.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch
Normal file
142
.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch
Normal file
File diff suppressed because one or more lines are too long
@ -7,9 +7,6 @@ enableTelemetry: false
|
||||
nodeLinker: node-modules
|
||||
|
||||
packageExtensions:
|
||||
'@storybook/core-common@7.4.5':
|
||||
dependencies:
|
||||
'@storybook/react-webpack5': 7.4.5
|
||||
'croact-css-styled@1.1.9':
|
||||
dependencies:
|
||||
croact: 1.0.4
|
||||
|
||||
@ -125,7 +125,7 @@
|
||||
"@types/ol-ext": "npm:@siedlerchr/types-ol-ext@3.2.4",
|
||||
"@types/pluralize": "^0.0.33",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-beautiful-dnd": "13.1.8",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/react-grid-layout": "1.3.5",
|
||||
@ -411,10 +411,10 @@
|
||||
"debug@npm:^0.7.4": "2.6.9",
|
||||
"slate-dev-environment@^0.2.2": "patch:slate-dev-environment@npm:0.2.5#.yarn/patches/slate-dev-environment-npm-0.2.5-9aeb7da7b5.patch",
|
||||
"react-split-pane@0.1.92": "patch:react-split-pane@npm:0.1.92#.yarn/patches/react-split-pane-npm-0.1.92-93dbf51dff.patch",
|
||||
"@storybook/blocks@7.4.5": "patch:@storybook/blocks@npm%3A7.4.5#./.yarn/patches/@storybook-blocks-npm-7.4.5-5a2374564a.patch",
|
||||
"history@4.10.1": "patch:history@npm%3A4.10.1#./.yarn/patches/history-npm-4.10.1-ee217563ae.patch",
|
||||
"history@^4.9.0": "patch:history@npm%3A4.10.1#./.yarn/patches/history-npm-4.10.1-ee217563ae.patch",
|
||||
"redux": "^5.0.0"
|
||||
"redux": "^5.0.0",
|
||||
"@storybook/blocks@npm:8.0.10": "patch:@storybook/blocks@npm%3A8.0.10#~/.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch"
|
||||
},
|
||||
"workspaces": {
|
||||
"packages": [
|
||||
|
||||
@ -68,7 +68,7 @@
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/papaparse": "5.3.14",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/tinycolor2": "1.4.6",
|
||||
"esbuild": "0.20.2",
|
||||
|
||||
@ -69,7 +69,7 @@
|
||||
"@types/jest": "^29.5.4",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-virtualized-auto-sizer": "1.0.4",
|
||||
"@types/tinycolor2": "1.4.6",
|
||||
"babel-jest": "29.7.0",
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
"@svgr/plugin-svgo": "^8.1.0",
|
||||
"@types/babel__core": "^7",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"esbuild": "0.20.2",
|
||||
"prettier": "3.2.5",
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
"@testing-library/user-event": "14.5.2",
|
||||
"@types/jest": "^29.5.4",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/systemjs": "6.13.5",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
"jest": "^29.6.4",
|
||||
|
||||
@ -95,7 +95,7 @@
|
||||
"@types/node": "20.12.11",
|
||||
"@types/pluralize": "^0.0.33",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-beautiful-dnd": "13.1.8",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/react-highlight-words": "0.16.7",
|
||||
|
||||
@ -58,7 +58,7 @@
|
||||
"@types/history": "4.7.11",
|
||||
"@types/jest": "29.5.12",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/systemjs": "6.13.5",
|
||||
"esbuild": "0.20.2",
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
"@types/jest": "^29.5.4",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/react-virtualized-auto-sizer": "1.0.4",
|
||||
"@types/systemjs": "6.13.5",
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import path from 'path';
|
||||
import path, { dirname, join } from 'path';
|
||||
import type { StorybookConfig } from '@storybook/react-webpack5';
|
||||
// avoid importing from @grafana/data to prevent node error: ERR_REQUIRE_ESM
|
||||
import { availableIconsIndex, IconName } from '../../grafana-data/src/types/icon';
|
||||
@ -33,7 +33,7 @@ const mainConfig: StorybookConfig = {
|
||||
backgrounds: false,
|
||||
},
|
||||
},
|
||||
'@storybook/addon-a11y',
|
||||
getAbsolutePath('@storybook/addon-a11y'),
|
||||
{
|
||||
name: '@storybook/preset-scss',
|
||||
options: {
|
||||
@ -47,27 +47,17 @@ const mainConfig: StorybookConfig = {
|
||||
},
|
||||
},
|
||||
},
|
||||
'@storybook/addon-storysource',
|
||||
'storybook-dark-mode',
|
||||
{
|
||||
// replace babel-loader in manager and preview with esbuild-loader
|
||||
name: 'storybook-addon-turbo-build',
|
||||
options: {
|
||||
optimizationLevel: 3,
|
||||
// Target must match storybook 7 manager otherwise minimised docs error in production
|
||||
esbuildMinifyOptions: {
|
||||
target: 'chrome100',
|
||||
minify: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
getAbsolutePath('@storybook/addon-storysource'),
|
||||
getAbsolutePath('storybook-dark-mode'),
|
||||
getAbsolutePath('@storybook/addon-mdx-gfm'),
|
||||
getAbsolutePath('@storybook/addon-webpack5-compiler-swc'),
|
||||
],
|
||||
core: {},
|
||||
docs: {
|
||||
autodocs: true,
|
||||
},
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
name: getAbsolutePath('@storybook/react-webpack5'),
|
||||
options: {
|
||||
fastRefresh: true,
|
||||
builder: {
|
||||
@ -130,3 +120,7 @@ const mainConfig: StorybookConfig = {
|
||||
},
|
||||
};
|
||||
module.exports = mainConfig;
|
||||
|
||||
function getAbsolutePath(value: string): any {
|
||||
return dirname(require.resolve(join(value, 'package.json')));
|
||||
}
|
||||
|
||||
@ -112,21 +112,22 @@
|
||||
"@babel/core": "7.24.5",
|
||||
"@grafana/tsconfig": "^1.3.0-rc1",
|
||||
"@rollup/plugin-node-resolve": "15.2.3",
|
||||
"@storybook/addon-a11y": "7.4.5",
|
||||
"@storybook/addon-actions": "7.4.5",
|
||||
"@storybook/addon-docs": "7.4.5",
|
||||
"@storybook/addon-essentials": "7.4.5",
|
||||
"@storybook/addon-storysource": "7.4.5",
|
||||
"@storybook/api": "7.4.5",
|
||||
"@storybook/blocks": "7.4.5",
|
||||
"@storybook/client-api": "7.4.5",
|
||||
"@storybook/components": "7.4.5",
|
||||
"@storybook/core-events": "7.4.5",
|
||||
"@storybook/addon-a11y": "^8.0.10",
|
||||
"@storybook/addon-actions": "^8.0.10",
|
||||
"@storybook/addon-docs": "^8.0.10",
|
||||
"@storybook/addon-essentials": "^8.0.10",
|
||||
"@storybook/addon-mdx-gfm": "^8.0.10",
|
||||
"@storybook/addon-storysource": "^8.0.10",
|
||||
"@storybook/addon-webpack5-compiler-swc": "^1.0.2",
|
||||
"@storybook/blocks": "patch:@storybook/blocks@npm%3A8.0.10#~/.yarn/patches/@storybook-blocks-npm-8.0.10-6f477cd35f.patch",
|
||||
"@storybook/components": "^8.0.10",
|
||||
"@storybook/core-events": "^8.0.10",
|
||||
"@storybook/mdx2-csf": "1.1.0",
|
||||
"@storybook/preset-scss": "1.0.3",
|
||||
"@storybook/react": "7.4.5",
|
||||
"@storybook/react-webpack5": "7.4.5",
|
||||
"@storybook/theming": "7.4.5",
|
||||
"@storybook/preview-api": "^8.0.10",
|
||||
"@storybook/react": "^8.0.10",
|
||||
"@storybook/react-webpack5": "^8.0.10",
|
||||
"@storybook/theming": "^8.0.10",
|
||||
"@testing-library/dom": "10.0.0",
|
||||
"@testing-library/jest-dom": "6.4.2",
|
||||
"@testing-library/react": "15.0.2",
|
||||
@ -141,7 +142,7 @@
|
||||
"@types/mock-raf": "1.0.6",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-beautiful-dnd": "13.1.8",
|
||||
"@types/react-color": "3.0.12",
|
||||
"@types/react-dom": "18.2.25",
|
||||
@ -177,9 +178,8 @@
|
||||
"rollup-plugin-node-externals": "^5.0.0",
|
||||
"rollup-plugin-svg-import": "1.6.0",
|
||||
"sass-loader": "14.2.1",
|
||||
"storybook": "7.4.5",
|
||||
"storybook-addon-turbo-build": "2.0.1",
|
||||
"storybook-dark-mode": "3.0.1",
|
||||
"storybook": "^8.0.10",
|
||||
"storybook-dark-mode": "^4.0.1",
|
||||
"style-loader": "4.0.0",
|
||||
"typescript": "5.4.5",
|
||||
"webpack": "5.91.0"
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Props, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { AutoSaveField } from './AutoSaveField';
|
||||
import { Basic } from './AutoSaveField.story.tsx';
|
||||
|
||||
@ -267,7 +267,7 @@ _**What can be expected from the request?**_
|
||||
|
||||
## <a name="propstable"/>Props table
|
||||
|
||||
<ArgsTable of={AutoSaveField} />
|
||||
<ArgTypes of={AutoSaveField} />
|
||||
|
||||
## <a name="related"/>Related
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { Checkbox } from '../Forms/Checkbox';
|
||||
@ -72,7 +72,7 @@ const themeOptions = [
|
||||
{ value: 'system', label: 'System' },
|
||||
];
|
||||
|
||||
export const Basic: Story = (args) => {
|
||||
export const Basic: StoryFn = (args) => {
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
return (
|
||||
<AutoSaveField onFinishChange={args.inputSuccessful ? getSuccess : getError} {...args}>
|
||||
@ -96,7 +96,7 @@ Basic.args = {
|
||||
inputSuccessful: false,
|
||||
};
|
||||
|
||||
export const AllComponents: Story = (args) => {
|
||||
export const AllComponents: StoryFn = (args) => {
|
||||
const [selected, setSelected] = useState('');
|
||||
const [checkBoxTest, setCheckBoxTest] = useState(false);
|
||||
const [textAreaValue, setTextAreaValue] = useState('');
|
||||
|
||||
@ -14,7 +14,13 @@ const meta: Meta<typeof Badge> = {
|
||||
docs: { page: mdx },
|
||||
},
|
||||
argTypes: {
|
||||
icon: { options: iconOptions, control: { type: 'select' } },
|
||||
icon: {
|
||||
options: Object.keys(iconOptions),
|
||||
control: {
|
||||
type: 'select',
|
||||
labels: iconOptions,
|
||||
},
|
||||
},
|
||||
color: { control: 'select' },
|
||||
text: { control: 'text' },
|
||||
},
|
||||
|
||||
@ -34,7 +34,6 @@ const value = {
|
||||
numeric: value,
|
||||
};
|
||||
|
||||
//...
|
||||
<BarGauge
|
||||
value={70}
|
||||
field={field.config}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
|
||||
@ -110,14 +110,14 @@ const AddBarGaugeStory = (storyProps: StoryProps) => {
|
||||
return <BarGauge {...props} />;
|
||||
};
|
||||
|
||||
export const barGaugeVertical: Story<StoryProps> = AddBarGaugeStory.bind({});
|
||||
export const barGaugeVertical: StoryFn<StoryProps> = AddBarGaugeStory.bind({});
|
||||
barGaugeVertical.args = {
|
||||
height: 500,
|
||||
width: 100,
|
||||
orientation: VizOrientation.Vertical,
|
||||
};
|
||||
|
||||
export const barGaugeHorizontal: Story<StoryProps> = AddBarGaugeStory.bind({});
|
||||
export const barGaugeHorizontal: StoryFn<StoryProps> = AddBarGaugeStory.bind({});
|
||||
barGaugeHorizontal.args = {
|
||||
height: 100,
|
||||
width: 500,
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { FieldSparkline, FieldType } from '@grafana/data';
|
||||
@ -57,7 +57,7 @@ interface StoryProps extends Partial<Props> {
|
||||
valueText: string;
|
||||
}
|
||||
|
||||
export const ApplyNoValue: Story<StoryProps> = ({
|
||||
export const ApplyNoValue: StoryFn<StoryProps> = ({
|
||||
valueText,
|
||||
title,
|
||||
colorMode,
|
||||
@ -101,7 +101,7 @@ export const ApplyNoValue: Story<StoryProps> = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const Basic: Story<StoryProps> = ({
|
||||
export const Basic: StoryFn<StoryProps> = ({
|
||||
valueText,
|
||||
title,
|
||||
colorMode,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { Button } from '../Button/Button';
|
||||
@ -25,7 +25,7 @@ interface StoryProps extends Partial<CallToActionCardProps> {
|
||||
buttonText: string;
|
||||
}
|
||||
|
||||
export const Basic: Story<StoryProps> = (args) => {
|
||||
export const Basic: StoryFn<StoryProps> = (args) => {
|
||||
const ctaElements: { [key: string]: JSX.Element } = {
|
||||
custom: <h1>{args.H1Text}</h1>,
|
||||
button: (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { Field } from '../Forms/Field';
|
||||
@ -25,7 +25,7 @@ interface StoryProps extends Partial<Props> {
|
||||
buttonText: string;
|
||||
}
|
||||
|
||||
export const ClipboardButton: Story<StoryProps> = (args) => {
|
||||
export const ClipboardButton: StoryFn<StoryProps> = (args) => {
|
||||
const shareUrl = 'https://grafana.com/d/abcDEF-34t';
|
||||
|
||||
return (
|
||||
@ -35,7 +35,7 @@ export const ClipboardButton: Story<StoryProps> = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const AsInputFieldAddon: Story<StoryProps> = (args) => {
|
||||
export const AsInputFieldAddon: StoryFn<StoryProps> = (args) => {
|
||||
const shareUrl = 'https://grafana.com/d/abcDEF-34t';
|
||||
|
||||
return (
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Collapse } from './Collapse';
|
||||
|
||||
# Collapse
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { ConfirmButton } from '@grafana/ui';
|
||||
@ -48,7 +48,7 @@ interface StoryProps extends Partial<Props> {
|
||||
buttonText: string;
|
||||
}
|
||||
|
||||
export const Basic: Story<StoryProps> = (args) => {
|
||||
export const Basic: StoryFn<StoryProps> = (args) => {
|
||||
return (
|
||||
<ConfirmButton
|
||||
closeOnConfirm={args.closeOnConfirm}
|
||||
@ -65,7 +65,7 @@ export const Basic: Story<StoryProps> = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const WithCustomButton: Story<StoryProps> = (args) => {
|
||||
export const WithCustomButton: StoryFn<StoryProps> = (args) => {
|
||||
return (
|
||||
<ConfirmButton
|
||||
closeOnConfirm={args.closeOnConfirm}
|
||||
@ -84,7 +84,7 @@ export const WithCustomButton: Story<StoryProps> = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Delete: Story<StoryProps> = (args) => {
|
||||
export const Delete: StoryFn<StoryProps> = (args) => {
|
||||
return (
|
||||
<DeleteButton
|
||||
size={args.size}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { ConfirmModal } from './ConfirmModal';
|
||||
|
||||
<Meta title="MDX|ConfirmModal" component={ConfirmModal} />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { TimeRangeInput } from './TimeRangeInput';
|
||||
|
||||
# TimeRangeInput
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { FileDropzone } from './FileDropzone';
|
||||
|
||||
# FileDropzone
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { FileListItem } from './FileListItem';
|
||||
|
||||
# FileListItem
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { FileListItem as FileListItemComponent, FileListItemProps } from './FileListItem';
|
||||
@ -22,7 +22,7 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
export const FileListItem: Story<FileListItemProps> = (args) => {
|
||||
export const FileListItem: StoryFn<FileListItemProps> = (args) => {
|
||||
return <FileListItemComponent {...args} />;
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { FileUpload } from './FileUpload';
|
||||
|
||||
# FileUpload
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Checkbox } from './Checkbox';
|
||||
|
||||
<Meta title="MDX|Checkbox" component={Checkbox} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Field } from './Field';
|
||||
|
||||
<Meta title="MDX|Field" component={Field} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { FieldValues } from 'react-hook-form';
|
||||
|
||||
@ -29,7 +29,7 @@ const meta: Meta = {
|
||||
|
||||
export default meta;
|
||||
|
||||
export const Simple: Story = (args) => {
|
||||
export const Simple: StoryFn = (args) => {
|
||||
const defaultValues: FieldValues = {
|
||||
people: [{ firstName: 'Janis', lastName: 'Joplin' }],
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { FieldSet } from './FieldSet';
|
||||
|
||||
# FieldSet
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story } from '@storybook/react';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { ValidateResult } from 'react-hook-form';
|
||||
|
||||
@ -145,7 +145,7 @@ export const DefaultValues = () => {
|
||||
return <>{renderForm(defaultValues[0])}</>;
|
||||
};
|
||||
|
||||
export const AsyncValidation: Story = ({ passAsyncValidation }) => {
|
||||
export const AsyncValidation: StoryFn = ({ passAsyncValidation }) => {
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Label } from './Label';
|
||||
|
||||
<Meta title="MDX|Label" component={Label} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import { zip, fromPairs } from 'lodash';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
@ -25,7 +25,7 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
const Wrapper: Story = (args) => {
|
||||
const Wrapper: StoryFn = (args) => {
|
||||
const [value, setValue] = useState('');
|
||||
const validations = {
|
||||
[args.validationEvents]: [
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useCallback } from 'react';
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Legend } from './Legend';
|
||||
|
||||
<Meta title="MDX|Legend" component={Legend} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { RadioButtonGroup } from './RadioButtonGroup';
|
||||
|
||||
<Meta title="MDX|RadioButtonGroup" component={RadioButtonGroup} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { RadioButtonGroup } from './RadioButtonGroup';
|
||||
@ -25,7 +25,7 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
export const RadioButtons: Story = (args) => {
|
||||
export const RadioButtons: StoryFn = (args) => {
|
||||
const [selected, setSelected] = useState('elastic');
|
||||
|
||||
const options = [
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { RadioButtonList } from './RadioButtonList';
|
||||
|
||||
<Meta title="MDX|RadioButtonList" component={RadioButtonList} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, StoryFn, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { SelectableValue } from '@grafana/data';
|
||||
@ -93,7 +93,7 @@ export const WithDescriptions: StoryFn<typeof RadioButtonList> = ({ disabled, di
|
||||
</div>
|
||||
);
|
||||
|
||||
export const ControlledComponent: Story<RadioButtonListProps<string>> = ({ disabled, disabledOptions }) => {
|
||||
export const ControlledComponent: StoryFn<RadioButtonListProps<string>> = ({ disabled, disabledOptions }) => {
|
||||
const [selected, setSelected] = useState<string>(defaultOptions[0].value!);
|
||||
|
||||
return (
|
||||
@ -126,7 +126,7 @@ DisabledList.args = {
|
||||
disabled: true,
|
||||
};
|
||||
|
||||
export const Dots: Story = () => {
|
||||
export const Dots: StoryFn = () => {
|
||||
const Wrapper = ({ title, children }: React.PropsWithChildren<{ title: string }>) => (
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<h5>{title}</h5>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { ClipboardButton } from '../ClipboardButton/ClipboardButton';
|
||||
@ -27,7 +27,7 @@ const story: Meta = {
|
||||
|
||||
export default story;
|
||||
|
||||
export const InlineToast: Story<InlineToastProps> = (args) => {
|
||||
export const InlineToast: StoryFn<InlineToastProps> = (args) => {
|
||||
const [el, setEl] = useState<null | HTMLInputElement>(null);
|
||||
|
||||
return (
|
||||
@ -44,7 +44,7 @@ InlineToast.args = {
|
||||
suffixIcon: 'check',
|
||||
};
|
||||
|
||||
export const WithAButton: Story<InlineToastProps> = () => {
|
||||
export const WithAButton: StoryFn<InlineToastProps> = () => {
|
||||
return (
|
||||
<ClipboardButton icon="copy" getText={() => 'hello world'}>
|
||||
Copy surprise
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { InlineToast } from './InlineToast';
|
||||
|
||||
<Meta title="MDX|InlineToast" component={InlineToast} />
|
||||
|
||||
@ -9,7 +9,7 @@ You can use it or regular text input. When used, AutoSizeInput resizes itself to
|
||||
|
||||
## Prefix and suffix
|
||||
|
||||
To add more context to the input, you can add either text or an icon before or after the input using the `prefix` and `suffix`. Here are some examples for you to try in the canvas!
|
||||
To add more context to the input, you can add either text or an icon before or after the input using the `prefix` and `suffix`. Here are some examples for you to try in the Preview!
|
||||
|
||||
```jsx
|
||||
<AutoSizeInput prefix={<Icon name="search" />} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { Button, AutoSizeInput } from '@grafana/ui';
|
||||
@ -10,11 +10,11 @@ import { parseAccessory } from './storyUtils';
|
||||
|
||||
const icons: { [key: string]: string | undefined } = { ...iconOptions };
|
||||
Object.keys(icons).forEach((key) => {
|
||||
icons[key] = `icon-${icons[key]}`;
|
||||
icons[`icon-${key}`] = icons[key];
|
||||
});
|
||||
|
||||
const prefixSuffixOpts = {
|
||||
Text: '$',
|
||||
$: 'Text',
|
||||
...icons,
|
||||
};
|
||||
|
||||
@ -41,26 +41,28 @@ const meta: Meta = {
|
||||
prefixVisible: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: prefixSuffixOpts,
|
||||
labels: prefixSuffixOpts,
|
||||
},
|
||||
options: Object.keys(prefixSuffixOpts),
|
||||
},
|
||||
suffixVisible: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: prefixSuffixOpts,
|
||||
labels: prefixSuffixOpts,
|
||||
},
|
||||
options: Object.keys(prefixSuffixOpts),
|
||||
},
|
||||
type: {
|
||||
control: {
|
||||
type: 'select',
|
||||
options: ['text', 'number', 'password'],
|
||||
},
|
||||
options: ['text', 'number', 'password'],
|
||||
},
|
||||
minWidth: { control: { type: 'range', min: 10, max: 200, step: 10 } },
|
||||
},
|
||||
};
|
||||
|
||||
export const Simple: Story = (args) => {
|
||||
export const Simple: StoryFn = (args) => {
|
||||
const addonAfter = <Button variant="secondary">Load</Button>;
|
||||
const addonBefore = <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>AutoSizeInput</div>;
|
||||
const prefix = parseAccessory(args.prefixVisible);
|
||||
|
||||
@ -9,7 +9,7 @@ Used for regular text input. For an array of data or tree-structured data, consi
|
||||
|
||||
## Prefix and suffix
|
||||
|
||||
To add more context to the input you can add either text or an icon before or after the input. You can use the `prefix` and `suffix` props for this. Try some examples in the canvas!
|
||||
To add more context to the input you can add either text or an icon before or after the input. You can use the `prefix` and `suffix` props for this. Try some examples in the Preview!
|
||||
|
||||
```jsx
|
||||
<Input prefix={<Icon name="search" />} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { KeyValue } from '@grafana/data';
|
||||
@ -63,7 +63,7 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Simple: Story = (args) => {
|
||||
export const Simple: StoryFn = (args) => {
|
||||
const addonAfter = <Button variant="secondary">Load</Button>;
|
||||
const addonBefore = <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>Input</div>;
|
||||
const prefix = parseAccessory(args.prefixVisible);
|
||||
@ -91,7 +91,7 @@ Simple.args = {
|
||||
placeholder: 'Enter your name here...',
|
||||
};
|
||||
|
||||
export const WithFieldValidation: Story = (args) => {
|
||||
export const WithFieldValidation: StoryFn = (args) => {
|
||||
const [value, setValue] = useState('');
|
||||
|
||||
return (
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { Button, VerticalGroup, HorizontalGroup } from '@grafana/ui';
|
||||
@ -60,7 +60,7 @@ const meta: Meta = {
|
||||
|
||||
export default meta;
|
||||
|
||||
export const Horizontal: Story<LayoutProps> = (args) => {
|
||||
export const Horizontal: StoryFn<LayoutProps> = (args) => {
|
||||
return (
|
||||
<HorizontalGroup {...args}>
|
||||
<Button>Save</Button>
|
||||
@ -69,7 +69,7 @@ export const Horizontal: Story<LayoutProps> = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Vertical: Story<LayoutProps> = (args) => {
|
||||
export const Vertical: StoryFn<LayoutProps> = (args) => {
|
||||
return (
|
||||
<VerticalGroup {...args}>
|
||||
<Button>Save</Button>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Props, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { TextLink } from './TextLink';
|
||||
import { Basic } from './TextLink.story.tsx';
|
||||
|
||||
@ -143,7 +143,7 @@ Both, **external** and **internal** links can show a specific icon using the `ic
|
||||
|
||||
## <a name="propstable"/>Props table
|
||||
|
||||
<ArgsTable of={TextLink} />
|
||||
<ArgTypes of={TextLink} />
|
||||
|
||||
## <a name="related"/>Related
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import tinycolor from 'tinycolor2';
|
||||
|
||||
@ -69,7 +69,7 @@ const getItem = (inline = false) => {
|
||||
};
|
||||
};
|
||||
|
||||
export const basic: Story = (args) => {
|
||||
export const basic: StoryFn = (args) => {
|
||||
const { rawRenderer, customRenderer } = getItem();
|
||||
return (
|
||||
<List
|
||||
@ -79,7 +79,7 @@ export const basic: Story = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const inline: Story = (args) => {
|
||||
export const inline: StoryFn = (args) => {
|
||||
const { rawRenderer, customRenderer } = getItem(true);
|
||||
return (
|
||||
<InlineList
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Modal } from './Modal';
|
||||
import { ModalTabsHeader } from './ModalTabsHeader';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import { oneLineTrim } from 'common-tags';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
@ -46,7 +46,7 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic: Story = ({ body, title, ...args }) => {
|
||||
export const Basic: StoryFn = ({ body, title, ...args }) => {
|
||||
return (
|
||||
<Modal title={title} {...args}>
|
||||
{body}
|
||||
@ -73,7 +73,7 @@ const tabs = [
|
||||
{ label: '3rd child', value: 'third', active: false },
|
||||
];
|
||||
|
||||
export const WithTabs: Story = (args) => {
|
||||
export const WithTabs: StoryFn = (args) => {
|
||||
const [activeTab, setActiveTab] = useState('first');
|
||||
const modalHeader = (
|
||||
<ModalTabsHeader
|
||||
@ -103,7 +103,7 @@ WithTabs.args = {
|
||||
icon: 'cog',
|
||||
};
|
||||
|
||||
export const UsingContentClassName: Story = ({ title, body, ...args }) => {
|
||||
export const UsingContentClassName: StoryFn = ({ title, body, ...args }) => {
|
||||
const override = {
|
||||
modalContent: css({
|
||||
backgroundColor: 'darkorange',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Pagination } from './Pagination';
|
||||
|
||||
<Meta title="MDX|Pagination" component={Pagination} />
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { css } from '@emotion/css';
|
||||
import { Meta, Preview } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Preview } from '@storybook/blocks';
|
||||
import { PanelChrome } from './PanelChrome';
|
||||
|
||||
import { action } from '@storybook/addon-actions';
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { useArgs } from '@storybook/client-api';
|
||||
import { useArgs } from '@storybook/preview-api';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { auto } from '@popperjs/core';
|
||||
import { action } from '@storybook/addon-actions';
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { SelectableValue, toIconName } from '@grafana/data';
|
||||
@ -88,7 +88,7 @@ interface StoryProps extends Partial<SelectCommonProps<string>> {
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export const Basic: Story<StoryProps> = (args) => {
|
||||
export const Basic: StoryFn<StoryProps> = (args) => {
|
||||
const [value, setValue] = useState<SelectableValue<string>>();
|
||||
|
||||
return (
|
||||
@ -106,7 +106,7 @@ export const Basic: Story<StoryProps> = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const BasicVirtualizedList: Story<StoryProps> = (args) => {
|
||||
export const BasicVirtualizedList: StoryFn<StoryProps> = (args) => {
|
||||
const [value, setValue] = useState<SelectableValue<string>>();
|
||||
|
||||
return (
|
||||
@ -128,7 +128,7 @@ export const BasicVirtualizedList: Story<StoryProps> = (args) => {
|
||||
/**
|
||||
* Uses plain values instead of SelectableValue<T>
|
||||
*/
|
||||
export const BasicSelectPlainValue: Story<StoryProps> = (args) => {
|
||||
export const BasicSelectPlainValue: StoryFn<StoryProps> = (args) => {
|
||||
const [value, setValue] = useState<string>();
|
||||
return (
|
||||
<>
|
||||
@ -149,7 +149,7 @@ export const BasicSelectPlainValue: Story<StoryProps> = (args) => {
|
||||
/**
|
||||
* Uses plain values instead of SelectableValue<T>
|
||||
*/
|
||||
export const SelectWithOptionDescriptions: Story = (args) => {
|
||||
export const SelectWithOptionDescriptions: StoryFn = (args) => {
|
||||
// TODO this is not working with new Select
|
||||
|
||||
const [value, setValue] = useState<number>();
|
||||
@ -183,7 +183,7 @@ export const SelectWithOptionDescriptions: Story = (args) => {
|
||||
/**
|
||||
* Uses plain values instead of SelectableValue<T>
|
||||
*/
|
||||
export const MultiPlainValue: Story = (args) => {
|
||||
export const MultiPlainValue: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<string[]>();
|
||||
|
||||
return (
|
||||
@ -201,7 +201,7 @@ export const MultiPlainValue: Story = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const MultiSelectWithOptionGroups: Story = (args) => {
|
||||
export const MultiSelectWithOptionGroups: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<string[]>();
|
||||
|
||||
return (
|
||||
@ -223,7 +223,7 @@ export const MultiSelectWithOptionGroups: Story = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const MultiSelectBasic: Story = (args) => {
|
||||
export const MultiSelectBasic: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<Array<SelectableValue<string>>>([]);
|
||||
|
||||
return (
|
||||
@ -249,7 +249,7 @@ MultiSelectBasic.args = {
|
||||
noMultiValueWrap: false,
|
||||
};
|
||||
|
||||
export const MultiSelectAsync: Story = (args) => {
|
||||
export const MultiSelectAsync: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<Array<SelectableValue<string>>>();
|
||||
|
||||
return (
|
||||
@ -270,7 +270,7 @@ MultiSelectAsync.args = {
|
||||
allowCustomValue: false,
|
||||
};
|
||||
|
||||
export const BasicSelectAsync: Story = (args) => {
|
||||
export const BasicSelectAsync: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<SelectableValue<string>>();
|
||||
|
||||
return (
|
||||
@ -288,7 +288,7 @@ export const BasicSelectAsync: Story = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const AutoMenuPlacement: Story = (args) => {
|
||||
export const AutoMenuPlacement: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<SelectableValue<string>>();
|
||||
|
||||
return (
|
||||
@ -312,7 +312,7 @@ AutoMenuPlacement.args = {
|
||||
menuPlacement: auto,
|
||||
};
|
||||
|
||||
export const WidthAuto: Story = (args) => {
|
||||
export const WidthAuto: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<SelectableValue<string>>();
|
||||
|
||||
return (
|
||||
@ -334,7 +334,7 @@ export const WidthAuto: Story = (args) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const CustomValueCreation: Story = (args) => {
|
||||
export const CustomValueCreation: StoryFn = (args) => {
|
||||
const [value, setValue] = useState<SelectableValue<string>>();
|
||||
const [customOptions, setCustomOptions] = useState<Array<SelectableValue<string>>>([]);
|
||||
const options = generateOptions();
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { Spinner } from '@grafana/ui';
|
||||
@ -29,7 +29,7 @@ interface StoryProps extends Partial<Props> {
|
||||
withStyle: boolean;
|
||||
}
|
||||
|
||||
export const Basic: Story<StoryProps> = (args) => {
|
||||
export const Basic: StoryFn<StoryProps> = (args) => {
|
||||
return (
|
||||
<div>
|
||||
<Spinner
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { Switch } from './Switch';
|
||||
|
||||
<Meta title="MDX|Switch" component={Switch} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { ArgTypes, Preview } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { Table } from './Table';
|
||||
|
||||
# Table
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { TabsBar, Tab, TabContent, Counter as TabCounter } from '@grafana/ui';
|
||||
@ -23,7 +23,7 @@ const tabs = [
|
||||
{ label: '3rd child', key: 'third', active: false },
|
||||
];
|
||||
|
||||
export const Simple: Story = () => {
|
||||
export const Simple: StoryFn = () => {
|
||||
const [state, updateState] = useState(tabs);
|
||||
return (
|
||||
<DashboardStoryCanvas>
|
||||
@ -49,7 +49,7 @@ export const Simple: Story = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export const Counter: Story<CounterProps> = (args) => {
|
||||
export const Counter: StoryFn<CounterProps> = (args) => {
|
||||
return <TabCounter {...args} />;
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Props, Preview, ArgsTable } from '@storybook/addon-docs/blocks';
|
||||
import { Meta, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Text } from './Text';
|
||||
import { TextLink } from '../Link/TextLink.tsx';
|
||||
import { Basic } from './Text.story.tsx';
|
||||
@ -147,4 +147,4 @@ The Text component can be truncated. However, the Text component element rendere
|
||||
|
||||
## <a name="propstable"/>Props table
|
||||
|
||||
<ArgsTable of={Text} />
|
||||
<ArgTypes of={Text} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { TextArea } from '@grafana/ui';
|
||||
@ -21,7 +21,7 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic: Story = (args) => {
|
||||
export const Basic: StoryFn = (args) => {
|
||||
return (
|
||||
<div style={{ width: args.containerWidth }}>
|
||||
<TextArea invalid={args.invalid} placeholder={args.placeholder} cols={args.cols} disabled={args.disabled} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { EmotionPerfTest } from './EmotionPerfTest';
|
||||
@ -16,11 +16,11 @@ const meta: Meta = {
|
||||
},
|
||||
};
|
||||
|
||||
export const ThemeDemo: Story = () => {
|
||||
export const ThemeDemo: StoryFn = () => {
|
||||
return <NewThemeDemoComponent />;
|
||||
};
|
||||
|
||||
export const PerfTest: Story = () => {
|
||||
export const PerfTest: StoryFn = () => {
|
||||
return <EmotionPerfTest />;
|
||||
};
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { ArgTypes } from '@storybook/blocks';
|
||||
import { UnitPicker } from './UnitPicker';
|
||||
|
||||
# UnitPicker
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { UserIcon } from './UserIcon';
|
||||
import mdx from './UserIcon.mdx';
|
||||
|
||||
const meta: ComponentMeta<typeof UserIcon> = {
|
||||
const meta: Meta<typeof UserIcon> = {
|
||||
title: 'General/UsersIndicator/UserIcon',
|
||||
component: UserIcon,
|
||||
argTypes: {},
|
||||
@ -28,7 +28,7 @@ const meta: ComponentMeta<typeof UserIcon> = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic: ComponentStory<typeof UserIcon> = (args) => {
|
||||
export const Basic: StoryFn<typeof UserIcon> = (args) => {
|
||||
const userView = {
|
||||
user: {
|
||||
name: 'John Smith',
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { UsersIndicator } from './UsersIndicator';
|
||||
import mdx from './UsersIndicator.mdx';
|
||||
|
||||
const meta: ComponentMeta<typeof UsersIndicator> = {
|
||||
const meta: Meta<typeof UsersIndicator> = {
|
||||
title: 'General/UsersIndicator',
|
||||
component: UsersIndicator,
|
||||
argTypes: { limit: { control: { type: 'number', min: 1 } } },
|
||||
@ -27,7 +27,7 @@ const meta: ComponentMeta<typeof UsersIndicator> = {
|
||||
},
|
||||
};
|
||||
|
||||
export const Basic: ComponentStory<typeof UsersIndicator> = (args) => {
|
||||
export const Basic: StoryFn<typeof UsersIndicator> = (args) => {
|
||||
const users = [
|
||||
{
|
||||
name: 'John Doe',
|
||||
@ -50,7 +50,7 @@ Basic.args = {
|
||||
limit: 4,
|
||||
};
|
||||
|
||||
export const WithManyUsers: ComponentStory<typeof UsersIndicator> = (args) => {
|
||||
export const WithManyUsers: StoryFn<typeof UsersIndicator> = (args) => {
|
||||
const users = [
|
||||
{
|
||||
name: 'John Doe',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story, Preview, ArgTypes } from '@storybook/blocks';
|
||||
import { Meta, ArgTypes } from '@storybook/blocks';
|
||||
import { ValuePicker } from './ValuePicker';
|
||||
|
||||
<Meta title="MDX|Button" component={ValuePicker} />
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Meta, Story } from '@storybook/react';
|
||||
import { Meta, StoryFn } from '@storybook/react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import { VizLayout } from './VizLayout';
|
||||
@ -25,7 +25,7 @@ const createArray = (legendItems: number) => {
|
||||
return newArray;
|
||||
};
|
||||
|
||||
export const BottomLegend: Story = ({ height, width, legendItems }) => {
|
||||
export const BottomLegend: StoryFn = ({ height, width, legendItems }) => {
|
||||
const [items, setItems] = useState(createArray(legendItems));
|
||||
useEffect(() => {
|
||||
setItems(createArray(legendItems));
|
||||
@ -55,7 +55,7 @@ BottomLegend.args = {
|
||||
legendItems: 2,
|
||||
};
|
||||
|
||||
export const RightLegend: Story = ({ height, width, legendItems, legendWidth }) => {
|
||||
export const RightLegend: StoryFn = ({ height, width, legendItems, legendWidth }) => {
|
||||
const [items, setItems] = useState(createArray(legendItems));
|
||||
useEffect(() => {
|
||||
setItems(createArray(legendItems));
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story, Meta } from '@storybook/react';
|
||||
import { StoryFn, Meta } from '@storybook/react';
|
||||
import React, { FC, useEffect, useState } from 'react';
|
||||
|
||||
import { DisplayValue, GrafanaTheme2 } from '@grafana/data';
|
||||
@ -73,7 +73,7 @@ const LegendStoryDemo: FC<LegendStoryDemoProps> = ({ displayMode, seriesCount, n
|
||||
);
|
||||
};
|
||||
|
||||
export const WithNoValues: Story = ({ containerWidth, seriesCount }) => {
|
||||
export const WithNoValues: StoryFn = ({ containerWidth, seriesCount }) => {
|
||||
return (
|
||||
<div style={{ width: containerWidth }}>
|
||||
<LegendStoryDemo
|
||||
@ -98,7 +98,7 @@ export const WithNoValues: Story = ({ containerWidth, seriesCount }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export const WithValues: Story = ({ containerWidth, seriesCount }) => {
|
||||
export const WithValues: StoryFn = ({ containerWidth, seriesCount }) => {
|
||||
const stats: DisplayValue[] = [
|
||||
{
|
||||
title: 'Min',
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story } from '@storybook/react';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { GraphSeriesXY, FieldType, dateTime, FieldColorModeId } from '@grafana/data';
|
||||
@ -97,7 +97,7 @@ interface StoryProps extends GraphWithLegendProps {
|
||||
displayMode: string;
|
||||
}
|
||||
|
||||
export const WithLegend: Story<StoryProps> = ({ rightAxisSeries, displayMode, legendDisplayMode, ...args }) => {
|
||||
export const WithLegend: StoryFn<StoryProps> = ({ rightAxisSeries, displayMode, legendDisplayMode, ...args }) => {
|
||||
const props: Partial<GraphWithLegendProps> = {
|
||||
series: series.map((s) => {
|
||||
if (
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { getAvailableIcons } from '../../types';
|
||||
|
||||
export const iconOptions = {
|
||||
export const iconOptions: Record<string, string | undefined> = {
|
||||
None: undefined,
|
||||
...getAvailableIcons().reduce<Record<string, string>>((prev, c) => {
|
||||
return {
|
||||
...prev,
|
||||
[`Icon: ${c}`]: `${c}`,
|
||||
[`${c}`]: `Icon: ${c}`,
|
||||
};
|
||||
}, {}),
|
||||
};
|
||||
|
||||
@ -1 +1,4 @@
|
||||
export const SpacingTokenControl = { control: 'select', options: [0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10] };
|
||||
export const SpacingTokenControl = {
|
||||
control: 'select' as const,
|
||||
options: [0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10],
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { DecoratorFn } from '@storybook/react';
|
||||
import { Args, Decorator } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
interface Props {
|
||||
@ -43,13 +43,9 @@ const StoryContainer = ({ width, height, showBoundaries, children }: React.Props
|
||||
);
|
||||
};
|
||||
|
||||
export const withStoryContainer: DecoratorFn = (story, context) => {
|
||||
export const withStoryContainer: Decorator<Args> = (story, { args }) => {
|
||||
return (
|
||||
<StoryContainer
|
||||
width={context.args.containerWidth}
|
||||
height={context.args.containerHeight}
|
||||
showBoundaries={context.args.showBoundaries}
|
||||
>
|
||||
<StoryContainer width={args.containerWidth} height={args.containerHeight} showBoundaries={args.showBoundaries}>
|
||||
{story()}
|
||||
</StoryContainer>
|
||||
);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { DecoratorFn } from '@storybook/react';
|
||||
import { Decorator } from '@storybook/react';
|
||||
import React from 'react';
|
||||
import { useDarkMode } from 'storybook-dark-mode';
|
||||
|
||||
@ -51,6 +51,6 @@ export const renderComponentWithTheme = (component: React.ComponentType<any>, pr
|
||||
};
|
||||
|
||||
export const withTheme =
|
||||
(handleSassThemeChange: SassThemeChangeHandler): DecoratorFn =>
|
||||
(handleSassThemeChange: SassThemeChangeHandler): Decorator =>
|
||||
// eslint-disable-next-line react/display-name
|
||||
(story) => <ThemeableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemeableStory>;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Story } from '@storybook/react';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
import React from 'react';
|
||||
|
||||
import { useDelayedSwitch } from './useDelayedSwitch';
|
||||
@ -7,7 +7,7 @@ export default {
|
||||
title: 'useDelayedSwitch',
|
||||
};
|
||||
|
||||
export const Basic: Story = ({ value, delay, duration }) => {
|
||||
export const Basic: StoryFn = ({ value, delay, duration }) => {
|
||||
const valueDelayed = useDelayedSwitch(value, { delay, duration });
|
||||
return <div>{valueDelayed ? 'ON' : 'OFF'}</div>;
|
||||
};
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
"react-select-event": "5.5.1",
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/react-test-renderer": "18.3.0",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
"@types/jest": "29.5.12",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
"ts-node": "10.9.2",
|
||||
"typescript": "5.4.5",
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
"css-loader": "7.1.1",
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
"@types/jest": "29.5.12",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
"@types/uuid": "9.0.8",
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/logfmt": "^1.2.3",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/react-window": "1.8.8",
|
||||
"@types/uuid": "9.0.8",
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
"@types/jest": "29.5.12",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/testing-library__jest-dom": "5.14.9",
|
||||
"ts-node": "10.9.2",
|
||||
"typescript": "5.4.5",
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
"@testing-library/user-event": "14.5.2",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"ts-node": "10.9.2",
|
||||
"typescript": "5.4.5",
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/prismjs": "1.26.4",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"@types/semver": "7.5.8",
|
||||
"@types/uuid": "9.0.8",
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
"@types/jest": "29.5.12",
|
||||
"@types/lodash": "4.17.1",
|
||||
"@types/node": "20.12.11",
|
||||
"@types/react": "18.2.79",
|
||||
"@types/react": "18.3.2",
|
||||
"@types/react-dom": "18.2.25",
|
||||
"ts-node": "10.9.2",
|
||||
"typescript": "5.4.5",
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user