import rules, groupings, and order enforced by lint

.eslintrc.yaml

@@ -13,6 +13,8 @@ plugins:
   - 'eslint-plugin-react-native'
   - 'eslint-plugin-react-hooks'
   - '@tanstack/eslint-plugin-query'
+  - 'simple-import-sort'
+  - 'import'
 
 extends:
   - 'eslint:recommended'
@@ -125,3 +127,35 @@ rules:
 
   # eslint-plugin-jsx-expressions – https://github.com/hpersson/eslint-plugin-jsx-expressions/
   jsx-expressions/strict-logical-expressions: warn
+
+  # eslint-plugin-import https://github.com/import-js/eslint-plugin-import/
+  import/first: error
+  import/no-duplicates: error
+
+  # eslint-plugin-simple-import-sort https://github.com/lydell/eslint-plugin-simple-import-sort/
+  simple-import-sort/exports: error
+  simple-import-sort/imports: [error, groups: [
+          # Node.js builtins. You could also generate this regex if you use a `.js` config.
+          # For example: `^(${require('module').builtinModules.join('|')})(/|$)`
+          # Note that if you use the `node:` prefix for Node.js builtins,
+          # you can avoid this complexity: You can simply use '^node:'.
+          [
+            '^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)',
+          ],
+          # Packages. `react` related packages come first.
+          ['^react', '^@?\\w'],
+          # react-native community packages
+          ['^react-native-'],
+          # React navigation
+          ['^@react-navigation'],
+          # Internal packages.
+          ['^(@|@frogpond|@hawkrives|components|modules|util|config)(/.*|$)'],
+          # Side effect imports.
+          ['^\\u0000'],
+          # Parent imports. Put `..` last.
+          ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+          # Other relative imports. Put same-folder imports and `.` last.
+          ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+          # Style imports.
+          ['^.+\\.s?css$'],
+        ]]

images/news-sources/index.ts

@@ -1,5 +1,4 @@
 export {ksto} from '../streaming'
-
 export * as mess from './mess.png'
 export * as oleville from './oleville.png'
 export * as stolaf from './stolaf.png'

images/spaces/index.ts

@@ -11,8 +11,8 @@ import hallOfMusic from './optimized/hall-of-music.jpg'
 import halvorson from './optimized/halvorson.jpg'
 import oldMain from './optimized/old-main.jpg'
 import pauseKitchen from './optimized/pause-kitchen.jpg'
-import print from './optimized/print.jpg'
 import postOffice from './optimized/post-office.jpg'
+import print from './optimized/print.jpg'
 import regentsHall from './optimized/regents-hall.jpg'
 import regentsMath from './optimized/regents-math.jpg'
 import rolvaagLibrary from './optimized/rolvaag-library.jpg'

images/webcams/index.ts

@@ -1,9 +1,9 @@
 import alumniwest from './alumniwest.jpg'
 import bcplaza from './bcplaza.jpg'
 import eastquad from './eastquad.jpg'
+import oleave from './oleave.jpg'
 import tomsoneast from './tomsoneast.jpg'
 import tomsonwest from './tomsonwest.jpg'
