refactor(EstimateCost): vanilla extract (#5737)

* refactor: estimate cost vanilla extract

* fix: feedback

Author: lisalupi

.changeset/rare-regions-exist.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/plus": minor
+---
+
+Refactor component `EstimateCost` to use vanilla extract instead of Emotion

packages/plus/src/components/EstimateCost/Components/Item.tsx

@@ -1,9 +1,8 @@
 'use client'
 
-import { css } from '@emotion/react'
-import styled from '@emotion/styled'
 import { HelpCircleOutlineIcon } from '@ultraviolet/icons'
-import { Badge, Stack, Text, Tooltip, zoomIn } from '@ultraviolet/ui'
+import { Badge, Stack, Text, Tooltip } from '@ultraviolet/ui'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 import type { ComponentProps, ReactNode } from 'react'
 import {
   Children,
@@ -17,28 +16,35 @@ import {
   useState,
 } from 'react'
 import {
-  OverlayRow,
-  priceCell,
-  Cell as StyledCell,
-  StyledDiv,
-  StyledLeftSide,
-  StyledTr,
-} from '../componentStyle'
-import {
-  MAX_CELL_WIDTH,
   maximumFractionDigits,
   maximumFractionDigitsLong,
   multiplier,
 } from '../constants'
 import { useEstimateCost } from '../EstimateCostProvider'
 import { calculatePrice } from '../helper'
 import { useOverlay } from '../OverlayContext'
+import {
+  estimateCostCell,
+  estimateCostOverlayRow,
+  estimateCostPriceCell,
+  paddingLeftCell,
+} from '../styles.css'
 import type {
   BareEstimateProduct,
   EstimateProduct,
   Iteration,
   Units,
 } from '../types'
+import {
+  estimateCostBadgeItem,
+  estimateCostLeftSide,
+  estimateCostMaxWidthText,
+  estimateCostResourceName,
+  estimateCostTextItem,
+  estimateCostTooltip,
+  estimateCostTr,
+  styledDiv,
+} from './components.css'
 
 const TIME_RELATED_UNIT: Units[] = [
   'seconds',
@@ -48,52 +54,6 @@ const TIME_RELATED_UNIT: Units[] = [
   'months',
 ]
 
-const StyledResourceName = styled('div', {
-  shouldForwardProp: prop => !['isOverlay', 'animated'].includes(prop),
-})<{
-  isOverlay: boolean
-  animated: boolean
-}>`
-  text-align: ${({ isOverlay }) => (isOverlay ? 'initial' : 'right')};
-
-  ${({ isOverlay, animated }) =>
-    isOverlay
-      ? css`
-          height: 48px;
-          display: flex;
-          flex-direction: column;
-          -webkit-box-pack: center;
-          justify-content: center;
-          animation: ${animated ? css`800ms ${zoomIn}` : ''};
-        `
-      : null}
-`
-
-const StyledBadge = styled(Badge)`
-  margin-left: ${({ theme }) => theme.space['1']};
-  align-self: center;
-`
-
-const StyledText = styled(Text)`
-  margin-left: ${({ theme }) => theme.space['1']};
-`
-
-const MaxWidthText = styled(Text)`
-  max-width: 75%;
-`
-
-const TextAlignRight = styled(Text)`
-  text-align: right;
-`
-
-const StyledTooltip = styled(Tooltip)`
-  vertical-align: text-top;
-`
-
-const StyledPriceCell = styled(StyledCell)`
-  ${({ theme }) => priceCell(theme)}
-`
-
 type ExtraProps = {
   itemCallback: (amount: number, isVariant: boolean) => void
   amount: number
@@ -227,10 +187,6 @@ type ItemProps = {
   strikeThrough?: boolean
 }
 
-const StyleNoPriceItem = styled(Text)`
-  text-align: right;
-`
-
 export const Item = memo(
   ({
     discount = 0,
@@ -298,9 +254,9 @@ export const Item = memo(
     }, [baseUnit, locales])
 
     const { isOverlay } = useOverlay()
-    const Row = isOverlay ? OverlayRow : StyledTr
-    const Cell = isOverlay ? StyledCell.withComponent('div') : StyledCell
-    const LeftSide = isOverlay ? 'div' : StyledLeftSide
+    const Row = isOverlay ? 'li' : 'tr'
+    const Cell = isOverlay ? 'div' : 'td'
+    const LeftSide = 'div'
 
     const [amount, setAmount] = useState(currentAmount)
     const [isVariant, setIsVariant] = useState(false)
@@ -390,16 +346,25 @@ export const Item = memo(
 
     return (
       <Row
-        hideFromOverlay={hideFromOverlay}
-        isFirstElement={isFirstElement}
-        shouldBeHidden={shouldBeHidden}
+        className={
+          isOverlay
+            ? estimateCostOverlayRow({
+                hideFromOverlay,
+                isFirstElement,
+                shouldBeHidden,
+              })
+            : estimateCostTr
+        }
       >
         <Cell
-          hasBorder={!isLastElement && !noBorder && !isOverlay}
-          tabulation={tabulation}
-          width={!isOverlay ? MAX_CELL_WIDTH : 'inherit'}
+          className={estimateCostCell({
+            hasBorder: !isLastElement && !noBorder && !isOverlay,
+          })}
+          style={assignInlineVars({
+            [paddingLeftCell]: `${(tabulation ?? 0) * 8 + 16}px`,
+          })}
         >
-          <LeftSide>
+          <LeftSide className={isOverlay ? '' : estimateCostLeftSide}>
             <Stack>
               <Stack direction="row">
                 <Text
@@ -410,34 +375,51 @@ export const Item = memo(
                   {label}
                 </Text>
                 {tooltipInfo ? (
-                  <StyledDiv>
-                    <StyledTooltip text={tooltipInfo}>
+                  <div className={styledDiv}>
+                    <Tooltip className={estimateCostTooltip} text={tooltipInfo}>
                       <HelpCircleOutlineIcon size="medium" />
-                    </StyledTooltip>
-                  </StyledDiv>
+                    </Tooltip>
+                  </div>
                 ) : null}
                 {subLabel && !isOverlay ? (
-                  <StyledText as="p" italic sentiment="primary" variant="body">
+                  <Text
+                    as="p"
+                    className={estimateCostTextItem}
+                    italic
+                    sentiment="primary"
+                    variant="body"
+                  >
                     {subLabel}
-                  </StyledText>
+                  </Text>
                 ) : null}
                 {discount > 0 && discountText ? (
-                  <StyledBadge
+                  <Badge
+                    className={estimateCostBadgeItem}
                     prominence="strong"
                     sentiment="warning"
                     size="small"
                   >
                     {discountText}
-                  </StyledBadge>
+                  </Badge>
                 ) : null}
               </Stack>
               {notice ? (
-                <MaxWidthText as="p" prominence="weak" variant="caption">
+                <Text
+                  as="p"
+                  className={estimateCostMaxWidthText}
+                  prominence="weak"
+                  variant="caption"
+                >
                   {notice}
-                </MaxWidthText>
+                </Text>
               ) : null}
             </Stack>
-            <StyledResourceName animated={animated} isOverlay={isOverlay}>
+            <div
+              className={estimateCostResourceName({
+                isAnimated: isOverlay && animated,
+                isOverlay,
+              })}
+            >
               {isDefined
                 ? Children.map(children, child =>
                     isValidElement<ExtraProps>(child)
@@ -450,18 +432,21 @@ export const Item = memo(
                       : null,
                   )
                 : textNotDefined || locales['estimate.cost.notDefined']}
-            </StyledResourceName>
+            </div>
           </LeftSide>
         </Cell>
         {!isOverlay ? (
-          <StyledPriceCell
-            hasBorder={!isLastElement && !noBorder}
-            primary={isPrimaryBackground}
+          <td
+            className={`${estimateCostCell({ hasBorder: !isLastElement && !noBorder, primary: isPrimaryBackground })} ${estimateCostPriceCell}`}
+            style={assignInlineVars({
+              [paddingLeftCell]: `16px`,
+            })}
           >
             {!noPrice ? (
               <>
-                <StyleNoPriceItem
+                <Text
                   as="p"
+                  placement="right"
                   prominence={
                     computedItemPrice === 0 && computedMaxItemPrice === 0
                       ? 'weak'
@@ -491,10 +476,10 @@ export const Item = memo(
                         maximumFractionDigits: formatMaximumFractionDigits,
                       })}`
                     : null}
-                </StyleNoPriceItem>
+                </Text>
                 {(amount - amountFree !== 1 && computedItemPrice > 0) ||
                 (maxAmount > 0 && computedMaxItemPrice > 0) ? (
-                  <TextAlignRight as="p" variant="body">
+                  <Text as="p" placement="right" variant="body">
                     {formatNumber(
                       calculatePrice({
                         amount: 1,
@@ -519,11 +504,11 @@ export const Item = memo(
                           'estimate.cost.units.hours.label'
                         ].toLowerCase()}`
                       : null}
-                  </TextAlignRight>
+                  </Text>
                 ) : null}
               </>
             ) : null}
-          </StyledPriceCell>
+          </td>
         ) : null}
       </Row>
     )

packages/plus/src/components/EstimateCost/Components/LineThrough.tsx

@@ -1,20 +1,19 @@
 'use client'
 
-import { css } from '@emotion/react'
-import styled from '@emotion/styled'
+import type { ComponentProps } from 'react'
+import { estimateCostLineThrough } from './components.css'
 
-type LineThroughProps = {
+type LineThroughProps = ComponentProps<'span'> & {
   isActive?: boolean
 }
 
-export const LineThrough = styled('span', {
-  shouldForwardProp: prop => !['isActive'].includes(prop),
-})<LineThroughProps>`
-  ${({ isActive, theme }) =>
-    isActive
-      ? css`
-          text-decoration-line: line-through;
-          text-decoration-color: ${theme.colors.warning.border};
-        `
-      : null}
-`
+export const LineThrough = ({
+  isActive,
+  className,
+  ...props
+}: LineThroughProps) => (
+  <span
+    className={`${className ? `${className} ` : ''} ${isActive ? estimateCostLineThrough : ''}`}
+    {...props}
+  />
+)

packages/plus/src/components/EstimateCost/Components/NumberInput.tsx

@@ -2,8 +2,8 @@
 
 import { NumberInput as NumberInputUV } from '@ultraviolet/ui'
 import { useEffect, useState } from 'react'
-import { ItemResourceName } from '../componentStyle'
 import { useOverlay } from '../OverlayContext'
+import { estimateCostItemResourceName } from './components.css'
 import { Regular } from './Regular'
 
 type NumberInputProps = {
@@ -31,9 +31,9 @@ export const NumberInput = ({
   }, [getAmountValue, amount])
 
   return isOverlay ? (
-    <ItemResourceName animated={false}>
+    <div className={estimateCostItemResourceName()}>
       <Regular>{amount}</Regular>
-    </ItemResourceName>
+    </div>
   ) : (
     <NumberInputUV
       controls={controls}

packages/plus/src/components/EstimateCost/Components/Region.tsx

@@ -1,18 +1,13 @@
 'use client'
 
-import styled from '@emotion/styled'
 import type { ComponentProps, ReactNode } from 'react'
 import { memo } from 'react'
 import { useEstimateCost } from '../EstimateCostProvider'
+import { estimateCostImage } from '../styles.css'
 import type { BareEstimateProduct, EstimateProduct, Iteration } from '../types'
 import { Item } from './Item'
 import { Strong } from './Strong'
 
-const StyledImage = styled.img`
-  width: 15px;
-  margin-right: ${({ theme }) => theme.space['1']};
-`
-
 type RegionProps = {
   shouldBeHidden?: boolean
   priceText?: ReactNode
@@ -65,7 +60,7 @@ export const Region = memo(
         shouldBeHidden={shouldBeHidden}
       >
         <Strong>
-          <StyledImage alt={label} src={image} />
+          <img alt={label} className={estimateCostImage} src={image} />
           {label}
         </Strong>
       </Item>