feat(ui): added new components empty state and skeleton

frontend/.storybook/preview.js

@@ -10,6 +10,6 @@ export const parameters = {
     }
   },
   darkMode: {
-    dark: { ...themes.dark, appContentBg: '#0e1014', appBg: '#0e1014' }
+    dark: { ...themes.dark, appContentBg: 'rgb(14,16,20)', appBg: 'rgb(14,16,20)' }
   }
 };

frontend/src/components/v2/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EmptyState } from './EmptyState';
+
+const meta: Meta<typeof EmptyState> = {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  tags: ['v2'],
+  argTypes: {},
+  args: {
+    title: 'No members found'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof EmptyState>;
+
+export const Basic: Story = {
+  render: (args) => <EmptyState {...args} />
+};

frontend/src/components/v2/EmptyState/EmptyState.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { faCubesStacked, IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { twMerge } from 'tailwind-merge';
+
+type Props = {
+  title: ReactNode;
+  className?: string;
+  children?: ReactNode;
+  icon?: IconDefinition;
+};
+
+export const EmptyState = ({ title, className, children, icon = faCubesStacked }: Props) => (
+  <div className={twMerge('flex w-full flex-col items-center p-8 text-mineshaft-50', className)}>
+    <div className="mb-4">
+      <FontAwesomeIcon icon={icon} size="3x" />
+    </div>
+    <div className="mb-8 text-gray-300">{title}</div>
+    <div>{children}</div>
+  </div>
+);

frontend/src/components/v2/EmptyState/index.tsx

@@ -0,0 +1 @@
+export { EmptyState } from './EmptyState';

frontend/src/components/v2/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Skeleton } from './Skeleton';
+
+const meta: Meta<typeof Skeleton> = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  tags: ['v2'],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+
+export const Basic: Story = {
+  render: (args) => <Skeleton {...args} />
+};

frontend/src/components/v2/Skeleton/Skeleton.tsx

@@ -0,0 +1,12 @@
+import { twMerge } from 'tailwind-merge';
+
+export type Props = {
+  className?: string;
+};
+
+// To show something is coming up
+// Can be used with cards
+// Tables etc
+export const Skeleton = ({ className }: Props) => (
+  <div className={twMerge('h-6 w-full animate-pulse rounded-md bg-mineshaft-800', className)} />
+);

frontend/src/components/v2/Skeleton/index.tsx

@@ -0,0 +1 @@
+export { Skeleton } from './Skeleton';

frontend/src/components/v2/Table/Table.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Table, TableContainer, TBody, Td, Th, THead, Tr } from './Table';
+import { Table, TableContainer, TableSkeleton, TBody, Td, Th, THead, Tr } from './Table';
 
 const meta: Meta<typeof Table> = {
   title: 'Components/Table',
@@ -39,3 +39,22 @@ export const Basic: Story = {
     </TableContainer>
   )
 };
+
+export const Loading: Story = {
+  render: (args) => (
+    <TableContainer>
+      <Table {...args}>
+        <THead>
+          <Tr>
+            <Th>Head#1</Th>
+            <Th>Head#2</Th>
+            <Th>Head#3</Th>
+          </Tr>
+        </THead>
+        <TBody>
+          <TableSkeleton columns={3} key="story-book-table" />
+        </TBody>
+      </Table>
+    </TableContainer>
+  )
+};

frontend/src/components/v2/Table/Table.tsx

@@ -1,6 +1,8 @@
 import { HTMLAttributes, ReactNode, TdHTMLAttributes } from 'react';
 import { twMerge } from 'tailwind-merge';
 
+import { Skeleton } from '../Skeleton';
+
 export type TableContainerProps = {
   children: ReactNode;
   isRounded?: boolean;
@@ -32,7 +34,7 @@ export type TableProps = {
 export const Table = ({ children, className }: TableProps): JSX.Element => (
   <table
     className={twMerge(
-      'w-full rounded rounded-md  bg-bunker-800 p-2 text-left text-sm text-gray-300',
+      'w-full rounded-md  bg-bunker-800 p-2 text-left text-sm text-gray-300',
       className
     )}
   >
@@ -59,7 +61,10 @@ export type TrProps = {
 } & HTMLAttributes<HTMLTableRowElement>;
 
 export const Tr = ({ children, className, ...props }: TrProps): JSX.Element => (
-  <tr className={twMerge('border border-solid border-mineshaft-700 hover:bg-bunker-700', className)} {...props}>
+  <tr
+    className={twMerge('border border-solid border-mineshaft-700 hover:bg-bunker-700', className)}
+    {...props}
+  >
     {children}
   </tr>
 );
@@ -71,7 +76,7 @@ export type ThProps = {
 };
 
 export const Th = ({ children, className }: ThProps): JSX.Element => (
-  <th className={twMerge('px-5 pt-4 pb-3.5 font-medium font-semibold bg-bunker-500', className)}>{children}</th>
+  <th className={twMerge('bg-bunker-500 px-5 pt-4 pb-3.5 font-semibold', className)}>{children}</th>
 );
 
 // table body
@@ -95,3 +100,25 @@ export const Td = ({ children, className, ...props }: TdProps): JSX.Element => (
     {children}
   </td>
 );
+
+export type TBodyLoader = {
+  rows?: number;
+  columns: number;
+  className?: string;
+  // unique key for mapping
+  key: string;
+};
+
+export const TableSkeleton = ({ rows = 3, columns, key, className }: TBodyLoader): JSX.Element => (
+  <>
+    {Array.apply(0, Array(rows)).map((_x, i) => (
+      <Tr key={`${key}-skeleton-rows-${i + 1}`}>
+        {Array.apply(0, Array(columns)).map((_y, j) => (
+          <Td key={`${key}-skeleton-rows-${i + 1}-column-${j + 1}`}>
+            <Skeleton className={className} />
+          </Td>
+        ))}
+      </Tr>
+    ))}
+  </>
+);

frontend/src/components/v2/Table/index.tsx

@@ -7,4 +7,4 @@ export type {
   ThProps,
   TrProps
 } from './Table';
-export { Table, TableContainer, TBody, Td, Th, THead, Tr } from './Table';
+export { Table, TableContainer, TableSkeleton,TBody, Td, Th, THead, Tr } from './Table';

frontend/src/components/v2/index.tsx

@@ -3,12 +3,14 @@ export * from './Card';
 export * from './Checkbox';
 export * from './DeleteActionModal';
 export * from './Dropdown';
+export * from './EmptyState';
 export * from './FormControl';
 export * from './IconButton';
 export * from './Input';
 export * from './Menu';
 export * from './Modal';
 export * from './Select';
+export * from './Skeleton';
 export * from './Spinner';
 export * from './Switch';
 export * from './Table';

frontend/tailwind.config.js

@@ -1340,163 +1340,165 @@ module.exports = {
           900: '#176437',
           DEFAULT: '#2ecc71'
         }
+      },
+      keyframes: {
+        type: {
+          '0%': { transform: 'translateX(0ch)' },
+          '5%, 10%': { transform: 'translateX(1ch)' },
+          '15%, 20%': { transform: 'translateX(2ch)' },
+          '25%, 30%': { transform: 'translateX(3ch)' },
+          '35%, 40%': { transform: 'translateX(4ch)' },
+          '45%, 50%': { transform: 'translateX(5ch)' },
+          '55%, 60%': { transform: 'translateX(6ch)' },
+          '65%, 70%': { transform: 'translateX(7ch)' },
+          '75%, 80%': { transform: 'translateX(8ch)' },
+          '85%, 90%': { transform: 'translateX(9ch)' },
+          '95%, 100%': { transform: 'translateX(11ch)' }
+        },
+        // REQUIRED BY DESIGN COMPONENT
+        // MODAL
+        fadeIn: {
+          '0%': { opacity: 0 },
+          '100%': { opacity: 1 }
+        },
+        popIn: {
+          from: {
+            opacity: 0,
+            transform: 'translate(-50%, -48%) scale(0.96)'
+          },
+          to: {
+            opacity: 1,
+            transform: 'translate(-50%, -50%) scale(1)'
+          }
+        },
+        // Dropdown
+        slideUpAndFade: {
+          from: {
+            opacity: 0,
+            transform: ' translateY(2px)'
+          },
+          to: {
+            opacity: 1,
+            transform: ' translateY(0)'
+          }
+        },
+        slideRightAndFade: {
+          from: {
+            opacity: 0,
+            transform: ' translateX(-2px)'
+          },
+          to: {
+            opacity: 1,
+            transform: ' translateX(0)'
+          }
+        },
+        slideDownAndFade: {
+          from: {
+            opacity: 0,
+            transform: ' translateY(-2px)'
+          },
+          to: {
+            opacity: 1,
+            transform: ' translateY(0)'
+          }
+        },
+        slideLeftAndFade: {
+          from: {
+            opacity: 0,
+            transform: ' translateX(2px)'
+          },
+          to: {
+            opacity: 1,
+            transform: ' translateX(0)'
+          }
+        },
+        // END
+        spin: {
+          '0%': { transform: 'rotate(0deg)' },
+          '40%': { transform: 'rotate(360deg)' },
+          '100%': { transform: 'rotate(360deg)' }
+        },
+        bounce: {
+          '0%': { transform: 'translateY(-90%)' },
+          '100%': { transform: 'translateY(-100%)' }
+        },
+        wiggle: {
+          '0%, 100%': { transform: 'rotate(-3deg)' },
+          '50%': { transform: 'rotate(3deg)' }
+        },
+        ping: {
+          '75%, 100%': {
+            transform: 'scale(2)',
+            opacity: 0
+          }
+        },
+        popup: {
+          '0%': {
+            transform: 'scale(0.2)',
+            opacity: 0
+            // transform: "translateY(120%)",
+          },
+          '100%': {
+            transform: 'scale(1)',
+            opacity: 1
+            // transform: "translateY(100%)",
+          }
+        },
+        popright: {
+          '0%': {
+            transform: 'translateX(-100%)'
+          },
+          '100%': {
+            transform: 'translateX(0%)'
+          }
+        },
+        popleft: {
+          '0%': {
+            transform: 'translateX(100%)'
+          },
+          '100%': {
+            transform: 'translateX(0%)'
+          }
+        },
+        popdown: {
+          '0%': {
+            transform: 'scale(0.2)',
+            opacity: 0
+            // transform: "translateY(80%)",
+          },
+          '100%': {
+            transform: 'scale(1)',
+            opacity: 1
+            // transform: "translateY(100%)",
+          }
+        }
+      },
+      animation: {
+        // Design Lib
+        // MODAL
+        fadeIn: 'fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)',
+        popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);',
+        // Dropdown
+        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        // END
+        // TODO:(akhilmhdh) remove all these unused and keep the config file as small as possible
+        // Make the whole color pallelte into simpler
+        bounce: 'bounce 1000ms ease-in-out infinite',
+        spin: 'spin 4000ms ease-in-out infinite',
+        cursor: 'cursor .6s linear infinite alternate',
+        type: 'type 2.7s ease-out .8s infinite alternate both',
+        'type-reverse': 'type 1.8s ease-out 0s infinite alternate-reverse both',
+        wiggle: 'wiggle 200ms ease-in-out',
+        ping: 'ping 1000ms ease-in-out infinite',
+        popup: 'popup 300ms ease-in-out',
+        popdown: 'popdown 300ms ease-in-out',
+        popright: 'popright 100ms ease-in-out',
+        popleft: 'popleft 100ms ease-in-out'
       }
     },
-    keyframes: {
-      type: {
-        '0%': { transform: 'translateX(0ch)' },
-        '5%, 10%': { transform: 'translateX(1ch)' },
-        '15%, 20%': { transform: 'translateX(2ch)' },
-        '25%, 30%': { transform: 'translateX(3ch)' },
-        '35%, 40%': { transform: 'translateX(4ch)' },
-        '45%, 50%': { transform: 'translateX(5ch)' },
-        '55%, 60%': { transform: 'translateX(6ch)' },
-        '65%, 70%': { transform: 'translateX(7ch)' },
-        '75%, 80%': { transform: 'translateX(8ch)' },
-        '85%, 90%': { transform: 'translateX(9ch)' },
-        '95%, 100%': { transform: 'translateX(11ch)' }
-      },
-      // REQUIRED BY DEISGN COMPONENT
-      // MODAL
-      fadeIn: {
-        '0%': { opacity: 0 },
-        '100%': { opacity: 1 }
-      },
-      popIn: {
-        from: {
-          opacity: 0,
-          transform: 'translate(-50%, -48%) scale(0.96)'
-        },
-        to: {
-          opacity: 1,
-          transform: 'translate(-50%, -50%) scale(1)'
-        }
-      },
-      // Dropdown
-      slideUpAndFade: {
-        from: {
-          opacity: 0,
-          transform: ' translateY(2px)'
-        },
-        to: {
-          opacity: 1,
-          transform: ' translateY(0)'
-        }
-      },
-      slideRightAndFade: {
-        from: {
-          opacity: 0,
-          transform: ' translateX(-2px)'
-        },
-        to: {
-          opacity: 1,
-          transform: ' translateX(0)'
-        }
-      },
-      slideDownAndFade: {
-        from: {
-          opacity: 0,
-          transform: ' translateY(-2px)'
-        },
-        to: {
-          opacity: 1,
-          transform: ' translateY(0)'
-        }
-      },
-      slideLeftAndFade: {
-        from: {
-          opacity: 0,
-          transform: ' translateX(2px)'
-        },
-        to: {
-          opacity: 1,
-          transform: ' translateX(0)'
-        }
-      },
-      // END
-      spin: {
-        '0%': { transform: 'rotate(0deg)' },
-        '40%': { transform: 'rotate(360deg)' },
-        '100%': { transform: 'rotate(360deg)' }
-      },
-      bounce: {
-        '0%': { transform: 'translateY(-90%)' },
-        '100%': { transform: 'translateY(-100%)' }
-      },
-      wiggle: {
-        '0%, 100%': { transform: 'rotate(-3deg)' },
-        '50%': { transform: 'rotate(3deg)' }
-      },
-      ping: {
-        '75%, 100%': {
-          transform: 'scale(2)',
-          opacity: 0
-        }
-      },
-      popup: {
-        '0%': {
-          transform: 'scale(0.2)',
-          opacity: 0
-          // transform: "translateY(120%)",
-        },
-        '100%': {
-          transform: 'scale(1)',
-          opacity: 1
-          // transform: "translateY(100%)",
-        }
-      },
-      popright: {
-        '0%': {
-          transform: 'translateX(-100%)'
-        },
-        '100%': {
-          transform: 'translateX(0%)'
-        }
-      },
-      popleft: {
-        '0%': {
-          transform: 'translateX(100%)'
-        },
-        '100%': {
-          transform: 'translateX(0%)'
-        }
-      },
-      popdown: {
-        '0%': {
-          transform: 'scale(0.2)',
-          opacity: 0
-          // transform: "translateY(80%)",
-        },
-        '100%': {
-          transform: 'scale(1)',
-          opacity: 1
-          // transform: "translateY(100%)",
-        }
-      }
-    },
-    animation: {
-      // Design Lib
-      // MODAL
-      fadeIn: 'fadeIn 100ms cubic-bezier(0.16, 1, 0.3, 1)',
-      popIn: 'popIn 150ms cubic-bezier(0.16, 1, 0.3, 1);',
-      // Dropdown
-      slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-      slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-      slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-      slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-      // END
-      bounce: 'bounce 1000ms ease-in-out infinite',
-      spin: 'spin 4000ms ease-in-out infinite',
-      cursor: 'cursor .6s linear infinite alternate',
-      type: 'type 2.7s ease-out .8s infinite alternate both',
-      'type-reverse': 'type 1.8s ease-out 0s infinite alternate-reverse both',
-      wiggle: 'wiggle 200ms ease-in-out',
-      ping: 'ping 1000ms ease-in-out infinite',
-      popup: 'popup 300ms ease-in-out',
-      popdown: 'popdown 300ms ease-in-out',
-      popright: 'popright 100ms ease-in-out',
-      popleft: 'popleft 100ms ease-in-out'
-    },
     fontSize: {
       xxxs: '.23rem',
       xxs: '.5rem',