@indico-data/design-system 3.19.0 → 3.20.0

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

@@ -1,11 +1,12 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
 
-import { TanstackTable } from './TanstackTable';
-import { people, Person } from './mock-data/mock-data';
+import { people, type Person } from './mock-data/mock-data';
 import { columns } from './mock-data/table-configuration';
-import { ColumnDef, Row } from '@tanstack/react-table';
+import { TanstackTable } from './TanstackTable';
 import { Button } from '../button';
-import { useState } from 'react';
+
 const meta: Meta = {
   title: 'Layout/Tanstack Table',
   component: TanstackTable,

package/src/components/tanstackTable/TanstackTable.tsx

@@ -1,22 +1,22 @@
-import { useEffect, useRef, useState } from 'react';
-
 import {
   useReactTable,
   getCoreRowModel,
   getSortedRowModel,
-  SortingState,
+  type SortingState,
 } from '@tanstack/react-table';
 import classNames from 'classnames';
+import { isNil } from 'lodash';
+import { useEffect, useRef, useState } from 'react';
+
 
 import { ActionBar } from './components/ActionBar';
 import { NoResults } from './components/NoResults';
-import { isNil } from 'lodash';
-import { TablePagination } from './components/TablePagination';
-import { Props, TanstackTableText } from './TankstackTable.types';
-import { useTanstackTable } from './useTanstackTable';
-import { TableHeader } from './components/TableHeader';
 import { TableBody } from './components/TableBody';
+import { TableHeader } from './components/TableHeader';
 import { TableLoading } from './components/TableLoading/TableLoading';
+import { TablePagination } from './components/TablePagination';
+import { type Props, type TanstackTableText } from './TankstackTable.types';
+import { useTanstackTable } from './useTanstackTable';
 
 const DEFAULT_TEXT: Required<TanstackTableText> = {
   loading: 'Table is loading...',

package/src/components/tanstackTable/__tests__/TanstackTable.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen, fireEvent } from '@testing-library/react';
+
 import '@testing-library/jest-dom';
-import { TanstackTable } from '../TanstackTable';
 import { data, columns } from './__mocks__/test-mock-data';
+import { TanstackTable } from '../TanstackTable';
 
 describe('Tanstack Table Component', () => {
   test('renders the table with provided data', () => {

package/src/components/tanstackTable/__tests__/__mocks__/test-mock-data.tsx

@@ -1,5 +1,6 @@
+import { type ColumnDef } from "@tanstack/react-table";
+
 import { Checkbox } from "@/components/forms/checkbox";
-import { ColumnDef } from "@tanstack/react-table";
 
 export interface TestData {
   id: string;

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

@@ -1,8 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ActionBar } from './ActionBar';
-import { Table } from '@tanstack/react-table';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type Table } from '@tanstack/react-table';
+
 import { Button } from '@/components/button';
 
+import { ActionBar } from './ActionBar';
+
+
 type DummyRow = {
   id: string;
   isSelected: boolean;

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

@@ -1,8 +1,12 @@
-import React from 'react';
-import { Row, Table } from '@tanstack/react-table';
-import { Card } from '@/components/card';
+import { type Row, type Table } from '@tanstack/react-table';
 import classNames from 'classnames';
 
+import { Card } from '@/components/card';
+
+import type React from 'react';
+
+
+
 type Props<T extends object> = {
   /** Table instance. */
   table: Table<T & { id: string }>;

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

@@ -1,7 +1,10 @@
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
+
+
 import { ActionBar } from '../ActionBar';
+
 import type { Table } from '@tanstack/react-table';
+import type React from 'react';
 
 type DummyRow = {
   getIsSelected: () => boolean;

package/src/components/tanstackTable/components/NoResults/__tests__/NoResult.test.tsx

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

package/src/components/tanstackTable/components/TableBody/TableBody.tsx

@@ -1,5 +1,6 @@
-import { flexRender, Table } from '@tanstack/react-table';
+import { flexRender, type Table } from '@tanstack/react-table';
 import classNames from 'classnames';
+
 import { getTdStyles } from '../../helpers';
 
 export type Props<T> = {

package/src/components/tanstackTable/components/TableHeader/TableHeader.tsx

@@ -1,6 +1,7 @@
-import { forwardRef } from 'react';
-import { Column, flexRender, Header, Table } from '@tanstack/react-table';
+import { type Column, flexRender, type Header, type Table } from '@tanstack/react-table';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
+
 import { getThStyles } from '../../helpers';
 
 interface Props {

package/src/components/tanstackTable/components/TableLoading/TableLoading.tsx

@@ -1,4 +1,5 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { type ColumnDef } from '@tanstack/react-table';
+
 import { CirclePulse } from '../../../loading-indicators/CirclePulse';
 
 export type Props<T> = {

package/src/components/tanstackTable/components/TablePagination/TablePagination.tsx

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

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

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

package/src/components/tanstackTable/docs/internalSorting/InternalClientSideSorting.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type ColumnDef } from '@tanstack/react-table';
 
-import { TanstackTable } from '../../TanstackTable';
-import { people, Person } from '../../mock-data/mock-data';
-import { columns } from '../../mock-data/table-configuration';
-import { ColumnDef } from '@tanstack/react-table';
 import { Button } from '../../../button';
+import { people, type Person } from '../../mock-data/mock-data';
+import { columns } from '../../mock-data/table-configuration';
+import { TanstackTable } from '../../TanstackTable';
 
 const meta: Meta = {
   title: 'Layout/Tanstack Table/Internal Client Side Sorting',

package/src/components/tanstackTable/docs/pinnedColumns/PinnedColumn.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type ColumnDef } from '@tanstack/react-table';
 
-import { TanstackTable } from '../../TanstackTable';
-import { people, Person } from '../../mock-data/mock-data';
+import { people, type Person } from '../../mock-data/mock-data';
 import { columns } from '../../mock-data/table-configuration';
-import { ColumnDef } from '@tanstack/react-table';
+import { TanstackTable } from '../../TanstackTable';
+
 
 const meta: Meta = {
   title: 'Layout/Tanstack Table/Pinned Columns',

package/src/components/tanstackTable/docs/withRowClick/WithRowClick.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type ColumnDef, type Row } from '@tanstack/react-table';
 
-import { TanstackTable } from '../../TanstackTable';
-import { people, Person } from '../../mock-data/mock-data';
+import { people, type Person } from '../../mock-data/mock-data';
 import { columns } from '../../mock-data/table-configuration';
-import { ColumnDef, Row } from '@tanstack/react-table';
+import { TanstackTable } from '../../TanstackTable';
+
 
 const meta: Meta = {
   title: 'Layout/Tanstack Table/With Row Click',

package/src/components/tanstackTable/helpers.ts

@@ -1,5 +1,5 @@
-import { Column } from '@tanstack/react-table';
-import { CSSProperties } from 'react';
+import { type Column } from '@tanstack/react-table';
+import { type CSSProperties } from 'react';
 
 // Sets style attributes for pinned columns
 const getCommonPinningStyles = <T>(column: Column<T>): CSSProperties => {

package/src/components/tanstackTable/mock-data/table-configuration.tsx

@@ -1,9 +1,12 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { Person } from './mock-data';
-import { Checkbox } from '@/components/forms/checkbox/Checkbox';
-import { Button } from '@/components/button';
+import { type ColumnDef } from '@tanstack/react-table';
 import styled from 'styled-components';
 
+
+import { Button } from '@/components/button';
+import { Checkbox } from '@/components/forms/checkbox/Checkbox';
+
+import { type Person } from './mock-data';
+
 const PinHeaderColumns = ({
   content,
   onPinClick,

package/src/components/tanstackTable/useTanstackTable.tsx

@@ -1,6 +1,5 @@
+import { type ColumnDef } from '@tanstack/react-table';
 import { useState } from 'react';
-
-import { ColumnDef } from '@tanstack/react-table';
 import { useEffect, useMemo } from 'react';
 
 type Props<T> = {

package/src/components/toast/Toast.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { toast, ToastContainer } from './index';
 import { Button } from '../button';
 import { Col, Row } from '../grid';

package/src/components/tooltip/Tooltip.stories.tsx

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Tooltip } from './Tooltip';
-import { Col, Container, Row } from '../grid';
 import { Button } from '../button';
+import { Col, Container, Row } from '../grid';
 
 const meta: Meta = {
   title: 'Utilities/Tooltip',

package/src/components/tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
-import { CSSProperties } from 'react';
-import { PlacesType, Tooltip as ReactTooltip, PositionStrategy } from 'react-tooltip';
+import { type CSSProperties } from 'react';
+import { type PlacesType, Tooltip as ReactTooltip, type PositionStrategy } from 'react-tooltip';
 
 export interface TooltipProps {
   id: string;

package/src/components/truncate/Truncate.stories.tsx

@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Truncate } from './Truncate';
-import { TruncateProps } from './types';
+import { type TruncateProps } from './types';
 
 const meta: Meta<typeof Truncate> = {
   title: 'Utilities/Truncate',

package/src/components/truncate/Truncate.tsx

@@ -1,8 +1,9 @@
-import { useState, useEffect, CSSProperties, useMemo, useRef } from 'react';
-import { Tooltip } from '../tooltip';
-import { TruncateProps } from './types';
-import { v4 as uuidv4 } from 'uuid';
 import classNames from 'classnames';
+import { useState, useEffect, type CSSProperties, useMemo, useRef } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+import { type TruncateProps } from './types';
+import { Tooltip } from '../tooltip';
 
 export const Truncate = ({
   numLines = 1,

package/src/components/truncate/__tests__/Truncate.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { Truncate } from '../Truncate';
 
 // Mock uuid to return a predictable ID

package/src/components/truncate/types.ts

@@ -1,4 +1,4 @@
-import { TooltipProps } from '../tooltip/Tooltip';
+import { type TooltipProps } from '../tooltip/Tooltip';
 
 export interface TruncateProps {
   /** The number of lines to truncate the text to. If left blank, it will default to 1 line. */

package/src/docs/BaseColorPalette/BaseColorPalette.tsx

@@ -1,4 +1,5 @@
 import { Container, Row, Col } from 'react-grid-system';
+
 import { Swatch } from './Swatch';
 
 const colorList = [

package/src/docs/BaseColorPalette/BaseColorsPalette.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { BaseColorPalette } from './BaseColorPalette';
 
 const meta: Meta<typeof BaseColorPalette> = {

package/src/docs/BaseColorPalette/Swatch.tsx

@@ -1,5 +1,6 @@
 import './swatches.scss';
 import { Row, Col } from 'react-grid-system';
+
 import { Icon } from '../../components';
 
 interface Props {
@@ -34,7 +35,7 @@ export const Swatch = ({ color, shade, colorValue }: Props) => {
     if (value.startsWith('rgba(')) {
       const match = value.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
       if (match) {
-        const [, r, g, b, a] = match;
+        const [, , , , a] = match;
         const opacity = Math.round(parseFloat(a) * 100);
         return `${opacity}%`;
       }

package/src/docs/SemanticTokens/ColorSwatch.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 interface ColorSwatchProps {
   colorVar: string;

package/src/docs/SemanticTokens/SemanticTokens.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+
 import { ColorSwatch } from './ColorSwatch';
-import { Card } from '../../index';
 
 const TokenItem = ({ category, variant }: { category: string; variant: string }) => {
   const colorVar = `--pf-semantic-${category}-${variant}`;

package/src/setup/setupIcons.ts

@@ -1,5 +1,4 @@
-import { IconDefinition, library } from '@fortawesome/fontawesome-svg-core';
-
+import { type IconDefinition, library } from '@fortawesome/fontawesome-svg-core';
 // TODO: Once legacy components are removed, remove associated icons
 import {
   faArrowDown,
@@ -26,6 +25,7 @@ import {
   faChevronLeft,
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
+
 import { indiconDefinitions } from '@/components/icons/indicons';
 
 // Utility for registering Font Awesome icons

package/src/storybook/formArgTypes.ts

@@ -1,5 +1,6 @@
 // Common argTypes for form components that include a label and input
-import { ArgTypes } from '@storybook/react';
+import { type ArgTypes } from '@storybook/react';
+
 import { iconNames } from './iconNames';
 
 const labelArgTypes: ArgTypes = {

package/src/storybook/iconNames.ts

@@ -2,6 +2,7 @@
 // Avoid importing this file into the design system code to keep bundle size at a minimum.
 
 import { fas } from '@fortawesome/free-solid-svg-icons';
+
 import { indicons } from '../components/icons/indicons';
 
 export const fontAwesomeIconNames = [

package/src/stylesAndAnimations/borders/BorderColor.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { BorderColor } from './BorderColor';
 
 const meta: Meta<typeof BorderColor> = {

package/src/stylesAndAnimations/borders/BorderColor.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../styles/_borders.scss';
 import './borders.scss';
 

package/src/stylesAndAnimations/borders/BorderRadius.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { BorderRadius } from './BorderRadius';
 
 const meta: Meta<typeof BorderRadius> = {

package/src/stylesAndAnimations/borders/BorderRadius.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../styles/_borders.scss';
 import './borders.scss';
 

package/src/stylesAndAnimations/borders/BorderStyles.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { BorderStyles } from './BorderStyles';
 
 const meta: Meta<typeof BorderStyles> = {

package/src/stylesAndAnimations/borders/BorderStyles.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../styles/_borders.scss';
 import './borders.scss';
 

package/src/stylesAndAnimations/borders/BorderThickness.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { BorderThickness } from './BorderThickness';
 
 const meta: Meta<typeof BorderThickness> = {

package/src/stylesAndAnimations/borders/BorderThickness.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../styles/_borders.scss';
 import './borders.scss';
 

package/src/stylesAndAnimations/colors/UtilityClasses.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { UtilityClasses } from './UtilityClasses';
 
 const meta: Meta<typeof UtilityClasses> = {

package/src/stylesAndAnimations/colors/UtilityClasses.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { Row } from '../../components/grid/row/Row';
 import { Col } from '../../components/grid/col/Col';
+import { Row } from '../../components/grid/row/Row';
 
 export const UtilityClasses = () => {
   return (

package/src/stylesAndAnimations/sizing/Sizing.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Sizing } from './Sizing';
 
 const meta: Meta<typeof Sizing> = {

package/src/stylesAndAnimations/sizing/Sizing.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../styles/_borders.scss';
 export const Sizing = () => {
   return (

package/src/stylesAndAnimations/typography/Typography.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Typography } from './Typography';
 
 const meta: Meta<typeof Typography> = {

package/src/stylesAndAnimations/typography/Typography.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Container, Row, Col } from 'react-grid-system';
 
 export const Typography = () => {

package/src/stylesAndAnimations/utilityClasses/UtilityClassesTable.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { UtilityClassesTable } from './UtilityClassesTable';
 
 const meta: Meta<typeof UtilityClassesTable> = {

package/src/stylesAndAnimations/utilityClasses/UtilityClassesTable.tsx

@@ -1,7 +1,10 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
+import { type MultiValue, type SingleValue } from 'react-select';
+
 import { Table, Select, Input, Container, Row, Col } from '@/components';
-import { MultiValue, SingleValue, ActionMeta } from 'react-select';
-import { UtilityClassData, utilityClassesData } from './UtilityClassesData';
+
+import { type UtilityClassData, utilityClassesData } from './UtilityClassesData';
+
 
 const categories = Array.from(new Set(utilityClassesData.map((item) => item.category)));
 

package/src/types.ts

@@ -1,3 +1,13 @@
+import { type SelectOption } from './components/forms/select/types';
+import { type IconSizes, type IconName } from './components/icons/types';
+import { type PillColor, type PillSize } from './components/pill/types';
+import {
+  type TableProps,
+  type TableColumn,
+  type Direction,
+  type Alignment,
+} from './components/table/types';
+
 export type PermafrostComponent = {
   id?: string;
   className?: string;
@@ -5,8 +15,8 @@ export type PermafrostComponent = {
   'data-testid'?: string;
 };
 
-import { IconSizes, IconName } from './components/icons/types';
 export type { IconSizes, IconName };
+
 export type ChromaticColor =
   | 'blue'
   | 'purple'
@@ -21,11 +31,7 @@ export type ChromaticColor =
 export type Color = ChromaticColor | 'black' | 'white';
 
 export type SemanticColor = 'neutral' | 'info' | 'warning' | 'error' | 'success' | 'pending';
-import { SelectOption } from './components/forms/select/types';
-export type { SelectOption };
 
-import { TableProps, TableColumn, Direction, Alignment } from './components/table/types';
+export type { SelectOption };
 export type { TableProps, TableColumn, Direction, Alignment };
-
-import { PillColor, PillSize } from './components/pill/types';
 export type { PillColor, PillSize };