upate

Author: flexbox

hackathon/spacecraft/.eslintrc.js

@@ -9,6 +9,7 @@ module.exports = {
     "plugin:react/recommended", // React rules
     "plugin:react/jsx-runtime", // Support for React 17 JSX
     "plugin:prettier/recommended", // Prettier recommended rules
+    "plugin:perfectionist/recommended-natural-legacy",
   ],
   overrides: [
     {
@@ -30,18 +31,18 @@ module.exports = {
     camelcase: "off", // Disable camelcase rule
     "perfectionist/sort-imports": "error", // Perfectionist import sorting
     "perfectionist/sort-interfaces": ["error"], // Perfectionist interfaces sorting
-    "perfectionist/sort-objects": ["error", { type: "alphabetical" }], // Perfectionist objects sorting
+    "perfectionist/sort-objects": ["error", { type: "natural" }], // Perfectionist objects sorting
     "prettier/prettier": [
       "warn",
       {
         usePrettierrc: true,
       },
     ],
+    "react/no-unescaped-entities": "off",
     "react-native/no-color-literals": 2, // Enforce color literals are not used
     "react-native/no-raw-text": 0, // Detect raw text outside of Text component
     "react-native/no-unused-styles": 2, // Detect unused StyleSheet rules
     "react-native/sort-styles": 2, // Enforce style definitions are sorted
-    "react/no-unescaped-entities": "off",
   },
   settings: {
     perfectionist: {

hackathon/spacecraft/App.tsx

@@ -1,12 +1,12 @@
-import React from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import Constants from "expo-constants";
+
 import { Provider as PaperProvider } from "react-native-paper";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import { Navigator } from "~/navigation/Navigator";
+import { AuthenticationProvider } from "~/context/Authentication";
 import { NetworkProvider } from "~/context/Network";
 import { useAppearanceTheme } from "~/hooks/useAppearanceTheme";
-import { AuthenticationProvider } from "~/context/Authentication";
+import { Navigator } from "~/navigation/Navigator";
 
 const queryClient = new QueryClient();
 

hackathon/spacecraft/api/types.d.ts

@@ -1,39 +1,39 @@
 export interface StarshipProps {
-  films?: [];
-  pilots?: [];
-  name: string;
-  url?: string;
-  MGLT?: string;
+  cargo_capacity?: string;
+  consumables?: string;
+  cost_in_credits?: string;
+  created?: string;
   crew?: string;
-  model: string;
   edited?: string;
+  films?: [];
+  hyperdrive_rating?: string;
   length?: string;
-  created?: string;
-  passengers?: string;
-  consumables?: string;
   manufacturer?: string;
-  cargo_capacity?: string;
-  starship_class?: string;
-  cost_in_credits?: string;
-  hyperdrive_rating?: string;
   max_atmosphering_speed?: string;
+  MGLT?: string;
+  model: string;
+  name: string;
+  passengers?: string;
+  pilots?: [];
+  starship_class?: string;
+  url?: string;
 }
 
 interface PeopleProps {
-  url: string;
-  name: string;
-  mass: string;
-  height: string;
-  gender: string;
-  edited: string;
-  films: string[];
+  birth_year: string;
   created: string;
+  edited: string;
   eye_color: string;
-  homeworld: string;
-  species: string[];
+  films: string[];
+  gender: string;
   hair_color: string;
+  height: string;
+  homeworld: string;
+  mass: string;
+  name: string;
   skin_color: string;
-  birth_year: string;
-  vehicles: string[];
+  species: string[];
   starships: string[];
+  url: string;
+  vehicles: string[];
 }

hackathon/spacecraft/metro.config.js

@@ -1,7 +1,7 @@
 // metro.config.js
-const path = require("path");
-const { getDefaultConfig } = require("expo/metro-config");
 const { generate } = require("@storybook/react-native/scripts/generate");
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
 
 generate({
   configPath: path.resolve(__dirname, "./.storybook"),

hackathon/spacecraft/src/components/Button.stories.tsx

@@ -8,61 +8,61 @@ export default {
 export const _Button = () => (
   <View style={{ flex: 1, justifyContent: "space-around", padding: 16 }}>
     <Button
-      onPress={() => Alert.alert("Pressed!")}
       mode="contained"
+      onPress={() => Alert.alert("Pressed!")}
     >
       contained
     </Button>
     <Button
-      onPress={() => Alert.alert("Pressed!")}
       mode="contained-tonal"
+      onPress={() => Alert.alert("Pressed!")}
     >
       contained-tonal
     </Button>
     <Button
-      onPress={() => Alert.alert("Pressed!")}
       mode="elevated"
+      onPress={() => Alert.alert("Pressed!")}
     >
       elevated
     </Button>
     <Button
-      onPress={() => Alert.alert("Pressed!")}
       mode="outlined"
+      onPress={() => Alert.alert("Pressed!")}
     >
       outlined
     </Button>
     <Button
-      onPress={() => Alert.alert("Pressed!")}
       mode="text"
+      onPress={() => Alert.alert("Pressed!")}
     >
       text
     </Button>
     <Button
-      onPress={() => Alert.alert("Pressed!")}
-      mode="text"
       icon="camera"
+      mode="text"
+      onPress={() => Alert.alert("Pressed!")}
     >
       <ActivityIndicator />
       text
     </Button>
     <Button
-      onPress={() => Alert.alert("Pressed!")}
-      mode="text"
       icon="arrow-u-up-left"
+      mode="text"
+      onPress={() => Alert.alert("Pressed!")}
     >
       text
     </Button>
     <Button
-      onPress={() => Alert.alert("Pressed!")}
-      mode="text"
       icon="backup-restore"
+      mode="text"
+      onPress={() => Alert.alert("Pressed!")}
     >
       text
     </Button>
     <Button
-      onPress={() => Alert.alert("Pressed!")}
-      mode="text"
       icon="battery-charging-medium"
+      mode="text"
+      onPress={() => Alert.alert("Pressed!")}
     >
       text
     </Button>
@@ -73,8 +73,8 @@ export const _ButtonSizes = () => (
   <View style={{ flex: 1, justifyContent: "space-around", padding: 16 }}>
     <Button onPress={() => Alert.alert("Pressed!")}>small</Button>
     <Button
-      onPress={() => Alert.alert("Pressed!")}
       compact={true}
+      onPress={() => Alert.alert("Pressed!")}
     >
       medium
     </Button>

hackathon/spacecraft/src/components/ButtonSupport.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import { Button } from "react-native-paper";
 import * as WebBrowser from "expo-web-browser";
 
+import { Button } from "react-native-paper";
+
 interface Props {
   mode?: "contained" | "text";
 }
@@ -15,8 +15,8 @@ export const ButtonSupport = ({ mode = "contained" }: Props) => {
 
   return (
     <Button
-      onPress={handleOpenGitHub}
       mode={mode}
+      onPress={handleOpenGitHub}
       style={{ marginBottom: 12 }}
     >
       Give my opinion

hackathon/spacecraft/src/components/FromInput.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { fireEvent, render, screen } from "@testing-library/react-native";
 
 import { FormInput } from "~/components/FromInput";
@@ -9,8 +8,8 @@ describe("FormInput", () => {
     render(
       <FormInput
         label="your-car"
-        value="tesla"
         onChangeText={mock}
+        value="tesla"
       />,
     );
     screen.getAllByText("your-car");

hackathon/spacecraft/src/components/FromInput.tsx

@@ -1,6 +1,5 @@
 import type { TextInputProps } from "react-native-paper";
 
-import React from "react";
 import { View } from "react-native";
 import { TextInput } from "react-native-paper";
 
@@ -13,10 +12,10 @@ export const FormInput = ({
   <View style={{ paddingVertical: 8 }}>
     <TextInput
       {...rest}
-      mode="outlined"
       label={label}
-      value={value}
+      mode="outlined"
       onChangeText={onChangeText}
+      value={value}
     />
   </View>
 );

hackathon/spacecraft/src/components/Header.test.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { render, screen } from "@testing-library/react-native";
 
 import { Header } from "./Header";

hackathon/spacecraft/src/components/Header.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import Constants from "expo-constants";
+
 import { StyleSheet, View } from "react-native";
 import { Text, useTheme } from "react-native-paper";
 
@@ -13,8 +13,8 @@ export const Header = ({ title }: HeaderProps) => {
   return (
     <View style={[styles.container, { backgroundColor: theme.colors.primary }]}>
       <Text
-        variant="headlineMedium"
         style={[styles.headerText, { color: theme.colors.background }]}
+        variant="headlineMedium"
       >
         {title}
       </Text>

hackathon/spacecraft/src/components/Image.tsx

@@ -2,11 +2,11 @@
 import type { ImageProps } from "react-native";
 import type { AnimatedProps } from "react-native-reanimated";
 
-import React from "react";
-import Animated from "react-native-reanimated";
-import { Image as RNImage } from "react-native";
 import { Image as ExpoImage } from "expo-image";
 
+import { Image as RNImage } from "react-native";
+import Animated from "react-native-reanimated";
+
 const AnimatedImage = Animated.createAnimatedComponent(RNImage);
 
 export const Image = (props: AnimatedProps<ImageProps>) => {

hackathon/spacecraft/src/components/Offline.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { ActivityIndicator, useTheme } from "react-native-paper";
 

hackathon/spacecraft/src/components/PeopleItem.tsx

@@ -1,9 +1,9 @@
 import type { PeopleProps } from "api/types";
 
-import React from "react";
-import { List } from "react-native-paper";
 import { useNavigation } from "@react-navigation/native";
 
+import { List } from "react-native-paper";
+
 import { Routes } from "~/navigation/Routes";
 
 interface PeopleItemProps {
@@ -12,28 +12,28 @@ interface PeopleItemProps {
 
 const GengerIcon = ({ gender, ...rest }: { gender: string }) => {
   switch (gender) {
-    case "male":
+    case "female":
       return (
         <List.Icon
           {...rest}
-          icon="human-male"
-          color="#3B82F6"
+          color="#EC4899"
+          icon="human-female"
         />
       );
-    case "female":
+    case "male":
       return (
         <List.Icon
           {...rest}
-          icon="human-female"
-          color="#EC4899"
+          color="#3B82F6"
+          icon="human-male"
         />
       );
     default:
       return (
         <List.Icon
           {...rest}
-          icon="robot"
           color="#9CA3AF"
+          icon="robot"
         />
       );
   }
@@ -49,21 +49,21 @@ export const PeopleItem = ({ people }: PeopleItemProps) => {
 
   return (
     <List.Item
-      title={people.name}
       description={`${starships.length} starships`}
       left={(props) => (
         <GengerIcon
           {...props}
           gender={gender}
         />
       )}
+      onPress={navigateToDetails}
       right={(props) => (
         <List.Icon
           {...props}
           icon="dots-horizontal"
         />
       )}
-      onPress={navigateToDetails}
+      title={people.name}
     />
   );
 };