icon-generator.js

/* ICON GENERATOR
 *
 * Para atualizar as classes dos ícones siga os seguintes passos:
 * 1: atualizar os arquivos da pasta "/src/assets/icons/" com os arquivos enviados
 *    pelo time de UX;
 * 2: rodar o comando "npm run build:icon";
 * 3: verificar se os arquivos foram atualizados:
 *   - /src/css/commons/po-icon/po-icon.css
 *   - /src/css/commons/po-icon/po-icon.html
 *   - /docs/guides/icons.md
 *
 * ATENÇÃO1: Os ícones já existentes não deverão ser alterados pelo script. Caso
 *           aconteça, valide a alteração dos hexadecimais com o time de UX.
 *
 * ATENÇÃO2: Os ícones po-icon-ok e po-icon-minus são usados pelos componentes e
 *           são referenciados pelos seus códigos hexadecimais, caso os mesmo sejam
 *           alterados devem ser atualizados também.
 *           Os mesmos são usados pelos componentes: checkbox-group, multiselect,
 *           radio-group e table.
 */

const fs = require('fs');
const parseString = require('xml2js').parseString;

const xml = fs.readFileSync(__dirname + '/src/assets/icons/PortinariIcon.svg');
const xmlCleanedUnicode = xml.toString().replace(/&#x/g, '').replace(/;/g, '');

let icons = [];

parseString(xmlCleanedUnicode, (err, result) => {
  const glyphs = result.svg.defs[0].font[0].glyph;

  icons = glyphs
    .map(glyph => ({ className: glyph['$']['glyph-name'], content: glyph['$'].unicode }))
    .filter(glyph => glyph.className && glyph.content)
    .sort((iconA, iconB) => {
      if (iconA.className > iconB.className) {
        return 1;
      }
      if (iconA.className < iconB.className) {
        return -1;
      }
      return 0;
    });
});

const classIcons = icons
  .map(icon =>
`
.po-icon.po-icon-${icon.className}:before {
  content: '\\${icon.content}';
}
`);

const sampleIcons = icons
  .map(icon => `
        <li>
          <span class="po-icon po-icon-${icon.className}"></span>
          <span>po-icon po-icon-${icon.className}</span>
        </li>
`);

const sampleIconsHtml =
`<!-- GENERATE BY ICON GENERATOR -->
<style>
  .icon-container {
    padding: 8px;
  }

  .icon-container li {
    list-style: none;
    padding: 8px;
  }

  .po-icon {
    font-size: 24px;
  }
</style>

<article>

  <section>
    <div class="icon-container">
      <ul>
        ${sampleIcons.join('')}
      </ul>
    </div>
  </section>
</article>
`;

const docIcons = icons
    .map(icon => {
        return `
  <li>
    <a>
      <span class="po-icon po-icon-${icon.className}"></span>
      <span>po-icon po-icon-${icon.className}</span>
    </a>
  </li>
`;
    })

const docIconsMD =
`[comment]: # (GENERATED BY ICON GENERATOR)
[comment]: # (@label Biblioteca de ícones)
[comment]: # (@link guides/icons)

O PO conta com uma Biblioteca de ícones disponibilizada pela equipe de UX.

### Como Usar?

\`\`\` html
<span class="po-icon po-icon-portinari"></span>
\`\`\`

<span style="font-size:50px;" class="po-icon po-icon-portinari po-icon-sample"></span>

----------------------------------------

### Ícones Disponíveis

<ul class="po-icon-list">
${docIcons.join('')}
</ul>
`;

fs.writeFileSync(__dirname + '/src/css/commons/po-icon/po-icon.css', classIcons.join(''));
fs.writeFileSync(__dirname + '/src/css/commons/po-icon/po-icon.html', sampleIconsHtml);
fs.writeFileSync(__dirname + '/docs/guides/icons.md', docIconsMD);