Disallow default exports with linter, get rid of existing ones (#2050)

disallow default exports with linter. named exports are a best practice

Author: david-crespo

.eslintrc.cjs

@@ -15,8 +15,16 @@ module.exports = {
     'plugin:react/recommended',
     'prettier',
     'plugin:react-hook-form/recommended',
+    'plugin:import/recommended',
+  ],
+  plugins: [
+    '@typescript-eslint',
+    'react-hooks',
+    'prettier',
+    'jsx-a11y',
+    'react-hook-form',
+    'import',
   ],
-  plugins: ['@typescript-eslint', 'react-hooks', 'prettier', 'jsx-a11y', 'react-hook-form'],
   settings: {
     react: {
       version: 'detect',
@@ -35,6 +43,8 @@ module.exports = {
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
     eqeqeq: ['error', 'always', { null: 'ignore' }],
+    'import/no-default-export': 'error',
+    'import/no-unresolved': 'off', // plugin doesn't know anything
     'jsx-a11y/label-has-associated-control': [2, { controlComponents: ['button'] }],
     'no-param-reassign': 'error',
     'no-restricted-imports': [
@@ -64,6 +74,11 @@ module.exports = {
   },
   ignorePatterns: ['dist/'],
   overrides: [
+    {
+      // default export is needed in config files
+      files: ['*.config.ts'],
+      rules: { 'import/no-default-export': 'off' },
+    },
     {
       files: ['*.js'],
       rules: {

app/components/EquivalentCliCommand.tsx

@@ -11,7 +11,7 @@ import { Success12Icon } from '@oxide/design-system/icons/react'
 
 import { Button } from '~/ui/lib/Button'
 import { Modal } from '~/ui/lib/Modal'
-import useTimeout from '~/ui/lib/use-timeout'
+import { useTimeout } from '~/ui/lib/use-timeout'
 
 export function EquivalentCliCommand({ command }: { command: string }) {
   const [isOpen, setIsOpen] = useState(false)

app/components/RefetchIntervalPicker.tsx

@@ -13,7 +13,7 @@ import { Refresh16Icon, Time16Icon } from '@oxide/design-system/icons/react'
 
 import { Listbox, type ListboxItem } from '~/ui/lib/Listbox'
 import { SpinnerLoader } from '~/ui/lib/Spinner'
-import useInterval from '~/ui/lib/use-interval'
+import { useInterval } from '~/ui/lib/use-interval'
 
 const intervalPresets = {
   Off: undefined,

app/components/RoundedSector.tsx

@@ -9,7 +9,7 @@ import { useEffect, useMemo, useState } from 'react'
 
 import { useReducedMotion } from '~/hooks'
 
-const RoundedSector = ({
+export function RoundedSector({
   angle,
   size,
   thickness,
@@ -19,7 +19,7 @@ const RoundedSector = ({
   size: number
   thickness: number
   cornerRadius?: number
-}) => {
+}) {
   const prefersReducedMotion = useReducedMotion()
   const [interpolatedAngle, setInterpolatedAngle] = useState(0)
 
@@ -290,5 +290,3 @@ const polarToCartesian = (cx: number, cy: number, radius: number, angle: number)
   x: cx + Math.cos((-Math.PI / 180) * angle) * radius,
   y: cy + Math.sin((-Math.PI / 180) * angle) * radius,
 })
-
-export default RoundedSector

app/components/Terminal.tsx

@@ -61,7 +61,9 @@ interface TerminalProps {
   ws: WebSocket
 }
 
-export const Terminal = ({ ws }: TerminalProps) => {
+// default export is most convenient for dynamic import
+// eslint-disable-next-line import/no-default-export
+export default function Terminal({ ws }: TerminalProps) {
   const [term, setTerm] = useState<XTerm | null>(null)
   const terminalRef = useRef<HTMLDivElement>(null)
 
@@ -114,5 +116,3 @@ export const Terminal = ({ ws }: TerminalProps) => {
     </>
   )
 }
-
-export default Terminal

app/components/TimeSeriesChart.tsx

@@ -120,6 +120,8 @@ function roundUpToDivBy(value: number, divisor: number) {
   return Math.ceil(value / divisor) * divisor
 }
 
+// default export is most convenient for dynamic import
+// eslint-disable-next-line import/no-default-export
 export default function TimeSeriesChart({
   className,
   data: rawData,

app/components/form/fields/DisksTableField.tsx

@@ -11,7 +11,7 @@ import { useController, type Control } from 'react-hook-form'
 import type { DiskCreate } from '@oxide/api'
 import { Error16Icon } from '@oxide/design-system/icons/react'
 
-import AttachDiskSideModalForm from '~/forms/disk-attach'
+import { AttachDiskSideModalForm } from '~/forms/disk-attach'
 import { CreateDiskSideModalForm } from '~/forms/disk-create'
 import type { InstanceCreateInput } from '~/forms/instance-create'
 import { Badge } from '~/ui/lib/Badge'

app/components/form/fields/NetworkInterfaceField.tsx

@@ -15,7 +15,7 @@ import type {
 import { Error16Icon } from '@oxide/design-system/icons/react'
 
 import type { InstanceCreateInput } from '~/forms/instance-create'
-import CreateNetworkInterfaceForm from '~/forms/network-interface-create'
+import { CreateNetworkInterfaceForm } from '~/forms/network-interface-create'
 import { Button } from '~/ui/lib/Button'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
 import * as MiniTable from '~/ui/lib/MiniTable'

app/forms/disk-attach.tsx

@@ -64,5 +64,3 @@ export function AttachDiskSideModalForm({
     </SideModalForm>
   )
 }
-
-export default AttachDiskSideModalForm

app/forms/network-interface-create.tsx

@@ -37,7 +37,7 @@ type CreateNetworkInterfaceFormProps = {
  * Can be used with either a `setState` or a real mutation as `onSubmit`, hence
  * the optional `loading` and `submitError`
  */
-export default function CreateNetworkInterfaceForm({
+export function CreateNetworkInterfaceForm({
   onSubmit,
   onDismiss,
   loading,