@indico-data/design-system 2.2.0 → 2.3.0

package/src/components/tables/table/Table.tsx

@@ -0,0 +1,112 @@
+import React from 'react';
+import DataTable, { TableColumn, Direction, Alignment } from 'react-data-table-component';
+import { LoadingComponent } from './LoadingComponent';
+
+type LocalDirection = 'auto' | 'ltr' | 'rtl';
+type LocalAlignment = 'left' | 'right' | 'center';
+interface TableProps {
+  columns: TableColumn<any>[];
+  data: Record<string, any>[];
+  responsive?: boolean;
+  direction?: LocalDirection;
+  subHeaderAlign?: LocalAlignment;
+  subHeaderWrap?: boolean;
+  pagination?: boolean;
+  selectableRows?: boolean;
+  keyField?: string;
+  title?: string | React.ReactNode;
+  striped?: boolean;
+  highlightOnHover?: boolean;
+  pointerOnHover?: boolean;
+  dense?: boolean;
+  persistTableHead?: boolean;
+  noDataComponent?: string | React.ReactNode;
+  isDisabled?: boolean;
+  onRowClicked?: (row: Record<string, any>, event: React.MouseEvent) => void;
+  onRowDoubleClicked?: (row: Record<string, any>, event: React.MouseEvent) => void;
+  onRowMouseEnter?: (row: Record<string, any>, event: React.MouseEvent) => void;
+  onRowMouseLeave?: (row: Record<string, any>, event: React.MouseEvent) => void;
+  defaultSortFieldId?: string | number;
+  defaultSortAsc?: boolean;
+  sortIcon?: React.ReactNode;
+  sortServer?: boolean;
+  sortFunction?: any;
+  onSort?: any;
+  selectableRowsVisibleOnly?: boolean;
+  selectableRowsHighlight?: boolean;
+  selectableRowsSingle?: boolean;
+  selectableRowsNoSelectAll?: boolean;
+  selectableRowsComponent?: any;
+  selectableRowsComponentProps?: Record<string, any>;
+  clearSelectedRows?: boolean;
+  selectableRowSelected?: (row: Record<string, any>) => boolean;
+  selectableRowDisabled?: (row: Record<string, any>) => boolean;
+  onSelectedRowsChange?: any;
+  expandableRows?: boolean;
+  expandableIcon?: any;
+  expandableRowsComponent?: any;
+  expandableRowDisabled?: any;
+  expandableRowExpanded?: any;
+  expandableRowsComponentProps?: Record<string, any>;
+  expandOnRowClicked?: boolean;
+  expandOnRowDoubleClicked?: boolean;
+  expandableRowsHideExpander?: boolean;
+  expandableInheritConditionalStyles?: boolean;
+  onRowExpandToggled?: any;
+
+  paginationServer?: boolean;
+  paginationServerOptions?: Record<string, any>;
+  paginationDefaultPage?: number;
+  paginationResetDefaultPage?: boolean;
+  paginationTotalRows?: number;
+  paginationPerPage?: number;
+  paginationRowsPerPageOptions?: number[];
+  paginationComponent?: any;
+  paginationComponentOptions?: Record<string, any>;
+  paginationIconFirstPage?: any;
+  paginationIconLastPage?: any;
+  paginationIconNext?: any;
+  paginationIconPrevious?: any;
+  onChangePage?: any;
+  onChangeRowsPerPage?: any;
+
+  actions?: any;
+  noHeader?: boolean;
+  fixedHeader?: boolean;
+  fixedHeaderScrollHeight?: string;
+  subHeader?: boolean;
+  subHeaderComponent?: any;
+
+  isLoading?: boolean;
+}
+
+export const Table = (props: TableProps) => {
+  const {
+    responsive = true,
+    direction = 'auto',
+    keyField = 'id',
+    striped = true,
+    noDataComponent = 'built-in',
+    isDisabled,
+    isLoading,
+    subHeaderAlign = 'left',
+    ...rest
+  } = props;
+  return (
+    <div className="table-wrapper">
+      <DataTable
+        responsive={responsive}
+        direction={direction as Direction}
+        subHeaderAlign={subHeaderAlign as Alignment}
+        keyField={keyField}
+        striped={striped}
+        className={`${striped ? 'pf__table--striped' : ''}`}
+        disabled={isDisabled}
+        noDataComponent={noDataComponent}
+        progressPending={isLoading}
+        progressComponent={<LoadingComponent />}
+        {...rest}
+      />
+    </div>
+  );
+};

