Merge pull request #180 from Dias999/feature/Storybook-Link

feat: storybook / TSDocs - Link

packages/react-material-ui/__tests__/Link.spec.tsx

@@ -5,7 +5,7 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import Link from '../src/components/Link/Link';
+import { Link } from '../src/components/Link/Link';
 
 describe('Link component', () => {
   it('should render correctly', () => {

packages/react-material-ui/src/components/Link/Link.tsx

@@ -1,7 +1,26 @@
 import React from 'react';
 import MuiLink, { LinkProps } from '@mui/material/Link';
 
-const Link = (props: LinkProps) => {
+export type { LinkProps };
+
+/**
+ * The `Link` component is a wrapper around the MUI `Link` component with
+ * additional customization for default color and styles. It's props extend from [Material UI's Link](https://mui.com/material-ui/api/link/#props)
+ * component props, so every prop is interchangeable between those two.
+ *
+ * @see [Storybook - Link](https://storybook.rockets.tools/?path=/docs/link)
+ *
+ * @example
+ * ```tsx
+ * <Link href="https://example.com" color="secondary.main">
+ *   Visit Example
+ * </Link>
+ * ```
+ *
+ * @see [MUI Link](https://mui.com/api/link/)
+ * @param linkProps - MUI {@link [LinkProps](https://mui.com/material-ui/api/link/#props)}
+ */
+export const Link = (props: LinkProps) => {
   const { children, color = 'primary.dark', sx } = props;
 
   return (
@@ -19,5 +38,3 @@ const Link = (props: LinkProps) => {
     </MuiLink>
   );
 };
-
-export default Link;

packages/react-material-ui/src/components/Link/index.ts

@@ -1 +1 @@
-export { default } from './Link';
+export { Link, LinkProps } from './Link';

packages/react-material-ui/src/components/submodules/AuthForm/index.tsx

@@ -12,7 +12,7 @@ import validator from '@rjsf/validator-ajv6';
 import { Box, Button, Container, Card, CircularProgress } from '@mui/material';
 
 import Text from '../../../components/Text';
-import Link from '../../../components/Link';
+import { Link } from '../../../components/Link';
 import { SchemaForm } from '../../../components/SchemaForm';
 import { Image } from '../../../components/Image';
 

packages/react-material-ui/src/index.ts

@@ -27,7 +27,7 @@ export { FormTemplate, FormTemplateProps } from './components/FormTemplate';
 export { HeaderAccount, HeaderAccountProps } from './components/HeaderAccount';
 
 export { Image, ImageProps } from './components/Image';
-export { default as Link } from './components/Link';
+export { Link, LinkProps } from './components/Link';
 
 export { Navbar, NavbarProps } from './components/Navbar';
 

stories/Link.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Link } from '@concepta/react-material-ui';
+
+const meta: Meta<typeof Link> = {
+  component: Link,
+  tags: ['autodocs'],
+  args: {
+    children: 'This is a Link',
+    href: '#',
+  },
+  argTypes: {
+    color: { control: 'color' },
+    sx: { control: 'object' },
+    component: { control: 'text' },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const CustomColorLink: Story = {
+  args: {
+    color: 'secondary.main',
+  },
+};
+
+export const CustomStyles: Story = {
+  args: {
+    sx: {
+      fontSize: '20px',
+      padding: '10px',
+      backgroundColor: 'lightgray',
+      borderRadius: '4px',
+    },
+  },
+};
+
+export const LinkWithUnderline: Story = {
+  args: {
+    sx: {
+      textDecoration: 'underline',
+    },
+  },
+};
+
+export const VariantH2: Story = {
+  args: {
+    variant: 'h2',
+  },
+};
+
+export const LinkAsButton: Story = {
+  args: {
+    component: 'button',
+    sx: {
+      padding: '10px 20px',
+      backgroundColor: 'primary.main',
+      color: 'white',
+      borderRadius: '5px',
+      border: 'none',
+      cursor: 'pointer',
+    },
+  },
+};