@indico-data/design-system 3.19.0 → 3.20.0

package/lib/setup/setupIcons.d.ts

@@ -1,2 +1,2 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { type IconDefinition } from '@fortawesome/fontawesome-svg-core';
 export declare const registerFontAwesomeIcons: (...icons: IconDefinition[]) => void;

package/lib/storybook/formArgTypes.d.ts

@@ -1,4 +1,4 @@
-import { ArgTypes } from '@storybook/react';
+import { type ArgTypes } from '@storybook/react';
 declare const labelArgTypes: ArgTypes;
 declare const baseInputArgTypes: ArgTypes;
 declare const inputArgTypes: ArgTypes;

package/lib/stylesAndAnimations/borders/BorderColor.stories.d.ts

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

package/lib/stylesAndAnimations/borders/BorderRadius.stories.d.ts

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

package/lib/stylesAndAnimations/borders/BorderStyles.stories.d.ts

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

package/lib/stylesAndAnimations/borders/BorderThickness.stories.d.ts

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

package/lib/stylesAndAnimations/colors/UtilityClasses.stories.d.ts

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

package/lib/stylesAndAnimations/sizing/Sizing.stories.d.ts

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

package/lib/stylesAndAnimations/typography/Typography.stories.d.ts

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

package/lib/stylesAndAnimations/utilityClasses/UtilityClassesTable.stories.d.ts

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

package/lib/types.d.ts

@@ -1,17 +1,17 @@
+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;
     'data-cy'?: string;
     'data-testid'?: string;
 };
-import { IconSizes, IconName } from './components/icons/types';
 export type { IconSizes, IconName };
 export type ChromaticColor = 'blue' | 'purple' | 'red' | 'yellow' | 'gray' | 'green' | 'pink' | 'orange' | 'teal';
 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 { TableProps, TableColumn, Direction, Alignment };
-import { PillColor, PillSize } from './components/pill/types';
 export type { PillColor, PillSize };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.19.0",
+  "version": "3.20.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -20,9 +20,11 @@
     "test": "DEBUG_PRINT_LIMIT=10000 jest",
     "test:watch": "DEBUG_PRINT_LIMIT=10000 jest --watch",
     "all-releases": "npm view @indico-data/design-system versions",
-    "latest-release": "npm dist-tags ls @indico-data/design-system"
+    "latest-release": "npm dist-tags ls @indico-data/design-system",
+    "prepare": "husky"
   },
   "lint-staged": {
+    "*.{ts,tsx}": "eslint --max-warnings 0",
     "**/*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
@@ -73,6 +75,7 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@sanity/eslint-plugin-i18n": "^1.1.0",
     "@storybook/addon-a11y": "^8.0.8",
     "@storybook/addon-docs": "^8.0.8",
     "@storybook/addon-essentials": "^8.0.8",
@@ -114,9 +117,12 @@
     "babel-preset-react-app": "^10.0.1",
     "css-loader": "5.2.6",
     "eslint": "^8.56.0",
+    "eslint-plugin-i18next": "^6.1.3",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "html-webpack-plugin": "^5.6.5",
+    "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

package/src/components/badge/Badge.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Badge } from './Badge';
-import { Col, Container, Row } from '../grid';
 import { FloatUI } from '../floatUI';
-import { Menu } from '../menu';
+import { Col, Container, Row } from '../grid';
 import { Icon } from '../icons';
