Skip to content

Commit

Permalink
feat: create Stat component and stories
Browse files Browse the repository at this point in the history
  • Loading branch information
TylerAPfledderer committed Nov 5, 2023
1 parent 6930d2c commit 4d00086
Show file tree
Hide file tree
Showing 2 changed files with 101 additions and 0 deletions.
43 changes: 43 additions & 0 deletions src/components/Stat/Stat.stories.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import { Meta, StoryObj } from "@storybook/react"

import StatComponent from "."

const meta = {
title: "Molecules / Display Content / Stat",
component: StatComponent,
} satisfies Meta<typeof StatComponent>

export default meta

export const Stat: StoryObj<typeof meta> = {
args: {
tooltipProps: {
content: "Tooltip content",
},
isError: false,
label: "Label",
value: "000",
},
argTypes: {
isError: {
table: {
disable: true,
},
},
},
}

export const StatError: StoryObj<typeof meta> = {
args: {
...Stat.args,
isError: true,
value: undefined,
},
argTypes: {
value: {
table: {
disable: true,
},
},
},
}
58 changes: 58 additions & 0 deletions src/components/Stat/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import * as React from "react"
import { Flex, HStack, Icon, Text } from "@chakra-ui/react"
import type { IconType } from "react-icons/lib"
import { MdInfoOutline, MdWarning } from "react-icons/md"

import Tooltip, { IProps as TooltipProps } from "../Tooltip"

const nullValue = <>&mdash;</>

const initialContent = {
contentValue: nullValue,
tooltipIcon: MdInfoOutline,
}

export type StatProps = {
tooltipProps?: TooltipProps
value: string | undefined
label: string
isError: boolean
}

const Stat = ({ tooltipProps, value, label, isError }: StatProps) => {
const [content, setContent] = React.useState<{
contentValue: string | JSX.Element
tooltipIcon: IconType
}>(initialContent)

React.useEffect(() => {
if (isError) {
return setContent({
contentValue: nullValue,
tooltipIcon: MdWarning,
})
}

if (!value) return

return setContent({ ...initialContent, contentValue: value })
}, [isError])

return (
<Flex flexDirection="column-reverse">
<HStack lineHeight="initial" spacing="0.5" color="body.medium">
<Text as="span">{label}</Text>
{!!tooltipProps && (
<Tooltip {...tooltipProps}>
<Icon as={content.tooltipIcon} />
</Tooltip>
)}
</HStack>
<Text as="span" size="5xl" fontWeight="bold">
{content.contentValue}
</Text>
</Flex>
)
}

export default Stat

0 comments on commit 4d00086

Please sign in to comment.