prefer-grid

const TYPES = {
  string: getPropStringValue,
  sequence: getPropSequenceValue,
  array: getPropArrayValue,
  object: getPropObjectValue,
  object_element: getPropObjectValue,
  functiondefinition: () => {},
};

function getTag(node) {
  if (node && node.tag) {
    return node.tag.value;
  }
}

function getProp(attributes = [], prop = "") {
  if (!prop) return;

  return attributes.find((attribute) => {
    if (attribute && attribute.name && attribute.name.value) {
      return attribute.name.value === prop;
    }
  });
}

function getPropStringValue(value) {
  if (value.value === "true") {
    return true;
  }

  if (value.value === "false") {
    return false;
  }

  if (value.value === "undefined") {
    return undefined;
  }

  if (value.value === "null") {
    return null;
  }

  if (!isNaN(value.value)) {
    return Number(value.value);
  }

  return value.value.replace(/^[\"\`\']/g, "").replace(/[\"\`\']$/g, "");
}

function getPropArrayValue(value) {
  const array = [];
  const arrayElements = value.elements;

  if (arrayElements.length) {
    for (const element of arrayElements) {
      array.push(TYPES[element.astType](element));
    }
  }

  return array;
}

function getPropObjectValue(value) {
  const object = {};
  const objectElements = value.elements;

  if (objectElements.length) {
    for (const element of objectElements) {
      object[element.name.value] = TYPES[element.value.astType](element.value);
    }
  }

  return object;
}

function getPropSequenceValue(value) {
  if (value.elements.length) {
    const element = value.elements[0];

    if (element) {
      return TYPES[element.astType](element);
    }
  }
}

function extractValue(attribute, extractor) {
  if (attribute) {
    // Null valued attributes imply truthiness.
    // For example: <div aria-hidden />
    if (attribute.value === null) return true;

    return extractor(attribute.value);
  }
}

function getValue(value) {
  return TYPES[value.astType](value);
}

function getPropValue(attribute) {
  return extractValue(attribute, getValue);
}

function debugObject(object) {
  for (const property in object) {
    console.log(`${property}: ${JSON.stringify(object[property])}`);
  }
}

function propHasValue(attribute) {
  const value = getPropValue(attribute);

  if (typeof value !== "boolean") {
    return !!value;
  }

  return false;
}

const TARGET = ["Box", "Flex"];

function visit(node) {
  const tag = getTag(node);

  if (TARGET.includes(tag)) {
    const asProp = getProp(node.attributes, "as")
    const asValue = getPropValue(asProp);
    const dProp = getProp(node.attributes, "d");
    const dValue = getPropValue(dProp);
    const displayProp = getProp(node.attributes, "display");
    const displayValue = getPropValue(displayProp);

    if (
      asValue === "Grid" ||
      dValue === "grid" ||
      displayValue === "grid"
    ) {
      const error = buildError(
        node.start.line,
        node.start.col,
        node.end.line,
        node.end.col,
        `Prefer Grid component instead of ${tag}`,
        "INFO",
        "BEST_PRACTICES"
      );

      const editUpdate = buildEditUpdate(
        node.tag.start.line,
        node.tag.start.col,
        node.tag.end.line,
        node.tag.end.col,
        `Grid`
      );

      const attributesEdit = [asProp, dProp, displayProp]
        .filter((prop) => !!prop)
        .map((prop) => buildEditRemove(
          prop.start.line,
          prop.start.col,
          prop.end.line,
          prop.end.col + 1,
        ));

      const fix = buildFix(
        `replace ${tag} with Grid and remove unnecessary attributes`,
        [...attributesEdit, editUpdate]
      );

      addError(error.addFix(fix));
    }
  }
}