Storybook: CSF Modal conversion (#24085)

* Convert modal

* Update packages/grafana-ui/src/components/Modal/Modal.story.tsx

Co-Authored-By: Alex Khomenko <Clarity-89@users.noreply.github.com>

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

packages/grafana-ui/src/components/Modal/Modal.story.tsx

 import React, { useState } from 'react';
 import React, { useState } from 'react';
-import { storiesOf } from '@storybook/react';
 import { oneLineTrim } from 'common-tags';
 import { oneLineTrim } from 'common-tags';
 import { text, boolean } from '@storybook/addon-knobs';
 import { text, boolean } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -27,10 +26,13 @@ amet.`
   };
   };
 };
 };
 
 
-const ModalStories = storiesOf('Overlays/Modal', module);
-ModalStories.addDecorator(withCenteredStory);
+export default {
+  title: 'Overlays/Modal',
+  component: Modal,
+  decorators: [withCenteredStory],
+};
 
 
-ModalStories.add('default', () => {
+export const basic = () => {
   const { body, visible } = getKnobs();
   const { body, visible } = getKnobs();
   return (
   return (
     <Modal
     <Modal
@@ -45,7 +47,7 @@ ModalStories.add('default', () => {
       {body}
       {body}
     </Modal>
     </Modal>
   );
   );
-});
+};
 
 
 const tabs = [
 const tabs = [
   { label: '1st child', value: 'first', active: true },
   { label: '1st child', value: 'first', active: true },
@@ -53,7 +55,7 @@ const tabs = [
   { label: '3rd child', value: 'third', active: false },
   { label: '3rd child', value: 'third', active: false },
 ];
 ];
 
 
-ModalStories.add('with tabs', () => {
+export const withTabs = () => {
   const [activeTab, setActiveTab] = useState('first');
   const [activeTab, setActiveTab] = useState('first');
   const modalHeader = (
   const modalHeader = (
     <ModalTabsHeader
     <ModalTabsHeader
@@ -83,4 +85,4 @@ ModalStories.add('with tabs', () => {
       }}
       }}
     </UseState>
     </UseState>
   );
   );
-});
+};

packages/grafana-ui/src/components/Modal/Modal.tsx

@@ -8,7 +8,7 @@ import { getModalStyles } from './getModalStyles';
 import { ModalHeader } from './ModalHeader';
 import { ModalHeader } from './ModalHeader';
 import { IconButton } from '../IconButton/IconButton';
 import { IconButton } from '../IconButton/IconButton';
 
 
-interface Props extends Themeable {
+export interface Props extends Themeable {
   icon?: IconName;
   icon?: IconName;
   title: string | JSX.Element;
   title: string | JSX.Element;
   className?: string;
   className?: string;