docs: add story for < FunctionArguments /> and < InformationBox /> (#115

)

packages/vibe-storybook-components/src/components/function-arguments/__stories__/function-arguments.mdx

@@ -0,0 +1,18 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+import * as FunctionArguments from './function-arguments.stories';
+
+<Meta of={FunctionArguments} />
+
+# FunctionArguments
+
+## Overview
+
+The FunctionArgument component is used to display details of function arguments in a react component.
+It allows you to provide the name, type, and description of the argument.
+Additionally, you can specify whether the argument is required and provide a default value if applicable.
+
+<Canvas of={FunctionArguments.Overview} />
+
+## Props
+
+<Controls />

packages/vibe-storybook-components/src/components/function-arguments/__stories__/function-arguments.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import FunctionArguments from '../function-arguments';
+import FunctionArgument from '../function-argument';
+
+const meta: Meta<typeof FunctionArguments> = {
+  component: FunctionArguments,
+  title: 'Components/FunctionArguments',
+};
+export default meta;
+
+type Story = StoryObj<typeof FunctionArguments>;
+
+export const Overview: Story = {
+  args: {
+    children: (
+      <FunctionArgument name="argument" type="type" description="Description of the argument">
+        <FunctionArgument
+          name="callback"
+          type="(event: Event) => void"
+          description="Callback function to execute when the event is fired."
+          required
+        />
+        <FunctionArgument
+          name="count"
+          type="number"
+          description="The number of items to process."
+          default="0"
+          required
+        />
+      </FunctionArgument>
+    ),
+  },
+};

packages/vibe-storybook-components/src/components/function-arguments/function-argument.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { Code } from '@storybook/components'; // eslint-disable-line import/no-extraneous-dependencies
 import classes from './index.module.scss';
 import { ElementContent } from '../../types';
 
@@ -28,7 +27,7 @@ const FunctionArgument: FC<FunctionArgumentProps> = ({
     {defaultValue && (
       <>
         {' '}
-        Defaults to: <Code>{defaultValue}</Code>
+        Defaults to: <code>{defaultValue}</code>
       </>
     )}
     {children && <ul>{children}</ul>}

packages/vibe-storybook-components/src/components/information-box/__stories__/information-box.mdx

@@ -0,0 +1,17 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+import * as InformationBox from './information-box.stories';
+
+<Meta of={InformationBox} />
+
+# InformationBox
+
+## Overview
+
+The InformationBox component is used to display an information box.
+It allows you to provide the title, component, link and description.
+
+<Canvas of={InformationBox.Overview} />
+
+## Props
+
+<Controls />

packages/vibe-storybook-components/src/components/information-box/__stories__/information-box.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import InformationBox from '../information-box';
+
+const meta: Meta<typeof InformationBox> = {
+  component: InformationBox,
+  title: 'Components/InformationBox',
+};
+export default meta;
+
+type Story = StoryObj<typeof InformationBox>;
+
+export const Overview: Story = {
+  args: {
+    title: 'Title',
+    component: <img src="/visual-description.png" alt="Example Image" width={100} />,
+    description: 'This is a description.',
+    href: '/?path=/docs/welcome--docs',
+  },
+};