Make types independent of Sh

app/product/[handle]/page.tsx

@@ -11,7 +11,7 @@ import { VariantSelector } from 'components/product/variant-selector';
 import Prose from 'components/prose';
 import { HIDDEN_PRODUCT_TAG } from 'lib/constants';
 import { getProduct, getProductRecommendations } from 'lib/shopify';
-import { Image } from 'lib/shopify/types';
+import { Image } from 'lib/types';
 
 export const runtime = 'edge';
 

components/cart/button.tsx

@@ -6,7 +6,7 @@ import { useCookies } from 'react-cookie';
 import CartIcon from 'components/icons/cart';
 import CartModal from './modal';
 
-import type { Cart } from 'lib/shopify/types';
+import type { Cart } from 'lib/types';
 
 export default function CartButton({
   cart,

components/cart/delete-item-button.tsx

@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation';
 import { startTransition, useState } from 'react';
 
 import clsx from 'clsx';
-import type { CartItem } from 'lib/shopify/types';
+import type { CartItem } from 'lib/types';
 
 export default function DeleteItemButton({ item }: { item: CartItem }) {
   const router = useRouter();

components/cart/edit-item-quantity-button.tsx

@@ -4,7 +4,7 @@ import { startTransition, useState } from 'react';
 import clsx from 'clsx';
 import MinusIcon from 'components/icons/minus';
 import PlusIcon from 'components/icons/plus';
-import type { CartItem } from 'lib/shopify/types';
+import type { CartItem } from 'lib/types';
 import LoadingDots from '../loading-dots';
 
 export default function EditItemQuantityButton({

components/cart/modal.tsx

@@ -7,7 +7,7 @@ import CloseIcon from 'components/icons/close';
 import ShoppingBagIcon from 'components/icons/shopping-bag';
 import Price from 'components/price';
 import { DEFAULT_OPTION } from 'lib/constants';
-import type { Cart } from 'lib/shopify/types';
+import type { Cart } from 'lib/types';
 import { createUrl } from 'lib/utils';
 import DeleteItemButton from './delete-item-button';
 import EditItemQuantityButton from './edit-item-quantity-button';

components/grid/three-items.tsx

@@ -1,6 +1,6 @@
 import { GridTileImage } from 'components/grid/tile';
 import { getCollectionProducts } from 'lib/shopify';
-import type { Product } from 'lib/shopify/types';
+import type { Product } from 'lib/types';
 import Link from 'next/link';
 
 function ThreeItemGridItem({

components/layout/footer.tsx

@@ -4,7 +4,7 @@ import GitHubIcon from 'components/icons/github';
 import LogoIcon from 'components/icons/logo';
 import VercelIcon from 'components/icons/vercel';
 import { getMenu } from 'lib/shopify';
-import { Menu } from 'lib/shopify/types';
+import { Menu } from 'lib/types';
 
 const { SITE_NAME } = process.env;
 

components/layout/navbar/index.tsx

@@ -5,7 +5,7 @@ import Cart from 'components/cart';
 import CartIcon from 'components/icons/cart';
 import LogoIcon from 'components/icons/logo';
 import { getMenu } from 'lib/shopify';
-import { Menu } from 'lib/shopify/types';
+import { Menu } from 'lib/types';
 import MobileMenu from './mobile-menu';
 import Search from './search';
 

components/layout/navbar/mobile-menu.tsx

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 
 import CloseIcon from 'components/icons/close';
 import MenuIcon from 'components/icons/menu';
-import { Menu } from 'lib/shopify/types';
+import { Menu } from 'lib/types';
 import Search from './search';
 
 export default function MobileMenu({ menu }: { menu: Menu[] }) {

components/layout/product-grid-items.tsx

@@ -1,6 +1,6 @@
 import Grid from 'components/grid';
 import { GridTileImage } from 'components/grid/tile';
-import { Product } from 'lib/shopify/types';
+import { Product } from 'lib/types';
 import Link from 'next/link';
 
 export default function ProductGridItems({ products }: { products: Product[] }) {

components/product/add-to-cart.tsx

@@ -5,7 +5,7 @@ import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useState, useTransition } from 'react';
 
 import LoadingDots from 'components/loading-dots';
-import { ProductVariant } from 'lib/shopify/types';
+import { ProductVariant } from 'lib/types';
 
 export function AddToCart({
   variants,

components/product/variant-selector.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { ProductOption, ProductVariant } from 'lib/shopify/types';
+import { ProductOption, ProductVariant } from 'lib/types';
 import { createUrl } from 'lib/utils';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';

lib/saleor/fragments/FeaturedProductFragment.graphql

@@ -0,0 +1,20 @@
+fragment FeaturedProduct on Product {
+  id
+  slug
+  name
+  pricing {
+    priceRange {
+      stop {
+        gross {
+          currency
+          amount
+        }
+      }
+    }
+  }
+  media {
+    url(size: 2160)
+    type
+    alt
+  }
+}

lib/saleor/fragments/MenuFragment.graphql

@@ -0,0 +1,21 @@
+fragment Menu on Menu {
+  id
+  name
+  items {
+    ...MenuItem
+  }
+}
+fragment MenuItem on MenuItem {
+  id
+  name
+  url
+  collection {
+    slug
+  }
+  children {
+    id
+    collection {
+      slug
+    }
+  }
+}

lib/saleor/queries/GetCollections.graphql

@@ -0,0 +1,11 @@
+query GetCollections {
+  collections(channel: "default-channel", first: 100) {
+    edges {
+      node {
+        id
+        name
+        slug
+      }
+    }
+  }
+}

lib/saleor/queries/GetFeaturedProducts.graphql

@@ -0,0 +1,9 @@
+query GetFeaturedProducts($first: Int!) {
+  products(first: $first, channel: "default-channel") {
+    edges {
+      node {
+        ...FeaturedProduct
+      }
+    }
+  }
+}

lib/saleor/queries/GetMenu.graphql

@@ -0,0 +1,5 @@
+query GetMenu($name: String!) {
+  menu(name: $name, channel: "default-channel") {
+    ...Menu
+  }
+}

lib/saleor/queries/SearchProducts.graphql

@@ -0,0 +1,18 @@
+query SearchProducts(
+  $search: String!
+  $sortBy: ProductOrderField!
+  $sortDirection: OrderDirection!
+) {
+  products(
+    first: 100
+    channel: "default-channel"
+    sortBy: { field: $sortBy, direction: $sortDirection }
+    filter: { search: $search }
+  ) {
+    edges {
+      node {
+        ...FeaturedProduct
+      }
+    }
+  }
+}

lib/saleor/queries/test.graphql

@@ -0,0 +1,9 @@
+query GetProducts {
+  products(first: 10, channel: "default-channel") {
+    edges {
+      node {
+        name
+      }
+    }
+  }
+}

lib/types.ts

@@ -0,0 +1,263 @@
+export type Maybe<T> = T | null;
+
+export type Connection<T> = {
+  edges: Array<Edge<T>>;
+};
+
+export type Edge<T> = {
+  node: T;
+};
+
+export type Cart = Omit<VercelCommerceCart, 'lines'> & {
+  lines: CartItem[];
+};
+
+export type CartItem = {
+  id: string;
+  quantity: number;
+  cost: {
+    totalAmount: Money;
+  };
+  merchandise: {
+    id: string;
+    title: string;
+    selectedOptions: {
+      name: string;
+      value: string;
+    }[];
+    product: Product;
+  };
+};
+
+export type Collection = VercelCommerceCollection & {
+  path: string;
+};
+
+export type Image = {
+  url: string;
+  altText: string;
+  width: number;
+  height: number;
+};
+
+export type Menu = {
+  title: string;
+  path: string;
+};
+
+export type Money = {
+  amount: string;
+  currencyCode: string;
+};
+
+export type Page = {
+  id: string;
+  title: string;
+  handle: string;
+  body: string;
+  bodySummary: string;
+  seo?: SEO;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type Product = Omit<VercelCommerceProduct, 'variants' | 'images'> & {
+  variants: ProductVariant[];
+  images: Image[];
+};
+
+export type ProductOption = {
+  id: string;
+  name: string;
+  values: string[];
+};
+
+export type ProductVariant = {
+  id: string;
+  title: string;
+  availableForSale: boolean;
+  selectedOptions: {
+    name: string;
+    value: string;
+  }[];
+  price: Money;
+};
+
+export type SEO = {
+  title: string;
+  description: string;
+};
+
+export type VercelCommerceCart = {
+  id: string;
+  checkoutUrl: string;
+  cost: {
+    subtotalAmount: Money;
+    totalAmount: Money;
+    totalTaxAmount: Money;
+  };
+  lines: Connection<CartItem>;
+  totalQuantity: number;
+};
+
+export type VercelCommerceCollection = {
+  handle: string;
+  title: string;
+  description: string;
+  seo: SEO;
+  updatedAt: string;
+};
+
+export type VercelCommerceProduct = {
+  id: string;
+  handle: string;
+  availableForSale: boolean;
+  title: string;
+  description: string;
+  descriptionHtml: string;
+  options: ProductOption[];
+  priceRange: {
+    maxVariantPrice: Money;
+    minVariantPrice: Money;
+  };
+  variants: Connection<ProductVariant>;
+  featuredImage: Image;
+  images: Connection<Image>;
+  seo: SEO;
+  tags: string[];
+  updatedAt: string;
+};
+
+export type VercelCommerceCartOperation = {
+  data: {
+    cart: VercelCommerceCart;
+  };
+  variables: {
+    cartId: string;
+  };
+};
+
+export type VercelCommerceCreateCartOperation = {
+  data: { cartCreate: { cart: VercelCommerceCart } };
+};
+
+export type VercelCommerceAddToCartOperation = {
+  data: {
+    cartLinesAdd: {
+      cart: VercelCommerceCart;
+    };
+  };
+  variables: {
+    cartId: string;
+    lines: {
+      merchandiseId: string;
+      quantity: number;
+    }[];
+  };
+};
+
+export type VercelCommerceRemoveFromCartOperation = {
+  data: {
+    cartLinesRemove: {
+      cart: VercelCommerceCart;
+    };
+  };
+  variables: {
+    cartId: string;
+    lineIds: string[];
+  };
+};
+
+export type VercelCommerceUpdateCartOperation = {
+  data: {
+    cartLinesUpdate: {
+      cart: VercelCommerceCart;
+    };
+  };
+  variables: {
+    cartId: string;
+    lines: {
+      id: string;
+      merchandiseId: string;
+      quantity: number;
+    }[];
+  };
+};
+
+export type VercelCommerceCollectionOperation = {
+  data: {
+    collection: VercelCommerceCollection;
+  };
+  variables: {
+    handle: string;
+  };
+};
+
+export type VercelCommerceCollectionProductsOperation = {
+  data: {
+    collection: {
+      products: Connection<VercelCommerceProduct>;
+    };
+  };
+  variables: {
+    handle: string;
+  };
+};
+
+export type VercelCommerceCollectionsOperation = {
+  data: {
+    collections: Connection<VercelCommerceCollection>;
+  };
+};
+
+export type VercelCommerceMenuOperation = {
+  data: {
+    menu?: {
+      items: {
+        title: string;
+        url: string;
+      }[];
+    };
+  };
+  variables: {
+    handle: string;
+  };
+};
+
+export type VercelCommercePageOperation = {
+  data: { pageByHandle: Page };
+  variables: { handle: string };
+};
+
+export type VercelCommercePagesOperation = {
+  data: {
+    pages: Connection<Page>;
+  };
+};
+
+export type VercelCommerceProductOperation = {
+  data: { product: VercelCommerceProduct };
+  variables: {
+    handle: string;
+  };
+};
+
+export type VercelCommerceProductRecommendationsOperation = {
+  data: {
+    productRecommendations: VercelCommerceProduct[];
+  };
+  variables: {
+    productId: string;
+  };
+};
+
+export type VercelCommerceProductsOperation = {
+  data: {
+    products: Connection<VercelCommerceProduct>;
+  };
+  variables: {
+    query?: string;
+    reverse?: boolean;
+    sortKey?: string;
+  };
+};