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,7 +1340,6 @@ module.exports = {
           900: '#176437',
           DEFAULT: '#2ecc71'
         }
-      }
       },
       keyframes: {
         type: {
@@ -1356,7 +1355,7 @@ module.exports = {
           '85%, 90%': { transform: 'translateX(9ch)' },
           '95%, 100%': { transform: 'translateX(11ch)' }
         },
-      // REQUIRED BY DEISGN COMPONENT
+        // REQUIRED BY DESIGN COMPONENT
         // MODAL
         fadeIn: {
           '0%': { opacity: 0 },
@@ -1485,6 +1484,8 @@ module.exports = {
         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',
@@ -1496,6 +1497,7 @@ module.exports = {
         popdown: 'popdown 300ms ease-in-out',
         popright: 'popright 100ms ease-in-out',
         popleft: 'popleft 100ms ease-in-out'
+      }
     },
     fontSize: {
       xxxs: '.23rem',