Form: update story from knobs to controls (#32022)

* Form: update story from knobs to controls

* some code cleanup

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

@@ -1,10 +1,10 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
 import mdx from './Form.mdx';
 import { ValidateResult } from 'react-hook-form';
-import { boolean } from '@storybook/addon-knobs';
+import { Story } from '@storybook/react';
 import {
   Field,
   Legend,
@@ -26,6 +26,9 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
   },
 };
 
@@ -135,35 +138,12 @@ export const DefaultValues = () => {
       select: 'option1',
       switch: true,
     },
-    {
-      name: 'John Waters',
-      nested: {
-        path: 'Nested path default value updated',
-      },
-      radio: 'option1',
-      select: 'option2',
-      switch: false,
-    },
   ];
-  const [defaultsIdx, setDefaultsIdx] = useState(0);
 
-  return (
-    <>
-      {renderForm(defaultValues[defaultsIdx])}
-      <Button
-        onClick={() => {
-          setDefaultsIdx((s) => (s + 1) % 2);
-        }}
-        variant="secondary"
-      >
-        Change default values
-      </Button>
-    </>
-  );
+  return <>{renderForm(defaultValues[0])}</>;
 };
 
-export const AsyncValidation = () => {
-  const passAsyncValidation = boolean('Pass username validation', true);
+export const AsyncValidation: Story = ({ passAsyncValidation }) => {
   return (
     <>
       <Form
@@ -194,6 +174,9 @@ export const AsyncValidation = () => {
     </>
   );
 };
+AsyncValidation.args = {
+  passAsyncValidation: true,
+};
 
 const validateAsync = (shouldPass: boolean) => async () => {
   try {