withStoryContainer: removes addon-knobs since we've migrated to controls (#35763)

* withStoryContainer: removes addon-knobs since we've migrated to controls

* refactored withStoryContainer utility so that users can be able to resize story

* Layout: added ability to resize story (#35824)

* Layout: added ability to resize story

* removes the knobs-disable config since its already been applied globally

* FieldArray: refactors story to use controls and ability to resize story (#35820)

* FieldArray: refactors story to use controls and ability to resize story

* added much better argTypes changed story name to capital case

* updates the FieldArray.mdx with the new usage examples

* fixes incorrect naming of the args

packages/grafana-ui/src/components/Forms/FieldArray.mdx

@@ -12,21 +12,21 @@ import { FieldArray } from './FieldArray';
 ```jsx
 import { Form, FieldArray } from '@grafana/ui';
 
-<Form>
+<Form onSubmit={() => console.log('form submitted')}>
   ({control, register}) => (
-  <FieldArray control={control} name="People">
-    {({ fields, append }) => (
-        <div>
-            {fields.map((field, index) => (
-                <div key={field.id}>
-                    <Input key={index} ref={register()} name=`people[${index}].firstName` value={field.firstName} />
-                    <Input ref={register()} name=`people[${index}].lastName` value={field.lastName} />
-                </div>
-            ))}
-            <Button onClick={() => append({firstName: 'Roger', lastName: 'Waters'})}>Append</Button>
-        </div>
-    )}
-  </FieldArray>
+    <FieldArray control={control} name="People">
+      {({ fields, append }) => (
+          <div>
+              {fields.map((field, index) => (
+                  <div key={field.id}>
+                      <Input key={index} {...register(`people[${index}].firstName` as const)} value={field.firstName} />
+                      <Input {...register(`people[${index}].lastName` as const)} value={field.lastName} />
+                  </div>
+              ))}
+              <Button onClick={() => append({firstName: 'Roger', lastName: 'Waters'})}>Append</Button>
+          </div>
+      )}
+    </FieldArray>
   )
 </Form>;
 ```

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

@@ -4,6 +4,7 @@ import { withStoryContainer } from '../../utils/storybook/withStoryContainer';
 import { Form, Input, Button, HorizontalGroup } from '@grafana/ui';
 import { FieldArray } from './FieldArray';
 import mdx from './FieldArray.mdx';
+import { Meta, Story } from '@storybook/react';
 
 export default {
   title: 'Forms/FieldArray',
@@ -13,10 +14,17 @@ export default {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: ['name', 'keyName', 'control', 'shouldUnregister'],
+    },
   },
-};
+  argTypes: {
+    containerWidth: { control: { type: 'range', min: 100, max: 500, step: 10 } },
+    containerHeight: { control: { type: 'range', min: 100, max: 500, step: 10 } },
+  },
+} as Meta;
 
-export const simple = () => {
+export const Simple: Story = (args) => {
   const defaultValues: any = {
     people: [{ firstName: 'Janis', lastName: 'Joplin' }],
   };
@@ -58,3 +66,8 @@ export const simple = () => {
     </Form>
   );
 };
+Simple.args = {
+  containerWidth: 300,
+  containerHeight: 0,
+  showBoundaries: false,
+};

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

@@ -15,9 +15,6 @@ export default {
     docs: {
       page: mdx,
     },
-    knobs: {
-      disabled: true,
-    },
     controls: {
       exclude: ['orientation'],
     },
@@ -28,8 +25,13 @@ export default {
     align: 'center',
     wrap: false,
     width: '100%',
+    containerWidth: 300,
+    containerHeight: 0,
+    showBoundaries: false,
   },
   argTypes: {
+    containerWidth: { control: { type: 'range', min: 100, max: 500, step: 10 } },
+    containerHeight: { control: { type: 'range', min: 100, max: 500, step: 10 } },
     justify: {
       control: {
         type: 'select',

packages/grafana-ui/src/utils/storybook/withStoryContainer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { boolean, number } from '@storybook/addon-knobs';
 import { css, cx } from '@emotion/css';
 import { RenderFunction } from '../../types';
+import { StoryContext } from '@storybook/react';
 
 const StoryContainer: React.FC<{ width?: number; height?: number; showBoundaries: boolean }> = ({
   children,
@@ -43,38 +43,12 @@ const StoryContainer: React.FC<{ width?: number; height?: number; showBoundaries
   );
 };
 
-export const withStoryContainer = (story: RenderFunction) => {
-  const CONTAINER_GROUP = 'Container options';
-  // ---
-  const containerBoundary = boolean('Show container boundary', false, CONTAINER_GROUP);
-  const fullWidthContainer = boolean('Full width container', false, CONTAINER_GROUP);
-  const containerWidth = number(
-    'Container width',
-    300,
-    {
-      range: true,
-      min: 100,
-      max: 500,
-      step: 10,
-    },
-    CONTAINER_GROUP
-  );
-  const containerHeight = number(
-    'Container height',
-    0,
-    {
-      range: true,
-      min: 100,
-      max: 500,
-      step: 10,
-    },
-    CONTAINER_GROUP
-  );
+export const withStoryContainer = (story: RenderFunction, context: StoryContext) => {
   return (
     <StoryContainer
-      width={fullWidthContainer ? undefined : containerWidth}
-      height={containerHeight}
-      showBoundaries={containerBoundary}
+      width={context.args.containerWidth}
+      height={context.args.containerHeight}
+      showBoundaries={context.args.showBoundaries}
     >
       {story()}
     </StoryContainer>