feat: Update typescript code for library (#1)

Author: MinhOmega

.eslintrc.js

@@ -1,116 +1,60 @@
 module.exports = {
-  env: {
-    es6: true,
-    node: true,
-    jest: true,
-  },
-  extends: [
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-    'plugin:prettier/recommended',
-    'prettier/react',
-    'prettier/@typescript-eslint',
-  ],
-
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    createDefaultProgram: true,
-    ecmaFeatures: {
-      jsx: true,
-      impliedStrict: true,
-    },
-    ecmaVersion: 2018,
-    sourceType: 'module',
-    project: './tsconfig.json',
-  },
-  // plugins: ['react', 'react-native'],
-
-  plugins: ['react', 'react-hooks', 'react-native', 'prettier'],
-
+  root: true,
+  extends: '@react-native-community',
+  plugins: ['react-hooks'],
   rules: {
-    indent: ['error', 2, { SwitchCase: 1 }],
-    quotes: ['error', 'single', { avoidEscape: true }],
-    '@typescript-eslint/no-var-requires': 0,
-    'react-native/no-unused-styles': 2,
-    'react-native/split-platform-components': 2,
-    'react-native/no-inline-styles': 2,
-    'react-native/no-color-literals': 2,
-    'react-native/no-single-element-style-arrays': 2,
-    'global-require': 0,
-    'linebreak-style': [2, 'unix'],
-    'prefer-const': 0,
-    'no-console': [
-      'warn',
+    semi: ['error', 'never'],
+    quotes: ['error', 'single'],
+    radix: 0,
+    'max-len': [
+      'error',
       {
-        allow: ['warn', 'error', 'log', 'info', 'disableYellowBox'],
-      },
+        code: 120,
+        tabWidth: 2,
+        comments: 100,
+        ignoreUrls: true,
+        ignoreRegExpLiterals: true,
+        ignorePattern: '^import\\W.*'
+      }
     ],
-    'no-param-reassign': 0,
-    '@typescript-eslint/explicit-module-boundary-types': 'off',
-    'no-restricted-globals': 0,
-    'no-unused-vars': 0,
-    'no-use-before-define': 0,
-    'no-underscore-dangle': 0,
-    'no-useless-constructor': 0,
-    'no-unused-expressions': 0,
-    'no-plusplus': 0,
-    'no-nested-ternary': 0,
-    'lines-between-class-members': [
-      1,
-      'always',
-      {
-        exceptAfterSingleLine: true,
-      },
-    ],
-    'prefer-destructuring': [
-      2,
-      {
-        array: false,
-        object: true,
-      },
-    ],
-    'max-classes-per-file': 0,
-    'import/prefer-default-export': 0,
-    'react/prefer-stateless-function': 0,
-    'react/destructuring-assignment': 0,
-    'react/prop-types': 0,
-    'react/react-in-jsx-scope': 0,
-    'react/jsx-props-no-spreading': 0,
-    'react/jsx-filename-extension': [
-      2,
-      {
-        extensions: ['.jsx', '.tsx'],
-      },
-    ],
-    'jsx-a11y/accessible-emoji': 0,
-    'react/static-property-placement': 0,
-    '@typescript-eslint/explicit-member-accessibility': [2, { accessibility: 'no-public' }],
-    '@typescript-eslint/no-empty-interface': 1,
-    '@typescript-eslint/explicit-function-return-type': [
-      0,
-      {
-        allowExpressions: true,
-        allowTypedFunctionExpressions: true,
-      },
-    ],
-    '@typescript-eslint/no-explicit-any': 0,
-    '@typescript-eslint/no-use-before-define': [
-      2,
-      {
-        functions: true,
-        classes: true,
-        variables: false,
-      },
-    ],
-    '@typescript-eslint/no-unused-vars': [1, { args: 'none' }],
-    '@typescript-eslint/no-non-null-assertion': 0,
-    '@typescript-eslint/camelcase': 0,
-    '@typescript-eslint/ban-ts-ignore': 0,
-    '@typescript-eslint/no-empty-function': 'off',
-  },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
-};
+    curly: 'error',
+    'arrow-parens': ['error', 'always'],
+    'arrow-spacing': 'error',
+    'comma-dangle': ['error', 'never'],
+    'react/self-closing-comp': ['error'],
+    'no-mixed-spaces-and-tabs': 0,
+    'no-shadow': 0,
+    'no-unused-vars': ['error', { vars: 'local', args: 'after-used' }],
+    'no-duplicate-imports': 'error',
+    'no-var': 'error',
+    'no-const-assign': 'error',
+    'no-dupe-args': 'error',
+    'no-dupe-keys': 'error',
+    'no-duplicate-case': 'error',
+    'no-empty': 'error',
+    'no-sparse-arrays': 'error',
+    'no-multi-spaces': 'error',
+    'no-useless-escape': 'error',
+    'no-extra-boolean-cast': 'error',
+    'no-alert': 'error',
+    'block-scoped-var': 'error',
+    'dot-notation': 0,
+    'array-bracket-spacing': ['error', 'never'],
+    'prefer-arrow-callback': 'error',
+    'template-curly-spacing': 'error',
+    'default-case': 'error',
+    'block-spacing': 'error',
+    'brace-style': ['error', '1tbs', { allowSingleLine: true }],
+    'comma-style': 'error',
+    'computed-property-spacing': 'error',
+    'eol-last': 'error',
+    'func-call-spacing': ['error', 'never'],
+    'func-style': ['off', 'expression', { allowArrowFunctions: true }],
+    'key-spacing': ['error', { beforeColon: false }],
+    'keyword-spacing': ['error', { before: true }],
+    'jsx-quotes': ['error', 'prefer-single'],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'react-native/no-inline-styles': 'error'
+  }
+}

