refactor(tooling-ui-kit): Clean up of Table - part 2 (#2112)

* refactor(tooling-ui-kit): Clean up of `Table` - part 2 * chore: lint * chore: fmt * feat: Placeholder cell * chore: fmt
iotaledger · Aug 29, 2024 · 30d4b88 · 30d4b88
1 parent f7e5011
commit 30d4b88
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 17 deletions.
diff --git a/apps/ui-kit/src/lib/components/molecules/table-cell/TableCell.tsx b/apps/ui-kit/src/lib/components/molecules/table-cell/TableCell.tsx
@@ -83,13 +83,21 @@ type TableCellCheckbox = {
     isIndeterminate?: boolean;
 };
 
+type TableCellPlaceholder = {
+    /**
+     * The type of the cell.
+     */
+    type: TableCellType.Placeholder;
+};
+
 export type TableCellProps = TableCellBaseProps &
     (
         | TableCellText
         | TableCellTextToCopy
         | TableCellBadge
         | TableCellAvatarText
         | TableCellCheckbox
+        | TableCellPlaceholder
     );
 
 export function TableCell(props: TableCellProps): JSX.Element {
@@ -146,6 +154,10 @@ export function TableCell(props: TableCellProps): JSX.Element {
                         isIndeterminate={isIndeterminate}
                     />
                 );
+            case TableCellType.Placeholder:
+                return (
+                    <div className="h-[1em] w-full animate-shimmer rounded-md bg-placeholderShimmer bg-[length:1000px_100%] dark:bg-placeholderShimmerDark"></div>
+                );
             default:
                 return null;
         }

diff --git a/apps/ui-kit/src/lib/components/molecules/table-cell/table-cell.enums.ts b/apps/ui-kit/src/lib/components/molecules/table-cell/table-cell.enums.ts
@@ -7,4 +7,5 @@ export enum TableCellType {
     Badge = 'badge',
     AvatarText = 'avatar-text',
     Checkbox = 'checkbox',
+    Placeholder = 'placeholder',
 }
diff --git a/apps/ui-kit/src/lib/components/organisms/table/Table.tsx b/apps/ui-kit/src/lib/components/organisms/table/Table.tsx
@@ -7,11 +7,7 @@ import { TableRowType, TableProvider, useTableContext, TableProviderProps } from
 import { Button, ButtonSize, ButtonType, TableCell, TableCellType, TableHeaderCell } from '@/lib';
 import { ArrowLeft, DoubleArrowLeft, ArrowRight, DoubleArrowRight } from '@iota/ui-icons';
 
-export type TableProps = {
-    /**
-     * Does the table have pagination buttons.
-     */
-    hasPagination?: boolean;
+export interface TablePaginationOptions {
     /**
      * On Next page button click.
      */
@@ -28,6 +24,13 @@ export type TableProps = {
      * On Last page button click.
      */
     onLastPageClick?: () => void;
+}
+
+export type TableProps = {
+    /**
+     * Options for the table pagination.
+     */
+    paginationOptions?: TablePaginationOptions;
     /**
      * The label of the action button.
      */
@@ -47,12 +50,8 @@ export type TableProps = {
 };
 
 export function Table({
-    hasPagination,
+    paginationOptions,
     actionLabel,
-    onNextPageClick,
-    onPreviousPageClick,
-    onFirstPageClick,
-    onLastPageClick,
     onActionClick,
     supportingLabel,
     hasCheckboxColumn,
@@ -74,34 +73,38 @@ export function Table({
                 </div>
                 <div
                     className={cx('flex w-full items-center justify-between gap-2 pt-md', {
-                        hidden: !supportingLabel && !hasPagination && !actionLabel,
+                        hidden: !supportingLabel && !paginationOptions && !actionLabel,
                     })}
                 >
-                    {hasPagination && (
+                    {paginationOptions && (
                         <div className="flex gap-2">
                             <Button
                                 type={ButtonType.Secondary}
                                 size={ButtonSize.Small}
                                 icon={<DoubleArrowLeft />}
-                                onClick={onFirstPageClick}
+                                disabled={!paginationOptions.onFirstPageClick}
+                                onClick={paginationOptions.onFirstPageClick}
                             />
                             <Button
                                 type={ButtonType.Secondary}
                                 size={ButtonSize.Small}
                                 icon={<ArrowLeft />}
-                                onClick={onPreviousPageClick}
+                                disabled={!paginationOptions.onPreviousPageClick}
+                                onClick={paginationOptions.onPreviousPageClick}
                             />
                             <Button
                                 type={ButtonType.Secondary}
                                 size={ButtonSize.Small}
                                 icon={<ArrowRight />}
-                                onClick={onNextPageClick}
+                                disabled={!paginationOptions.onNextPageClick}
+                                onClick={paginationOptions.onNextPageClick}
                             />
                             <Button
                                 type={ButtonType.Secondary}
                                 size={ButtonSize.Small}
                                 icon={<DoubleArrowRight />}
-                                onClick={onLastPageClick}
+                                disabled={!paginationOptions.onLastPageClick}
+                                onClick={paginationOptions.onLastPageClick}
                             />
                         </div>
                     )}

diff --git a/apps/ui-kit/src/lib/tailwind/base.preset.ts b/apps/ui-kit/src/lib/tailwind/base.preset.ts
@@ -42,6 +42,21 @@ export const BASE_CONFIG: Config = {
                 'alliance-no2': ['AllianceNo2', 'sans-serif'],
                 inter: ['Inter', 'sans-serif'],
             },
+            backgroundImage: {
+                placeholderShimmer:
+                    'linear-gradient(90deg, #ecf1f4 -24.18%, rgba(237 242 245 / 40%) 73.61%, #f3f7f9 114.81%, #ecf1f4 114.82%)',
+                placeholderShimmerDark:
+                    'linear-gradient(90deg, #1d1e20 -24.18%, #5e636e 73.61%, #111213 114.81%, #1d1e20 114.82%)',
+            },
+            keyframes: {
+                shimmer: {
+                    '0%': { 'background-position': '-1000px 0' },
+                    '100%': { 'background-position': '1000px 0' },
+                },
+            },
+            animation: {
+                shimmer: 'shimmer 2s infinite linear',
+            },
         },
     },
 };
diff --git a/apps/ui-kit/src/storybook/stories/organisms/Table.stories.tsx b/apps/ui-kit/src/storybook/stories/organisms/Table.stories.tsx
@@ -46,6 +46,14 @@ const rowsData: TableCellProps[][] = [
         { type: TableCellType.Text, label: '10.04.2016' },
         { type: TableCellType.Text, label: '12.03.2019' },
     ],
+    [
+        { type: TableCellType.Placeholder },
+        { type: TableCellType.Placeholder },
+        { type: TableCellType.Placeholder },
+        { type: TableCellType.Placeholder },
+        { type: TableCellType.Placeholder },
+        { type: TableCellType.Placeholder },
+    ],
     [
         { type: TableCellType.AvatarText, leadingElement: <Globe />, label: 'Sam Johnson' },
         { type: TableCellType.Badge, badgeType: BadgeType.PrimarySoft, label: '40' },
@@ -105,7 +113,10 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
     args: {
         supportingLabel: '10.7k records',
-        hasPagination: true,
+        paginationOptions: {
+            onFirstPageClick: () => console.log('First'),
+            onNextPageClick: () => console.log('Next'),
+        },
         actionLabel: 'Action',
         hasCheckboxColumn: true,
         rowIndexes: [0, 1, 2],