From c5797cc2748829f7f609c180044c8211d63f61b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@grafana.com>
Date: Mon, 22 Feb 2021 09:53:06 +0100
Subject: [PATCH] StoryBook: Introduces Grafana Controls (#31351)

---
 packages/grafana-ui/.storybook/main.ts        |  1 +
 .../src/addons/grafana-controls/preset.ts     |  5 ++
 .../src/addons/grafana-controls/register.tsx  | 43 ++++++++++++++++
 .../components/BigValue/BigValue.story.tsx    | 50 ++++++++-----------
 4 files changed, 71 insertions(+), 28 deletions(-)
 create mode 100644 packages/grafana-ui/src/addons/grafana-controls/preset.ts
 create mode 100644 packages/grafana-ui/src/addons/grafana-controls/register.tsx

diff --git a/packages/grafana-ui/.storybook/main.ts b/packages/grafana-ui/.storybook/main.ts
index a7b4217a1a4..1e5bcdf75ec 100644
--- a/packages/grafana-ui/.storybook/main.ts
+++ b/packages/grafana-ui/.storybook/main.ts
@@ -14,6 +14,7 @@ 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',
diff --git a/packages/grafana-ui/src/addons/grafana-controls/preset.ts b/packages/grafana-ui/src/addons/grafana-controls/preset.ts
new file mode 100644
index 00000000000..38cdfb7e6a3
--- /dev/null
+++ b/packages/grafana-ui/src/addons/grafana-controls/preset.ts
@@ -0,0 +1,5 @@
+module.exports = {
+  managerEntries(entry = []) {
+    return [...entry, require.resolve('./register')];
+  },
+};
diff --git a/packages/grafana-ui/src/addons/grafana-controls/register.tsx b/packages/grafana-ui/src/addons/grafana-controls/register.tsx
new file mode 100644
index 00000000000..d89c80076eb
--- /dev/null
+++ b/packages/grafana-ui/src/addons/grafana-controls/register.tsx
@@ -0,0 +1,43 @@
+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>
+    ),
+  });
+});
diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
index c74e9a82d70..7227795b9c2 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
@@ -11,7 +11,6 @@ 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 {
@@ -23,36 +22,31 @@ export default {
       page: mdx,
     },
     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,
   },
 };