Merge pull request #97 from flexn-io/chore/dependency-require-cycles

Chore: Add types, fix linting issues, dead code and other improvements
flexn-io · Jun 12, 2023 · bd892a6 · bd892a6
2 parents 3e01126 + d6608f3
commit bd892a6
Show file tree

Hide file tree

Showing 69 changed files with 1,161 additions and 1,308 deletions.
diff --git a/packages/app-harness/src/components/Button/index.tsx b/packages/app-harness/src/components/Button/index.tsx
@@ -56,14 +56,12 @@ const Button = ({
     accessible,
     accessibilityLabel,
     onPress,
-    activeOpacity,
     focusContext,
     focusOptions,
 }: ButtonProps) => (
     <Pressable
         style={[styles.button, style]}
         onPress={onPress}
-        activeOpacity={activeOpacity ?? 0.2}
         testID={testID}
         accessible={accessible}
         accessibilityLabel={accessibilityLabel}

diff --git a/packages/app-harness/src/screens/directionalFocus.tsx b/packages/app-harness/src/screens/directionalFocus.tsx
@@ -6,18 +6,6 @@ import Screen from './screen';
 import { Button } from '../components/Button';
 import { Ratio } from '../utils';
 
-const border = {
-    type: 'border',
-    focus: {
-        borderWidth: 5,
-        borderColor: 'yellow',
-    },
-    blur: {
-        borderWidth: 4,
-        borderColor: '#FFFFFF',
-    },
-};
-
 const { height } = Dimensions.get('screen');
 
 const kittyNames = ['Abby', 'Angel', 'Annie', 'Baby', 'Bailey', 'Bandit'];
@@ -47,7 +35,15 @@ const DirectionalFocus = () => {
             <Pressable
                 style={styles.packshot}
                 focusRepeatContext={focusRepeatContext}
-                focusOptions={{ animatorOptions: border }}
+                focusOptions={{
+                    animator: {
+                        type: 'border',
+                        focus: {
+                            borderWidth: 5,
+                            borderColor: 'yellow',
+                        },
+                    },
+                }}
             >
                 <Image source={{ uri: item.backgroundImage }} style={styles.image} />
             </Pressable>

diff --git a/packages/app-harness/src/screens/grid.tsx b/packages/app-harness/src/screens/grid.tsx
@@ -4,25 +4,6 @@ import { View, FlashList, Pressable, Image, CreateListRenderItemInfo } from '@fl
 import Screen from './screen';
 import { Ratio } from '../utils';
 
-// const border = {
-//     type: 'border',
-//     focus: {
-//         borderWidth: 5,
-//         borderColor: 'yellow',
-//     },
-//     blur: {
-//         borderWidth: 4,
-//         borderColor: '#FFFFFF',
-//     },
-// };
-
-const scale = {
-    type: 'scale',
-    focus: {
-        scale: 1.4,
-    },
-};
-
 const kittyNames = ['Abby', 'Angel', 'Annie', 'Baby', 'Bailey', 'Bandit'];
 
 function interval(min = 0, max = kittyNames.length - 1) {
@@ -50,7 +31,14 @@ const Grid = () => {
             <Pressable
                 style={styles.packshot}
                 focusRepeatContext={focusRepeatContext}
-                focusOptions={{ animatorOptions: scale }}
+                focusOptions={{
+                    animator: {
+                        type: 'scale',
+                        focus: {
+                            scale: 1.4,
+                        },
+                    },
+                }}
             >
                 <Image source={{ uri: item.backgroundImage }} style={styles.image} />
             </Pressable>

diff --git a/packages/app-harness/src/screens/list.tsx b/packages/app-harness/src/screens/list.tsx
@@ -4,18 +4,6 @@ import { View, FlashList, Pressable, Image, ScrollView, CreateListRenderItemInfo
 import Screen from './screen';
 import { Ratio } from '../utils';
 
-const border = {
-    type: 'border',
-    focus: {
-        borderWidth: Ratio(8),
-        borderColor: 'blue',
-    },
-    blur: {
-        borderWidth: Ratio(4),
-        borderColor: '#FFFFFF',
-    },
-};
-
 const kittyNames = ['Abby', 'Angel', 'Annie', 'Baby', 'Bailey', 'Bandit'];
 
 function interval(min = 0, max = kittyNames.length - 1) {
@@ -43,7 +31,15 @@ const Row = () => {
             <Pressable
                 style={styles.packshot}
                 focusRepeatContext={focusRepeatContext}
-                focusOptions={{ animatorOptions: border }}
+                focusOptions={{
+                    animator: {
+                        type: 'border',
+                        focus: {
+                            borderWidth: Ratio(8),
+                            borderColor: 'blue',
+                        },
+                    },
+                }}
             >
                 <Image source={{ uri: item.backgroundImage }} style={styles.image} />
             </Pressable>

diff --git a/packages/app-harness/src/screens/overflow.tsx b/packages/app-harness/src/screens/overflow.tsx
@@ -15,9 +15,7 @@ const Overflow = () => {
         <View style={{ backgroundColor: '#222222', flex: 1 }}>
             <Screen
                 style={{ backgroundColor: '#222222', position: 'absolute' }}
-                group="layer1"
-                focusOptions={{ nextFocusRight: ['layer2'], focusKey: 'layer1' }}
-                stealFocus={false}
+                focusOptions={{ nextFocusRight: ['layer2'], focusKey: 'layer1', group: 'layer1', stealFocus: false }}
             >
                 <View style={{ position: 'absolute' }}>
                     {layer1Buttons.map((_, i) => (
@@ -32,9 +30,7 @@ const Overflow = () => {
             </Screen>
             <Screen
                 style={{ backgroundColor: '#222222', position: 'absolute' }}
-                group="layer2"
-                focusOptions={{ nextFocusLeft: ['layer1'], focusKey: 'layer2' }}
-                stealFocus={false}
+                focusOptions={{ nextFocusLeft: ['layer1'], focusKey: 'layer2', group: 'layer2', stealFocus: false }}
             >
                 <View style={{ position: 'absolute' }}>
                     {layer2Buttons.map((_, i) => (
@@ -47,12 +43,7 @@ const Overflow = () => {
                     ))}
                 </View>
             </Screen>
-            <Screen
-                style={{ backgroundColor: '#222222', position: 'absolute' }}
-                stealFocus
-                // group="layer2"
-                // focusOptions={{ nextFocusLeft: ['layer1'], focusKey: 'layer2' }}
-            >
+            <Screen style={{ backgroundColor: '#222222', position: 'absolute' }} focusOptions={{ stealFocus: false }}>
                 <View style={{ position: 'absolute' }}>
                     {layer3Buttons.map((_, i) => (
                         <Button

diff --git a/packages/app-harness/src/screens/pressableAnimations.tsx b/packages/app-harness/src/screens/pressableAnimations.tsx
@@ -1,68 +1,76 @@
 import React from 'react';
 import { StyleSheet } from 'react-native';
-import { Text, View, Pressable } from '@flexn/create';
+import {
+    Text,
+    View,
+    Pressable,
+    AnimatorBackground,
+    AnimatorBorder,
+    AnimatorScale,
+    AnimatorScaleWithBorder,
+} from '@flexn/create';
 import Screen from './screen';
 import { Ratio } from '../utils';
 
-const scale = {
+const scale: AnimatorScale = {
     type: 'scale',
     focus: {
         scale: 1.2,
     },
-    blur: {
-        scale: 1,
-    },
+    // blur: {
+    //     scale: 1,
+    // },
     // duration: 150,
 };
 
-const border = {
+const border: AnimatorBorder = {
     type: 'border',
     focus: {
         borderWidth: 5,
         borderColor: 'yellow',
     },
-    blur: {
-        borderWidth: 1,
-        borderColor: '#FFFFFF',
-    },
+    // blur: {
+    //     borderWidth: 1,
+    //     borderColor: '#FFFFFF',
+    // },
 };
 
-const bgColor = {
+const bgColor: AnimatorBackground = {
     type: 'background',
     focus: {
         backgroundColor: '#FF0000',
     },
-    blur: {
-        backgroundColor: '#FFFFFF',
-    },
+    // blur: {
+    //     backgroundColor: '#FFFFFF',
+    // },
 };
-const scaleBorder = {
+const scaleBorder: AnimatorScaleWithBorder = {
     type: 'scale_with_border',
     focus: {
         scale: 1.5,
         borderWidth: 3,
         borderColor: 'yellow',
     },
-    blur: {
-        borderWidth: 1,
-        borderColor: '#FFFFFF',
-    },
+    // blur: {
+    //     borderWidth: 1,
+    //     borderColor: '#FFFFFF',
+    // },
 };
 
 const PressableAnimations = () => {
     return (
         <Screen style={{ backgroundColor: '#222222' }}>
             <View style={{ left: 50, top: 50 }}>
-                <Pressable style={styles.animation1} focusOptions={{ animatorOptions: scale }}>
+                <Pressable style={styles.animation1} focusOptions={{ animator: scale }}>
                     <Text>Animation scale</Text>
                 </Pressable>
-                <Pressable style={styles.animation2} focusOptions={{ animatorOptions: bgColor }}>
+                <Pressable style={styles.animation2} focusOptions={{ animator: bgColor }}>
                     <Text>Animation bg color</Text>
                 </Pressable>
-                <Pressable style={styles.animation2} focusOptions={{ animatorOptions: scaleBorder }}>
+                <Pressable style={styles.animation2} focusOptions={{ animator: scaleBorder }}>
                     <Text>Animation scale border</Text>
                 </Pressable>
-                <Pressable style={styles.animation2} focusOptions={{ animatorOptions: border }}>
+                <Pressable style={styles.animation2} focusOptions={{ animator: border }}>
                     <Text>Animation border</Text>
                 </Pressable>
             </View>

diff --git a/packages/app-harness/src/screens/row.tsx b/packages/app-harness/src/screens/row.tsx
@@ -4,25 +4,6 @@ import { View, FlashList, Pressable, Image, CreateListRenderItemInfo } from '@fl
 import Screen from './screen';
 import { Ratio } from '../utils';
 
-// const border = {
-//     type: 'border',
-//     focus: {
-//         borderWidth: 5,
-//         borderColor: 'yellow',
-//     },
-//     blur: {
-//         borderWidth: 4,
-//         borderColor: '#FFFFFF',
-//     },
-// };
-
-const scale = {
-    type: 'scale',
-    focus: {
-        scale: 1.4,
-    },
-};
-
 const kittyNames = ['Abby', 'Angel', 'Annie', 'Baby', 'Bailey', 'Bandit'];
 
 function interval(min = 0, max = kittyNames.length - 1) {
@@ -50,7 +31,14 @@ const Row = () => {
             <Pressable
                 style={styles.packshot}
                 focusRepeatContext={focusRepeatContext}
-                focusOptions={{ animatorOptions: scale }}
+                focusOptions={{
+                    animator: {
+                        type: 'scale',
+                        focus: {
+                            scale: 1.4,
+                        },
+                    },
+                }}
             >
                 <Image source={{ uri: item.backgroundImage }} style={styles.image} />
             </Pressable>

diff --git a/packages/app-harness/src/screens/screen.tsx b/packages/app-harness/src/screens/screen.tsx
@@ -2,7 +2,7 @@ import { Screen as FMScreen, ScreenProps, ScreenStates } from '@flexn/create';
 import { useFocusEffect } from '@react-navigation/native';
 import React, { useState } from 'react';
 
-const Screen = ({ children, stealFocus, focusOptions, style, ...props }: ScreenProps) => {
+const Screen = ({ children, focusOptions, style, ...props }: ScreenProps) => {
     const [screenState, setScreenState] = useState<ScreenStates>('foreground');
 
     useFocusEffect(
@@ -16,13 +16,7 @@ const Screen = ({ children, stealFocus, focusOptions, style, ...props }: ScreenP
     );
 
     return (
-        <FMScreen
-            screenState={screenState}
-            stealFocus={stealFocus}
-            focusOptions={focusOptions}
-            style={style}
-            {...props}
-        >
+        <FMScreen focusOptions={{ ...focusOptions, screenState }} style={style} {...props}>
             {children}
         </FMScreen>
     );

diff --git a/packages/app-harness/src/screens/scrollToTop.tsx b/packages/app-harness/src/screens/scrollToTop.tsx
@@ -12,10 +12,6 @@ const border = {
         borderWidth: 5,
         borderColor: 'yellow',
     },
-    blur: {
-        borderWidth: 4,
-        borderColor: 'grey',
-    },
 };
 
 const kittyNames = ['Abby', 'Angel', 'Annie', 'Baby', 'Bailey', 'Bandit'];
@@ -46,7 +42,15 @@ const ScrollToTop = () => {
             <Pressable
                 style={styles.packshot}
                 focusRepeatContext={focusRepeatContext}
-                focusOptions={{ animatorOptions: border }}
+                focusOptions={{
+                    animator: {
+                        type: 'border',
+                        focus: {
+                            borderColor: '#FF0000',
+                            borderWidth: 2,
+                        },
+                    },
+                }}
             >
                 <Image source={{ uri: item.backgroundImage }} style={styles.image} />
             </Pressable>
@@ -142,6 +146,8 @@ const styles = StyleSheet.create({
         // borderColor: 'red',
         // borderWidth: 1,
         margin: 5,
+        borderWidth: 4,
+        borderColor: 'grey',
         // borderWidth: 2,
     },
     image: {

diff --git a/packages/create/android/src/main/java/io/flexn/create/animators/AbstractAnimator.java b/packages/create/android/src/main/java/io/flexn/create/animators/AbstractAnimator.java
@@ -17,7 +17,6 @@ public AbstractAnimator(ReactViewGroup view, ReadableMap args) {
         this.mView = view;
         this.mArgs = args;
         this.AnimatorProperty2 = new AnimatorProperty(args);
-//        Log.d("HOW_MANY", "TIMESS_HERE");
     }
 
     public abstract void onFocus(boolean animated);

diff --git a/packages/create/src/components/App/index.native.tv.tsx b/packages/create/src/components/App/index.native.tv.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useRef } from 'react';
-import { View as RNView, ScrollView as RNScrollView, TouchableOpacity, findNodeHandle } from 'react-native';
+import { View as RNView, ScrollView as RNScrollView, TouchableOpacity, findNodeHandle, ViewProps } from 'react-native';
 import { isPlatformAndroidtv, isPlatformFiretv } from '@rnv/renative';
 import KeyHandler from '../../focusManager/service/keyHandler';
 
 const isAndroidBased = isPlatformAndroidtv || isPlatformFiretv;
 
-export default function App({ children, ...props }: { children: any }) {
+export default function App({ children, ...props }: ViewProps) {
     const focusTrapRef = useRef<TouchableOpacity>(null);
     useEffect(() => {
         const Handler = new KeyHandler();

diff --git a/packages/create/src/components/App/index.tsx b/packages/create/src/components/App/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { StyleProp, View, ViewStyle } from 'react-native';
+import { View, ViewProps } from 'react-native';
 
-export default function App({ children, style }: { children: React.ReactNode; style?: StyleProp<ViewStyle> }) {
-    return <View style={style}>{children}</View>;
+export default function App(props: ViewProps) {
+    return <View {...props} />;
 }