code.ts

// #################################################################################################
// #  HEADERS
// #################################################################################################

function getHeader(content, id = "") {
  if (id) {
    return `<p class="header body3" id="${id}">${content}</p>`
  } else {
    return `<p class="header body3">${content}</p>`
  }
}

// #################################################################################################
// #  GET TYPE
// #################################################################################################

function getType(node) {
  return `${getHeader("Type")}<p>${node.type}</p>`
}

// #################################################################################################
// #  GET LAYERS
// #################################################################################################

function getLayers(node, indent: number = 0) {
  let layers = ""

  if (indent == 0) {
    layers += getHeader("Layers", "header-layers");
  }

  layers += getLayer(node, indent);

  if ("children" in node) {
    if (node.type !== "INSTANCE") {
      for (const child of node.children) {
        layers += getLayers(child, indent + 1);
      }
    }
  }

  return layers
}

function getLayer(node, indent) {
  var layer = '<p class="layer legal1">'

  layer += getLayerIndent(indent, true)
  layer += getLayerIcon(node)
  layer += node.name + "</p>"
  layer += getInspection(node, indent)

  return layer
}

function getLayerIndent(indent, extraSpace: boolean = false) {
  var indents = ""

  for (var i = indent; i >= 1; i--) {
    if (extraSpace) {
      indents += "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
    } else {
      indents += "&nbsp;"
    }
  }

  return indents
}

function getLayerIcon(node) {
  var type = ""
  var icon = ""

  switch (node.type) {
    case 'COMPONENT':
      icon = "https://i.imgur.com/mMomyWA.png"
      break

    case 'COMPONENT_SET':
      icon = "https://i.imgur.com/mMomyWA.png"
      break

    case 'FRAME':
      if (node.layoutMode == "HORIZONTAL") {
        icon = "https://i.imgur.com/agzGebN.png"
      } else if (node.layoutMode == "VERTICAL") {
        icon = "https://i.imgur.com/nIXSMck.png"
      } else {
        icon = "https://i.imgur.com/xd32fdS.png"
      }
      break

    case 'GROUP':
      icon = "https://i.imgur.com/xd32fdS.png"
      break

    case 'BOOLEAN_OPERATION':
      icon = "https://i.imgur.com/xd32fdS.png"
      break

    case 'INSTANCE':
      icon = "https://i.imgur.com/axmNW7f.png"
      break

    case 'TEXT':
      icon = "https://i.imgur.com/xjaHdfH.png"
      break

    default:
      icon = ""
      break
  }

  return `<img src="${icon}" height="12px" width="12px" />${getLayerIndent(4)}`;
}

// #################################################################################################
// #  GET INSPECTION
// #################################################################################################

function getInspection(node, indent) {
  var inspection = ""

  inspection += checkAutolayout(node, indent)
  inspection += checkColorStyle(node, indent)
  inspection += checkDefaultName(node, indent)
  inspection += checkFillContainer(node, indent)
  inspection += checkMainComponent(node, indent)
  inspection += checkTextStyle(node, indent)

  return inspection
}

function getReport(content, indent) {
  return `<div class="layer report legal1">${getLayerIndent(indent+1, true)}&nbsp;${content}</div>`
}

function checkAutolayout(node, indent) {
  var report = ""

  if (node.type == "FRAME" || node.type == "GROUP" || node.type == "COMPONENT" || node.type == "COMPONENT_SET") {
    if (node.layoutMode == "NONE" || node.type == "GROUP") {
      report += getReport("Verify if this layer should have auto layout enabled", indent)
    }
  }

  return report
}

function checkColorStyle(node, indent) {
  var report = ""

  if (node.type != "Document" && node.type != "Page" && node.type != "Slice" && (node.fills || node.strokes)) {
    if (!node.fillStyleId && node.fills[0]) {
      report += getReport("Layer is missing a fill color style", indent)
    }

    if (!node.strokeStyleId && node.strokes[0]) {
      report += getReport("Layer is missing a stroke color style", indent)
    }
  }

  return report
}

function checkDefaultName(node, indent) {
  var report = ""

  const defaultNames = RegExp(
    /^(Union|Substract|Intersect|Exclude|(Page|Frame|Group|Slice|Rectangle|Line|Ellipse|Polygon|Star|Vector|Text|Component|Property)(\sCopy)?(\s\d+)?)(=.*)?$/
  )

  if (defaultNames.test(node.name)) {
    report += getReport("Layer name cannot be a default value. Please choose a unique name", indent)
  }

  return report
}

function checkFillContainer(node, indent) {
  var report = ""
  const exceptionNames = RegExp(
    /(((.*) Badge)|((.*) Button)|Checkbox|Flag|Glyph|Icon|((.*) Link)|Tag)/
  )

  if (node.type == "INSTANCE" && (node.layoutAlign == "INHERIT" && node.layoutGrow == 0) && (!exceptionNames.test(node.children[0].name))) {
    if (!exceptionNames.test(node.mainComponent.parent.name)) {
      report += getReport("Verify if this layer should fill container. ", indent)
    }
  } else if ((node.type == "TEXT" || node.type == "FRAME " || node.type == "GROUP") && (node.layoutAlign == "INHERIT" && node.layoutGrow == 0)) {
    report += getReport("Verify if this layer should fill container.", indent)
  }

  return report
}

function checkMainComponent(node, indent) {
  var report = ""

  if (node.type == "INSTANCE" && node.mainComponent.parent == null) {
    report += getReport("Verify if the main component for this instance still exists", indent)
  }

  return report
}

function checkTextStyle(node, indent) {
  var report = ""

  if (node.type == "TEXT") {
    if (node.autoRename == true) {
      report += getReport("Layer is set to autorename. Make sure you specify a name.", indent)
    }

    if (!node.textStyleId) {
      report += getReport("Layer is missing a text style", indent)
    }
  }

  return report
}

// #################################################################################################
// #  MAIN APP
// #################################################################################################

function App() {
  const selection = figma.currentPage.selection[0]
  var message = ""

  if (selection) {
    message += getType(selection)
    message += getLayers(selection)
  } else {
    message += `<p class="body3">You must select an element first.</p>`
  }

  return message
}

// #################################################################################################
// #  FIGMA UI
// #################################################################################################

figma.showUI(__html__, {
  width: 600,
  height: 1000
})

figma.ui.postMessage(App())

figma.ui.onmessage = (message) => {
  if (message.rescan) {
    figma.ui.postMessage(App())
  }
}