Add import order sorting rules

Signed-off-by: Émile Ré <emile@getprobo.com>

packages/ui/src/Atoms/Breadcrumb/Breadcrumb.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import { Link } from "react-router";
 import { Fragment } from "react/jsx-runtime";
+import { Link } from "react-router";
 
 import { IconChevronRight } from "../Icons";
 

packages/ui/src/Atoms/ControlItem/ControlItem.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type HTMLAttributes } from "react";
+import { type HTMLAttributes, useEffect, useRef } from "react";
 import { Link } from "react-router";
 import { tv } from "tailwind-variants";
 

packages/ui/src/Atoms/DataTable/DataTable.tsx

@@ -1,14 +1,14 @@
+import clsx from "clsx";
 import {
   type ComponentPropsWithRef,
   type FC,
   type PropsWithChildren,
   type ReactNode,
 } from "react";
-import clsx from "clsx";
 
 import { Card } from "../Card/Card";
-import { type AsChildProps, Slot } from "../Slot.tsx";
 import { IconPlusLarge } from "../Icons";
+import { type AsChildProps, Slot } from "../Slot.tsx";
 
 export function DataTable({
   children,

packages/ui/src/Atoms/Dropdown/Dropdown.tsx

@@ -1,11 +1,11 @@
-import type { ComponentProps, FC, PropsWithChildren, ReactNode } from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { clsx } from "clsx";
+import type { ComponentProps, FC, PropsWithChildren, ReactNode } from "react";
 import { tv } from "tailwind-variants";
 
-import type { IconProps } from "../Icons/type.ts";
-import { IconDotGrid1x3Horizontal } from "../Icons";
 import { Button } from "../Button/Button.tsx";
+import { IconDotGrid1x3Horizontal } from "../Icons";
+import type { IconProps } from "../Icons/type.ts";
 
 type Props = PropsWithChildren<{
   toggle?: ReactNode;

packages/ui/src/Atoms/Dropzone/Dropzone.tsx

@@ -1,7 +1,7 @@
 import { useRefSync } from "@probo/hooks";
 import { useTranslate } from "@probo/i18n";
 import { useCallback } from "react";
-import { useDropzone, type FileRejection } from "react-dropzone";
+import { type FileRejection, useDropzone } from "react-dropzone";
 import { tv } from "tailwind-variants";
 
 import { IconPageCross, IconUpload } from "../Icons";

packages/ui/src/Atoms/InfiniteScrollTrigger/InfiniteScrollTrigger.tsx

@@ -1,6 +1,6 @@
-import { useEffect, type ReactNode } from "react";
-import { useTranslate } from "@probo/i18n";
 import { useRefSync } from "@probo/hooks";
+import { useTranslate } from "@probo/i18n";
+import { type ReactNode, useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 
 import { Spinner } from "../Spinner/Spinner";

packages/ui/src/Atoms/Input/Input.tsx

@@ -1,4 +1,4 @@
-import { type InputHTMLAttributes, type FC, useState } from "react";
+import { type FC, type InputHTMLAttributes, useState } from "react";
 import { tv } from "tailwind-variants";
 
 import type { IconProps } from "../Icons/type";

packages/ui/src/Atoms/Label/Label.tsx

@@ -1,6 +1,6 @@
+import { Label as RadixLabel } from "@radix-ui/react-label";
 import type { ComponentProps } from "react";
 import { tv } from "tailwind-variants";
-import { Label as RadixLabel } from "@radix-ui/react-label";
 
 type Props = ComponentProps<typeof RadixLabel>;
 

packages/ui/src/Atoms/Markdown/Markdown.tsx

@@ -1,6 +1,6 @@
 import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";
+import remarkGfm from "remark-gfm";
 
 type Props = {
   content: string;

packages/ui/src/Atoms/Select/Select.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Select, Option } from "./Select";
+import { Option, Select } from "./Select";
 
 export default {
   title: "Atoms/Form/Select",

packages/ui/src/Atoms/Select/Select.tsx

@@ -1,16 +1,15 @@
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import {
+  Content,
+  Icon,
+  Item,
+  ItemText,
+  Portal,
   Root,
   Trigger,
   Value,
-  Icon,
-  Portal,
-  Content,
   Viewport,
-  Item,
-  ItemText,
 } from "@radix-ui/react-select";
-import * as ScrollArea from "@radix-ui/react-scroll-area";
-import { tv } from "tailwind-variants";
 import {
   Children,
   type ComponentProps,
@@ -18,10 +17,11 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from "react";
+import { tv } from "tailwind-variants";
 
-import { Input, input } from "../Input/Input.tsx";
 import { IconChevronGrabberVertical } from "../Icons/IconChevronGrabberVertical.tsx";
 import { IconMagnifyingGlass } from "../Icons/IconMagnifyingGlass.tsx";
+import { Input, input } from "../Input/Input.tsx";
 import { Spinner } from "../Spinner/Spinner.tsx";
 
 type Props<T> = PropsWithChildren<

packages/ui/src/Atoms/Sidebar/Sidebar.tsx

@@ -1,13 +1,13 @@
+import { clsx } from "clsx";
 import {
   createContext,
   type PropsWithChildren,
   useContext,
   useState,
 } from "react";
-import { clsx } from "clsx";
 
-import { IconCollapse, IconExpand } from "../Icons";
 import { Button } from "../Button/Button";
+import { IconCollapse, IconExpand } from "../Icons";
 
 const sidebarContext = createContext({ open: true });
 

packages/ui/src/Atoms/Sidebar/SidebarItem.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren } from "react";
-import { tv } from "tailwind-variants";
 import { NavLink } from "react-router";
+import { tv } from "tailwind-variants";
 
 import { useSidebarCollapsed } from "./Sidebar.tsx";
 

packages/ui/src/Atoms/Slot.tsx

@@ -1,6 +1,6 @@
 import clsx from "clsx";
-import { cloneElement, isValidElement, Children } from "react";
 import type { PropsWithChildren, ReactNode } from "react";
+import { Children, cloneElement, isValidElement } from "react";
 
 export type AsChildProps<DefaultElementProps>
   = | ({ asChild?: false } & DefaultElementProps)

packages/ui/src/Atoms/Table/Table.tsx

@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import {
   createContext,
   type FC,
@@ -8,7 +9,6 @@ import {
   useContext,
 } from "react";
 import { Link } from "react-router";
-import clsx from "clsx";
 
 import { Card } from "../Card/Card";
 import { IconPlusLarge } from "../Icons";

packages/ui/src/Atoms/Tabs/Tabs.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Tabs, TabLink, TabBadge } from "./Tabs";
+import { TabBadge, TabLink, Tabs } from "./Tabs";
 
 export default {
   title: "Atoms/Tabs",

packages/ui/src/Atoms/Tabs/Tabs.tsx

@@ -1,9 +1,9 @@
+import { List, Root } from "@radix-ui/react-tabs";
 import type { HTMLAttributes, PropsWithChildren } from "react";
 import { NavLink, type NavLinkProps } from "react-router";
-import { Root, List } from "@radix-ui/react-tabs";
 import { tv } from "tailwind-variants";
 
-import { Slot, type AsChildProps } from "../Slot";
+import { type AsChildProps, Slot } from "../Slot";
 
 const cls = tv({
   slots: {

packages/ui/src/Atoms/Textarea/Textarea.tsx

@@ -1,11 +1,11 @@
-import {
-  useRef,
-  type TextareaHTMLAttributes,
-  type RefCallback,
-  useLayoutEffect,
-  useCallback,
-} from "react";
 import clsx from "clsx";
+import {
+  type RefCallback,
+  type TextareaHTMLAttributes,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+} from "react";
 
 import { input } from "../Input/Input";
 

packages/ui/src/Atoms/Toasts/Toasts.tsx

@@ -1,6 +1,6 @@
+import { tv } from "tailwind-variants";
 import { create } from "zustand";
 import { combine } from "zustand/middleware";
-import { tv } from "tailwind-variants";
 
 type Toast = {
   title: string;

packages/ui/src/Foundation.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
 import { objectKeys } from "@probo/helpers";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import * as icons from "./Atoms/Icons";
 

packages/ui/src/Layouts/Layout.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Layout, Drawer } from "./Layout";
+import { Drawer, Layout } from "./Layout";
 
 const meta = {
   title: "Layouts/Base",

packages/ui/src/Layouts/Layout.tsx

@@ -1,18 +1,18 @@
+import clsx from "clsx";
 import {
   createContext,
-  useContext,
-  useEffect,
-  useState,
   type PropsWithChildren,
   type ReactNode,
+  useContext,
+  useEffect,
   useMemo,
+  useState,
 } from "react";
 import { createPortal } from "react-dom";
-import clsx from "clsx";
 import { Link } from "react-router";
 
-import { Sidebar } from "../Atoms/Sidebar/Sidebar.tsx";
 import { Logo } from "../Atoms/Logo/Logo.tsx";
+import { Sidebar } from "../Atoms/Sidebar/Sidebar.tsx";
 import { Toasts } from "../Atoms/Toasts/Toasts.tsx";
 import { ConfirmDialog } from "../Molecules/Dialog/ConfirmDialog.tsx";
 

packages/ui/src/Molecules/Badge/MeasureBadge.tsx

@@ -1,7 +1,7 @@
+import type { measureStates } from "@probo/helpers";
 import { getMeasureStateLabel } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
 import type { ComponentProps } from "react";
-import type { measureStates } from "@probo/helpers";
 
 import { Badge } from "../../Atoms/Badge/Badge";
 

packages/ui/src/Molecules/Combobox/Combobox.stories.tsx

@@ -1,6 +1,6 @@
-import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react";
 import { times } from "@probo/helpers";
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
 
 import { Combobox, ComboboxItem } from "./Combobox";
 

packages/ui/src/Molecules/Combobox/Combobox.tsx

@@ -4,15 +4,15 @@ import {
   ComboboxPopover,
   ComboboxProvider,
 } from "@ariakit/react";
+import { isEmpty } from "@probo/helpers";
 import {
   type ComponentProps,
   type PropsWithChildren,
   type ReactNode,
 } from "react";
-import { isEmpty } from "@probo/helpers";
 
-import { input } from "../../Atoms/Input/Input";
 import { dropdown, dropdownItem } from "../../Atoms/Dropdown/Dropdown";
+import { input } from "../../Atoms/Input/Input";
 
 type Props = {
   children: ReactNode;

packages/ui/src/Molecules/Dialog/ConfirmDialog.tsx

@@ -1,14 +1,14 @@
 import { useTranslate } from "@probo/i18n";
 import {
-  Root,
-  Overlay,
-  Content,
-  Title,
-  Description,
   Cancel,
+  Content,
+  Description,
+  Overlay,
+  Root,
+  Title,
 } from "@radix-ui/react-alert-dialog";
-import { useCallback, useState, useMemo, type ComponentProps } from "react";
 import { Root as Portal } from "@radix-ui/react-portal";
+import { type ComponentProps, useCallback, useMemo, useState } from "react";
 import { create } from "zustand";
 import { combine } from "zustand/middleware";
 

packages/ui/src/Molecules/Dialog/Dialog.tsx

@@ -1,27 +1,27 @@
+import { useTranslate } from "@probo/i18n";
 import {
-  Root,
-  Trigger,
-  Portal,
-  Overlay,
-  Content,
-  Title,
   Close,
+  Content,
+  Overlay,
+  Portal,
+  Root,
+  Title,
+  Trigger,
 } from "@radix-ui/react-dialog";
+import clsx from "clsx";
 import {
   Children,
   cloneElement,
-  isValidElement,
-  useEffect,
-  useRef,
-  useState,
   type ComponentProps,
   type CSSProperties,
   type HTMLAttributes,
+  isValidElement,
   type ReactNode,
   type RefObject,
+  useEffect,
+  useRef,
+  useState,
 } from "react";
-import { useTranslate } from "@probo/i18n";
-import clsx from "clsx";
 import { tv } from "tailwind-variants";
 
 import { Button } from "../../Atoms/Button/Button";

packages/ui/src/Molecules/DurationPicker/DurationPicker.stories.tsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
 
 import { DurationPicker } from "./DurationPicker";
 

packages/ui/src/Molecules/DurationPicker/DurationPicker.tsx

@@ -1,5 +1,5 @@
-import type { HTMLAttributes } from "react";
 import { useTranslate } from "@probo/i18n";
+import type { HTMLAttributes } from "react";
 
 import { Button } from "../../Atoms/Button/Button";
 import { IconPlusLarge } from "../../Atoms/Icons";

packages/ui/src/Molecules/Field/Field.tsx

@@ -1,10 +1,10 @@
-import { tv } from "tailwind-variants";
 import { type ComponentProps, type ReactNode } from "react";
+import { tv } from "tailwind-variants";
 
-import { Label } from "../../Atoms/Label/Label";
 import { Input } from "../../Atoms/Input/Input";
-import { Textarea } from "../../Atoms/Textarea/Textarea";
+import { Label } from "../../Atoms/Label/Label";
 import { Select } from "../../Atoms/Select/Select";
+import { Textarea } from "../../Atoms/Textarea/Textarea";
 
 type BaseProps<T extends string, P> = {
   label?: string;

packages/ui/src/Molecules/FrameworkSelector/FrameworkSelector.tsx

@@ -1,17 +1,17 @@
 import { useTranslate } from "@probo/i18n";
 
-import { Dropdown, DropdownItem } from "../../Atoms/Dropdown/Dropdown";
-import { IconChevronDown, IconPlusLarge } from "../../Atoms/Icons";
 import { Button } from "../../Atoms/Button/Button";
-import { ISO27001 } from "../../Atoms/Frameworks/ISO27001";
-import { SOC2 } from "../../Atoms/Frameworks/SOC2";
-import { HIPAA } from "../../Atoms/Frameworks/HIPAA";
+import { Dropdown, DropdownItem } from "../../Atoms/Dropdown/Dropdown";
 import { CCPA } from "../../Atoms/Frameworks/CCPA";
-import { GDPR } from "../../Atoms/Frameworks/GDPR";
-import { NIS2 } from "../../Atoms/Frameworks/NIS2";
 import { DORA } from "../../Atoms/Frameworks/DORA";
+import { GDPR } from "../../Atoms/Frameworks/GDPR";
+import { HIPAA } from "../../Atoms/Frameworks/HIPAA";
+import { ISO27001 } from "../../Atoms/Frameworks/ISO27001";
 import { ISO27701 } from "../../Atoms/Frameworks/ISO27701";
 import { ISO42001 } from "../../Atoms/Frameworks/ISO42001";
+import { NIS2 } from "../../Atoms/Frameworks/NIS2";
+import { SOC2 } from "../../Atoms/Frameworks/SOC2";
+import { IconChevronDown, IconPlusLarge } from "../../Atoms/Icons";
 
 const availableFrameworks = [
   {

packages/ui/src/Molecules/MeasureImplementation/MeasureImplementation.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
 import { times } from "@probo/helpers";
+import type { Meta, StoryObj } from "@storybook/react";
 
 import { MeasureImplementation } from "./MeasureImplementation";
 

packages/ui/src/Molecules/MeasureImplementation/MeasureImplementation.tsx

@@ -1,7 +1,7 @@
-import type { ComponentProps } from "react";
-import { useTranslate } from "@probo/i18n";
 import { getMeasureStateLabel, measureStates } from "@probo/helpers";
+import { useTranslate } from "@probo/i18n";
 import clsx from "clsx";
+import type { ComponentProps } from "react";
 
 import type { MeasureBadge } from "../Badge/MeasureBadge.tsx";
 

packages/ui/src/Molecules/Risks/RiskOverview.tsx

@@ -1,9 +1,9 @@
-import { useTranslate } from "@probo/i18n";
 import {
   getRiskImpacts,
   getRiskLikelihoods,
   getSeverity,
 } from "@probo/helpers";
+import { useTranslate } from "@probo/i18n";
 import clsx from "clsx";
 
 import { Card } from "../../Atoms/Card/Card";

packages/ui/src/Molecules/Risks/RisksChart.tsx

@@ -1,16 +1,16 @@
-import clsx from "clsx";
-import { useTranslate } from "@probo/i18n";
 import { getRiskImpacts, getRiskLikelihoods, groupBy } from "@probo/helpers";
+import { useTranslate } from "@probo/i18n";
+import clsx from "clsx";
 import { Fragment, useMemo } from "react";
 import { Link } from "react-router";
 
+import { Card } from "../../Atoms/Card/Card";
 import {
   Dropdown,
   DropdownItem,
   DropdownSeparator,
 } from "../../Atoms/Dropdown/Dropdown";
 import { IconChevronRight, IconFire3 } from "../../Atoms/Icons";
-import { Card } from "../../Atoms/Card/Card";
 
 import { levelColors } from "./constants";
 

packages/ui/src/Molecules/Table/DataTable.stories.tsx

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { type FC, Fragment, useState } from "react";
 import { fn } from "@storybook/test";
+import { type FC, Fragment, useState } from "react";
 
-import { CellHead, DataTable, Row } from "../../Atoms/DataTable/DataTable.tsx";
 import { Badge } from "../../Atoms/Badge/Badge.tsx";
+import { CellHead, DataTable, Row } from "../../Atoms/DataTable/DataTable.tsx";
 
 import { EditableRow } from "./EditableRow.tsx";
-import { TextCell } from "./TextCell.tsx";
 import { SelectCell } from "./SelectCell.tsx";
+import { TextCell } from "./TextCell.tsx";
 
 type Component = FC<{ onUpdate: (key: string, value: unknown) => void }>;
 

packages/ui/src/Molecules/Table/EditableCell.tsx

@@ -1,3 +1,4 @@
+import { focusSiblingElement } from "@probo/helpers";
 import * as Popover from "@radix-ui/react-popover";
 import {
   type CSSProperties,
@@ -7,7 +8,6 @@ import {
   useRef,
   useState,
 } from "react";
-import { focusSiblingElement } from "@probo/helpers";
 
 import { Cell } from "../../Atoms/DataTable/DataTable.tsx";
 

packages/ui/src/Molecules/Table/SelectCell.tsx

@@ -1,14 +1,14 @@
+import { useStateWithRef } from "@probo/hooks";
+import { useTranslate } from "@probo/i18n";
 import { Command } from "cmdk";
 import { Fragment, type ReactNode } from "react";
-import { useTranslate } from "@probo/i18n";
-import { useStateWithRef } from "@probo/hooks";
 import { tv } from "tailwind-variants";
 
 import { Badge } from "../../Atoms/Badge/Badge.tsx";
 
+import { EditableCell, useEditableCellRef } from "./EditableCell.tsx";
 import { useEditableRowContext } from "./EditableRow.tsx";
 import { getKey } from "./utils.ts";
-import { EditableCell, useEditableCellRef } from "./EditableCell.tsx";
 
 type Props<T> = {
   name: string;

packages/ui/src/index.ts

@@ -1,5 +1,5 @@
 // Layouts
-export { Layout, Drawer } from "./Layouts/Layout";
+export { Drawer, Layout } from "./Layouts/Layout";
 export { ErrorLayout } from "./Layouts/ErrorLayout";
 export {
   CenteredLayout,
@@ -17,20 +17,20 @@ export { Breadcrumb } from "./Atoms/Breadcrumb/Breadcrumb";
 export { Badge } from "./Atoms/Badge/Badge";
 export { Spinner } from "./Atoms/Spinner/Spinner";
 export {
-  Dropdown,
   ActionDropdown,
-  DropdownSeparator,
+  Dropdown,
   DropdownItem,
+  DropdownSeparator,
 } from "./Atoms/Dropdown/Dropdown";
 export { Avatar } from "./Atoms/Avatar/Avatar";
 export { Field } from "./Molecules/Field/Field.tsx";
 export { Input } from "./Atoms/Input/Input.tsx";
 export { Textarea } from "./Atoms/Textarea/Textarea.tsx";
-export { Select, Option } from "./Atoms/Select/Select.tsx";
+export { Option, Select } from "./Atoms/Select/Select.tsx";
 export { Label } from "./Atoms/Label/Label";
 export { PropertyRow } from "./Atoms/PropertyRow/PropertyRow";
-export { Table, Thead, Tr, Tbody, Td, Th, TrButton } from "./Atoms/Table/Table";
-export { Tabs, TabLink, TabBadge, TabItem } from "./Atoms/Tabs/Tabs";
+export { Table, Tbody, Td, Th, Thead, Tr, TrButton } from "./Atoms/Table/Table";
+export { TabBadge, TabItem, TabLink, Tabs } from "./Atoms/Tabs/Tabs";
 export { Markdown } from "./Atoms/Markdown/Markdown";
 export { Dropzone } from "./Atoms/Dropzone/Dropzone";
 export { ControlItem } from "./Atoms/ControlItem/ControlItem";
@@ -39,9 +39,9 @@ export { PriorityLevel } from "./Atoms/PriorityLevel/PriorityLevel.tsx";
 export { TaskStateIcon } from "./Atoms/Icons/TaskStateIcon";
 export { Checkbox } from "./Atoms/Checkbox/Checkbox";
 export {
-  DataTable,
   Cell,
   CellHead,
+  DataTable,
   Row,
   RowButton,
 } from "./Atoms/DataTable/DataTable";
@@ -57,11 +57,11 @@ export {
   Dialog,
   DialogContent,
   DialogFooter,
+  type DialogRef,
   DialogTitle,
   useDialogRef,
-  type DialogRef,
 } from "./Molecules/Dialog/Dialog";
-export { useConfirm, ConfirmDialog } from "./Molecules/Dialog/ConfirmDialog";
+export { ConfirmDialog, useConfirm } from "./Molecules/Dialog/ConfirmDialog";
 export { RiskBadge } from "./Molecules/Badge/RiskBadge";
 export { SeverityBadge } from "./Molecules/Badge/SeverityBadge.tsx";
 export { DocumentVersionBadge } from "./Molecules/Badge/DocumentVersionBadge.tsx";
@@ -87,4 +87,4 @@ export {
 export { EditableRow } from "./Molecules/Table/EditableRow";
 
 // Hooks
-export { useToast, Toasts } from "./Atoms/Toasts/Toasts";
+export { Toasts, useToast } from "./Atoms/Toasts/Toasts";

packages/ui/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {