lint: add perfectionist/sort-named-imports rule (#6680)

* Apply import sorting with perfectionist/sort-named-imports rule

- Add perfectionist/sort-named-imports oxlint rule
- Sort named imports: value imports before type imports
- Update component-library and desktop-client files to match new rule

* Add release notes for linting updates on named imports

packages/component-library/src/AlignedText.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps, type ReactNode, type CSSProperties } from 'react';
+import { type ComponentProps, type CSSProperties, type ReactNode } from 'react';
 
 import { Block } from './Block';
 import { View } from './View';

packages/component-library/src/Button.tsx

@@ -2,8 +2,8 @@ import React, {
   forwardRef,
   useMemo,
   type ComponentPropsWithoutRef,
-  type ReactNode,
   type CSSProperties,
+  type ReactNode,
 } from 'react';
 import { Button as ReactAriaButton } from 'react-aria-components';
 

packages/component-library/src/Card.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps, forwardRef } from 'react';
+import { forwardRef, type ComponentProps } from 'react';
 
 import { theme } from './theme';
 import { View } from './View';

packages/component-library/src/ColorPicker.tsx

@@ -1,15 +1,15 @@
 import { type ChangeEvent, type ReactNode } from 'react';
 import {
   ColorPicker as AriaColorPicker,
-  type ColorPickerProps as AriaColorPickerProps,
+  ColorSwatch as AriaColorSwatch,
+  ColorSwatchPicker as AriaColorSwatchPicker,
+  ColorField,
+  ColorSwatchPickerItem,
   Dialog,
   DialogTrigger,
-  ColorSwatch as AriaColorSwatch,
-  type ColorSwatchProps,
-  ColorSwatchPicker as AriaColorSwatchPicker,
-  ColorSwatchPickerItem,
-  ColorField,
   parseColor,
+  type ColorPickerProps as AriaColorPickerProps,
+  type ColorSwatchProps,
 } from 'react-aria-components';
 
 import { css } from '@emotion/css';

packages/component-library/src/FormError.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, type CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 
 import { View } from './View';
 

packages/component-library/src/InitialFocus.ts

@@ -2,11 +2,11 @@ import {
   Children,
   cloneElement,
   isValidElement,
+  useEffect,
+  useRef,
   type ReactElement,
   type Ref,
   type RefObject,
-  useEffect,
-  useRef,
 } from 'react';
 
 type InitialFocusProps<T extends HTMLElement> = {

packages/component-library/src/Input.tsx

@@ -1,8 +1,8 @@
 import React, {
   type ChangeEvent,
   type ComponentPropsWithRef,
-  type KeyboardEvent,
   type FocusEvent,
+  type KeyboardEvent,
 } from 'react';
 import { Input as ReactAriaInput } from 'react-aria-components';
 

packages/component-library/src/Label.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, type ReactNode, type CSSProperties } from 'react';
+import { forwardRef, type CSSProperties, type ReactNode } from 'react';
 
 import { styles } from './styles';
 import { Text } from './Text';

packages/component-library/src/Menu.tsx

@@ -1,13 +1,13 @@
 import {
-  type ReactNode,
+  useEffect,
+  useRef,
   useState,
   type ComponentProps,
   type ComponentType,
-  type SVGProps,
   type CSSProperties,
   type KeyboardEvent,
-  useEffect,
-  useRef,
+  type ReactNode,
+  type SVGProps,
 } from 'react';
 
 import { Button } from './Button';

packages/component-library/src/Popover.tsx

@@ -1,4 +1,4 @@
-import { type ComponentProps, useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, type ComponentProps } from 'react';
 import { Popover as ReactAriaPopover } from 'react-aria-components';
 
 import { css } from '@emotion/css';

packages/component-library/src/Text.tsx

@@ -1,8 +1,8 @@
 import React, {
-  type HTMLProps,
-  type Ref,
-  type ReactNode,
   forwardRef,
+  type HTMLProps,
+  type ReactNode,
+  type Ref,
 } from 'react';
 
 import { css, cx } from '@emotion/css';

packages/component-library/src/icons/Loading.tsx

@@ -1,4 +1,4 @@
-import React, { type SVGProps, useState } from 'react';
+import React, { useState, type SVGProps } from 'react';
 
 export const SvgLoading = (props: SVGProps<SVGSVGElement>) => {
   const { color = 'currentColor' } = props;