feature: Added Skeleton states

Added skeleton loading states to project mini card, project card, and project rows

src/Components/Button/Button.stories.tsx

@@ -8,7 +8,7 @@ export default {
 
 } as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} >Click Me 🔥</Button>;
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} >Click Me !!</Button>;
 
 export const Default = Template.bind({});
 
@@ -18,17 +18,53 @@ Primary.args = {
     color: 'primary'
 }
 
+export const Red = Template.bind({});
+Red.args = {
+    color: 'red'
+}
+
 export const Gray = Template.bind({});
 Gray.args = {
     color: 'gray'
 }
 
 
+export const OutlinePrimary = Template.bind({});
+OutlinePrimary.args = {
+    color: 'primary',
+    variant: 'outline'
+}
+
+export const OutlineRed = Template.bind({});
+OutlineRed.args = {
+    color: 'red',
+    variant: 'outline'
+}
+
+export const OutlineGray = Template.bind({});
+OutlineGray.args = {
+    color: 'gray',
+    variant: 'outline'
+}
+
+export const SmallSize = Template.bind({});
+SmallSize.args = {
+    color: 'primary',
+    size: 'sm'
+}
+
 export const MediumSize = Template.bind({});
 MediumSize.args = {
+    color: 'primary',
     size: 'md'
 }
 
+export const LargeSize = Template.bind({});
+LargeSize.args = {
+    color: 'primary',
+    size: 'lg'
+}
+
 export const FullWidth = Template.bind({});
 FullWidth.args = {
     fullWidth: true
@@ -37,4 +73,21 @@ FullWidth.args = {
 export const Link = Template.bind({});
 Link.args = {
     href: '#'
+}
+
+export const DefaultLoading = Template.bind({});
+DefaultLoading.args = {
+    isLoading: true,
+}
+
+export const PrimaryLoading = Template.bind({});
+PrimaryLoading.args = {
+    isLoading: true,
+    color: 'primary'
+}
+
+export const GrayLoading = Template.bind({});
+GrayLoading.args = {
+    isLoading: true,
+    color: 'gray'
 }

src/Components/Button/Button.tsx

@@ -1,32 +1,89 @@
-import { ReactNode } from 'react';
-import { Link } from 'react-router-dom'
+import { ComponentProps, ReactNode } from 'react';
+import { wrapLink } from 'src/utils/hoc';
+import { UnionToObjectKeys } from 'src/utils/types/utils';
+// import Loading from '../Loading/Loading';
 
 interface Props {
-    color?: 'primary' | 'white' | 'gray'
-    size?: 'md' | 'lg'
+    color?: 'primary' | 'red' | 'white' | 'gray' | 'none',
+    variant?: 'fill' | 'outline'
+    size?: 'sm' | 'md' | 'lg'
     children: ReactNode;
     href?: string;
     fullWidth?: boolean;
     onClick?: () => void;
     className?: string
+    isLoading?: boolean;
+    disableOnLoading?: boolean;
+    [rest: string]: any;
 }
 
-export default function Button(props: Props) {
-    let classes = "btn inline-block";
+const btnStylesFill: UnionToObjectKeys<Props, 'color'> = {
+    none: "",
+    primary: "bg-primary-500 border-0 hover:bg-primary-400 active:bg-primary-600 text-white",
+    gray: 'bg-gray-100 hover:bg-gray-200 text-gray-900 active:bg-gray-300',
+    white: 'text-gray-900 bg-gray-25 hover:bg-gray-50',
+    red: "bg-red-600 border-0 hover:bg-red-500 active:bg-red-700 text-white",
+}
 
-    if (props.color === 'primary') classes += ' btn-primary';
-    else if (props.color === 'gray') classes += ' btn-gray';
+const btnStylesOutline: UnionToObjectKeys<Props, 'color'> = {
+    none: "",
+    primary: "text-primary-600",
+    gray: 'text-gray-700',
+    white: 'text-gray-900',
+    red: "text-red-500",
+}
 
-    if (props.size === 'md') classes += ' py-12 px-24';
+const baseBtnStyles: UnionToObjectKeys<Props, 'variant'> = {
+    fill: " shadow-sm active:scale-95",
+    outline: "bg-gray-900 bg-opacity-0 hover:bg-opacity-5 active:bg-opacity-10 border border-gray-200 active:scale-95 "
+}
 
-    if (props.fullWidth) classes += ' w-full'
+
+// const loadingColor: UnionToObjectKeys<Props, 'color', ComponentProps<typeof Loading>['color']> = {
+//     none: "white",
+//     primary: "white",
+//     gray: 'primary',
+//     white: 'primary',
+//     red: "white"
+// } as const;
+
+const btnPadding: UnionToObjectKeys<Props, 'size'> = {
+    sm: "py-8 px-12 text-body5",
+    md: "py-12 px-24 text-body4",
+    lg: 'py-12 px-36 text-body4'
+}
+
+export default function Button({ color = 'white', variant = 'fill', isLoading, disableOnLoading = true, size = 'md', fullWidth, href, className, onClick, children, ...props }: Props) {
+
+    let classes = `
+    inline-block font-sans rounded-lg font-regular border border-gray-300 hover:cursor-pointer
+    ${baseBtnStyles[variant]}
+    ${btnPadding[size]}
+    ${variant === 'fill' ? btnStylesFill[color] : btnStylesOutline[color]}
+    ${isLoading && disableOnLoading && 'bg-opacity-70 pointer-events-none'}
+    `;
+
+    if (size === 'md') classes += ' py-12 px-24';
+    if (size === 'lg')
+        if (fullWidth) classes += ' w-full'
 
     const handleClick = () => {
-        if (props.onClick) props.onClick();
+        if (isLoading && disableOnLoading) return;
+        if (onClick) onClick();
     }
 
-    return (
-        props.href ? <Link to={props.href} className={`${classes} ${props.className}`} onClick={handleClick}>{props.children}</Link> : <button className={`${classes} ${props.className}`} onClick={handleClick}>{props.children}</button>
 
+    return (
+        wrapLink(
+            <button
+                type='button'
+                className={`${classes} ${className}`}
+                onClick={() => handleClick()}
+                {...props}
+            >
+                {/* {isLoading ? <Loading color={loadingColor[color]} /> : children} */}
+                {children}
+            </button>
+            , href)
     )
 }