chore: adds import/order eslint rule to demo-store template

.changeset/tricky-rocks-perform.md

@@ -0,0 +1,5 @@
+---
+'demo-store': patch
+---
+
+Added import/order ESLint rule and @remix-run/eslint plugin to demo-store template eslint configuration.

.eslintrc.js

@@ -10,4 +10,38 @@ module.exports = {
     'no-useless-escape': 'off',
     'no-case-declarations': 'off',
   },
+  overrides: [
+    {
+      files: ['./templates/demo-store/*'],
+      rules: {
+        'import/order': [
+          'error',
+          {
+            /**
+             * @description
+             *
+             * This keeps imports separate from one another, ensuring that imports are separated
+             * by their relative groups. As you move through the groups, imports become closer
+             * to the current file.
+             *
+             * @example
+             * ```
+             * import fs from 'fs';
+             *
+             * import package from 'npm-package';
+             *
+             * import xyz from '~/project-file';
+             *
+             * import index from '../';
+             *
+             * import sibling from './foo';
+             * ```
+             */
+            groups: ['builtin', 'external', 'internal', 'parent', 'sibling'],
+            'newlines-between': 'always',
+          },
+        ],
+      },
+    },
+  ],
 };

templates/demo-store/.eslintrc.js

@@ -2,7 +2,11 @@
  * @type {import("@types/eslint").Linter.BaseConfig}
  */
 module.exports = {
-  extends: ['plugin:hydrogen/recommended', 'plugin:hydrogen/typescript'],
+  extends: [
+    '@remix-run/eslint-config',
+    'plugin:hydrogen/recommended',
+    'plugin:hydrogen/typescript',
+  ],
   rules: {
     '@typescript-eslint/ban-ts-comment': 'off',
     '@typescript-eslint/naming-convention': 'off',
@@ -12,5 +16,32 @@ module.exports = {
     'no-case-declarations': 'off',
     // TODO: Remove jest plugin from hydrogen/eslint-plugin
     'jest/no-deprecated-functions': 'off',
+    'import/order': [
+      'error',
+      {
+        /**
+         * @description
+         *
+         * This keeps imports separate from one another, ensuring that imports are separated
+         * by their relative groups. As you move through the groups, imports become closer
+         * to the current file.
+         *
+         * @example
+         * ```
+         * import fs from 'fs';
+         *
+         * import package from 'npm-package';
+         *
+         * import xyz from '~/project-file';
+         *
+         * import index from '../';
+         *
+         * import sibling from './foo';
+         * ```
+         */
+        groups: ['builtin', 'external', 'internal', 'parent', 'sibling'],
+        'newlines-between': 'always',
+      },
+    ],
   },
 };

templates/demo-store/app/components/AccountAddressBook.tsx

@@ -3,6 +3,7 @@ import type {
   Customer,
   MailingAddress,
 } from '@shopify/hydrogen/storefront-api-types';
+
 import {Button, Link, Text} from '~/components';
 
 export function AccountAddressBook({

templates/demo-store/app/components/AccountDetails.tsx

@@ -1,4 +1,5 @@
 import type {Customer} from '@shopify/hydrogen/storefront-api-types';
+
 import {Link} from '~/components';
 
 export function AccountDetails({customer}: {customer: Customer}) {

templates/demo-store/app/components/AddToCartButton.tsx

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

templates/demo-store/app/components/Cart.tsx

@@ -2,6 +2,14 @@ import clsx from 'clsx';
 import {useRef} from 'react';
 import {useScroll} from 'react-use';
 import {flattenConnection, Image, Money} from '@shopify/hydrogen';
+import type {
+  Cart as CartType,
+  CartCost,
+  CartLine,
+  CartLineUpdateInput,
+} from '@shopify/hydrogen/storefront-api-types';
+import {useFetcher} from '@remix-run/react';
+
 import {
   Button,
   Heading,
@@ -11,13 +19,6 @@ import {
   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 {CartAction} from '~/lib/type';
 
 type Layouts = 'page' | 'drawer';

templates/demo-store/app/components/CountrySelector.tsx

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

templates/demo-store/app/components/FeaturedCollections.tsx

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

templates/demo-store/app/components/FeaturedProducts.tsx

@@ -1,11 +1,12 @@
 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 {Heading, ProductCard, Skeleton, Text} from '~/components';
 import {usePrefixPathWithLocale} from '~/lib/utils';
 
 interface FeaturedProductsProps {

templates/demo-store/app/components/FeaturedSection.tsx

@@ -1,9 +1,11 @@
 import {useEffect} from 'react';
 import {useFetcher} from '@remix-run/react';
 import type {Collection, Product} from '@shopify/hydrogen/storefront-api-types';
+
+import {usePrefixPathWithLocale} from '~/lib/utils';
+
 import {FeaturedCollections} from './FeaturedCollections';
 import {ProductSwimlane} from './ProductSwimlane';
-import {usePrefixPathWithLocale} from '~/lib/utils';
 
 export interface FeaturedData {
   featuredCollections: Collection[];

templates/demo-store/app/components/Hero.tsx

@@ -7,6 +7,7 @@ import type {
   Metafield,
   Video as MediaVideo,
 } from '@shopify/hydrogen/storefront-api-types';
+
 import {Heading, Text, Link} from '~/components';
 
 export interface CollectionHero {