BigValue: updates story from knobs to controls (#31240)

* BigValue: updates story from knobs to controls

* some refactoring to make code more readable

* made some changes

packages/grafana-ui/.storybook/preview.ts

@@ -59,3 +59,5 @@ export const parameters = {
     escapeHTML: false,
     escapeHTML: false,
   },
   },
 };
 };
+
+export const NOOP_CONTROL = { control: { disable: true } };

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

 import React from 'react';
 import React from 'react';
-import { color, number, select, text } from '@storybook/addon-knobs';
-import { BigValue, BigValueColorMode, BigValueGraphMode, BigValueJustifyMode, BigValueTextMode } from './BigValue';
+import { Story } from '@storybook/react';
+import {
+  BigValue,
+  BigValueColorMode,
+  BigValueGraphMode,
+  BigValueJustifyMode,
+  BigValueTextMode,
+  Props,
+} from './BigValue';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './BigValue.mdx';
 import mdx from './BigValue.mdx';
 import { useTheme } from '../../themes';
 import { useTheme } from '../../themes';
+import { NOOP_CONTROL } from '@grafana/ui/.storybook/preview';
 import { ArrayVector, FieldSparkline, FieldType } from '@grafana/data';
 import { ArrayVector, FieldSparkline, FieldType } from '@grafana/data';
 
 
-const getKnobs = () => {
-  return {
-    value: text('value', '$5022'),
-    title: text('title', 'Total Earnings'),
-    colorMode: select('Color mode', [BigValueColorMode.Value, BigValueColorMode.Background], BigValueColorMode.Value),
-    graphMode: select('Graph mode', [BigValueGraphMode.Area, BigValueGraphMode.None], BigValueGraphMode.Area),
-    justifyMode: select('Justify', [BigValueJustifyMode.Auto, BigValueJustifyMode.Center], BigValueJustifyMode.Auto),
-    width: number('Width', 400, { range: true, max: 800, min: 200 }),
-    height: number('Height', 300, { range: true, max: 800, min: 200 }),
-    color: color('Value color', 'red'),
-    textMode: select(
-      'Text mode',
-      [BigValueTextMode.Auto, BigValueTextMode.Name, BigValueTextMode.ValueAndName, BigValueTextMode.None],
-      BigValueTextMode.Auto
-    ),
-  };
-};
-
 export default {
 export default {
   title: 'Visualizations/BigValue',
   title: 'Visualizations/BigValue',
   component: BigValue,
   component: BigValue,
@@ -32,11 +22,58 @@ export default {
     docs: {
     docs: {
       page: mdx,
       page: mdx,
     },
     },
+    knobs: {
+      disabled: true,
+    },
+  },
+  argTypes: {
+    width: { control: { type: 'range', min: 200, max: 800 } },
+    height: { control: { type: 'range', min: 200, max: 800 } },
+    colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
+    graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } },
+    justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } },
+    textMode: {
+      control: {
+        type: 'radio',
+        options: [
+          BigValueTextMode.Auto,
+          BigValueTextMode.Name,
+          BigValueTextMode.ValueAndName,
+          BigValueTextMode.None,
+          BigValueTextMode.Value,
+        ],
+      },
+    },
+    color: { control: 'color' },
+    value: NOOP_CONTROL,
+    sparkline: NOOP_CONTROL,
+    onClick: NOOP_CONTROL,
+    className: NOOP_CONTROL,
+    alignmentFactors: NOOP_CONTROL,
+    text: NOOP_CONTROL,
+    count: NOOP_CONTROL,
+    theme: NOOP_CONTROL,
   },
   },
 };
 };
 
 
-export const Basic = () => {
-  const { value, title, colorMode, graphMode, height, width, color, textMode, justifyMode } = getKnobs();
+interface StoryProps extends Partial<Props> {
+  numeric: number;
+  title: string;
+  color: string;
+  valueText: string;
+}
+
+export const Basic: Story<StoryProps> = ({
+  valueText,
+  title,
+  colorMode,
+  graphMode,
+  height,
+  width,
+  color,
+  textMode,
+  justifyMode,
+}) => {
   const theme = useTheme();
   const theme = useTheme();
   const sparkline: FieldSparkline = {
   const sparkline: FieldSparkline = {
     y: {
     y: {
@@ -57,7 +94,7 @@ export const Basic = () => {
       textMode={textMode}
       textMode={textMode}
       justifyMode={justifyMode}
       justifyMode={justifyMode}
       value={{
       value={{
-        text: value,
+        text: valueText,
         numeric: 5022,
         numeric: 5022,
         color: color,
         color: color,
         title,
         title,
@@ -66,3 +103,15 @@ export const Basic = () => {
     />
     />
   );
   );
 };
 };
+
+Basic.args = {
+  valueText: '$5022',
+  title: 'Total Earnings',
+  colorMode: BigValueColorMode.Value,
+  graphMode: BigValueGraphMode.Area,
+  justifyMode: BigValueJustifyMode.Auto,
+  width: 400,
+  height: 300,
+  color: 'red',
+  textMode: BigValueTextMode.Auto,
+};