refactor: Extract CartItem component from the starter

packages/styles/src/molecules/cart-item.css

@@ -0,0 +1,54 @@
+[data-fs-cart-item] {
+  padding: 16px;
+  color: #171a1c;
+  background-color: #ffffff;
+  border: 2px solid #e3e6e8;
+  border-radius: 4px;
+}
+
+[data-fs-cart-item-content] {
+  display: grid;
+  grid-template-columns: 72px repeat(4, 1fr);
+  column-gap: 8px;
+  align-items: center;
+}
+
+[data-fs-cart-item-summary] {
+  flex-direction: column;
+  grid-column: 2 / span 4;
+}
+
+[data-fs-cart-item-title] {
+  margin-bottom: 0;
+  line-height: 1.2;
+  text-decoration: none;
+  outline: none;
+}
+
+[data-fs-cart-item-prices] {
+  display: flex;
+  align-items: baseline;
+}
+
+[data-fs-cart-item-prices] [data-store-price] + [data-store-price] {
+  margin-left: 16px;
+}
+
+[data-fs-cart-item-prices] [data-store-price][data-variant="listing"] {
+  font-size: 0.875rem;
+  color: #5d666f;
+}
+
+[data-fs-cart-item-prices] [data-store-price][data-variant="spot"] {
+  font-size: 1.25rem;
+}
+
+[data-fs-cart-item-actions] [data-store-quantity-selector] [data-store-icon] {
+  color: #00419e;
+}
+
+[data-fs-cart-item-actions] {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 16px;
+}

packages/styles/src/molecules/index.css

@@ -6,6 +6,7 @@
 @import './breadcrumb.css';
 @import './card.css';
 @import './carousel.css';
+@import './cart-item.css';
 @import './dropdown.css';
 @import './form.css';
 @import './gift.css';

packages/ui/src/index.ts

@@ -93,6 +93,25 @@ export type {
   CardActionsProps,
 } from './molecules/Card'
 
+export {
+  default as CartItem,
+  CartItemActions,
+  CartItemContent,
+  CartItemImage,
+  CartItemPrices,
+  CartItemSummary,
+  CartItemTitle,
+} from './molecules/CartItem'
+export type {
+  CartItemProps,
+  CartItemActionsProps,
+  CartItemContentProps,
+  CartItemImageProps,
+  CartItemPricesProps,
+  CartItemSummaryProps,
+  CartItemTitleProps,
+} from './molecules/CartItem'
+
 export { default as Bullets } from './molecules/Bullets'
 export type { BulletsProps } from './molecules/Bullets'
 

packages/ui/src/molecules/CartItem/CartItem.test.tsx

@@ -0,0 +1,3 @@
+describe('CartItem', () => {
+  it('')
+})

packages/ui/src/molecules/CartItem/CartItem.tsx

@@ -0,0 +1,22 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface CartItemProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItem = forwardRef<HTMLDivElement, CartItemProps>(function CartItem(
+  { testId = 'store-cart-item', children, ...otherProps },
+  ref
+) {
+  return (
+    <article ref={ref} data-fs-cart-item data-testid={testId} {...otherProps}>
+      {children}
+    </article>
+  )
+})
+
+export default CartItem

packages/ui/src/molecules/CartItem/CartItemActions.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface CartItemActionsProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemActions = forwardRef<HTMLDivElement, CartItemActionsProps>(
+  function CartItemActions(
+    { testId = 'store-cart-item-actions', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <div ref={ref} data-fs-cart-item-actions data-testid={testId} {...otherProps}>
+        {children}
+      </div>
+    )
+  }
+)
+
+export default CartItemActions

packages/ui/src/molecules/CartItem/CartItemContent.tsx

@@ -0,0 +1,24 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface CartItemContentProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemContent = forwardRef<HTMLElement, CartItemContentProps>(
+  function CartItemContent(
+    { testId = 'store-cart-item-content', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <section ref={ref} data-fs-cart-item-content data-testid={testId} {...otherProps}>
+        {children}
+      </section>
+    )
+  }
+)
+
+export default CartItemContent

packages/ui/src/molecules/CartItem/CartItemImage.tsx

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface CartItemImageProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemImage = forwardRef<HTMLDivElement, CartItemImageProps>(function CartItemImage(
+  { testId = 'store-cart-item-image', children, ...otherProps },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-cart-item-image data-testid={testId} {...otherProps}>
+      {children}
+    </div>
+  )
+})
+
+export default CartItemImage

