Merge pull request #41 from garytyler/fix-imports-2

Fix/clean up imports, fix some error handling

.eslintrc.cjs

@@ -6,6 +6,7 @@ module.exports = {
     '@remix-run/eslint-config',
     'plugin:hydrogen/recommended',
     'plugin:hydrogen/typescript',
+    'plugin:import/recommended',
   ],
   rules: {
     '@typescript-eslint/ban-ts-comment': 'off',
@@ -15,5 +16,7 @@ module.exports = {
     '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
     'no-case-declarations': 'off',
     'no-console': ['warn', {allow: ['warn', 'error']}],
+    'import/order': ['warn', {alphabetize: {order: 'asc'}}],
+    'no-unused-vars': 'warn',
   },
 };

CHANGELOG.md

@@ -22,24 +22,24 @@
 
   ### `v2_meta` migration steps
 
-  1. For any routes that you used `meta` route export, convert it to the `V2_MetaFunction` equivalent. Notice that the package name in the import statement has also changed to `'@remix-run/react'`:
+  1. For any routes that you used `meta` route export, convert it to the `MetaFunction` equivalent. Notice that the package name in the import statement has also changed to `'@remix-run/react'`:
 
      ```diff
      - import {type MetaFunction} from '@shopify/remix-oxygen';
-     + import {type V2_MetaFunction} from '@remix-run/react';
+     + import {type MetaFunction} from '@remix-run/react';
 
      - export const meta: MetaFunction = () => {
-     + export const meta: V2_MetaFunction = () => {
+     + export const meta: MetaFunction = () => {
      -   return {title: 'Login'};
      +   return [{title: 'Login'}];
        };
      ```
 
