Update tsconfig & new port (#22)

* Add eslint rule & setup port

* Update tsconfig

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build": "next build",
     "check-types": "tsc --noEmit",
-    "dev": "next dev",
+    "dev": "next dev --port 3001",
     "fetch-schema": "curl https://raw.githubusercontent.com/saleor/saleor/${npm_package_saleor_schemaVersion}/saleor/graphql/schema.graphql > ./schema.graphql",
     "gql-check": "gql.tada check",
     "gql-generate": "gql.tada generate output",

src/components/form-button.tsx

@@ -1,7 +1,6 @@
 import { Loader2 } from "lucide-react";
-import React from "react";
 
-import { Button, ButtonProps } from "./ui/button";
+import { Button, type ButtonProps } from "./ui/button";
 
 interface FormButtonProps extends ButtonProps {
   loading?: boolean;

src/components/ui/form.tsx

@@ -5,9 +5,9 @@ import { Slot } from "@radix-ui/react-slot";
 import * as React from "react";
 import {
   Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
   FormProvider,
   useFormContext,
 } from "react-hook-form";

src/lib/logger.ts

@@ -1,4 +1,4 @@
-import { type ILogObj, ILogObjMeta, Logger } from "tslog";
+import { type ILogObj, type ILogObjMeta, Logger } from "tslog";
 
 import { env } from "@/env";
 
@@ -46,18 +46,14 @@ export const logger = new Logger<ILogObj>({
 });
 
 logger.attachTransport((log) => {
-  const {
-    message,
-    attributes,
-    _meta: { name },
-  } = log as ILogObj &
+  const { message, attributes, meta } = log as ILogObj &
     ILogObjMeta & {
       message: string;
       attributes: Record<string, unknown>;
     };
 
   // eslint-disable-next-line no-console
-  console.log(`${name}: ${message}`, JSON.stringify(attributes, null, 2));
+  console.log(`${meta?.name}: ${message}`, JSON.stringify(attributes, null, 2));
 });
 
 export const createLogger = (name: string, params?: Record<string, unknown>) =>

src/modules/checkout-details/components/billing.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { FragmentOf, readFragment } from "gql.tada";
+import { type FragmentOf, readFragment } from "gql.tada";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 

src/modules/checkout-details/components/delivery-method.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { FragmentOf, readFragment } from "gql.tada";
+import { type FragmentOf, readFragment } from "gql.tada";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 
@@ -68,7 +68,7 @@ export const DeliveryMethod = (props: {
     }
     // if there is only one shipping method, return its id
     if (shippingMethods.length === 1) {
-      return shippingMethods[0].id;
+      return shippingMethods[0]?.id;
     }
     // otherwise, return empty string
     return "";

src/modules/checkout-details/components/shipping.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { FragmentOf, readFragment } from "gql.tada";
+import { type FragmentOf, readFragment } from "gql.tada";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
 

src/modules/dropin/actions/initalize-transaction.ts

@@ -6,13 +6,10 @@ import { z } from "zod";
 
 import { envUrlSchema } from "@/lib/env-url";
 import { BaseError, UnknownError } from "@/lib/errors";
-import { createLogger } from "@/lib/logger";
 import { actionClient } from "@/lib/safe-action";
 
 import { InitalizeTransactionSchema } from "../schemas";
 
-const logger = createLogger("initalizeTransaction");
-
 const initalizeTransactionMutation = graphql(`
   mutation InitalizeTransaction(
     $checkoutId: ID!

src/modules/dropin/actions/process-transaction.ts

@@ -6,13 +6,10 @@ import { z } from "zod";
 
 import { envUrlSchema } from "@/lib/env-url";
 import { BaseError, UnknownError } from "@/lib/errors";
-import { createLogger } from "@/lib/logger";
 import { actionClient } from "@/lib/safe-action";
 
 import { TransactionProcessSchema } from "../schemas/transaction-process";
 
-const logger = createLogger("processTransaction");
-
 const processTransactionMutation = graphql(`
   mutation transactionProcess($transactionId: ID!, $data: JSON) {
     transactionProcess(id: $transactionId, data: $data) {

src/modules/dropin/adyen/gateway-config-responses.ts

@@ -4,7 +4,7 @@ import { createLogger } from "@/lib/logger";
 
 import {
   GiftCardBalanceResponseSchema,
-  InitalizePaymentGatewaySchemaType,
+  type InitalizePaymentGatewaySchemaType,
   OrderCancelResponseSchema,
   OrderCreateResponseSchema,
 } from "../schemas";
@@ -25,7 +25,7 @@ export class AdyenGiftCardBalanceResponse {
       );
     }
     return new AdyenGiftCardBalanceResponse(
-      data.paymentGatewayInitialize.gatewayConfigs[0].data.giftCardBalanceResponse,
+      data.paymentGatewayInitialize.gatewayConfigs[0]?.data.giftCardBalanceResponse,
     );
   }
 
@@ -48,7 +48,7 @@ export class AdyenOrderCreateResponse {
       );
     }
     return new AdyenOrderCreateResponse(
-      data.paymentGatewayInitialize.gatewayConfigs[0].data.orderCreateResponse,
+      data.paymentGatewayInitialize.gatewayConfigs[0]?.data.orderCreateResponse,
     );
   }
 
@@ -71,7 +71,7 @@ export class AdyenOrderCancelledResponse {
       );
     }
     return new AdyenOrderCancelledResponse(
-      data.paymentGatewayInitialize.gatewayConfigs[0].data.orderCancelResponse,
+      data.paymentGatewayInitialize.gatewayConfigs[0]?.data.orderCancelResponse,
     );
   }
 

