Biome updates (#4331)

.storybook/toolbar/ThemeNextToolbar.tsx

@@ -8,7 +8,7 @@ import {
 import { BeakerIcon, CheckIcon } from "@storybook/icons";
 import { useGlobals } from "@storybook/manager-api";
 import { clsx } from "clsx";
-import React, { type AnchorHTMLAttributes } from "react";
+import type { AnchorHTMLAttributes } from "react";
 
 import "./ThemeNextToolbar.css";
 

biome.jsonc

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/1.9.1/schema.json",
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",
@@ -50,6 +50,7 @@
         "useSemanticElements": "off"
       },
       "correctness": {
+        "noUnusedImports": "error",
         "useExhaustiveDependencies": {
           "level": "warn",
           "options": {

cypress.config.ts

@@ -52,12 +52,18 @@ async function getViteConfig(config: UserConfig) {
       resolve: {
         alias: {
           "@salt-ds/core": path.resolve(__dirname, "./dist/salt-ds-core"),
+          "@salt-ds/countries": path.resolve(
+            __dirname,
+            "./dist/salt-ds-countries",
+          ),
           "@salt-ds/data-grid": path.resolve(
             __dirname,
             "./dist/salt-ds-data-grid",
           ),
-          "@salt-ds/lab": path.resolve(__dirname, "./dist/salt-ds-lab"),
           "@salt-ds/icons": path.resolve(__dirname, "./dist/salt-ds-icons"),
+          "@salt-ds/lab": path.resolve(__dirname, "./dist/salt-ds-lab"),
+          "@salt-ds/styles": path.resolve(__dirname, "./dist/salt-ds-styles"),
+          "@salt-ds/window": path.resolve(__dirname, "./dist/salt-ds-window"),
         },
       },
       optimizeDeps: {

cypress/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "types": ["cypress"]
   },
   "include": ["**/*.ts", "**/*.tsx"]

docs/components/LineBlock.tsx

@@ -1,4 +1,3 @@
-import type { ReactNode } from "react";
 import { ReplacementToken } from "./ReplacementToken";
 
 import "./LineBlock.css";

package.json

@@ -50,9 +50,9 @@
     "chromatic": "chromatic"
   },
   "dependencies": {
-    "@biomejs/biome": "^1.9.1",
-    "@biomejs/js-api": "^0.6.2",
-    "@biomejs/wasm-nodejs": "^1.9.1",
+    "@biomejs/biome": "1.9.4",
+    "@biomejs/js-api": "0.7.1",
+    "@biomejs/wasm-nodejs": "1.9.4",
     "@changesets/cli": "^2.27.7",
     "@cypress/code-coverage": "^3.12.35",
     "@faker-js/faker": "^8.0.0",
@@ -127,7 +127,6 @@
     "webpack-dev-server": "4.9.3",
     "webpack": "5.94.0",
     "recursive-readdir": "2.2.3",
-    "@storybook/test@npm:8.2.4": "patch:@storybook/test@npm%3A8.2.4#~/.yarn/patches/@storybook-test-npm-8.2.4-0a53c854b7.patch",
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.0"
   },
   "browserslist": {

packages/ag-grid-theme/src/dependencies/dataGridExampleColumnsHdCompact.ts

@@ -1,5 +1,4 @@
 import type { ColDef } from "ag-grid-community";
-import { DropdownEditor } from "./cell-editors/DropdownEditor";
 import { FlagRenderer } from "./cell-renderers/FlagRenderer";
 
 const dataGridExampleColumnsHdCompact: ColDef[] = [

packages/core/scripts/build.mjs

@@ -1,6 +1,6 @@
 import crypto from "node:crypto";
 import fs from "node:fs";
-import path, { dirname } from "node:path";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { deleteSync } from "del";
 import esbuild from "esbuild";

packages/core/src/file-drop-zone/FileDropZoneIcon.tsx

@@ -1,4 +1,4 @@
-import { type IconProps, UploadIcon } from "@salt-ds/icons";
+import type { IconProps } from "@salt-ds/icons";
 import { forwardRef } from "react";
 import { useIcon } from "../semantic-icon-provider";
 import { StatusIndicator, type ValidationStatus } from "../status-indicator";

packages/core/src/form-field/FormField.tsx

@@ -1,7 +1,7 @@
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
-import { ForwardedRef, type HTMLAttributes, forwardRef } from "react";
+import { type HTMLAttributes, forwardRef } from "react";
 import { type A11yValueProps, FormFieldContext } from "../form-field-context";
 import { capitalize, makePrefixer, useId } from "../utils";
 

packages/core/stories/button/button.stories.tsx

@@ -1,10 +1,4 @@
-import {
-  Button,
-  type ButtonProps,
-  FlexLayout,
-  FlowLayout,
-  StackLayout,
-} from "@salt-ds/core";
+import { Button, FlexLayout, FlowLayout, StackLayout } from "@salt-ds/core";
 import {
   DownloadIcon,
   SearchIcon,

packages/core/stories/card/card.qa.stories.tsx

@@ -1,4 +1,4 @@
-import { Card, H1, InteractableCard, Text } from "@salt-ds/core";
+import { Card, H1, Text } from "@salt-ds/core";
 import type { Meta, StoryFn } from "@storybook/react";
 import {
   QAContainer,

packages/core/stories/floating-platform/NewWindow.tsx

@@ -4,9 +4,7 @@ import { WindowProvider, useWindow } from "@salt-ds/window";
 import {
   type ComponentPropsWithoutRef,
   type ForwardedRef,
-  createContext,
   forwardRef,
-  useContext,
   useMemo,
   useState,
 } from "react";

packages/core/stories/form-field/form-field.qa.stories.tsx

@@ -1,9 +1,4 @@
-import {
-  FormField,
-  FormFieldHelperText,
-  FormFieldLabel,
-  Input,
-} from "@salt-ds/core";
+import { FormField, FormFieldHelperText, FormFieldLabel } from "@salt-ds/core";
 import type { Meta, StoryFn } from "@storybook/react";
 import {
   QAContainer,

packages/core/stories/navigation-item/navigation-item.stories.tsx

@@ -8,7 +8,7 @@ import {
 } from "@salt-ds/core";
 import { NotificationIcon } from "@salt-ds/icons";
 import type { Meta, StoryFn } from "@storybook/react";
-import React, { useState } from "react";
+import { useState } from "react";
 
 import "./navigation-item.stories.css";
 

packages/core/stories/patterns/forms/forms.stories.tsx

@@ -1,43 +1,21 @@
 import {
-  BorderItem,
-  BorderLayout,
-  Button,
-  Drawer,
   Dropdown,
-  FlexItem,
-  FlexLayout,
   FormField,
   FormFieldHelperText,
   FormFieldLabel,
   GridItem,
   GridLayout,
-  H1,
-  H2,
   Input,
   Label,
   MultilineInput,
-  NavigationItem,
   Option,
   RadioButton,
   RadioButtonGroup,
   StackLayout,
   Text,
 } from "@salt-ds/core";
-import {
-  CloseIcon,
-  GithubIcon,
-  MenuIcon,
-  StackoverflowIcon,
-  SymphonyIcon,
-} from "@salt-ds/icons";
 import type { Meta } from "@storybook/react";
-import {
-  type ChangeEvent,
-  FC,
-  HTMLAttributes,
-  ReactNode,
-  useState,
-} from "react";
+import { type ChangeEvent, useState } from "react";
 
 export default {
   title: "Patterns/Forms",

packages/core/stories/patterns/navigation/navigation.stories.tsx

@@ -7,17 +7,7 @@ import {
   NavigationItem,
   StackLayout,
 } from "@salt-ds/core";
-import {
-  GithubIcon,
-  LineChartIcon,
-  NotificationIcon,
-  PinIcon,
-  ReceiptIcon,
-  SearchIcon,
-  StackoverflowIcon,
-  SymphonyIcon,
-  UserIcon,
-} from "@salt-ds/icons";
+import { GithubIcon, StackoverflowIcon, SymphonyIcon } from "@salt-ds/icons";
 import type { Meta } from "@storybook/react";
 import { useEffect, useState } from "react";
 import logo from "../../assets/logo.svg";

packages/countries/stories/LazyCountrySymbol.qa.stories.tsx

@@ -1,7 +1,6 @@
 import { LazyCountrySymbol, countryMetaMap } from "@salt-ds/countries";
 import type { CountryCode } from "@salt-ds/countries";
 import type { Meta, StoryFn } from "@storybook/react";
-import { QAContainer } from "docs/components";
 import { Suspense } from "react";
 
 export default {

packages/data-grid/src/Grid.tsx

@@ -2,7 +2,6 @@ import { makePrefixer } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
-import type React from "react";
 import {
   type CSSProperties,
   type KeyboardEvent,

packages/data-grid/src/__tests__/__e2e__/Grid.cy.tsx

@@ -1,5 +1,3 @@
-import { ColumnGroup, Grid, GridColumn, SortOrder } from "@salt-ds/data-grid";
-import { Investor, db } from "@stories/dummyData";
 import * as cellCustomizationStories from "@stories/grid-cellCustomization.stories";
 import * as cellValidationStories from "@stories/grid-cellValidation.stories";
 import * as columnGroupsStories from "@stories/grid-columnGroups.stories";

packages/data-grid/stories/grid-columnGroups.stories.tsx

@@ -1,5 +1,5 @@
-import { ColumnGroup, Grid, GridColumn, GridProps } from "../src";
-import { DummyRow, dummyRowKeyGetter, rowData } from "./dummyData";
+import { ColumnGroup, Grid, GridColumn } from "../src";
+import { dummyRowKeyGetter, rowData } from "./dummyData";
 import "./grid.stories.css";
 import type { StoryFn } from "@storybook/react";
 

packages/data-grid/stories/grid-headerCustomization.stories.tsx

@@ -4,7 +4,7 @@ import {
   ToggleButton,
   ToggleButtonGroup,
 } from "@salt-ds/core";
-import { ArrowDownIcon, ArrowUpIcon, HomeIcon, MenuIcon } from "@salt-ds/icons";
+import { ArrowDownIcon, ArrowUpIcon, MenuIcon } from "@salt-ds/icons";
 import { MenuButton } from "@salt-ds/lab";
 import {
   type SyntheticEvent,

packages/data-grid/stories/grid-rowSelectionControlled.stories.tsx

@@ -1,12 +1,7 @@
 import { FlexLayout } from "@salt-ds/core";
 import { useState } from "react";
-import {
-  Grid,
-  GridColumn,
-  GridProps,
-  RowSelectionCheckboxColumn,
-} from "../src";
-import { DummyRow, dummyRowKeyGetter, rowData } from "./dummyData";
+import { Grid, GridColumn, RowSelectionCheckboxColumn } from "../src";
+import { dummyRowKeyGetter, rowData } from "./dummyData";
 import "./grid.stories.css";
 import type { StoryFn } from "@storybook/react";
 

packages/lab/src/__tests__/__e2e__/calendar/Calendar.single.cy.tsx

@@ -6,7 +6,7 @@ import {
   startOfMonth,
   today,
 } from "@internationalized/date";
-import { type CalendarProps, formatDate, getCurrentLocale } from "@salt-ds/lab";
+import { type CalendarProps, formatDate } from "@salt-ds/lab";
 import * as calendarStories from "@stories/calendar/calendar.stories";
 import { composeStories } from "@storybook/react";
 

packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.range.cy.tsx

@@ -7,7 +7,6 @@ import {
 } from "@internationalized/date";
 import * as datePickerStories from "@stories/date-picker/date-picker.stories";
 import { composeStories } from "@storybook/react";
-import React from "react";
 import { formatDate } from "../../../calendar";
 import { parseZonedDateTime } from "../../../date-input";
 import {

packages/lab/src/__tests__/__e2e__/date-picker/DatePicker.single.cy.tsx

@@ -7,7 +7,6 @@ import {
 } from "@internationalized/date";
 import * as datePickerStories from "@stories/date-picker/date-picker.stories";
 import { composeStories } from "@storybook/react";
-import React from "react";
 import { formatDate } from "../../../calendar";
 import { parseZonedDateTime } from "../../../date-input";
 import {

packages/lab/src/__tests__/__e2e__/list/List.declarative.cy.tsx

@@ -1,4 +1,4 @@
-import { List, ListItem, ListItemProps } from "@salt-ds/lab";
+import { List, ListItem } from "@salt-ds/lab";
 import { version } from "react";
 
 describe("A declarative list", () => {

packages/lab/src/contact-details/internal/StarIcon.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 const filledPath =
   "M6,0,4.21,4.05,0,4.58l3.11,3L2.29,12,6,9.5,9.71,12,8.89,7.62l3.11-3L7.79,4.05,6,0Z";

packages/lab/src/contact-details/internal/StarIconContainer.tsx

@@ -1,6 +1,6 @@
 import { makePrefixer } from "@salt-ds/core";
 import { clsx } from "clsx";
-import React, { forwardRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes, forwardRef } from "react";
 import { StarIcon } from "./StarIcon";
 
 const withBaseName = makePrefixer("saltContactFavoriteToggle");

packages/lab/src/date-picker/DatePickerActions.tsx

@@ -1,12 +1,12 @@
 import { Button, type ButtonProps, makePrefixer } from "@salt-ds/core";
 import { clsx } from "clsx";
-import React, {
+import {
   type ComponentPropsWithoutRef,
-  forwardRef,
-  useEffect,
-  type SyntheticEvent,
   type MouseEventHandler,
   type Ref,
+  type SyntheticEvent,
+  forwardRef,
+  useEffect,
 } from "react";
 import type { DateRangeSelection, SingleDateSelection } from "../calendar";
 import {

packages/lab/src/editable-label/EditableLabel.tsx

@@ -1,11 +1,11 @@
 import { useControlled, useIsomorphicLayoutEffect } from "@salt-ds/core";
 import { clsx } from "clsx";
-import React, {
+import {
   type ChangeEvent,
   type ForwardedRef,
-  forwardRef,
   type KeyboardEvent,
   type ReactElement,
+  forwardRef,
   useCallback,
   useRef,
 } from "react";

packages/lab/src/list-deprecated/internal/DescendantContext.jsx

@@ -1,5 +1,5 @@
 import { useIsomorphicLayoutEffect } from "@salt-ds/core";
-import React, { createContext, useContext, useState, useRef } from "react";
+import { createContext, useContext, useRef, useState } from "react";
 
 // //////////////////////////////////////////////////////////////////////////////
 // SUPER HACKS AHEAD: The React team will hate this enough to hopefully give us

packages/lab/src/list-deprecated/internal/Highlighter.jsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { escapeRegExp } from "../../utils";
 
 import { useComponentCssInjection } from "@salt-ds/styles";

packages/lab/src/responsive/overflowUtils.tsx

@@ -1,8 +1,7 @@
-import {
-  type ElementRef,
-  type OverflowItem,
-  collapsibleType,
-  type orientationType,
+import type {
+  ElementRef,
+  OverflowItem,
+  orientationType,
 } from "./overflowTypes";
 
 export const DropdownPlaceholder = () => null;

packages/lab/src/static-list/StaticListItemContent.tsx

@@ -4,7 +4,6 @@ import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";
 import {
   type ComponentPropsWithoutRef,
-  type ForwardedRef,
   type ReactNode,
   forwardRef,
 } from "react";

packages/lab/src/stepper-input/StepperInput.tsx

@@ -9,7 +9,6 @@ import {
   useFormFieldProps,
   useIcon,
 } from "@salt-ds/core";
-import { TriangleDownIcon, TriangleUpIcon } from "@salt-ds/icons";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 import { clsx } from "clsx";

packages/lab/src/tabs/TabActivationIndicator.tsx

@@ -1,5 +1,5 @@
 import { makePrefixer } from "@salt-ds/core";
-import React, { useRef } from "react";
+import { useRef } from "react";
 
 import { useActivationIndicator } from "./useActivationIndicator";