IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-13 09:32:12 -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,
"overrides": [
{
"files": ["packages/grafana-ui/**/*.{ts,tsx}", "public/app/**/*.{ts,tsx}"],
"files": ["packages/grafana-ui/**/*/!(*.story).{ts,tsx}", "public/app/**/*.{ts,tsx}"],
"rules": {
"react-hooks/rules-of-hooks": "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();
return (
<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 onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]);
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 };
};
export const simple = () => {
export const Simple = () => {
const { containerWidth, ...otherProps } = getKnobs();
return (
<div style={{ width: containerWidth }}>
@ -48,7 +48,7 @@ export const simple = () => {
);
};
export const horizontalLayout = () => {
export const HorizontalLayout = () => {
const [checked, setChecked] = useState(false);
const onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]);
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>
);
export const basic = () => {
export const Basic = () => {
return <>{renderForm()}</>;
};
export const defaultValues = () => {
export const DefaultValues = () => {
const defaultValues = [
{
name: 'Roger Waters',
@ -162,7 +162,7 @@ export const defaultValues = () => {
);
};
export const asyncValidation = () => {
export const AsyncValidation = () => {
const passAsyncValidation = boolean('Pass username validation', true);
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 { UseState } from '../../../../utils/storybook/UseState';
import { SelectableValue } from '@grafana/data';
import { Select, AsyncSelect } from './Select';
import { Select, AsyncSelect as AsyncSelectComponent } from './Select';
export default {
title: 'Forms/Legacy/Select',
@ -70,22 +70,19 @@ export const withAllowCustomValue = () => {
);
};
export const asyncSelect = () => {
export const AsyncSelect = () => {
const [isLoading, setIsLoading] = useState<boolean>(true);
const [value, setValue] = useState<SelectableValue<any>>();
const loadAsyncOptions = useCallback(
inputValue => {
return new Promise<Array<SelectableValue<string>>>(resolve => {
setTimeout(() => {
setIsLoading(false);
resolve(options.filter(option => option.label && option.label.includes(inputValue)));
}, 1000);
});
},
[value]
);
const loadAsyncOptions = useCallback(inputValue => {
return new Promise<Array<SelectableValue<string>>>(resolve => {
setTimeout(() => {
setIsLoading(false);
resolve(options.filter(option => option.label && option.label.includes(inputValue)));
}, 1000);
});
}, []);
return (
<AsyncSelect
<AsyncSelectComponent
value={value}
defaultOptions
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'];
export const simple = () => {
export const Simple = () => {
const [selected, setSelected] = useState('graphite');
const BEHAVIOUR_GROUP = 'Behaviour props';
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 BEHAVIOUR_GROUP = 'Behaviour props';
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));
export const iconsOverview = () => {
export const IconsOverview = () => {
const [filter, setFilter] = useState('');
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();
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 = {
None: null,
Text: '$',
@ -96,7 +96,7 @@ export const simple = () => {
);
};
export const withFieldValidation = () => {
export const WithFieldValidation = () => {
const [value, setValue] = useState('');
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 },
];
export const withTabs = () => {
export const WithTabs = () => {
const [activeTab, setActiveTab] = useState('first');
const modalHeader = (
<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>>();
return (
@ -107,7 +107,7 @@ export const basic = () => {
/**
* Uses plain values instead of SelectableValue<T>
*/
export const basicSelectPlainValue = () => {
export const BasicSelectPlainValue = () => {
const [value, setValue] = useState<string>();
return (
<>
@ -158,7 +158,7 @@ export const SelectWithOptionDescriptions = () => {
/**
* Uses plain values instead of SelectableValue<T>
*/
export const multiPlainValue = () => {
export const MultiPlainValue = () => {
const [value, setValue] = useState<string[]>();
return (
@ -175,7 +175,7 @@ export const multiPlainValue = () => {
);
};
export const multiSelect = () => {
export const MultiSelectBasic = () => {
const [value, setValue] = useState<Array<SelectableValue<string>>>([]);
return (
@ -193,7 +193,7 @@ export const multiSelect = () => {
);
};
export const multiSelectAsync = () => {
export const MultiSelectAsync = () => {
const [value, setValue] = useState<Array<SelectableValue<string>>>();
return (
@ -209,7 +209,7 @@ export const multiSelectAsync = () => {
/>
);
};
export const buttonSelect = () => {
export const ButtonSelectBasic = () => {
const [value, setValue] = useState<SelectableValue<string>>();
const icon = getIconKnob();
return (
@ -227,7 +227,7 @@ export const buttonSelect = () => {
);
};
export const basicSelectAsync = () => {
export const BasicSelectAsync = () => {
const [value, setValue] = useState<SelectableValue<string>>();
return (
@ -243,7 +243,7 @@ export const basicSelectAsync = () => {
);
};
export const customizedControl = () => {
export const CustomizedControl = () => {
const [value, setValue] = useState<SelectableValue<string>>();
return (
@ -266,7 +266,7 @@ export const customizedControl = () => {
);
};
export const autoMenuPlacement = () => {
export const AutoMenuPlacement = () => {
const [value, setValue] = useState<SelectableValue<string>>();
return (
@ -285,7 +285,7 @@ export const autoMenuPlacement = () => {
);
};
export const customValueCreation = () => {
export const CustomValueCreation = () => {
const [value, setValue] = useState<SelectableValue<string>>();
const [customOptions, setCustomOptions] = useState<Array<SelectableValue<string>>>([]);
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 onChange = useCallback(e => setChecked(e.currentTarget.checked), [setChecked]);
const BEHAVIOUR_GROUP = 'Behaviour props';
@ -23,7 +23,7 @@ export const controlled = () => {
return <Switch value={checked} disabled={disabled} onChange={onChange} />;
};
export const uncontrolled = () => {
export const Uncontrolled = () => {
const BEHAVIOUR_GROUP = 'Behaviour props';
const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
return <Switch disabled={disabled} />;