packages/ui/src/molecules/CartItem/CartItemPrices.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface CartItemPricesProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemPrices = forwardRef<HTMLDivElement, CartItemPricesProps>(
+  function CartItemPrices(
+    { testId = 'store-cart-item-prices', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <div ref={ref} data-fs-cart-item-prices data-testid={testId} {...otherProps}>
+        {children}
+      </div>
+    )
+  }
+)
+
+export default CartItemPrices

packages/ui/src/molecules/CartItem/CartItemSummary.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react'
+import type { HTMLAttributes } from 'react'
+
+export interface CartItemSummaryProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemSummary = forwardRef<HTMLDivElement, CartItemSummaryProps>(
+  function CartItemSummary(
+    { testId = 'store-cart-item-summary', children, ...otherProps },
+    ref
+  ) {
+    return (
+      <div ref={ref} data-fs-cart-item-summary data-testid={testId} {...otherProps}>
+        {children}
+      </div>
+    )
+  }
+)
+
+export default CartItemSummary

packages/ui/src/molecules/CartItem/CartItemTitle.tsx

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface CartItemTitleProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).
+   */
+  testId?: string
+}
+
+const CartItemTitle = forwardRef<HTMLDivElement, CartItemTitleProps>(function CartItemTitle(
+  { testId = 'store-cart-item-title', children, ...otherProps },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-cart-item-title data-testid={testId} {...otherProps}>
+      {children}
+    </div>
+  )
+})
+
+export default CartItemTitle

packages/ui/src/molecules/CartItem/index.tsx

@@ -0,0 +1,20 @@
+export { default } from './CartItem'
+export type { CartItemProps } from './CartItem'
+
+export { default as CartItemActions } from './CartItemActions'
+export type { CartItemActionsProps } from './CartItemActions'
+
+export { default as CartItemContent } from './CartItemContent'
+export type { CartItemContentProps } from './CartItemContent'
+
+export { default as CartItemImage } from './CartItemImage'
+export type { CartItemImageProps } from './CartItemImage'
+
+export { default as CartItemPrices } from './CartItemPrices'
+export type { CartItemPricesProps } from './CartItemPrices'
+
+export { default as CartItemSummary } from './CartItemSummary'
+export type { CartItemSummaryProps } from './CartItemSummary'
+
+export { default as CartItemTitle } from './CartItemTitle'
+export type { CartItemTitleProps } from './CartItemTitle'

packages/ui/src/molecules/CartItem/stories/CartItem.mdx

@@ -0,0 +1,79 @@
+import { ArgsTable, Canvas, Props, Story } from '@storybook/addon-docs'
+
+import CartItem, {
+  CartItemActions,
+  CartItemContent,
+  CartItemImage,
+  CartItemPrices,
+  CartItemSummary,
+  CartItemTitle,
+} from '../'
+
+# Cart Item
+
+<Canvas>
+  <Story id="molecules-cartitem--default" />
+</Canvas>
+
+## Components
+
+The `CartItem` uses the [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) pattern, its components are:
+
+- `CartItem`: the wrapper component;
+- `CartItemContent`: the wrapper component for the image and summary;
+- `CartItemImage`: the wrapper component for the content's image;
+- `CartItemSummary`: the wrapper component for the title and prices;
+- `CartItemTitle`: the wrapper component for the title;
+- `CartItemPrices`: the wrapper component for the prices;
+- `CartItemActions`: the wrapper component for the remove from cart button and quantity selector;
+
+## Props
+
+All CartItem-related components support all attributes also supported by the `<div>` tag.
+
+### `CartItem`
+
+<ArgsTable of={CartItem} />
+
+### `CartItemContent`
+
+<ArgsTable of={CartItemContent} />
+
+### `CartItemImage`
+
+<ArgsTable of={CartItemImage} />
+
+### `CartItemSummary`
+
+<ArgsTable of={CartItemSummary} />
+
+### `CartItemTitle`
+
+<ArgsTable of={CartItemTitle} />
+
+### `CartItemPrices`
+
+<ArgsTable of={CartItemPrices} />
+
+### `CartItemActions`
+
+<ArgsTable of={CartItemActions} />
+
+## CSS Selectors
+
+```css
+[data-fs-cart-item] {
+}
+[data-fs-cart-item-content] {
+}
+[data-fs-cart-item-image] {
+}
+[data-fs-cart-item-summary] {
+}
+[data-fs-cart-item-title] {
+}
+[data-fs-cart-item-prices] {
+}
+[data-fs-cart-item-actions] {
+}
+```