Revert "StoryBook: Introduces Grafana Controls (#31351)" (#31388)

This reverts commit c5797cc274.

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

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

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

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

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

@@ -1,43 +0,0 @@
-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,6 +11,7 @@ import {
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './BigValue.mdx';
 import { useTheme } from '../../themes';
+import { NOOP_CONTROL } from '@grafana/ui/.storybook/preview';
 import { ArrayVector, FieldSparkline, FieldType } from '@grafana/data';
 
 export default {
@@ -22,31 +23,36 @@ export default {
       page: mdx,
     },
     knobs: {
-      disable: true,
+      disabled: true,
     },
-    controls: {
+  },
-      disable: true,
+  argTypes: {
-    },
+    width: { control: { type: 'range', min: 200, max: 800 } },
-    grafanaControls: {
+    height: { control: { type: 'range', min: 200, max: 800 } },
-      width: { control: { type: 'range', min: 200, max: 800 } },
+    colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
-      height: { control: { type: 'range', min: 200, max: 800 } },
+    graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } },
-      colorMode: { control: { type: 'select', options: [BigValueColorMode.Value, BigValueColorMode.Background] } },
+    justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } },
-      graphMode: { control: { type: 'select', options: [BigValueGraphMode.Area, BigValueGraphMode.None] } },
+    textMode: {
-      justifyMode: { control: { type: 'select', options: [BigValueJustifyMode.Auto, BigValueJustifyMode.Center] } },
+      control: {
-      textMode: {
+        type: 'radio',
-        control: {
+        options: [
-          type: 'radio',
+          BigValueTextMode.Auto,
-          options: [
+          BigValueTextMode.Name,
-            BigValueTextMode.Auto,
+          BigValueTextMode.ValueAndName,
-            BigValueTextMode.Name,
+          BigValueTextMode.None,
-            BigValueTextMode.ValueAndName,
+          BigValueTextMode.Value,
-            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,
   },
 };