@indico-data/design-system 3.0.10 → 3.1.0

package/src/components/stepper/Stepper.stories.tsx

@@ -17,7 +17,6 @@ const meta: Meta = {
   argTypes: {
     legendHeader: {
       control: false,
-      description: 'The header content for the legend.',
       table: {
         category: 'Props',
         type: {
@@ -27,7 +26,6 @@ const meta: Meta = {
     },
     legendFooter: {
       control: false,
-      description: 'The footer content for the legend.',
       table: {
         category: 'Props',
         type: {
@@ -37,7 +35,6 @@ const meta: Meta = {
     },
     steps: {
       control: false,
-      description: 'An array of step objects that define the stepper navigation.',
       table: {
         category: 'Props',
         type: {
@@ -46,7 +43,6 @@ const meta: Meta = {
       },
     },
     label: {
-      description: 'Display text for the step in the sidebar/legend',
       table: {
         category: 'Step Properties',
         type: {
@@ -56,8 +52,6 @@ const meta: Meta = {
       control: false,
     },
     isCompleted: {
-      description:
-        'Indicates whether this step has been completed. Used to track progress and determine whether to enable subsequent steps.',
       table: {
         category: 'Step Properties',
         type: {
@@ -68,8 +62,6 @@ const meta: Meta = {
       control: false,
     },
     isNextDisabled: {
-      description:
-        'When true, the Next button will be disabled for this step. Set to true for steps that require completion before proceeding.',
       table: {
         category: 'Step Properties',
         type: {
@@ -80,8 +72,6 @@ const meta: Meta = {
       control: false,
     },
     isOptional: {
-      description:
-        'When true, the step can be skipped (the Next button remains enabled). Used for optional information or steps that are not required to complete the flow.',
       table: {
         category: 'Step Properties',
         type: {
@@ -92,8 +82,6 @@ const meta: Meta = {
       control: false,
     },
     isSidebarEnabled: {
-      description:
-        'When true, the step is clickable in the sidebar. Used for restricting navigation until previous steps are completed.',
       table: {
         category: 'Step Properties',
         type: {
@@ -105,8 +93,6 @@ const meta: Meta = {
     },
     currentStep: {
       control: false,
-      description:
-        'The current step of the stepper. This value should be an index of the steps array.',
       table: {
         category: 'Props',
         type: {
@@ -117,7 +103,6 @@ const meta: Meta = {
     },
     onBackClick: {
       control: false,
-      description: 'The function to call when the back button is clicked.',
       table: {
         category: 'Callbacks',
         type: {
@@ -127,7 +112,6 @@ const meta: Meta = {
     },
     onFinishClick: {
       control: false,
-      description: 'The function to call when the finish button is clicked.',
       table: {
         category: 'Callbacks',
         type: {
@@ -137,7 +121,6 @@ const meta: Meta = {
     },
     onStepClick: {
       control: false,
-      description: 'The function to call when a step is clicked ont he legend.',
       table: {
         category: 'Callbacks',
         type: {
@@ -147,7 +130,6 @@ const meta: Meta = {
     },
     onNextClick: {
       control: false,
-      description: 'The function to call when the next button is clicked.',
       table: {
         category: 'Callbacks',
         type: {
@@ -157,7 +139,6 @@ const meta: Meta = {
     },
     children: {
       control: false,
-      description: 'Any item passed to this component as a child will be rendered as a step.',
       table: {
         category: 'Props',
         type: {

package/src/components/stepper/types.ts

@@ -1,14 +1,22 @@
 import { ReactNode } from 'react';
 
 export interface StepperProps {
+  /** An array of step objects that define the stepper navigation. */
   steps: Step[];
   currentStep?: number;
+  /** The header content for the legend. */
   legendHeader?: ReactNode;
+  /** The footer content for the legend. */
   legendFooter?: ReactNode;
+  /** The function to call when the back button is clicked. */
   onBackClick: () => void;
+  /** The function to call when the next button is clicked. */
   onNextClick: () => void;
+  /** The function to call when the finish button is clicked. */
   onFinishClick: () => void;
+  /** Any item passed to this component as a child will be rendered as a step. */
   children: React.ReactNode;
+  /** The function to call when a step is clicked ont he legend. */
   onStepClick: (step: number) => void;
 }
 
@@ -19,6 +27,7 @@ export interface StepperLegendProps {
 }
 
 export interface Step {
+  /** Display text for the step in the sidebar/legend */
   label: string;
   isCompleted?: boolean;
   isNextDisabled?: boolean;

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

@@ -13,8 +13,6 @@ const meta: Meta = {
   argTypes: {
     columns: {
       control: false,
-      description:
-        'The columns to display in the table. All columns require a unique id property. For pinned columns, please see the pinned example below.',
       table: {
         category: 'Data',
         type: { summary: 'array' },
@@ -23,7 +21,6 @@ const meta: Meta = {
     },
     isFullHeight: {
       control: 'boolean',
-      description: 'Enables height to be set to the full height of the container',
       table: {
         category: 'Styling',
         type: { summary: 'boolean' },
@@ -32,8 +29,6 @@ const meta: Meta = {
     },
     data: {
       control: false,
-      description:
-        'Its highly recommended that your data have a unique identifier (keyField). The default keyField is id. If you need to override this value then use the keyField proeprty below',
       table: {
         category: 'Data',
         type: { summary: 'array' },
@@ -42,7 +37,6 @@ const meta: Meta = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Disables the Table section',
       table: {
         category: 'Styling',
         type: {
@@ -53,7 +47,6 @@ const meta: Meta = {
     },
     isLoading: {
       control: 'boolean',
-      description: 'It sets the loading of the table',
       table: {
         category: 'Styling',
         type: {
@@ -65,8 +58,6 @@ const meta: Meta = {
     direction: {
       control: 'select',
       options: ['auto', 'ltr', 'rtl'],
-      description:
-        'Accepts: ltr, rtl, or auto. When set to auto (default), RDT will attempt to detect direction by checking the HTML and DIV tags. For cases where you need to force rtl, or ltr just set this option manually (i.e. SSR).',
       table: {
         category: 'Accessibility',
         defaultValue: { summary: 'auto' },
@@ -75,8 +66,6 @@ const meta: Meta = {
 
     title: {
       control: 'text',
-      description:
-        'The title displayed in the Table Header. If you do not provide the title property the Table Header will not be rendered',
       table: {
         category: 'Styling',
         type: {
@@ -87,7 +76,6 @@ const meta: Meta = {
     },
     responsive: {
       control: 'boolean',
-      description: 'Makes the table horizontally scrollable on smaller screen widths',
       table: {
         category: 'Accessibility',
         type: {
@@ -98,8 +86,6 @@ const meta: Meta = {
     },
     dense: {
       control: 'boolean',
-      description:
-        'Compacts the row height. can be overridden via theming rows.denseHeight. Note: If any custom elements exceed the dense height then the row will only compact to the tallest element any of your cells',
       table: {
         category: 'Accessibility',
         type: {
@@ -110,8 +96,6 @@ const meta: Meta = {
     },
     noHeader: {
       control: 'boolean',
-      description:
-        'Removes the table header. title, contextTitle and contextActions will be ignored',
       table: {
         category: 'Styling',
         type: {
@@ -122,7 +106,6 @@ const meta: Meta = {
     },
     noTableHead: {
       control: 'boolean',
-      description: 'Hides the the sort columns and titles (TableHead)',
       table: {
         category: 'Styling',
         type: {
@@ -133,7 +116,6 @@ const meta: Meta = {
     },
     onSort: {
       control: false,
-      description: 'Callback to access the sort state when a column is clicked. Returns',
       table: {
         category: 'Callbacks',
         type: {
@@ -144,7 +126,6 @@ const meta: Meta = {
     },
     subHeader: {
       control: 'boolean',
-      description: 'Show a sub header between the table and table header',
       table: {
         category: 'Styling',
         type: {
@@ -155,7 +136,6 @@ const meta: Meta = {
     },
     subHeaderComponent: {
       control: false,
-      description: 'A component you want to render',
       table: {
         category: 'Components',
         type: {
@@ -166,7 +146,6 @@ const meta: Meta = {
     },
     paginationPerPage: {
       control: 'number',
-      description: 'The default rows per page to use when the table initially loads',
       table: {
         category: 'Add-Ons',
         type: {
@@ -177,7 +156,6 @@ const meta: Meta = {
     },
     noDataComponent: {
       control: false,
-      description: 'A custom component to display when there are no records to display',
       table: {
         category: 'Components',
         type: {
@@ -188,8 +166,6 @@ const meta: Meta = {
     },
     expandableRows: {
       control: 'boolean',
-      description:
-        'Whether to make a row expandable, if true it requires an expandableRowsComponent. It is highly recommended your data set have a unique identifier defined as the keyField for row expansion to work properly.',
       table: {
         category: 'Add-Ons',
         type: {
@@ -200,8 +176,6 @@ const meta: Meta = {
     },
     clearSelectedRows: {
       control: 'boolean',
-      description:
-        'Toggling this property clears the selectedRows. If you use redux or react state you need to make sure that you pass a toggled value or the component will not update',
       table: {
         category: 'Styling',
         type: {
@@ -212,8 +186,6 @@ const meta: Meta = {
     },
     pagination: {
       control: 'boolean',
-      description:
-        'Enable pagination with defaults. by default the total record set will be sliced depending on the page, rows per page. if you wish to use server side pagination then use the paginationServer property',
       table: {
         category: 'Add-Ons',
         type: {
@@ -224,7 +196,6 @@ const meta: Meta = {
     },
     selectableRows: {
       control: 'boolean',
-      description: 'Whether to show selectable checkboxes',
       table: {
         category: 'Add-Ons',
         type: {
@@ -236,7 +207,6 @@ const meta: Meta = {
 
     striped: {
       control: 'boolean',
-      description: 'Stripe/band color the odd rows',
       table: {
         category: 'Accessibility',
         type: {
@@ -247,23 +217,18 @@ const meta: Meta = {
     },
     totalEntriesText: {
       control: 'text',
-      description:
-        'The text to display in the total entries section. This is hidden if 1. No pagination exists, 2. No string is passed.',
       table: {
         category: 'Styling',
       },
     },
     canPinColumns: {
       control: 'boolean',
-      description:
-        'Allows the pinning of columns to the left hand side. This is required when using the column pin API',
       table: {
         category: 'Add-Ons',
       },
     },
     onPinnedColumnsChange: {
       control: false,
-      description: 'Callback that receives the IDs of the pinned columns when they change.',
       table: {
         category: 'Add-Ons',
       },

package/src/components/table/types.ts

@@ -21,13 +21,22 @@ export type TableColumn<T> = PinnableColumn<T>;
 
 export interface TableProps<T>
   extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
+  /** The columns to display in the table. All columns require a unique id property. For pinned columns, please see the pinned example below. */
   columns: TableColumn<T>[];
+  /** Disables the Table section */
   isDisabled?: boolean;
+  /** It sets the loading of the table */
   isLoading?: boolean;
+  /** Accepts: ltr, rtl, or auto. When set to auto (default), RDT will attempt to detect direction by checking the HTML and DIV tags. For cases where you need to force rtl, or ltr just set this option manually (i.e. SSR). */
   direction?: Direction;
+  /** Show a sub header between the table and table header */
   subHeaderAlign?: 'left' | 'right' | 'center';
+  /** Enables height to be set to the full height of the container */
   isFullHeight?: boolean;
+  /** The text to display in the total entries section. This is hidden if 1. No pagination exists, 2. No string is passed. */
   totalEntriesText?: string;
+  /** Allows the pinning of columns to the left hand side. This is required when using the column pin API */
   canPinColumns?: boolean;
+  /** Callback that receives the IDs of the pinned columns when they change. */
   onPinnedColumnsChange?: (pinnedColumnIds: any[]) => void;
 }

package/src/components/tanstackTable/TankstackTable.types.ts

@@ -1,10 +1,15 @@
 import { Row, ColumnDef, SortingState } from '@tanstack/react-table';
 
 export type WithPaginationProps = {
+  /** Number of rows to display per pagination page. */
   rowsPerPage: number;
+  /** Total number of rows in the table. */
   rowCount: number;
+  /** Callback when the page changes. */
   onChangePage: (page: number) => void;
+  /** Current page number. */
   currentPage: number;
+  /** Text to display for the total number of entries. */
   totalEntriesText?: string;
   showPagination: true;
 };
@@ -21,27 +26,47 @@ export type WithoutPaginationProps = {
 export type PaginationProps = WithPaginationProps | WithoutPaginationProps;
 
 export type Props<T extends object> = {
+  /** Array of data items. These are the items that will be displayed in the table cell. */
   data: T[];
+  /** Striped rows */
   isStriped?: boolean;
+  /** Column definitions including an `id` field. This is how you define your table structure. */
   columns: ColumnDef<T & { id: string }>[];
+  /** Additional option for class names. */
   className?: string;
+  /** class name for styling the action bar. */
   actionBarClassName?: string;
+  /** Component for table actions with selected items. */
   TableActions?: React.ComponentType<{ selectedItems: Row<any>[]; unselectRows: () => void }>;
+  /** Error state of the table. */
   error?: {
     hasError: boolean;
     errorMessage?: string;
   };
+  /** Enables row selection or defines selection conditions. */
   enableRowSelection?: boolean | ((row: Row<T>) => boolean);
+  /** Function to clear applied filters. */
   clearFilters?: () => void;
+  /** Indicates if filters are applied. */
   hasFilters?: boolean;
+  /** When this is true, the table is considered to be in a loading state. */
   isLoading?: boolean;
+  /** Message to display when the table is loading. */
   isLoadingMessage?: string;
+  /** Columns that are pinned by default. */
   defaultPinnedColumns?: string[];
+  /** Callback when a row is clicked. */
   onClickRow?: ((row: Row<T>) => void) | null;
+  /** Callback when a row is clicked. */
   onRowClick?: (row: T) => void;
+  /** Array of active rows. */
   activeRows?: string[];
+  /** Row selection state. */
   rowSelection?: Record<string, boolean>;
+  /** Callback when a row is selected. */
   onRowSelectionChange?: (updater: Record<string, boolean>) => void;
+  /** Callback when all rows are selected. */
   onSelectAllChange?: (isSelected: boolean) => void;
+  /** You may pass a default sorting state to the table. This will be used to sort the table by default. This is useful if you want to sort the table by a column by default. */
   defaultSorting?: SortingState;
 } & PaginationProps;

package/src/components/tanstackTable/TanstackTable.stories.tsx

@@ -27,8 +27,6 @@ const meta: Meta = {
   },
   argTypes: {
     defaultSorting: {
-      description:
-        'You may pass a default sorting state to the table. This will be used to sort the table by default. This is useful if you want to sort the table by a column by default.',
       control: false,
       table: {
         category: 'Props',
@@ -36,7 +34,6 @@ const meta: Meta = {
       },
     },
     isStriped: {
-      description: 'Striped rows',
       defaultValue: { summary: 'true' },
       control: { type: 'boolean' },
       table: {
@@ -45,8 +42,6 @@ const meta: Meta = {
       },
     },
     data: {
-      description:
-        'Array of data items. These are the items that will be displayed in the table cell.',
       control: false,
       table: {
         category: 'Props',
@@ -54,8 +49,6 @@ const meta: Meta = {
       },
     },
     columns: {
-      description:
-        'Column definitions including an `id` field. This is how you define your table structure.',
       control: false,
       table: {
         category: 'Props',
@@ -63,7 +56,6 @@ const meta: Meta = {
       },
     },
     className: {
-      description: 'Additional option for class names.',
       control: false,
       table: {
         category: 'Props',
@@ -71,7 +63,6 @@ const meta: Meta = {
       },
     },
     actionBarClassName: {
-      description: 'class name for styling the action bar.',
       control: false,
       table: {
         category: 'Props',
@@ -79,7 +70,6 @@ const meta: Meta = {
       },
     },
     TableActions: {
-      description: 'Component for table actions with selected items.',
       control: false,
       table: {
         category: 'Props',
@@ -89,7 +79,6 @@ const meta: Meta = {
       },
     },
     error: {
-      description: 'Error state of the table.',
       control: false,
       table: {
         category: 'Props',
@@ -97,7 +86,6 @@ const meta: Meta = {
       },
     },
     enableRowSelection: {
-      description: 'Enables row selection or defines selection conditions.',
       control: { type: 'boolean' },
       table: {
         category: 'Props',
@@ -105,7 +93,6 @@ const meta: Meta = {
       },
     },
     clearFilters: {
-      description: 'Function to clear applied filters.',
       action: 'clearFilters',
       control: false,
       table: {
@@ -114,7 +101,6 @@ const meta: Meta = {
       },
     },
     hasFilters: {
-      description: 'Indicates if filters are applied.',
       control: { type: 'boolean' },
       table: {
         category: 'Props',
@@ -123,7 +109,6 @@ const meta: Meta = {
       },
     },
     isLoading: {
-      description: 'When this is true, the table is considered to be in a loading state.',
       control: { type: 'boolean' },
       table: {
         category: 'Props',
@@ -132,7 +117,6 @@ const meta: Meta = {
       },
     },
     isLoadingMessage: {
-      description: 'Message to display when the table is loading.',
       control: { type: 'text' },
       table: {
         category: 'Props',
@@ -141,7 +125,6 @@ const meta: Meta = {
       },
     },
     defaultPinnedColumns: {
-      description: 'Columns that are pinned by default.',
       control: false,
       table: {
         category: 'Props',
@@ -149,7 +132,6 @@ const meta: Meta = {
       },
     },
     onClickRow: {
-      description: 'Callback when a row is clicked.',
       action: 'onClickRow',
       control: false,
       table: {
@@ -158,7 +140,6 @@ const meta: Meta = {
       },
     },
     showPagination: {
-      description: 'Toggles pagination display.',
       control: { type: 'boolean' },
       table: {
         category: 'Props',
@@ -167,7 +148,6 @@ const meta: Meta = {
       },
     },
     rowsPerPage: {
-      description: 'Number of rows to display per pagination page.',
       control: { type: 'number' },
       table: {
         category: 'Props',
@@ -176,7 +156,6 @@ const meta: Meta = {
       },
     },
     rowCount: {
-      description: 'Total number of rows in the table.',
       control: { type: 'number' },
       table: {
         category: 'Props',
@@ -185,7 +164,6 @@ const meta: Meta = {
       },
     },
     onChangePage: {
-      description: 'Callback when the page changes.',
       action: 'onChangePage',
       control: false,
       table: {
@@ -194,7 +172,6 @@ const meta: Meta = {
       },
     },
     currentPage: {
-      description: 'Current page number.',
       control: { type: 'number' },
       table: {
         category: 'Props',
@@ -203,7 +180,6 @@ const meta: Meta = {
       },
     },
     totalEntriesText: {
-      description: 'Text to display for the total number of entries.',
       control: false,
       table: {
         category: 'Props',
@@ -212,7 +188,6 @@ const meta: Meta = {
     },
 
     onRowClick: {
-      description: 'Callback when a row is clicked.',
       action: 'onRowClick',
       control: false,
       table: {
@@ -221,7 +196,6 @@ const meta: Meta = {
       },
     },
     activeRows: {
-      description: 'Array of active rows.',
       control: false,
       table: {
         category: 'Props',
@@ -229,7 +203,6 @@ const meta: Meta = {
       },
     },
     onSelectAllChange: {
-      description: 'Callback when all rows are selected.',
       action: 'onSelectAllChange',
       control: false,
       table: {
@@ -238,7 +211,6 @@ const meta: Meta = {
       },
     },
     onRowSelectionChange: {
-      description: 'Callback when a row is selected.',
       action: 'onRowSelectionChange',
       control: false,
       table: {
@@ -247,7 +219,6 @@ const meta: Meta = {
       },
     },
     rowSelection: {
-      description: 'Row selection state.',
       control: false,
       table: {
         category: 'Props',

package/src/components/tanstackTable/components/ActionBar/ActionBar.stories.tsx

@@ -36,7 +36,6 @@ const meta: Meta = {
   },
   argTypes: {
     table: {
-      description: 'Table instance.',
       control: false,
       table: {
         category: 'Props',
@@ -44,7 +43,6 @@ const meta: Meta = {
       },
     },
     className: {
-      description: 'class name for styling.',
       control: false,
       table: {
         category: 'Props',
@@ -52,7 +50,6 @@ const meta: Meta = {
       },
     },
     children: {
-      description: 'React node to display in the action bar.',
       control: false,
       table: {
         category: 'Props',
@@ -60,7 +57,6 @@ const meta: Meta = {
       },
     },
     TableActions: {
-      description: 'Component for table actions with selected items.',
       control: false,
       table: {
         category: 'Props',

package/src/components/tanstackTable/components/ActionBar/ActionBar.tsx

@@ -4,12 +4,16 @@ import { Card } from '@/components/card';
 import classNames from 'classnames';
 
 type Props<T extends object> = {
+  /** Table instance. */
   table: Table<T & { id: string }>;
+  /** Component for table actions with selected items. */
   TableActions?: React.ComponentType<{
     selectedItems: Row<T & { id: string }>[];
     unselectRows: () => void;
   }>;
+  /** class name for styling. */
   className?: string;
+  /** React node to display in the action bar. */
   children?: React.ReactNode;
 };