From aa96bc6e0e1f1f0dd3248c9fd870d131ac63fa22 Mon Sep 17 00:00:00 2001 From: Quinton Chester Date: Tue, 16 May 2023 17:26:49 -0500 Subject: [PATCH] chore: adds import/order eslint rule to demo-store template --- .eslintrc.js | 34 +++++++++++ package-lock.json | 58 +++++++++---------- templates/demo-store/.eslintrc.js | 33 ++++++++++- .../app/components/AccountAddressBook.tsx | 1 + .../app/components/AccountDetails.tsx | 1 + .../app/components/AddToCartButton.tsx | 1 + templates/demo-store/app/components/Cart.tsx | 15 ++--- .../app/components/CountrySelector.tsx | 10 ++-- .../app/components/FeaturedCollections.tsx | 1 + .../app/components/FeaturedProducts.tsx | 3 +- .../app/components/FeaturedSection.tsx | 4 +- templates/demo-store/app/components/Hero.tsx | 1 + .../demo-store/app/components/Layout.tsx | 20 ++++--- .../demo-store/app/components/OrderCard.tsx | 1 + .../demo-store/app/components/Pagination.tsx | 1 - .../demo-store/app/components/ProductCard.tsx | 12 ++-- .../demo-store/app/components/ProductGrid.tsx | 5 +- .../app/components/ProductSwimlane.tsx | 1 + .../demo-store/app/components/SortFilter.tsx | 10 ++-- templates/demo-store/app/data/countries.ts | 2 +- .../demo-store/app/hooks/useAnalytics.tsx | 10 +++- templates/demo-store/app/lib/placeholders.ts | 2 +- templates/demo-store/app/lib/utils.ts | 7 ++- templates/demo-store/app/root.tsx | 11 ++-- ...le).$shopid.orders.$token.authenticate.tsx | 3 +- .../app/routes/($locale)._index.tsx | 9 +-- ....account.activate.$id.$activationToken.tsx | 3 +- .../routes/($locale).account.address.$id.tsx | 2 + .../app/routes/($locale).account.edit.tsx | 2 + .../app/routes/($locale).account.login.tsx | 3 +- .../routes/($locale).account.orders.$id.tsx | 3 +- .../app/routes/($locale).account.recover.tsx | 3 +- .../app/routes/($locale).account.register.tsx | 6 +- ...$locale).account.reset.$id.$resetToken.tsx | 3 +- .../app/routes/($locale).account.tsx | 30 +++++----- .../app/routes/($locale).api.countries.tsx | 1 + .../app/routes/($locale).api.products.tsx | 3 +- .../app/routes/($locale).cart.$lines.tsx | 1 + .../demo-store/app/routes/($locale).cart.tsx | 3 +- ...$locale).collections.$collectionHandle.tsx | 1 + .../routes/($locale).collections._index.tsx | 3 +- .../app/routes/($locale).discount.$code.tsx | 2 + .../routes/($locale).featured-products.tsx | 1 + .../($locale).journal.$journalHandle.tsx | 6 +- .../app/routes/($locale).journal._index.tsx | 1 + .../routes/($locale).pages.$pageHandle.tsx | 1 + .../($locale).policies.$policyHandle.tsx | 5 +- .../app/routes/($locale).policies._index.tsx | 1 + .../($locale).products.$productHandle.tsx | 27 ++++----- .../app/routes/($locale).products._index.tsx | 1 + .../app/routes/($locale).search.tsx | 1 + .../demo-store/app/routes/[sitemap.xml].tsx | 2 +- templates/demo-store/server.ts | 1 + templates/demo-store/typographic-base.d.ts | 1 + 54 files changed, 243 insertions(+), 130 deletions(-) create mode 100644 templates/demo-store/typographic-base.d.ts diff --git a/.eslintrc.js b/.eslintrc.js index 84ce7cb50e..8558848289 100644 --- a/.eslintrc.js +++ b/.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', + }, + ], + }, + }, + ], }; diff --git a/package-lock.json b/package-lock.json index 0c3214c466..71859291b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29513,7 +29513,7 @@ }, "packages/cli": { "name": "@shopify/cli-hydrogen", - "version": "4.1.1", + "version": "4.1.2", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@oclif/core": "2.1.4", @@ -29547,8 +29547,8 @@ }, "peerDependencies": { "@remix-run/react": "^1.15.0", - "@shopify/hydrogen-react": "^2023.4.0", - "@shopify/remix-oxygen": "^1.0.5" + "@shopify/hydrogen-react": "^2023.4.1", + "@shopify/remix-oxygen": "^1.0.6" } }, "packages/cli/node_modules/@oclif/core": { @@ -31720,7 +31720,7 @@ "version": "4.1.1", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { - "@shopify/cli-hydrogen": "^4.1.1" + "@shopify/cli-hydrogen": "^4.1.2" }, "bin": { "create-hydrogen": "dist/create-app.js" @@ -31728,10 +31728,10 @@ }, "packages/hydrogen": { "name": "@shopify/hydrogen", - "version": "2023.4.0", + "version": "2023.4.1", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { - "@shopify/hydrogen-react": "2023.4.0", + "@shopify/hydrogen-react": "2023.4.1", "react": "^18.2.0" }, "devDependencies": { @@ -31748,7 +31748,7 @@ }, "packages/hydrogen-react": { "name": "@shopify/hydrogen-react", - "version": "2023.4.0", + "version": "2023.4.1", "license": "MIT", "dependencies": { "@google/model-viewer": "^1.12.1", @@ -32035,7 +32035,7 @@ }, "packages/remix-oxygen": { "name": "@shopify/remix-oxygen", - "version": "1.0.5", + "version": "1.0.6", "license": "SEE LICENSE IN LICENSE.md", "dependencies": { "@remix-run/server-runtime": "1.15.0" @@ -32048,14 +32048,14 @@ } }, "templates/demo-store": { - "version": "0.2.1", + "version": "1.0.0", "dependencies": { "@headlessui/react": "^1.7.2", "@remix-run/react": "1.15.0", "@shopify/cli": "3.45.0", - "@shopify/cli-hydrogen": "^4.1.1", - "@shopify/hydrogen": "^2023.4.0", - "@shopify/remix-oxygen": "^1.0.5", + "@shopify/cli-hydrogen": "^4.1.2", + "@shopify/hydrogen": "^2023.4.1", + "@shopify/remix-oxygen": "^1.0.6", "clsx": "^1.2.1", "cross-env": "^7.0.3", "graphql": "^16.6.0", @@ -32101,9 +32101,9 @@ "dependencies": { "@remix-run/react": "1.15.0", "@shopify/cli": "3.45.0", - "@shopify/cli-hydrogen": "^4.1.1", - "@shopify/hydrogen": "^2023.4.0", - "@shopify/remix-oxygen": "^1.0.5", + "@shopify/cli-hydrogen": "^4.1.2", + "@shopify/hydrogen": "^2023.4.1", + "@shopify/remix-oxygen": "^1.0.6", "graphql": "^16.6.0", "graphql-tag": "^2.12.6", "isbot": "^3.6.6", @@ -32131,9 +32131,9 @@ "dependencies": { "@remix-run/react": "1.15.0", "@shopify/cli": "3.45.0", - "@shopify/cli-hydrogen": "^4.1.1", - "@shopify/hydrogen": "^2023.4.0", - "@shopify/remix-oxygen": "^1.0.5", + "@shopify/cli-hydrogen": "^4.1.2", + "@shopify/hydrogen": "^2023.4.1", + "@shopify/remix-oxygen": "^1.0.6", "graphql": "^16.6.0", "graphql-tag": "^2.12.6", "isbot": "^3.6.6", @@ -38569,7 +38569,7 @@ "@shopify/create-hydrogen": { "version": "file:packages/create-hydrogen", "requires": { - "@shopify/cli-hydrogen": "^4.1.1" + "@shopify/cli-hydrogen": "^4.1.2" } }, "@shopify/eslint-plugin": { @@ -38637,7 +38637,7 @@ "version": "file:packages/hydrogen", "requires": { "@shopify/generate-docs": "0.10.7", - "@shopify/hydrogen-react": "2023.4.0", + "@shopify/hydrogen-react": "2023.4.1", "@testing-library/react": "^14.0.0", "happy-dom": "^8.9.0", "react": "^18.2.0", @@ -42143,12 +42143,12 @@ "@remix-run/eslint-config": "1.15.0", "@remix-run/react": "1.15.0", "@shopify/cli": "3.45.0", - "@shopify/cli-hydrogen": "^4.1.1", + "@shopify/cli-hydrogen": "^4.1.2", "@shopify/eslint-plugin": "^42.0.1", - "@shopify/hydrogen": "^2023.4.0", + "@shopify/hydrogen": "^2023.4.1", "@shopify/oxygen-workers-types": "^3.17.2", "@shopify/prettier-config": "^1.1.2", - "@shopify/remix-oxygen": "^1.0.5", + "@shopify/remix-oxygen": "^1.0.6", "@tailwindcss/forms": "^0.5.3", "@tailwindcss/typography": "^0.5.9", "@types/eslint": "^8.4.10", @@ -44552,11 +44552,11 @@ "@remix-run/dev": "1.15.0", "@remix-run/react": "1.15.0", "@shopify/cli": "3.45.0", - "@shopify/cli-hydrogen": "^4.1.1", - "@shopify/hydrogen": "^2023.4.0", + "@shopify/cli-hydrogen": "^4.1.2", + "@shopify/hydrogen": "^2023.4.1", "@shopify/oxygen-workers-types": "^3.17.2", "@shopify/prettier-config": "^1.1.2", - "@shopify/remix-oxygen": "^1.0.5", + "@shopify/remix-oxygen": "^1.0.6", "@types/eslint": "^8.4.10", "@types/react": "^18.0.20", "@types/react-dom": "^18.0.6", @@ -50686,11 +50686,11 @@ "@remix-run/dev": "1.15.0", "@remix-run/react": "1.15.0", "@shopify/cli": "3.45.0", - "@shopify/cli-hydrogen": "^4.1.1", - "@shopify/hydrogen": "^2023.4.0", + "@shopify/cli-hydrogen": "^4.1.2", + "@shopify/hydrogen": "^2023.4.1", "@shopify/oxygen-workers-types": "^3.17.2", "@shopify/prettier-config": "^1.1.2", - "@shopify/remix-oxygen": "^1.0.5", + "@shopify/remix-oxygen": "^1.0.6", "@types/eslint": "^8.4.10", "@types/react": "^18.0.20", "@types/react-dom": "^18.0.6", diff --git a/templates/demo-store/.eslintrc.js b/templates/demo-store/.eslintrc.js index e7919e76cb..187ae1be56 100644 --- a/templates/demo-store/.eslintrc.js +++ b/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', + }, + ], }, }; diff --git a/templates/demo-store/app/components/AccountAddressBook.tsx b/templates/demo-store/app/components/AccountAddressBook.tsx index 4d07b4b1cb..61000d6359 100644 --- a/templates/demo-store/app/components/AccountAddressBook.tsx +++ b/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({ diff --git a/templates/demo-store/app/components/AccountDetails.tsx b/templates/demo-store/app/components/AccountDetails.tsx index 8150a59ad6..e1b21dec0b 100644 --- a/templates/demo-store/app/components/AccountDetails.tsx +++ b/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}) { diff --git a/templates/demo-store/app/components/AddToCartButton.tsx b/templates/demo-store/app/components/AddToCartButton.tsx index 12fface397..c31696d41b 100644 --- a/templates/demo-store/app/components/AddToCartButton.tsx +++ b/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'; diff --git a/templates/demo-store/app/components/Cart.tsx b/templates/demo-store/app/components/Cart.tsx index 0eda54625d..03d8c5f2c3 100644 --- a/templates/demo-store/app/components/Cart.tsx +++ b/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'; diff --git a/templates/demo-store/app/components/CountrySelector.tsx b/templates/demo-store/app/components/CountrySelector.tsx index c0663a99e3..b0870cf3b2 100644 --- a/templates/demo-store/app/components/CountrySelector.tsx +++ b/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(); diff --git a/templates/demo-store/app/components/FeaturedCollections.tsx b/templates/demo-store/app/components/FeaturedCollections.tsx index 8e71a66f2f..962c4d133f 100644 --- a/templates/demo-store/app/components/FeaturedCollections.tsx +++ b/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({ diff --git a/templates/demo-store/app/components/FeaturedProducts.tsx b/templates/demo-store/app/components/FeaturedProducts.tsx index 9d082f41c0..faf779c672 100644 --- a/templates/demo-store/app/components/FeaturedProducts.tsx +++ b/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 { diff --git a/templates/demo-store/app/components/FeaturedSection.tsx b/templates/demo-store/app/components/FeaturedSection.tsx index 814753dae7..a588ff48c9 100644 --- a/templates/demo-store/app/components/FeaturedSection.tsx +++ b/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[]; diff --git a/templates/demo-store/app/components/Hero.tsx b/templates/demo-store/app/components/Hero.tsx index 4d01002feb..1ddcde35a6 100644 --- a/templates/demo-store/app/components/Hero.tsx +++ b/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 { diff --git a/templates/demo-store/app/components/Layout.tsx b/templates/demo-store/app/components/Layout.tsx index d4303b2d1b..c93189cbd9 100644 --- a/templates/demo-store/app/components/Layout.tsx +++ b/templates/demo-store/app/components/Layout.tsx @@ -1,8 +1,8 @@ -import { - type EnhancedMenu, - type EnhancedMenuItem, - useIsHomePath, -} from '~/lib/utils'; +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 { Drawer, useDrawer, @@ -21,12 +21,14 @@ import { 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 { + type EnhancedMenu, + type EnhancedMenuItem, + useIsHomePath, +} from '~/lib/utils'; import {useIsHydrated} from '~/hooks/useIsHydrated'; import {useCartFetchers} from '~/hooks/useCartFetchers'; + import type {LayoutData} from '../root'; export function Layout({ diff --git a/templates/demo-store/app/components/OrderCard.tsx b/templates/demo-store/app/components/OrderCard.tsx index cdac0a51fa..f9dcbe529a 100644 --- a/templates/demo-store/app/components/OrderCard.tsx +++ b/templates/demo-store/app/components/OrderCard.tsx @@ -1,5 +1,6 @@ import {flattenConnection, Image} from '@shopify/hydrogen'; import type {Order} from '@shopify/hydrogen/storefront-api-types'; + import {Heading, Text, Link} from '~/components'; import {statusMessage} from '~/lib/utils'; diff --git a/templates/demo-store/app/components/Pagination.tsx b/templates/demo-store/app/components/Pagination.tsx index 75341fb4a2..db11048ad4 100644 --- a/templates/demo-store/app/components/Pagination.tsx +++ b/templates/demo-store/app/components/Pagination.tsx @@ -4,7 +4,6 @@ import type { PageInfo, ProductConnection, } from '@shopify/hydrogen/storefront-api-types'; - import {useInView, type IntersectionOptions} from 'react-intersection-observer'; import {useNavigation, useLocation, useNavigate} from '@remix-run/react'; diff --git a/templates/demo-store/app/components/ProductCard.tsx b/templates/demo-store/app/components/ProductCard.tsx index 4443754362..fc1e654f4d 100644 --- a/templates/demo-store/app/components/ProductCard.tsx +++ b/templates/demo-store/app/components/ProductCard.tsx @@ -1,15 +1,11 @@ import clsx from 'clsx'; -import { - flattenConnection, - Image, - Money, - ShopifyAnalyticsProduct, - useMoney, -} from '@shopify/hydrogen'; +import type {ShopifyAnalyticsProduct} from '@shopify/hydrogen'; +import {flattenConnection, Image, Money, useMoney} from '@shopify/hydrogen'; +import type {MoneyV2, Product} from '@shopify/hydrogen/storefront-api-types'; + 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'; export function ProductCard({ product, diff --git a/templates/demo-store/app/components/ProductGrid.tsx b/templates/demo-store/app/components/ProductGrid.tsx index b9b2f7d900..00813639b4 100644 --- a/templates/demo-store/app/components/ProductGrid.tsx +++ b/templates/demo-store/app/components/ProductGrid.tsx @@ -1,9 +1,10 @@ -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 {useEffect, useState} from 'react'; +import {getImageLoadingPriority} from '~/lib/const'; +import {Button, Grid, ProductCard, Link} from '~/components'; + export function ProductGrid({ url, collection, diff --git a/templates/demo-store/app/components/ProductSwimlane.tsx b/templates/demo-store/app/components/ProductSwimlane.tsx index bd295dd110..f35b784e65 100644 --- a/templates/demo-store/app/components/ProductSwimlane.tsx +++ b/templates/demo-store/app/components/ProductSwimlane.tsx @@ -1,4 +1,5 @@ import type {Product} from '@shopify/hydrogen/storefront-api-types'; + import {ProductCard, Section} from '~/components'; const mockProducts = new Array(12).fill(''); diff --git a/templates/demo-store/app/components/SortFilter.tsx b/templates/demo-store/app/components/SortFilter.tsx index 8580add8cd..2b541aafcc 100644 --- a/templates/demo-store/app/components/SortFilter.tsx +++ b/templates/demo-store/app/components/SortFilter.tsx @@ -1,23 +1,23 @@ -import {SyntheticEvent, useMemo, useState} from 'react'; +import type {SyntheticEvent} from 'react'; +import {useMemo, useState} from 'react'; import {Menu} from '@headlessui/react'; - -import {Heading, IconFilters, IconCaret, IconXMark, Text} from '~/components'; +import type {Location} from '@remix-run/react'; import { Link, useLocation, useSearchParams, - Location, useNavigate, } from '@remix-run/react'; import {useDebounce} from 'react-use'; import {Disclosure} from '@headlessui/react'; - import type { FilterType, Filter, Collection, } from '@shopify/hydrogen/storefront-api-types'; +import {Heading, IconFilters, IconCaret, IconXMark, Text} from '~/components'; + export type AppliedFilter = { label: string; urlParam: { diff --git a/templates/demo-store/app/data/countries.ts b/templates/demo-store/app/data/countries.ts index 262e480c4a..3855beb546 100644 --- a/templates/demo-store/app/data/countries.ts +++ b/templates/demo-store/app/data/countries.ts @@ -1,4 +1,4 @@ -import {Localizations} from '~/lib/type'; +import type {Localizations} from '~/lib/type'; export const countries: Localizations = { default: { diff --git a/templates/demo-store/app/hooks/useAnalytics.tsx b/templates/demo-store/app/hooks/useAnalytics.tsx index 4b759393d4..37b61935ec 100644 --- a/templates/demo-store/app/hooks/useAnalytics.tsx +++ b/templates/demo-store/app/hooks/useAnalytics.tsx @@ -1,14 +1,18 @@ import {useLocation, useFetchers, useMatches} from '@remix-run/react'; +import type { + ShopifyAddToCartPayload, + ShopifyPageViewPayload, +} from '@shopify/hydrogen'; import { AnalyticsEventName, getClientBrowserParameters, sendShopifyAnalytics, - ShopifyAddToCartPayload, - ShopifyPageViewPayload, useShopifyCookies, } from '@shopify/hydrogen'; import {useEffect} from 'react'; -import {CartAction, I18nLocale} from '../lib/type'; + +import type {I18nLocale} from '../lib/type'; +import {CartAction} from '../lib/type'; export function useAnalytics(hasUserConsent: boolean, locale: I18nLocale) { useShopifyCookies({hasUserConsent}); diff --git a/templates/demo-store/app/lib/placeholders.ts b/templates/demo-store/app/lib/placeholders.ts index 01843c4512..0bfb3ca129 100644 --- a/templates/demo-store/app/lib/placeholders.ts +++ b/templates/demo-store/app/lib/placeholders.ts @@ -1,4 +1,4 @@ -import {Product} from '@shopify/hydrogen/storefront-api-types'; +import type {Product} from '@shopify/hydrogen/storefront-api-types'; // Demo store placeholders const PLACEHOLDERS = { diff --git a/templates/demo-store/app/lib/utils.ts b/templates/demo-store/app/lib/utils.ts index 45c40e70ca..e67dcd1d7c 100644 --- a/templates/demo-store/app/lib/utils.ts +++ b/templates/demo-store/app/lib/utils.ts @@ -5,11 +5,12 @@ import type { Menu, MoneyV2, } from '@shopify/hydrogen/storefront-api-types'; - -// @ts-expect-error types not available import typographicBase from 'typographic-base'; + import {countries} from '~/data/countries'; -import {I18nLocale, Locale} from './type'; + +import type {I18nLocale} from './type'; +import {Locale} from './type'; export interface EnhancedMenuItem extends MenuItem { to: string; diff --git a/templates/demo-store/app/root.tsx b/templates/demo-store/app/root.tsx index fb29448186..65c4ecc0a7 100644 --- a/templates/demo-store/app/root.tsx +++ b/templates/demo-store/app/root.tsx @@ -16,20 +16,23 @@ import { useRouteError, } from '@remix-run/react'; import {ShopifySalesChannel, Seo} from '@shopify/hydrogen'; +import invariant from 'tiny-invariant'; +import type {Shop, Cart} from '@shopify/hydrogen/storefront-api-types'; + import {Layout} from '~/components'; +import {seoPayload} from '~/lib/seo.server'; + +import favicon from '../public/favicon.svg'; + import {GenericError} from './components/GenericError'; import {NotFound} from './components/NotFound'; import styles from './styles/app.css'; -import favicon from '../public/favicon.svg'; -import {seoPayload} from '~/lib/seo.server'; import { DEFAULT_LOCALE, parseMenu, getCartId, type EnhancedMenu, } from './lib/utils'; -import invariant from 'tiny-invariant'; -import {Shop, Cart} from '@shopify/hydrogen/storefront-api-types'; import {useAnalytics} from './hooks/useAnalytics'; export const links: LinksFunction = () => { diff --git a/templates/demo-store/app/routes/($locale).$shopid.orders.$token.authenticate.tsx b/templates/demo-store/app/routes/($locale).$shopid.orders.$token.authenticate.tsx index 64f2a7f1c7..29616e7870 100644 --- a/templates/demo-store/app/routes/($locale).$shopid.orders.$token.authenticate.tsx +++ b/templates/demo-store/app/routes/($locale).$shopid.orders.$token.authenticate.tsx @@ -1,6 +1,7 @@ -import {Shop} from '@shopify/hydrogen/storefront-api-types'; +import type {Shop} from '@shopify/hydrogen/storefront-api-types'; import {redirect, type LoaderArgs} from '@shopify/remix-oxygen'; import invariant from 'tiny-invariant'; + import {Button, PageHeader} from '~/components'; /* diff --git a/templates/demo-store/app/routes/($locale)._index.tsx b/templates/demo-store/app/routes/($locale)._index.tsx index 762e2e5677..dceba4e58e 100644 --- a/templates/demo-store/app/routes/($locale)._index.tsx +++ b/templates/demo-store/app/routes/($locale)._index.tsx @@ -1,15 +1,16 @@ import {defer, type LoaderArgs} from '@shopify/remix-oxygen'; import {Suspense} from 'react'; import {Await, useLoaderData} from '@remix-run/react'; -import {ProductSwimlane, FeaturedCollections, Hero} from '~/components'; -import {MEDIA_FRAGMENT, PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; -import {getHeroPlaceholder} from '~/lib/placeholders'; -import {seoPayload} from '~/lib/seo.server'; import type { CollectionConnection, ProductConnection, } from '@shopify/hydrogen/storefront-api-types'; import {AnalyticsPageType} from '@shopify/hydrogen'; + +import {ProductSwimlane, FeaturedCollections, Hero} from '~/components'; +import {MEDIA_FRAGMENT, PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; +import {getHeroPlaceholder} from '~/lib/placeholders'; +import {seoPayload} from '~/lib/seo.server'; import {routeHeaders, CACHE_SHORT} from '~/data/cache'; import {type CollectionHero} from '~/components/Hero'; diff --git a/templates/demo-store/app/routes/($locale).account.activate.$id.$activationToken.tsx b/templates/demo-store/app/routes/($locale).account.activate.$id.$activationToken.tsx index e6c7872a1d..a0ef4d7f56 100644 --- a/templates/demo-store/app/routes/($locale).account.activate.$id.$activationToken.tsx +++ b/templates/demo-store/app/routes/($locale).account.activate.$id.$activationToken.tsx @@ -1,9 +1,10 @@ import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen'; import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; import {useRef, useState} from 'react'; -import {getInputStyleClasses} from '~/lib/utils'; import type {CustomerActivatePayload} from '@shopify/hydrogen/storefront-api-types'; +import {getInputStyleClasses} from '~/lib/utils'; + type ActionData = { formError?: string; }; diff --git a/templates/demo-store/app/routes/($locale).account.address.$id.tsx b/templates/demo-store/app/routes/($locale).account.address.$id.tsx index 42e67eae89..2de086157d 100644 --- a/templates/demo-store/app/routes/($locale).account.address.$id.tsx +++ b/templates/demo-store/app/routes/($locale).account.address.$id.tsx @@ -15,8 +15,10 @@ import type { CustomerAddressCreatePayload, } from '@shopify/hydrogen/storefront-api-types'; import invariant from 'tiny-invariant'; + import {Button, Text} from '~/components'; import {assertApiErrors, getInputStyleClasses} from '~/lib/utils'; + import type {AccountOutletContext} from './($locale).account.edit'; interface ActionData { diff --git a/templates/demo-store/app/routes/($locale).account.edit.tsx b/templates/demo-store/app/routes/($locale).account.edit.tsx index a0b79193c3..eebd02ea0f 100644 --- a/templates/demo-store/app/routes/($locale).account.edit.tsx +++ b/templates/demo-store/app/routes/($locale).account.edit.tsx @@ -12,8 +12,10 @@ import type { } from '@shopify/hydrogen/storefront-api-types'; import clsx from 'clsx'; import invariant from 'tiny-invariant'; + import {Button, Text} from '~/components'; import {getInputStyleClasses, assertApiErrors} from '~/lib/utils'; + import {getCustomer} from './($locale).account'; export interface AccountOutletContext { diff --git a/templates/demo-store/app/routes/($locale).account.login.tsx b/templates/demo-store/app/routes/($locale).account.login.tsx index e9390e109d..06448c6ee1 100644 --- a/templates/demo-store/app/routes/($locale).account.login.tsx +++ b/templates/demo-store/app/routes/($locale).account.login.tsx @@ -12,9 +12,10 @@ import { type V2_MetaFunction, } from '@remix-run/react'; import {useState} from 'react'; +import type {CustomerAccessTokenCreatePayload} from '@shopify/hydrogen/storefront-api-types'; + import {getInputStyleClasses} from '~/lib/utils'; import {Link} from '~/components'; -import type {CustomerAccessTokenCreatePayload} from '@shopify/hydrogen/storefront-api-types'; export const handle = { isPublic: true, diff --git a/templates/demo-store/app/routes/($locale).account.orders.$id.tsx b/templates/demo-store/app/routes/($locale).account.orders.$id.tsx index c377fd3b6e..1998141c21 100644 --- a/templates/demo-store/app/routes/($locale).account.orders.$id.tsx +++ b/templates/demo-store/app/routes/($locale).account.orders.$id.tsx @@ -3,12 +3,13 @@ import clsx from 'clsx'; import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen'; import {useLoaderData, type V2_MetaFunction} from '@remix-run/react'; import {Money, Image, flattenConnection} from '@shopify/hydrogen'; -import {statusMessage} from '~/lib/utils'; import type { Order, OrderLineItem, DiscountApplicationConnection, } from '@shopify/hydrogen/storefront-api-types'; + +import {statusMessage} from '~/lib/utils'; import {Link, Heading, PageHeader, Text} from '~/components'; export const meta: V2_MetaFunction = ({data}) => { diff --git a/templates/demo-store/app/routes/($locale).account.recover.tsx b/templates/demo-store/app/routes/($locale).account.recover.tsx index f62ce2739c..77cff9605c 100644 --- a/templates/demo-store/app/routes/($locale).account.recover.tsx +++ b/templates/demo-store/app/routes/($locale).account.recover.tsx @@ -6,9 +6,10 @@ import { } from '@shopify/remix-oxygen'; import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; import {useState} from 'react'; +import type {CustomerRecoverPayload} from '@shopify/hydrogen/storefront-api-types'; + import {Link} from '~/components'; import {getInputStyleClasses} from '~/lib/utils'; -import type {CustomerRecoverPayload} from '@shopify/hydrogen/storefront-api-types'; export async function loader({context, params}: LoaderArgs) { const customerAccessToken = await context.session.get('customerAccessToken'); diff --git a/templates/demo-store/app/routes/($locale).account.register.tsx b/templates/demo-store/app/routes/($locale).account.register.tsx index 95e41b0d13..7ea4d4d497 100644 --- a/templates/demo-store/app/routes/($locale).account.register.tsx +++ b/templates/demo-store/app/routes/($locale).account.register.tsx @@ -6,11 +6,13 @@ import { } from '@shopify/remix-oxygen'; import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; import {useState} from 'react'; -import {getInputStyleClasses} from '~/lib/utils'; -import {doLogin} from './($locale).account.login'; import type {CustomerCreatePayload} from '@shopify/hydrogen/storefront-api-types'; + +import {getInputStyleClasses} from '~/lib/utils'; import {Link} from '~/components'; +import {doLogin} from './($locale).account.login'; + export async function loader({context, params}: LoaderArgs) { const customerAccessToken = await context.session.get('customerAccessToken'); diff --git a/templates/demo-store/app/routes/($locale).account.reset.$id.$resetToken.tsx b/templates/demo-store/app/routes/($locale).account.reset.$id.$resetToken.tsx index 9701015b2f..07eecdd1f7 100644 --- a/templates/demo-store/app/routes/($locale).account.reset.$id.$resetToken.tsx +++ b/templates/demo-store/app/routes/($locale).account.reset.$id.$resetToken.tsx @@ -1,9 +1,10 @@ import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen'; import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react'; import {useRef, useState} from 'react'; -import {getInputStyleClasses} from '~/lib/utils'; import type {CustomerResetPayload} from '@shopify/hydrogen/storefront-api-types'; +import {getInputStyleClasses} from '~/lib/utils'; + type ActionData = { formError?: string; }; diff --git a/templates/demo-store/app/routes/($locale).account.tsx b/templates/demo-store/app/routes/($locale).account.tsx index 0aba55380f..17c5127eac 100644 --- a/templates/demo-store/app/routes/($locale).account.tsx +++ b/templates/demo-store/app/routes/($locale).account.tsx @@ -13,6 +13,15 @@ import type { Order, } from '@shopify/hydrogen/storefront-api-types'; import {Suspense} from 'react'; +import { + json, + defer, + redirect, + type LoaderArgs, + type AppLoadContext, +} from '@shopify/remix-oxygen'; +import {flattenConnection} from '@shopify/hydrogen'; + import { Button, OrderCard, @@ -24,19 +33,12 @@ import { ProductSwimlane, } from '~/components'; import {FeaturedCollections} from '~/components/FeaturedCollections'; -import { - json, - defer, - redirect, - type LoaderArgs, - type AppLoadContext, -} from '@shopify/remix-oxygen'; -import {flattenConnection} from '@shopify/hydrogen'; -import {getFeaturedData} from './($locale).featured-products'; -import {doLogout} from './($locale).account.logout'; import {usePrefixPathWithLocale} from '~/lib/utils'; import {CACHE_NONE, routeHeaders} from '~/data/cache'; +import {getFeaturedData} from './($locale).featured-products'; +import {doLogout} from './($locale).account.logout'; + // Combining json + Response + defer in a loader breaks the // types returned by useLoaderData. This is a temporary fix. type TmpRemixFix = ReturnType>; @@ -109,7 +111,7 @@ export default function Authenticated() { - + ); } else { @@ -117,10 +119,10 @@ export default function Authenticated() { } } - return ; + return ; } -interface Account { +interface AccountType { customer: Customer; orders: Order[]; heading: string; @@ -134,7 +136,7 @@ function Account({ heading, addresses, featuredData, -}: Account) { +}: AccountType) { return ( <> diff --git a/templates/demo-store/app/routes/($locale).api.countries.tsx b/templates/demo-store/app/routes/($locale).api.countries.tsx index e786b600d0..47be05afeb 100644 --- a/templates/demo-store/app/routes/($locale).api.countries.tsx +++ b/templates/demo-store/app/routes/($locale).api.countries.tsx @@ -1,4 +1,5 @@ import {json} from '@shopify/remix-oxygen'; + import {CACHE_LONG} from '~/data/cache'; import {countries} from '~/data/countries'; diff --git a/templates/demo-store/app/routes/($locale).api.products.tsx b/templates/demo-store/app/routes/($locale).api.products.tsx index 715849ee35..caad776be9 100644 --- a/templates/demo-store/app/routes/($locale).api.products.tsx +++ b/templates/demo-store/app/routes/($locale).api.products.tsx @@ -1,7 +1,8 @@ import {json, type LoaderArgs} from '@shopify/remix-oxygen'; import {flattenConnection} from '@shopify/hydrogen'; -import {ProductConnection} from '@shopify/hydrogen/storefront-api-types'; +import type {ProductConnection} from '@shopify/hydrogen/storefront-api-types'; import invariant from 'tiny-invariant'; + import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; /** diff --git a/templates/demo-store/app/routes/($locale).cart.$lines.tsx b/templates/demo-store/app/routes/($locale).cart.$lines.tsx index b1e79d3996..0b09e9f021 100644 --- a/templates/demo-store/app/routes/($locale).cart.$lines.tsx +++ b/templates/demo-store/app/routes/($locale).cart.$lines.tsx @@ -1,4 +1,5 @@ import {redirect, type LoaderArgs} from '@shopify/remix-oxygen'; + import {cartCreate} from './($locale).cart'; /** diff --git a/templates/demo-store/app/routes/($locale).cart.tsx b/templates/demo-store/app/routes/($locale).cart.tsx index efd77c8585..e072997f2e 100644 --- a/templates/demo-store/app/routes/($locale).cart.tsx +++ b/templates/demo-store/app/routes/($locale).cart.tsx @@ -1,4 +1,3 @@ -import {CartLoading, Cart} from '~/components'; import {Await, useMatches} from '@remix-run/react'; import {Suspense} from 'react'; import invariant from 'tiny-invariant'; @@ -16,6 +15,8 @@ import type { UserError, CartBuyerIdentityInput, } from '@shopify/hydrogen/storefront-api-types'; + +import {CartLoading, Cart} from '~/components'; import {isLocalPath, getCartId} from '~/lib/utils'; import {CartAction, type CartActions} from '~/lib/type'; diff --git a/templates/demo-store/app/routes/($locale).collections.$collectionHandle.tsx b/templates/demo-store/app/routes/($locale).collections.$collectionHandle.tsx index d9e584aa5b..11d1eb78af 100644 --- a/templates/demo-store/app/routes/($locale).collections.$collectionHandle.tsx +++ b/templates/demo-store/app/routes/($locale).collections.$collectionHandle.tsx @@ -7,6 +7,7 @@ import type { } from '@shopify/hydrogen/storefront-api-types'; import {flattenConnection, AnalyticsPageType} from '@shopify/hydrogen'; import invariant from 'tiny-invariant'; + import {PageHeader, Section, Text, SortFilter} from '~/components'; import {ProductGrid} from '~/components/ProductGrid'; import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; diff --git a/templates/demo-store/app/routes/($locale).collections._index.tsx b/templates/demo-store/app/routes/($locale).collections._index.tsx index f71b3663a3..42fc997195 100644 --- a/templates/demo-store/app/routes/($locale).collections._index.tsx +++ b/templates/demo-store/app/routes/($locale).collections._index.tsx @@ -4,6 +4,8 @@ import type { Collection, CollectionConnection, } from '@shopify/hydrogen/storefront-api-types'; +import {Image} from '@shopify/hydrogen'; + import { Grid, Heading, @@ -17,7 +19,6 @@ import { import {getImageLoadingPriority} from '~/lib/const'; import {seoPayload} from '~/lib/seo.server'; import {CACHE_SHORT, routeHeaders} from '~/data/cache'; -import {Image} from '@shopify/hydrogen'; const PAGINATION_SIZE = 8; diff --git a/templates/demo-store/app/routes/($locale).discount.$code.tsx b/templates/demo-store/app/routes/($locale).discount.$code.tsx index 7880e694de..d38a77cf0c 100644 --- a/templates/demo-store/app/routes/($locale).discount.$code.tsx +++ b/templates/demo-store/app/routes/($locale).discount.$code.tsx @@ -1,5 +1,7 @@ import {redirect, type LoaderArgs} from '@shopify/remix-oxygen'; + import {getCartId} from '~/lib/utils'; + import {cartCreate, cartDiscountCodesUpdate} from './($locale).cart'; /** diff --git a/templates/demo-store/app/routes/($locale).featured-products.tsx b/templates/demo-store/app/routes/($locale).featured-products.tsx index f839831f88..84c921606e 100644 --- a/templates/demo-store/app/routes/($locale).featured-products.tsx +++ b/templates/demo-store/app/routes/($locale).featured-products.tsx @@ -5,6 +5,7 @@ import type { ProductConnection, } from '@shopify/hydrogen/storefront-api-types'; import invariant from 'tiny-invariant'; + import {PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; export async function loader({context: {storefront}}: LoaderArgs) { diff --git a/templates/demo-store/app/routes/($locale).journal.$journalHandle.tsx b/templates/demo-store/app/routes/($locale).journal.$journalHandle.tsx index de4529b74a..a92f661095 100644 --- a/templates/demo-store/app/routes/($locale).journal.$journalHandle.tsx +++ b/templates/demo-store/app/routes/($locale).journal.$journalHandle.tsx @@ -1,13 +1,15 @@ import {json, type LinksFunction, type LoaderArgs} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; import {Image} from '@shopify/hydrogen'; -import {Blog} from '@shopify/hydrogen/storefront-api-types'; +import type {Blog} from '@shopify/hydrogen/storefront-api-types'; import invariant from 'tiny-invariant'; + import {PageHeader, Section} from '~/components'; import {seoPayload} from '~/lib/seo.server'; -import styles from '../styles/custom-font.css'; import {routeHeaders, CACHE_LONG} from '~/data/cache'; +import styles from '../styles/custom-font.css'; + const BLOG_HANDLE = 'journal'; export const headers = routeHeaders; diff --git a/templates/demo-store/app/routes/($locale).journal._index.tsx b/templates/demo-store/app/routes/($locale).journal._index.tsx index 0af80ac8dc..1cc1bde88f 100644 --- a/templates/demo-store/app/routes/($locale).journal._index.tsx +++ b/templates/demo-store/app/routes/($locale).journal._index.tsx @@ -2,6 +2,7 @@ import {json, type LoaderArgs} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; import {flattenConnection, Image} from '@shopify/hydrogen'; import type {Article, Blog} from '@shopify/hydrogen/storefront-api-types'; + import {Grid, PageHeader, Section, Link} from '~/components'; import {getImageLoadingPriority, PAGINATION_SIZE} from '~/lib/const'; import {seoPayload} from '~/lib/seo.server'; diff --git a/templates/demo-store/app/routes/($locale).pages.$pageHandle.tsx b/templates/demo-store/app/routes/($locale).pages.$pageHandle.tsx index 3edc79d1b5..2b8dffc817 100644 --- a/templates/demo-store/app/routes/($locale).pages.$pageHandle.tsx +++ b/templates/demo-store/app/routes/($locale).pages.$pageHandle.tsx @@ -2,6 +2,7 @@ import {json, type LoaderArgs} from '@shopify/remix-oxygen'; import type {Page as PageType} from '@shopify/hydrogen/storefront-api-types'; import {useLoaderData} from '@remix-run/react'; import invariant from 'tiny-invariant'; + import {PageHeader} from '~/components'; import {CACHE_LONG, routeHeaders} from '~/data/cache'; import {seoPayload} from '~/lib/seo.server'; diff --git a/templates/demo-store/app/routes/($locale).policies.$policyHandle.tsx b/templates/demo-store/app/routes/($locale).policies.$policyHandle.tsx index 5e7e796732..d1242e5cac 100644 --- a/templates/demo-store/app/routes/($locale).policies.$policyHandle.tsx +++ b/templates/demo-store/app/routes/($locale).policies.$policyHandle.tsx @@ -1,8 +1,9 @@ import {json, type MetaFunction, type LoaderArgs} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; -import {PageHeader, Section, Button} from '~/components'; import invariant from 'tiny-invariant'; -import {ShopPolicy} from '@shopify/hydrogen/storefront-api-types'; +import type {ShopPolicy} from '@shopify/hydrogen/storefront-api-types'; + +import {PageHeader, Section, Button} from '~/components'; import {routeHeaders, CACHE_LONG} from '~/data/cache'; import {seoPayload} from '~/lib/seo.server'; diff --git a/templates/demo-store/app/routes/($locale).policies._index.tsx b/templates/demo-store/app/routes/($locale).policies._index.tsx index f8afdb0ac3..fcf9abbe2e 100644 --- a/templates/demo-store/app/routes/($locale).policies._index.tsx +++ b/templates/demo-store/app/routes/($locale).policies._index.tsx @@ -2,6 +2,7 @@ import {json, type LoaderArgs} from '@shopify/remix-oxygen'; import {useLoaderData} from '@remix-run/react'; import type {ShopPolicy} from '@shopify/hydrogen/storefront-api-types'; import invariant from 'tiny-invariant'; + import {PageHeader, Section, Heading, Link} from '~/components'; import {routeHeaders, CACHE_LONG} from '~/data/cache'; import {seoPayload} from '~/lib/seo.server'; diff --git a/templates/demo-store/app/routes/($locale).products.$productHandle.tsx b/templates/demo-store/app/routes/($locale).products.$productHandle.tsx index 28d96ef491..f0e553748d 100644 --- a/templates/demo-store/app/routes/($locale).products.$productHandle.tsx +++ b/templates/demo-store/app/routes/($locale).products.$productHandle.tsx @@ -8,13 +8,18 @@ import { useLocation, useNavigation, } from '@remix-run/react'; +import type {ShopifyAnalyticsProduct} from '@shopify/hydrogen'; +import {AnalyticsPageType, Money, ShopPayButton} from '@shopify/hydrogen'; +import invariant from 'tiny-invariant'; +import clsx from 'clsx'; +import type { + ProductVariant, + SelectedOptionInput, + Product as ProductType, + Shop, + ProductConnection, +} from '@shopify/hydrogen/storefront-api-types'; -import { - AnalyticsPageType, - Money, - ShopifyAnalyticsProduct, - ShopPayButton, -} from '@shopify/hydrogen'; import { Heading, IconCaret, @@ -31,18 +36,8 @@ import { } from '~/components'; import {getExcerpt} from '~/lib/utils'; import {seoPayload} from '~/lib/seo.server'; -import invariant from 'tiny-invariant'; -import clsx from 'clsx'; -import type { - ProductVariant, - SelectedOptionInput, - Product as ProductType, - Shop, - ProductConnection, -} from '@shopify/hydrogen/storefront-api-types'; import {MEDIA_FRAGMENT, PRODUCT_CARD_FRAGMENT} from '~/data/fragments'; import type {Storefront} from '~/lib/type'; -import type {Product} from 'schema-dts'; import {routeHeaders, CACHE_SHORT} from '~/data/cache'; export const headers = routeHeaders; diff --git a/templates/demo-store/app/routes/($locale).products._index.tsx b/templates/demo-store/app/routes/($locale).products._index.tsx index 897f9b9e00..0d70480393 100644 --- a/templates/demo-store/app/routes/($locale).products._index.tsx +++ b/templates/demo-store/app/routes/($locale).products._index.tsx @@ -5,6 +5,7 @@ import type { Collection, } from '@shopify/hydrogen/storefront-api-types'; import invariant from 'tiny-invariant'; + import { PageHeader, Section, diff --git a/templates/demo-store/app/routes/($locale).search.tsx b/templates/demo-store/app/routes/($locale).search.tsx index f8d68be348..208956d905 100644 --- a/templates/demo-store/app/routes/($locale).search.tsx +++ b/templates/demo-store/app/routes/($locale).search.tsx @@ -13,6 +13,7 @@ import type { } from '@shopify/hydrogen/storefront-api-types'; import {Suspense} from 'react'; import invariant from 'tiny-invariant'; + import { Heading, Input, diff --git a/templates/demo-store/app/routes/[sitemap.xml].tsx b/templates/demo-store/app/routes/[sitemap.xml].tsx index ee64674776..3f8fb6c4d7 100644 --- a/templates/demo-store/app/routes/[sitemap.xml].tsx +++ b/templates/demo-store/app/routes/[sitemap.xml].tsx @@ -1,6 +1,6 @@ import {flattenConnection} from '@shopify/hydrogen'; import type {LoaderArgs} from '@shopify/remix-oxygen'; -import { +import type { CollectionConnection, PageConnection, ProductConnection, diff --git a/templates/demo-store/server.ts b/templates/demo-store/server.ts index 5ca5cf1fe9..94f4889ac0 100644 --- a/templates/demo-store/server.ts +++ b/templates/demo-store/server.ts @@ -5,6 +5,7 @@ import { getStorefrontHeaders, } from '@shopify/remix-oxygen'; import {createStorefrontClient, storefrontRedirect} from '@shopify/hydrogen'; + import {HydrogenSession} from '~/lib/session.server'; import {getLocaleFromRequest} from '~/lib/utils'; diff --git a/templates/demo-store/typographic-base.d.ts b/templates/demo-store/typographic-base.d.ts new file mode 100644 index 0000000000..540141d119 --- /dev/null +++ b/templates/demo-store/typographic-base.d.ts @@ -0,0 +1 @@ +declare module 'typographic-base';