Enforce allowed child types for custom components

enforce-element-jsx-rule.js

module.exports = {
  meta: {
    type: "suggestion",
    docs: {
      description: "Enforce allowed child types for custom components",
      category: "Best Practices",
      recommended: true,
    },
  },
  create(context) {
    return {
      JSXElement(node) {
        const allowedChildrenMap = {
          MySelect: ["MySelect.Option"],
        };

        const { openingElement } = node;
        const componentName = openingElement.name.name;

        if (allowedChildrenMap[componentName]) {
          const allowedChildren = allowedChildrenMap[componentName];

          for (const child of node.children) {
            if (
              child.type === "JSXElement" &&
              !allowedChildren.includes(child.openingElement.name.name)
            ) {
              context.report({
                node: child,
                message: `Invalid child type for ${componentName}. Allowed child types: ${allowedChildren.join(
                  ", "
                )}`,
              });
            }
          }
        }
      },
    };
  },
};