HomeOnTour LogoUI

TypeScript

Full TypeScript support with exported types

Type Safety

All components are written in TypeScript and export their prop types. This gives you full IntelliSense support and type checking in your IDE.

Using Component Types

Import Types
Import component types alongside components
import { 
  LogoSvg, 
  type LogoSvgProps 
} from '@/components/homeontour-ui/logo-svg'

// Use the type
const logoProps: LogoSvgProps = {
  signatureColor: '#FF6B6B',
  textColor: '#4ECDC4',
  className: 'h-12',
}

<LogoSvg {...logoProps} />

Extending Types

Creating Custom Props
Extend component props for custom wrappers
import { 
  LogoSvg, 
  type LogoSvgProps 
} from '@/components/homeontour-ui/logo-svg'

// Extend the props
interface BrandLogoProps extends LogoSvgProps {
  theme?: 'light' | 'dark'
}

function BrandLogo({ theme = 'light', ...props }: BrandLogoProps) {
  const colors = theme === 'dark' 
    ? { signatureColor: '#fff', textColor: '#ccc' }
    : { signatureColor: '#e74c3c', textColor: '#2c3e50' }
  
  return (
    <LogoSvg {...colors} {...props} />
  )
}

Variant Types

Type-Safe Variants
Components using CVA have typed variants
import { LogoSvg } from '@/components/homeontour-ui/logo-svg'

// Props are type-checked
<LogoSvg signatureColor="#FF6B6B" />  // ✓ Valid - string
<LogoSvg textColor="#2C3E50" />       // ✓ Valid - string
<LogoSvg className="h-10" />          // ✓ Valid - string

// Invalid types cause errors
<LogoSvg signatureColor={123} />      // ✗ Type error!
<LogoSvg className={true} />          // ✗ Type error!

Component Reference Types

Using Refs
Components support React refs with proper typing
import { useRef } from 'react'
import { LogoSvg } from '@/components/homeontour-ui/logo-svg'

function MyComponent() {
  // Typed ref
  const logoRef = useRef<SVGSVGElement>(null)
  
  const handleClick = () => {
    // Full type safety
    const svg = logoRef.current
    if (svg) {
      console.log(svg.getBBox())
      svg.setAttribute('aria-label', 'Company Logo')
    }
  }
  
  return (
    <LogoSvg ref={logoRef} className="h-10" />
  )
}

Generic Components

Components extend HTML element props, giving you access to all standard attributes:

HTML Attributes
All standard HTML props are available
import { LogoSvg } from '@/components/homeontour-ui/logo-svg'

<LogoSvg
  // All SVG HTML props work
  onClick={() => {}}
  onMouseEnter={() => {}}
  aria-label="Company Logo"
  data-testid="brand-logo"
  role="img"
  // Plus custom component props
  signatureColor="#FF6B6B"
  textColor="#4ECDC4"
  className="h-12"
/>