CodeEditor: refactors story from knobs to controls (#35827)

* fixes storybook crash

* CodeEditor: refactors story from knobs to controls

* refactor codeEditor to work when showLineNumbers is set to false

* fixes non functional controls in story

* fixes arg 'value' formatting

* revert monaco options config

packages/grafana-ui/package.json

@@ -21,8 +21,8 @@
     "bundle": "rollup -c rollup.config.ts",
     "clean": "rimraf ./dist ./compiled",
     "docsExtract": "mkdir -p ../../reports/docs && api-extractor run 2>&1 | tee ../../reports/docs/$(basename $(pwd)).log",
-    "storybook": "start-storybook -p 9001 -c .storybook -s ../../public/img:public/img",
+    "storybook": "start-storybook -p 9001 -c .storybook -s ../../public/img:public/img,../../public/lib:public/lib",
-    "storybook:build": "build-storybook -o ./dist/storybook -c .storybook -s ../../public/img:public/img",
+    "storybook:build": "build-storybook -o ./dist/storybook -c .storybook -s ../../public/img:public/img,../../public/lib:public/lib",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {

packages/grafana-ui/src/components/Monaco/CodeEditor.story.internal.tsx

@@ -1,35 +1,10 @@
 import React from 'react';
-import { number, text, boolean } from '@storybook/addon-knobs';
+import { Meta, Story } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './CodeEditor.mdx';
 import { CodeEditor } from './CodeEditorLazy';
 
-const getKnobs = () => {
-  const CONTAINER_GROUP = 'Container options';
-  // ---
-  const containerWidth = number(
-    'Container width',
-    300,
-    {
-      range: true,
-      min: 100,
-      max: 500,
-      step: 10,
-    },
-    CONTAINER_GROUP
-  );
-
-  return {
-    containerWidth,
-    text: text('Body', 'SELECT * FROM table LIMIT 10'),
-    language: text('Language', 'sql'),
-    showLineNumbers: boolean('Show line numbers', false),
-    showMiniMap: boolean('Show mini map', false),
-    readOnly: boolean('readonly', false),
-  };
-};
-
 export default {
   title: 'CodeEditor',
   component: CodeEditor,
@@ -38,26 +13,50 @@ export default {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: ['monacoOptions', 'onEditorDidMount', 'onBlur', 'onSave', 'getSuggestions', 'showLineNumbers'],
+    },
   },
-};
+  argTypes: {
+    width: { control: { type: 'range', min: 100, max: 500, step: 10 } },
+    height: { control: { type: 'range', min: 100, max: 800, step: 10 } },
+    language: { control: { type: 'select' }, options: ['sql', 'json'] },
+  },
+} as Meta;
 
-export const basic = () => {
+export const Basic: Story = (args) => {
-  const { containerWidth, text, language, showLineNumbers, showMiniMap, readOnly } = getKnobs();
   return (
     <CodeEditor
-      width={containerWidth}
+      width={args.width}
-      height={400}
+      height={args.height}
-      value={text}
+      value={args.value}
-      language={language}
+      language={args.language}
       onBlur={(text: string) => {
         action('code blur')(text);
       }}
       onSave={(text: string) => {
         action('code saved')(text);
       }}
-      showLineNumbers={showLineNumbers}
+      showLineNumbers={args.showLineNumbers}
-      showMiniMap={showMiniMap}
+      showMiniMap={args.showMiniMap}
-      readOnly={readOnly}
+      readOnly={args.readOnly}
     />
   );
 };
+Basic.args = {
+  width: 300,
+  height: 400,
+  value: `CREATE TABLE Persons (
+  PersonID int,
+  LastName varchar(255),
+  FirstName varchar(255),
+  Address varchar(255),
+  City varchar(255)
+);
+SELECT * FROM Persons LIMIT 10 '
+  `,
+  language: 'sql',
+  showLineNumbers: false,
+  showMiniMap: false,
+  readOnly: false,
+};

packages/grafana-ui/src/components/Monaco/CodeEditor.tsx

@@ -125,7 +125,6 @@ class UnthemedCodeEditor extends React.PureComponent<Props> {
       tabSize: 2,
       codeLens: false,
       contextmenu: false,
-
       minimap: {
         enabled: longText && showMiniMap,
         renderCharacters: false,