Work with displaying content

app/[locale]/globals.css

@@ -56,6 +56,10 @@ body {
   @apply !m-0 !rounded-none !w-12 !h-4 !bg-transparent after:content-[''] after:block after:w-12 after:h-[3px] after:bg-ui-border 2xl:!w-16 2xl:after:w-16;
 }
 
+.glider-slide {
+  @apply max-w-full;
+}
+
 .glider-dot.active {
   @apply after:!bg-high-contrast;
 }

components/grid/tile.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import Image from 'next/image';
 
-import Price from 'components/price';
+import Price from 'components/product/price';
 
 export function GridTileImage({
   isInteractive = true,

components/product/add-to-cart.tsx

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

components/product/price.tsx

@@ -1,17 +1,19 @@
 const Price = ({
   amount,
-  currencyCode = 'USD',
+  currencyCode,
   ...props
 }: {
   amount: string;
-  currencyCode: string;
+  currencyCode: string | 'SEK' | 'GPB';
 } & React.ComponentProps<'p'>) => (
   <p suppressHydrationWarning={true} {...props}>
+    
     {`${new Intl.NumberFormat(undefined, {
       style: 'currency',
       currency: currencyCode,
       currencyDisplay: 'narrowSymbol'
     }).format(parseFloat(amount))} ${currencyCode}`}
+    
   </p>
 );
 

components/ui/blurb-section/blurb-section.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   CarouselItemProps as ItemProps,
   CarouselProps as Props,

components/ui/card/index.tsx

@@ -1 +1,2 @@
-export { default } from './Card'
+export { default } from './card';
+

components/ui/carousel/carousel.tsx

@@ -12,7 +12,7 @@ export interface CarouselItemProps {
 export const CarouselItem: React.FC<CarouselItemProps> = ({
   children,
 }: CarouselItemProps) => {
-  return <div className="">{children}</div>
+  return <>{children}</>
 }
 
 export interface CarouselProps {
@@ -39,7 +39,7 @@ export const Carousel: React.FC<CarouselProps> = ({
   return (
     <div className="flex flex-col">
       <Glider
-        className={`flex w-full relative ${gliderClasses}`}
+        className={`flex !w-full relative ${gliderClasses}`}
         draggable
         slidesToShow={slidesToShow}
         scrollLock
@@ -51,7 +51,7 @@ export const Carousel: React.FC<CarouselProps> = ({
         responsive={[responsive]}
         skipTrack
       >
-        <div className={`flex w-full ${gliderItemWrapperClasses} `}>
+        <div className={`flex ${gliderItemWrapperClasses} `}>
           {React.Children.map(children, (child) => {
             return React.cloneElement(child)
           })}

components/ui/filtered-product-list/filtered-product-list.tsx

@@ -25,8 +25,7 @@ const FilteredProductList = ({ title, products, itemsToShow }: SliderProps) => {
       )}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         {products.slice(0, itemsToShow).map((product: any, index: number) => (
-          <span>Product</span>
+          <ProductCard key={`${product.id}-${index}`} product={product} />
-          // <ProductCard key={`${product.id}-${index}`} product={product} />
         ))}
       </div>
     </div>

components/ui/product-card/product-card.tsx

@@ -1,79 +1,81 @@
 'use client'
 
+import Price from 'components/product/price'
+import Text from 'components/ui/text'
+import type { Product } from 'lib/storm/types/product'
 import { cn } from 'lib/utils'
-import { FC } from 'react'
-// import type { Product } from '@commerce/types/product'
 import dynamic from 'next/dynamic'
-// import usePrice from '@framework/product/use-price'
+import Link from 'next/link'
+import { FC } from 'react'
+
+const WishlistButton = dynamic(
+  () => import('components/ui/wishlist-button')
+)
 
-// const WishlistButton = dynamic(
-//   () => import('@components/wishlist/WishlistButton')
-// )
-const ProductTag = dynamic(() => import('components/ui/product-tag'))
 const SanityImage = dynamic(() => import('components/ui/sanity-image'))
 
 interface Props {
   className?: string
-  // product: Product
+  product: Product
   variant?: 'default'
 }
 
 const ProductCard: FC<Props> = ({
-  // product,
+  product,
   className,
   variant = 'default',
 }) => {
-  // const { price } = usePrice({
-  //   amount: product.price.value,
-  //   baseAmount: product.price.retailPrice,
-  //   currencyCode: product.price.currencyCode!,
-  // })
 
   const rootClassName = cn(
-    'w-full min-w-0 grow-0 shrink-0  group relative box-border overflow-hidden transition-transform ease-linear basis-[50%]',
+    'w-full group relative overflow-hidden transition-transform ease-linear',
     className
   )
 
   return (
-    <>Produyct</>
+    <Link
-    // <Link
+      href={`${product.slug}`}
-    //   href={`${product.slug}`}
+      className={rootClassName}
-    //   className={rootClassName}
+      aria-label={product.name}
-    //   aria-label={product.name}
+      locale={product.locale}
-    //   locale={product.locale}
+    >
-    // >
+      {variant === 'default' && (
-    //   {variant === 'default' && (
+        <div className={'flex flex-col justify-center w-full h-full'}>
-    //     <>
+
-    //       <div className={'flex flex-col flex-1 justify-center w-full h-full'}>
+          <WishlistButton
-    //         {/* {process.env.COMMERCE_WISHLIST_ENABLED && (
+            className={'top-4 right-4 z-10 absolute'}
-    //           <WishlistButton
+            productId={product.id}
-    //             className={'top-4 right-4 z-10 absolute'}
+            variant={
-    //             productId={product.id}
+              product?.variants ? (product.variants[0] as any) : null
-    //             variant={
+            }
-    //               product?.variants ? (product.variants[0] as any) : null
+          />
-    //             }
+          <div className="w-full h-full aspect-square overflow-hidden relative">
-    //           />
+            {product?.images && (
-    //         )} */}
+              <SanityImage
-    //         {/* <div className="w-full h-full aspect-square overflow-hidden relative">
+                image={product?.images[0]}
-    //           {product?.images && (
+                alt={product.title || 'Product Image'}
-    //             <SanityImage
+                width={400}
-    //               image={product?.images[0]}
+                height={400}
-    //               alt={product.name || 'Product Image'}
+                sizes="(max-width: 1024px) 50vw, 20vw"
-    //               width={400}
+              />
-    //               height={400}
+            )}
-    //               sizes="(max-width: 1024px) 50vw, 20vw"
+          </div>
-    //             />
+
-    //           )}
+          <div
-    //         </div> */}
+            className={cn('text-high-contrast flex items-start flex-col', className)}
-    //         <ProductTag
+          >
-    //           className="mt-2 lg:mt-3"
+            <Text
-    //           name={product.title}
+              className="mt-2 lg:mt-3 font-bold"
-    //           price={`${price}`}
+            >
-    //         />
+              {product.title}
-    //       </div>
+            </Text>
-    //     </>
+            <Price 
-    //   )}
+              amount={`${product.price.value}`} 
-    // </Link>
+              currencyCode={product.price.currencyCode ? product.price.currencyCode : 'SEK'}
+            />
+          </div>
+        </div>
+      )}
+    </Link>
   )
 }
 

components/ui/slider/slider.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import {
   CarouselItemProps as ItemProps,
   CarouselProps as Props,
@@ -32,7 +30,7 @@ const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
   }, [])
 
   return (
-    <div>
+    <div className="flex flex-col">
       {title ? (
         <Text
           className="mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
@@ -53,20 +51,18 @@ const Slider = ({ products, categories, title, sliderType }: SliderProps) => {
         <Carousel
           gliderClasses={'px-4 lg:px-8 2xl:px-16'}
           gliderItemWrapperClasses={'space-x-2 lg:space-x-4'}
-          hasDots={true}
           slidesToShow={2.2}
           responsive={{
             breakpoint: 1024,
             settings: {
-              slidesToShow: 4.5,
+              slidesToShow: 4.5
             },
           }}
         >
           {items.map((item: any, index: number) => (
             <CarouselItem key={`${sliderType}-${index}`}>
-              {item.title}
+              {sliderType === 'products' && <ProductCard product={item} />}
-              {/* {sliderType === 'products' && <ProductCard product={item} />}
+              {sliderType === 'categories' && <CategoryCard category={item} />}
-              {sliderType === 'categories' && <CategoryCard category={item} />} */}
             </CarouselItem>
           ))}
         </Carousel>

components/ui/wishlist-button/index.ts

@@ -0,0 +1 @@
+export { default } from './wishlist-button';

components/ui/wishlist-button/wishlist-button.tsx

@@ -0,0 +1,79 @@
+import type { Product, ProductVariant } from 'lib/storm/types/product'
+import { cn } from 'lib/utils'
+import { Heart } from 'lucide-react'
+import { useTranslations } from 'next-intl'
+import React, { FC, useState } from 'react'
+
+type Props = {
+  productId: Product['id']
+  variant: ProductVariant
+} & React.ButtonHTMLAttributes<HTMLButtonElement>
+
+const WishlistButton: FC<Props> = ({
+  productId,
+  variant,
+  className,
+  ...props
+}) => {
+  const [loading, setLoading] = useState(false)
+  const t = useTranslations('ui.button')
+
+  // @ts-ignore Wishlist is not always enabled
+  // const itemInWishlist = data?.items?.find(
+  //   // @ts-ignore Wishlist is not always enabled
+  //   (item) => item.product_id === productId && item.variant_id === variant.id
+  // )
+
+  const handleWishlistChange = async (e: any) => {
+    e.preventDefault()
+
+    if (loading) return
+
+    // A login is required before adding an item to the wishlist
+    // if (!customer) {
+    //   setModalView('LOGIN_VIEW')
+    //   return openModal()
+    // }
+
+    // setLoading(true)
+
+    // try {
+    //   if (itemInWishlist) {
+    //     await removeItem({ id: itemInWishlist.id! })
+    //   } else {
+    //     await addItem({
+    //       productId,
+    //       variantId: variant?.id!,
+    //     })
+    //   }
+
+    //   setLoading(false)
+    // } catch (err) {
+    //   setLoading(false)
+    // }
+  }
+
+  return (
+    <button
+      aria-label={t('wishList')}
+      className={cn(
+        'w-10 h-10 text-high-contrast bg-app border border-high-contrast flex items-center justify-center font-semibold cursor-pointer text-sm duration-200 ease-in-out transition-[color,background-color,opacity] ',
+        className
+      )}
+      // onClick={handleWishlistChange}
+      {...props}
+    >
+      <Heart
+        className={cn(
+          'duration-200 ease-in-out w-5 h-5 transition-[transform,fill] text-current',
+          {
+            ['fill-low-contrast']: loading,
+            // ['fill-high-contrast']: itemInWishlist,
+          }
+        )}
+      />
+    </button>
+  )
+}
+
+export default WishlistButton

lib/storm/types/common.ts

@@ -0,0 +1,36 @@
+export interface Discount {
+  /**
+   * The value of the discount, can be an amount or percentage.
+   */
+  value: number
+}
+
+export interface Measurement {
+  /**
+   * The measurement's value.
+   */
+  value: number
+  /**
+   * The measurement's unit, such as "KILOGRAMS", "GRAMS", "POUNDS" & "OOUNCES".
+   */
+  unit: 'KILOGRAMS' | 'GRAMS' | 'POUNDS' | 'OUNCES'
+}
+
+export interface Image {
+  /**
+   * The URL of the image.
+   */
+  url: string
+  /**
+   * A word or phrase that describes the content of an image.
+   */
+  alt?: string
+  /**
+   * The image's width.
+   */
+  width?: number
+  /**
+   * The image's height.
+   */
+  height?: number
+}

lib/storm/types/product.ts

@@ -0,0 +1,227 @@
+import { Image } from './common'
+
+export interface ProductPrice {
+  /**
+   * The price after all discounts are applied.
+   */
+  value: number
+  /**
+   * The currency code for the price. This is a 3-letter ISO 4217 code.
+   * @example USD
+   */
+  currencyCode?: 'USD' | 'EUR' | 'ARS' | 'GBP' | string
+  /**
+   * The retail price of the product. This can be used to mark a product as on sale, when `retailPrice` is higher than the price a.k.a `value`.
+   */
+  retailPrice?: number
+}
+
+export interface ProductOption {
+  __typename?: 'MultipleChoiceOption'
+  /**
+   * The unique identifier for the option.
+   */
+  id: string
+  /**
+   * The product option’s name.
+   * @example `Color` or `Size`
+   */
+  displayName: string
+  /**
+   * List of option values.
+   * @example `["Red", "Green", "Blue"]`
+   */
+  values: ProductOptionValues[]
+}
+
+export interface ProductOptionValues {
+  /**
+   * A string that uniquely identifies the option value.
+   */
+  label: string
+  /**
+   * List of hex colors used to display the actual colors in the swatches instead of the name.
+   */
+  hexColors?: string[]
+}
+
+export interface ProductVariant {
+  /**
+   *  The unique identifier for the variant.
+   */
+  id: string
+  /**
+   * The SKU (stock keeping unit) associated with the product variant.
+   */
+  sku?: string
+  /**
+   * The product variant’s name, or the product's name.
+   */
+  name?: string
+  /**
+   * List of product options.
+   */
+  options: ProductOption[]
+  /**
+   * The product variant’s price after all discounts are applied.
+   */
+  price?: ProductPrice
+  /**
+   * The retail price of the product. This can be used to mark a product as on sale, when `retailPrice` is higher than the `price`.
+   */
+  retailPrice?: ProductPrice
+  /**
+   * Indicates if the variant is available for sale.
+   */
+  availableForSale?: boolean
+  /**
+   * Whether a customer needs to provide a shipping address when placing an order for the product variant.
+   */
+  requiresShipping?: boolean
+  /**
+   * The image associated with the variant.
+   */
+  image?: Image
+}
+
+export interface Product {
+  /**
+   *  The currency for the product.
+   */
+  currencyCode: string
+  /**
+   *  The title for the product.
+   */
+  title: string
+  /**
+   *  The unique identifier for the product.
+   */
+  id: string
+  /**
+   * The name of the product.
+   */
+  name: string
+  /**
+   * Stripped description of the product, single line.
+   */
+  description: string
+  /**
+   * The description of the product, complete with HTML formatting.
+   */
+  descriptionHtml?: string
+  /**
+   * The SKU (stock keeping unit) associated with the product.
+   */
+  sku?: string
+  /**
+   * A human-friendly unique string for the product, automatically generated from its title.
+   */
+  slug?: string
+  /**
+   * Relative URL on the storefront for the product.
+   */
+  path?: string
+  /**
+   * List of images associated with the product.
+   */
+  images: Image[]
+  /**
+   * List of the product’s variants.
+   */
+  variants: ProductVariant[]
+  /**
+   * The product's base price. Could be the minimum value, or default variant price.
+   */
+  price: ProductPrice
+  /**
+   * List of product's options.
+   */
+  options: ProductOption[]
+  /**
+   * The product’s vendor name.
+   */
+  vendor?: string
+  /**
+   *  The locale version of the product.
+   */
+  locale?: string
+}
+
+export interface SearchProductsBody {
+  /**
+   * The search query string to filter the products by.
+   */
+  search?: string
+  /**
+   * The category ID to filter the products by.
+   */
+  categoryId?: string
+  /**
+   * The brand ID to filter the products by.
+   */
+  brandId?: string
+  /**
+   * The sort key to sort the products by.
+   * @example 'trending-desc' | 'latest-desc' | 'price-asc' | 'price-desc'
+   */
+  sort?: string
+  /**
+   * The locale code, used to localize the product data (if the provider supports it).
+   */
+  locale?: string
+}
+
+/**
+ * Fetches a list of products based on the given search criteria.
+ */
+export type SearchProductsHook = {
+  data: {
+    /**
+     * List of products matching the query.
+     */
+    products: Product[]
+    /**
+     * Indicates if there are any products matching the query.
+     */
+    found: boolean
+  }
+  body: SearchProductsBody
+  input: SearchProductsBody
+  fetcherInput: SearchProductsBody
+}
+
+/**
+ * Product API schema
+ */
+
+export type ProductsSchema = {
+  endpoint: {
+    options: {}
+    handlers: {
+      getProducts: SearchProductsHook
+    }
+  }
+}
+
+/**
+ *  Product operations
+ */
+
+export type GetAllProductPathsOperation = {
+  data: { products: Pick<Product, 'path'>[] }
+  variables: { first?: number }
+}
+
+export type GetAllProductsOperation = {
+  data: { products: Product[] }
+  variables: {
+    relevance?: 'featured' | 'best_selling' | 'newest'
+    ids?: string[]
+    first?: number
+  }
+}
+
+export type GetProductOperation = {
+  data: { product?: Product }
+  variables: { path: string; slug?: never } | { path?: never; slug: string }
+}