Типобезпечні поліморфні компоненти в TypeScript: проп 'as' та forwardRef

// ❌ АНТИПАТЕРН: Відсутність типізації поліморфізму
interface BadButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  as?: any;
  href?: string; // Дозволено для будь-якого виклику, навіть коли рендериться <button>!
}

// ✅ МЕТА СУВОРОГО ПОЛІМОРФІЗМУ:
<Button as="button" type="submit">Надіслати</Button>; // Коректно
<Button as="a" href="/dashboard">В панель</Button>;     // Коректно: href дозволено
// @ts-expect-error — Property 'href' does not exist on type Button when as="button"
<Button as="button" href="/dashboard">Помилка</Button>;

import * as React from 'react';

/**
 * Проп `as`, що визначає тип рендереного тегу або React-компонента
 */
export type AsProp<E extends React.ElementType> = {
  as?: E;
};

/**
 * Ключі, які необхідно виключити з нативних атрибутів елемента E,
 * щоб запобігти випадковому перевизначенню кастомних пропсів.
 */
export type PropsToOmit<E extends React.ElementType, P> = keyof (AsProp<E> & P);

/**
 * Основний поліморфний тип для компонентів без явного ref
 */
export type PolymorphicComponentProps<
  E extends React.ElementType,
  Props = {}
> = React.PropsWithChildren<Props & AsProp<E>> &
  Omit<React.ComponentPropsWithoutRef<E>, PropsToOmit<E, Props>>;

/**
 * Динамічне обчислення точного типу посилання (Ref) для переданого елемента E
 */
export type PolymorphicRef<E extends React.ElementType> =
  React.ComponentPropsWithRef<E>['ref'];

/**
 * Повний тип пропсів поліморфного компонента, що включає суворо типізований ref
 */
export type PolymorphicComponentPropsWithRef<
  E extends React.ElementType,
  Props = {}
> = PolymorphicComponentProps<E, Props> & {
  ref?: PolymorphicRef<E>;
};

import * as React from 'react';
import {
  PolymorphicComponentPropsWithRef,
  PolymorphicRef,
} from '@/types/polymorphic';

export interface ButtonCustomProps {
  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
  size?: 'sm' | 'md' | 'lg';
  isLoading?: boolean;
}

const variantStyles: Record<NonNullable<ButtonCustomProps['variant']>, string> = {
  primary: 'bg-accent-violet text-white hover:bg-accent-violet/90',
  secondary: 'bg-bg-surface text-text-primary border border-border hover:bg-bg-surface/80',
  ghost: 'bg-transparent text-text-secondary hover:text-text-primary',
  destructive: 'bg-red-600 text-white hover:bg-red-700',
};

const sizeStyles: Record<NonNullable<ButtonCustomProps['size']>, string> = {
  sm: 'h-8 px-3 text-xs',
  md: 'h-10 px-4 text-sm',
  lg: 'h-12 px-6 text-base',
};

/**
 * Ідіоматична поліморфна кнопка на React 19
 */
export function Button<E extends React.ElementType = 'button'>({
  as,
  variant = 'primary',
  size = 'md',
  isLoading = false,
  className = '',
  children,
  ref,
  disabled,
  ...restProps
}: PolymorphicComponentPropsWithRef<E, ButtonCustomProps>) {
  const Component = as || 'button';

  const baseStyles =
    'inline-flex items-center justify-center font-medium rounded-lg transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-violet disabled:opacity-50 disabled:pointer-events-none cursor-pointer select-none';

  const combinedClassName = [
    baseStyles,
    variantStyles[variant],
    sizeStyles[size],
    className,
  ]
    .filter(Boolean)
    .join(' ');

  // Якщо рендериться нативна кнопка, проставляємо явний type="button"
  // задля уникнення випадкового відправлення батьківської форми
  const defaultProps = Component === 'button' ? { type: 'button' as const } : {};

  return (
    <Component
      ref={ref as React.Ref<Element>}
      className={combinedClassName}
      disabled={isLoading || disabled}
      aria-busy={isLoading || undefined}
      {...defaultProps}
      {...restProps}
    >
      {isLoading ? (
        <span className="inline-flex items-center gap-2">
          <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="4"
            />
            <path
              className="opacity-75"
              fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
            />
          </svg>
          {children}
        </span>
      ) : (
        children
      )}
    </Component>
  );
}