grafana/ui: Fix storybook dev (#25928)

* Minimize css and js only for storybook build

* Update CodeEditor story, make it internal

* Update storybook webpack config

packages/grafana-ui/.storybook/webpack.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 module.exports = ({ config, mode }) => {
+  const isProductionBuild = mode === 'PRODUCTION';
   config.module.rules = [
     ...(config.module.rules || []),
     {
@@ -84,12 +85,6 @@ module.exports = ({ config, mode }) => {
       chunks: 'all',
       minChunks: 1,
       cacheGroups: {
-        monaco: {
-          test: /[\\/]node_modules[\\/](monaco-editor)[\\/].*[jt]sx?$/,
-          chunks: 'initial',
-          priority: 20,
-          enforce: true,
-        },
         vendors: {
           test: /[\\/]node_modules[\\/].*[jt]sx?$/,
           chunks: 'initial',
@@ -105,11 +100,13 @@ module.exports = ({ config, mode }) => {
         },
       },
     },
-    minimize: true,
-    minimizer: [
-      new TerserPlugin({ cache: false, parallel: false, sourceMap: false, exclude: /monaco/ }),
-      new OptimizeCSSAssetsPlugin({}),
-    ],
+    minimize: isProductionBuild,
+    minimizer: isProductionBuild
+      ? [
+          new TerserPlugin({ cache: false, parallel: false, sourceMap: false, exclude: /monaco/ }),
+          new OptimizeCSSAssetsPlugin({}),
+        ]
+      : [],
   };
 
   config.resolve.extensions.push('.ts', '.tsx', '.mdx');

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

@@ -1,8 +1,8 @@
 import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
-import { CodeEditor } from './CodeEditor';
+import { CodeEditor } from './CodeEditorLazy';
 
 <Meta title="MDX|CodeEditor" component={CodeEditor} />
 
 # CodeEditor
 
-Monaco Code editor
+Monaco Code editor

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

@@ -1,12 +1,27 @@
 import React from 'react';
-import { text } from '@storybook/addon-knobs';
+import { number, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import mdx from './CodeEditor.mdx';
-import CodeEditor from './CodeEditor';
+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'),
   };
@@ -24,17 +39,17 @@ export default {
 };
 
 export const basic = () => {
-  const { text, language } = getKnobs();
+  const { containerWidth, text, language } = getKnobs();
   return (
     <CodeEditor
+      width={containerWidth}
+      height={400}
       value={text}
       language={language}
       onBlur={(text: string) => {
-        console.log('Blur: ', text);
         action('code blur')(text);
       }}
       onSave={(text: string) => {
-        console.log('Save: ', text);
         action('code saved')(text);
       }}
     />