src/modules/dropin/components/adyen-dropin.tsx

@@ -2,12 +2,12 @@
 import "@adyen/adyen-web/dist/adyen.css";
 
 import AdyenCheckout from "@adyen/adyen-web";
-import { FragmentOf, readFragment } from "gql.tada";
+import { type FragmentOf, readFragment } from "gql.tada";
 import { useEffect, useRef } from "react";
 
 import { getAdyenDropinConfig } from "../adyen";
 import { TotalPriceFragment } from "../fragments";
-import { InitalizePaymentGatewaySchemaType } from "../schemas";
+import { type InitalizePaymentGatewaySchemaType } from "../schemas";
 
 export const AdyenDropin = (props: {
   initalizePaymentGatewayData: InitalizePaymentGatewaySchemaType;
@@ -25,7 +25,8 @@ export const AdyenDropin = (props: {
     checkoutId,
     paymentGatewayId,
   } = props;
-  const gatewayConfig = gatewayConfigs[0];
+  // there are always going to be at least one gateway config
+  const gatewayConfig = gatewayConfigs[0]!;
   const { clientKey, environment, paymentMethodsResponse } = gatewayConfig.data;
   const totalPrice = readFragment(TotalPriceFragment, totalPriceData);
   const dropinContainerRef = useRef<HTMLDivElement | null>(null);

src/modules/environment/components/cart.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FragmentOf, readFragment } from "gql.tada";
+import { type FragmentOf, readFragment } from "gql.tada";
 import Image from "next/image";
 import { useTransition } from "react";
 
@@ -27,7 +27,7 @@ export const Cart = (props: {
       const response = await createCheckout({
         envUrl,
         channelSlug,
-        variantId: products[0].defaultVariant?.id ?? "",
+        variantId: products[0]?.defaultVariant?.id ?? "",
       });
 
       if (response?.serverError) {

src/modules/environment/components/environment.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { FragmentOf } from "gql.tada";
+import { type FragmentOf } from "gql.tada";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";

src/modules/payment-gateway/components/payment-gateway-select.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { FragmentOf, readFragment } from "gql.tada";
+import { type FragmentOf, readFragment } from "gql.tada";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -45,7 +45,7 @@ export const PaymentGatewaySelect = (props: {
   const getDefaultPaymentGatewayId = () => {
     // if there is only one available payment gateway, return its id
     if (availablePaymentGateways.length === 1) {
-      return availablePaymentGateways[0].id;
+      return availablePaymentGateways[0]?.id;
     }
     // otherwise, return empty string
     return "";

src/modules/summary/actions/get-checkout-summary.ts

@@ -5,13 +5,10 @@ import { z } from "zod";
 
 import { envUrlSchema } from "@/lib/env-url";
 import { BaseError, UnknownError } from "@/lib/errors";
-import { createLogger } from "@/lib/logger";
 import { actionClient } from "@/lib/safe-action";
 
 import { CheckoutFragment } from "../fragments";
 
-const logger = createLogger("getCheckoutSummary");
-
 const GetCheckoutSummaryQuery = graphql(
   `
     query getCheckoutSummary($checkoutId: ID!) {

src/modules/summary/components/summary.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { lightFormat } from "date-fns";
-import { FragmentOf, readFragment } from "gql.tada";
+import { type FragmentOf, readFragment } from "gql.tada";
 import { Copy, SquareArrowOutUpRight } from "lucide-react";
 import Link from "next/link";
 import { useTransition } from "react";

tsconfig.json

@@ -1,17 +1,26 @@
 {
   "compilerOptions": {
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
+    "esModuleInterop": true,
     "skipLibCheck": true,
+    "allowJs": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "incremental": true,
+
     "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
     "module": "esnext",
     "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
+    "noEmit": true,
+
+    "lib": ["dom", "dom.iterable", "esnext"],
     "jsx": "preserve",
-    "incremental": true,
+
     "plugins": [
       {
         "name": "next"