Chore: Add Input stories (#16897)

packages/grafana-ui/src/components/Input/Input.story.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { zip, fromPairs } from 'lodash';
+
+import { storiesOf } from '@storybook/react';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { Input } from './Input';
+import { text, select } from '@storybook/addon-knobs';
+import { EventsWithValidation } from '../../utils';
+
+const getKnobs = () => {
+  return {
+    validation: text('Validation regex (will do a partial match if you do not anchor it)', ''),
+    validationErrorMessage: text('Validation error message', 'Input not valid'),
+    validationEvent: select(
+      'Validation event',
+      fromPairs(zip(Object.keys(EventsWithValidation), Object.values(EventsWithValidation))),
+      EventsWithValidation.onBlur
+    ),
+  };
+};
+
+const Wrapper = () => {
+  const { validation, validationErrorMessage, validationEvent } = getKnobs();
+  const [value, setValue] = useState('');
+  const validations = {
+    [validationEvent]: [
+      {
+        rule: (value: string) => {
+          return !!value.match(validation);
+        },
+        errorMessage: validationErrorMessage,
+      },
+    ],
+  };
+  return <Input value={value} onChange={e => setValue(e.currentTarget.value)} validationEvents={validations} />;
+};
+
+const story = storiesOf('UI/Input', module);
+story.addDecorator(withCenteredStory);
+story.add('input', () => <Wrapper />);

packages/grafana-ui/src/components/Input/Input.tsx

@@ -18,7 +18,11 @@ interface Props extends React.HTMLProps<HTMLInputElement> {
   onChange?: (event: React.ChangeEvent<HTMLInputElement>, status?: InputStatus) => void;
 }
 
-export class Input extends PureComponent<Props> {
+interface State {
+  error: string | null;
+}
+
+export class Input extends PureComponent<Props, State> {
   static defaultProps = {
     className: '',
   };

packages/grafana-ui/src/components/Switch/Switch.story.tsx

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { Switch } from './Switch';
+import { text } from '@storybook/addon-knobs';
+
+const getKnobs = () => {
+  return {
+    label: text('Label Text', 'Label'),
+  };
+};
+
+const SwitchWrapper = () => {
+  const { label } = getKnobs();
+  const [checked, setChecked] = useState(false);
+  return <Switch label={label} checked={checked} onChange={() => setChecked(!checked)} />;
+};
+
+const story = storiesOf('UI/Switch', module);
+story.addDecorator(withCenteredStory);
+story.add('switch', () => <SwitchWrapper />);

packages/grafana-ui/src/components/Switch/Switch.tsx

@@ -12,7 +12,7 @@ export interface Props {
 }
 
 export interface State {
-  id: any;
+  id: string;
 }
 
 export class Switch extends PureComponent<Props, State> {

packages/grafana-ui/src/types/input.ts

@@ -4,5 +4,6 @@
 }
 
 export interface ValidationEvents {
+  // Event name should be one of EventsWithValidation enum
   [eventName: string]: ValidationRule[];
 }