chore(web_common): export components with types (#5347)

Author: mykalmax

web/common/src/components/CopyButton/CopyButton.tsx

@@ -1,8 +1,7 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import { Button, type ButtonProps } from '@/components/Button/Button'
-
-type TimerID = ReturnType<typeof setTimeout>
+import { useCopyClipboard } from '@/hooks/useCopyClipboard'
 
 export interface CopyButtonProps extends Omit<ButtonProps, 'children'> {
   text: string
@@ -25,22 +24,7 @@ export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
     },
     ref,
   ) => {
-    const [copied, setCopied] = useState<TimerID | null>(null)
-
-    const copy = (e: React.MouseEvent<HTMLButtonElement>) => {
-      e.preventDefault()
-      e.stopPropagation()
-
-      if (copied) {
-        clearTimeout(copied)
-      }
-
-      navigator.clipboard.writeText(text).then(() => {
-        setCopied(setTimeout(() => setCopied(null), delay))
-      })
-
-      onClick?.(e)
-    }
+    const [copyToClipboard, isCopied] = useCopyClipboard(delay)
 
     return (
       <Button
@@ -49,11 +33,14 @@ export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(
         title={title}
         size={size}
         variant={variant}
-        onClick={copy}
-        disabled={disabled || !!copied}
+        onClick={e => {
+          e.stopPropagation()
+          copyToClipboard(text)
+        }}
+        disabled={disabled || !!isCopied}
         {...props}
       >
-        {children(copied != null)}
+        {children(isCopied != null)}
       </Button>
     )
   },

web/common/src/components/LoadingContainer/LoadingContainer.tsx

@@ -6,7 +6,7 @@ import { LoadingIcon } from './LoadingIcon'
 export interface LoadingContainerProps
   extends React.HTMLAttributes<HTMLDivElement> {
   isLoading?: boolean
-  message?: string
+  message?: React.ReactNode
   side?: Side
   className?: string
 }

web/common/src/components/MessageContainer/MessageContainer.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import MessageContainer from './MessageContainer'
+import { MessageContainer } from './MessageContainer'
 
 const meta = {
   title: 'Components/Containers/MessageContainer',

web/common/src/components/MessageContainer/MessageContainer.tsx

@@ -2,17 +2,19 @@ import { cn } from '@/utils'
 import { LoadingContainer } from '../LoadingContainer/LoadingContainer'
 import { HorizontalContainer } from '../HorizontalContainer/HorizontalContainer'
 
-export default function MessageContainer({
-  children,
-  className,
-  wrap = false,
-  isLoading = false,
-}: {
+export interface MessageContainerProps {
   children: React.ReactNode
   className?: string
   wrap?: boolean
   isLoading?: boolean
-}) {
+}
+
+export function MessageContainer({
+  children,
+  className,
+  wrap = false,
+  isLoading = false,
+}: MessageContainerProps) {
   return (
     <HorizontalContainer
       data-component="MessageContainer"

web/common/src/components/ModelName/ModelName.tsx

@@ -106,7 +106,7 @@ export const ModelName = React.forwardRef<HTMLDivElement, ModelNameProps>(
       return (
         <span
           data-testid="model-name"
-          className="overflow-hidden"
+          className="flex overflow-hidden"
         >
           {catalog && (
             <>
@@ -138,6 +138,7 @@ export const ModelName = React.forwardRef<HTMLDivElement, ModelNameProps>(
           )}
           <span
             className={cn(
+              'truncate',
               grayscale
                 ? 'text-model-name-grayscale-model'
                 : 'text-model-name-model',

web/common/src/components/Tooltip/Tooltip.tsx

@@ -8,12 +8,19 @@ import {
 import React from 'react'
 
 import { cn } from '@/utils'
-import type { Position } from '@/types'
 
 import './Tooltip.css'
 
-export type TooltipSide = Extract<Position, 'top' | 'bottom' | 'left' | 'right'>
-export type TooltipAlign = Extract<Position, 'center' | 'start' | 'end'>
+export interface TooltipProps {
+  trigger: React.ReactNode
+  children: React.ReactNode
+  side?: 'top' | 'bottom' | 'left' | 'right'
+  align?: 'center' | 'start' | 'end'
+  delayDuration?: number
+  sideOffset?: number
+  alignOffset?: number
+  className?: string
+}
 
 export function Tooltip({
   delayDuration = 200,
@@ -24,16 +31,7 @@ export function Tooltip({
   trigger,
   children,
   className,
-}: {
-  trigger: React.ReactNode
-  children: React.ReactNode
-  side?: TooltipSide
-  align?: TooltipAlign
-  delayDuration?: number
-  sideOffset?: number
-  alignOffset?: number
-  className?: string
-}) {
+}: TooltipProps) {
   return (
     <TooltipProvider delayDuration={delayDuration}>
       <TooltipRoot>

web/common/src/components/Typography/Description.tsx

@@ -1,14 +1,16 @@
 import { cn } from '@/utils'
 import React from 'react'
 
+export interface DescriptionProps {
+  children?: React.ReactNode
+  className?: string
+}
+
 export function Description({
   children,
   className,
   ...props
-}: {
-  children?: React.ReactNode
-  className?: string
-}) {
+}: DescriptionProps) {
   return (
     <div
       data-component="Description"

web/common/src/components/Typography/Headline.tsx

@@ -3,16 +3,18 @@ import { getHeadlineTextSize } from './help'
 import type { HeadlineLevel } from '@/types'
 import { cn } from '@/utils'
 
+export interface HeadlineProps {
+  level: HeadlineLevel
+  children: React.ReactNode
+  className?: string
+}
+
 export function Headline({
   level = 1,
   children,
   className,
   ...props
-}: {
-  level: HeadlineLevel
-  children: React.ReactNode
-  className?: string
-}) {
+}: HeadlineProps) {
   const Tag = `h${level}` as keyof JSX.IntrinsicElements
 
   return (

web/common/src/components/Typography/Information.tsx

@@ -6,6 +6,18 @@ import { getTextSize } from './help'
 import type { Size } from '@/types'
 import { Tooltip } from '../Tooltip/Tooltip'
 
+export interface InformationProps {
+  children?: React.ReactNode
+  className?: string
+  classNameTooltip?: string
+  side?: 'right' | 'left'
+  size?: Size
+  sideOffset?: number
+  delayDuration?: number
+  info?: React.ReactNode
+  infoIcon?: React.ReactNode
+}
+
 export function Information({
   children,
   className,
@@ -22,17 +34,7 @@ export function Information({
     />
   ),
   ...props
-}: {
-  children?: React.ReactNode
-  className?: string
-  classNameTooltip?: string
-  side?: 'right' | 'left'
-  size?: Size
-  sideOffset?: number
-  delayDuration?: number
-  info?: React.ReactNode
-  infoIcon?: React.ReactNode
-}) {
+}: InformationProps) {
   return (
     <div
       data-component="Information"

web/common/src/components/Typography/Tagline.tsx

@@ -1,13 +1,11 @@
 import { cn } from '@/utils'
 
-export function Tagline({
-  className,
-  children,
-  ...props
-}: {
+export interface TaglineProps {
   className?: string
   children?: React.ReactNode
-}) {
+}
+
+export function Tagline({ className, children, ...props }: TaglineProps) {
   return (
     <div
       data-component="Tagline"