+import { Menu } from '../menu';
 
 const meta: Meta = {
   title: 'Components/Badge',

package/src/components/badge/Badge.tsx

@@ -1,5 +1,6 @@
 import classNames from 'classnames';
-import { BadgeProps } from './types';
+
+import { type BadgeProps } from './types';
 
 export const Badge = ({ className = '', children, size = 'md', string, ...rest }: BadgeProps) => {
   const badgeClasses = classNames(

package/src/components/badge/__tests__/Badge.test.tsx

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

package/src/components/button/Button.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Button, Col, Row } from '@/components';
-import { iconNames } from '@/storybook/iconNames';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+import { type Meta, type StoryObj } from '@storybook/react';
+
+import { Button, Col, Row } from '@/components';
 import { indiconDefinitions } from '@/components/icons/indicons';
+import { registerFontAwesomeIcons } from '@/setup/setupIcons';
+import { iconNames } from '@/storybook/iconNames';
 
 registerFontAwesomeIcons(...Object.values(fas), ...indiconDefinitions);
 

package/src/components/button/Button.tsx

@@ -1,9 +1,12 @@
-import React, { forwardRef } from 'react';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
+
+import { type ButtonProps } from './types';
 import { Icon } from '../icons/Icon';
-import { IconSizes } from '../icons/types';
+import { type IconSizes } from '../icons/types';
+
+import type React from 'react';
 
-import { ButtonProps } from './types';
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   const {
@@ -20,7 +23,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) =>
     size = 'md',
     onMouseExit,
     className,
-    href,
+    // Destructure unused prop to prevent leaking to DOM
+    href: _href,
     ...rest
   } = props;
 

package/src/components/button/__tests__/Button.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { Button } from '@/components/button';
 
 const onClick = jest.fn();

package/src/components/button/types.ts

@@ -1,4 +1,4 @@
-import { IconName } from '../../types';
+import { type IconName } from '../../types';
 
 export type ButtonVariants = 'solid' | 'outline' | 'link' | 'action' | 'destructive' | 'soft';
 

package/src/components/card/Card.stories.tsx

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

package/src/components/card/Card.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import classNames from 'classnames';
 
+import type React from 'react';
+
 type Props = {
   /** Additional classes for the card component */
   className?: string;

package/src/components/card/__tests__/Card.test.tsx

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

package/src/components/floatUI/FloatUI.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
+
 import { FloatUI } from './FloatUI';
+import { type FloatUIProps } from './types';
 import { Button } from '../button';
 import { Menu } from '../menu';
-import { FloatUIProps } from './types';
 
 const meta: Meta<typeof FloatUI> = {
   title: 'Components/FloatUI',

package/src/components/floatUI/FloatUI.tsx

@@ -1,21 +1,20 @@
-import React, { useRef, isValidElement, useState } from 'react';
 import {
   FloatingPortal,
   useClick,
   useHover,
   useFloating,
   useInteractions,
-  UseFloatingOptions,
+  type UseFloatingOptions,
   offset,
   flip,
   shift,
-  Placement,
+  type Placement,
   useDismiss,
-  ReferenceType,
-  VirtualElement,
   autoUpdate,
 } from '@floating-ui/react';
-import { FloatUIProps } from './types';
+import React, { useRef, isValidElement, useState } from 'react';
+
+import { type FloatUIProps } from './types';
 
 const defaultOptions: UseFloatingOptions = {
   placement: 'bottom-start' as Placement,
@@ -69,7 +68,7 @@ export function FloatUI({
     },
     whileElementsMounted: disableAutoUpdate
       ? undefined
-      : (floatingOptions.whileElementsMounted ?? autoUpdate),
+      : floatingOptions.whileElementsMounted ?? autoUpdate,
     elements: {
       reference: referenceElement as Element | null,
     },

package/src/components/floatUI/__tests__/FloatUI.test.tsx

@@ -1,9 +1,11 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { FloatUI } from '../FloatUI';
-import { Menu } from '../../menu';
-import { Button } from '../../button';
 import userEvent from '@testing-library/user-event';
 
+import { Button } from '../../button';
+import { Menu } from '../../menu';
+import { FloatUI } from '../FloatUI';
+
+
 describe('FloatUI Component', () => {
   it('does not display FloatUI content initially when rendered in uncontrolled mode', () => {
     render(

package/src/components/floatUI/types.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { UseFloatingOptions } from '@floating-ui/react-dom';
+import { type UseFloatingOptions } from '@floating-ui/react-dom';
+import { type ReactElement } from 'react';
 
 export type FloatUIProps = {
   /** An array of exactly two elements: the first element is the trigger that opens the FloatUI, and the second element is the content displayed within the FloatUI. */

package/src/components/forms/checkbox/Checkbox.stories.tsx

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { Checkbox } from './Checkbox';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
+import { Checkbox } from './Checkbox';
+
 const meta: Meta = {
   title: 'Forms/Checkbox',
   component: Checkbox,

package/src/components/forms/checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import classNames from 'classnames';
+import React from 'react';
 
 export interface CheckboxProps {
   ref?: React.LegacyRef<HTMLInputElement>;

package/src/components/forms/checkbox/__tests__/Checkbox.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react';
-import { Checkbox } from '@/components/forms/checkbox/Checkbox';
 import userEvent from '@testing-library/user-event';
 
+import { Checkbox } from '@/components/forms/checkbox/Checkbox';
+
 const handleOnChange = jest.fn();
 
 describe('checkbox', () => {

package/src/components/forms/date/datePicker/DatePicker.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { DatePicker } from './DatePicker';
 
 const meta: Meta = {

package/src/components/forms/date/datePicker/DatePicker.tsx

@@ -1,10 +1,11 @@
-import { DateRange, DayPicker, Mode, OnSelectHandler } from 'react-day-picker';
+import { useEffect, useRef } from 'react';
+import { type DateRange, DayPicker, type Mode, type OnSelectHandler } from 'react-day-picker';
+
 import 'react-day-picker/style.css';
-import { DatePickerProps, DatePickerText } from './types';
 import { getCommonProps } from './contants';
-import { TimePicker } from '../../timePicker/TimePicker';
+import { type DatePickerProps, type DatePickerText } from './types';
 import { Col, Row } from '../../../grid';
-import { useEffect, useRef } from 'react';
+import { TimePicker } from '../../timePicker/TimePicker';
 
 const DEFAULT_TEXT: Required<DatePickerText> = {
   selectTime: 'Select Time',
@@ -13,37 +14,39 @@ const DEFAULT_TEXT: Required<DatePickerText> = {
 export const DatePicker = (props: DatePickerProps) => {
   const {
     mode = 'single',
-    className,
-    captionLayout = 'dropdown',
     selected,
     hasTimePicker = false,
-    id,
-    month,
-    defaultMonth,
-    startMonth,
     endMonth,
-    components,
     numberOfMonths,
-    isDisabled,
-    formatters,
-    weekStartsOn,
-    firstWeekContainsDate,
-    today,
     timeValue,
-    isRequired,
-    min,
-    max,
     onTimeChange,
     onSelect,
-    onMonthChange,
-    onNextClick,
-    onPrevClick,
-    onDayClick,
     isReadOnly,
     ref,
     timeTabIndex,
-    dateTabIndex,
     text: textProp,
+    // Destructure props handled by getCommonProps to prevent them from
+    // leaking through ...rest and overriding the transformed values
+    className: _className,
+    captionLayout: _captionLayout,
+    id: _id,
+    month: _month,
+    defaultMonth: _defaultMonth,
+    startMonth: _startMonth,
+    components: _components,
+    isDisabled: _isDisabled,
+    formatters: _formatters,
+    weekStartsOn: _weekStartsOn,
+    firstWeekContainsDate: _firstWeekContainsDate,
+    today: _today,
+    isRequired: _isRequired,
+    min: _min,
+    max: _max,
+    onMonthChange: _onMonthChange,
+    onNextClick: _onNextClick,
+    onPrevClick: _onPrevClick,
+    onDayClick: _onDayClick,
+    dateTabIndex: _dateTabIndex,
     ...rest
   } = props;
 

package/src/components/forms/date/datePicker/__tests__/DatePicker.test.tsx

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

package/src/components/forms/date/datePicker/contants.ts

@@ -1,4 +1,4 @@
-import { CommonProps } from './types';
+import { type CommonProps } from './types';
 
 export const getCommonProps = (props: CommonProps) => ({
   className: props.className,

package/src/components/forms/date/datePicker/types.ts

@@ -1,12 +1,12 @@
 import {
-  CustomComponents,
-  DateRange,
-  DayEventHandler,
-  Formatters,
-  Matcher,
-  Mode,
-  MonthChangeEventHandler,
-  OnSelectHandler,
+  type CustomComponents,
+  type DateRange,
+  type DayEventHandler,
+  type Formatters,
+  type Matcher,
+  type Mode,
+  type MonthChangeEventHandler,
+  type OnSelectHandler,
 } from 'react-day-picker';
 
 /** Customizable text for DatePicker. */

package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.stories.tsx

@@ -1,7 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/preview-api';
+import { type DateRange } from 'react-day-picker';
+
 import { IconTriggerDatePicker } from '@/components/forms/date/iconTriggerDatePicker';
-import { DateRange } from 'react-day-picker';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+
 
 const meta: Meta<typeof IconTriggerDatePicker> = {
   component: IconTriggerDatePicker,

package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.tsx

@@ -1,12 +1,13 @@
+import { type UseFloatingOptions } from '@floating-ui/react-dom';
 import { useEffect, useState } from 'react';
-import { DateRange, OnSelectHandler, Mode } from 'react-day-picker';
-import { IconName, IconSizes } from '../../../icons/types';
+import { type DateRange, type OnSelectHandler, type Mode } from 'react-day-picker';
+
+import { type IconTriggerDatePickerText } from './types';
 import { FloatUI } from '../../../floatUI';
-import { DatePicker } from '../datePicker/DatePicker';
 import { Icon } from '../../../icons/Icon';
-import { UseFloatingOptions } from '@floating-ui/react-dom';
-import { PortalOptions } from '../datePicker/types';
-import { IconTriggerDatePickerText } from './types';
+import { type IconName, type IconSizes } from '../../../icons/types';
+import { DatePicker } from '../datePicker/DatePicker';
+import { type PortalOptions } from '../datePicker/types';
 
 const DEFAULT_TEXT: Required<IconTriggerDatePickerText> = {
   triggerIcon: 'Open date picker',
@@ -55,12 +56,13 @@ interface Props {
 export const IconTriggerDatePicker = (props: Props) => {
   const {
     ariaLabel,
-    className,
     isDisabled,
     disableBeforeDate,
     disableAfterDate,
     id,
-    label,
+    // Destructure unused props to prevent leaking into ...rest
+    className: _className,
+    label: _label,
     onSelect,
     selected,
     triggerIcon,

package/src/components/forms/date/iconTriggerDatePicker/__tests__/IconTriggerDatePicker.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen } from '@testing-library/react';
-import { IconTriggerDatePicker } from '../IconTriggerDatePicker';
 import userEvent from '@testing-library/user-event';
 
+import { IconTriggerDatePicker } from '../IconTriggerDatePicker';
+
 describe('DatePicker', () => {
   it('The date picker opens when the icon is clicked', async () => {
     render(

package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.stories.tsx

@@ -1,7 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SingleInputDatePicker, SingleInputDatePickerProps } from './SingleInputDatePicker';
 import { useArgs } from '@storybook/preview-api';
 
+import { SingleInputDatePicker, type SingleInputDatePickerProps } from './SingleInputDatePicker';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
 const meta: Meta<typeof SingleInputDatePicker> = {
   component: SingleInputDatePicker,
   title: 'Forms/DatePicker/SingleInputDatePicker',

package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.tsx

@@ -1,12 +1,15 @@
-import { useId, useState, useEffect } from 'react';
+import { type UseFloatingOptions } from '@floating-ui/react-dom';
 import { isValid, parse } from 'date-fns';
-import { DatePicker } from '../datePicker/DatePicker';
+import { useId, useState, useEffect } from 'react';
+
+import { formatDateAsString } from './helpers';
+import { FloatUI } from '../../../floatUI';
 import { Input } from '../../input';
+import { DatePicker } from '../datePicker/DatePicker';
+import { type PortalOptions } from '../datePicker/types';
+
 import type { IconName } from '../../../icons/types';
-import { FloatUI } from '../../../floatUI';
-import { formatDateAsString } from './helpers';
-import { UseFloatingOptions } from '@floating-ui/react-dom';
-import { PortalOptions } from '../datePicker/types';
+
 export interface SingleInputDatePickerProps {
   /** A label for assistive technologies. */
   ariaLabel: string;
@@ -47,13 +50,9 @@ export interface SingleInputDatePickerProps {
 export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
   const {
     ariaLabel,
-    className,
     isDisabled,
-    disableBeforeDate,
-    disableAfterDate,
     captionLayout,
     initialMonth,
-    id,
     label,
     selected,
     isOpen,
@@ -70,6 +69,11 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
     portalOptions,
     floatingOptions,
     isPortal,
+    // Destructure unused props to prevent leaking into ...rest
+    className: _className,
+    disableBeforeDate: _disableBeforeDate,
+    disableAfterDate: _disableAfterDate,
+    id: _id,
     ...rest
   } = props;
 

package/src/components/forms/date/inputDatePicker/__tests__/SingleInputDatePicker.test.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { SingleInputDatePicker } from '../SingleInputDatePicker';
 import { format, addDays } from 'date-fns';
 
+import { SingleInputDatePicker } from '../SingleInputDatePicker';
+
 const mockOnSelect = jest.fn();
 
 describe('SingleInputDatePicker', () => {

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.stories.tsx

@@ -1,8 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { InputDateRangePicker } from './InputDateRangePicker';
 import { useArgs } from '@storybook/preview-api';
-import { DateRange } from 'react-day-picker';
-import { useEffect, useState } from 'react';
+import { type DateRange } from 'react-day-picker';
+
+import { InputDateRangePicker } from './InputDateRangePicker';
+
+import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof InputDateRangePicker> = {
   component: InputDateRangePicker,