StoryBook: Introduces Grafana Controls (#31351)

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

@@ -14,6 +14,7 @@ module.exports = {
   addons: [
   addons: [
     '@storybook/addon-docs',
     '@storybook/addon-docs',
     '@storybook/addon-controls',
     '@storybook/addon-controls',
+    '../src/addons/grafana-controls/preset.ts',
     '@storybook/addon-knobs',
     '@storybook/addon-knobs',
     '@storybook/addon-actions',
     '@storybook/addon-actions',
     'storybook-dark-mode/register',
     'storybook-dark-mode/register',

packages/grafana-ui/src/addons/grafana-controls/preset.ts

+module.exports = {
+  managerEntries(entry = []) {
+    return [...entry, require.resolve('./register')];
+  },
+};

packages/grafana-ui/src/addons/grafana-controls/register.tsx

+import React from 'react';
+import { ArgTypes } from '@storybook/react';
+import { addons, types } from '@storybook/addons';
+import { AddonPanel, ArgsTable } from '@storybook/components';
+import { useArgs, useArgTypes, useParameter } from '@storybook/api';
+
+const ADDON_ID = 'storybook/grafana-controls';
+const PANEL_ID = `${ADDON_ID}/controls`;
+const PARAM_KEY = 'grafanaControls';
+
+const GrafanaControlsPanel = () => {
+  const [args, updateArgs, resetArgs] = useArgs();
+  const rows = useArgTypes();
+  const argTypes = useParameter<ArgTypes>(PARAM_KEY, {});
+  const newRows: ArgTypes = {};
+
+  for (const key in argTypes) {
+    if (!Object.hasOwnProperty.call(argTypes, key)) {
+      continue;
+    }
+
+    if (Object.hasOwnProperty.call(rows, key)) {
+      newRows[key] = { ...rows[key], ...argTypes[key] };
+    }
+  }
+
+  return (
+    <ArgsTable rows={newRows} args={args} updateArgs={updateArgs} resetArgs={resetArgs as any} inAddonPanel compact />
+  );
+};
+
+addons.register(ADDON_ID, (api) => {
+  addons.add(PANEL_ID, {
+    type: types.PANEL,
+    title: 'Grafana Controls',
+    // eslint-disable-next-line react/display-name
+    render: ({ active, key }) => (
+      <AddonPanel active={Boolean(active)} key={key}>
+        <GrafanaControlsPanel />
+      </AddonPanel>
+    ),
+  });
+});

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

@@ -11,7 +11,6 @@ import {
 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';
 
 
 export default {
 export default {
@@ -23,10 +22,12 @@ export default {
       page: mdx,
       page: mdx,
     },
     },
     knobs: {
     knobs: {
-      disabled: true,
+      disable: true,
     },
     },
+    controls: {
+      disable: true,
     },
     },
-  argTypes: {
+    grafanaControls: {
       width: { control: { type: 'range', min: 200, max: 800 } },
       width: { control: { type: 'range', min: 200, max: 800 } },
       height: { control: { type: 'range', min: 200, max: 800 } },
       height: { control: { type: 'range', min: 200, max: 800 } },
       colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
       colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
@@ -44,15 +45,8 @@ export default {
           ],
           ],
         },
         },
       },
       },
-    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,
+      color: { control: { type: 'color' } },
+    },
   },
   },
 };
 };