Storybook: add controls support + remove `UseState` from `Collapse` story (#52869)

* add controls support + remove UseState from Collapse story

* exclude className as well

* exclude className prop as well

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

@@ -1,12 +1,15 @@
-import { ComponentMeta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { useArgs } from '@storybook/client-api';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
-import { UseState } from '../../utils/storybook/UseState';
 import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory';
 
 import { Collapse, ControlledCollapse } from './Collapse';
 import mdx from './Collapse.mdx';
 
+const EXCLUDED_PROPS = ['className', 'onToggle'];
+
 const meta: ComponentMeta<typeof Collapse> = {
   title: 'Layout/Collapse',
   component: Collapse,
@@ -15,34 +18,47 @@ const meta: ComponentMeta<typeof Collapse> = {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: EXCLUDED_PROPS,
+    },
+  },
+  args: {
+    children: 'Panel data',
+    isOpen: false,
+    label: 'Collapse panel',
+    collapsible: true,
+  },
+  argTypes: {
+    onToggle: { action: 'toggled' },
   },
 };
 
-export const basic = () => {
+export const Basic: ComponentStory<typeof Collapse> = (args) => {
+  const [, updateArgs] = useArgs();
   return (
-    <UseState initialState={{ isOpen: false }}>
-      {(state, updateValue) => {
-        return (
-          <Collapse
-            collapsible
-            label="Collapse panel"
-            isOpen={state.isOpen}
-            onToggle={() => updateValue({ isOpen: !state.isOpen })}
-          >
-            <p>Panel data</p>
-          </Collapse>
-        );
+    <Collapse
+      {...args}
+      onToggle={() => {
+        action('onToggle')({ isOpen: !args.isOpen });
+        updateArgs({ isOpen: !args.isOpen });
       }}
-    </UseState>
+    >
+      <p>{args.children}</p>
+    </Collapse>
   );
 };
 
-export const controlled = () => {
+export const Controlled: ComponentStory<typeof ControlledCollapse> = (args) => {
   return (
-    <ControlledCollapse label="Collapse panel">
-      <p>Panel data</p>
+    <ControlledCollapse {...args}>
+      <p>{args.children}</p>
     </ControlledCollapse>
   );
 };
+Controlled.parameters = {
+  controls: {
+    exclude: [...EXCLUDED_PROPS, 'isOpen'],
+  },
+};
 
 export default meta;