Merge pull request 'Automatically organize imports' (#83) from ivan/automatically-organize-imports into master

Reviewed-on: railbird/rn-playground#83

.gitea/workflows/android.yaml

@@ -0,0 +1,11 @@
+on:
+  push:
+    branches:
+      - master
+jobs:
+  build:
+    name: Install
+    runs-on: nixos-x86_64-linux
+    steps:
+      - name: android-build
+        run: nix develop --impure --command bash -c 'export GRADLE_USER_HOME=$PWD; export HOME=$PWD; cd android; ./gradlew assembleDebug'

.gitea/workflows/tests.yaml

@@ -1,7 +1,6 @@
 name: Tests
 on:
   pull_request:
-
 env:
   NIXPKGS_ALLOW_UNFREE: 1
 
@@ -19,8 +18,10 @@ jobs:
         run: nix develop --impure --command bash -c 'export HOME=$PWD; yarn config set link-folder . && yarn install'
       - name: lint
         run: nix develop --impure --command bash -c 'export HOME=$PWD; yarn run lint'
+      - name: typecheck react-native-vision-camera
+        run: nix develop --impure --command bash -c 'export HOME=$PWD; cd ./react-native-vision-camera/package; yarn install && tsc'
       - name: typecheck
-        run: nix develop --impure --command bash -c 'export HOME=$PWD; yarn tsc --noEmit'
+        run: nix develop --impure --command bash -c 'export HOME=$PWD; yarn tsc'
       - name: prettier
         run: nix develop --impure --command bash -c 'export HOME=$PWD; prettier . --check'
       - name: test

App.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import AppNavigator from "./navigation/app-navigator";
-import { ClientProvider, useAuthHeader } from "./graphql/client";
 import { DEV_USER_ID } from "@env";
+import React from "react";
+import { ClientProvider, useAuthHeader } from "./graphql/client";
+import AppNavigator from "./navigation/app-navigator";
 
 const SetAuthHeaderBasedOnEnv = () => {
 	const { setAuthHeader } = useAuthHeader();

component/charts/bar-graph/bar-graph.tsx

@@ -1,16 +1,16 @@
-import React from "react";
 import * as scale from "d3-scale";
+import React from "react";
 import { View } from "react-native";
 import { BarChart, XAxis, YAxis } from "react-native-svg-charts";
 
-import { useGraphData } from "../use-graph-data";
 import { GraphData, YAxisProps } from "../graph-types";
+import { useGraphData } from "../use-graph-data";
 
-import { CustomBars } from "../custom-bars";
+import ChartLabel from "../chart-label/chart-label";
-import { CustomGrid } from "../custom-grid";
 import { graphStyles } from "../chart-styles";
 import ChartView from "../chart-view";
-import ChartLabel from "../chart-label/chart-label";
+import { CustomBars } from "../custom-bars";
+import { CustomGrid } from "../custom-grid";
 
 interface Props {
 	data: GraphData;

component/charts/custom-bar-utils.ts

@@ -1,6 +1,6 @@
 import { path as d3 } from "d3-path";
 
-import { ScaleLinearType, ScaleBandType } from "./graph-types";
+import { ScaleBandType, ScaleLinearType } from "./graph-types";
 
 type BarCalculationProps = {
 	scaleX: ScaleBandType;

component/charts/custom-bars.tsx

@@ -1,8 +1,8 @@
 import { Svg } from "react-native-svg";
 
 import { Bar } from "./bar";
-import { ScaleBandType, ScaleLinearType } from "./graph-types";
 import { calculateBarWidth } from "./custom-bar-utils";
+import { ScaleBandType, ScaleLinearType } from "./graph-types";
 
 export interface CombinedData {
 	data: { value: number }[];

component/charts/line-graph/line-graph.tsx

@@ -1,13 +1,13 @@
-import React from "react";
 import * as shape from "d3-shape";
+import React from "react";
 import { View } from "react-native";
 import { LineChart, XAxis, YAxis } from "react-native-svg-charts";
 
-import { useGraphData } from "../use-graph-data";
-import { CustomGrid } from "../custom-grid";
 import { graphStyles } from "../chart-styles";
 import ChartView from "../chart-view";
+import { CustomGrid } from "../custom-grid";
 import { CommonProps } from "../graph-types";
+import { useGraphData } from "../use-graph-data";
 
 // TODO: separate PR will update useGraphData to take into account useCommonScale
 // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars

component/charts/use-graph-data.ts

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 
-import { convertToGraphData } from "./graph-utils";
 import { chartDefaults } from "./graph-config";
 import { GraphData, GraphProps, XValue, YAxisData } from "./graph-types";
+import { convertToGraphData } from "./graph-utils";
 
 interface useGraphDataInterface {
 	xValues: Array<XValue>;

component/shot.tsx

@@ -1,6 +1,6 @@
+import { GET_SHOTS } from "../graphql/query";
 import DisplayShots from "./display-shot";
 import withQueryHandling from "./with-query-handling";
-import { GET_SHOTS } from "../graphql/query";
 
 const ShotsContainer = withQueryHandling({
 	WrappedComponent: DisplayShots,

component/video/camera.tsx

@@ -1,19 +1,18 @@
+import { useIsFocused } from "@react-navigation/native";
 import React, { useCallback, useRef, useState } from "react";
 import { Button, StyleSheet, Text, View } from "react-native";
 import {
 	Camera,
-	useCameraPermission,
-	useCameraDevice,
-	useCameraFormat,
-	PhotoFile,
-	VideoFile,
 	CameraRuntimeError,
 	Orientation,
-	// @ts-ignore
+	PhotoFile,
+	VideoFile,
+	useCameraDevice,
+	useCameraFormat,
+	useCameraPermission,
 } from "react-native-vision-camera";
 import { RecordingButton } from "./capture-button";
 import { useIsForeground } from "./is-foreground";
-import { useIsFocused } from "@react-navigation/native";
 
 export default function CameraScreen({
 	route,
@@ -92,6 +91,7 @@ export default function CameraScreen({
 					format={format}
 					onInitialized={onInitialized}
 					onError={onError}
+					// @ts-ignore
 					onVideoChunkReady={onVideoChunkReady}
 					video={true}
 					orientation={orientation} // TODO: #60

component/video/capture-button.tsx

@@ -1,12 +1,12 @@
+import { CameraRoll } from "@react-native-camera-roll/camera-roll";
 import React, { useCallback, useRef, useState } from "react";
 import {
-	TouchableOpacity,
-	StyleSheet,
-	View,
 	StyleProp,
+	StyleSheet,
+	TouchableOpacity,
+	View,
 	ViewStyle,
 } from "react-native";
-import { CameraRoll } from "@react-native-camera-roll/camera-roll";
 // @ts-ignore
 import { Camera } from "react-native-vision-camera/lib/typescript/Camera";
 // @ts-ignore

component/video/is-foreground.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import { AppState, AppStateStatus } from "react-native";
 
 export const useIsForeground = (): boolean => {

component/with-query-handling.tsx

@@ -1,5 +1,5 @@
+import { DocumentNode, OperationVariables, useQuery } from "@apollo/client";
 import React from "react";
-import { useQuery, DocumentNode, OperationVariables } from "@apollo/client";
 import { Text } from "react-native";
 /**
  * A higher-order component that provides loading and error handling for GraphQL queries.

graphql/client.tsx

@@ -1,19 +1,19 @@
+import {
+	ApolloClient,
+	ApolloLink,
+	ApolloProvider,
+	HttpLink,
+	InMemoryCache,
+	from,
+} from "@apollo/client";
+import { API_URI } from "@env";
 import React, {
 	ReactNode,
 	createContext,
 	useContext,
-	useState,
 	useMemo,
+	useState,
 } from "react";
-import {
-	ApolloClient,
-	ApolloLink,
-	InMemoryCache,
-	ApolloProvider,
-	HttpLink,
-	from,
-} from "@apollo/client";
-import { API_URI } from "@env";
 
 type Props = {
 	children: ReactNode;

navigation/app-navigator.tsx

@@ -1,13 +1,13 @@
-import { useColorScheme } from "react-native";
 import {
-	NavigationContainer,
 	DarkTheme,
 	DefaultTheme,
+	NavigationContainer,
 } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { useColorScheme } from "react-native";
 
-import Tabs from "./tab-navigator";
 import Login from "../screens/login";
+import Tabs from "./tab-navigator";
 
 const Stack = createNativeStackNavigator();
 

navigation/tab-navigator.tsx

@@ -1,8 +1,8 @@
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import { Image } from "react-native";
 import CameraScreen from "../component/video/camera";
 import Session from "../screens/session";
-import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import RecordScreen from "../screens/video-stack/record";
 
 // TODO: add ts support for assets folder to use imports

package.json

@@ -71,5 +71,10 @@
 		"prettier-plugin-organize-imports": "^3.2.4",
 		"typescript": "^5.3.3"
 	},
-	"private": true
+	"private": true,
+	"prettier": {
+		"plugins": [
+			"prettier-plugin-organize-imports"
+		]
+	}
 }

react-native-vision-camera

@@ -1 +1 @@
-Subproject commit 0e05fc314fb759ec0944bf09c07aba9ad753fc2b
+Subproject commit 1312c5be53fdf1912922a1412642e48200cff0aa

screens/login.tsx

@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from "react";
+import auth, { FirebaseAuthTypes } from "@react-native-firebase/auth";
+import React, { useEffect, useState } from "react";
 import {
 	Alert,
 	Button,
-	View,
+	Keyboard,
 	Text,
 	TextInput,
 	TouchableWithoutFeedback,
-	Keyboard,
+	View,
 } from "react-native";
-import auth, { FirebaseAuthTypes } from "@react-native-firebase/auth";
 
 // This code is beginning of Auth Implementation - actual implementation will differ and involve more UI
 // Does not have a restart or proper handling of code confirmation, should only be used for obtaining token/testing

screens/session.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import BarGraph from "../component/charts/bar-graph/bar-graph";
 import { graph_data_two_measures } from "../mock/charts/mock-data";
 

screens/video-stack/record.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useState } from "react";
 import {
-	View,
-	TextInput,
-	TouchableWithoutFeedback,
-	Text,
-	TouchableOpacity,
 	Keyboard,
+	Text,
+	TextInput,
+	TouchableOpacity,
+	TouchableWithoutFeedback,
+	View,
 } from "react-native";
 import DropDownPicker from "react-native-dropdown-picker";
 import { recordStyles as styles } from "./styles";

test/component/bar-graph.test.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { render } from "@testing-library/react-native";
+import React from "react";
 import BarGraph from "../../component/charts/bar-graph/bar-graph";
 import { graph_data_two_measures } from "../../mock/charts/mock-data";
 

test/component/chart-label.test.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { render } from "@testing-library/react-native";
 import "@testing-library/jest-native/extend-expect";
+import { render } from "@testing-library/react-native";
+import React from "react";
 
 import ChartLabel from "../../component/charts/chart-label/chart-label";
 

test/component/chart-view.test.tsx

@@ -1,7 +1,7 @@
+import "@testing-library/jest-native/extend-expect";
+import { render } from "@testing-library/react-native";
 import React from "react";
 import { Text } from "react-native";
-import { render } from "@testing-library/react-native";
-import "@testing-library/jest-native/extend-expect";
 
 import ChartView from "../../component/charts/chart-view";
 

test/component/custom-bars.test.tsx

@@ -1,13 +1,13 @@
-import React from "react";
-import { render } from "@testing-library/react-native";
 import "@testing-library/jest-native/extend-expect";
+import { render } from "@testing-library/react-native";
 import * as scale from "d3-scale";
+import React from "react";
 
-import { CustomBars } from "../../component/charts/custom-bars";
 import {
 	calculateBarOrigin,
 	drawBarPath,
 } from "../../component/charts/custom-bar-utils";
+import { CustomBars } from "../../component/charts/custom-bars";
 
 const mockYScaleFunction = scale.scaleLinear();
 const mockXScaleFunction = scale.scaleBand();

test/component/line-graph.test.tsx

@@ -1,5 +1,5 @@
-import React from "react";
 import { render } from "@testing-library/react-native";
+import React from "react";
 import LineGraph from "../../component/charts/line-graph/line-graph";
 import { line_chart_two_y_data } from "../../mock/charts/mock-data";
 

test/component/use-graph-data.test.tsx

@@ -1,6 +1,6 @@
 import { renderHook } from "@testing-library/react-native";
-import { useGraphData } from "../../component/charts/use-graph-data";
 import { GraphData, GraphProps } from "../../component/charts/graph-types";
+import { useGraphData } from "../../component/charts/use-graph-data";
 
 describe("useGraphData", () => {
 	it("should return correctly processed data from convertToGraphData", () => {

test/component/with-query-handling.test.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import { render, cleanup, waitFor } from "@testing-library/react-native";
-import "@testing-library/jest-native/extend-expect";
 import { gql, useQuery } from "@apollo/client";
-import withQueryHandling from "../../component/with-query-handling";
+import "@testing-library/jest-native/extend-expect";
+import { cleanup, render, waitFor } from "@testing-library/react-native";
+import React from "react";
 import { Text } from "react-native";
+import withQueryHandling from "../../component/with-query-handling";
 
 jest.mock("@apollo/client", () => ({
 	...jest.requireActual("@apollo/client"),

tsconfig.json

@@ -1,5 +1,15 @@
 {
 	"include": ["."],
 	"exclude": ["node_modules", "./react-native-vision-camera/package"],
-	"extends": ["expo/tsconfig.base"]
+	"extends": ["expo/tsconfig.base"],
+	"compilerOptions": {
+		"allowJs": false,
+		"esModuleInterop": true,
+		"moduleResolution": "node",
+		"outDir": "lib",
+		"baseUrl": ".",
+		"paths": {
+			"react-native-vision-camera": ["./react-native-vision-camera/package/lib"]
+		}
+	}
 }