package/src/components/tables/table/_variables.scss

@@ -0,0 +1,19 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-table-font-color: var(--pf-gray-color);
+  --pf-table-stripe-color: var(--pf-gray-color-100);
+}
+
+// Light Theme Specific Variables
+:root [data-theme='light'] {
+  --pf-table-background-color: var(--pf-white-color);
+  --pf-table-stripe-color: var(--pf-gray-color-100);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-table-background-color: var(--pf-primary-color-700);
+  --pf-table-stripe-color: var(--pf-primary-color-400);
+}

package/src/components/tables/table/index.ts

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

package/src/components/tables/table/sampleData.ts

@@ -0,0 +1,162 @@
+export const sampleData = [
+  {
+    name: 'Thalion',
+    class: 'Ranger',
+    age: 120,
+    weapon: 'Longbow',
+    backstory: 'Raised by wolves in the deep forests.',
+    favoriteMeal: 'Venison stew',
+  },
+  {
+    name: 'Brom',
+    class: 'Fighter',
+    age: 35,
+    weapon: 'Greatsword',
+    backstory: 'A former soldier seeking redemption.',
+    favoriteMeal: 'Roasted boar',
+  },
+  {
+    name: 'Elysia',
+    class: 'Cleric',
+    age: 60,
+    weapon: 'Mace',
+    backstory: 'A devoted follower of the goddess of life.',
+    favoriteMeal: 'Vegetable soup',
+  },
+  {
+    name: 'Faelar',
+    class: 'Rogue',
+    age: 80,
+    weapon: 'Dagger',
+    backstory: 'Grew up on the streets of a bustling city.',
+    favoriteMeal: 'Bread and cheese',
+  },
+  {
+    name: 'Maelis',
+    class: 'Wizard',
+    age: 200,
+    weapon: 'Staff',
+    backstory: 'A scholar obsessed with ancient magic.',
+    favoriteMeal: 'Mushroom stew',
+  },
+  {
+    name: 'Grimm',
+    class: 'Barbarian',
+    age: 40,
+    weapon: 'Battleaxe',
+    backstory: 'Hails from a tribe in the frozen north.',
+    favoriteMeal: 'Grilled salmon',
+  },
+  {
+    name: 'Seraphina',
+    class: 'Bard',
+    age: 25,
+    weapon: 'Rapier',
+    backstory: 'A wandering minstrel with a mysterious past.',
+    favoriteMeal: 'Apple pie',
+  },
+  {
+    name: 'Kael',
+    class: 'Druid',
+    age: 75,
+    weapon: 'Scimitar',
+    backstory: 'A guardian of the natural world.',
+    favoriteMeal: 'Berry tart',
+  },
+  {
+    name: 'Aria',
+    class: 'Paladin',
+    age: 30,
+    weapon: 'Longsword',
+    backstory: 'A knight on a divine mission.',
+    favoriteMeal: 'Roasted chicken',
+  },
+  {
+    name: 'Xan',
+    class: 'Warlock',
+    age: 45,
+    weapon: 'Pact Blade',
+    backstory: 'Made a pact with a powerful entity for magic.',
+    favoriteMeal: 'Stuffed peppers',
+  },
+  {
+    name: 'Lyra',
+    class: 'Sorcerer',
+    age: 28,
+    weapon: 'Dagger',
+    backstory: 'Born with innate magical abilities.',
+    favoriteMeal: 'Pancakes with syrup',
+  },
+  {
+    name: 'Thorn',
+    class: 'Monk',
+    age: 50,
+    weapon: 'Quarterstaff',
+    backstory: 'A hermit who seeks enlightenment.',
+    favoriteMeal: 'Rice and vegetables',
+  },
+  {
+    name: 'Cassia',
+    class: 'Ranger',
+    age: 32,
+    weapon: 'Shortbow',
+    backstory: 'A hunter with a keen eye.',
+    favoriteMeal: 'Roasted pheasant',
+  },
+  {
+    name: 'Darius',
+    class: 'Fighter',
+    age: 36,
+    weapon: 'Longsword',
+    backstory: 'A mercenary with a heart of gold.',
+    favoriteMeal: 'Beef stew',
+  },
+  {
+    name: 'Iris',
+    class: 'Cleric',
+    age: 60,
+    weapon: 'Warhammer',
+    backstory: 'A healer devoted to the god of light.',
+    favoriteMeal: 'Fresh bread and soup',
+  },
+  {
+    name: 'Fenrir',
+    class: 'Barbarian',
+    age: 42,
+    weapon: 'Greataxe',
+    backstory: 'A warrior from a distant land.',
+    favoriteMeal: 'Grilled steak',
+  },
+  {
+    name: 'Luna',
+    class: 'Druid',
+    age: 70,
+    weapon: 'Sickle',
+    backstory: 'A protector of the natural world.',
+    favoriteMeal: 'Fruit salad',
+  },
+  {
+    name: 'Orion',
+    class: 'Paladin',
+    age: 33,
+    weapon: 'Halberd',
+    backstory: 'A knight on a holy quest.',
+    favoriteMeal: 'Roasted lamb',
+  },
+  {
+    name: 'Astra',
+    class: 'Bard',
+    age: 26,
+    weapon: 'Lute',
+    backstory: 'A musician with a magical voice.',
+    favoriteMeal: 'Honey cake',
+  },
+  {
+    name: 'Zephyr',
+    class: 'Rogue',
+    age: 29,
+    weapon: 'Shortsword',
+    backstory: 'A thief with a quick hand.',
+    favoriteMeal: 'Fish and chips',
+  },
+];

