Add eslint-plugin-import

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

packages/eslint-config/package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@eslint/js": "^9.39.2",
     "@stylistic/eslint-plugin": "^5.7.0",
+    "eslint-plugin-import-x": "^4.16.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^17.0.0",

packages/eslint-config/src/baseConfigs.ts

@@ -3,6 +3,5 @@ import type { Linter } from "eslint";
 
 export const baseConfigs = [
   { ignores: ["dist", "node_modules", "**/*.d.ts"] } satisfies Pick<Linter.Config, "ignores">,
-  { files: ["**/*.js", "**/*.ts", "**/*.tsx"] } satisfies Pick<Linter.Config, "files">,
   js.configs.recommended,
 ];

packages/eslint-config/src/importsConfigs.ts

@@ -0,0 +1,35 @@
+import { createTypeScriptImportResolver } from "eslint-import-resolver-typescript";
+import { importX } from "eslint-plugin-import-x";
+
+export const importsConfigs = [
+  importX.flatConfigs.recommended,
+  {
+    rules: {
+      "import-x/order": [
+        "error",
+        {
+          "groups": ["builtin", "external", "parent", "sibling", "index"],
+          "distinctGroup": true,
+          "newlines-between": "always",
+          "pathGroups": [
+            {
+              // Aliases
+              pattern: "/**",
+              group: "external",
+              position: "after",
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    ...importX.flatConfigs.typescript,
+    settings: {
+      "import-x/resolver-next": createTypeScriptImportResolver({
+        alwaysTryTypes: true,
+        project: "tsconfig.json",
+      }),
+    },
+  },
+];

packages/eslint-config/src/index.ts

@@ -3,9 +3,11 @@ import { browserLanguageOptionsConfig, nodeLanguageOptionsConfig } from "./langu
 import { tsConfigs } from "./tsConfigs.ts";
 import { reactConfigs } from "./reactConfigs.ts";
 import { stylisticConfigs } from "./stylisticConfigs.ts";
+import { importsConfigs } from "./importsConfigs.ts";
 
 export const configs = {
   base: baseConfigs,
+  imports: importsConfigs,
   ts: tsConfigs,
   languageOptions: {
     browser: browserLanguageOptionsConfig,

packages/eslint-config/src/tsConfigs.ts

@@ -1,8 +1,8 @@
 import type { Linter } from "eslint";
-import tseslint from "typescript-eslint";
+import { configs } from "typescript-eslint";
 
 export const tsConfigs = [
-  ...tseslint.configs.recommendedTypeChecked,
+  ...configs.recommendedTypeChecked,
   {
     files: ["**/*.{ts,tsx}"],
     rules: {

packages/ui/.storybook/main.ts

@@ -1,7 +1,7 @@
-import type { StorybookConfig } from "@storybook/react-vite";
-
 import { join, dirname } from "path";
 
+import type { StorybookConfig } from "@storybook/react-vite";
+
 /**
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.

packages/ui/.storybook/preview.tsx

@@ -1,9 +1,9 @@
 import type { Preview } from "@storybook/react";
+import { BrowserRouter } from "react-router";
+import { useEffect } from "react";
 
 import "../src/theme.css";
 import "./preview.css";
-import { BrowserRouter } from "react-router";
-import { useEffect } from "react";
 
 const preview: Preview = {
   parameters: {

packages/ui/eslint.config.mjs

@@ -4,6 +4,7 @@ import { configs } from "@probo/eslint-config";
 export default defineConfig([
   ...configs.base,
   ...configs.ts,
+  ...configs.imports,
   ...configs.react,
   ...configs.stylistic,
   {

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

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

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

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

packages/ui/src/Atoms/Badge/Badge.tsx

@@ -1,5 +1,6 @@
 import type { HTMLAttributes } from "react";
 import { tv } from "tailwind-variants";
+
 import { Slot } from "../Slot";
 
 type Props = {

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

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

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

@@ -1,8 +1,9 @@
 import clsx from "clsx";
 import { Link } from "react-router";
-import { IconChevronRight } from "../Icons";
 import { Fragment } from "react/jsx-runtime";
 
+import { IconChevronRight } from "../Icons";
+
 type Props = {
   items: (ItemProps | string)[];
 };

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

@@ -1,7 +1,9 @@
-import { IconPlusLarge } from "../Icons";
-import { Button } from "./Button";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { IconPlusLarge } from "../Icons";
+
+import { Button } from "./Button";
+
 export default {
   title: "Atoms/Button",
   component: Button,

packages/ui/src/Atoms/Button/Button.tsx

@@ -6,6 +6,7 @@ import type {
 } from "react";
 import { Link } from "react-router";
 import { tv, type VariantProps } from "tailwind-variants";
+
 import { Slot } from "../Slot";
 
 export const button = tv({

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

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

packages/ui/src/Atoms/Card/Card.tsx

@@ -1,5 +1,6 @@
 import type { CSSProperties, PropsWithChildren } from "react";
 import { tv } from "tailwind-variants";
+
 import { Slot } from "../Slot";
 
 type Props = PropsWithChildren<{

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

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

packages/ui/src/Atoms/Checkbox/Checkbox.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { tv } from "tailwind-variants";
+
 import { IconCheckmark1 } from "../Icons";
 
 type Props = {

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

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

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

@@ -4,8 +4,9 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from "react";
-import { Card } from "../Card/Card";
 import clsx from "clsx";
+
+import { Card } from "../Card/Card";
 import { type AsChildProps, Slot } from "../Slot.tsx";
 import { IconPlusLarge } from "../Icons";
 

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

@@ -1,7 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
 import { Button } from "../Button/Button";
 import { IconCircleQuestionmark1 } from "../Icons";
+
 import { Dropdown, DropdownItem, DropdownSeparator } from "./Dropdown";
-import type { Meta, StoryObj } from "@storybook/react";
 
 export default {
   title: "Atoms/Dropdown",

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

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

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

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

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

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

packages/ui/src/Atoms/FrameworkLogo/FrameworkLogo.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+
 import { Avatar } from "../Avatar/Avatar";
 
 interface FrameworkLogoProps {

packages/ui/src/Atoms/Icons/TaskStateIcon.stories.tsx

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+
 import { Logo } from "./Logo";
 
 const meta = {

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

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

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

@@ -1,6 +1,7 @@
-import { PriorityLevel } from "./PriorityLevel.tsx";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { PriorityLevel } from "./PriorityLevel.tsx";
+
 export default {
   title: "Atoms/PriorityLevel",
   component: PriorityLevel,

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

@@ -1,7 +1,9 @@
-import { Select } from "../Select/Select";
-import { PropertyRow } from "./PropertyRow";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { Select } from "../Select/Select";
+
+import { PropertyRow } from "./PropertyRow";
+
 export default {
   title: "Atoms/PropertyRow",
   component: PropertyRow,

packages/ui/src/Atoms/PropertyRow/PropertyRow.tsx

@@ -1,4 +1,5 @@
 import { Children, type ReactNode } from "react";
+
 import { Label } from "../Label/Label";
 
 type Props = {

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

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

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

@@ -10,8 +10,6 @@ import {
   ItemText,
 } from "@radix-ui/react-select";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
-import { Input, input } from "../Input/Input.tsx";
-import { IconChevronGrabberVertical } from "../Icons/IconChevronGrabberVertical.tsx";
 import { tv } from "tailwind-variants";
 import {
   Children,
@@ -20,6 +18,9 @@ import {
   type PropsWithChildren,
   type ReactNode,
 } from "react";
+
+import { Input, input } from "../Input/Input.tsx";
+import { IconChevronGrabberVertical } from "../Icons/IconChevronGrabberVertical.tsx";
 import { IconMagnifyingGlass } from "../Icons/IconMagnifyingGlass.tsx";
 import { Spinner } from "../Spinner/Spinner.tsx";
 

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

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { IconBank } from "../Icons/IconBank.tsx";
+
 import { Sidebar } from "./Sidebar";
 import { SidebarItem } from "./SidebarItem";
-import { IconBank } from "../Icons/IconBank.tsx";
 
 const meta: Meta<typeof Sidebar> = {
   component: Sidebar,

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

@@ -5,6 +5,7 @@ import {
   useState,
 } from "react";
 import { clsx } from "clsx";
+
 import { IconCollapse, IconExpand } from "../Icons";
 import { Button } from "../Button/Button";
 

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

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

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

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

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

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

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

@@ -1,6 +1,7 @@
-import { Table, Tbody, Td, Th, Thead, Tr, TrButton } from "./Table";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { Table, Tbody, Td, Th, Thead, Tr, TrButton } from "./Table";
+
 export default {
   title: "Atoms/Table",
   component: Table,

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

@@ -7,9 +7,10 @@ import {
   type ThHTMLAttributes,
   useContext,
 } from "react";
-import { Card } from "../Card/Card";
 import { Link } from "react-router";
 import clsx from "clsx";
+
+import { Card } from "../Card/Card";
 import { IconPlusLarge } from "../Icons";
 
 export function Table({

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

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

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

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

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

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

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

@@ -5,9 +5,10 @@ import {
   useLayoutEffect,
   useCallback,
 } from "react";
-import { input } from "../Input/Input";
 import clsx from "clsx";
 
+import { input } from "../Input/Input";
+
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   variant?: "bordered" | "ghost" | "title";
   autogrow?: boolean;

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

@@ -1,7 +1,9 @@
-import { Button } from "../Button/Button";
-import { Toast, Toasts, useToast } from "./Toasts";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { Button } from "../Button/Button";
+
+import { Toast, Toasts, useToast } from "./Toasts";
+
 export default {
   title: "Atoms/Toasts",
   component: Toasts,

packages/ui/src/Foundation.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import * as icons from "./Atoms/Icons";
 import { objectKeys } from "@probo/helpers";
 
+import * as icons from "./Atoms/Icons";
+
 const meta = {
   title: "Foundations",
 } satisfies Meta;

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

@@ -1,6 +1,7 @@
-import { CenteredLayout } from "./CenteredLayout";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { CenteredLayout } from "./CenteredLayout";
+
 export default {
   title: "Layouts/CenteredLayout",
   component: CenteredLayout,

packages/ui/src/Layouts/CenteredLayout.tsx

@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from "react";
 import { Outlet } from "react-router";
+
 import { Skeleton } from "../Atoms/Skeleton/Skeleton";
 
 export function CenteredLayout({ children }: PropsWithChildren) {

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

@@ -1,6 +1,7 @@
-import { ErrorLayout } from "./ErrorLayout";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { ErrorLayout } from "./ErrorLayout";
+
 export default {
   title: "Layouts/ErrorLayout",
   component: ErrorLayout,

packages/ui/src/Layouts/ErrorLayout.tsx

@@ -1,4 +1,5 @@
 import type { PropsWithChildren } from "react";
+
 import { IconCircleInfo } from "../Atoms/Icons";
 
 type Props = PropsWithChildren<{

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

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

packages/ui/src/Layouts/Layout.tsx

@@ -7,13 +7,14 @@ import {
   type ReactNode,
   useMemo,
 } 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 { Toasts } from "../Atoms/Toasts/Toasts.tsx";
-import { createPortal } from "react-dom";
-import clsx from "clsx";
 import { ConfirmDialog } from "../Molecules/Dialog/ConfirmDialog.tsx";
-import { Link } from "react-router";
 
 type Props = PropsWithChildren<{
   headerLeading?: ReactNode;

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

@@ -1,7 +1,8 @@
-import { Badge } from "../../Atoms/Badge/Badge";
 import { getDocumentClassificationLabel } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
 
+import { Badge } from "../../Atoms/Badge/Badge";
+
 type Props = {
   classification: string;
 };

packages/ui/src/Molecules/Badge/DocumentTypeBadge.stories.tsx

@@ -1,6 +1,7 @@
-import { DocumentTypeBadge } from "./DocumentTypeBadge";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { DocumentTypeBadge } from "./DocumentTypeBadge";
+
 export default {
   title: "Molecules/Badges/DocumentTypeBadge",
   component: DocumentTypeBadge,

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

@@ -1,7 +1,8 @@
-import { Badge } from "../../Atoms/Badge/Badge";
 import { getDocumentTypeLabel } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
 
+import { Badge } from "../../Atoms/Badge/Badge";
+
 type Props = {
   type: string;
 };

packages/ui/src/Molecules/Badge/DocumentVersionBadge.stories.tsx

@@ -1,6 +1,7 @@
-import { DocumentVersionBadge } from "./DocumentVersionBadge";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { DocumentVersionBadge } from "./DocumentVersionBadge";
+
 export default {
   title: "Molecules/Badges/DocumentVersionBadge",
   component: DocumentVersionBadge,

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

@@ -1,4 +1,5 @@
 import { useTranslate } from "@probo/i18n";
+
 import { Badge } from "../../Atoms/Badge/Badge.tsx";
 
 type Props = {

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

@@ -1,6 +1,7 @@
-import { MeasureBadge } from "./MeasureBadge";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { MeasureBadge } from "./MeasureBadge";
+
 export default {
   title: "Molecules/Badges/MeasureBadge",
   component: MeasureBadge,

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

@@ -1,9 +1,10 @@
 import { getMeasureStateLabel } from "@probo/helpers";
-import { Badge } from "../../Atoms/Badge/Badge";
 import { useTranslate } from "@probo/i18n";
 import type { ComponentProps } from "react";
 import type { measureStates } from "@probo/helpers";
 
+import { Badge } from "../../Atoms/Badge/Badge";
+
 type Props = {
   state: (typeof measureStates)[number];
 };

packages/ui/src/Molecules/Badge/RiskBadge.stories.tsx

@@ -1,6 +1,7 @@
-import { RiskBadge } from "./RiskBadge";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { RiskBadge } from "./RiskBadge";
+
 export default {
   title: "Molecules/Badges/RiskBadge",
   component: RiskBadge,

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

@@ -1,4 +1,5 @@
 import { useTranslate } from "@probo/i18n";
+
 import { Badge } from "../../Atoms/Badge/Badge";
 
 type Props = {

packages/ui/src/Molecules/Badge/SeverityBadge.stories.tsx

@@ -1,6 +1,7 @@
-import { SeverityBadge } from "./SeverityBadge.tsx";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { SeverityBadge } from "./SeverityBadge.tsx";
+
 export default {
   title: "Molecules/Badges/SeverityBadge",
   component: SeverityBadge,

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

@@ -1,4 +1,5 @@
 import { useTranslate } from "@probo/i18n";
+
 import { Badge } from "../../Atoms/Badge/Badge.tsx";
 
 type Props = {

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

@@ -1,8 +1,9 @@
 import { useState } from "react";
-import { Combobox, ComboboxItem } from "./Combobox";
 import type { Meta, StoryObj } from "@storybook/react";
 import { times } from "@probo/helpers";
 
+import { Combobox, ComboboxItem } from "./Combobox";
+
 export default {
   title: "Atoms/Combobox",
   component: Combobox,

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

@@ -9,9 +9,10 @@ import {
   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 { isEmpty } from "@probo/helpers";
 
 type Props = {
   children: ReactNode;

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

@@ -8,12 +8,14 @@ import {
   Cancel,
 } from "@radix-ui/react-alert-dialog";
 import { useCallback, useState, useMemo, type ComponentProps } from "react";
-import { Button } from "../../Atoms/Button/Button";
 import { Root as Portal } from "@radix-ui/react-portal";
-import { dialog } from "./Dialog";
 import { create } from "zustand";
 import { combine } from "zustand/middleware";
 
+import { Button } from "../../Atoms/Button/Button";
+
+import { dialog } from "./Dialog";
+
 type State = {
   title?: string;
   message: string | null;

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

@@ -1,7 +1,9 @@
-import { Button } from "../../Atoms/Button/Button";
-import { Dialog, DialogContent, DialogFooter } from "./Dialog";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { Button } from "../../Atoms/Button/Button";
+
+import { Dialog, DialogContent, DialogFooter } from "./Dialog";
+
 export default {
   title: "Atoms/Dialog",
   component: Dialog,

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

@@ -7,7 +7,6 @@ import {
   Title,
   Close,
 } from "@radix-ui/react-dialog";
-import { IconCrossLargeX } from "../../Atoms/Icons";
 import {
   Children,
   cloneElement,
@@ -21,11 +20,13 @@ import {
   type ReactNode,
   type RefObject,
 } from "react";
-import { Button } from "../../Atoms/Button/Button";
 import { useTranslate } from "@probo/i18n";
 import clsx from "clsx";
 import { tv } from "tailwind-variants";
 
+import { Button } from "../../Atoms/Button/Button";
+import { IconCrossLargeX } from "../../Atoms/Icons";
+
 export const dialog = tv({
   slots: {
     overlay:

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

@@ -1,7 +1,8 @@
 import { useState } from "react";
-import { DurationPicker } from "./DurationPicker";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { DurationPicker } from "./DurationPicker";
+
 export default {
   title: "Molecules/DurationPicker",
   component: DurationPicker,

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

@@ -1,9 +1,10 @@
 import type { HTMLAttributes } from "react";
+import { useTranslate } from "@probo/i18n";
+
 import { Button } from "../../Atoms/Button/Button";
 import { IconPlusLarge } from "../../Atoms/Icons";
 import { Input } from "../../Atoms/Input/Input";
 import { Option, Select } from "../../Atoms/Select/Select";
-import { useTranslate } from "@probo/i18n";
 
 type Props = {
   value: string | null;

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

@@ -1,6 +1,7 @@
-import { Field } from "./Field.tsx";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { Field } from "./Field.tsx";
+
 export default {
   title: "Molecules/Field",
   component: Field,

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

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

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

@@ -1,6 +1,7 @@
-import { FileButton } from "./FileButton";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { FileButton } from "./FileButton";
+
 export default {
   title: "Molecules/FileButton",
   component: FileButton,

packages/ui/src/Molecules/FileButton/FileButton.tsx

@@ -4,6 +4,7 @@ import type {
   PropsWithChildren,
   RefObject,
 } from "react";
+
 import { button, Button } from "../../Atoms/Button/Button.tsx";
 
 type Props = PropsWithChildren<{

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

@@ -1,6 +1,7 @@
-import { FrameworkSelector } from "./FrameworkSelector";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { FrameworkSelector } from "./FrameworkSelector";
+
 export default {
   title: "Molecules/FrameworkSelector",
   component: FrameworkSelector,

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

@@ -1,7 +1,8 @@
+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 { useTranslate } from "@probo/i18n";
 import { ISO27001 } from "../../Atoms/Frameworks/ISO27001";
 import { SOC2 } from "../../Atoms/Frameworks/SOC2";
 import { HIPAA } from "../../Atoms/Frameworks/HIPAA";

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

@@ -1,7 +1,8 @@
-import { MeasureImplementation } from "./MeasureImplementation";
 import type { Meta, StoryObj } from "@storybook/react";
 import { times } from "@probo/helpers";
 
+import { MeasureImplementation } from "./MeasureImplementation";
+
 export default {
   title: "Molecules/MeasureImplementation",
   component: MeasureImplementation,

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

@@ -1,9 +1,10 @@
 import type { ComponentProps } from "react";
-import type { MeasureBadge } from "../Badge/MeasureBadge.tsx";
 import { useTranslate } from "@probo/i18n";
 import { getMeasureStateLabel, measureStates } from "@probo/helpers";
 import clsx from "clsx";
 
+import type { MeasureBadge } from "../Badge/MeasureBadge.tsx";
+
 type MeasureState = ComponentProps<typeof MeasureBadge>["state"];
 
 type Props = {

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

@@ -1,7 +1,9 @@
-import { Button } from "../../Atoms/Button/Button.tsx";
-import { PageHeader } from "./PageHeader";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { Button } from "../../Atoms/Button/Button.tsx";
+
+import { PageHeader } from "./PageHeader";
+
 export default {
   title: "Molecules/PageHeader",
   component: PageHeader,

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

@@ -1,6 +1,7 @@
-import { RiskOverview } from "./RiskOverview";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { RiskOverview } from "./RiskOverview";
+
 export default {
   title: "Molecules/Risks/RiskOverview",
   component: RiskOverview,

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

@@ -1,6 +1,4 @@
 import { useTranslate } from "@probo/i18n";
-import { Card } from "../../Atoms/Card/Card";
-import { levelColors } from "./constants";
 import {
   getRiskImpacts,
   getRiskLikelihoods,
@@ -8,6 +6,10 @@ import {
 } from "@probo/helpers";
 import clsx from "clsx";
 
+import { Card } from "../../Atoms/Card/Card";
+
+import { levelColors } from "./constants";
+
 type Props = {
   type: "inherent" | "residual";
   risk?: Risk;

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

@@ -1,7 +1,8 @@
 import { randomInt, times } from "@probo/helpers";
-import { RisksChart } from "./RisksChart";
 import type { Meta, StoryObj } from "@storybook/react";
 
+import { RisksChart } from "./RisksChart";
+
 export default {
   title: "Molecules/Risks/RisksChart",
   component: RisksChart,

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

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

packages/ui/src/Molecules/Select/ImpactOptions.stories.tsx

@@ -1,7 +1,9 @@
-import { ImpactOptions } from "./ImpactOptions.tsx";
 import type { Meta, StoryObj } from "@storybook/react";
+
 import { Select } from "../../Atoms/Select/Select.tsx";
 
+import { ImpactOptions } from "./ImpactOptions.tsx";
+
 export default {
   title: "Molecules/Select/ImpactSelect",
   component: ImpactOptions,

packages/ui/src/Molecules/Select/ImpactOptions.tsx

@@ -1,6 +1,7 @@
-import { Option } from "../../Atoms/Select/Select";
 import { useTranslate } from "@probo/i18n";
 
+import { Option } from "../../Atoms/Select/Select";
+
 export function ImpactOptions() {
   const { __ } = useTranslate();
 

packages/ui/src/Molecules/Select/SentitivityOptions.stories.tsx

@@ -1,7 +1,9 @@
-import { SentitivityOptions } from "./SentitivityOptions.tsx";
 import type { Meta, StoryObj } from "@storybook/react";
+
 import { Select } from "../../Atoms/Select/Select.tsx";
 
+import { SentitivityOptions } from "./SentitivityOptions.tsx";
+
 export default {
   title: "Molecules/Select/SentitivitySelect",
   component: SentitivityOptions,

packages/ui/src/Molecules/Select/SentitivityOptions.tsx

@@ -1,6 +1,7 @@
-import { Option } from "../../Atoms/Select/Select";
 import { useTranslate } from "@probo/i18n";
 
+import { Option } from "../../Atoms/Select/Select";
+
 export function SentitivityOptions() {
   const { __ } = useTranslate();
 

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

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

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

@@ -7,8 +7,10 @@ import {
   useRef,
   useState,
 } from "react";
-import { Cell } from "../../Atoms/DataTable/DataTable.tsx";
 import { focusSiblingElement } from "@probo/helpers";
+
+import { Cell } from "../../Atoms/DataTable/DataTable.tsx";
+
 import { useEditableRowContext } from "./EditableRow.tsx";
 
 export function useEditableCellRef() {

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

@@ -5,6 +5,7 @@ import {
   useMemo,
   useRef,
 } from "react";
+
 import { Row } from "../../Atoms/DataTable/DataTable.tsx";
 
 type Props = {

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

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

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

@@ -1,5 +1,6 @@
-import { EditableCell, useEditableCellRef } from "./EditableCell.tsx";
 import { type KeyboardEventHandler, useRef, useState } from "react";
+
+import { EditableCell, useEditableCellRef } from "./EditableCell.tsx";
 import { useEditableRowContext } from "./EditableRow.tsx";
 
 type Props = {

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

@@ -1,11 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
 import { DropdownSeparator } from "../../Atoms/Dropdown/Dropdown";
 import {
   IconArrowBoxLeft,
   IconCircleQuestionmark,
   IconSettingsGear2,
 } from "../../Atoms/Icons";
+
 import { UserDropdown, UserDropdownItem } from "./UserDropdown";
-import type { Meta, StoryObj } from "@storybook/react";
 
 export default {
   title: "Molecules/UserDropdown",

packages/ui/src/Molecules/UserDropdown/UserDropdown.tsx

@@ -1,3 +1,6 @@
+import type { FC, PropsWithChildren } from "react";
+import { Link } from "react-router";
+
 import { Avatar } from "../../Atoms/Avatar/Avatar";
 import { Button } from "../../Atoms/Button/Button";
 import {
@@ -6,9 +9,7 @@ import {
   DropdownSeparator,
 } from "../../Atoms/Dropdown/Dropdown";
 import { IconChevronDown } from "../../Atoms/Icons";
-import type { FC, PropsWithChildren } from "react";
 import type { IconProps } from "../../Atoms/Icons/type";
-import { Link } from "react-router";
 
 type Props = PropsWithChildren<{ fullName: string; email: string }>;