ui.html

<!-- Figma needs all code in a single file and does not support CSS imports etc.
  For now it's ok to keep all in a file but we might need to add
  a build step later -->
<style>
  body {
    background-color: var(--figma-color-bg);
    color: var(--figma-color-text);
    font-family: Inter, sans-serif;
    font-size: 11px;
    line-height: 16px;
    letter-spacing: calc(0.005px + var(--text-tracking-pos, 0) * 11px);
  }

  button {
    text-align: center;
    flex-shrink: 0;
    height: 32px;
    line-height: 30px;
    padding: 0 11px;
    background-color: transparent;
    box-sizing: border-box;
    color: var(--figma-color-text);
    border: 1px solid var(--figma-color-border);
    box-sizing: border-box;
    border-radius: 6px;
  }

  button svg path {
    fill: var(--figma-color-text);
  }

  button:hover {
    color: var(--figma-color-text-hover);
    background-color: var(--figma-color-bg-hover);
  }

  button:hover svg path {
    fill: var(--figma-color-text-hover);
  }

  button:disabled,
  button:disabled:hover {
    color: var(--figma-color-text-disabled);
    border: 1px solid var(--figma-color-border-disabled);
    background-color: transparent;
  }

  button + button {
    margin-left: 15px;
  }

  textarea {
    font-family: sans-serif;
    width: 100%;
    padding: 0.5em;
    margin: 0 0 0.5em;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  form {
    margin: 0;
  }

  .button-holder {
    padding: 1em 0;
    text-align: right;
  }

  .focus-instance-button {
    font-size: 1.5em;
    line-height: 0.5em;
  }

  .result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 1em;
    gap: 1em;
  }

  .result.detached {
    color: var(--figma-color-text-disabled);
  }
  .result.detached button:disabled {
    background-color: var(--figma-color-bg-success);
  }

  .actions {
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    gap: 0.5em;
  }

  .actions button + button {
    margin: 0;
  }

  .global-operations {
    display: flex;
    justify-content: flex-end;
    padding: 0.5em 1em;
    gap: 1em;
  }
  .global-operations button {
    /* font-size: 14px; */
    line-height: 1em;
  }
  .global-operations button svg {
    vertical-align: bottom;
    margin-right: 0.5em;
  }

  #search {
    padding: 0 2em;
  }

  #results {
    margin-top: 1em;
  }

  #loading {
    display: none;
    text-align: center;
    margin-top: 20vh;
  }
</style>
<p>
  Search for components or styles by name, e.g. those used by missing libraries.
</p>
<form>
  <label
    >Add new-line separated component or style name:
    <br />
    <textarea id="components-or-styles" rows="5" required></textarea>
  </label>
  <div class="button-holder">
    <button id="search" type="submit">Search</button>
  </div>
