Add prettier with ordered imports

Author: cheeaun

.prettierrc

@@ -0,0 +1,21 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "importOrder": [
+    "^react(-native)?$",
+    "^@?react",
+    "^expo",
+    "<THIRD_PARTY_MODULES>",
+    "screens/",
+    "components/",
+    "hooks/",
+    "utils/",
+    "assets/",
+    "^[./]"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true,
+  "importOrderGroupNamespaceSpecifiers": true
+}

App.js

@@ -1,31 +1,33 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { LayoutAnimation, View } from 'react-native';
-import { StatusBar } from 'expo-status-bar';
+
+import { useAppState } from '@react-native-community/hooks';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import Constants from 'expo-constants';
-import { useAppState } from '@react-native-community/hooks';
-import * as Updates from 'expo-updates';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 import {
   GestureHandlerRootView,
   TouchableOpacity,
 } from 'react-native-gesture-handler';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+import * as Updates from 'expo-updates';
+import Constants from 'expo-constants';
+import { StatusBar } from 'expo-status-bar';
+
+import useStore from './hooks/useStore';
+import useTheme from './hooks/useTheme';
+import useViewportStore from './hooks/useViewportStore';
 
+import CommentsScreen from './screens/CommentsScreen';
+import DevTestScreen from './screens/DevTestScreen';
+import LogsScreen from './screens/LogsScreen';
+import SettingsScreen from './screens/SettingsScreen';
 import StoriesScreen from './screens/StoriesScreen';
 import StoryScreen from './screens/StoryScreen';
-import CommentsScreen from './screens/CommentsScreen';
 import UserScreen from './screens/UserScreen';
-import SettingsScreen from './screens/SettingsScreen';
-import LogsScreen from './screens/LogsScreen';
-import DevTestScreen from './screens/DevTestScreen';
 
 import Text from './components/Text';
 
-import useStore from './hooks/useStore';
-import useTheme from './hooks/useTheme';
-import useViewportStore from './hooks/useViewportStore';
-
 const BACKGROUND_BUFFER = 15 * 60 * 1000; // 15min
 
 const Stack = createNativeStackNavigator();

components/ActivityIndicator.jsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { ActivityIndicator, Animated } from 'react-native';
 
 export default function (props) {

components/Button.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { StyleSheet, Pressable } from 'react-native';
+import { Pressable, StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
   button: {

components/Comment.jsx

@@ -1,28 +1,31 @@
-import { useRef, useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import {
-  StyleSheet,
-  View,
-  Alert,
-  Pressable,
   ActionSheetIOS,
+  Alert,
   Animated,
+  Pressable,
+  StyleSheet,
+  View,
   findNodeHandle,
 } from 'react-native';
+
 import { useNavigation } from '@react-navigation/native';
-import * as Haptics from 'expo-haptics';
 import { TouchableOpacity } from 'react-native-gesture-handler';
-import format from 'date-fns/format';
 
-import Text from './Text';
-import HTMLView2 from './HTMLView2';
-import TimeAgo from './TimeAgo';
+import * as Haptics from 'expo-haptics';
+
+import format from 'date-fns/format';
 
 import useStore from '../hooks/useStore';
 import useTheme from '../hooks/useTheme';
 
 import openBrowser from '../utils/openBrowser';
 import openShare from '../utils/openShare';
 
+import HTMLView2 from './HTMLView2';
+import Text from './Text';
+import TimeAgo from './TimeAgo';
+
 const styles = StyleSheet.create({
   metadata: {
     flexDirection: 'row',

components/CommentContainer.jsx

@@ -1,19 +1,20 @@
-import { useState, useCallback } from 'react';
-import { StyleSheet, View, PlatformColor } from 'react-native';
+import { useCallback, useState } from 'react';
+import { PlatformColor, StyleSheet, View } from 'react-native';
+
 import { useNavigation } from '@react-navigation/native';
-import Svg, { Path } from 'react-native-svg';
 import { useFocusEffect } from '@react-navigation/native';
-
-import Text from './Text';
-import Button from './Button';
-import Comment from './Comment';
-import Separator from './Separator';
-import ReadableWidthContainer from './ReadableWidthContainer';
+import Svg, { Path } from 'react-native-svg';
 
 import useTheme from '../hooks/useTheme';
-import getHTMLText from '../utils/getHTMLText';
 
 import getCommentsMetadata from '../utils/getCommentsMetadata';
+import getHTMLText from '../utils/getHTMLText';
+
+import Button from './Button';
+import Comment from './Comment';
+import ReadableWidthContainer from './ReadableWidthContainer';
+import Separator from './Separator';
+import Text from './Text';
 
 const styles = StyleSheet.create({
   comment: {

components/CommentPage.jsx

@@ -1,8 +1,10 @@
 import { useState } from 'react';
 import { View } from 'react-native';
-import Text from './Text';
+
 import useTheme from '../hooks/useTheme';
 
+import Text from './Text';
+
 export default function CommentPage({ page }) {
   if (!page) return null;
   const { colors } = useTheme();

components/HTMLView.jsx

@@ -1,23 +1,24 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import {
+  DynamicColorIOS,
+  PlatformColor,
+  ScrollView,
   StyleSheet,
   View,
-  ScrollView,
-  PlatformColor,
-  DynamicColorIOS,
   useWindowDimensions,
 } from 'react-native';
-import { Parser } from 'htmlparser2';
-import { DomHandler } from 'domhandler';
-import urlRegexSafe from 'url-regex-safe';
+
 import * as entities from 'entities';
+import { DomHandler } from 'domhandler';
+import { Parser } from 'htmlparser2';
 import stripIndent from 'strip-indent';
-
-import Text from './Text';
+import urlRegexSafe from 'url-regex-safe';
 
 import openBrowser from '../utils/openBrowser';
 import openShare from '../utils/openShare';
 
+import Text from './Text';
+
 const baseFontSize = 15;
 const nodeStyles = StyleSheet.create({
   default: {

components/HTMLView2.jsx

@@ -1,25 +1,27 @@
 import { useState } from 'react';
 import {
+  DynamicColorIOS,
+  PlatformColor,
+  ScrollView,
   StyleSheet,
   View,
-  ScrollView,
-  PlatformColor,
-  DynamicColorIOS,
   useWindowDimensions,
 } from 'react-native';
+
 import { useNavigation } from '@react-navigation/native';
-import { parseFragment } from 'parse5';
-import urlRegexSafe from 'url-regex-safe';
+
 import * as entities from 'entities';
+import { parseFragment } from 'parse5';
 import stripIndent from 'strip-indent';
-
-import Text from './Text';
+import urlRegexSafe from 'url-regex-safe';
 
 import useStore from '../hooks/useStore';
 
 import openBrowser from '../utils/openBrowser';
 import openShare from '../utils/openShare';
 
+import Text from './Text';
+
 const baseFontSize = 15;
 const nodeStyles = StyleSheet.create({
   default: {

components/ListEmpty.jsx

@@ -3,8 +3,8 @@ import { View } from 'react-native';
 
 import useViewportStore from '../hooks/useViewportStore';
 
-import Text from './Text';
 import ActivityIndicator from './ActivityIndicator';
+import Text from './Text';
 
 export default function ({
   state = null, // loading, nada, error