-  2. If you are using data from loaders, pass the loader type to the `V2_MetaFunction` generic:
+  2. If you are using data from loaders, pass the loader type to the `MetaFunction` generic:
 
      ```diff
      - export const meta: MetaFunction = ({data}) => {
-     + export const meta: V2_MetaFunction<typeof loader> = ({data}) => {
+     + export const meta: MetaFunction<typeof loader> = ({data}) => {
      -   return {title: `Order ${data?.order?.name}`};
      +   return [{title: `Order ${data?.order?.name}`}];
        };

app/components/AccountAddressBook.tsx

@@ -3,7 +3,9 @@ import type {
   Customer,
   MailingAddress,
 } from '@shopify/hydrogen/storefront-api-types';
-import {Button, Link, Text} from '~/components';
+import {Link} from './Link';
+import {Button} from '~/components/Button';
+import {Text} from '~/components/Text';
 
 export function AccountAddressBook({
   customer,
@@ -18,7 +20,7 @@ export function AccountAddressBook({
         <h3 className="font-bold text-lead">Address Book</h3>
         <div>
           {!addresses?.length && (
-            <Text className="mb-1" width="narrow" as="p" size="copy">
+            <Text className="mb-1" as="p" size="copy">
               You haven&apos;t saved any addresses yet.
             </Text>
           )}

app/components/AddToCartButton.tsx

@@ -1,6 +1,6 @@
-import type {CartLineInput} from '@shopify/hydrogen/storefront-api-types';
 import {useFetcher, useMatches, useNavigation} from '@remix-run/react';
-import {Button} from '~/components';
+import type {CartLineInput} from '@shopify/hydrogen/storefront-api-types';
+import {Button} from '~/components/Button';
 import {CartAction} from '~/lib/type';
 
 export function AddToCartButton({

app/components/Button.tsx

@@ -1,5 +1,5 @@
-import {forwardRef} from 'react';
 import {Link} from '@remix-run/react';
+import {forwardRef} from 'react';
 
 export const Button = forwardRef(
   (

app/components/Cart.tsx

@@ -1,24 +1,22 @@
-import clsx from 'clsx';
-import {useRef} from 'react';
-import {useScroll} from 'react-use';
+import {useFetcher} from '@remix-run/react';
 import {flattenConnection, Image, Money} from '@shopify/hydrogen';
-import {
-  Button,
-  Heading,
-  IconRemove,
-  Text,
-  Link,
-  FeaturedProducts,
-} from '~/components';
-import {getInputStyleClasses} from '~/lib/utils';
 import type {
   Cart as CartType,
   CartCost,
   CartLine,
   CartLineUpdateInput,
 } from '@shopify/hydrogen/storefront-api-types';
-import {useFetcher} from '@remix-run/react';
+import clsx from 'clsx';
+import {useRef} from 'react';
+import {useScroll} from 'react-use';
+import {Button} from '~/components/Button';
+import {FeaturedProducts} from '~/components/FeaturedProducts';
+import {IconRemove} from '~/components/Icon';
+import {Link} from '~/components/Link';
+import {Heading, Text} from '~/components/Text';
+
 import {CartAction} from '~/lib/type';
+import {getInputStyleClasses} from '~/lib/utils';
 
 type Layouts = 'page' | 'drawer';
 

app/components/CountrySelector.tsx

@@ -1,13 +1,15 @@
 import {useFetcher, useLocation, useMatches} from '@remix-run/react';
-import {Heading, Button, IconCheck, Text} from '~/components';
+import type {CartBuyerIdentityInput} from '@shopify/hydrogen/storefront-api-types';
+import clsx from 'clsx';
 import {useCallback, useEffect, useRef} from 'react';
 import {useInView} from 'react-intersection-observer';
+import {Button} from '~/components/Button';
+import {IconCheck} from '~/components/Icon';
+import IconPolicy from '~/components/IconPolicy';
+import {Text} from '~/components/Text';
 import type {Localizations, Locale} from '~/lib/type';
 import {CartAction} from '~/lib/type';
 import {DEFAULT_LOCALE} from '~/lib/utils';
-import clsx from 'clsx';
-import type {CartBuyerIdentityInput} from '@shopify/hydrogen/storefront-api-types';
-import IconPolicy from '~/components/IconPolicy';
 
 export function CountrySelector() {
   const [root] = useMatches();

app/components/Drawer.tsx

@@ -1,7 +1,7 @@
-import {Fragment, useState} from 'react';
 import {Dialog, Transition} from '@headlessui/react';
-
-import {Heading, IconClose} from '~/components';
+import {Fragment, useState} from 'react';
+import {IconClose} from '~/components/Icon';
+import {Heading} from '~/components/Text';
 
 /**
  * Drawer component that opens on user click.

app/components/FeaturedCollections.tsx

@@ -1,6 +1,8 @@
 import {Image} from '@shopify/hydrogen';
 import type {Collection} from '@shopify/hydrogen/storefront-api-types';
-import {Heading, Section, Grid, Link} from '~/components';
+import {Grid} from '~/components/Grid';
+import {Link} from '~/components/Link';
+import {Heading, Section} from '~/components/Text';
 
 export function FeaturedCollections({
   collections,

app/components/FeaturedProducts.tsx

@@ -1,11 +1,13 @@
-import clsx from 'clsx';
-import {useEffect, useId, useMemo} from 'react';
 import {useFetcher} from '@remix-run/react';
-import {Heading, ProductCard, Skeleton, Text} from '~/components';
 import type {
   Product,
   ProductSortKeys,
 } from '@shopify/hydrogen/storefront-api-types';
+import clsx from 'clsx';
+import {useEffect, useId, useMemo} from 'react';
+import {ProductCard} from '~/components/ProductCard';
+import {Skeleton} from '~/components/Skeleton';
+import {Heading, Text} from '~/components/Text';
 import {usePrefixPathWithLocale} from '~/lib/utils';
 
 interface FeaturedProductsProps {

app/components/FeaturedSection.tsx

@@ -1,6 +1,6 @@
-import {useEffect} from 'react';
 import {useFetcher} from '@remix-run/react';
 import type {Collection, Product} from '@shopify/hydrogen/storefront-api-types';
+import {useEffect} from 'react';
 import {FeaturedCollections} from './FeaturedCollections';
 import {ProductSwimlane} from './ProductSwimlane';
 import {usePrefixPathWithLocale} from '~/lib/utils';

app/components/Footer.tsx

@@ -1,13 +1,13 @@
-import Logo from './Logo';
 import {
   FaInstagram,
   FaDiscord,
   FaTwitch,
   FaYoutube,
   FaFacebook,
 } from 'react-icons/fa';
-import {CountrySelector} from './CountrySelector';
 import MailchimpSubscribe from 'react-mailchimp-subscribe';
+import {CountrySelector} from './CountrySelector';
+import Logo from './Logo';
 
 export function Footer() {
   const iconSize = 24;

app/components/Header.tsx

@@ -1,4 +1,3 @@
-import Logo from './Logo';
 import {
   FaList,
   FaShoppingCart,
@@ -11,6 +10,7 @@ import {
   FaFacebook,
 } from 'react-icons/fa';
 import {MdForum} from 'react-icons/md';
+import Logo from './Logo';
 
 export function Header({
   cartCount = 13,

app/components/Hero.tsx

@@ -1,13 +1,14 @@
-import clsx from 'clsx';
-import type {SerializeFrom} from '@shopify/remix-oxygen';
 import {MediaFile} from '@shopify/hydrogen';
 import type {
   MediaImage,
   Media,
   Metafield,
   Video as MediaVideo,
 } from '@shopify/hydrogen/storefront-api-types';
-import {Heading, Text, Link} from '~/components';
+import type {SerializeFrom} from '@shopify/remix-oxygen';
+import clsx from 'clsx';
+import {Link} from '~/components/Link';
+import {Heading, Text} from '~/components/Text';
 
 export interface CollectionHero {
   byline: Metafield;
@@ -34,7 +35,7 @@ export function Hero({
   spread,
   spreadSecondary,
   top,
-}: CollectionHero) {
+}: SerializeFrom<CollectionHero>) {
   return (
     <section className="px-4 w-full">
       <Heading format as="h2" size="display" className="w-full max-w-max">

app/components/Layout.tsx

@@ -3,30 +3,11 @@
 //   type EnhancedMenuItem,
 //   useIsHomePath,
 // } from '~/lib/utils';
-import {
-  //   Drawer,
-  //   useDrawer,
-  //   Text,
-  //   Input,
-  //   IconLogin,
-  //   IconAccount,
-  //   IconBag,
-  //   IconSearch,
-  //   Heading,
-  //   IconMenu,
-  //   IconCaret,
-  //   Section,
-  //   CountrySelector,
-  Cart,
-  CartLoading,
-  //   Link,
-} from '~/components';
 import {useParams, Form, Await, useMatches} from '@remix-run/react';
 // import { useWindowScroll } from 'react-use';
 // import { Disclosure } from '@headlessui/react';
 import {Suspense, useEffect, useMemo} from 'react';
 // import { useIsHydrated } from '~/hooks/useIsHydrated';
-import {useCartFetchers} from '~/hooks/useCartFetchers';
 // import logo from '../../public/logo.svg'; // Tell webpack this JS file uses this image
 // import logodark from '../../public/logo-dark.svg'; // Tell webpack this JS file uses this image
 // import FooterMenu from './FooterMenu'

app/components/Modal.tsx

@@ -1,4 +1,5 @@
-import {IconClose, Link} from '~/components';
+import {IconClose} from '~/components/Icon';
+import {Link} from '~/components/Link';
 
 export function Modal({
   children,

app/components/ModuleDetails.tsx

@@ -1,15 +1,7 @@
 import {useState} from 'react';
-import type {ModuleView} from '~/views/module';
+import {TbRectangleFilled} from 'react-icons/tb';
 import {ModuleLegendPanel} from './ModuleLegendPanel';
-import {FaArrowRight} from 'react-icons/fa';
-import {BsFillArrowRightSquareFill} from 'react-icons/bs';
-import {
-  TbRectangleFilled,
-  TbTriangleFilled,
-  TbTriangleInvertedFilled,
-  TbCircleFilled,
-} from 'react-icons/tb';
-import {AddToCartButton} from '.';
+import type {ModuleView} from '~/views/module';
 
 export function ModuleDetails({
   children,

app/components/ModuleLegendPanel.tsx

@@ -1,5 +1,5 @@
-import type {ModuleView} from '~/views/module';
 import {LegendRefDes} from './LegendRefDes';
+import type {ModuleView} from '~/views/module';
 
 export function ModuleLegendPanel({
   moduleData,

app/components/OrderCard.tsx

@@ -1,6 +1,7 @@
 import {flattenConnection, Image} from '@shopify/hydrogen';
 import type {Order} from '@shopify/hydrogen/storefront-api-types';
-import {Heading, Text, Link} from '~/components';
+import {Link} from '~/components/Link';
+import {Heading, Text} from '~/components/Text';
 import {statusMessage} from '~/lib/utils';
 
 export function OrderCard({order}: {order: Order}) {

app/components/Pagination.tsx

@@ -1,12 +1,12 @@
-import {useEffect, useMemo, useState} from 'react';
+import {useNavigation, useLocation, useNavigate} from '@remix-run/react';
 import type {
   Maybe,
   PageInfo,
   ProductConnection,
 } from '@shopify/hydrogen/storefront-api-types';
+import {useEffect, useMemo, useState} from 'react';
 
 import {useInView, type IntersectionOptions} from 'react-intersection-observer';
-import {useNavigation, useLocation, useNavigate} from '@remix-run/react';
 
 type Connection = {
   nodes: ProductConnection['nodes'] | any[];

app/components/ProductCard.tsx

@@ -1,11 +1,13 @@
-import {useState} from 'react';
-import clsx from 'clsx';
 import type {ShopifyAnalyticsProduct} from '@shopify/hydrogen';
 import {flattenConnection, useMoney} from '@shopify/hydrogen';
-import {Text, Link, AddToCartButton} from '~/components';
-import {isDiscounted, isNewArrival} from '~/lib/utils';
-import {getProductPlaceholder} from '~/lib/placeholders';
 import type {MoneyV2, Product} from '@shopify/hydrogen/storefront-api-types';
+import clsx from 'clsx';
+import {useState} from 'react';
+import {AddToCartButton} from '~/components/AddToCartButton';
+import {Link} from '~/components/Link';
+import {Text} from '~/components/Text';
+import {getProductPlaceholder} from '~/lib/placeholders';
+import {isDiscounted, isNewArrival} from '~/lib/utils';
 
 export function ProductCardBackgroundSVG() {
   return (

app/components/ProductGrid.tsx

@@ -1,8 +1,11 @@
-import {Button, Grid, ProductCard, Link} from '~/components';
-import {getImageLoadingPriority} from '~/lib/const';
-import type {Collection, Product} from '@shopify/hydrogen/storefront-api-types';
 import {useFetcher} from '@remix-run/react';
+import type {Collection, Product} from '@shopify/hydrogen/storefront-api-types';
 import {useEffect, useState} from 'react';
+import {Button} from '~/components/Button';
+import {Grid} from '~/components/Grid';
+import {Link} from '~/components/Link';
+import {ProductCard} from '~/components/ProductCard';
+import {getImageLoadingPriority} from '~/lib/const';
 
 export function ProductGrid({
   url,

app/components/ProductSwimlane.tsx

@@ -1,5 +1,6 @@
 import type {Product} from '@shopify/hydrogen/storefront-api-types';
-import {ProductCard, Section} from '~/components';
+import {ProductCard} from '~/components/ProductCard';
+import {Section} from '~/components/Text';
 
 const mockProducts = new Array(12).fill('');
 

app/components/SortFilter.tsx

@@ -1,22 +1,22 @@
-import type {SyntheticEvent} from 'react';
-import {useMemo, useState} from 'react';
 import {Menu, Disclosure} from '@headlessui/react';
-
-import {Heading, IconFilters, IconCaret, IconXMark, Text} from '~/components';
 import type {Location} from '@remix-run/react';
 import {
   Link,
   useLocation,
   useSearchParams,
   useNavigate,
 } from '@remix-run/react';
-import {useDebounce} from 'react-use';
 
 import type {
   FilterType,
   Filter,
   Collection,
 } from '@shopify/hydrogen/storefront-api-types';
+import {useMemo, useState} from 'react';
+import type {SyntheticEvent} from 'react';
+import {useDebounce} from 'react-use';
+import {IconFilters, IconCaret, IconXMark} from '~/components/Icon';
+import {Heading, Text} from '~/components/Text';
 
 export type AppliedFilter = {
   label: string;