Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(Stats): changed Stat structure #341

Merged
merged 2 commits into from
Jan 1, 2024
Merged

refactor(Stats): changed Stat structure #341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
50d7fd8
refactor(Stats): changed Stat structure
dev0T Apr 21, 2023
0fed190
Merge branch 'main' into refactor-stats
benjitrosch Jan 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 33 additions & 3 deletions src/Stats/Stat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop

This file was deleted.

33 changes: 33 additions & 0 deletions src/Stats/StatSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
File renamed without changes.