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

2026-10-11 13:29:12 +00:00 · 2023-02-22 23:27:36 +05:30
parent af64582efd
commit 621b640af4
12 changed files with 283 additions and 161 deletions
@@ -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} />
+};
@@ -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>
+);
@@ -0,0 +1 @@
+export { EmptyState } from './EmptyState';
@@ -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} />
+};
@@ -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)} />
+);
@@ -0,0 +1 @@
+export { Skeleton } from './Skeleton';
@@ -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>
+  )
+};
@@ -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>
+    ))}
+  </>
+);
@@ -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';
@@ -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';