Skip to content

Commit dea06ba

Browse files
dev0Tbenjitrosch
dev0T
and
benjitrosch
authored
refactor(Stats): changed Stat structure (#341)
Co-authored-by: Benji <64439681+benjitrosch@users.noreply.github.com>
1 parent e6f46a3 commit dea06ba

6 files changed

Lines changed: 129 additions & 112 deletions

File tree

‎src/Stats/Stat.tsx‎

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React, { forwardRef } from 'react'
22
import { twMerge } from 'tailwind-merge'
33

44
import { IComponentBaseProps } from '../types'
5-
6-
import StatItem from './StatItem'
5+
import StatSection, { StatSectionProps } from './StatSection'
76

87
export type StatProps = React.HTMLAttributes<HTMLDivElement> &
98
IComponentBaseProps
@@ -18,4 +17,35 @@ const Stat = forwardRef<HTMLDivElement, StatProps>(
1817
}
1918
)
2019

21-
export default Object.assign(Stat, { Item: StatItem })
20+
const StatTitle = React.forwardRef<
21+
HTMLDivElement,
22+
Omit<StatSectionProps, 'section'>
23+
>((props, ref) => <StatSection {...props} section="title" ref={ref} />)
24+
25+
const StatValue = React.forwardRef<
26+
HTMLDivElement,
27+
Omit<StatSectionProps, 'section'>
28+
>((props, ref) => <StatSection {...props} section="value" ref={ref} />)
29+
30+
const StatDesc = React.forwardRef<
31+
HTMLDivElement,
32+
Omit<StatSectionProps, 'section'>
33+
>((props, ref) => <StatSection {...props} section="desc" ref={ref} />)
34+
35+
const StatFigure = React.forwardRef<
36+
HTMLDivElement,
37+
Omit<StatSectionProps, 'section'>
38+
>((props, ref) => <StatSection {...props} section="figure" ref={ref} />)
39+
40+
const StatActions = React.forwardRef<
41+
HTMLDivElement,
42+
Omit<StatSectionProps, 'section'>
43+
>((props, ref) => <StatSection {...props} section="actions" ref={ref} />)
44+
45+
export default Object.assign(Stat, {
46+
Title: StatTitle,
47+
Value: StatValue,
48+
Desc: StatDesc,
49+
Figure: StatFigure,
50+
Actions: StatActions,
51+
})

‎src/Stats/StatItem.tsx‎

Lines changed: 0 additions & 29 deletions
This file was deleted.

‎src/Stats/StatSection.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from 'react'
2+
import clsx from 'clsx'
3+
import { twMerge } from 'tailwind-merge'
4+
5+
import { IComponentBaseProps } from '../types'
6+
7+
export type StatSectionProps = React.HTMLAttributes<HTMLDivElement> &
8+
IComponentBaseProps & {
9+
section: 'title' | 'value' | 'desc' | 'figure' | 'actions'
10+
}
11+
12+
const StatSection = React.forwardRef<HTMLDivElement, StatSectionProps>(
13+
({ children, section, className, ...props }, ref): JSX.Element => {
14+
const classes = twMerge(
15+
className,
16+
clsx({
17+
'stat-title': section === 'title',
18+
'stat-value': section === 'value',
19+
'stat-desc': section === 'desc',
20+
'stat-figure': section === 'figure',
21+
'stat-actions': section === 'actions',
22+
})
23+
)
24+
25+
return (
26+
<div {...props} className={classes} ref={ref}>
27+
{children}
28+
</div>
29+
)
30+
}
31+
)
32+
33+
export default StatSection

‎src/Stats/Stats.stories.tsx‎

