Use Storybook Controls instead of Knobs (elastic#80705)

* Change an example in embeddable to use controls instead of knobs * Add controls to SyncBadge APM story * Convert both to [CSF](https://storybook.js.org/docs/react/api/csf) * Remove the Knobs addon from the default Storybook configuration Do not remove the Knobs addon package, since Canvas is still using it and this does not change anything in Canvas.
smith · Oct 21, 2020 · 4d51236 · 4d51236
1 parent 052c64c
commit 4d51236
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 53 deletions.
diff --git a/packages/kbn-storybook/lib/default_config.ts b/packages/kbn-storybook/lib/default_config.ts
@@ -20,12 +20,7 @@
 import { StorybookConfig } from '@storybook/core/types';
 
 export const defaultConfig: StorybookConfig = {
-  addons: [
-    '@kbn/storybook/preset',
-    '@storybook/addon-a11y',
-    '@storybook/addon-knobs',
-    '@storybook/addon-essentials',
-  ],
+  addons: ['@kbn/storybook/preset', '@storybook/addon-a11y', '@storybook/addon-essentials'],
   stories: ['../**/*.stories.tsx'],
   typescript: {
     reactDocgen: false,

diff --git a/...beddable/public/components/panel_options_menu/__examples__/panel_options_menu.stories.tsx b/...beddable/public/components/panel_options_menu/__examples__/panel_options_menu.stories.tsx
@@ -17,37 +17,45 @@
  * under the License.
  */
 
-import * as React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+import * as React from 'react';
 import { PanelOptionsMenu } from '..';
 
-const euiContextDescriptors = {
-  id: 'mainMenu',
-  title: 'Options',
-  items: [
-    {
-      name: 'Inspect',
-      icon: 'inspect',
-      onClick: action('onClick(inspect)'),
-    },
-    {
-      name: 'Full screen',
-      icon: 'expand',
-      onClick: action('onClick(expand)'),
+export default {
+  title: 'components/PanelOptionsMenu',
+  component: PanelOptionsMenu,
+  argTypes: {
+    isViewMode: {
+      control: { type: 'boolean' },
     },
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div style={{ height: 150 }}>
+        <Story />
+      </div>
+    ),
   ],
 };
 
-storiesOf('components/PanelOptionsMenu', module)
-  .addDecorator(withKnobs)
-  .add('default', () => {
-    const isViewMode = boolean('isViewMode', false);
+export function Default({ isViewMode }: React.ComponentProps<typeof PanelOptionsMenu>) {
+  const euiContextDescriptors = {
+    id: 'mainMenu',
+    title: 'Options',
+    items: [
+      {
+        name: 'Inspect',
+        icon: 'inspect',
+        onClick: action('onClick(inspect)'),
+      },
+      {
+        name: 'Full screen',
+        icon: 'expand',
+        onClick: action('onClick(expand)'),
+      },
+    ],
+  };
 
-    return (
-      <div style={{ height: 150 }}>
-        <PanelOptionsMenu panelDescriptor={euiContextDescriptors} isViewMode={isViewMode} />
-      </div>
-    );
-  });
+  return <PanelOptionsMenu panelDescriptor={euiContextDescriptors} isViewMode={isViewMode} />;
+}
+Default.args = { isViewMode: false } as React.ComponentProps<typeof PanelOptionsMenu>;
diff --git a/...ansactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx b/...ansactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.stories.tsx
@@ -4,27 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { boolean, withKnobs } from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import { SyncBadge } from './SyncBadge';
 
-storiesOf('app/TransactionDetails/SyncBadge', module)
-  .addDecorator(withKnobs)
-  .add(
-    'example',
-    () => {
-      return <SyncBadge sync={boolean('sync', true)} />;
+export default {
+  title: 'app/TransactionDetails/SyncBadge',
+  component: SyncBadge,
+  argTypes: {
+    sync: {
+      control: { type: 'inline-radio', options: [true, false, undefined] },
     },
-    {
-      showPanel: true,
-      info: { source: false },
-    }
-  )
-  .add(
-    'sync=undefined',
-    () => {
-      return <SyncBadge />;
-    },
-    { info: { source: false } }
-  );
+  },
+};
+
+export function Example({ sync }: ComponentProps<typeof SyncBadge>) {
+  return <SyncBadge sync={sync} />;
+}
+Example.args = { sync: true } as ComponentProps<typeof SyncBadge>;