Stories scaffolding

src/components/Link/index.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Link from '.';
+
+const meta = {
+  title: 'Link',
+  component: Link,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    color: { options: ['success', 'error', 'warning', 'black'] },
+  },
+} satisfies Meta<typeof Link>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  args: {
+		color: 'success',
+		children: 'Link',
+		url: true,
+		href: 'https://hazemkrimi.tech',
+		target: '_blank'
+  },
+};

src/components/Link/index.tsx

@@ -1,4 +1,4 @@
-import { Link as RouterLink } from 'react-router-dom';
+import { JSX } from 'react';
 import { Wrapper } from './styles';
 
 type LinkProps = {
@@ -18,7 +18,7 @@ type LinkProps = {
     | string;
   selected?: boolean;
   className?: string;
-  iconLeft?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
+  iconLeft?: React.ReactNode;
   onClick?: () => void;
   target?: '_self' | '_blank';
 };
@@ -35,10 +35,10 @@ const Link = ({
   return (
     <Wrapper {...props} selected={selected}>
       {href && !url ? (
-        <RouterLink to={href} target={target}>
+        <a href={href} target={target}>
           {iconLeft && <span className='icon left'>{iconLeft}</span>}
           {children}
-        </RouterLink>
+        </a>
       ) : (
         <a href={href} target={target}>
           {iconLeft && <span className='icon left'>{iconLeft}</span>}