refactor: Extract CartItem from the starter to @faststore/ui (#239)

Extract the `CartItem` component from our starter to `@faststore/ui`.

Visit https://sfj-4a90f81--nextjs.preview.vtex.app/4k-philips-monitor-99988213/p and add a product to the cart. A `CartItem` component will be rendered inside the mini-cart sidebar. It should look and work the same as before.

<img src="https://user-images.githubusercontent.com/381395/189658104-c64012ee-dd16-4ce0-a2bc-4535e8bec5d5.gif" width="50%" alt="Before and after changes" />

- https://github.com/vtex/faststore/pull/1461\

package.json

@@ -33,7 +33,7 @@
     "@faststore/api": "^1.11.7",
     "@faststore/graphql-utils": "^1.10.34",
     "@faststore/sdk": "^1.10.34",
-    "@faststore/ui": "^1.11.8",
+    "@faststore/ui": "^1.11.20",
     "@vtex/client-cms": "^0.2.10",
     "gatsby": "^4.16.0",
     "gatsby-plugin-gatsby-cloud": "^4.16.0",

src/components/cart/CartItem/CartItem.tsx

@@ -1,5 +1,13 @@
 import { sendAnalyticsEvent } from '@faststore/sdk'
-import { Card, CardActions, CardContent, CardImage } from '@faststore/ui'
+import {
+  CartItem as UICartItem,
+  CartItemActions as UICartItemActions,
+  CartItemSummary as UICartItemSummary,
+  CartItemTitle as UICartItemTitle,
+  CartItemPrices as UICartItemPrices,
+  CartItemContent as UICartItemContent,
+  CartItemImage as UICartItemImage,
+} from '@faststore/ui'
 import { useCallback, useMemo } from 'react'
 import type {
   AddToCartEvent,
@@ -81,27 +89,27 @@ function CartItem({ item, gift = false }: Props) {
   )
 
   return (
-    <Card
+    <UICartItem
       className={styles.fsCartItem}
       data-testid="cart-item"
       data-sku={item.itemOffered.sku}
       data-seller={item.seller.identifier}
     >
-      <CardContent data-fs-cart-item-content>
-        <CardImage>
+      <UICartItemContent>
+        <UICartItemImage>
           <Image
             src={item.itemOffered.image[0].url}
             alt={item.itemOffered.image[0].alternateName}
             width={72}
             height={72}
           />
-        </CardImage>
-        <div data-fs-cart-item-summary>
-          <p className="text__body" data-fs-cart-item-title>
+        </UICartItemImage>
+        <UICartItemSummary>
+          <UICartItemTitle className="text__body">
             {item.itemOffered.isVariantOf.name}
-          </p>
+          </UICartItemTitle>
           {!gift && (
-            <span data-fs-cart-item-prices>
+            <UICartItemPrices>
               <Price
                 value={item.listPrice}
                 formatter={useFormattedPrice}
@@ -120,13 +128,13 @@ function CartItem({ item, gift = false }: Props) {
                 classes="text__title-subsection"
                 SRText="Price:"
               />
-            </span>
+            </UICartItemPrices>
           )}
-        </div>
-      </CardContent>
+        </UICartItemSummary>
+      </UICartItemContent>
 
       {!gift && (
-        <CardActions data-fs-cart-item-actions>
+        <UICartItemActions>
           <Button
             variant="tertiary"
             icon={<Icon name="XCircle" width={18} height={18} />}
@@ -140,9 +148,9 @@ function CartItem({ item, gift = false }: Props) {
             initial={item.quantity}
             onChange={onQuantityChange}
           />
-        </CardActions>
+        </UICartItemActions>
       )}
-    </Card>
+    </UICartItem>
   )
 }
 

yarn.lock

@@ -1978,10 +1978,10 @@
   dependencies:
     idb-keyval "^5.1.3"
 
-"@faststore/ui@^1.11.8":
-  version "1.11.8"
-  resolved "https://registry.yarnpkg.com/@faststore/ui/-/ui-1.11.8.tgz#b9ed0d59831750239a5fdf20434b6c82ec606f28"
-  integrity sha512-n/rr9wgKsfom+O0I16lF6raMtV2Engt0nd9IVekzeX50fIeiIu5VyobZR7kryUYcr+mtXPo8/8FpxQvCkuntvg==
+"@faststore/ui@^1.11.20":
+  version "1.11.20"
+  resolved "https://registry.yarnpkg.com/@faststore/ui/-/ui-1.11.20.tgz#f2aad301a65713b48230dc3b7a3814ad94c8ba71"
+  integrity sha512-OsRWZ0zV24vBFKerm4vYJ59II2NhPCb8GYBXOdA4S5nObUwCoX4rQTDtvMKXJWXubPzHIv1Vsc7xYMDJVqrpTQ==
   dependencies:
     "@reach/popover" "^0.16.0"
     "@storybook/addon-a11y" "^6.4.4"