Merge branch 'master' into accept-cookies

components/cart/CartSidebarView/CartSidebarView.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import cn from 'classnames'
-import { UserNav } from '@components/core'
+import { UserNav } from '@components/common'
 import { Button } from '@components/ui'
 import { Bag, Cross, Check } from '@components/icons'
 import { useUI } from '@components/ui/context'

components/common/Footer/Footer.tsx

@@ -6,7 +6,7 @@ import type { Page } from '@bigcommerce/storefront-data-hooks/api/operations/get
 import getSlug from '@lib/get-slug'
 import { Github } from '@components/icons'
 import { Logo, Container } from '@components/ui'
-import { I18nWidget } from '@components/core'
+import { I18nWidget } from '@components/common'
 import s from './Footer.module.css'
 
 interface Props {

components/common/Layout/Layout.tsx

@@ -6,7 +6,7 @@ import { CommerceProvider } from '@bigcommerce/storefront-data-hooks'
 import { useAcceptCookies } from '@lib/hooks/useAcceptCookies'
 import { CartSidebarView } from '@components/cart'
 import { Container, Sidebar, Button, Modal, Toast } from '@components/ui'
-import { Navbar, FeatureBar, Footer } from '@components/core'
+import { Navbar, FeatureBar, Footer } from '@components/common'
 import { LoginView, SignUpView, ForgotPassword } from '@components/auth'
 import { useUI } from '@components/ui/context'
 import { usePreventScroll } from '@react-aria/overlays'

components/common/Navbar/Navbar.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import Link from 'next/link'
 import s from './Navbar.module.css'
 import { Logo } from '@components/ui'
-import { Searchbar, UserNav } from '@components/core'
+import { Searchbar, UserNav } from '@components/common'
 interface Props {
   className?: string
 }

components/common/UserNav/UserNav.tsx

@@ -5,7 +5,7 @@ import useCart from '@bigcommerce/storefront-data-hooks/cart/use-cart'
 import useCustomer from '@bigcommerce/storefront-data-hooks/use-customer'
 import { Menu } from '@headlessui/react'
 import { Heart, Bag } from '@components/icons'
-import { Avatar } from '@components/core'
+import { Avatar } from '@components/common'
 import { useUI } from '@components/ui/context'
 import DropdownMenu from './DropdownMenu'
 import s from './UserNav.module.css'

components/common/index.ts

@@ -9,4 +9,3 @@ export { default as Toggle } from './Toggle'
 export { default as Head } from './Head'
 export { default as HTMLContent } from './HTMLContent'
 export { default as I18nWidget } from './I18nWidget'
-export { default as EnhancedImage } from './EnhancedImage'

components/core/EnhancedImage/EnhancedImage.tsx

@@ -1,42 +0,0 @@
-import { FC } from 'react'
-import { useInView } from 'react-intersection-observer'
-import Image from 'next/image'
-
-type Props = Omit<
-  JSX.IntrinsicElements['img'],
-  'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'
-> & {
-  src: string
-  quality?: string
-  priority?: boolean
-  loading?: readonly ['lazy', 'eager', undefined]
-  unoptimized?: boolean
-} & (
-    | {
-        width: number | string
-        height: number | string
-        unsized?: false
-      }
-    | {
-        width?: number | string
-        height?: number | string
-        unsized: true
-      }
-  )
-
-const EnhancedImage: FC<Props & JSX.IntrinsicElements['img']> = ({
-  ...props
-}) => {
-  const [ref] = useInView({
-    triggerOnce: true,
-    rootMargin: '220px 0px',
-  })
-
-  return (
-    <div ref={ref}>
-      <Image {...props} />
-    </div>
-  )
-}
-
-export default EnhancedImage

components/core/EnhancedImage/index.ts

@@ -1 +0,0 @@
-export { default } from './EnhancedImage'

components/core/FeatureBar/FeatureBar.module.css

@@ -1,7 +0,0 @@
-.root {
-  @apply text-center p-6 bg-primary text-sm flex-row justify-center items-center font-medium fixed bottom-0 w-full z-30 transition-all duration-300 ease-out;
-
-  @screen md {
-    @apply flex text-left;
-  }
-}

components/core/FeatureBar/FeatureBar.tsx

@@ -1,39 +0,0 @@
-import cn from 'classnames'
-import s from './FeatureBar.module.css'
-
-interface FeatureBarProps {
-  className?: string
-  title: string
-  description?: string
-  hide?: boolean
-  action?: React.ReactNode
-}
-
-const FeatureBar: React.FC<FeatureBarProps> = ({
-  title,
-  description,
-  className,
-  action,
-  hide,
-}) => {
-  const rootClassName = cn(
-    s.root,
-    {
-      transform: true,
-      'translate-y-0 opacity-100': !hide,
-      'translate-y-full opacity-0': hide,
-    },
-    className
-  )
-  return (
-    <div className={rootClassName}>
-      <span className="block md:inline">{title}</span>
-      <span className="block mb-6 md:inline md:mb-0 md:ml-2">
-        {description}
-      </span>
-      {action && action}
-    </div>
-  )
-}
-
-export default FeatureBar

components/core/FeatureBar/index.ts

@@ -1 +0,0 @@
-export { default } from './FeatureBar'

components/product/ProductCard/ProductCard.tsx

@@ -3,7 +3,7 @@ import cn from 'classnames'
 import Link from 'next/link'
 import type { ProductNode } from '@bigcommerce/storefront-data-hooks/api/operations/get-all-products'
 import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
-import { EnhancedImage } from '@components/core'
+import Image from 'next/image'
 import s from './ProductCard.module.css'
 import WishlistButton from '@components/wishlist/WishlistButton'
 
@@ -43,7 +43,7 @@ const ProductCard: FC<Props> = ({
                 {p.name}
               </span>
             </div>
-            <EnhancedImage
+            <Image
               src={p.images.edges?.[0]?.node.urlOriginal!}
               alt={p.images.edges?.[0]?.node.altText || 'Product Image'}
               width={imgWidth}
@@ -69,7 +69,7 @@ const ProductCard: FC<Props> = ({
               />
             </div>
             <div className={s.imageContainer}>
-              <EnhancedImage
+              <Image
                 alt={p.name}
                 className={cn('w-full object-cover', s['product-image'])}
                 src={src}

components/product/ProductView/ProductView.tsx

@@ -7,7 +7,7 @@ import s from './ProductView.module.css'
 import { useUI } from '@components/ui/context'
 import { Swatch, ProductSlider } from '@components/product'
 import { Button, Container } from '@components/ui'
-import { HTMLContent } from '@components/core'
+import { HTMLContent } from '@components/common'
 
 import usePrice from '@bigcommerce/storefront-data-hooks/use-price'
 import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -8,7 +8,7 @@ import useRemoveItem from '@bigcommerce/storefront-data-hooks/wishlist/use-remov
 import useAddItem from '@bigcommerce/storefront-data-hooks/cart/use-add-item'
 import { useUI } from '@components/ui/context'
 import { Button } from '@components/ui'
-import { HTMLContent } from '@components/core'
+import { HTMLContent } from '@components/common'
 import { Trash } from '@components/icons'
 import s from './WishlistCard.module.css'