@indico-data/design-system 2.50.0 → 2.51.0

package/src/components/tanstackTable/styles/_variables.scss

@@ -0,0 +1,35 @@
+// Light Theme Specific Variables
+
+:root [data-theme='light'] {
+  --pf-tanstack-table-background-color: var(--pf-white-color);
+  --pf-tanstack-table-font-color: var(--pf-gray-color);
+  --pf-tanstack-table-border-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-stripe-color: var(--pf-gray-color-100);
+  --pf-tanstack-table-hover-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-disabled-color: var(--pf-gray-color-300);
+  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
+  --pf-tanstack-table-clicked-color: var(--pf-secondary-color-100);
+  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
+    0 8px 16px rgba(0, 0, 0, 0.2);
+  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'],
+:root {
+  --pf-tanstack-table-background-color: var(--pf-primary-color-800);
+  --pf-tanstack-table-font-color: var(--pf-white-color);
+  --pf-tanstack-table-border-color: var(--pf-tertiary-color-800);
+  --pf-tanstack-table-stripe-color: var(--pf-primary-color-700);
+  --pf-tanstack-table-hover-color: var(--pf-primary-color-600);
+  --pf-tanstack-table-disabled-color: var(--pf-gray-color-900);
+  --pf-tanstack-table-disabled-button-color: var(--pf-primary-color-100);
+  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
+  --pf-tanstack-table-clicked-color: var(--pf-primary-color);
+  --pf-tanstack-table-highlighted-color: var(--pf-primary-color);
+  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4),
+    0 8px 16px rgba(0, 0, 0, 0.3);
+  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
+  --pf-tanstack-table-pagination-background-color: var(--pf-primary-color-700);
+}

package/src/components/tanstackTable/styles/table.scss

@@ -0,0 +1,204 @@
+@import './_variables.scss';
+@import './test.scss';
+
+@import '../components/ActionBar/ActionBar.scss';
+@import '../components/NoResults/NoResults.scss';
+
+.tanstack-table__outer-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+
+  .tanstack-table__container {
+    position: relative;
+    display: block;
+    overflow: auto;
+    height: 100%;
+
+    // Webkit scrollbar styles
+    &::-webkit-scrollbar {
+      width: var(--pf-size-2);
+      height: var(--pf-size-2);
+      cursor: pointer;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: var(--pf-tanstack-table-background-color);
+      border-radius: var(--pf-rounded);
+      cursor: pointer;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--pf-tanstack-table-border-color);
+      border-radius: var(--pf-rounded);
+      cursor: pointer;
+      &:hover {
+        background: var(--pf-primary-color);
+      }
+    }
+
+    // Firefox scrollbar styles
+    scrollbar-width: thin;
+    scrollbar-color: var(--pf-tanstack-table-border-color) var(--pf-tanstack-table-background-color);
+  }
+}
+
+.tanstack-table {
+  border-collapse: separate;
+  margin: 0;
+  table-layout: auto;
+  border-spacing: 0;
+  border-radius: var(--pf-rounded-lg);
+  width: 100%;
+
+  &.is-loading {
+    border: var(--pf-border-thin) solid var(--pf-border-color);
+    height: 100%;
+    width: 100%;
+  }
+
+  &__thead {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-sizing: border-box;
+
+    background-color: var(--pf-tanstack-table-background-color);
+
+    tr:first-child {
+      th {
+        &:first-child {
+          border-top-left-radius: var(--pf-rounded-lg);
+        }
+
+        &:last-child {
+          border-top-right-radius: var(--pf-rounded-lg);
+        }
+      }
+    }
+
+    &__th {
+      color: var(--pf-tanstack-table-font-color);
+      background: var(--pf-tanstack-table-background-color);
+      font-size: var(--pf-tanstack-table-font-size);
+      font-weight: var(--pf-font-weight-medium);
+      box-sizing: border-box;
+
+      border-top: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+      border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+      border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+
+      user-select: none;
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      max-width: 300px;
+      width: auto;
+      padding: 0 var(--pf-padding-2);
+      text-align: left;
+
+      &:first-child {
+        border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+      }
+    }
+  }
+
+  &__tbody {
+    tr:last-child {
+      td {
+        &:first-child {
+          border-bottom-left-radius: var(--pf-rounded-lg);
+        }
+
+        &:last-child {
+          border-bottom-right-radius: var(--pf-rounded-lg);
+        }
+      }
+    }
+
+    &__tr {
+      background: transparent;
+      width: 100%;
+
+      &.is-selected {
+        td {
+          background: var(--pf-tanstack-table-checked-color);
+        }
+      }
+
+      &.show-hover {
+        &:hover {
+          td {
+            background-color: var(--pf-tanstack-table-hover-color);
+            cursor: pointer;
+          }
+        }
+      }
+
+      &.is-clicked {
+        td {
+          background-color: var(--pf-tanstack-table-clicked-color);
+        }
+      }
+    }
+
+    &__td {
+      font-size: var(--pf-font-size-base);
+      font-weight: var(--pf-font-weight-medium);
+      color: var(--pf-tanstack-table-font-color);
+      background: var(--pf-tanstack-table-background-color);
+
+      border-right: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+      border-bottom: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+
+      box-sizing: border-box;
+
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      padding: 0 var(--pf-padding-2);
+      max-width: 300px;
+      width: auto;
+      text-align: left;
+
+      &:first-child {
+        border-left: var(--pf-border-sm) solid var(--pf-tanstack-table-border-color);
+      }
+    }
+  }
+
+  &__centered-row {
+    padding: var(--pf-padding-1) var(--pf-padding-2);
+    text-align: center;
+    vertical-align: middle;
+    height: 100%;
+    border: var(--pf-border-sm) solid var(--pf-border-color);
+
+    @keyframes shimmer {
+      0% {
+        background-color: var(--pf-primary-color-700) 40;
+      }
+      50% {
+        background-color: var(--pf-primary-color-700);
+      }
+      100% {
+        background-color: var(--pf-primary-color-700) 40;
+      }
+    }
+
+    animation: none;
+
+    &.is-loading {
+      animation: shimmer 3s ease-in-out infinite;
+    }
+
+    svg {
+      margin: 0 auto;
+      display: block;
+    }
+  }
+}

