Skip to content

Commit

Permalink
refactor(Stats): changed Stat structure (#341)
Browse files Browse the repository at this point in the history 
Co-authored-by: Benji <64439681+benjitrosch@users.noreply.github.com>
  • Loading branch information
@dev0T @benjitrosch
dev0T and benjitrosch committed Jan 1, 2024
1 parent e6f46a3 commit dea06ba
Show file tree
Hide file tree
Showing 6 changed files with 129 additions and 112 deletions.
36 changes: 33 additions & 3 deletions src/Stats/Stat.tsx
View file
Expand Up @@ -2,8 +2,7 @@ import React, { forwardRef } from 'react'
import { twMerge } from 'tailwind-merge'

import { IComponentBaseProps } from '../types'

import StatItem from './StatItem'
import StatSection, { StatSectionProps } from './StatSection'

export type StatProps = React.HTMLAttributes<HTMLDivElement> &
IComponentBaseProps
Expand All @@ -18,4 +17,35 @@ const Stat = forwardRef<HTMLDivElement, StatProps>(
}
)

export default Object.assign(Stat, { Item: StatItem })
const StatTitle = React.forwardRef<
HTMLDivElement,
Omit<StatSectionProps, 'section'>
>((props, ref) => <StatSection {...props} section="title" ref={ref} />)

const StatValue = React.forwardRef<
HTMLDivElement,
Omit<StatSectionProps, 'section'>
>((props, ref) => <StatSection {...props} section="value" ref={ref} />)

const StatDesc = React.forwardRef<
HTMLDivElement,
Omit<StatSectionProps, 'section'>
>((props, ref) => <StatSection {...props} section="desc" ref={ref} />)

const StatFigure = React.forwardRef<
HTMLDivElement,
Omit<StatSectionProps, 'section'>
>((props, ref) => <StatSection {...props} section="figure" ref={ref} />)

const StatActions = React.forwardRef<
HTMLDivElement,
Omit<StatSectionProps, 'section'>
>((props, ref) => <StatSection {...props} section="actions" ref={ref} />)

export default Object.assign(Stat, {
Title: StatTitle,
Value: StatValue,
Desc: StatDesc,
Figure: StatFigure,
Actions: StatActions,
})
29 changes: 0 additions & 29 deletions src/Stats/StatItem.tsx
View file

This file was deleted.

33 changes: 33 additions & 0 deletions src/Stats/StatSection.tsx
View file
@@ -0,0 +1,33 @@
import React from 'react'
import clsx from 'clsx'
import { twMerge } from 'tailwind-merge'

import { IComponentBaseProps } from '../types'

export type StatSectionProps = React.HTMLAttributes<HTMLDivElement> &
IComponentBaseProps & {
section: 'title' | 'value' | 'desc' | 'figure' | 'actions'
}

const StatSection = React.forwardRef<HTMLDivElement, StatSectionProps>(
({ children, section, className, ...props }, ref): JSX.Element => {
const classes = twMerge(
className,
clsx({
'stat-title': section === 'title',
'stat-value': section === 'value',
'stat-desc': section === 'desc',
'stat-figure': section === 'figure',
'stat-actions': section === 'actions',
})
)

return (
<div {...props} className={classes} ref={ref}>
{children}
</div>
)
}
)

