add IconButton stories

apps/design-system/src/components/IconButton.stories.tsx

@@ -0,0 +1,20 @@
+import { FunctionComponent } from 'react';
+import { Meta } from '@storybook/react';
+import { IconButton } from '@asyncapi/studio-ui'; 
+import { AddIcon } from '@asyncapi/studio-ui/icons'; 
+
+
+const meta: Meta<typeof IconButton> = {
+  component: IconButton,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: {
+      default: "dark",
+    },
+  },
+}
+export default meta;
+
+export const Default = () => <IconButton icon={AddIcon} />
+export const WithText = () => <IconButton icon={AddIcon} text="Click Me" />;
+export const WithClickEvent = () => <IconButton icon={AddIcon} onClick={() => alert('Button clicked!')} />

apps/design-system/src/design-tokens/Icons.stories.mdx

@@ -33,6 +33,7 @@ import {
   UsersIcon,
   WebSocketIcon,
   XMarkIcon,
+  AddIcon,
 } from '@asyncapi/studio-ui/icons'
 
 <Meta 
@@ -80,6 +81,7 @@ Most of the icons below are taken from https://heroicons.com. If you need to add
       UsersIcon,
       WebSocketIcon,
       XMarkIcon,
+      AddIcon,
     ].map((Icon) => (
       <IconItem name={Icon.displayName || Icon.render.name}>
         <Icon />