Rename ProductCard to ProductGridItem

apps/store/src/blocks/ProductGridBlock.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { storyblokEditable } from '@storyblok/react'
-import type { ProductCardBlockProps } from '@/blocks/ProductCardBlock'
-import { ProductCardBlock } from '@/blocks/ProductCardBlock'
+import type { ProductCardBlockProps } from '@/blocks/ProductGridItemBlock/ProductGridItemBlock'
+import { ProductGridItemBlock } from '@/blocks/ProductGridItemBlock/ProductGridItemBlock'
 import { ProductGrid } from '@/components/ProductGrid/ProductGrid'
 import type { ExpectedBlockType, SbBaseBlockProps } from '@/services/storyblok/storyblok'
 
@@ -15,7 +15,7 @@ export const ProductGridBlock = ({ blok }: ProductGridBlockProps) => {
   return (
     <ProductGrid title={blok.title} {...storyblokEditable(blok)}>
       {blok.items.map((nestedBlock) => (
-        <ProductCardBlock key={nestedBlock._uid || nestedBlock.title} blok={nestedBlock} />
+        <ProductGridItemBlock key={nestedBlock._uid || nestedBlock.title} blok={nestedBlock} />
       ))}
     </ProductGrid>
   )

apps/store/src/blocks/ProductGridItemBlock/ProductGridItemBlock.helpers.ts

@@ -0,0 +1,24 @@
+import { type useProductMetadata } from '@/components/LayoutWithMenu/productMetadataHooks'
+import { isSameLink } from '@/utils/url'
+
+
+export type LinkType = 'product' | 'category'
+
+export const getLinkType = (
+  productMetadata: ReturnType<typeof useProductMetadata> = [],
+  link: string,
+): LinkType | 'content' => {
+  const isProductLink = productMetadata?.some((product) => isSameLink(link, product.pageLink))
+  if (isProductLink) {
+    return 'product'
+  }
+
+  const isCategoryLink = productMetadata?.some(
+    (product) => product.categoryPageLink && isSameLink(link, product.categoryPageLink),
+  )
+  if (isCategoryLink) {
+    return 'category'
+  }
+
+  return 'content'
+}

apps/store/src/blocks/ProductCardBlock.tsx → apps/store/src/blocks/ProductGridItemBlock/ProductGridItemBlock.tsx

@@ -1,10 +1,11 @@
 'use client'
+
 import { storyblokEditable } from '@storyblok/react'
 import { useProductMetadata } from '@/components/LayoutWithMenu/productMetadataHooks'
-import { type LinkType, ProductCard } from '@/components/ProductCard/ProductCard'
+import { ProductGridItem } from '@/components/ProductGridItem/ProductGridItem'
 import type { LinkField, SbBaseBlockProps, StoryblokAsset } from '@/services/storyblok/storyblok'
 import { getImgSrc, getLinkFieldURL } from '@/services/storyblok/Storyblok.helpers'
-import { isSameLink } from '@/utils/url'
+import { getLinkType } from './ProductGridItemBlock.helpers'
 
 export type ImageSize = {
   aspectRatio?: '1 / 1' | '3 / 2' | '4 / 3' | '5 / 4' | '2 / 3' | '3 / 4' | '4 / 5'
@@ -20,20 +21,21 @@ export type ProductCardBlockProps = SbBaseBlockProps<
   } & ImageSize
 >
 
-export const ProductCardBlock = ({ blok }: ProductCardBlockProps) => {
+export const ProductGridItemBlock = ({ blok }: ProductCardBlockProps) => {
   const link = getLinkFieldURL(blok.link, blok.title)
   const productMetadata = useProductMetadata()
   const linkType = getLinkType(productMetadata, link)
 
   if (linkType === 'content') {
     console.warn(
-      '[ProductCardBlock]: provided "link" does not refer to a product neither a category. Skipping ProductCard render!',
+      '[ProductGridItemBlock]: provided "link" does not refer to a product neither a category. Skipping ProductGridItem render!',
     )
+
     return null
   }
 
   return (
-    <ProductCard
+    <ProductGridItem
       title={blok.title}
       subtitle={blok.subtitle}
       image={{ src: getImgSrc(blok.image.filename), alt: blok.image.alt, priority: blok.priority }}
@@ -43,22 +45,3 @@ export const ProductCardBlock = ({ blok }: ProductCardBlockProps) => {
     />
   )
 }
-
-const getLinkType = (
-  productMetadata: ReturnType<typeof useProductMetadata> = [],
-  link: string,
-): LinkType | 'content' => {
-  const isProductLink = productMetadata?.some((product) => isSameLink(link, product.pageLink))
-  if (isProductLink) {
-    return 'product'
-  }
-
-  const isCategoryLink = productMetadata?.some(
-    (product) => product.categoryPageLink && isSameLink(link, product.categoryPageLink),
-  )
-  if (isCategoryLink) {
-    return 'category'
-  }
-
-  return 'content'
-}

apps/store/src/components/ProductGrid/ProductGrid.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import type { ProductCardProps } from '@/components/ProductCard/ProductCard'
-import { ProductCard } from '@/components/ProductCard/ProductCard'
+import {
+  ProductGridItem,
+  type ProductGridItemProps,
+} from '@/components/ProductGridItem/ProductGridItem'
 import type { ProductGridProps } from './ProductGrid'
 import { ProductGrid } from './ProductGrid'
 
@@ -16,13 +18,13 @@ const meta: Meta<typeof ProductGrid> = {
 
 export default meta
 
-type ProductItem = ProductCardProps
+type ProductItem = ProductGridItemProps
 
 const Template: StoryFn<ProductGridProps & { items: Array<ProductItem> }> = (props) => {
   return (
     <ProductGrid {...props}>
       {props.items.map((itemProps) => (
-        <ProductCard key={itemProps.title} {...itemProps} />
+        <ProductGridItem key={itemProps.title} {...itemProps} />
       ))}
     </ProductGrid>
   )

apps/store/src/components/ProductCard/ProductCard.stories.tsx → apps/store/src/components/ProductGridItem/ProductGridItem.stories.tsx

@@ -1,9 +1,9 @@
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
 import type { Meta, StoryObj } from '@storybook/react'
-import { ProductCard } from './ProductCard'
+import { ProductGridItem } from './ProductGridItem'
 
-const meta: Meta<typeof ProductCard> = {
-  component: ProductCard,
+const meta: Meta<typeof ProductGridItem> = {
+  component: ProductGridItem,
   argTypes: {},
   parameters: {
     viewport: {
@@ -15,7 +15,7 @@ const meta: Meta<typeof ProductCard> = {
 }
 
 export default meta
-type Story = StoryObj<typeof ProductCard>
+type Story = StoryObj<typeof ProductGridItem>
 
 export const Default: Story = {
   args: {
@@ -27,4 +27,9 @@ export const Default: Story = {
     aspectRatio: '4 / 5',
     link: { url: '/', type: 'product' },
   },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
 }