@indico-data/design-system 2.2.0 → 2.3.1

package/src/components/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/components/table/styles/Table.scss

@@ -0,0 +1,79 @@
+@import 'variables.scss';
+
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  .table-loading {
+    color: var(--pf-table-font-color);
+  }
+  .table-wrapper {
+    background-color: var(--pf-table-background-color);
+    color: var(--pf-table-font-color);
+
+    .rdt_Table,
+    .rdt_TableRow,
+    .rdt_TableCol,
+    .rdt_TableCol_Sortable,
+    .rdt_TableCell,
+    .rdt_TableHeader,
+    .rdt_TableFooter,
+    .rdt_TableHead,
+    .rdt_TableHeadRow,
+    .rdt_TableBody,
+    .rdt_ExpanderRow,
+    .rdt_Pagination {
+      background-color: var(--pf-table-background-color);
+      color: var(--pf-table-font-color);
+    }
+    button {
+      svg {
+        fill: var(--pf-table-font-color);
+      }
+
+      &:disabled {
+        svg {
+          fill: var(--pf-gray-color-900);
+        }
+      }
+    }
+  }
+
+  .pf__table--striped {
+    .rdt_TableRow:nth-child(odd) {
+      .rdt_TableCell {
+        background-color: var(--pf-table-stripe-color);
+      }
+    }
+  }
+}
+
+:root [data-theme='light'] {
+  .table-wrapper {
+    .rdt_Table,
+    .rdt_TableRow,
+    .rdt_TableCol,
+    .rdt_TableCol_Sortable,
+    .rdt_TableCell,
+    .rdt_TableHeader,
+    .rdt_TableFooter,
+    .rdt_TableHead,
+    .rdt_TableHeadRow,
+    .rdt_TableBody,
+    .rdt_ExpanderRow,
+    .rdt_Pagination {
+      background-color: var(--pf-table-background-color);
+      color: var(--pf-table-font-color);
+    }
+    button {
+      svg {
+        fill: var(--pf-table-font-color);
+      }
+
+      &:disabled {
+        svg {
+          fill: var(--pf-gray-color-300);
+        }
+      }
+    }
+  }
+}

package/src/components/table/styles/_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/index.ts

@@ -24,7 +24,6 @@ export {
   CirclePulse,
   CircleSpinner,
   ConfirmModal,
-  Drawer,
   DatePicker,
   EditableInput,
   IconButton,
@@ -61,3 +60,4 @@ export { numberUtils, stringUtils, colorUtils } from './legacy/utils';
 export { Container, Row, Col } from './components/grid';
 export { Button } from './components/button';
 export { Icon } from './components/icons';
+export { Table } from './components/table';

package/src/legacy/components/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledAccordion } from './Accordion.styles';

package/src/legacy/components/ListTable/Header/Header.tsx

@@ -3,10 +3,8 @@
 import React from 'react';
 
 import { numberUtils } from '@/legacy/utils';
-
-import { BorderSelect } from '@/legacy/components/dropdowns';
-import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/components/icons';
+import { BorderSelect, Button } from '@/legacy/components';
+import { Icon } from '@/components';
 
 import { StyledHeader } from './Header.styles';
 

package/src/legacy/components/ListTable/ListTable.stories.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/legacy/components';
 
 import { ListTable } from './ListTable';
 import { mockUserHeaders, mockDocProcHeaders, mockAllUsers, mockDocProcReport } from './mock-data';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 
 const meta = {
   component: ListTable,

package/src/legacy/components/Toggle/Toggle.tsx

@@ -3,10 +3,9 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { Icon } from '@/components/icons';
-import { PermafrostComponent, IconName } from '@/types';
+import { Icon } from '@/components';
+import { PermafrostComponent, IconName, IconSizes } from '@/types';
 import { StyledToggle } from './Toggle.styles';
-import { IconSizes } from '@/components/icons/types';
 
 type Props = {
   disabled: boolean;

package/src/legacy/components/Tooltip/Tooltip.tsx

@@ -2,7 +2,8 @@
 
 import React from 'react';
 
-import { Icon, COLORS } from '@/index';
+import { COLORS } from '@/index';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 import { Tooltip as ReactTooltip } from 'react-tooltip';
 

package/src/legacy/components/basic-section/SectionTable/SectionTable.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import classNames from 'classnames';
 
 import { IconName } from '@/types';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { BorderSelect } from '@/legacy/components/dropdowns';
 
 import { StyledSectionTable } from './SectionTable.styles';

package/src/legacy/components/buttons/IconButton/IconButton.tsx

@@ -8,7 +8,7 @@ import { AriaButtonProps } from '@react-types/button';
 
 import { SPACING } from '@/legacy/tokens';
 import { IconName, PermafrostComponent } from '@/types';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { CircleSpinner } from '@/legacy/components';
 import { ButtonSize, IconButtonVariant } from '../types';
 

package/src/legacy/components/dropdowns/BorderSelect/BorderSelect.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { v4 as uuid } from 'uuid';
 import classNames from 'classnames';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSelect, StyledValidationError } from './BorderSelect.styles';

package/src/legacy/components/dropdowns/MultiCombobox/MultiCombobox.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { components } from 'react-select';
 
 import { PermafrostComponent } from '@/types';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { addCustomProps } from '../utils';
 import type { ComboboxProps, ComboboxOption } from '../types';
 

package/src/legacy/components/dropdowns/Select/Select.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { v4 as uuid } from 'uuid';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSelect } from './Select.styles';

