feat: Add isValidNode function to validate React nodes

[hichemfantar]

Summary

This PR adds a comprehensive isValidReactNode utility function that correctly validates all possible types of React nodes according to the React documentation. The implementation accounts for primitive values such as strings, numbers, booleans, null, and undefined - all of which are valid React nodes.

Based on https://react.dev/reference/react/isValidElement#react-elements-vs-react-nodes

initially tested in Nextra https://github.com/shuding/nextra/pull/4366/files#diff-3c9997fb445c0f1b6cb3a813ca5743ad7785c6a36220c373b681f310c8817f47

This new utility function properly validates:

• React elements (using isValidElement)
• null and undefined values
• String values
• Number values
• Boolean values (true and false)
• Arrays of React nodes (recursively checking each item)

This addresses potential issues where devs create custom checkers for React nodes which might be incorrect, improving the developer experience and preventing false error conditions.

How did you test this change?

I verified this implementation with the following tests:

import { isValidReactNode } from './isValidReactNode';
import { createElement, Fragment } from 'react';

describe('isValidReactNode', () => {
  it('accepts React elements', () => {
    const element = createElement('div', null, 'Hello');
    expect(isValidReactNode(element)).toBe(true);
  });

  it('accepts JSX elements', () => {
    const jsx = <div>Hello</div>;
    expect(isValidReactNode(jsx)).toBe(true);
  });

  it('accepts fragments', () => {
    const fragment = <Fragment>Hello</Fragment>;
    expect(isValidReactNode(fragment)).toBe(true);
  });

  it('accepts strings', () => {
    expect(isValidReactNode('Hello')).toBe(true);
  });

  it('accepts numbers', () => {
    expect(isValidReactNode(42)).toBe(true);
  });

  it('accepts booleans', () => {
    expect(isValidReactNode(true)).toBe(true);
    expect(isValidReactNode(false)).toBe(true);
  });

  it('accepts null and undefined', () => {
    expect(isValidReactNode(null)).toBe(true);
    expect(isValidReactNode(undefined)).toBe(true);
  });

  it('accepts arrays of valid React nodes', () => {
    const arr = ['Hello', <div>World</div>, 42, null, true];
    expect(isValidReactNode(arr)).toBe(true);
  });

  it('rejects arrays containing invalid React nodes', () => {
    const arr = ['Hello', <div>World</div>, {}];
    expect(isValidReactNode(arr)).toBe(false);
  });

  it('rejects objects that are not React elements', () => {
    expect(isValidReactNode({})).toBe(false);
    expect(isValidReactNode({ type: 'div' })).toBe(false);
  });

  it('rejects functions', () => {
    expect(isValidReactNode(() => {})).toBe(false);
  });
});

All tests pass. I also manually verified the function behavior in a React application by testing it with various types of content that should be renderable.