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

Fix errors in grafana-ui's storybook files (#28004)

Browse Source
This commit is contained in:
Zoltán Bedi 2020-10-03 11:53:01 +02:00 committed by GitHub
parent 6173aa70b7
commit b00755a2d9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 38 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc
View File

@ -3,7 +3,7 @@
"root": true, "root": true,
"overrides": [ "overrides": [
{ {
"files": ["packages/grafana-ui/**/*.{ts,tsx}", "public/app/**/*.{ts,tsx}"], "files": ["packages/grafana-ui/**/*/!(*.story).{ts,tsx}", "public/app/**/*.{ts,tsx}"],
"rules": { "rules": {
"react-hooks/rules-of-hooks": "off", "react-hooks/rules-of-hooks": "off",
"react-hooks/exhaustive-deps": "off" "react-hooks/exhaustive-deps": "off"

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

@ -16,7 +16,7 @@ export default {
}, },
}; };
export const single = () => { export const Single = () => {
const size = useSize(); const size = useSize();
return ( return (
<FileUpload <FileUpload

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

@ -12,7 +12,7 @@ export default {
}, },
}; };
export const controlled = () => { export const Controlled = () => {
const [checked, setChecked] = useState(false); const [checked, setChecked] = useState(false);
const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]); const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]);
return ( return (

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

@ -37,7 +37,7 @@ const getKnobs = () => {
return { containerWidth, disabled, invalid, loading, error }; return { containerWidth, disabled, invalid, loading, error };
}; };
export const simple = () => { export const Simple = () => {
const { containerWidth, ...otherProps } = getKnobs(); const { containerWidth, ...otherProps } = getKnobs();
return ( return (
<div style={{ width: containerWidth }}> <div style={{ width: containerWidth }}>
@ -48,7 +48,7 @@ export const simple = () => {
); );
}; };
export const horizontalLayout = () => { export const HorizontalLayout = () => {
const [checked, setChecked] = useState(false); const [checked, setChecked] = useState(false);
const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]); const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]);
const { containerWidth, ...otherProps } = getKnobs(); const { containerWidth, ...otherProps } = getKnobs();

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

@ -120,11 +120,11 @@ const renderForm = (defaultValues?: Partial<FormDTO>) => (
</Form> </Form>
); );
export const basic = () => { export const Basic = () => {
return <>{renderForm()}</>; return <>{renderForm()}</>;
}; };
export const defaultValues = () => { export const DefaultValues = () => {
const defaultValues = [ const defaultValues = [
{ {
name: 'Roger Waters', name: 'Roger Waters',
@ -162,7 +162,7 @@ export const defaultValues = () => {
); );
}; };
export const asyncValidation = () => { export const AsyncValidation = () => {
const passAsyncValidation = boolean('Pass username validation', true); const passAsyncValidation = boolean('Pass username validation', true);
return ( return (
<> <>

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

@ -4,7 +4,7 @@ import { withKnobs, object } from '@storybook/addon-knobs';
import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory';
import { UseState } from '../../../../utils/storybook/UseState'; import { UseState } from '../../../../utils/storybook/UseState';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { Select, AsyncSelect } from './Select'; import { Select, AsyncSelect as AsyncSelectComponent } from './Select';
export default { export default {
title: 'Forms/Legacy/Select', title: 'Forms/Legacy/Select',
@ -70,22 +70,19 @@ export const withAllowCustomValue = () => {
); );
}; };
export const asyncSelect = () => { export const AsyncSelect = () => {
const [isLoading, setIsLoading] = useState<boolean>(true); const [isLoading, setIsLoading] = useState<boolean>(true);
const [value, setValue] = useState<SelectableValue<any>>(); const [value, setValue] = useState<SelectableValue<any>>();
const loadAsyncOptions = useCallback( const loadAsyncOptions = useCallback(inputValue => {
inputValue => { return new Promise<Array<SelectableValue<string>>>(resolve => {
return new Promise<Array<SelectableValue<string>>>(resolve => { setTimeout(() => {
setTimeout(() => { setIsLoading(false);
setIsLoading(false); resolve(options.filter(option => option.label && option.label.includes(inputValue)));
resolve(options.filter(option => option.label && option.label.includes(inputValue))); }, 1000);
}, 1000); });
}); }, []);
},
[value]
);
return ( return (
<AsyncSelect <AsyncSelectComponent
value={value} value={value}
defaultOptions defaultOptions
width={20} width={20}

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

@ -16,7 +16,7 @@ export default {
const sizes: RadioButtonSize[] = ['sm', 'md']; const sizes: RadioButtonSize[] = ['sm', 'md'];
export const simple = () => { export const Simple = () => {
const [selected, setSelected] = useState('graphite'); const [selected, setSelected] = useState('graphite');
const BEHAVIOUR_GROUP = 'Behaviour props'; const BEHAVIOUR_GROUP = 'Behaviour props';
const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP); const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
@ -42,7 +42,7 @@ export const simple = () => {
); );
}; };
export const fullWidth = () => { export const FullWidth = () => {
const [selected, setSelected] = useState('elastic'); const [selected, setSelected] = useState('elastic');
const BEHAVIOUR_GROUP = 'Behaviour props'; const BEHAVIOUR_GROUP = 'Behaviour props';
const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP); const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);

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

@ -61,7 +61,7 @@ const IconWrapper: React.FC<{ name: IconName }> = ({ name }) => {
const icons = getAvailableIcons().sort((a, b) => a.localeCompare(b)); const icons = getAvailableIcons().sort((a, b) => a.localeCompare(b));
export const iconsOverview = () => { export const IconsOverview = () => {
const [filter, setFilter] = useState(''); const [filter, setFilter] = useState('');
const searchIcon = (event: ChangeEvent<HTMLInputElement>) => { const searchIcon = (event: ChangeEvent<HTMLInputElement>) => {

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

@ -15,7 +15,7 @@ export default {
}, },
}; };
export const simple = () => { export const Simple = () => {
const theme = useTheme(); const theme = useTheme();
return ( return (

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

@ -17,7 +17,7 @@ export default {
}, },
}; };
export const simple = () => { export const Simple = () => {
const prefixSuffixOpts = { const prefixSuffixOpts = {
None: null, None: null,
Text: '$', Text: '$',
@ -96,7 +96,7 @@ export const simple = () => {
); );
}; };
export const withFieldValidation = () => { export const WithFieldValidation = () => {
const [value, setValue] = useState(''); const [value, setValue] = useState('');
return ( return (

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

@ -58,7 +58,7 @@ const tabs = [
{ label: '3rd child', value: 'third', active: false }, { label: '3rd child', value: 'third', active: false },
]; ];
export const withTabs = () => { export const WithTabs = () => {
const [activeTab, setActiveTab] = useState('first'); const [activeTab, setActiveTab] = useState('first');
const modalHeader = ( const modalHeader = (
<ModalTabsHeader <ModalTabsHeader

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

@ -87,7 +87,7 @@ const getDynamicProps = () => {
}; };
}; };
export const basic = () => { export const Basic = () => {
const [value, setValue] = useState<SelectableValue<string>>(); const [value, setValue] = useState<SelectableValue<string>>();
return ( return (
@ -107,7 +107,7 @@ export const basic = () => {
/** /**
* Uses plain values instead of SelectableValue<T> * Uses plain values instead of SelectableValue<T>
*/ */
export const basicSelectPlainValue = () => { export const BasicSelectPlainValue = () => {
const [value, setValue] = useState<string>(); const [value, setValue] = useState<string>();
return ( return (
<> <>
@ -158,7 +158,7 @@ export const SelectWithOptionDescriptions = () => {
/** /**
* Uses plain values instead of SelectableValue<T> * Uses plain values instead of SelectableValue<T>
*/ */
export const multiPlainValue = () => { export const MultiPlainValue = () => {
const [value, setValue] = useState<string[]>(); const [value, setValue] = useState<string[]>();
return ( return (
@ -175,7 +175,7 @@ export const multiPlainValue = () => {
); );
}; };
export const multiSelect = () => { export const MultiSelectBasic = () => {
const [value, setValue] = useState<Array<SelectableValue<string>>>([]); const [value, setValue] = useState<Array<SelectableValue<string>>>([]);
return ( return (
@ -193,7 +193,7 @@ export const multiSelect = () => {
); );
}; };
export const multiSelectAsync = () => { export const MultiSelectAsync = () => {
const [value, setValue] = useState<Array<SelectableValue<string>>>(); const [value, setValue] = useState<Array<SelectableValue<string>>>();
return ( return (
@ -209,7 +209,7 @@ export const multiSelectAsync = () => {
/> />
); );
}; };
export const buttonSelect = () => { export const ButtonSelectBasic = () => {
const [value, setValue] = useState<SelectableValue<string>>(); const [value, setValue] = useState<SelectableValue<string>>();
const icon = getIconKnob(); const icon = getIconKnob();
return ( return (
@ -227,7 +227,7 @@ export const buttonSelect = () => {
); );
}; };
export const basicSelectAsync = () => { export const BasicSelectAsync = () => {
const [value, setValue] = useState<SelectableValue<string>>(); const [value, setValue] = useState<SelectableValue<string>>();
return ( return (
@ -243,7 +243,7 @@ export const basicSelectAsync = () => {
); );
}; };
export const customizedControl = () => { export const CustomizedControl = () => {
const [value, setValue] = useState<SelectableValue<string>>(); const [value, setValue] = useState<SelectableValue<string>>();
return ( return (
@ -266,7 +266,7 @@ export const customizedControl = () => {
); );
}; };
export const autoMenuPlacement = () => { export const AutoMenuPlacement = () => {
const [value, setValue] = useState<SelectableValue<string>>(); const [value, setValue] = useState<SelectableValue<string>>();
return ( return (
@ -285,7 +285,7 @@ export const autoMenuPlacement = () => {
); );
}; };
export const customValueCreation = () => { export const CustomValueCreation = () => {
const [value, setValue] = useState<SelectableValue<string>>(); const [value, setValue] = useState<SelectableValue<string>>();
const [customOptions, setCustomOptions] = useState<Array<SelectableValue<string>>>([]); const [customOptions, setCustomOptions] = useState<Array<SelectableValue<string>>>([]);
const options = generateOptions(); const options = generateOptions();

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

@ -15,7 +15,7 @@ export default {
}, },
}; };
export const controlled = () => { export const Controlled = () => {
const [checked, setChecked] = useState(false); const [checked, setChecked] = useState(false);
const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]); const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]);
const BEHAVIOUR_GROUP = 'Behaviour props'; const BEHAVIOUR_GROUP = 'Behaviour props';
@ -23,7 +23,7 @@ export const controlled = () => {
return <Switch value={checked} disabled={disabled} onChange={onChange} />; return <Switch value={checked} disabled={disabled} onChange={onChange} />;
}; };
export const uncontrolled = () => { export const Uncontrolled = () => {
const BEHAVIOUR_GROUP = 'Behaviour props'; const BEHAVIOUR_GROUP = 'Behaviour props';
const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP); const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
return <Switch disabled={disabled} />; return <Switch disabled={disabled} />;