feat: improve component lib

src/components/Atoms/Grid/Grid.tsx

@@ -44,7 +44,7 @@ type TGrid = {
 /*
  * Styles
  */
-export const GridBaseStyle = 'flex';
+export const GridBaseStyle = 'flex w-full';
 
 export const GridVariantStyleMap: Record<string, string> = {
 	row: 'flex-row',

src/components/Atoms/Link/Link.stories.tsx

@@ -14,4 +14,5 @@ export const Link = Template.bind({});
 Link.args = {
 	children: 'Link',
 	href: '/',
+	newTab: true,
 };

src/components/Molecules/IconLink/IconLink.stories.tsx → src/components/Molecules/IconText/IconText.stories.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import { IconNames } from '../../Atoms/Icon/IconLib';
-import { IconLink as Component, IconLinkSizeMap, IconLinkColorMap } from './IconLink';
+import { IconText as Component, IconTextSizeMap, IconTextColorMap } from './IconText';
 
 export default {
-	title: 'Components/Molecules/IconLink',
+	title: 'Components/Molecules/IconText',
 	component: Component,
 	argTypes: {
 		icon: {
@@ -14,16 +14,16 @@ export default {
 		},
 		size: {
 			control: { type: 'radio' },
-			options: Object.keys(IconLinkSizeMap),
+			options: Object.keys(IconTextSizeMap),
 		},
 		colorScheme: {
 			control: { type: 'radio' },
-			options: Object.keys(IconLinkColorMap),
+			options: Object.keys(IconTextColorMap),
 		},
 	},
 } as ComponentMeta<typeof Component>;
 
 const Template: ComponentStory<typeof Component> = (args): JSX.Element => <Component {...args} />;
 
-export const IconLink = Template.bind({});
-IconLink.args = {};
+export const IconText = Template.bind({});
+IconText.args = {};

src/components/Molecules/IconText/IconText.tsx

@@ -0,0 +1,88 @@
+import React, { FC, ReactNode } from 'react';
+
+import { Icon, TIconSize, TIconName } from '../../Atoms/Icon/Icon';
+
+/*
+ * Type
+ */
+
+type TIconTextSize = keyof typeof IconTextSizeMap;
+type TIconTextColor = keyof typeof IconTextColorMap;
+
+type TIconText = {
+	/**
+	 * React Children: here most probably text
+	 */
+	children: ReactNode;
+
+	/**
+	 * text size options of this button (S, M, L)
+	 */
+	size?: TIconTextSize;
+
+	/**
+	 * color scheme options of this button (slate, violet, gradient)
+	 */
+	colorScheme: TIconTextColor;
+
+	/**
+	 * icon name to render
+	 */
+	icon: TIconName;
+};
+
+/*
+ * Style
+ */
+
+const IconTextBaseStyle: string[] = ['flex items-center', 'leading-none', 'rounded-full'];
+
+export const IconTextSizeMap: Record<string, string> = {
+	S: 'text-sm gap-1 px-2 py-1',
+	M: 'text-base gap-2 px-3 py-2',
+	L: 'text-xl gap-2 px-4 py-3',
+};
+
+export const IconTextColorMap: Record<string, string> = {
+	slate: 'text-slate-400 hover:text-slate-600 hover:bg-slate-100 ',
+	violet: 'text-violet-600 hover:text-violet-900 hover:bg-violet-50 ',
+	pink: ' text-pink-400 hover:text-pink-600 hover:bg-pink-50',
+};
+
+/**
+ * IconText component
+ *
+ * @param {string} children - React Children: here most probably text
+ * @param {string} as - HTML tag to render a button (button, a, span)
+ * @param {string} size - text size options of this button (S, M, L)
+ * @param {string} colorScheme - color scheme options of this button (slate, violet, gradient)
+ * @param {string} icon - icon name to render
+ *
+ * @example <IconText icon="arrowRight" colorScheme="slate" size="M">IconText</IconText>
+ * /
+
+
+/*
+ * State
+ */
+
+export const IconText: FC<TIconText> = ({ children = 'IconText', colorScheme = 'slate', size = 'M', icon, ...props }) => {
+	const styles = [
+		...IconTextBaseStyle,
+		IconTextSizeMap[size],
+		IconTextColorMap[colorScheme],
+		'group',
+		'transition-all duration-300',
+	];
+
+	return (
+		<span
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			{...(props as any)}
+			className={styles.join(' ')}
+		>
+			<Icon name={icon} size={size as TIconSize} />
+			{children}
+		</span>
+	);
+};

src/components/Molecules/IconText/index.ts

@@ -0,0 +1 @@
+export * from './IconText';

src/components/Organisms/Modal/Modal.tsx

@@ -42,7 +42,9 @@ const ModalBaseStyle = [
 	'bg-white rounded-2xl shadow-lg sm:rounded-none sm:shadow-none ',
 ];
 const ModalOverlayStyle = ['fixed inset-0 z-40', 'opacity-25 bg-violet-600'];
-const ModalBodyStyle = ['relative flex flex-col w-full overflow-x-hidden max-w-screen max-h-screen min-w-full'];
+const ModalBodyStyle = [
+	'relative flex flex-col w-full overflow-x-hidden max-w-screen max-h-screen min-w-full sm:rounded-none sm:shadow-none sm:h-full',
+];
 const ModalHeaderStyle = ['flex items-center justify-between gap-4', 'px-8 py-6', 'bg-violet-600 text-white'];
 
 /**

src/index.ts

@@ -10,13 +10,12 @@ export * from './components/Atoms/TimeStamp';
 export * from './components/Molecules/Button';
 export * from './components/Molecules/Card';
 export * from './components/Molecules/Form';
-export * from './components/Molecules/IconLink';
+export * from './components/Molecules/IconText';
 export * from './components/Molecules/ImageOverlay';
 export * from './components/Molecules/InteractionButton';
 export * from './components/Molecules/Navi';
 export * from './components/Molecules/RoundButton';
 export * from './components/Molecules/Switch';
-export * from './components/Molecules/UserName';
 export * from './components/Molecules/UserProfile';
 export * from './components/Organisms/CopyToClipboardButton';
 export * from './components/Organisms/Modal';

src/styles/main.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+	body {
+		@apply bg-slate-100 dark:bg-slate-900 text-slate-900 dark:text-slate-100;
+	}
+}

src/templates/Snippets/ContentCard/ContentCard.tsx

@@ -7,8 +7,7 @@ import { Image } from '../../../components/Atoms/Image';
 import { Richtext } from '../../../components/Atoms/Richtext';
 import { Label } from '../../../components/Atoms/Label';
 
-import { UserName } from '../../../components/Molecules/UserName';
-import { IconLink } from '../../../components/Molecules/IconLink';
+import { IconText } from '../../../components/Molecules/IconText';
 import { ImageOverlay } from '../../../components/Molecules/ImageOverlay';
 import { InteractionButton } from '../../../components/Molecules/InteractionButton';
 
@@ -68,10 +67,14 @@ export const ContentCard: FC<TContentCard> = ({ variant, post }) => {
 				{post.author.fullName}
 			</Label>
 			<Grid variant="row" gap="S">
-				<UserName href={post.author.profileLink}>{post.author.userName}</UserName>
-				<IconLink as="span" icon="calendar" colorScheme="slate" size="S">
+				<a href={post.author.profileLink}>
+					<IconText icon="profile" colorScheme="violet" size="S">
+						{post.author.userName}
+					</IconText>
+				</a>
+				<IconText icon="calendar" colorScheme="slate" size="S">
 					<TimeStamp date={post.createdAt} />
-				</IconLink>
+				</IconText>
 			</Grid>
 		</Grid>
 	);

src/templates/Snippets/ContentInput/ContentInput.tsx

@@ -3,7 +3,7 @@ import React, { FC } from 'react';
 import { Grid } from '../../../components/Atoms/Grid/Grid';
 import { Label } from '../../../components/Atoms/Label';
 
-import { UserName } from '../../../components/Molecules/UserName';
+import { IconText } from '../../../components/Molecules/IconText';
 import { Button } from '../../../components/Molecules/Button';
 import { FormTextarea } from '../../../components/Molecules/Form/FormTextarea';
 
@@ -54,7 +54,11 @@ export const ContentInput: FC<TContentInput> = (props) => {
 					{author.fullName}
 				</Label>
 				<Grid variant="row" gap="S">
-					<UserName href={author.profileLink}>{author.userName}</UserName>
+					<a href={author.profileLink}>
+						<IconText icon="profile" colorScheme="violet" size="S">
+							{author.userName}
+						</IconText>
+					</a>
 				</Grid>
 			</Grid>
 		</Grid>