Merge pull request #11574 from TylerAPfledderer/feat/stats

feat: create Stat component and stories

Author: wackerow

src/components/Stat/Stat.stories.tsx

@@ -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,
+      },
+    },
+  },
+}

src/components/Stat/index.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react"
+import type { IconType } from "react-icons/lib"
+import { MdInfoOutline, MdWarning } from "react-icons/md"
+import { Flex, HStack, Icon, Text } from "@chakra-ui/react"
+
+import { NULL_VALUE } from "@/lib/constants"
+
+import Tooltip, { type TooltipProps } from "../Tooltip"
+
+const initialContent = {
+  contentValue: NULL_VALUE,
+  tooltipIcon: MdInfoOutline,
+}
+
+export type StatProps = {
+  tooltipProps?: TooltipProps
+  value: string | undefined
+  label: string
+  isError: boolean
+}
+
+const Stat = ({ tooltipProps, value, label, isError }: StatProps) => {
+  const [content, setContent] = useState<{
+    contentValue: string | JSX.Element
+    tooltipIcon: IconType
+  }>(initialContent)
+
+  useEffect(() => {
+    if (isError) {
+      return setContent({
+        contentValue: NULL_VALUE,
+        tooltipIcon: MdWarning,
+      })
+    }
+
+    if (!value) return
+
+    return setContent({ ...initialContent, contentValue: value })
+  }, [isError, value])
+
+  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

src/components/Tooltip/index.tsx

@@ -12,18 +12,18 @@ import {
 
 import { isMobile } from "@/lib/utils/isMobile"
 
-export interface IProps extends PopoverProps {
+export interface TooltipProps extends PopoverProps {
   content: ReactNode
   children?: ReactNode
   onBeforeOpen?: () => void
 }
 
-const Tooltip: React.FC<IProps> = ({
+const Tooltip = ({
   content,
   children,
   onBeforeOpen,
   ...rest
-}) => {
+}: TooltipProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure()
 
   // Close the popover when the user scrolls.

src/lib/constants.ts

@@ -11,6 +11,8 @@ export const TRANSLATED_IMAGES_DIR = "/content/translations"
 export const PLACEHOLDER_IMAGE_DIR = "src/data/placeholders"
 export const INTL_JSON_DIR = "src/intl"
 
+export const NULL_VALUE = "—"
+
 // i18n
 export const DEFAULT_LOCALE = "en"
 export const FAKE_LOCALE = "default"