@indico-data/design-system 3.19.0 → 3.20.0

package/src/components/icons/Icon.tsx

@@ -1,7 +1,8 @@
-import classNames from 'classnames';
+import { type IconName as FAIconName, findIconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconName as FAIconName, findIconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { IconProps } from './types';
+import classNames from 'classnames';
+
+import { type IconProps } from './types';
 
 export const Icon = ({
   name,

package/src/components/icons/__tests__/Icon.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+
 import { Icon } from '@/components/icons/Icon';
 
 describe('Icon Component', () => {

package/src/components/icons/indicons.tsx

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { type IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { type ReactElement } from 'react';
 
 const indicons = {
   'indico-o-white': (
@@ -821,7 +821,7 @@ function indiconToIconDef([name, customIcon]: [string, ReactElement]): IconDefin
     throw new Error(`Monotone indicon '${name}' must have a 'd' attribute.`);
 
   if (pathElements.length === 2) {
-    let [primary, secondary] = pathElements;
+    const [primary, secondary] = pathElements;
 
     if (!primary.props.d || !secondary.props.d)
       throw new Error(`Duotone indicon '${name}' must have 'd' attributes on both paths.`);

package/src/components/icons/types.ts

@@ -1,7 +1,8 @@
-import { MouseEventHandler, CSSProperties } from 'react';
-import { PermafrostComponent } from '../../types';
-import { IconName as FAIconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
-import { indicons } from './indicons';
+import { type IconName as FAIconName, type IconPrefix } from '@fortawesome/fontawesome-svg-core';
+import { type MouseEventHandler, type CSSProperties } from 'react';
+
+import { type indicons } from './indicons';
+import { type PermafrostComponent } from '../../types';
 
 export type IconSizes = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 

package/src/components/loading-indicators/BarSpinner/BarSpinner.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { BarSpinner } from './BarSpinner';
 import { Col, Container, Row } from '../../grid';
 

package/src/components/loading-indicators/BarSpinner/__tests__/BarSpinner.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { BarSpinner } from '../BarSpinner';
 
 describe('BarSpinner Component', () => {

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

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { CirclePulse } from './CirclePulse';
 import { Col, Container, Row } from '../../grid';
 

package/src/components/menu/Menu.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Menu, MenuProps } from './Menu';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Menu, type MenuProps } from './Menu';
 import { Button } from '../button';
 
 const meta: Meta<typeof Menu> = {

package/src/components/menu/Menu.test.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
+
 import { Menu } from './Menu';
 import { Button } from '../button';
 

package/src/components/menu/Menu.tsx

@@ -1,5 +1,5 @@
-import React, { ReactElement } from 'react';
 import classNames from 'classnames';
+import React, { type ReactElement } from 'react';
 
 export type MenuProps = {
   children: React.ReactNode;

package/src/components/modal/ConfirmationModal.tsx

@@ -1,12 +1,14 @@
+import classNames from 'classnames';
+import { useState } from 'react';
+
+import { Modal } from './Modal';
+import { type ConfirmationModalProps, type ConfirmationModalText } from './types';
 import { Button } from '../button/Button';
-import { ButtonVariants } from '../button/types';
+import { type ButtonVariants } from '../button/types';
 import { Checkbox } from '../forms/checkbox/Checkbox';
 import { Col, Row } from '../grid';
 import { Icon } from '../icons/Icon';
-import { Modal } from './Modal';
-import { ConfirmationModalProps, ConfirmationModalText } from './types';
-import classNames from 'classnames';
-import { useState } from 'react';
+
 
 const DEFAULT_TEXT: Required<ConfirmationModalText> = {
   closeButton: 'Close',

package/src/components/modal/Modal.stories.tsx

@@ -1,12 +1,15 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Modal } from './Modal';
-import { Col, Container, Row } from '../grid';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import { Button } from '../button';
-import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+
 import { indiconDefinitions } from '@/components/icons/indicons';
-import { fas } from '@fortawesome/free-solid-svg-icons';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+
 import { ConfirmationModal } from './ConfirmationModal';
+import { Modal } from './Modal';
+import { Button } from '../button';
+import { Col, Container, Row } from '../grid';
+
 
 registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
 

package/src/components/modal/Modal.tsx

@@ -1,8 +1,9 @@
 import classNames from 'classnames';
 import ReactModal from 'react-modal';
+
+import { type ModalProps, type ModalText } from './types';
 import { Button } from '../button/Button';
 import { Col, Row } from '../grid';
-import { ModalProps, ModalText } from './types';
 
 const DEFAULT_TEXT: Required<ModalText> = {
   closeButton: 'Close',

package/src/components/modal/__tests__/Modal.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
+
 import { Modal } from '../Modal';
 
 // Mock ReactModal's app element setting to avoid warnings

package/src/components/modal/types.ts

@@ -1,5 +1,5 @@
-import { ButtonVariants } from '../button/types';
-import { IconName } from '../icons/types';
+import { type ButtonVariants } from '../button/types';
+import { type IconName } from '../icons/types';
 
 /** Customizable text for Modal. */
 export interface ModalText {

package/src/components/pagination/Pagination.stories.tsx

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { useEffect, useState } from 'react';
+
 import { Pagination } from './Pagination';
 import { Col, Container, Row } from '../grid';
-import { useEffect, useState } from 'react';
 
 const meta: Meta = {
   title: 'Layout/Pagination',

package/src/components/pagination/Pagination.tsx

@@ -1,9 +1,10 @@
-import { useState, useEffect } from 'react';
 import classNames from 'classnames';
-import { PaginationProps, PaginationText } from './types';
-import { Container, Row, Col } from '../grid';
-import { Input } from '../forms/input';
+import { useState, useEffect } from 'react';
+
+import { type PaginationProps, type PaginationText } from './types';
 import { Button } from '../button';
+import { Input } from '../forms/input';
+import { Container, Row, Col } from '../grid';
 
 const DEFAULT_TEXT: Required<PaginationText> = {
   previousPage: 'Previous Page',

package/src/components/pagination/__tests__/Pagination.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+
 import { Pagination } from '../Pagination';
 
 describe('Pagination', () => {

package/src/components/pill/Pill.stories.tsx

@@ -1,8 +1,12 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Pill } from './Pill';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { Container, Row, Col } from 'react-grid-system';
-import { ChromaticColor } from '@/types';
-import { PillShade } from './types';
+
+import { type ChromaticColor } from '@/types';
+
+import { Pill } from './Pill';
+import { type PillShade } from './types';
+
+
 
 const CHROMATIC_COLORS: ChromaticColor[] = [
   'blue',
@@ -120,7 +124,7 @@ export const AllDefaultColors: Story = {
       <Container>
         <Row justify="start">
           {CHROMATIC_COLORS.map((color: ChromaticColor) => (
-            <Col xs="content" className="mb-2">
+            <Col key={color} xs="content" className="mb-2">
               <Pill color={color} size="md">
                 {color}
               </Pill>
@@ -139,7 +143,7 @@ export const AllShades: Story = {
         {CHROMATIC_COLORS.map((color: ChromaticColor) => (
           <Row key={color}>
             {SHADES.map((shade: PillShade) => (
-              <Col width={100} className="mb-2">
+              <Col key={`${color}-${shade}`} width={100} className="mb-2">
                 <Pill shade={shade} color={color} size="md">
                   {color}-{shade}
                 </Pill>

package/src/components/pill/Pill.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { PillProps } from './types';
+
+import { type PillProps } from './types';
 
 export const Pill = ({
   children,

package/src/components/pill/__tests__/Pill.test.tsx

@@ -1,6 +1,9 @@
 import { render, screen } from '@testing-library/react';
+
 import { Pill } from '@/components/pill/Pill';
-import { PillColor, PillShade, PillSize } from '../types';
+
+import { type PillColor, type PillShade, type PillSize } from '../types';
+
 
 const sizes = ['sm', 'md', 'lg'] as PillSize[];
 const colors = [

package/src/components/pill/types.ts

@@ -1,5 +1,7 @@
-import { ChromaticColor } from '../../types';
-import React from 'react';
+import { type ChromaticColor } from '../../types';
+
+import type React from 'react';
+
 
 export type PillSize = 'sm' | 'md' | 'lg';
 export type PillColor = ChromaticColor;

package/src/components/skeleton/Skeleton.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Skeleton } from './Skeleton';
 import { Col, Container, Row } from '../grid';
 

package/src/components/skeleton/__tests__/Skeleton.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { Skeleton } from '@/components/skeleton/Skeleton';
 
 describe('Skeleton', () => {

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

@@ -1,15 +1,17 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Stepper } from './Stepper';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { indiconDefinitions } from '@/components/icons/indicons';
 import { registerFontAwesomeIcons } from '@/setup/setupIcons';
-registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
 
-// Import all example components
+import { CommonExample } from './examples/commonExample/CommonExample';
 import { MixedExample } from './examples/MixedExample';
-import { RequiredStepsExample } from './examples/RequiredStepsExample';
 import { OptionalStepsExample } from './examples/OptionalStepsExample';
-import { CommonExample } from './examples/commonExample/CommonExample';
-import { fas } from '@fortawesome/free-solid-svg-icons';
+import { RequiredStepsExample } from './examples/RequiredStepsExample';
+import { Stepper } from './Stepper';
+
+
+registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
 
 const meta: Meta = {
   title: 'Components/Stepper',

package/src/components/stepper/Stepper.tsx

@@ -1,8 +1,9 @@
 import { useState, Children } from 'react';
-import { Legend } from './components/Legend';
+
 import { BackNavigation } from './components/BackNavigation';
+import { Legend } from './components/Legend';
 import { NextNavigation } from './components/NextNavigation';
-import { StepperProps, StepperText } from './types';
+import { type StepperProps, type StepperText } from './types';
 
 const DEFAULT_TEXT: Required<StepperText> = {
   previousStep: 'Previous Step',

package/src/components/stepper/__tests__/Stepper.tests.tsx

@@ -1,11 +1,12 @@
 import { render, screen } from '@testing-library/react';
-import { Stepper } from '../Stepper';
-import { StepOne } from '../examples/commonExample/steps/StepOne';
-import { StepTwo } from '../examples/commonExample/steps/StepTwo';
-import { StepThree } from '../examples/commonExample/steps/StepThree';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 
+import { StepOne } from '../examples/commonExample/steps/StepOne';
+import { StepThree } from '../examples/commonExample/steps/StepThree';
+import { StepTwo } from '../examples/commonExample/steps/StepTwo';
+import { Stepper } from '../Stepper';
+
 // NOTES ================================================
 // The core functionality of the stepper is mainly various callbacks. As a result, we are indirectly testing them through the testing conditions created in this file. For example, to check if a step is complete, we have a callback function that fires when that step is complete. You will need to test your own logic in your implementation as the conditions tested here are for the purposes of the stepper itself, not the handlers we created.
 

package/src/components/stepper/components/Legend.tsx

@@ -1,8 +1,9 @@
 import classNames from 'classnames';
-import { Icon } from '../../icons/Icon';
-import { Col, Row } from '../../grid/';
+
 import { Button } from '../../button';
-import { StepperLegendProps } from '../types';
+import { Col, Row } from '../../grid/';
+import { Icon } from '../../icons/Icon';
+import { type StepperLegendProps } from '../types';
 
 export const Legend = ({ currentStep, steps, onStepClick }: StepperLegendProps) => {
   const totalSteps = steps?.length || 0;

package/src/components/stepper/examples/MixedExample.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
-import { Stepper } from '../Stepper';
-import { Button } from '../../button';
+import { useState } from 'react';
+
 import { MIXED_EXAMPLE_STEPS, STEP_CONTENT_DATA, INFO_BOX_STYLE } from './constants';
+import { Button } from '../../button';
+import { Stepper } from '../Stepper';
 
 export const MixedExample = () => {
   // Value of the current step.

package/src/components/stepper/examples/OptionalStepsExample.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
-import { Stepper } from '../Stepper';
-import { Button } from '../../button';
+import { useState } from 'react';
+
 import { OPTIONAL_STEPS, INFO_BOX_STYLE, STATUS_INDICATOR_STYLE } from './constants';
+import { Button } from '../../button';
+import { Stepper } from '../Stepper';
 
 export const OptionalStepsExample = () => {
   const [currentStep, setCurrentStep] = useState(0);

package/src/components/stepper/examples/RequiredStepsExample.tsx

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
-import { Stepper } from '../Stepper';
-import { Button } from '../../button';
+import { useState } from 'react';
+
 import { REQUIRED_STEPS, INFO_BOX_STYLE, STATUS_INDICATOR_STYLE } from './constants';
+import { Button } from '../../button';
+import { Stepper } from '../Stepper';
 
 export const RequiredStepsExample = () => {
   const [currentStep, setCurrentStep] = useState(0);

package/src/components/stepper/examples/commonExample/CommonExample.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
-import { Stepper } from '../../Stepper';
+import { useState } from 'react';
+
 import { StepOne } from './steps/StepOne';
-import { StepTwo } from './steps/StepTwo';
 import { StepThree } from './steps/StepThree';
+import { StepTwo } from './steps/StepTwo';
+import { Stepper } from '../../Stepper';
 
 export const CommonExample = () => {
   const exampleSteps = [

package/src/components/stepper/examples/commonExample/steps/StepOne.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Input } from '../../../..';
 import { Col, Row } from '../../../..';
 

package/src/components/stepper/examples/commonExample/steps/StepThree.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Input } from '../../../..';
 import { Col, Row } from '../../../..';
 

package/src/components/stepper/examples/commonExample/steps/StepTwo.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+
 import { Input } from '../../../..';
 import { Col, Row } from '../../../..';
 

package/src/components/stepper/types.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 
 /** Customizable text for Stepper. */
 export interface StepperText {

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

@@ -1,10 +1,14 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Table } from './Table';
-import { columns, sampleData, SampleDataRow } from './sampleData';
-import { registerFontAwesomeIcons } from '@/setup/setupIcons';
-import { indiconDefinitions } from '@/components/icons/indicons';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
+import { indiconDefinitions } from '@/components/icons/indicons';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+
+import { columns, sampleData, type SampleDataRow } from './sampleData';
+import { Table } from './Table';
+
+
+
 registerFontAwesomeIcons(...Object.values(indiconDefinitions));
 
 const meta: Meta = {

package/src/components/table/Table.tsx

@@ -1,12 +1,13 @@
 import classNames from 'classnames';
 import DataTable, {
-  Direction as RDTDirection,
-  Alignment as RDTAlignment,
+  type Direction as RDTDirection,
+  type Alignment as RDTAlignment,
 } from 'react-data-table-component';
-import { LoadingComponent } from './LoadingComponent';
-import { TableProps, TableText } from './types';
+
 import { TablePagination } from './components/TablePagination';
 import { usePinnedColumnsManager } from './hooks/usePinnedColumnsManager';
+import { LoadingComponent } from './LoadingComponent';
+import { type TableProps, type TableText } from './types';
 
 const DEFAULT_TEXT: Required<TableText> = {
   loading: 'Loading...',

package/src/components/table/__tests__/Table.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from '@testing-library/react';
-import { Table } from '../Table';
+
 import { sampleData, columns } from '../sampleData';
+import { Table } from '../Table';
 
 describe('Table', () => {
   it('renders the total entries text', () => {

package/src/components/table/components/HorizontalStickyHeader.tsx

@@ -1,11 +1,12 @@
 import { useEffect } from 'react';
-import { Button } from '../../button/Button';
+
 import {
   getPreviousHeadersWidth,
   applyStickyStylesToTableHeader,
   clearStickyStyles,
 } from './helpers';
-import { HorizontalStickyHeaderText } from '../types';
+import { Button } from '../../button/Button';
+import { type HorizontalStickyHeaderText } from '../types';
 
 const DEFAULT_TEXT: Required<HorizontalStickyHeaderText> = {
   unpinColumn: 'Unpin column',

package/src/components/table/components/TablePagination.tsx

@@ -1,5 +1,5 @@
-import { Pagination as PaginationComponent } from '../../pagination';
 import { Row, Col } from '../../grid';
+import { Pagination as PaginationComponent } from '../../pagination';
 interface TablePaginationProps {
   rowsPerPage: number;
   rowCount: number;

package/src/components/table/components/__tests__/HorizontalStickyHeader.test.tsx

@@ -1,9 +1,9 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import HorizontalStickyHeader from '../HorizontalStickyHeader';
+
 import { sampleData } from '../../sampleData';
-import { Table } from '../../Table';
 import { columns } from '../../sampleData';
-import userEvent from '@testing-library/user-event';
+import { Table } from '../../Table';
+import HorizontalStickyHeader from '../HorizontalStickyHeader';
 
 // Add ResizeObserver mock before tests
 class ResizeObserverMock {

package/src/components/table/components/__tests__/TablePagination.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { TablePagination } from '../TablePagination';
 
 describe('TablePagination', () => {

package/src/components/table/components/helpers.ts

@@ -1,4 +1,4 @@
-import { CSSObject } from 'styled-components';
+import { type CSSObject } from 'styled-components';
 
 // Gets the width of the previous pinned columns
 export const getPreviousHeadersWidth = (position: number, pinnedColumnIds: string[]): number => {

package/src/components/table/hooks/usePinnedColumnsManager.ts

@@ -1,6 +1,7 @@
 import { useEffect, useCallback, useMemo } from 'react';
-import { TableColumn, HorizontalStickyHeaderText } from '../types';
+
 import { sortPinnedColumns, getPreviousHeadersWidth } from '../components/helpers';
+import { type TableColumn, type HorizontalStickyHeaderText } from '../types';
 import { processColumns } from '../utils/processColumns';
 
 /**
@@ -138,7 +139,10 @@ export const usePinnedColumnsManager = <T>(
 
   // Process columns for rendering with pin state
   const columnsWithPinning = canPinColumns
-    ? sortPinnedColumns(processColumns(columns, dataColumnIds, togglePinnedColumn, text), dataColumnIds)
+    ? sortPinnedColumns(
+        processColumns(columns, dataColumnIds, togglePinnedColumn, text),
+        dataColumnIds,
+      )
     : columns;
 
   return {

package/src/components/table/sampleData.tsx

@@ -1,6 +1,4 @@
-import { TableColumn } from './types';
-import { useState } from 'react';
-import { Table } from './Table';
+import { type TableColumn } from './types';
 
 export interface SampleDataRow {
   name: string;

package/src/components/table/types.ts

@@ -1,11 +1,10 @@
 import {
-  TableProps as RDTTableProps,
-  Direction as RDTDirection,
-  Alignment as RDTAlignment,
-  TableColumn as RDTTableColumn,
-  IDataTableProps,
+  type Direction as RDTDirection,
+  type Alignment as RDTAlignment,
+  type TableColumn as RDTTableColumn,
+  type IDataTableProps,
 } from 'react-data-table-component';
-import { CSSObject } from 'styled-components';
+import { type CSSObject } from 'styled-components';
 
 export type Direction = `${RDTDirection}`;
 export type Alignment = `${RDTAlignment}`;

package/src/components/table/utils/processColumns.tsx

@@ -1,6 +1,6 @@
-import { TableColumn, HorizontalStickyHeaderText } from '../types';
-import HorizontalStickyHeader from '../components/HorizontalStickyHeader';
 import { getPinnedColumnStyles } from '../components/helpers';
+import HorizontalStickyHeader from '../components/HorizontalStickyHeader';
+import { type TableColumn, type HorizontalStickyHeaderText } from '../types';
 
 export const processColumns = <T,>(
   columns: TableColumn<T>[],

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

@@ -1,4 +1,4 @@
-import { Row, ColumnDef, SortingState } from '@tanstack/react-table';
+import { type Row, type ColumnDef, type SortingState } from '@tanstack/react-table';
 
 /** Customizable text for TanstackTable. */
 export interface TanstackTableText {