enable eslint warning for import order (autofixable)

Don't worry, it ignores bare imports if you're doing a side-effect
thing. Also, avoid doing side-effect things.

Author: kentcdodds

.eslintrc.cjs

@@ -18,7 +18,27 @@ module.exports = {
 				fixStyle: 'inline-type-imports',
 			},
 		],
-		'import/no-duplicates': 'warn',
+		'import/no-duplicates': ['warn', { 'prefer-inline': true }],
+		'import/consistent-type-specifier-style': ['warn', 'prefer-inline'],
+		'import/order': [
+			'warn',
+			{
+				alphabetize: { order: 'asc', caseInsensitive: true },
+				groups: [
+					'builtin',
+					'external',
+					'internal',
+					'parent',
+					'sibling',
+					'index',
+				],
+				pathGroups: [
+					{ pattern: '~/**', group: 'internal' },
+					{ pattern: 'test/**', group: 'internal' },
+					{ pattern: '@/icon-name', group: 'internal' },
+				],
+			},
+		],
 	},
 	overrides: [
 		{

app/components/forms.tsx

@@ -1,8 +1,8 @@
 import { useInputEvent } from '@conform-to/react'
 import React, { useId, useRef } from 'react'
+import { Checkbox, type CheckboxProps } from '~/components/ui/checkbox.tsx'
 import { Input } from '~/components/ui/input.tsx'
 import { Label } from '~/components/ui/label.tsx'
-import { Checkbox, type CheckboxProps } from '~/components/ui/checkbox.tsx'
 import { Textarea } from '~/components/ui/textarea.tsx'
 
 export type ListOfErrors = Array<string | null | undefined> | null | undefined

app/components/search-bar.tsx

@@ -1,9 +1,9 @@
 import { Form, useSearchParams, useSubmit } from '@remix-run/react'
+import { useDebounce, useIsSubmitting } from '~/utils/misc.tsx'
 import { Icon } from './ui/icon.tsx'
 import { Input } from './ui/input.tsx'
 import { Label } from './ui/label.tsx'
 import { StatusButton } from './ui/status-button.tsx'
-import { useDebounce, useIsSubmitting } from '~/utils/misc.tsx'
 
 export function SearchBar({
 	status,

app/components/ui/button.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '~/utils/misc.tsx'
 

app/components/ui/checkbox.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import * as React from 'react'
 
 import { cn } from '~/utils/misc.tsx'
 

app/components/ui/dropdown-menu.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import * as React from 'react'
 
 import { cn } from '~/utils/misc.tsx'
 

app/components/ui/icon.tsx

@@ -1,8 +1,8 @@
 import { type SVGProps } from 'react'
+import { type IconName } from '@/icon-name'
 import { cn } from '~/utils/misc.tsx'
 import href from './icons/sprite.svg'
 
-import { type IconName } from '@/icon-name'
 export { href }
 export { IconName }
 

app/components/ui/label.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
 import * as LabelPrimitive from '@radix-ui/react-label'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '~/utils/misc.tsx'
 

app/components/ui/status-button.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
-import { Button, type ButtonProps } from './button.tsx'
-import { cn } from '~/utils/misc.tsx'
 import { useSpinDelay } from 'spin-delay'
+import { cn } from '~/utils/misc.tsx'
+import { Button, type ButtonProps } from './button.tsx'
 import { Icon } from './icon.tsx'
 import {
 	Tooltip,

app/components/ui/toast.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
 import * as ToastPrimitives from '@radix-ui/react-toast'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 import { cn } from '~/utils/misc.tsx'
 import { Icon } from './icon.tsx'