Enable verbatimModuleSyntax and related eslint rule, fix imports (#125)

* Enable verbatimModuleSyntax and related eslint rule, fix imports

* extract type imports from regular imports and add missing import type

* fix sample imports

Author: moimael

modules/@shopify/checkout-sheet-kit/src/context.tsx

@@ -21,8 +21,9 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-import React, {PropsWithChildren, useCallback, useMemo, useRef} from 'react';
-import {EmitterSubscription} from 'react-native';
+import React, {useCallback, useMemo, useRef} from 'react';
+import type {PropsWithChildren} from 'react';
+import type {EmitterSubscription} from 'react-native';
 import {ShopifyCheckoutSheet} from './index';
 import type {
   AddEventListener,

modules/@shopify/checkout-sheet-kit/src/index.d.ts

@@ -21,10 +21,10 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-import {EmitterSubscription} from 'react-native';
-import {PixelEvent} from './pixels';
-import {CheckoutCompletedEvent} from './events';
-import {CheckoutException} from './errors';
+import type {EmitterSubscription} from 'react-native';
+import type {PixelEvent} from './pixels';
+import type {CheckoutCompletedEvent} from './events';
+import type {CheckoutException} from './errors';
 
 export type Maybe<T> = T | undefined;
 

modules/@shopify/checkout-sheet-kit/src/index.ts

@@ -21,11 +21,8 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-import {
-  NativeModules,
-  NativeEventEmitter,
-  EmitterSubscription,
-} from 'react-native';
+import {NativeModules, NativeEventEmitter} from 'react-native';
+import type {EmitterSubscription} from 'react-native';
 import {ShopifyCheckoutSheetProvider, useShopifyCheckoutSheet} from './context';
 import {ColorScheme} from './index.d';
 import type {
@@ -34,19 +31,18 @@ import type {
   Configuration,
   ShopifyCheckoutSheetKit,
 } from './index.d';
+import type {CheckoutException, CheckoutNativeError} from './errors.d';
 import {
-  CheckoutException,
   CheckoutExpiredError,
   CheckoutClientError,
   CheckoutHTTPError,
   ConfigurationError,
   InternalError,
-  CheckoutNativeError,
   CheckoutNativeErrorType,
   GenericError,
 } from './errors.d';
 import {CheckoutErrorCode} from './errors.d';
-import {CheckoutCompletedEvent} from './events.d';
+import type {CheckoutCompletedEvent} from './events.d';
 import type {CustomEvent, PixelEvent, StandardEvent} from './pixels.d';
 
 const RNShopifyCheckoutSheetKit = NativeModules.ShopifyCheckoutSheetKit;

modules/@shopify/checkout-sheet-kit/tsconfig.build.json

@@ -21,6 +21,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "esnext"
+    "target": "esnext",
+    "verbatimModuleSyntax": true,
   }
 }

package.json

@@ -75,6 +75,7 @@
     "extends": "@react-native",
     "rules": {
       "@typescript-eslint/no-shadow": "off",
+      "@typescript-eslint/consistent-type-imports": "error",
       "no-console": "error"
     }
   },

sample/src/App.tsx

@@ -21,7 +21,8 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
 
-import React, {PropsWithChildren, ReactNode, useEffect} from 'react';
+import type {PropsWithChildren, ReactNode} from 'react';
+import React, {useEffect} from 'react';
 import {Link, NavigationContainer} from '@react-navigation/native';
 import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
 import {createNativeStackNavigator} from '@react-navigation/native-stack';
@@ -32,22 +33,24 @@ import Icon from 'react-native-vector-icons/Entypo';
 import CatalogScreen from './screens/CatalogScreen';
 import SettingsScreen from './screens/SettingsScreen';
 
+import type {Configuration} from '@shopify/checkout-sheet-kit';
 import {
   ColorScheme,
-  Configuration,
   ShopifyCheckoutSheetProvider,
   useShopifyCheckoutSheet,
-  type CheckoutCompletedEvent,
-  type CheckoutException,
-  type PixelEvent,
+} from '@shopify/checkout-sheet-kit';
+import type {
+  CheckoutCompletedEvent,
+  CheckoutException,
+  PixelEvent,
 } from '@shopify/checkout-sheet-kit';
 import {ConfigProvider} from './context/Config';
 import {ThemeProvider, getNavigationTheme, useTheme} from './context/Theme';
 import {Appearance, StatusBar} from 'react-native';
 import {CartProvider, useCart} from './context/Cart';
 import CartScreen from './screens/CartScreen';
 import ProductDetailsScreen from './screens/ProductDetailsScreen';
-import {ProductVariant, ShopifyProduct} from '../@types';
+import type {ProductVariant, ShopifyProduct} from '../@types';
 import ErrorBoundary from './ErrorBoundary';
 
 const colorScheme = ColorScheme.web;

sample/src/context/Cart.tsx

@@ -1,5 +1,5 @@
+import type {PropsWithChildren} from 'react';
 import React, {
-  PropsWithChildren,
   createContext,
   useCallback,
   useEffect,

sample/src/context/Config.tsx

@@ -1,14 +1,14 @@
+import type {PropsWithChildren} from 'react';
 import React, {
-  PropsWithChildren,
   createContext,
   useCallback,
   useEffect,
   useMemo,
   useState,
 } from 'react';
+import type {Configuration} from '@shopify/checkout-sheet-kit';
 import {
   ColorScheme,
-  Configuration,
   useShopifyCheckoutSheet,
 } from '@shopify/checkout-sheet-kit';
 import {useTheme} from './Theme';

sample/src/context/Theme.tsx

@@ -1,11 +1,7 @@
-import React, {
-  PropsWithChildren,
-  createContext,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
-import {Appearance, ColorSchemeName, useColorScheme} from 'react-native';
+import type {PropsWithChildren} from 'react';
+import React, {createContext, useCallback, useMemo, useState} from 'react';
+import type {ColorSchemeName} from 'react-native';
+import {Appearance, useColorScheme} from 'react-native';
 import {DarkTheme, DefaultTheme} from '@react-navigation/native';
 import {ColorScheme} from '@shopify/checkout-sheet-kit';
 

sample/src/screens/CartScreen.tsx

@@ -38,8 +38,10 @@ import Icon from 'react-native-vector-icons/Entypo';
 import {useShopifyCheckoutSheet} from '@shopify/checkout-sheet-kit';
 import useShopify from '../hooks/useShopify';
 
-import type {CartItem, CartLineItem} from '../../@types';
-import {Colors, useTheme} from '../context/Theme';
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+import type {CartLineItem, CartItem} from '../../@types';
+import type {Colors} from '../context/Theme';
+import {useTheme} from '../context/Theme';
 import {useCart} from '../context/Cart';
 import {currency} from '../utils';