chore: ensure consistent use of import type (#1971)

We hit issues when building react-native-svg because of inconsistent use of import type. This change adds ESLint result to ensure consistency. I also ran yarn lint --fix to fix up the code.

Author: tido64

.eslintrc.js

@@ -1,4 +1,12 @@
 module.exports = {
   extends: '@react-native-community',
-  rules: { 'no-bitwise': 0, '@typescript-eslint/no-explicit-any': 2 },
+  parserOptions: {
+    project: ["./tsconfig.json"],
+  },
+  rules: {
+    'no-bitwise': 'off',
+    '@typescript-eslint/consistent-type-exports': 'error',
+    '@typescript-eslint/consistent-type-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+  },
 };

src/LocalSvg.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect, Component } from 'react';
-import { Platform, Image, ImageSourcePropType } from 'react-native';
+import type { ImageSourcePropType } from 'react-native';
+import { Platform, Image } from 'react-native';
 
 import { fetchText } from './xml';
 import { SvgCss, SvgWithCss } from './css';
-import { SvgProps } from './elements/Svg';
+import type { SvgProps } from './elements/Svg';
 import type { Spec } from './fabric/NativeSvgRenderableModule';
 
 export function getUriFromSource(source: ImageSourcePropType) {

src/ReactNativeSVG.web.ts

@@ -1,12 +1,15 @@
 import * as React from 'react';
+import type { GestureResponderEvent, TransformsStyle } from 'react-native';
 import {
-  GestureResponderEvent,
   // @ts-ignore
   unstable_createElement as ucE,
   createElement as cE,
-  TransformsStyle,
 } from 'react-native';
-import { NumberArray, NumberProp, TransformProps } from './lib/extract/types';
+import type {
+  NumberArray,
+  NumberProp,
+  TransformProps,
+} from './lib/extract/types';
 import SvgTouchableMixin from './lib/SvgTouchableMixin';
 import { resolve } from './lib/resolve';
 import { transformsArrayToProps } from './lib/extract/extractTransform';

src/css.tsx

@@ -1,33 +1,30 @@
 import React, { Component, useEffect, useMemo, useState } from 'react';
-import {
-  camelCase,
-  err,
-  fetchText,
+import type {
   JsxAST,
   Middleware,
-  parse,
   Styles,
-  SvgAst,
   UriProps,
   UriState,
   XmlAST,
   XmlProps,
   XmlState,
 } from './xml';
-import csstree, {
+import { camelCase, err, fetchText, parse, SvgAst } from './xml';
+import type {
   Atrule,
   AtrulePrelude,
   CssNode,
   Declaration,
   DeclarationList,
-  List,
   ListItem,
   PseudoClassSelector,
   Rule,
   Selector,
   SelectorList,
 } from 'css-tree';
-import cssSelect, { Options } from 'css-select';
+import csstree, { List } from 'css-tree';
+import type { Options } from 'css-select';
+import cssSelect from 'css-select';
 
 /*
  * Style element inlining experiment based on SVGO

src/elements/Circle.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { extract, stringifyPropsForFabric } from '../lib/extract/extractProps';
-import { CommonPathProps, NumberProp } from '../lib/extract/types';
+import type { CommonPathProps, NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
 import RNSVGCircle from '../fabric/CircleNativeComponent';
-import { NativeMethods } from 'react-native';
+import type { NativeMethods } from 'react-native';
 
 export interface CircleProps extends CommonPathProps {
   cx?: NumberProp;

src/elements/ClipPath.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import { extract } from '../lib/extract/extractProps';
 import Shape from './Shape';
 import RNSVGClipPath from '../fabric/ClipPathNativeComponent';

src/elements/Ellipse.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { extract, stringifyPropsForFabric } from '../lib/extract/extractProps';
-import { CommonPathProps, NumberProp } from '../lib/extract/types';
+import type { CommonPathProps, NumberProp } from '../lib/extract/types';
 import Shape from './Shape';
 import RNSVGEllipse from '../fabric/EllipseNativeComponent';
-import { NativeMethods } from 'react-native';
+import type { NativeMethods } from 'react-native';
 
 export interface EllipseProps extends CommonPathProps {
   cx?: NumberProp;

src/elements/ForeignObject.tsx

@@ -1,12 +1,13 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import {
   withoutXY,
   stringifyPropsForFabric,
 } from '../lib/extract/extractProps';
-import { NumberProp } from '../lib/extract/types';
+import type { NumberProp } from '../lib/extract/types';
 import G from './G';
 import RNSVGForeignObject from '../fabric/ForeignObjectNativeComponent';
-import { NativeMethods } from 'react-native';
+import type { NativeMethods } from 'react-native';
 
 export interface ForeignObjectProps {
   children?: ReactNode;

src/elements/G.tsx

@@ -1,16 +1,17 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import extractProps, { propsAndStyles } from '../lib/extract/extractProps';
 import { extractFont } from '../lib/extract/extractText';
 import extractTransform from '../lib/extract/extractTransform';
-import {
+import type {
   CommonPathProps,
   FontProps,
   NumberProp,
   TransformProps,
 } from '../lib/extract/types';
 import Shape from './Shape';
 import RNSVGGroup from '../fabric/GroupNativeComponent';
-import { NativeMethods } from 'react-native';
+import type { NativeMethods } from 'react-native';
 
 export interface GProps extends CommonPathProps, FontProps {
   children?: ReactNode;

src/elements/Image.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Image, ImageProps as RNImageProps, NativeMethods } from 'react-native';
+import type { ImageProps as RNImageProps, NativeMethods } from 'react-native';
+import { Image } from 'react-native';
 import { alignEnum, meetOrSliceTypes } from '../lib/extract/extractViewBox';
 import {
   stringifyPropsForFabric,
   withoutXY,
 } from '../lib/extract/extractProps';
-import {
+import type {
   ClipProps,
   CommonMaskProps,
   NativeProps,