export default StatSection
134 changes: 59 additions & 75 deletions src/Stats/Stats.stories.tsx
View file
Expand Up @@ -12,13 +12,11 @@ export default {

export const Default: Story<StatsProps> = (args) => {
return (
<Stats {...args} className="bg-base-200 shadow">
<Stats {...args} className="shadow">
<Stats.Stat>
<Stats.Stat.Item variant="title">Total Page Views</Stats.Stat.Item>
<Stats.Stat.Item variant="value">89,400</Stats.Stat.Item>
<Stats.Stat.Item variant="desc">
21% more than last month
</Stats.Stat.Item>
<Stats.Stat.Title>Total Page Views</Stats.Stat.Title>
<Stats.Stat.Value>89,400</Stats.Stat.Value>
<Stats.Stat.Desc>21% more than last month</Stats.Stat.Desc>
</Stats.Stat>
</Stats>
)
Expand All @@ -28,7 +26,7 @@ export const IconsOrImage: Story<StatsProps> = (args) => {
return (
<Stats {...args} className="shadow font-sans">
<Stats.Stat>
<Stats.Stat.Item variant="figure" className="text-primary">
<Stats.Stat.Figure className="text-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
Expand All @@ -42,18 +40,14 @@ export const IconsOrImage: Story<StatsProps> = (args) => {
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"
></path>
</svg>
</Stats.Stat.Item>
<Stats.Stat.Item variant="title">Total Likes</Stats.Stat.Item>
<Stats.Stat.Item variant="value" className="text-primary">
25.6K
</Stats.Stat.Item>
<Stats.Stat.Item variant="desc">
21% more than last month
</Stats.Stat.Item>
</Stats.Stat.Figure>
<Stats.Stat.Title>Total Likes</Stats.Stat.Title>
<Stats.Stat.Value className="text-primary">25.6K</Stats.Stat.Value>
<Stats.Stat.Desc>21% more than last month</Stats.Stat.Desc>
</Stats.Stat>

<Stats.Stat>
<Stats.Stat.Item variant="figure" className="text-secondary">
<Stats.Stat.Figure className="text-secondary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
Expand All @@ -67,18 +61,14 @@ export const IconsOrImage: Story<StatsProps> = (args) => {
d="M13 10V3L4 14h7v7l9-11h-7z"
></path>
</svg>
</Stats.Stat.Item>
<Stats.Stat.Item variant="title">Page Views</Stats.Stat.Item>
<Stats.Stat.Item variant="value" className="text-secondary">
2.6M
</Stats.Stat.Item>
<Stats.Stat.Item variant="desc">
21% more than last month
</Stats.Stat.Item>
</Stats.Stat.Figure>
<Stats.Stat.Title>Page Views</Stats.Stat.Title>
<Stats.Stat.Value className="text-secondary">2.6M</Stats.Stat.Value>
<Stats.Stat.Desc>21% more than last month</Stats.Stat.Desc>
</Stats.Stat>

<Stats.Stat>
<Stats.Stat.Item variant="figure" className="text-primary">
<Stats.Stat.Figure className="text-primary">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
Expand All @@ -92,20 +82,20 @@ export const IconsOrImage: Story<StatsProps> = (args) => {
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"
></path>
</svg>
</Stats.Stat.Item>
<Stats.Stat.Item variant="figure" className=" text-secondary">
</Stats.Stat.Figure>
<Stats.Stat.Figure className="text-secondary">
<Avatar
size="sm"
online={true}
src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg"
shape="circle"
></Avatar>
</Stats.Stat.Item>
<Stats.Stat.Item variant="value">86%</Stats.Stat.Item>
<Stats.Stat.Item variant="title">Tasks done</Stats.Stat.Item>
<Stats.Stat.Item variant="desc" className="text-secondary">
</Stats.Stat.Figure>
<Stats.Stat.Value>86%</Stats.Stat.Value>
<Stats.Stat.Title>Tasks done</Stats.Stat.Title>
<Stats.Stat.Desc className="text-secondary">
31 tasks remaining
</Stats.Stat.Item>
</Stats.Stat.Desc>
</Stats.Stat>
</Stats>
)
Expand All @@ -115,27 +105,21 @@ export const CenteredItems: Story<StatsProps> = (args) => {
return (
<Stats {...args} className="shadow font-sans">
<Stats.Stat className="place-items-center">
<Stats.Stat.Item variant="title">Downloads</Stats.Stat.Item>
<Stats.Stat.Item variant="value">31K</Stats.Stat.Item>
<Stats.Stat.Item variant="desc">
From January 1st to February 1st
</Stats.Stat.Item>
<Stats.Stat.Title>Downloads</Stats.Stat.Title>
<Stats.Stat.Value>31K</Stats.Stat.Value>
<Stats.Stat.Desc>From January 1st to February 1st</Stats.Stat.Desc>
</Stats.Stat>

<Stats.Stat className="place-items-center">
<Stats.Stat.Item variant="title">Users</Stats.Stat.Item>
<Stats.Stat.Item variant="value" className="text-secondary">
4,200
</Stats.Stat.Item>
<Stats.Stat.Item variant="desc" className="text-secondary">
↗︎ 40 (2%)
</Stats.Stat.Item>
<Stats.Stat.Title>Users</Stats.Stat.Title>
<Stats.Stat.Value className="text-secondary">4,200</Stats.Stat.Value>
<Stats.Stat.Desc className="text-secondary">↗︎ 40 (2%)</Stats.Stat.Desc>
</Stats.Stat>

<Stats.Stat className="place-items-center">
<Stats.Stat.Item variant="title">New Registers</Stats.Stat.Item>
<Stats.Stat.Item variant="value">1,200</Stats.Stat.Item>
<Stats.Stat.Item variant="desc">↘︎ 90 (14%)</Stats.Stat.Item>
<Stats.Stat.Title>New Registers</Stats.Stat.Title>
<Stats.Stat.Value>1,200</Stats.Stat.Value>
<Stats.Stat.Desc>↘︎ 90 (14%)</Stats.Stat.Desc>
</Stats.Stat>
</Stats>
)
Expand All @@ -145,48 +129,48 @@ export const Vertical: Story<StatsProps> = (args) => {
return (
<Stats {...args} className="shadow font-sans">
<Stats.Stat>
<Stats.Stat.Item variant="title">Downloads</Stats.Stat.Item>
<Stats.Stat.Item variant="value">31K</Stats.Stat.Item>
<Stats.Stat.Item variant="desc">Jan 1st - Feb 1st</Stats.Stat.Item>
<Stats.Stat.Title>Downloads</Stats.Stat.Title>
<Stats.Stat.Value>31K</Stats.Stat.Value>
<Stats.Stat.Desc>Jan 1st - Feb 1st</Stats.Stat.Desc>
</Stats.Stat>

<Stats.Stat>
<Stats.Stat.Item variant="title">New Users</Stats.Stat.Item>
<Stats.Stat.Item variant="value">4,200</Stats.Stat.Item>
<Stats.Stat.Item variant="desc">↗︎ 400 (22%)</Stats.Stat.Item>
<Stats.Stat.Title>New Users</Stats.Stat.Title>
<Stats.Stat.Value>4,200</Stats.Stat.Value>
<Stats.Stat.Desc>↗︎ 400 (22%)</Stats.Stat.Desc>
</Stats.Stat>

<Stats.Stat>
<Stats.Stat.Item variant="title">New Registers</Stats.Stat.Item>
<Stats.Stat.Item variant="value">1,200</Stats.Stat.Item>
<Stats.Stat.Item variant="desc">↘︎ 90 (14%)</Stats.Stat.Item>
<Stats.Stat.Title>New Registers</Stats.Stat.Title>
<Stats.Stat.Value>1,200</Stats.Stat.Value>
<Stats.Stat.Desc>↘︎ 90 (14%)</Stats.Stat.Desc>
</Stats.Stat>
</Stats>
)
}
Vertical.args = {
vertical: true,
direction: 'vertical',
}

export const Responsive: Story<StatsProps> = (args) => {
return (
<Stats className="stats-vertical lg:stats-horizontal shadow">
<Stats {...args} className="lg:stats-horizontal shadow">
<Stats.Stat>
<Stats.Stat.Item variant="title">Downloads</Stats.Stat.Item>
<Stats.Stat.Item variant="value">31K</Stats.Stat.Item>
<Stats.Stat.Item variant="desc">Jan 1st - Feb 1st</Stats.Stat.Item>
<Stats.Stat.Title>Downloads</Stats.Stat.Title>
<Stats.Stat.Value>31K</Stats.Stat.Value>
<Stats.Stat.Desc>Jan 1st - Feb 1st</Stats.Stat.Desc>
</Stats.Stat>

<Stats.Stat>
<Stats.Stat.Item variant="title">New Users</Stats.Stat.Item>
<Stats.Stat.Item variant="value">4,200</Stats.Stat.Item>
<Stats.Stat.Item variant="desc">↗︎ 400 (22%)</Stats.Stat.Item>
<Stats.Stat.Title>New Users</Stats.Stat.Title>
<Stats.Stat.Value>4,200</Stats.Stat.Value>
<Stats.Stat.Desc>↗︎ 400 (22%)</Stats.Stat.Desc>
</Stats.Stat>

<Stats.Stat>
<Stats.Stat.Item variant="title">New Registers</Stats.Stat.Item>
<Stats.Stat.Item variant="value">1,200</Stats.Stat.Item>
<Stats.Stat.Item variant="desc">↘︎ 90 (14%)</Stats.Stat.Item>
<Stats.Stat.Title>New Registers</Stats.Stat.Title>
<Stats.Stat.Value>1,200</Stats.Stat.Value>
<Stats.Stat.Desc>↘︎ 90 (14%)</Stats.Stat.Desc>
</Stats.Stat>
</Stats>
)
Expand All @@ -196,21 +180,21 @@ export const CustomColorsAndButton: Story<StatsProps> = (args) => {
return (
<Stats {...args} className="font-sans bg-primary text-primary-content">
<Stats.Stat>
<Stats.Stat.Item variant="title">Account balance</Stats.Stat.Item>
<Stats.Stat.Item variant="value">$89,400</Stats.Stat.Item>
<div className="stat-actions">
<Stats.Stat.Title>Account balance</Stats.Stat.Title>
<Stats.Stat.Value>$89,400</Stats.Stat.Value>
<Stats.Stat.Actions>
<Button size="sm" color="success">
Add funds
</Button>
</div>
</Stats.Stat.Actions>
</Stats.Stat>
<Stats.Stat>
<Stats.Stat.Item variant="title">Current balance</Stats.Stat.Item>
<Stats.Stat.Item variant="value">$89,400</Stats.Stat.Item>
<div className="stat-actions gap-1 flex">
<Stats.Stat.Title>Current balance</Stats.Stat.Title>
<Stats.Stat.Value>$89,400</Stats.Stat.Value>
<Stats.Stat.Actions className="gap-1 flex">
<Button size="sm">Withdrawal</Button>
<Button size="sm">deposit</Button>
</div>
</Stats.Stat.Actions>
</Stats.Stat>
</Stats>
)
Expand Down
9 changes: 4 additions & 5 deletions src/Stats/Stats.tsx
View file
Expand Up @@ -8,21 +8,20 @@ import Stat from './Stat'

export type StatsProps = React.HTMLAttributes<HTMLDivElement> &
IComponentBaseProps & {
horizontal?: boolean
vertical?: boolean
direction?: 'horizontal' | 'vertical'
}

const Stats = React.forwardRef<HTMLDivElement, StatsProps>(
(
{ horizontal, vertical, dataTheme, className, children, ...props },
{ direction = 'horizontal', dataTheme, className, children, ...props },
ref
): JSX.Element => {
const classes = twMerge(
'stats',
className,
clsx({
'stats-horizontal': horizontal,
'stats-vertical': vertical,
'stats-vertical': direction === 'vertical',
'stats-horizontal': direction === 'horizontal',
})
)

Expand Down
0 src/Stats/index.ts → src/Stats/index.tsx
View file
File renamed without changes.

0 comments on commit dea06ba

Please sign in to comment.