package/src/legacy/components/dropdowns/SingleCombobox/SingleCombobox.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { components } from 'react-select';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 import { addCustomProps } from '../utils';
 

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/legacy/components/inputs/EditableInput/EditableInput.tsx

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 
 import { stringUtils } from '@/legacy/utils';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledEditableInput } from './EditableInput.styles';

package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.tsx

@@ -11,11 +11,10 @@ import {
   DateRange,
 } from 'react-day-picker';
 import { usePopper } from 'react-popper';
-import { IconName, PermafrostComponent } from '@/types';
-import { Icon } from '@/components/icons';
+import { IconName, IconSizes, PermafrostComponent } from '@/types';
+import { Icon } from '@/components';
 
 import { StyledNoInputDatePicker } from './NoInputDatePicker.styles';
-import { IconSizes } from '@/components/icons/types';
 
 type Props = PermafrostComponent & {
   ariaLabel?: string;

package/src/legacy/components/inputs/NumberInput/NumberInput.tsx

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import { v4 as uuid } from 'uuid';
 
 import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledNumberField } from './NumberInput.styles';

package/src/legacy/components/inputs/SearchInput/SearchInput.stories.tsx

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof SearchInput>;
 export const Base: Story = {};
 
 export const Border: Story = {
-  args: { border: true },
+  args: { inputBorder: true },
 };
 
 export const SearchIcon: Story = {
@@ -25,7 +25,7 @@ export const SearchIcon: Story = {
 };
 
 export const BorderAndSearchIcon: Story = {
-  args: { border: true, showSearchIcon: true },
+  args: { inputBorder: true, showSearchIcon: true },
 };
 
 export const ClearInputIcon: Story = {
@@ -33,5 +33,5 @@ export const ClearInputIcon: Story = {
 };
 
 export const ClearInputIconWithBorder: Story = {
-  args: { showClearInputIcon: true, border: true },
+  args: { showClearInputIcon: true, inputBorder: true },
 };

package/src/legacy/components/inputs/SearchInput/SearchInput.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { v4 as uuid } from 'uuid';
 import classNames from 'classnames';
 
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledSearchField } from './SearchInput.styles';

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

@@ -2,9 +2,8 @@
 
 import React from 'react';
 
-import { Icon } from '@/components/icons';
-import { PermafrostComponent } from '@/types';
-import { IconSizes } from '@/components/icons/types';
+import { Icon } from '@/components';
+import { PermafrostComponent, IconSizes } from '@/types';
 
 type Props = PermafrostComponent & {
   ariaLabel?: string;

package/src/legacy/components/user-feedback/Shrug/Shrug.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { Button } from '@/legacy/components/buttons';
-import { Icon } from '@/components/icons';
+import { Icon } from '@/components';
 import { PermafrostComponent } from '@/types';
 
 import { StyledShrug } from './Shrug.styles';

package/src/styles/index.scss

@@ -2,11 +2,11 @@
 @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/grid/styles/Grid.scss';
+@import '../components/table/styles/Table.scss';
 
-// Helper Classes
 @import 'typography';
 @import 'colors';
 @import 'borders';

package/src/types.ts

@@ -8,10 +8,8 @@ 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 };
+
+import { IconSizes } from '@/components/icons/types';
+export type { IconSizes };

package/webpack.config.js

@@ -34,16 +34,23 @@ module.exports = {
       },
       {
         test: /\.scss$/,
-        use: ['style-loader', {
-          loader: 'css-loader',
-          options: {
-            modules: false,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: false,
+            },
           },
-        }, 'sass-loader'],
+          'sass-loader',
+        ],
       },
     ],
   },
   resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
     extensions: ['.mjs', '.js', '.cjs', '.jsx', '.tsx', '.ts', '.mdx'],
     modules: ['node_modules'],
   },
@@ -54,4 +61,4 @@ module.exports = {
     'react-select': 'react-select',
     'styled-components': 'styled-components',
   },
-};
+};

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';