Input: updates story from knobs to control (#32712)

* Input: updates story from knobs to control

* assigned args value to a variable

* exported default as meta
This commit is contained in:
Uchechukwu Obasi 2021-04-07 16:58:35 +01:00 committed by GitHub
parent 0c2c52c627
commit ce6e31c030
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 73 additions and 69 deletions

View File

@ -1,11 +1,22 @@
import React, { useState } from 'react';
import { boolean, text, select, number } from '@storybook/addon-knobs';
import { Story, Meta } from '@storybook/react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import mdx from './Input.mdx';
import { getAvailableIcons, IconName } from '../../types';
import { KeyValue } from '@grafana/data';
import { Field, Icon, Button, Input } from '@grafana/ui';
const prefixSuffixOpts = {
None: null,
Text: '$',
...getAvailableIcons().reduce<KeyValue<string>>((prev, c) => {
return {
...prev,
[`Icon: ${c}`]: `icon-${c}`,
};
}, {}),
};
export default {
title: 'Forms/Input',
component: Input,
@ -14,47 +25,50 @@ export default {
docs: {
page: mdx,
},
},
};
export const Simple = () => {
const prefixSuffixOpts = {
None: null,
Text: '$',
...getAvailableIcons().reduce<KeyValue<string>>((prev, c) => {
return {
...prev,
[`Icon: ${c}`]: `icon-${c}`,
};
}, {}),
};
const BEHAVIOUR_GROUP = 'Behaviour props';
// ---
const type = select(
'Type',
{
text: 'text',
password: 'password',
number: 'number',
knobs: {
disable: true,
},
'text',
BEHAVIOUR_GROUP
);
const disabled = boolean('Disabled', false, BEHAVIOUR_GROUP);
const invalid = boolean('Invalid', false, BEHAVIOUR_GROUP);
const loading = boolean('Loading', false, BEHAVIOUR_GROUP);
controls: {
exclude: ['prefix', 'suffix', 'addonBefore', 'addonAfter'],
},
},
args: {
type: 'text',
width: 40,
prefixVisible: '',
suffixVisible: '',
invalid: false,
loading: false,
},
argTypes: {
prefixVisible: {
control: {
type: 'select',
options: prefixSuffixOpts,
},
},
suffixVisible: {
control: {
type: 'select',
options: prefixSuffixOpts,
},
},
type: {
control: {
type: 'select',
options: ['text', 'number', 'password'],
},
},
// validation: { name: 'Validation regex (will do a partial match if you do not anchor it)' },
width: { control: { type: 'range', min: 10, max: 200, step: 10 } },
},
} as Meta;
const VISUAL_GROUP = 'Visual options';
// ---
const width = number('Width', 0, undefined, VISUAL_GROUP);
const placeholder = text('Placeholder', 'Enter your name here...', VISUAL_GROUP);
const before = boolean('Addon before', false, VISUAL_GROUP);
const after = boolean('Addon after', false, VISUAL_GROUP);
export const Simple: Story = (args) => {
const addonAfter = <Button variant="secondary">Load</Button>;
const addonBefore = <div style={{ display: 'flex', alignItems: 'center', padding: '5px' }}>Input</div>;
const prefix = select('Prefix', prefixSuffixOpts, null, VISUAL_GROUP);
const suffix = select('Suffix', prefixSuffixOpts, null, VISUAL_GROUP);
const prefix = args.prefixVisible;
const suffix = args.suffixVisible;
let prefixEl: any = prefix;
if (prefix && prefix.match(/icon-/g)) {
prefixEl = <Icon name={prefix.replace(/icon-/g, '') as IconName} />;
@ -64,45 +78,35 @@ export const Simple = () => {
suffixEl = <Icon name={suffix.replace(/icon-/g, '') as IconName} />;
}
const CONTAINER_GROUP = 'Container options';
// ---
const containerWidth = number(
'Container width',
300,
{
range: true,
min: 100,
max: 500,
step: 10,
},
CONTAINER_GROUP
);
return (
<div style={{ width: containerWidth }}>
<Input
disabled={disabled}
width={width}
prefix={prefixEl}
invalid={invalid}
suffix={suffixEl}
loading={loading}
addonBefore={before && addonBefore}
addonAfter={after && addonAfter}
type={type}
placeholder={placeholder}
/>
</div>
<Input
disabled={args.disabled}
width={args.width}
prefix={prefixEl}
invalid={args.invalid}
suffix={suffixEl}
loading={args.loading}
addonBefore={args.before && addonBefore}
addonAfter={args.after && addonAfter}
type={args.type}
placeholder={args.placeholder}
/>
);
};
Simple.args = {
disabled: false,
before: false,
after: false,
placeholder: 'Enter your name here...',
};
export const WithFieldValidation = () => {
export const WithFieldValidation: Story = (args) => {
const [value, setValue] = useState('');
return (
<div>
<Field invalid={value === ''} error={value === '' ? 'This input is required' : ''}>
<Input value={value} onChange={(e) => setValue(e.currentTarget.value)} />
<Input value={value} onChange={(e) => setValue(e.currentTarget.value)} {...args} />
</Field>
</div>
);

View File

@ -60,4 +60,4 @@
}
]
}
}
}