export components wityh types

Author: mykalmax

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/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"

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

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

web/common/src/components/VirtualList/FilterableList.tsx

@@ -5,9 +5,19 @@ import { VerticalContainer } from '../VerticalContainer/VerticalContainer'
 import { HorizontalContainer } from '../HorizontalContainer/HorizontalContainer'
 import { Badge } from '../Badge/Badge'
 import { cn } from '@/utils'
-import MessageContainer from '../MessageContainer/MessageContainer'
+import { MessageContainer } from '../MessageContainer/MessageContainer'
 import { Input } from '../Input/Input'
 
+export interface FilterableListProps<TItem> {
+  items: TItem[]
+  filterOptions?: IFuseOptions<TItem>
+  disabled?: boolean
+  placeholder?: string
+  autoFocus?: boolean
+  className?: string
+  children: (options: TItem[], resetSearch: () => void) => React.ReactNode
+}
+
 export function FilterableList<TItem>({
   items,
   disabled,
@@ -16,15 +26,7 @@ export function FilterableList<TItem>({
   filterOptions,
   className,
   children,
-}: {
-  items: TItem[]
-  filterOptions?: IFuseOptions<TItem>
-  disabled?: boolean
-  placeholder?: string
-  autoFocus?: boolean
-  className?: string
-  children: (options: TItem[], resetSearch: () => void) => React.ReactNode
-}) {
+}: FilterableListProps<TItem>) {
   const [search, setSearch] = React.useState('')
 
   const fuse = new Fuse(items, filterOptions)

web/common/src/components/VirtualList/VirtualList.tsx

@@ -6,19 +6,21 @@ import { Button } from '../Button/Button'
 import { ScrollContainer } from '../ScrollContainer/ScrollContainer'
 import { VerticalContainer } from '../VerticalContainer/VerticalContainer'
 
+export interface VirtualListProps<TItem> {
+  items: TItem[]
+  estimatedListItemHeight: number
+  renderListItem: (item: TItem) => React.ReactNode
+  isSelected?: (item: TItem) => boolean
+  className?: string
+}
+
 export function VirtualList<TItem>({
   items,
   estimatedListItemHeight,
   renderListItem,
   isSelected,
   className,
-}: {
-  items: TItem[]
-  estimatedListItemHeight: number
-  renderListItem: (item: TItem) => React.ReactNode
-  isSelected?: (item: TItem) => boolean
-  className?: string
-}) {
+}: VirtualListProps<TItem>) {
   const scrollableAreaRef = React.useRef<HTMLDivElement>(null)
 
   const [activeItemIndex] = React.useMemo(() => {