.gitignore

@@ -57,3 +57,5 @@ buck-out/
 
 # CocoaPods
 /ios/Pods/
+
+.vscode

.prettierrc.js

@@ -1,6 +1,16 @@
 module.exports = {
-  jsxBracketSameLine: true,
+  semi: false,
+  tabWidth: 2,
   singleQuote: true,
-  trailingComma: 'all',
-  printWidth: 100,
-};
+  bracketSpacing: true,
+  arrowParens: 'always',
+  jsxBracketSameLine: false,
+  insertPragma: false,
+  jsxSingleQuote: true,
+  printWidth: 120,
+  proseWrap: 'preserve',
+  quoteProps: 'as-needed',
+  requirePragma: false,
+  trailingComma: 'none',
+  useTabs: false
+}

App.tsx

@@ -8,104 +8,99 @@
  * @format
  */
 
-import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
+import React from 'react'
+import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View } from 'react-native'
 
 import {
   Colors,
   DebugInstructions,
   Header,
   LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+  ReloadInstructions
+} from 'react-native/Libraries/NewAppScreen'
 
 const Section: React.FC<{
-  title: string;
+  title: string
 }> = ({ children, title }) => {
-  const isDarkMode = useColorScheme() === 'dark';
+  const isDarkMode = useColorScheme() === 'dark'
   return (
     <View style={styles.sectionContainer}>
       <Text
         style={[
           styles.sectionTitle,
           {
-            color: isDarkMode ? Colors.white : Colors.black,
-          },
-        ]}>
+            color: isDarkMode ? Colors.white : Colors.black
+          }
+        ]}
+      >
         {title}
       </Text>
       <Text
         style={[
           styles.sectionDescription,
           {
-            color: isDarkMode ? Colors.light : Colors.dark,
-          },
-        ]}>
+            color: isDarkMode ? Colors.light : Colors.dark
+          }
+        ]}
+      >
         {children}
       </Text>
     </View>
-  );
-};
+  )
+}
 
 const App = () => {
-  const isDarkMode = useColorScheme() === 'dark';
+  const isDarkMode = useColorScheme() === 'dark'
 
   const backgroundStyle = {
-    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
-  };
+    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter
+  }
 
   return (
     <SafeAreaView style={backgroundStyle}>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <ScrollView contentInsetAdjustmentBehavior="automatic" style={backgroundStyle}>
+      <ScrollView contentInsetAdjustmentBehavior='automatic' style={backgroundStyle}>
         <Header />
         <View
           style={{
-            backgroundColor: isDarkMode ? Colors.black : Colors.white,
-          }}>
-          <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.tsx</Text> to change this screen and then come
-            back to see your edits.
+            backgroundColor: isDarkMode ? Colors.black : Colors.white
+          }}
+        >
+          <Section title='Step One'>
+            Edit <Text style={styles.highlight}>App.tsx</Text> to change this screen and then come back to see your
+            edits.
           </Section>
-          <Section title="See Your Changes">
+          <Section title='See Your Changes'>
             <ReloadInstructions />
           </Section>
-          <Section title="Debug">
+          <Section title='Debug'>
             <DebugInstructions />
           </Section>
-          <Section title="Learn More">Read the docs to discover what to do next:</Section>
+          <Section title='Learn More'>Read the docs to discover what to do next:</Section>
           <LearnMoreLinks />
         </View>
       </ScrollView>
     </SafeAreaView>
-  );
-};
+  )
+}
 
 const styles = StyleSheet.create({
   sectionContainer: {
     marginTop: 32,
-    paddingHorizontal: 24,
+    paddingHorizontal: 24
   },
   sectionTitle: {
     fontSize: 24,
-    fontWeight: '600',
+    fontWeight: '600'
   },
   sectionDescription: {
     marginTop: 8,
     fontSize: 18,
-    fontWeight: '400',
+    fontWeight: '400'
   },
   highlight: {
-    fontWeight: '700',
-  },
-});
+    fontWeight: '700'
+  }
+})
 
-export default App;
+export default App