feat: add storybook-link component

src/components/storybook-link/__stories__/storybook-link.mdx

@@ -0,0 +1,16 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+import * as StorybookLink from './storybook-link.stories';
+
+<Meta of={StorybookLink} />
+
+# StorybookLink
+
+## Overview
+
+The StorybookLink component is an internal link to navigate between components/stories inside storybook.
+
+<Canvas of={StorybookLink.Overview} />
+
+## Props
+
+<Controls />

src/components/storybook-link/__stories__/storybook-link.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import StorybookLink from '../storybook-link';
+
+const meta: Meta<typeof StorybookLink> = {
+  component: StorybookLink,
+  title: 'Components/StorybookLink',
+};
+export default meta;
+
+type Story = StoryObj<typeof StorybookLink>;
+
+export const Overview: Story = {
+  args: {
+    page: 'Components/Paragraph',
+    children: 'Navigate to "Paragraph"',
+  },
+};

src/components/storybook-link/storybook-link.tsx

@@ -0,0 +1,29 @@
+import { FC, useEffect, useState } from 'react';
+import Link from '../link/link';
+import { hrefTo } from '@storybook/addon-links';
+
+interface StorybookLinkProps {
+  page: string;
+  children: string;
+  story?: string;
+}
+
+const StorybookLink: FC<StorybookLinkProps> = ({ page, story = '', children }) => {
+  const [url, setUrl] = useState('');
+
+  useEffect(() => {
+    fetchLink();
+    async function fetchLink() {
+      const href = await hrefTo(page, story);
+      setUrl(href);
+    }
+  }, []);
+
+  return (
+    <Link href={url} target={Link.targets.SELF} withoutSpacing>
+      {children}
+    </Link>
+  );
+};
+
+export default StorybookLink;