Legacy Input: updates story from knobs to control (#32059)

packages/grafana-ui/src/components/Forms/Legacy/Input/Input.story.internal.tsx

@@ -3,41 +3,57 @@ import { zip, fromPairs } from 'lodash';
 
 import { withCenteredStory } from '../../../../utils/storybook/withCenteredStory';
 import { Input } from './Input';
-import { text, select } from '@storybook/addon-knobs';
+import { Story } from '@storybook/react';
 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} />;
-};
+import { NOOP_CONTROL } from '../../../../utils/storybook/noopControl';
 
 export default {
   title: 'Forms/Legacy/Input',
   component: Input,
   decorators: [withCenteredStory],
+  parameters: {
+    knobs: {
+      disable: true,
+    },
+  },
+  argTypes: {
+    validationEvents: {
+      control: {
+        type: 'select',
+        options: fromPairs(zip(Object.keys(EventsWithValidation), Object.values(EventsWithValidation))),
+      },
+    },
+    validation: { name: 'Validation regex (will do a partial match if you do not anchor it)' },
+    inputRef: NOOP_CONTROL,
+  },
 };
 
-export const basic = () => <Wrapper />;
+const Wrapper: Story = (args) => {
+  const [value, setValue] = useState('');
+  const validations = {
+    [args.validationEvents]: [
+      {
+        rule: (value: string) => {
+          return !!value.match(args.validation);
+        },
+        errorMessage: args.validationErrorMessage,
+      },
+    ],
+  };
+  return (
+    <Input
+      value={value}
+      onChange={(e) => setValue(e.currentTarget.value)}
+      validationEvents={validations}
+      hideErrorMessage={args.hideErrorMessage}
+    />
+  );
+};
+
+export const Basic = Wrapper.bind({});
+Basic.args = {
+  validation: '',
+  validationErrorMessage: 'Input not valid',
+  validationEvents: EventsWithValidation.onBlur,
+  hideErrorMessage: false,
+};

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

@@ -8,7 +8,7 @@ export enum LegacyInputStatus {
   Valid = 'valid',
 }
 
-interface Props extends React.HTMLProps<HTMLInputElement> {
+export interface Props extends React.HTMLProps<HTMLInputElement> {
   validationEvents?: ValidationEvents;
   hideErrorMessage?: boolean;
   inputRef?: React.LegacyRef<HTMLInputElement>;