</form>
<div id="loading"><i>searching&hellip;</i></div>
<div id="results"></div>
<script>
  const detachIcon = `<svg class="svg" width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="M4 0v3h1V0H4zm9.103.896c-1.162-1.161-3.045-1.161-4.207 0l-2.75 2.75.707.708 2.75-2.75c.771-.772 2.022-.772 2.793 0 .771.77.771 2.021 0 2.792l-2.75 2.75.707.708 2.75-2.75c1.162-1.162 1.162-3.046 0-4.208zM.896 13.103c-1.162-1.161-1.162-3.045 0-4.207l2.75-2.75.707.708-2.75 2.75c-.771.77-.771 2.021 0 2.792.771.772 2.022.772 2.793 0l2.75-2.75.707.707-2.75 2.75c-1.162 1.162-3.045 1.162-4.207 0zM14 10h-3V9h3v1zM10 11v3H9v-3h1zM3 4H0v1h3V4z" fill-rule="nonzero" fill-opacity=".9" fill="#000" stroke="none"></path></svg>`;
  document.getElementById("search").onclick = () => {
    const search = document
      .getElementById("components-or-styles")
      .value.split("\n")
      .map((v) => v.trim())
      .filter((v) => v.length > 0);
    if (search.length === 0) {
      document.getElementsByTagName("form").checkValidity();
      return;
    }
    document.getElementById("loading").style.display = "block";
    document.getElementById("search").setAttribute("disabled", "true");
    document.getElementById("results").innerHTML = "";
    parent.postMessage(
      {
        pluginMessage: {
          type: "find-missing-library-usage",
          search,
        },
      },
      "*"
    );
  };

  let wrapper = undefined;

  const renderResults = (nodes) => {
    if (wrapper) {
      wrapper.remove();
    }
    const outlet = document.getElementById("results");
    wrapper = document.createElement("div");
    outlet.innerHTML = "";

    nodes.forEach(([page, instances]) => {
      const Inner = document.createElement("div");
      Inner.innerHTML = `
        <strong>Page: ${page.pageName}</strong>
        <ul>
        ${instances
          .map(
            (i) =>
              `<li class="result" data-page-id="${
                page.pageId
              }" data-instance-id="${i.id}" ${
                i.styleId
                  ? `data-style-id="${i.styleId}" data-style-prop="${i.styleProp}" `
                  : ""
              }>
              <span>${
                i.styleName
                  ? `<i>${i.styleName}</i> - ${i.name} (${i.styleProp.replace(
                      "StyleId",
                      ""
                    )})`
                  : i.name
              }</span>
              <span class="actions">
              <button class="focus-instance-button" title="Focus Instance">⌖</button>
              ${
                i.styleName
                  ? `<button class="detach-style-button" title="Detach Style">${detachIcon}</button>`
                  : `<button class="detach-instance-button" title="Detach Instance">${detachIcon}</button>`
              }</span>
            </li>`
          )
          .join("\n")}
        </ul>`;
      wrapper.appendChild(Inner);
    });
    // handle bubbled up event, so we don't need to deal with re-attaching/removing event listeners
    wrapper.addEventListener("click", (evt) => {
      const target = evt.target;
      if (!target.closest("button") || target.hasAttribute("disabled")) {
        // don't react to non-button or disabled button clicks
        return;
      }

      const isFocus = target.classList.contains("focus-instance-button");
      const result = target.closest(".result");
      const pageId = result.getAttribute("data-page-id");
      const instanceId = result.getAttribute("data-instance-id");
      const styleId = result.getAttribute("data-style-id");
      const styleProp = result.getAttribute("data-style-prop");
      if (!isFocus) {
        // fix double firing
        target.setAttribute("disabled", true);
      }
      if (pageId && instanceId) {
        parent.postMessage(
          {
            pluginMessage: {
              type: isFocus ? "focus-instance" : "detach-instance",
              pageId,
              instanceId,
              styleProp,
              styleId,
            },
          },
          "*"
        );
      }
    });

    if (nodes.length === 0) {
      const noResults = document.createElement("i");
      noResults.innerText =
        "No results found!\n\nPlease check the spelling or if there are pre-fixes hidden from the Figma UI";
      wrapper.appendChild(noResults);
      outlet.appendChild(wrapper);
      // stop if there are no results
      return;
    }

    outlet.appendChild(wrapper);

    // add global operations
    const globalOperationsWrapper = document.createElement("div");
    globalOperationsWrapper.className = "global-operations";

    const detachAll = document.createElement("button");
    detachAll.innerHTML = `${detachIcon}Detach All`;
    detachAll.addEventListener("click", () => {
      parent.postMessage(
        {
          pluginMessage: {
            type: "detach-all",
            nodes,
          },
        },
        "*"
      );
    });
    globalOperationsWrapper.appendChild(detachAll);
    outlet.appendChild(globalOperationsWrapper);
  };

  onmessage = ({ data: { pluginMessage } }) => {
    if (pluginMessage.type === "result") {
      document.getElementById("loading").style.display = "none";
      document.getElementById("search").removeAttribute("disabled");
      renderResults(pluginMessage.nodes);
    }
    if (pluginMessage.type === "error") {
      alert(pluginMessage.error);
    }
    if (pluginMessage.type === "confirm-detach") {
      const { instanceId, styleProp } = pluginMessage;
      const resultSelector = `[data-instance-id="${instanceId}"]${
        styleProp ? `[data-style-prop="${styleProp}"]` : ""
      }`;
      const result = document.querySelector(resultSelector);
      result.classList.add("detached");
      result.querySelector(".focus-instance-button").remove();
      const detachButton = result.querySelector(
        ".detach-style-button, .detach-instance-button"
      );
      detachButton.setAttribute("disabled", "true");
    }
  };
</script>