refactor: 优化textarea.tsx和typography.tsx中的代码格式和结构

Author: Rabithua

apps/ui/components/ui/textarea.tsx

@@ -1,35 +1,34 @@
-"use client";
+"use client"
 
-import { useEffect, useState } from "react";
+import { useEffect, useState } from "react"
 import {
-  composeRenderProps,
   TextArea as TextAreaPrimitive,
   TextField as TextFieldPrimitive,
   type TextFieldProps as TextFieldPrimitiveProps,
   type ValidationResult,
-} from "react-aria-components";
-import { tv } from "tailwind-variants";
+  composeRenderProps,
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
 
-import { Description, FieldError, Label } from "./field";
-import { composeTailwindRenderProps, focusStyles } from "./primitive";
+import { Description, FieldError, Label } from "./field"
+import { composeTailwindRenderProps, focusStyles } from "./primitive"
 
 const textareaStyles = tv({
   extend: focusStyles,
-  base:
-    "field-sizing-content max-h-96 min-h-16 w-full min-w-0 rounded-lg border border-input px-2.5 py-2 pb-6 text-base shadow-xs outline-hidden transition duration-200 disabled:opacity-50 sm:text-sm break-words whitespace-pre-wrap overflow-wrap-anywhere",
-});
+  base: "field-sizing-content overflow-wrap-anywhere max-h-96 min-h-16 w-full min-w-0 whitespace-pre-wrap break-words rounded-lg border border-input px-2.5 py-2 pb-6 text-base shadow-xs outline-hidden transition duration-200 disabled:opacity-50 sm:text-sm",
+})
 
 interface TextareaProps extends TextFieldPrimitiveProps {
-  autoSize?: boolean;
-  label?: string;
-  placeholder?: string;
-  description?: string;
-  errorMessage?: string | ((validation: ValidationResult) => string);
-  className?: string;
-  ref?: React.Ref<HTMLDivElement>;
-  showCharacterCount?: boolean;
-  maxLength?: number;
-  height?: string | number;
+  autoSize?: boolean
+  label?: string
+  placeholder?: string
+  description?: string
+  errorMessage?: string | ((validation: ValidationResult) => string)
+  className?: string
+  ref?: React.Ref<HTMLDivElement>
+  showCharacterCount?: boolean
+  maxLength?: number
+  height?: string | number
 }
 
 const Textarea = ({
@@ -44,29 +43,24 @@ const Textarea = ({
   height,
   ...props
 }: TextareaProps) => {
-  const [currentLength, setCurrentLength] = useState(
-    props.value?.toString().length || 0,
-  );
+  const [currentLength, setCurrentLength] = useState(props.value?.toString().length || 0)
 
   useEffect(() => {
-    setCurrentLength(props.value?.toString().length || 0);
-  }, [props.value]);
+    setCurrentLength(props.value?.toString().length || 0)
+  }, [props.value])
 
   const getCountText = () => {
     if (maxLength) {
-      return `${currentLength}/${maxLength}`;
+      return `${currentLength}/${maxLength}`
     }
-    return `${currentLength}字`;
-  };
+    return `${currentLength}字`
+  }
 
   return (
     <TextFieldPrimitive
       ref={ref}
       {...props}
-      className={composeTailwindRenderProps(
-        className,
-        "group flex flex-col gap-y-1.5",
-      )}
+      className={composeTailwindRenderProps(className, "group flex flex-col gap-y-1.5")}
     >
       {label && <Label isRequired={props.isRequired}>{label}</Label>}
       <div className="relative">
@@ -77,7 +71,8 @@ const Textarea = ({
             textareaStyles({
               ...renderProps,
               className,
-            }))}
+            }),
+          )}
           style={{
             height: height ?? undefined,
             wordWrap: "break-word",
@@ -86,16 +81,16 @@ const Textarea = ({
           }}
         />
         {showCharacterCount && currentLength > 0 && (
-          <div className="absolute bottom-3 right-3 text-xs text-muted-fg select-none pointer-events-none">
+          <div className="pointer-events-none absolute right-3 bottom-3 select-none text-muted-fg text-xs">
             {getCountText()}
           </div>
         )}
       </div>
       {description && <Description>{description}</Description>}
       <FieldError>{errorMessage}</FieldError>
     </TextFieldPrimitive>
-  );
-};
+  )
+}
 
-export type { TextareaProps };
-export { Textarea };
+export type { TextareaProps }
+export { Textarea }

apps/ui/components/ui/typography.tsx

@@ -27,7 +27,13 @@ type TypographyProps = {
   as?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div"
 }
 
-const Typography = ({ className, variant, as: Tag = "div", children, ...props }: TypographyProps) => {
+const Typography = ({
+  className,
+  variant,
+  as: Tag = "div",
+  children,
+  ...props
+}: TypographyProps) => {
   return (
     <Tag className={typographyStyles({ variant, className })} {...props}>
       {children}