@indico-data/design-system 3.18.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,
@@ -19,7 +20,6 @@ const meta: Meta = {
     clearFilters: () => {},
     hasFilters: false,
     isLoading: false,
-    isLoadingMessage: 'Table is loading...',
     enableRowSelection: true,
     showPagination: false,
     onClickRow: null,
@@ -116,12 +116,15 @@ const meta: Meta = {
         defaultValue: { summary: 'false' },
       },
     },
-    isLoadingMessage: {
-      control: { type: 'text' },
+    text: {
+      control: 'object',
+      description: 'Customizable text.',
       table: {
-        category: 'Props',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'Table is loading...' },
+        category: 'i18n Text',
+        type: {
+          summary:
+            '{ loading?: string; noResults?: string; error?: string; resetFilters?: string; entry?: string; entries?: string; of?: string }',
+        },
       },
     },
     defaultPinnedColumns: {

package/src/components/tanstackTable/TanstackTable.tsx

@@ -1,22 +1,32 @@
-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 } 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...',
+  noResults: 'No results found.',
+  error: 'There was an error loading the data.',
+  resetFilters: 'Reset filters',
+  entry: 'entry',
+  entries: 'entries',
+  of: 'of',
+};
 
 export function TanstackTable<T extends object>({
   columns: defaultColumns,
@@ -34,15 +44,16 @@ export function TanstackTable<T extends object>({
   hasFilters,
   showPagination = true,
   isLoading = false,
-  isLoadingMessage = 'Table is loading...',
   defaultPinnedColumns,
   onRowClick,
   activeRows = [],
   isStriped = true,
   actionBarClassName,
   defaultSorting,
+  text: textProp,
   ...rest
 }: Props<T & { id: string }>) {
+  const text = { ...DEFAULT_TEXT, ...textProp };
   const {
     columns,
     defaultData,
@@ -120,11 +131,8 @@ export function TanstackTable<T extends object>({
             <NoResults
               clearFilters={clearFilters}
               hasFilters={hasFilters}
-              message={
-                hasErrorAndIsNotLoading
-                  ? error?.errorMessage ?? 'There was an error isLoading the data.'
-                  : 'No results found.'
-              }
+              resetFiltersText={text.resetFilters}
+              message={hasErrorAndIsNotLoading ? error?.errorMessage ?? text.error : text.noResults}
             />
           </td>
         </tr>
@@ -132,7 +140,7 @@ export function TanstackTable<T extends object>({
     }
 
     if (isLoading) {
-      return <TableLoading columns={columns} message={isLoadingMessage} />;
+      return <TableLoading columns={columns} message={text.loading} />;
     }
 
     return (
@@ -169,10 +177,12 @@ export function TanstackTable<T extends object>({
           onChangePage={onChangePage}
           rowsPerPage={rowsPerPage}
           totalEntriesText={
-            totalEntriesText ?? rowCount === 1
-              ? '1 entry'
-              : `${totalRowsOnPage} of ${rowCount} entries`
+            totalEntriesText ??
+            (rowCount === 1
+              ? `1 ${text.entry}`
+              : `${totalRowsOnPage} ${text.of} ${rowCount} ${text.entries}`)
           }
+          text={{ of: text.of }}
         />
       ) : null}
     </div>

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/NoResults.tsx

@@ -4,16 +4,22 @@ type Props = {
   clearFilters?: () => void;
   hasFilters?: boolean;
   message: string;
+  resetFiltersText?: string;
 };
 
-export function NoResults({ clearFilters, hasFilters, message }: Props) {
+export function NoResults({
+  clearFilters,
+  hasFilters,
+  message,
+  resetFiltersText = 'Reset filters',
+}: Props) {
   return (
     <div className="tanstack-table__no-results" data-testid="tanstack-table-no-results">
       <p className="tanstack-table__no-results__text">{message}</p>
       {hasFilters && (
         <p className="tanstack-table__no-results__text">
-          <Button ariaLabel="Reset filters" variant="link" onClick={clearFilters}>
-            Reset filters
+          <Button ariaLabel={resetFiltersText} variant="link" onClick={clearFilters}>
+            {resetFiltersText}
           </Button>
         </p>
       )}

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 } from '../../../pagination';
 import { Row, Col } from '../../../grid';
+import { Pagination as PaginationComponent, type PaginationText } from '../../../pagination';
 
 interface TablePaginationProps {
   rowsPerPage: number;
@@ -7,6 +7,7 @@ interface TablePaginationProps {
   onChangePage: (page: number) => void;
   currentPage: number;
   totalEntriesText?: string;
+  text?: PaginationText;
 }
 
 export const TablePagination = ({
@@ -15,6 +16,7 @@ export const TablePagination = ({
   onChangePage,
   currentPage,
   totalEntriesText,
+  text,
 }: TablePaginationProps) => {
   const totalPages = Math.ceil(rowCount / rowsPerPage);
 
@@ -37,6 +39,7 @@ export const TablePagination = ({
             totalPages={totalPages}
             currentPage={currentPage}
             onChange={(page) => onChangePage(page)}
+            text={text}
           />
         </Col>
       </Row>

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/index.ts

@@ -51,7 +51,7 @@ export type {
   SortingFn,
 } from '@tanstack/react-table';
 export type { DateRange } from 'react-day-picker';
-export type { SelectOption } from './components/forms/select/types';
+export type { SelectOption, SelectText } from './components/forms/select/types';
 
 // Functions
 export {

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 = {
@@ -46,6 +47,16 @@ const labelArgTypes: ArgTypes = {
       },
     },
   },
+  text: {
+    control: 'object',
+    description: 'Customizable text.',
+    table: {
+      category: 'i18n Text',
+      type: {
+        summary: '{ required?: string }',
+      },
+    },
+  },
 };
 
 const baseInputArgTypes: 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/storybookDocs/Permafrost.mdx

@@ -62,6 +62,14 @@ import { Icon } from '@indico-data/design-system';
 <Icon name="indico-o" />;
 ```
 
+### The `text` Prop
+
+Components expose generic UI strings via a `text` prop to enable i18n. These are strings that are the same regardless of context (like "Loading...", "Close", "Next Page"). All have English defaults, pass custom values to override:
+
+```tsx
+<Select text={{ placeholder: 'Choisir...', noOptions: 'Aucune option' }} />
+```
+
 ### Utility Classes
 
 Utility classes are pre-defined CSS classes that provide quick and easy styling options for common design patterns. They help maintain consistency and speed up development by offering ready-to-use styles for margins, typography, and more. For a complete list of available utility classes and their usage, see our [Utility Classes documentation](/docs/utility-classes-overview--docs).

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> = {