package/src/components/tanstackTable/styles/test.scss

@@ -0,0 +1,19 @@
+.tanstack-table__action-bar-test {
+  left: 20% !important;
+}
+
+.tanstack-table__action-bar-docs {
+  bottom: unset !important;
+  top: 50% !important;
+  transform: translate(-50%, -50%) !important;
+}
+
+.tanstack-table__column {
+  &.is-pinned {
+    opacity: 1;
+  }
+
+  &.is-not-pinned {
+    opacity: 0.3;
+  }
+}

package/src/components/tanstackTable/tanstack-table.d.ts

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import '@tanstack/react-table';
+
+declare module '@tanstack/react-table' {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    styles: {
+      definedColumnSize?: boolean;
+      header?: {
+        hasNoPadding?: boolean;
+        textAlign?: 'left' | 'center' | 'right';
+      };
+      cell?: {
+        hasNoPadding?: boolean;
+        textAlign?: 'left' | 'center' | 'right';
+      };
+    };
+  }
+}

package/src/components/tanstackTable/useTanstackTable.tsx

@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+import { ColumnDef } from '@tanstack/react-table';
+import { useEffect, useMemo } from 'react';
+
+type Props<T> = {
+  defaultColumns: ColumnDef<T>[];
+};
+
+export function useTanstackTable<T>({ defaultColumns }: Props<T>) {
+  const columns = useMemo<ColumnDef<T>[]>(() => defaultColumns, []);
+  const defaultData = useMemo(() => [], []);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [rowSelection, setRowSelection] = useState({});
+  const [formattedColumns, setFormattedColumns] = useState<ColumnDef<T>[]>(columns);
+  const [isClickedRow, setIsClickedRow] = useState<string[]>([]);
+
+  // Tracks changes to browser width to allow for updating of column widths
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return {
+    columns,
+    defaultData,
+    rowSelection,
+    setRowSelection,
+    windowWidth,
+    formattedColumns,
+    setFormattedColumns,
+    isClickedRow,
+    setIsClickedRow,
+  };
+}

package/src/index.ts

@@ -28,6 +28,7 @@ export { Menu } from './components/menu';
 export { Pill } from './components/pill';
 export { Badge } from './components/badge';
 export { Modal } from './components/modal';
+export { TanstackTable } from './components/tanstackTable';
 
 // Utilities
 export { registerFontAwesomeIcons } from './setup/setupIcons';

package/src/legacy/components/loading-indicators/CirclePulse/CirclePulse.tsx

@@ -29,6 +29,7 @@ export function CirclePulse(props: Props): React.ReactElement {
         aria-hidden={true}
         className={className}
         data-cy={props['data-cy']}
+        data-testid={props['data-testid']}
         id={id}
         overallsize={returnSizeString(overallSize)}
         ripplesize={returnSizeString(rippleSize)}

package/src/styles/index.scss

@@ -24,6 +24,7 @@
 @import '../components/badge/styles/Badge.scss';
 @import '../components/modal/styles/Modal.scss';
 @import '../components/pagination/styles/Pagination.scss';
+@import '../components/tanstackTable/styles/table.scss';
 
 @import '../components/pill/styles/Pill.scss';
 @import 'sheets'; // Port to an sheets component when we build it