From 945c5a7104b9040b255cf8701a19426172202650 Mon Sep 17 00:00:00 2001
From: Corban Riley <corbanbrook@gmail.com>
Date: Thu, 16 Jan 2025 16:35:09 -0500
Subject: [PATCH] Text converted to tailwind

---
 src/components/Breadcrumbs/Breadcrumbs.tsx    |  12 +-
 .../Collapsible/Collapsible.stories.tsx       |   8 +-
 src/components/Collapsible/Collapsible.tsx    |   4 +-
 src/components/FileInput/FileInput.tsx        |   2 +-
 .../GradientAvatar/GradientAvatar.stories.tsx |  10 +-
 src/components/Modal/Modal.stories.tsx        |  20 +-
 src/components/Text/Text.stories.tsx          |   2 -
 src/components/Text/Text.tsx                  | 230 +++++++++++++-----
 src/components/Text/index.ts                  |   2 +-
 src/components/Toast/Toast.tsx                |   8 +-
 10 files changed, 199 insertions(+), 99 deletions(-)

diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
index 0c4a94183..474a4f836 100644
--- a/src/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -58,13 +58,7 @@ const BreadcrumbSegment = (props: BreadcrumbSegmentProps) => {
   const { path, active, renderLink = defaultRenderLink } = props
 
   return active ? (
-    <Text
-      variant="small"
-      fontWeight="medium"
-      color="text100"
-      whiteSpace="nowrap"
-      capitalize
-    >
+    <Text variant="small" fontWeight="medium" color="text100" nowrap capitalize>
       {path.label}
     </Text>
   ) : (
@@ -75,9 +69,9 @@ const BreadcrumbSegment = (props: BreadcrumbSegmentProps) => {
           variant="small"
           fontWeight="medium"
           color="text50"
-          whiteSpace="nowrap"
+          nowrap
           capitalize
-          opacity={{ hover: '80' }}
+          className="hover:opacity-80"
         >
           {path.label}
         </Text>
diff --git a/src/components/Collapsible/Collapsible.stories.tsx b/src/components/Collapsible/Collapsible.stories.tsx
index efd698a3d..4c023d632 100644
--- a/src/components/Collapsible/Collapsible.stories.tsx
+++ b/src/components/Collapsible/Collapsible.stories.tsx
@@ -26,8 +26,8 @@ const CollapsibleStory = () => {
       onOpenChange={open => setIsOpen(open)}
     >
       {[1, 2, 3, 4, 5].map(x => (
-        <Text variant="normal" as="p" color="text80" key={x}>
-          Item {x}
+        <Text variant="normal" color="text80" key={x} asChild>
+          <p>Item {x}</p>
         </Text>
       ))}
     </Collapsible>
@@ -38,8 +38,8 @@ export const Default: Story = {
   args: {
     label: 'My Heading',
     children: [1, 2, 3, 4, 5].map(x => (
-      <Text variant="normal" as="p" color="text80" key={x}>
-        Item {x}
+      <Text variant="normal" color="text80" key={x} asChild>
+        <p>Item {x}</p>
       </Text>
     )),
   },
diff --git a/src/components/Collapsible/Collapsible.tsx b/src/components/Collapsible/Collapsible.tsx
index e45bb1cd8..5a2f3bdb6 100644
--- a/src/components/Collapsible/Collapsible.tsx
+++ b/src/components/Collapsible/Collapsible.tsx
@@ -57,8 +57,8 @@ export const Collapsible = (props: CollapsibleProps) => {
         transition={{ ease: 'easeOut', duration: 0.3 }}
       >
         <CollapsiblePrimitive.Trigger className="flex items-center bg-transparent p-4 w-full cursor-pointer select-none rounded-md border-none appearance-none h-[64px] focus:outline-none">
-          <Text as="div" variant="normal" fontWeight="bold" color="text80">
-            {label}
+          <Text variant="normal" fontWeight="bold" color="text80" asChild>
+            <div>{label}</div>
           </Text>
           <motion.div
             className="absolute right-0 mr-4"
diff --git a/src/components/FileInput/FileInput.tsx b/src/components/FileInput/FileInput.tsx
index 8ec9ecb09..88289bc47 100644
--- a/src/components/FileInput/FileInput.tsx
+++ b/src/components/FileInput/FileInput.tsx
@@ -105,7 +105,7 @@ export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
             {fileData ? (
               <div className="flex flex-row gap-2 items-center min-w-0">
                 <Text ellipsis>{fileData.name}</Text>
-                <Text color="text50" variant="xsmall" whiteSpace="nowrap">
+                <Text color="text50" variant="xsmall" nowrap>
                   {fileData.size.toFixed(2)} kb
                 </Text>
               </div>
diff --git a/src/components/GradientAvatar/GradientAvatar.stories.tsx b/src/components/GradientAvatar/GradientAvatar.stories.tsx
index 164e04428..e7a9f581f 100644
--- a/src/components/GradientAvatar/GradientAvatar.stories.tsx
+++ b/src/components/GradientAvatar/GradientAvatar.stories.tsx
@@ -61,14 +61,8 @@ for (let row = 0; row < ROWS; row++) {
 export const Multiple = () => {
   return (
     <>
-      <Text
-        as="div"
-        variant="normal"
-        color="text100"
-        fontWeight="bold"
-        marginBottom="4"
-      >
-        SVG
+      <Text variant="normal" color="text100" fontWeight="bold" asChild>
+        <div>SVG</div>
       </Text>
 
       <div className="flex flex-col gap-4">
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index 844e5b88a..ed8537cd6 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -33,11 +33,11 @@ export const Default: Story = {
     children: (
       <div className="flex flex-col justify-between h-full p-4">
         <div>
-          <Text as="h1" variant="medium" color="text100">
-            New Dapp
+          <Text variant="medium" color="text100" asChild>
+            <h1>New Dapp</h1>
           </Text>
-          <Text as="p" variant="normal" color="text50">
-            You can always change these settings later.
+          <Text variant="normal" color="text50" asChild>
+            <p>You can always change these settings later.</p>
           </Text>
         </div>
 
@@ -67,12 +67,14 @@ export const CustomAnimation: Story = {
     children: (
       <div className="flex flex-col justify-between h-full p-4">
         <div>
-          <Text as="h1" variant="medium" color="text100">
-            New Dapp
+          <Text variant="medium" color="text100" asChild>
+            <h1>New Dapp</h1>
           </Text>
-          <Text as="p" variant="normal" color="text50">
-            Custom Open & Close Animated Modal. You can always change these
-            settings later.
+          <Text variant="normal" color="text50" asChild>
+            <p>
+              Custom Open & Close Animated Modal. You can always change these
+              settings later.
+            </p>
           </Text>
         </div>
 
diff --git a/src/components/Text/Text.stories.tsx b/src/components/Text/Text.stories.tsx
index be768645c..28e539123 100644
--- a/src/components/Text/Text.stories.tsx
+++ b/src/components/Text/Text.stories.tsx
@@ -42,7 +42,6 @@ export const BodyLarge: Story = {
   args: {
     variant: 'large',
     color: 'text100',
-    as: 'p',
     children: 'Hello, world!',
   },
 }
@@ -57,7 +56,6 @@ export const TextAsChild: Story = {
   args: {
     variant: 'normal',
     color: 'text100',
-    as: 'p',
     children: (
       <>
         <Text fontWeight="bold" color="positive">
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index 1dc7c0fa9..0bcd6a2b0 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -1,59 +1,171 @@
-import { clsx } from 'clsx'
-import { ElementType, forwardRef } from 'react'
-
-import {
-  Box,
-  PolymorphicComponent,
-  PolymorphicProps,
-  PolymorphicRef,
-} from '~/components/Box'
-
-import * as styles from './styles.css'
-
-type TextProps = styles.TextVariants
-
-export const Text: PolymorphicComponent<TextProps, 'span'> = forwardRef(
-  <T extends ElementType>(
-    props: PolymorphicProps<TextProps, T>,
-    ref: PolymorphicRef<T>
-  ) => {
-    const {
-      as = 'span',
-      variant = 'inherit',
-      className,
-      hidden,
-      italic,
-      underline,
-      children,
-      ellipsis,
-      uppercase,
-      capitalize,
-      ...boxProps
-    } = props
-
-    // Merge as variant as prop values so they can be overridden rather than using textVariants recipe
-    const textVariantProps = styles.rawTextVariants[variant]
-
-    return (
-      <Box
-        as={as}
-        className={clsx(
-          className,
-          styles.textVariants({
-            hidden,
-            ellipsis,
-            italic,
-            underline,
-            uppercase,
-            capitalize,
-          })
-        )}
-        ref={ref}
-        {...textVariantProps}
-        {...boxProps}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
+import { Slot } from '@radix-ui/react-slot'
+import { cva, VariantProps } from 'class-variance-authority'
+
+import { cn } from '~/utils'
+
+export const textVariants = cva('', {
+  variants: {
+    variant: {
+      inherit: [
+        'font-inherit',
+        'text-inherit',
+        'leading-inherit',
+        'tracking-inherit',
+        'font-inherit',
+      ],
+      xlarge: [
+        'font-body',
+        'text-3xl',
+        'leading-9',
+        'tracking-none',
+        'font-bold',
+      ],
+      large: [
+        'font-body',
+        'text-xl',
+        'leading-7',
+        'tracking-normal',
+        'font-semibold',
+      ],
+      medium: [
+        'font-body',
+        'text-base',
+        'leading-6',
+        'tracking-normal',
+        'font-bold',
+      ],
+      normal: [
+        'font-body',
+        'text-sm',
+        'leading-5',
+        'tracking-wide',
+        'font-normal',
+      ],
+      small: [
+        'font-body',
+        'text-xs',
+        'leading-4',
+        'tracking-wide',
+        'font-medium',
+      ],
+      xsmall: [
+        'font-body',
+        'text-[0.625rem]',
+        'leading-4',
+        'tracking-wide',
+        'font-bold',
+      ],
+      code: [
+        'font-mono',
+        'text-sm',
+        'leading-5',
+        'tracking-none',
+        'font-normal',
+      ],
+    },
+
+    fontWeight: {
+      normal: 'font-normal',
+      medium: 'font-medium',
+      semibold: 'font-semibold',
+      bold: 'font-bold',
+    },
+
+    color: {
+      text100: 'text-text-100',
+      text80: 'text-text-80',
+      text50: 'text-text-50',
+      white: 'text-white',
+      black: 'text-black',
+      negative: 'text-negative',
+      positive: 'text-positive',
+      warning: 'text-warning',
+      info: 'text-info',
+    },
+
+    ellipsis: {
+      true: ['overflow-hidden', 'whitespace-nowrap', 'text-ellipsis'],
+    },
+
+    italic: {
+      true: 'italic',
+    },
+
+    underline: {
+      true: 'underline',
+    },
+
+    uppercase: {
+      true: 'uppercase',
+    },
+
+    capitalize: {
+      true: 'capitalize',
+    },
+
+    nowrap: {
+      true: 'whitespace-nowrap',
+    },
+
+    hidden: {
+      true: [
+        'border-0',
+        'clip-rect-0',
+        'h-[1px]',
+        '-m-[1px]',
+        'overflow-hidden',
+        'p-0',
+        'absolute',
+        'w-[1px]',
+      ],
+    },
+  },
+  defaultVariants: {
+    variant: 'inherit',
+  },
+})
+
+export interface TextProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'hidden' | 'color'>,
+    VariantProps<typeof textVariants> {
+  asChild?: boolean
+}
+
+export const Text = (props: TextProps) => {
+  const {
+    asChild,
+    variant = 'inherit',
+    color,
+    fontWeight,
+    className,
+    hidden,
+    italic,
+    underline,
+    ellipsis,
+    uppercase,
+    capitalize,
+    ...rest
+  } = props
+
+  const Component = asChild ? Slot : 'span'
+
+  return (
+    <Component
+      className={cn(
+        textVariants({
+          variant,
+          fontWeight,
+          color,
+          hidden,
+          italic,
+          underline,
+          ellipsis,
+          uppercase,
+          capitalize,
+        }),
+        className
+      )}
+      {...rest}
+    />
+  )
+}
diff --git a/src/components/Text/index.ts b/src/components/Text/index.ts
index 6a74373e1..007279c84 100644
--- a/src/components/Text/index.ts
+++ b/src/components/Text/index.ts
@@ -1,2 +1,2 @@
 export { Text } from './Text'
-export { textVariants } from './styles.css'
+export { textVariants } from './Text'
diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
index f9374513d..f4911f5d7 100644
--- a/src/components/Toast/Toast.tsx
+++ b/src/components/Toast/Toast.tsx
@@ -136,24 +136,24 @@ export const Toast = (props: ToastProps) => {
               {title && (
                 <ToastPrimitive.Title>
                   <Text
-                    as="div"
                     variant="normal"
                     fontWeight="bold"
                     color="text80"
+                    asChild
                   >
-                    {title}
+                    <div>{title}</div>
                   </Text>
                 </ToastPrimitive.Title>
               )}
 
               <ToastPrimitive.Description>
                 <Text
-                  as="div"
                   variant="normal"
                   fontWeight="medium"
                   color="text50"
+                  asChild
                 >
-                  {description}
+                  <div>{description}</div>
                 </Text>
               </ToastPrimitive.Description>
             </div>