-import oleave from './oleave.jpg'
 
 export const images = new Map<string, number>([
 	['alumniwest', alumniwest],

modules/add-to-device-calendar/add-to-calendar.ts

@@ -1,5 +1,7 @@
 import * as React from 'react'
+
 import type {EventType} from '@frogpond/event-type'
+
 import {addToCalendar} from './lib'
 import delay from 'delay'
 

modules/add-to-device-calendar/lib.ts

@@ -1,8 +1,11 @@
-import * as Sentry from '@sentry/react-native'
-import type {EventType} from '@frogpond/event-type'
-import RNCalendarEvents from 'react-native-calendar-events'
 import {Alert, Linking, Platform} from 'react-native'
 
+import RNCalendarEvents from 'react-native-calendar-events'
+
+import type {EventType} from '@frogpond/event-type'
+
+import * as Sentry from '@sentry/react-native'
+
 export async function addToCalendar(event: EventType): Promise<boolean> {
 	try {
 		const authCode = await RNCalendarEvents.checkPermissions(false)

modules/app-theme/index.ts

@@ -1,7 +1,7 @@
 // import type {ThemingType} from '@callstack/react-theme-provider'
 // import {createTheming} from '@callstack/react-theme-provider'
 import {useTheme} from '@react-navigation/native'
-export {CombinedLightTheme, CombinedDarkTheme} from './paper'
+export {CombinedDarkTheme, CombinedLightTheme} from './paper'
 
 export type AppTheme = {
 	accent: string

modules/app-theme/paper.ts

@@ -1,14 +1,14 @@
-import merge from 'deepmerge'
+import {
+	MD3DarkTheme as PaperDarkTheme,
+	MD3LightTheme as PaperLightTheme,
+} from 'react-native-paper'
 
 import {
 	DarkTheme as NavigationDarkTheme,
 	DefaultTheme as NavigationLightTheme,
 } from '@react-navigation/native'
 
-import {
-	MD3DarkTheme as PaperDarkTheme,
-	MD3LightTheme as PaperLightTheme,
-} from 'react-native-paper'
+import merge from 'deepmerge'
 
 export const CombinedLightTheme = merge(PaperLightTheme, NavigationLightTheme)
 

modules/badge/outline.tsx

@@ -8,6 +8,7 @@ import {
 	View,
 	ViewStyle,
 } from 'react-native'
+
 import * as c from '@frogpond/colors'
 
 type Props = {

modules/badge/solid.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import {ColorValue, Platform, StyleSheet, Text, View} from 'react-native'
+
 import * as c from '@frogpond/colors'
 
 type Props = {

modules/button/index.tsx

@@ -6,11 +6,14 @@ import {
 	TextStyle,
 	ViewStyle,
 } from 'react-native'
+
 import BasicButton from 'react-native-button'
-import noop from 'lodash/noop'
 import {iOSUIKit, material} from 'react-native-typography'
+
 import * as c from '@frogpond/colors'
 
+import noop from 'lodash/noop'
+
 const styles = StyleSheet.create({
 	button: {
 		alignSelf: 'center',

modules/ccc-calendar/index.tsx

@@ -1,15 +1,17 @@
+import * as React from 'react'
+
 import {EventList, type PoweredBy} from '@frogpond/event-list'
 import type {EventType} from '@frogpond/event-type'
 import {NoticeView} from '@frogpond/notice'
 import {useMomentTimer} from '@frogpond/timer'
+
 import {UseQueryResult} from '@tanstack/react-query'
-import * as React from 'react'
 
 export {
-	useNamedCalendar,
 	useGoogleCalendar,
-	useReasonCalendar,
 	useIcsCalendar,
+	useNamedCalendar,
+	useReasonCalendar,
 } from './query'
 
 type Props = {

modules/ccc-calendar/query.ts

@@ -1,13 +1,14 @@
 import {client} from '@frogpond/api'
 import {EventType} from '@frogpond/event-type'
-import {useQuery, type UseQueryResult} from '@tanstack/react-query'
-import moment from 'moment'
+
 import {
 	GoogleCalendar,
 	IcsCalendar,
 	NamedCalendar,
 	ReasonCalendar,
 } from './types'
+import {useQuery, type UseQueryResult} from '@tanstack/react-query'
+import moment from 'moment'
 
 export const keys = {
 	named: (name: string) => ['calendar', 'named', name] as const,

modules/colors/index.ts

@@ -1,5 +1,4 @@
-export {firstReadable} from './util'
-
 export * from './colors'
 export * from './gradients'
 export * from './platform'
+export {firstReadable} from './util'

modules/colors/platform.ts

@@ -1,4 +1,4 @@
-import {PlatformColor, Platform, OpaqueColorValue} from 'react-native'
+import {OpaqueColorValue, Platform, PlatformColor} from 'react-native'
 
 // MARK: Label colors
 

modules/colors/util.ts

@@ -1,5 +1,5 @@
-import tinycolor from 'tinycolor2'
 import {black, white} from './colors'
+import tinycolor from 'tinycolor2'
 
 /**
  * Given a background and a set of foreground colors, returns the first

modules/context-menu/index.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
 import {StyleProp, ViewStyle} from 'react-native'
-import {Touchable} from '@frogpond/touchable'
+
 import {ContextMenuButton} from 'react-native-ios-context-menu'
+
+import {Touchable} from '@frogpond/touchable'
+
 import {upperFirst} from 'lodash'
 
 interface ContextMenuProps {

modules/datepicker/basepicker.tsx

@@ -1,15 +1,13 @@
 import * as React from 'react'
 import {Button} from 'react-native'
 
-import type {Moment} from 'moment-timezone'
-import moment from 'moment-timezone'
-
+import {BaseDatetimePickerProps} from './types'
 import {
 	DateTimePickerEvent,
 	default as DateTimePicker,
 } from '@react-native-community/datetimepicker'
-
-import {BaseDatetimePickerProps} from './types'
+import type {Moment} from 'moment-timezone'
+import moment from 'moment-timezone'
 
 const FORMATS = {
 	date: 'YYYY-MM-DD',

modules/datepicker/datepicker-android.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+
 import {BaseDateTimePicker} from './basepicker'
 import {AndroidDatetimePickerProps} from './types'
 

modules/datepicker/datepicker-ios.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import {StyleSheet} from 'react-native'
+
 import {BaseDateTimePicker} from './basepicker'
 import {IosDatetimePickerProps} from './types'
 

modules/datepicker/datepicker.ts

@@ -1,7 +1,7 @@
 import {Platform} from 'react-native'
 
-import {DatePicker as IosDatePicker} from './datepicker-ios'
 import {DatePicker as AndroidDatePicker} from './datepicker-android'
+import {DatePicker as IosDatePicker} from './datepicker-ios'
 
 export const DatePicker =
 	Platform.OS === 'ios' ? IosDatePicker : AndroidDatePicker

modules/datepicker/types.ts

@@ -1,10 +1,11 @@
 import * as React from 'react'
 import {StyleProp, ViewStyle} from 'react-native'
-import type {Moment} from 'moment-timezone'
+
 import type {
 	AndroidNativeProps,
 	IOSNativeProps,
 } from '@react-native-community/datetimepicker'
+import type {Moment} from 'moment-timezone'
 
 export interface BaseDatetimePickerProps {
 	// dep-specific

modules/event-list/__tests__/times.test.ts

@@ -1,8 +1,8 @@
-import {describe, expect, test} from '@jest/globals'
-
 import type {EventType} from '@frogpond/event-type'
-import moment from 'moment'
+
 import {detailTimes, times} from '../times'
+import {describe, expect, test} from '@jest/globals'
+import moment from 'moment'
 
 describe('allDay', () => {
 	function generateEvent(start: string, end: string): EventType {

modules/event-list/calendar-util.ts

@@ -1,6 +1,7 @@
 import {Share, ShareAction} from 'react-native'
 
 import type {EventType} from '@frogpond/event-type'
+
 import {detailTimes} from './times'
 
 export function shareEvent(event: EventType): Promise<ShareAction | void> {

modules/event-list/event-detail-android.tsx

@@ -1,17 +1,20 @@
 import * as React from 'react'
 import {ScrollView, StyleSheet, Text} from 'react-native'
+
+import {RouteProp, useRoute} from '@react-navigation/native'
+import {NativeStackNavigationOptions} from '@react-navigation/native-stack'
+
+import {AddToCalendar} from '@frogpond/add-to-device-calendar'
+import * as c from '@frogpond/colors'
+import {EventType} from '@frogpond/event-type'
+import {ListFooter} from '@frogpond/lists'
 import {openUrl} from '@frogpond/open-url'
 import {Card} from '@frogpond/silly-card'
-import * as c from '@frogpond/colors'
 import {ButtonCell} from '@frogpond/tableview/cells'
-import {getTimes} from './calendar-util'
-import {AddToCalendar} from '@frogpond/add-to-device-calendar'
-import {ListFooter} from '@frogpond/lists'
-import {RouteProp, useRoute} from '@react-navigation/native'
-import {NativeStackNavigationOptions} from '@react-navigation/native-stack'
+
 import {RootStackParamList} from '../../source/navigation/types'
+import {getTimes} from './calendar-util'
 import {NavigationKey} from './event-detail-base'
-import {EventType} from '@frogpond/event-type'
 
 const styles = StyleSheet.create({
 	name: {

modules/event-list/event-detail-ios.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react'
 import {ScrollView} from 'react-native'
+
+import {RouteProp, useRoute} from '@react-navigation/native'
+import {NativeStackNavigationOptions} from '@react-navigation/native-stack'
+
+import {AddToCalendar} from '@frogpond/add-to-device-calendar'
+import {ListFooter} from '@frogpond/lists'
+import {ShareButton} from '@frogpond/navigation-buttons'
 import {Section, TableView} from '@frogpond/tableview'
 import {ButtonCell, SelectableCell} from '@frogpond/tableview/cells'
-import {ShareButton} from '@frogpond/navigation-buttons'
-import {ListFooter} from '@frogpond/lists'
-import {getTimes, shareEvent} from './calendar-util'
-import {AddToCalendar} from '@frogpond/add-to-device-calendar'
-import {RouteProp, useRoute} from '@react-navigation/native'
+
 import {RootStackParamList} from '../../source/navigation/types'
-import {NativeStackNavigationOptions} from '@react-navigation/native-stack'
+import {getTimes, shareEvent} from './calendar-util'
 import {NavigationKey} from './event-detail-base'
 
 function MaybeSection({header, content}: {header: string; content: string}) {

modules/event-list/event-detail.tsx

@@ -1,14 +1,15 @@
 import {Platform} from 'react-native'
 
-import {
-	EventDetail as IosEventDetail,
-	NavigationOptions as IOSDetailNavigationOptions,
-} from './event-detail-ios'
+import {EventType} from '@frogpond/event-type'
+
 import {
 	EventDetail as AndroidEventDetail,
 	NavigationOptions as AndroidDetailNavigationOptions,
 } from './event-detail-android'
-import {EventType} from '@frogpond/event-type'
+import {
+	EventDetail as IosEventDetail,
+	NavigationOptions as IOSDetailNavigationOptions,
+} from './event-detail-ios'
 import {PoweredBy} from './types'
 
 export const EventDetailNavigationOptions =

modules/event-list/event-list.tsx

@@ -1,15 +1,18 @@
 import * as React from 'react'
-import {StyleSheet, SectionList} from 'react-native'
+import {SectionList, StyleSheet} from 'react-native'
+
+import {useNavigation} from '@react-navigation/native'
+
 import * as c from '@frogpond/colors'
-import toPairs from 'lodash/toPairs'
 import type {EventType} from '@frogpond/event-type'
-import groupBy from 'lodash/groupBy'
-import type {Moment} from 'moment-timezone'
 import {FullWidthSeparator, ListSectionHeader} from '@frogpond/lists'
 import {NoticeView} from '@frogpond/notice'
+
 import EventRow from './event-row'
-import {useNavigation} from '@react-navigation/native'
 import {PoweredBy} from './types'
+import groupBy from 'lodash/groupBy'
+import toPairs from 'lodash/toPairs'
+import type {Moment} from 'moment-timezone'
 
 type Props = {
 	detailView?: string