Componente Genérico React com TypeScript

// Componente NAO generico (restrito a um tipo)
interface UserListProps {
  items: User[];
  renderItem: (item: User) => ReactNode;
}

interface ProductListProps {
  items: Product[];
  renderItem: (item: Product) => ReactNode;
}
// Codigo duplicado! Mesma estrutura, tipos diferentes.

// Componente generico (funciona com qualquer tipo)
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => ReactNode;
}
// Um unico componente pra todos os casos.

import { ReactNode } from 'react';

// Props genericas com constraint
interface ListProps<T extends { id: string | number }> {
  items: T[];
  renderItem: (item: T, index: number) => ReactNode;
  emptyMessage?: string;
  loading?: boolean;
  className?: string;
}

// Componente generico
function List<T extends { id: string | number }>({
  items,
  renderItem,
  emptyMessage = 'Nenhum item encontrado',
  loading = false,
  className,
}: ListProps<T>) {
  if (loading) return <div>Carregando...</div>;

  if (items.length === 0) {
    return <p className="text-gray-500">{emptyMessage}</p>;
  }

  return (
    <ul className={className}>
      {items.map((item, index) => (
        <li key={item.id}>{renderItem(item, index)}</li>
      ))}
    </ul>
  );
}

// Uso com User — TypeScript infere T = User
interface User {
  id: string;
  name: string;
  email: string;
}

const users: User[] = [
  { id: '1', name: 'Ana', email: 'ana@mail.com' },
  { id: '2', name: 'Carlos', email: 'carlos@mail.com' },
];

<List
  items={users}
  renderItem={(user) => (
    <div>
      <strong>{user.name}</strong> {/* autocomplete funciona! */}
      <span>{user.email}</span>
    </div>
  )}
/>

// Uso com Product — mesmo componente, tipo diferente
interface Product {
  id: number;
  name: string;
  price: number;
}

<List
  items={products}
  renderItem={(product) => (
    <div>
      {product.name} - R${product.price} {/* tipado! */}
    </div>
  )}
/>

import { ReactNode } from 'react';

interface SelectProps<T> {
  options: T[];
  value: T | null;
  onChange: (selected: T) => void;
  getLabel: (option: T) => string;
  getValue: (option: T) => string;
  placeholder?: string;
}

function Select<T>({
  options,
  value,
  onChange,
  getLabel,
  getValue,
  placeholder = 'Selecione...',
}: SelectProps<T>) {
  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selected = options.find(
      (opt) => getValue(opt) === e.target.value
    );
    if (selected) onChange(selected);
  };

  return (
    <select
      value={value ? getValue(value) : ''}
      onChange={handleChange}
    >
      <option value="">{placeholder}</option>
      {options.map((opt) => (
        <option key={getValue(opt)} value={getValue(opt)}>
          {getLabel(opt)}
        </option>
      ))}
    </select>
  );
}

// Uso: TypeScript sabe que selected e do tipo Country
interface Country {
  code: string;
  name: string;
  population: number;
}

const [country, setCountry] = useState<Country | null>(null);

<Select
  options={countries}
  value={country}
  onChange={setCountry}          // (selected: Country) => void
  getLabel={(c) => c.name}       // TypeScript sabe que c e Country
  getValue={(c) => c.code}
/>

import { ReactNode } from 'react';

// Coluna tipada com keyof
interface Column<T> {
  header: string;
  accessor: keyof T;
  render?: (value: T[keyof T], row: T) => ReactNode;
}

interface TableProps<T extends { id: string | number }> {
  data: T[];
  columns: Column<T>[];
  onRowClick?: (row: T) => void;
}

function Table<T extends { id: string | number }>({
  data,
  columns,
  onRowClick,
}: TableProps<T>) {
  return (
    <table>
      <thead>
        <tr>
          {columns.map((col) => (
            <th key={String(col.accessor)}>{col.header}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.map((row) => (
          <tr
            key={row.id}
            onClick={() => onRowClick?.(row)}
            style={{ cursor: onRowClick ? 'pointer' : 'default' }}
          >
            {columns.map((col) => (
              <td key={String(col.accessor)}>
                {col.render
                  ? col.render(row[col.accessor], row)
                  : String(row[col.accessor])}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// Uso: colunas tipadas com base no tipo Employee
interface Employee {
  id: number;
  name: string;
  role: string;
  salary: number;
}

const columns: Column<Employee>[] = [
  { header: 'Nome', accessor: 'name' },
  { header: 'Cargo', accessor: 'role' },
  {
    header: 'Salario',
    accessor: 'salary',
    render: (value) => `R$ ${Number(value).toFixed(2)}`,
  },
  // { header: 'Teste', accessor: 'inexistente' } // ERRO!
];

<Table
  data={employees}
  columns={columns}
  onRowClick={(emp) => console.log(emp.name)}
/>

import { forwardRef, Ref, ReactNode } from 'react';

// Props genericas do input
interface GenericInputProps<T> {
  value: T;
  onChange: (value: T) => void;
  parse: (raw: string) => T;
  format: (value: T) => string;
  label: string;
}

// Workaround: componente interno generico
function GenericInputInner<T>(
  {
    value,
    onChange,
    parse,
    format,
    label,
  }: GenericInputProps<T>,
  ref: Ref<HTMLInputElement>
) {
  return (
    <label>
      {label}
      <input
        ref={ref}
        value={format(value)}
        onChange={(e) => onChange(parse(e.target.value))}
      />
    </label>
  );
}

// Type assertion pra manter o generico
export const GenericInput = forwardRef(GenericInputInner) as <T>(
  props: GenericInputProps<T> & { ref?: Ref<HTMLInputElement> }
) => ReactNode;

// Uso com numero
<GenericInput
  value={42}
  onChange={(n) => console.log(n)} // n e number
  parse={Number}
  format={String}
  label="Quantidade"
/>

// Uso com Date
<GenericInput
  value={new Date()}
  onChange={(d) => console.log(d)} // d e Date
  parse={(s) => new Date(s)}
  format={(d) => d.toISOString().split('T')[0]}
  label="Data"
/>

// ERRADO: acessar .id sem constraint
function List<T>({ items }: { items: T[] }) {
  return items.map(item => (
    <li key={item.id}>{/* ERRO: Property 'id' does not exist on type 'T' */}</li>
  ));
}

// CERTO: constraint garante que T tem id
function List<T extends { id: string | number }>({ items }: { items: T[] }) {
  return items.map(item => (
    <li key={item.id}>...</li> // OK!
  ));
}

// ERRADO em .tsx: parser confunde com JSX tag
const MyComponent = <T>(props: Props<T>) => { ... };
// Erro de syntax!

// CERTO: virgula desambigua o generico
const MyComponent = <T,>(props: Props<T>) => { ... };

// OU: use function declaration (mais limpo)
function MyComponent<T>(props: Props<T>) { ... }

// ERRADO: generico desnecessario
function Badge<T>({ text }: { text: string }) {
  // T nunca e usado! Remove o generico.
  return <span>{text}</span>;
}