Skip to content

Commit 1e8e44b

Browse files
lisalupilisalupi
authored
refactor: charts vanilla extract (#5582)
* refactor: chart components vanilla extract * fix: feedback
1 parent b19c4e5 commit 1e8e44b

File tree

14 files changed

+731
-1710
lines changed

14 files changed

+731
-1710
lines changed

‎.changeset/ready-regions-play.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@ultraviolet/ui": minor
3+
---
4+
5+
Refactor chart components (`PieChart`, `BarChart` and `LineChart`) to use vanilla-extract instead of Emotion

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

Lines changed: 13 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,8 @@
11
'use client'
22

3-
import styled from '@emotion/styled'
3+
import { assignInlineVars } from '@vanilla-extract/dynamic'
44
import { Text } from '../Text'
5-
6-
const BarToolTipContainer = styled.div`
7-
display: flex;
8-
background: ${({ theme }) => theme.colors.neutral.backgroundWeakElevated};
9-
border-radius: ${({ theme }) => theme.radii.small};
10-
box-shadow: ${({ theme }) => theme.shadows.tooltip};
11-
padding: ${({ theme }) => theme.space['1']} ${({ theme }) => theme.space['2']};
12-
align-items: center;
13-
`
14-
15-
const BarColorSquare = styled('span', {
16-
shouldForwardProp: prop => !['color'].includes(prop),
17-
})<{ color: string }>`
18-
display: block;
19-
width: ${({ theme }) => theme.sizing['150']};
20-
height: ${({ theme }) => theme.sizing['150']};
21-
background: ${({ color }) => color};
22-
margin-right: ${({ theme }) => theme.space['1.5']};
23-
`
5+
import { barColorSquare, barTooltipContainer, colorBar } from './styles.css'
246

257
type BarChartToolTipProps = {
268
color: string
@@ -37,9 +19,17 @@ const BarChartToolTip = ({
3719
className,
3820
'data-testid': dataTestId,
3921
}: BarChartToolTipProps) => (
40-
<BarToolTipContainer className={className} data-testid={dataTestId}>
22+
<div
23+
className={`${className ? `${className} ` : ''}${barTooltipContainer}`}
24+
data-testid={dataTestId}
25+
>
4126
<div>
42-
<BarColorSquare color={color} />
27+
<span
28+
className={barColorSquare}
29+
style={assignInlineVars({
30+
[colorBar]: color,
31+
})}
32+
/>
4333
</div>
4434
<div>
4535
<Text as="p" sentiment="primary" variant="bodyStronger">
@@ -49,7 +39,7 @@ const BarChartToolTip = ({
4939
{indexValue}
5040
</Text>
5141
</div>
52-
</BarToolTipContainer>
42+
</div>
5343
)
5444

5545
export default BarChartToolTip

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

Lines changed: 4 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,16 @@
22

33
exports[`barChartTooltip > renders correctly 1`] = `
44
<DocumentFragment>
5-
.emotion-0 {
6-
display: -webkit-box;
7-
display: -webkit-flex;
8-
display: -ms-flexbox;
9-
display: flex;
10-
background: #ffffff;
11-
border-radius: 0.125rem;
12-
box-shadow: 0px 4px 32px 8px #d9dadd66;
13-
padding: 0.5rem 1rem;
14-
-webkit-align-items: center;
15-
-webkit-box-align: center;
16-
-ms-flex-align: center;
17-
align-items: center;
18-
}
19-
20-
.emotion-2 {
21-
display: block;
22-
width: 0.75rem;
23-
height: 0.75rem;
24-
background: #ff0000;
25-
margin-right: 0.75rem;
26-
}
27-
28-
<div
5+
<div
296
data-testid="testing"
307
>
318
<div
32-
class="emotion-0 emotion-1"
9+
class="styles__1eez2qb1"
3310
>
3411
<div>
3512
<span
36-
class="emotion-2 emotion-3"
13+
class="styles__1eez2qb2"
14+
style="--_1eez2qb0: #ff0000;"
3715
/>
3816
</div>
3917
<div>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { theme } from '@ultraviolet/themes'
2+
import { createVar, style } from '@vanilla-extract/css'
3+
4+
export const colorBar = createVar()
5+
6+
export const barTooltipContainer = style({
7+
display: 'flex',
8+
background: theme.colors.neutral.backgroundWeakElevated,
9+
borderRadius: theme.radii.small,
10+
boxShadow: theme.shadows.tooltip,
11+
padding: `${theme.space[1]} ${theme.space[2]}`,
12+
alignItems: 'center',
13+
})
14+
15+
export const barColorSquare = style({
16+
display: 'block',
17+
width: theme.sizing[150],
18+
height: theme.sizing[150],
19+
background: colorBar,
20+
marginRight: theme.space['1.5'],
21+
})

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

Lines changed: 18 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,19 @@
22

33
import type { Theme } from '@emotion/react'
44
import { css } from '@emotion/react'
5-
import styled from '@emotion/styled'
65
import type { DatumValue } from '@nivo/core'
76
import type { Serie } from '@nivo/line'
87
import type { ComponentProps } from 'react'
98
import { getLegendColor } from '../../helpers/legend'
109
import { Checkbox } from '../Checkbox'
1110
import { Text } from '../Text'
1211
import { getAverage, getCurrent, getMax, getMin, getSelected } from './helpers'
12+
import {
13+
cellValueContainer,
14+
container,
15+
longContainer,
16+
textLegend,
17+
} from './styles.css'
1318

1419
const styles = {
1520
body: (theme: Theme) => css`
@@ -47,29 +52,12 @@ type CellProps = {
4752
variant: ComponentProps<typeof Text>['variant']
4853
}
4954

50-
const StyledText = styled(Text)`
51-
text-align: right;
52-
flex: 1;
53-
min-width: 72px;
54-
align-self: center;
55-
`
56-
5755
const Cell = ({ value, variant }: CellProps) => (
58-
<StyledText as="span" sentiment="neutral" variant={variant}>
56+
<Text as="span" className={textLegend} sentiment="neutral" variant={variant}>
5957
{value as string | number}
60-
</StyledText>
58+
</Text>
6159
)
6260

63-
const CellValueContainer = styled.div`
64-
display: flex;
65-
align-items: center;
66-
`
67-
68-
const LongContainer = styled.div`
69-
display: flex;
70-
flex: 6;
71-
`
72-
7361
type Transformer = (value: DatumValue) => string
7462

7563
const noop: Transformer = value => value.toString()
@@ -83,10 +71,6 @@ type CustomLegendProps = {
8371
'data-testid'?: string
8472
}
8573

86-
const StyledContainer = styled.div`
87-
margin-top: ${({ theme }) => theme.space[2]};
88-
`
89-
9074
export const CustomLegend = ({
9175
axisTransformer = noop,
9276
data,
@@ -95,12 +79,15 @@ export const CustomLegend = ({
9579
className,
9680
'data-testid': dataTestId,
9781
}: CustomLegendProps) => (
98-
<StyledContainer className={className} data-testid={dataTestId}>
82+
<div
83+
className={`${className ? `${className} ` : ''}${container}`}
84+
data-testid={dataTestId}
85+
>
9986
<div
10087
// oxlint-disable-next-line no-unknown-property
10188
css={styles.head}
10289
>
103-
<LongContainer>Legend</LongContainer>
90+
<div className={longContainer}>Legend</div>
10491
<Cell value="Minimum" variant="body" />
10592
<Cell value="Maximum" variant="body" />
10693
<Cell value="Average" variant="body" />
@@ -122,15 +109,15 @@ export const CustomLegend = ({
122109
// oxlint-disable-next-line no-unknown-property
123110
key={labelIndexed}
124111
>
125-
<LongContainer>
112+
<div className={longContainer}>
126113
<Checkbox
127114
checked={selected.includes(labelIndexed)}
128115
name={id}
129116
onChange={() =>
130117
setSelected([...getSelected(id, index, selected)])
131118
}
132119
>
133-
<CellValueContainer>
120+
<div className={cellValueContainer}>
134121
<Text as="span" sentiment="neutral" variant="bodySmall">
135122
{row?.['label']}
136123
</Text>
@@ -140,9 +127,9 @@ export const CustomLegend = ({
140127
// oxlint-disable-next-line no-unknown-property
141128
data-testid={`label-${id}`}
142129
/>
143-
</CellValueContainer>
130+
</div>
144131
</Checkbox>
145-
</LongContainer>
132+
</div>
146133
<Cell value={axisTransformer(getMin(values))} variant="bodySmall" />
147134
<Cell value={axisTransformer(getMax(values))} variant="bodySmall" />
148135
<Cell
@@ -157,5 +144,5 @@ export const CustomLegend = ({
157144
)
158145
})}
159146
</div>
160-
</StyledContainer>
147+
</div>
161148
)

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

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,21 @@
11
'use client'
22

3-
import styled from '@emotion/styled'
43
import type { Point } from '@nivo/line'
4+
import { assignInlineVars } from '@vanilla-extract/dynamic'
55
import { Text } from '../Text'
6+
import { colorLine, lineColorSquare, lineTooltipContainer } from './styles.css'
67

7-
const LineTooltipContainer = styled.div`
8-
display: flex;
9-
background: ${({ theme }) => theme.colors.neutral.backgroundStronger};
10-
border-radius: ${({ theme }) => theme.radii.small};
11-
box-shadow: ${({ theme }) => theme.shadows.tooltip};
12-
padding: ${({ theme }) => theme.space['0.5']} ${({ theme }) => theme.space['1']};
13-
align-items: center;
14-
`
15-
const LineColorSquare = styled.span`
16-
display: block;
17-
width: ${({ theme }) => theme.sizing['175']};
18-
height: ${({ theme }) => theme.sizing['175']};
19-
background: ${({ color }) => color};
20-
margin-right: ${({ theme }) => theme.space['1.5']};
21-
`
228
type LineChartTooltipProps = { point: Point }
239

2410
export const LineChartTooltip = ({ point }: LineChartTooltipProps) => (
25-
<LineTooltipContainer>
11+
<div className={lineTooltipContainer}>
2612
<div>
27-
<LineColorSquare color={point.serieColor} />
13+
<span
14+
className={lineColorSquare}
15+
style={assignInlineVars({
16+
[colorLine]: point.serieColor,
17+
})}
18+
/>
2819
</div>
2920
<div>
3021
<Text
@@ -44,5 +35,5 @@ export const LineChartTooltip = ({ point }: LineChartTooltipProps) => (
4435
{point.data.xFormatted}
4536
</Text>
4637
</div>
47-
</LineTooltipContainer>
38+
</div>
4839
)

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

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,16 @@
22

33
exports[`lineChart Tooltip > renders correctly 1`] = `
44
<DocumentFragment>
5-
.emotion-0 {
6-
display: -webkit-box;
7-
display: -webkit-flex;
8-
display: -ms-flexbox;
9-
display: flex;
10-
background: #151a2d;
11-
border-radius: 0.125rem;
12-
box-shadow: 0px 4px 32px 8px #d9dadd66;
13-
padding: 0.25rem 0.5rem;
14-
-webkit-align-items: center;
15-
-webkit-box-align: center;
16-
-ms-flex-align: center;
17-
align-items: center;
18-
}
19-
20-
.emotion-2 {
21-
display: block;
22-
width: 0.875rem;
23-
height: 0.875rem;
24-
background: #ff0000;
25-
margin-right: 0.75rem;
26-
}
27-
28-
<div
5+
<div
296
data-testid="testing"
307
>
318
<div
32-
class="emotion-0 emotion-1"
9+
class="styles__8i9lug5"
3310
>
3411
<div>
3512
<span
36-
class="emotion-2 emotion-3"
37-
color="#ff0000"
13+
class="styles__8i9lug6"
14+
style="--_8i9lug0: #ff0000;"
3815
/>
3916
</div>
4017
<div>

0 commit comments

Comments
 (0)