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,36 +22,31 @@ export default {
       page: mdx,
       page: mdx,
     },
     },
     knobs: {
     knobs: {
-      disabled: true,
+      disable: 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,
-        ],
+    controls: {
+      disable: true,
+    },
+    grafanaControls: {
+      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: { type: 'color' } },
     },
     },
-    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,
   },
   },
 };
 };