package/src/index.ts

@@ -24,7 +24,6 @@ export {
   CirclePulse,
   CircleSpinner,
   ConfirmModal,
-  Drawer,
   DatePicker,
   EditableInput,
   IconButton,

package/src/legacy/components/index.ts

@@ -29,7 +29,6 @@ export { Pagination } from './Pagination';
 export { Shrug } from './user-feedback';
 export { ConfirmModal, ModalBase } from './modals';
 export { LoadingAwareContainer } from './LoadingAwareContainer';
-export { Drawer } from './Navigation/Drawer';
 export { TextTruncate } from './text-truncate';
 export { Toggle } from './Toggle';
 export { Tooltip } from './Tooltip';

package/src/styles/index.scss

@@ -2,11 +2,10 @@
 @import 'variables/index.scss';
 
 // Components
-@import '../legacy/components/Navigation/Drawer/Drawer.scss';
 @import '../components/button/styles/Button.scss';
 @import '../components/icons/styles/Icon.scss';
+@import '../components/tables/table/Table.scss';
 
-// Helper Classes
 @import 'typography';
 @import 'colors';
 @import 'borders';

package/src/types.ts

@@ -8,10 +8,5 @@ export type PermafrostComponent = {
 export type ButtonVariant = 'default' | 'primary' | 'destructive';
 export type ButtonSize = 'normal' | 'large';
 
-// Component types -- TODO -- move to their own files
-import { ListItem } from './legacy/components/Navigation/Drawer/types';
-
-export type { ListItem };
-
 import { IconName } from '../build/generated/iconTypes';
 export type { IconName };

package/lib/src/legacy/components/Navigation/Drawer/Drawer.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-import { IconName, PermafrostComponent } from '@/types';
-import { ListItem } from './types';
-import './Drawer.scss';
-type Props = PermafrostComponent & {
-    style?: React.CSSProperties;
-    logoText?: string;
-    logoIcon?: IconName;
-    headerComponent?: React.ReactNode;
-    navigationItems?: ListItem[];
-    footerItems?: ListItem[];
-    expandedWidth?: string;
-    collapsedWidth?: string;
-};
-export declare const Drawer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/src/legacy/components/Navigation/Drawer/Drawer.stories.d.ts

@@ -1,6 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Drawer } from '@/legacy/components/Navigation/Drawer';
-declare const meta: Meta<typeof Drawer>;
-export default meta;
-type Story = StoryObj<typeof Drawer>;
-export declare const Normal: Story;

package/lib/src/legacy/components/Navigation/Drawer/DrawerLinkList.d.ts

@@ -1,9 +0,0 @@
-import { PermafrostComponent } from '@/types';
-import { ListItem } from './types';
-type Props = PermafrostComponent & {
-    style?: object;
-    listItems?: ListItem[];
-    isOpen: boolean;
-};
-export declare const DrawerLinkList: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/src/legacy/components/Navigation/Drawer/DrawerLinkList.styles.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const StyledDrawerLinkList: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/lib/src/legacy/components/Navigation/Drawer/__mocks__/mocks.d.ts

@@ -1,3 +0,0 @@
-import { ListItem } from '../types';
-export declare const navigationItems: ListItem[];
-export declare const footerItems: ListItem[];

package/lib/src/legacy/components/Navigation/Drawer/__tests__/DrawerLinkList.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/src/legacy/components/Navigation/Drawer/index.d.ts

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

package/lib/src/legacy/components/Navigation/Drawer/types.d.ts

@@ -1,7 +0,0 @@
-import { IconName } from '@/types';
-export type ListItem = {
-    id: string;
-    icon: IconName;
-    label: string;
-    path: string;
-};

package/lib/src/legacy/components/Navigation/index.d.ts

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

package/src/legacy/components/Navigation/Drawer/Drawer.scss

@@ -1,61 +0,0 @@
-
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
-.pf__drawer__wrapper {
-  color: #444444;
-  background-color: white;
-  box-sizing: border-box;
-  height: 100vh;
-  padding: 30px 4px 10px 4px;
-  transition: width 0.2s ease-in-out;
-  box-shadow: 5px 0 10px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-  width: 100%;
-
-  .pf__drawer__header__logo-text {
-    font-family: 'Poppins', sans-serif;
-    font-weight: 600;
-  }
-
-  a:link {
-    color: #444444;
-  }
-
-  a {
-    color: #444444;
-    text-decoration: none;
-  }
-
-
-  .pf__drawer__header {
-    margin-bottom: 30px;
-    color: black;
-    display: flex;
-    align-items: center;
-    padding-left: 10px;
-    white-space: nowrap;
-
-    .pf__drawer__header__text {
-      overflow: hidden;
-      transition: opacity 0.2s ease-in-out;
-    }
-
-    span {
-      display: flex;
-      align-items: center;
-    }
-
-    p {
-      font-size: 20px;
-      margin: 0 0 0 12px;
-    }
-  }
-
-  .pf__drawer__content {
-    height: calc(100% - 42px);
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    padding-bottom: 10px;
-  }
-}

package/src/legacy/components/Navigation/Drawer/Drawer.stories.tsx

@@ -1,43 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Drawer } from '@/legacy/components/Navigation/Drawer';
-import React from 'react';
-import { footerItems, navigationItems } from './__mocks__/mocks';
-import { MemoryRouter } from 'react-router-dom';
-
-const meta: Meta<typeof Drawer> = {
-  component: Drawer,
-  tags: ['autodocs'],
-  title: 'legacy/Navigation/Drawer',
-  decorators: [
-    (Story) => (
-      <MemoryRouter initialEntries={['/']}>
-        <div style={{ width: '100%', display: 'flex', height: '800px' }}>
-          <div style={{ width: '50px', position: 'relative' }}>
-            <div style={{ position: 'absolute' }}>
-              <Story />
-            </div>
-          </div>
-          <div style={{ width: '100%', height: '60px' }}>
-            This text is to help illustrate the ability to expand the drawer over content without
-            shifting it in any way. Simply add a position relative div and place this in a position
-            absolute div.
-          </div>
-        </div>
-      </MemoryRouter>
-    ),
-  ],
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Drawer>;
-
-export const Normal: Story = {
-  args: {
-    logoText: 'INDICO INSIGHTS',
-    logoIcon: 'indico-o',
-    navigationItems: navigationItems,
-    footerItems: footerItems,
-  },
-};

package/src/legacy/components/Navigation/Drawer/Drawer.tsx

@@ -1,107 +0,0 @@
-/* 
-## TODO
--Documentation
--Split header block to its own component.
--Add support for horizontal lines between list items.
--Use variables for styles
--Add toggle options other than mouseover
--Add easy color support
--Add documentation
--Icons should ideally have a size enum
--Combine headerComponent, logoText and logoIcon props into one prop and functionality
-*/
-import React from 'react';
-import { IconName, PermafrostComponent } from '@/types';
-import { Icon } from '@/components/icons';
-import { DrawerLinkList } from './DrawerLinkList';
-import { ListItem } from './types';
-import './Drawer.scss';
-
-type Props = PermafrostComponent & {
-  style?: React.CSSProperties;
-  logoText?: string;
-  logoIcon?: IconName;
-  headerComponent?: React.ReactNode;
-  navigationItems?: ListItem[];
-  footerItems?: ListItem[];
-  expandedWidth?: string;
-  collapsedWidth?: string;
-};
-
-export const Drawer = (props: Props) => {
-  const {
-    id,
-    style = {},
-    logoText,
-    logoIcon,
-    navigationItems,
-    footerItems,
-    headerComponent,
-    expandedWidth = '245px',
-    collapsedWidth = '50px',
-    ...restOfProps
-  } = props;
-
-  const [isOpen, setIsOpen] = React.useState(false);
-  const handleMouseOver = () => {
-    setIsOpen(true);
-  };
-
-  const handleMouseOut = () => {
-    setIsOpen(false);
-  };
-
-  const currentWidth = isOpen ? expandedWidth : collapsedWidth;
-
-  return (
-    <div
-      id={id}
-      data-cy={props['data-cy']}
-      data-testid={props['data-testid']}
-      style={{
-        ...style,
-      }}
-      {...restOfProps}
-      onMouseOver={handleMouseOver}
-      onMouseOut={handleMouseOut}
-      aria-expanded={isOpen}
-    >
-      <div
-        className={'pf__drawer__wrapper'}
-        style={{
-          width: currentWidth,
-        }}
-      >
-        <div className="pf__drawer__header">
-          {headerComponent ? (
-            headerComponent
-          ) : (
-            <span>
-              {logoIcon ? <Icon name={logoIcon} size="lg" data-testid="logo-icon" /> : null}
-              <p
-                data-testid="logo-text"
-                className="pf__drawer__header__logo-text"
-                aria-hidden={!isOpen}
-              >
-                {logoText}
-              </p>
-            </span>
-          )}
-        </div>
-        <div className="pf__drawer__content">
-          {navigationItems?.length ? (
-            <div className="pf__drawer__navigation" data-testid="drawer-navigation">
-              <DrawerLinkList isOpen={isOpen} listItems={navigationItems} />
-            </div>
-          ) : null}
-
-          {footerItems?.length ? (
-            <div className="pf__drawer__footer" data-testid="drawer-footer">
-              <DrawerLinkList isOpen={isOpen} listItems={footerItems} />
-            </div>
-          ) : null}
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/legacy/components/Navigation/Drawer/DrawerLinkList.styles.ts

@@ -1,65 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledDrawerLinkList = styled.div`
-  .drawer__list {
-    white-space: nowrap;
-
-    .drawer__list__item {
-      box-sizing: border-box;
-      margin-bottom: 10px;
-      font-weight: 500;
-      font-size: 16px;
-      display: flex;
-      align-items: center;
-      padding-top: 12px;
-      padding-bottom: 10px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-
-      &:hover {
-        color: #6833d0;
-        background-color: #efebf7;
-
-        a,
-        &:active {
-          color: #6833d0;
-        }
-      }
-
-      &--active {
-        color: white;
-        background-color: #6833d0;
-        border-radius: 4px;
-
-        a,
-        &:active {
-          color: white;
-        }
-      }
-
-      .drawer__list__item__link {
-        font-size: 16px;
-        display: flex;
-        align-items: center;
-
-        .drawer__list__item__icon {
-          width: 22px;
-          height: 22px;
-          margin-right: 12px;
-          margin-left: 10px;
-        }
-
-        .drawer__list__item__label {
-          opacity: 1;
-        }
-
-        .drawer__list__item__label--hidden {
-          opacity: 0;
-          transition: all 0.3s ease-out;
-        }
-      }
-    }
-  }
-`;