Lines changed: 59 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,11 @@ export default {
1212

1313
export const Default: Story<StatsProps> = (args) => {
1414
return (
15-
<Stats {...args} className="bg-base-200 shadow">
15+
<Stats {...args} className="shadow">
1616
<Stats.Stat>
17-
<Stats.Stat.Item variant="title">Total Page Views</Stats.Stat.Item>
18-
<Stats.Stat.Item variant="value">89,400</Stats.Stat.Item>
19-
<Stats.Stat.Item variant="desc">
20-
21% more than last month
21-
</Stats.Stat.Item>
17+
<Stats.Stat.Title>Total Page Views</Stats.Stat.Title>
18+
<Stats.Stat.Value>89,400</Stats.Stat.Value>
19+
<Stats.Stat.Desc>21% more than last month</Stats.Stat.Desc>
2220
</Stats.Stat>
2321
</Stats>
2422
)
@@ -28,7 +26,7 @@ export const IconsOrImage: Story<StatsProps> = (args) => {
2826
return (
2927
<Stats {...args} className="shadow font-sans">
3028
<Stats.Stat>
31-
<Stats.Stat.Item variant="figure" className="text-primary">
29+
<Stats.Stat.Figure className="text-primary">
3230
<svg
3331
xmlns="http://www.w3.org/2000/svg"
3432
fill="none"
@@ -42,18 +40,14 @@ export const IconsOrImage: Story<StatsProps> = (args) => {
4240
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
4341
></path>
4442
</svg>
45-
</Stats.Stat.Item>
46-
<Stats.Stat.Item variant="title">Total Likes</Stats.Stat.Item>
47-
<Stats.Stat.Item variant="value" className="text-primary">
48-
25.6K
49-
</Stats.Stat.Item>
50-
<Stats.Stat.Item variant="desc">
51-
21% more than last month
52-
</Stats.Stat.Item>
43+
</Stats.Stat.Figure>
44+
<Stats.Stat.Title>Total Likes</Stats.Stat.Title>
45+
<Stats.Stat.Value className="text-primary">25.6K</Stats.Stat.Value>
46+
<Stats.Stat.Desc>21% more than last month</Stats.Stat.Desc>
5347
</Stats.Stat>
5448

5549
<Stats.Stat>
56-
<Stats.Stat.Item variant="figure" className="text-secondary">
50+
<Stats.Stat.Figure className="text-secondary">
5751
<svg
5852
xmlns="http://www.w3.org/2000/svg"
5953
fill="none"
@@ -67,18 +61,14 @@ export const IconsOrImage: Story<StatsProps> = (args) => {
6761
d="M13 10V3L4 14h7v7l9-11h-7z"
6862
></path>
6963
</svg>
70-
</Stats.Stat.Item>
71-
<Stats.Stat.Item variant="title">Page Views</Stats.Stat.Item>
72-
<Stats.Stat.Item variant="value" className="text-secondary">
73-
2.6M
74-
</Stats.Stat.Item>
75-
<Stats.Stat.Item variant="desc">
76-
21% more than last month
77-
</Stats.Stat.Item>
64+
</Stats.Stat.Figure>
65+
<Stats.Stat.Title>Page Views</Stats.Stat.Title>
66+
<Stats.Stat.Value className="text-secondary">2.6M</Stats.Stat.Value>
67+
<Stats.Stat.Desc>21% more than last month</Stats.Stat.Desc>
7868
</Stats.Stat>
7969

8070
<Stats.Stat>
81-
<Stats.Stat.Item variant="figure" className="text-primary">
71+
<Stats.Stat.Figure className="text-primary">
8272
<svg
8373
xmlns="http://www.w3.org/2000/svg"
8474
fill="none"
@@ -92,20 +82,20 @@ export const IconsOrImage: Story<StatsProps> = (args) => {
9282
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
9383
></path>
9484
</svg>
95-
</Stats.Stat.Item>
96-
<Stats.Stat.Item variant="figure" className=" text-secondary">
85+
</Stats.Stat.Figure>
86+
<Stats.Stat.Figure className="text-secondary">
9787
<Avatar
9888
size="sm"
9989
online={true}
10090
src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
10191
shape="circle"
10292
></Avatar>
103-
</Stats.Stat.Item>
104-
<Stats.Stat.Item variant="value">86%</Stats.Stat.Item>
105-
<Stats.Stat.Item variant="title">Tasks done</Stats.Stat.Item>
106-
<Stats.Stat.Item variant="desc" className="text-secondary">
93+
</Stats.Stat.Figure>
94+
<Stats.Stat.Value>86%</Stats.Stat.Value>
95+
<Stats.Stat.Title>Tasks done</Stats.Stat.Title>
96+
<Stats.Stat.Desc className="text-secondary">
10797
31 tasks remaining
108-
</Stats.Stat.Item>
98+
</Stats.Stat.Desc>
10999
</Stats.Stat>
110100
</Stats>
111101
)
@@ -115,27 +105,21 @@ export const CenteredItems: Story<StatsProps> = (args) => {
115105
return (
116106
<Stats {...args} className="shadow font-sans">
117107
<Stats.Stat className="place-items-center">
118-
<Stats.Stat.Item variant="title">Downloads</Stats.Stat.Item>
119-
<Stats.Stat.Item variant="value">31K</Stats.Stat.Item>
120-
<Stats.Stat.Item variant="desc">
121-
From January 1st to February 1st
122-
</Stats.Stat.Item>
108+
<Stats.Stat.Title>Downloads</Stats.Stat.Title>
109+
<Stats.Stat.Value>31K</Stats.Stat.Value>
110+
<Stats.Stat.Desc>From January 1st to February 1st</Stats.Stat.Desc>
123111
</Stats.Stat>
124112

125113
<Stats.Stat className="place-items-center">
126-
<Stats.Stat.Item variant="title">Users</Stats.Stat.Item>
127-
<Stats.Stat.Item variant="value" className="text-secondary">
128-
4,200
129-
</Stats.Stat.Item>
130-
<Stats.Stat.Item variant="desc" className="text-secondary">
131-
↗︎ 40 (2%)
132-
</Stats.Stat.Item>
114+
<Stats.Stat.Title>Users</Stats.Stat.Title>
115+
<Stats.Stat.Value className="text-secondary">4,200</Stats.Stat.Value>
116+
<Stats.Stat.Desc className="text-secondary">↗︎ 40 (2%)</Stats.Stat.Desc>
133117
</Stats.Stat>
134118

135119
<Stats.Stat className="place-items-center">
136-
<Stats.Stat.Item variant="title">New Registers</Stats.Stat.Item>
137-
<Stats.Stat.Item variant="value">1,200</Stats.Stat.Item>
138-
<Stats.Stat.Item variant="desc">↘︎ 90 (14%)</Stats.Stat.Item>
120+
<Stats.Stat.Title>New Registers</Stats.Stat.Title>
121+
<Stats.Stat.Value>1,200</Stats.Stat.Value>
122+
<Stats.Stat.Desc>↘︎ 90 (14%)</Stats.Stat.Desc>
139123
</Stats.Stat>
140124
</Stats>
141125
)
@@ -145,48 +129,48 @@ export const Vertical: Story<StatsProps> = (args) => {
145129
return (
146130
<Stats {...args} className="shadow font-sans">
147131
<Stats.Stat>
148-
<Stats.Stat.Item variant="title">Downloads</Stats.Stat.Item>
149-
<Stats.Stat.Item variant="value">31K</Stats.Stat.Item>
150-
<Stats.Stat.Item variant="desc">Jan 1st - Feb 1st</Stats.Stat.Item>
132+
<Stats.Stat.Title>Downloads</Stats.Stat.Title>
133+
<Stats.Stat.Value>31K</Stats.Stat.Value>
134+
<Stats.Stat.Desc>Jan 1st - Feb 1st</Stats.Stat.Desc>
151135
</Stats.Stat>
152136

153137
<Stats.Stat>
154-
<Stats.Stat.Item variant="title">New Users</Stats.Stat.Item>
155-
<Stats.Stat.Item variant="value">4,200</Stats.Stat.Item>
156-
<Stats.Stat.Item variant="desc">↗︎ 400 (22%)</Stats.Stat.Item>
138+
<Stats.Stat.Title>New Users</Stats.Stat.Title>
139+
<Stats.Stat.Value>4,200</Stats.Stat.Value>
140+
<Stats.Stat.Desc>↗︎ 400 (22%)</Stats.Stat.Desc>
157141
</Stats.Stat>
158142

159143
<Stats.Stat>
160-
<Stats.Stat.Item variant="title">New Registers</Stats.Stat.Item>
161-
<Stats.Stat.Item variant="value">1,200</Stats.Stat.Item>
162-
<Stats.Stat.Item variant="desc">↘︎ 90 (14%)</Stats.Stat.Item>
144+
<Stats.Stat.Title>New Registers</Stats.Stat.Title>
145+
<Stats.Stat.Value>1,200</Stats.Stat.Value>
146+
<Stats.Stat.Desc>↘︎ 90 (14%)</Stats.Stat.Desc>
163147
</Stats.Stat>
164148
</Stats>
165149
)
166150
}
167151
Vertical.args = {
168-
vertical: true,
152+
direction: 'vertical',
169153
}
170154

171155
export const Responsive: Story<StatsProps> = (args) => {
172156
return (
173-
<Stats className="stats-vertical lg:stats-horizontal shadow">
157+
<Stats {...args} className="lg:stats-horizontal shadow">
174158
<Stats.Stat>
175-
<Stats.Stat.Item variant="title">Downloads</Stats.Stat.Item>
176-
<Stats.Stat.Item variant="value">31K</Stats.Stat.Item>
177-
<Stats.Stat.Item variant="desc">Jan 1st - Feb 1st</Stats.Stat.Item>
159+
<Stats.Stat.Title>Downloads</Stats.Stat.Title>
160+
<Stats.Stat.Value>31K</Stats.Stat.Value>
161+
<Stats.Stat.Desc>Jan 1st - Feb 1st</Stats.Stat.Desc>
178162
</Stats.Stat>
179163

180164
<Stats.Stat>
181-
<Stats.Stat.Item variant="title">New Users</Stats.Stat.Item>
182-
<Stats.Stat.Item variant="value">4,200</Stats.Stat.Item>
183-
<Stats.Stat.Item variant="desc">↗︎ 400 (22%)</Stats.Stat.Item>
165+
<Stats.Stat.Title>New Users</Stats.Stat.Title>
166+
<Stats.Stat.Value>4,200</Stats.Stat.Value>
167+
<Stats.Stat.Desc>↗︎ 400 (22%)</Stats.Stat.Desc>
184168
</Stats.Stat>
185169

186170
<Stats.Stat>
187-
<Stats.Stat.Item variant="title">New Registers</Stats.Stat.Item>
188-
<Stats.Stat.Item variant="value">1,200</Stats.Stat.Item>
189-
<Stats.Stat.Item variant="desc">↘︎ 90 (14%)</Stats.Stat.Item>
171+
<Stats.Stat.Title>New Registers</Stats.Stat.Title>
172+
<Stats.Stat.Value>1,200</Stats.Stat.Value>
173+
<Stats.Stat.Desc>↘︎ 90 (14%)</Stats.Stat.Desc>
190174
</Stats.Stat>
191175
</Stats>
192176
)
@@ -196,21 +180,21 @@ export const CustomColorsAndButton: Story<StatsProps> = (args) => {
196180
return (
197181
<Stats {...args} className="font-sans bg-primary text-primary-content">
198182
<Stats.Stat>
199-
<Stats.Stat.Item variant="title">Account balance</Stats.Stat.Item>
200-
<Stats.Stat.Item variant="value">$89,400</Stats.Stat.Item>
201-
<div className="stat-actions">
183+
<Stats.Stat.Title>Account balance</Stats.Stat.Title>
184+
<Stats.Stat.Value>$89,400</Stats.Stat.Value>
185+
<Stats.Stat.Actions>
202186
<Button size="sm" color="success">
203187
Add funds
204188
</Button>
205-
</div>
189+
</Stats.Stat.Actions>
206190
</Stats.Stat>
207191
<Stats.Stat>
208-
<Stats.Stat.Item variant="title">Current balance</Stats.Stat.Item>
209-
<Stats.Stat.Item variant="value">$89,400</Stats.Stat.Item>
210-
<div className="stat-actions gap-1 flex">
192+
<Stats.Stat.Title>Current balance</Stats.Stat.Title>
193+
<Stats.Stat.Value>$89,400</Stats.Stat.Value>
194+
<Stats.Stat.Actions className="gap-1 flex">
211195
<Button size="sm">Withdrawal</Button>
212196
<Button size="sm">deposit</Button>
213-
</div>
197+
</Stats.Stat.Actions>
214198
</Stats.Stat>
215199
</Stats>
216200
)

‎src/Stats/Stats.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,20 @@ import Stat from './Stat'
88

99
export type StatsProps = React.HTMLAttributes<HTMLDivElement> &
1010
IComponentBaseProps & {
11-
horizontal?: boolean
12-
vertical?: boolean
11+
direction?: 'horizontal' | 'vertical'
1312
}
1413

1514
const Stats = React.forwardRef<HTMLDivElement, StatsProps>(
1615
(
17-
{ horizontal, vertical, dataTheme, className, children, ...props },
16+
{ direction = 'horizontal', dataTheme, className, children, ...props },
1817
ref
1918
): JSX.Element => {
2019
const classes = twMerge(
2120
'stats',
2221
className,
2322
clsx({
24-
'stats-horizontal': horizontal,
25-
'stats-vertical': vertical,
23+
'stats-vertical': direction === 'vertical',
24+
'stats-horizontal': direction === 'horizontal',
2625
})
2726
)
2827

src/Stats/index.ts renamed to src/Stats/index.tsx

File renamed without changes.

0 commit comments

Comments
 (0)