chore: add @typescript-eslint/stylistic config and grammar fix in README.md (#711)

* chore: add @typescript-eslint/stylistic ESLint config and grammar fix in README.md

* chore: updated examples deps

* chore: updated deps

* reformatted files

* remove empty jsdoc comments

Author: taeh98

.eslintrc.yaml

@@ -10,6 +10,7 @@ extends:
   - airbnb/hooks
   - eslint:recommended
   - plugin:@typescript-eslint/recommended
+  - plugin:@typescript-eslint/stylistic
   - plugin:eslint-comments/recommended
   - plugin:import/errors
   - plugin:import/recommended
@@ -42,6 +43,10 @@ plugins:
   - react-hooks
   - react-native
 rules:
+  '@typescript-eslint/array-type':
+    - error
+    - default: 'generic'
+      readonly: 'generic'
   '@typescript-eslint/explicit-function-return-type': error
   '@typescript-eslint/explicit-module-boundary-types': error
   '@typescript-eslint/no-explicit-any':

README.md

@@ -77,7 +77,7 @@ export default function App() {
 
 You can find more examples in the `examples` subdirectory. This subdirectory is
 a working [Expo](https://github.com/expo/expo) project demonstrating this
-library. It shows how to use the library with class components as well as
+library. It shows how to use the library with class components as well as with
 function components, and in TypeScript as well as in JavaScript. Navigate into
 the `examples` subdirectory, run `npm install`, and then run `npx expo start` to
 see the examples working.

examples/App.tsx

@@ -66,11 +66,11 @@ const EXAMPLE_COMPONENT_ITEMS: Array<ItemType<ExampleComponent>> = [
 ];
 
 type Props = Record<string, never>;
-type State = {
+interface State {
   currentExample: ExampleComponent;
   examplePickerOpen: boolean;
   exampleComponents: Array<ItemType<ExampleComponent>>;
-};
+}
 
 export default class App extends React.Component<Props, State> {
   constructor(props: Readonly<Props>) {

examples/example-src-files/typescript-class-example.tsx

@@ -2,15 +2,15 @@ import React, { Component } from 'react';
 import { Button, Text, View } from 'react-native';
 import DropDownPicker, { ItemType } from 'react-native-dropdown-picker';
 
-type Props = {
+interface Props {
   multiple: boolean;
-};
-type State = {
+}
+interface State {
   open: boolean;
   singleValue: string | null;
-  multiValue: string[] | null;
+  multiValue: Array<string> | null;
   items: Array<ItemType<string>>;
-};
+}
 
 export default class TypescriptClassExample extends Component<Props, State> {
   constructor(props: Readonly<Props>) {

examples/example-src-files/typescript-function-example.tsx

@@ -12,7 +12,7 @@ export default function TypescriptFunctionExample(props: {
 }): JSX.Element {
   const [open, setOpen] = useState<boolean>(false);
   const [singleValue, setSingleValue] = useState<string | null>(null);
-  const [multiValue, setMultiValue] = useState<string[] | null>(null);
+  const [multiValue, setMultiValue] = useState<Array<string> | null>(null);
   const [items, setItems] = useState<Array<ItemType<string>>>([
     { label: 'Apple', value: 'apple' },
     { label: 'Banana', value: 'banana' },

examples/package-lock.json

@@ -1,24 +1,24 @@
 {
   "name": "examples",
   "version": "1.0.0",
+  "private": true,
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
-    "start": "expo start",
     "android": "expo start --android",
     "ios": "expo start --ios",
+    "start": "expo start",
     "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "~49.0.9",
-    "expo-status-bar": "~1.6.0",
+    "expo": "^49.0.13",
+    "expo-status-bar": "~1.7.1",
     "react": "18.2.0",
-    "react-native": "0.72.4",
+    "react-native": "0.72.5",
     "react-native-dropdown-picker": "^5.4.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.15",
-    "@types/react": "~18.2.21",
+    "@babel/core": "^7.23.0",
+    "@types/react": "~18.2.24",
     "typescript": "^5.2.2"
-  },
-  "private": true
+  }
 }

examples/package.json

@@ -22,7 +22,7 @@ declare module 'react-native-dropdown-picker' {
 
   export type ValueType = string | number | boolean;
 
-  export type ItemType<T extends ValueType> = {
+  export interface ItemType<T extends ValueType> {
     containerStyle?: StyleProp<ViewStyle>;
     disabled?: boolean;
     icon?: () => JSX.Element;
@@ -32,7 +32,7 @@ declare module 'react-native-dropdown-picker' {
     selectable?: boolean;
     testID?: string;
     value?: T;
-  };
+  }
 
   export type ModeType = 'DEFAULT' | 'SIMPLE' | 'BADGE';