refactor: charts vanilla extract

.changeset/ready-regions-play.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Refactor chart components (`PieChart`, `BarChart` and `LineChart`) to use vanilla-extract instead of Emotion

packages/ui/src/components/BarChart/Tooltip.tsx

@@ -1,26 +1,8 @@
 'use client'
 
-import styled from '@emotion/styled'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 import { Text } from '../Text'
-
-const BarToolTipContainer = styled.div`
-  display: flex;
-  background: ${({ theme }) => theme.colors.neutral.backgroundWeakElevated};
-  border-radius: ${({ theme }) => theme.radii.small};
-  box-shadow: ${({ theme }) => theme.shadows.tooltip};
-  padding: ${({ theme }) => theme.space['1']} ${({ theme }) => theme.space['2']};
-  align-items: center;
-`
-
-const BarColorSquare = styled('span', {
-  shouldForwardProp: prop => !['color'].includes(prop),
-})<{ color: string }>`
-  display: block;
-  width: ${({ theme }) => theme.sizing['150']};
-  height: ${({ theme }) => theme.sizing['150']};
-  background: ${({ color }) => color};
-  margin-right: ${({ theme }) => theme.space['1.5']};
-`
+import { barColorSquare, barTooltipContainer, colorBar } from './styles.css'
 
 type BarChartToolTipProps = {
   color: string
@@ -37,9 +19,17 @@ const BarChartToolTip = ({
   className,
   'data-testid': dataTestId,
 }: BarChartToolTipProps) => (
-  <BarToolTipContainer className={className} data-testid={dataTestId}>
+  <div
+    className={`${className ? `${className} ` : ''}${barTooltipContainer}`}
+    data-testid={dataTestId}
+  >
     <div>
-      <BarColorSquare color={color} />
+      <span
+        className={barColorSquare}
+        style={assignInlineVars({
+          [colorBar]: color,
+        })}
+      />
     </div>
     <div>
       <Text as="p" sentiment="primary" variant="bodyStronger">
@@ -49,7 +39,7 @@ const BarChartToolTip = ({
         {indexValue}
       </Text>
     </div>
-  </BarToolTipContainer>
+  </div>
 )
 
 export default BarChartToolTip

packages/ui/src/components/BarChart/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -2,38 +2,16 @@
 
 exports[`barChartTooltip > renders correctly 1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #ffffff;
-  border-radius: 0.125rem;
-  box-shadow: 0px 4px 32px 8px #d9dadd66;
-  padding: 0.5rem 1rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-2 {
-  display: block;
-  width: 0.75rem;
-  height: 0.75rem;
-  background: #ff0000;
-  margin-right: 0.75rem;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="styles__1eez2qb1"
     >
       <div>
         <span
-          class="emotion-2 emotion-3"
+          class="styles__1eez2qb2"
+          style="--_1eez2qb0: #ff0000;"
         />
       </div>
       <div>

packages/ui/src/components/BarChart/styles.css.ts

@@ -0,0 +1,21 @@
+import { theme } from '@ultraviolet/themes'
+import { createVar, style } from '@vanilla-extract/css'
+
+export const colorBar = createVar()
+
+export const barTooltipContainer = style({
+  display: 'flex',
+  background: theme.colors.neutral.backgroundWeakElevated,
+  borderRadius: theme.radii.small,
+  boxShadow: theme.shadows.tooltip,
+  padding: `${theme.space[1]} ${theme.space[2]}`,
+  alignItems: 'center',
+})
+
+export const barColorSquare = style({
+  display: 'block',
+  width: theme.sizing[150],
+  height: theme.sizing[150],
+  background: colorBar,
+  marginRight: theme.space['1.5'],
+})

packages/ui/src/components/LineChart/CustomLegend.tsx

@@ -2,14 +2,19 @@
 
 import type { Theme } from '@emotion/react'
 import { css } from '@emotion/react'
-import styled from '@emotion/styled'
 import type { DatumValue } from '@nivo/core'
 import type { Serie } from '@nivo/line'
 import type { ComponentProps } from 'react'
 import { getLegendColor } from '../../helpers/legend'
 import { Checkbox } from '../Checkbox'
 import { Text } from '../Text'
 import { getAverage, getCurrent, getMax, getMin, getSelected } from './helpers'
+import {
+  cellValueContainer,
+  container,
+  longContainer,
+  textLegend,
+} from './styles.css'
 
 const styles = {
   body: (theme: Theme) => css`
@@ -47,29 +52,12 @@ type CellProps = {
   variant: ComponentProps<typeof Text>['variant']
 }
 
-const StyledText = styled(Text)`
-  text-align: right;
-  flex: 1;
-  min-width: 72px;
-  align-self: center;
-`
-
 const Cell = ({ value, variant }: CellProps) => (
-  <StyledText as="span" sentiment="neutral" variant={variant}>
+  <Text as="span" className={textLegend} sentiment="neutral" variant={variant}>
     {value as string | number}
-  </StyledText>
+  </Text>
 )
 
-const CellValueContainer = styled.div`
-  display: flex;
-  align-items: center;
-`
-
-const LongContainer = styled.div`
-  display: flex;
-  flex: 6;
-`
-
 type Transformer = (value: DatumValue) => string
 
 const noop: Transformer = value => value.toString()
@@ -83,10 +71,6 @@ type CustomLegendProps = {
   'data-testid'?: string
 }
 
-const StyledContainer = styled.div`
-  margin-top: ${({ theme }) => theme.space[2]};
-`
-
 export const CustomLegend = ({
   axisTransformer = noop,
   data,
@@ -95,12 +79,15 @@ export const CustomLegend = ({
   className,
   'data-testid': dataTestId,
 }: CustomLegendProps) => (
-  <StyledContainer className={className} data-testid={dataTestId}>
+  <div
+    className={`${className ? `${className} ` : ''}${container}`}
+    data-testid={dataTestId}
+  >
     <div
       // oxlint-disable-next-line no-unknown-property
       css={styles.head}
     >
-      <LongContainer>Legend</LongContainer>
+      <div className={longContainer}>Legend</div>
       <Cell value="Minimum" variant="body" />
       <Cell value="Maximum" variant="body" />
       <Cell value="Average" variant="body" />
@@ -122,15 +109,15 @@ export const CustomLegend = ({
             // oxlint-disable-next-line no-unknown-property
             key={labelIndexed}
           >
-            <LongContainer>
+            <div className={longContainer}>
               <Checkbox
                 checked={selected.includes(labelIndexed)}
                 name={id}
                 onChange={() =>
                   setSelected([...getSelected(id, index, selected)])
                 }
               >
-                <CellValueContainer>
+                <div className={cellValueContainer}>
                   <Text as="span" sentiment="neutral" variant="bodySmall">
                     {row?.['label']}
                   </Text>
@@ -140,9 +127,9 @@ export const CustomLegend = ({
                     // oxlint-disable-next-line no-unknown-property
                     data-testid={`label-${id}`}
                   />
-                </CellValueContainer>
+                </div>
               </Checkbox>
-            </LongContainer>
+            </div>
             <Cell value={axisTransformer(getMin(values))} variant="bodySmall" />
             <Cell value={axisTransformer(getMax(values))} variant="bodySmall" />
             <Cell
@@ -157,5 +144,5 @@ export const CustomLegend = ({
         )
       })}
     </div>
-  </StyledContainer>
+  </div>
 )

packages/ui/src/components/LineChart/Tooltip.tsx

@@ -1,30 +1,21 @@
 'use client'
 
-import styled from '@emotion/styled'
 import type { Point } from '@nivo/line'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
 import { Text } from '../Text'
+import { colorLine, lineColorSquare, lineTooltipContainer } from './styles.css'
 
-const LineTooltipContainer = styled.div`
-  display: flex;
-  background: ${({ theme }) => theme.colors.neutral.backgroundStronger};
-  border-radius: ${({ theme }) => theme.radii.small};
-  box-shadow: ${({ theme }) => theme.shadows.tooltip};
-  padding: ${({ theme }) => theme.space['0.5']} ${({ theme }) => theme.space['1']};
-  align-items: center;
-`
-const LineColorSquare = styled.span`
-  display: block;
-  width: ${({ theme }) => theme.sizing['175']};
-  height: ${({ theme }) => theme.sizing['175']};
-  background: ${({ color }) => color};
-  margin-right: ${({ theme }) => theme.space['1.5']};
-`
 type LineChartTooltipProps = { point: Point }
 
 export const LineChartTooltip = ({ point }: LineChartTooltipProps) => (
-  <LineTooltipContainer>
+  <div className={lineTooltipContainer}>
     <div>
-      <LineColorSquare color={point.serieColor} />
+      <span
+        className={lineColorSquare}
+        style={assignInlineVars({
+          [colorLine]: point.serieColor,
+        })}
+      />
     </div>
     <div>
       <Text
@@ -44,5 +35,5 @@ export const LineChartTooltip = ({ point }: LineChartTooltipProps) => (
         {point.data.xFormatted}
       </Text>
     </div>
-  </LineTooltipContainer>
+  </div>
 )

packages/ui/src/components/LineChart/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -2,39 +2,16 @@
 
 exports[`lineChart Tooltip > renders correctly  1`] = `
 <DocumentFragment>
-  .emotion-0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #151a2d;
-  border-radius: 0.125rem;
-  box-shadow: 0px 4px 32px 8px #d9dadd66;
-  padding: 0.25rem 0.5rem;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.emotion-2 {
-  display: block;
-  width: 0.875rem;
-  height: 0.875rem;
-  background: #ff0000;
-  margin-right: 0.75rem;
-}
-
-<div
+  <div
     data-testid="testing"
   >
     <div
-      class="emotion-0 emotion-1"
+      class="styles__8i9lug5"
     >
       <div>
         <span
-          class="emotion-2 emotion-3"
-          color="#ff0000"
+          class="styles__8i9lug6"
+          style="--_8i9lug0: #ff0000;"
         />
       </div>
       <div>