@saibbooks/icones 1.0.0

package/README.md

@@ -0,0 +1,120 @@
+# @saibbooks/icones
+
+Biblioteca npm de ícones da Saib: **componentes React** (MUI `SvgIcon`) e **arquivos SVG** para uso em qualquer projeto.
+
+## Instalação
+
+```bash
+npm install @saibbooks/icones
+# ou link local durante desenvolvimento:
+npm install file:../Saib-Icons
+```
+
+**Peer dependencies:** `react`, `@mui/material` (apenas para os componentes React).
+
+---
+
+## Uso — componentes React
+
+```tsx
+import { BooksCreatorIcon, OlapAnalyticsIcon, OlapDashboardIcon } from '@saibbooks/icones';
+
+<BooksCreatorIcon sx={{ fontSize: 24, color: 'primary.main' }} />
+<OlapAnalyticsIcon fontSize="small" />
+```
+
+---
+
+## Uso — arquivos SVG
+
+### Import direto (Vite / Webpack 5+)
+
+```tsx
+import booksCreatorSvg from '@saibbooks/icones/svg/books-creator.svg';
+
+<img src={booksCreatorSvg} alt="" width={24} height={24} />
+```
+
+### Subpaths disponíveis
+
+| Slug | Import SVG | Componente React |
+|------|------------|------------------|
+| `books-creator` | `@saibbooks/icones/svg/books-creator.svg` | `BooksCreatorIcon` |
+| `olap-analytics` | `@saibbooks/icones/svg/olap-analytics.svg` | `OlapAnalyticsIcon` |
+| `olap-dashboard` | `@saibbooks/icones/svg/olap-dashboard.svg` | `OlapDashboardIcon` |
+
+### Manifest (metadados)
+
+```js
+import { iconManifest, getSvgPackagePath, iconSlugs } from '@saibbooks/icones';
+
+console.log(iconSlugs);
+// ['books-creator', 'olap-analytics', 'olap-dashboard']
+
+console.log(getSvgPackagePath('books-creator'));
+// '@saibbooks/icones/svg/books-creator.svg'
+```
+
+Ou JSON puro:
+
+```js
+import manifest from '@saibbooks/icones/manifest.json' with { type: 'json' };
+```
+
+---
+
+## Adicionar novos ícones
+
+1. Coloque o `.svg` em `src/icons/svg/nome-do-icone.svg` (kebab-case).
+2. Rode:
+
+```bash
+npm run generate
+```
+
+3. Isso regenera:
+   - `src/icons/generated/NomeDoIconeIcon.js`
+   - `src/icons/index.js`
+   - `src/icons/svg-manifest.json`
+
+4. Adicione o subpath em `package.json` → `exports` (campo `./svg/nome-do-icone.svg`).
+
+5. Publique nova versão npm.
+
+---
+
+## Estrutura
+
+```
+src/
+  createIcon.js           # createSaibIcon, createSaibIconFromMarkup
+  index.js                # entrada principal
+  icons/
+    svg/                  # SVGs fonte (publicados no npm)
+    generated/            # componentes React (gerados)
+    svg-manifest.json     # metadados
+    svg-exports.js        # helpers de importação
+    index.js              # barrel (gerado)
+scripts/
+  generate-icons.mjs
+```
+
+---
+
+## Publicar no npm
+
+```bash
+npm run validate
+npm login
+npm publish --access public
+```
+
+Para registry privado, configure `.npmrc` da sua organização.
+
+---
+
+## Webpack / bundlers
+
+Se o projeto não transpilar `node_modules`, inclua `@saibbooks/icones` nas regras do Babel (mesmo tratamento de `@mui`).
+
+Para SVG como URL, configure o loader de assets (file-loader / asset modules).

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@saibbooks/icones",
+  "version": "1.0.0",
+  "description": "Biblioteca de ícones Saib — componentes React (MUI) e arquivos SVG",
+  "keywords": [
+    "icons",
+    "svg",
+    "react",
+    "mui",
+    "saib"
+  ],
+  "license": "MIT",
+  "author": "Leonardo Junior",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./icons": "./src/icons/index.js",
+    "./manifest": "./src/icons/svg-manifest.json",
+    "./manifest.json": "./src/icons/svg-manifest.json",
+    "./svg-exports": "./src/icons/svg-exports.js",
+    "./svg/books-creator.svg": "./src/icons/svg/books-creator.svg",
+    "./svg/olap-analytics.svg": "./src/icons/svg/olap-analytics.svg",
+    "./svg/olap-dashboard.svg": "./src/icons/svg/olap-dashboard.svg",
+    "./svg/*": "./src/icons/svg/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "scripts",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.svg"
+  ],
+  "peerDependencies": {
+    "@mui/material": ">=5.0.0",
+    "react": ">=17.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@mui/material": {
+      "optional": false
+    },
+    "react": {
+      "optional": false
+    }
+  },
+  "scripts": {
+    "generate": "node scripts/generate-icons.mjs",
+    "prepare": "node scripts/generate-icons.mjs",
+    "prepack": "node scripts/generate-icons.mjs",
+    "lint": "node --check src/index.js && node --check src/createIcon.js && node --check src/icons/svg-exports.js",
+    "validate": "npm run generate && npm run lint"
+  }
+}

package/scripts/generate-icons.mjs

@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+/**
+ * Lê src/icons/svg/*.svg e gera:
+ * - src/icons/generated/*Icon.js (componentes React)
+ * - src/icons/svg-manifest.json
+ * - src/icons/index.js (barrel)
+ */
+import { readFileSync, writeFileSync, readdirSync, mkdirSync } from 'node:fs';
+import { dirname, join, basename } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const root = join(__dirname, '..');
+const svgDir = join(root, 'src', 'icons', 'svg');
+const generatedDir = join(root, 'src', 'icons', 'generated');
+const manifestPath = join(root, 'src', 'icons', 'svg-manifest.json');
+const indexPath = join(root, 'src', 'icons', 'index.js');
+
+mkdirSync(generatedDir, { recursive: true });
+
+function kebabToExportName(kebab) {
+  const base = kebab
+    .replace(/\.svg$/i, '')
+    .split('-')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+  return base.endsWith('Icon') ? base : `${base}Icon`;
+}
+
+function extractSvgParts(svgText) {
+  const viewBoxMatch = svgText.match(/viewBox=["']([^"']+)["']/i);
+  const viewBox = viewBoxMatch ? viewBoxMatch[1] : '0 0 24 24';
+  const inner = svgText
+    .replace(/<\?xml[^>]*>/gi, '')
+    .replace(/<!DOCTYPE[^>]*>/gi, '')
+    .replace(/<svg[^>]*>/i, '')
+    .replace(/<\/svg>\s*$/i, '')
+    .trim()
+    .replace(/fill="#000000"/gi, 'fill="currentColor"')
+    .replace(/fill="#000"/gi, 'fill="currentColor"')
+    .replace(/fill="black"/gi, 'fill="currentColor"');
+  return { viewBox, inner };
+}
+
+function escapeTemplate(str) {
+  return str.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+}
+
+const svgFiles = readdirSync(svgDir).filter((f) => f.endsWith('.svg')).sort();
+const manifest = {};
+const indexLines = ['// Gerado por scripts/generate-icons.mjs — não editar manualmente', ''];
+
+for (const file of svgFiles) {
+  const slug = file.replace(/\.svg$/i, '');
+  const exportName = kebabToExportName(slug);
+  const svgPath = join(svgDir, file);
+  const svgText = readFileSync(svgPath, 'utf8');
+  const { viewBox, inner } = extractSvgParts(svgText);
+
+  const outFile = join(generatedDir, `${exportName}.js`);
+  const js = `// Gerado por scripts/generate-icons.mjs — não editar manualmente
+import { createSaibIconFromMarkup } from '../../createIcon.js';
+
+export const ${exportName} = createSaibIconFromMarkup(
+  '${exportName}',
+  '${viewBox}',
+  \`${escapeTemplate(inner)}\`
+);
+`;
+  writeFileSync(outFile, js, 'utf8');
+
+  manifest[slug] = {
+    exportName,
+    file: `./svg/${file}`,
+    packageExport: `@saibbooks/icones/svg/${file}`,
+    viewBox,
+  };
+
+  indexLines.push(`export { ${exportName} } from './generated/${exportName}.js';`);
+}
+
+indexLines.push('');
+writeFileSync(indexPath, indexLines.join('\n'), 'utf8');
+writeFileSync(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`, 'utf8');
+
+const pkgPath = join(root, 'package.json');
+const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'));
+const svgExports = Object.fromEntries(
+  svgFiles.map((file) => [`./svg/${file}`, `./src/icons/svg/${file}`])
+);
+pkg.exports = {
+  '.': './src/index.js',
+  './icons': './src/icons/index.js',
+  './manifest': './src/icons/svg-manifest.json',
+  './manifest.json': './src/icons/svg-manifest.json',
+  './svg-exports': './src/icons/svg-exports.js',
+  ...svgExports,
+  './svg/*': './src/icons/svg/*',
+  './package.json': './package.json',
+};
+writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`, 'utf8');
+
+console.log(`[saib-icons] ${svgFiles.length} ícone(s) gerado(s).`);

package/src/createIcon.js

@@ -0,0 +1,31 @@
+import SvgIcon from '@mui/material/SvgIcon';
+import { createElement } from 'react';
+
+/**
+ * Ícone MUI com viewBox 24×24 (ícones desenhados nessa grade).
+ */
+export function createSaibIcon(displayName, children) {
+  function Icon(props) {
+    return createElement(SvgIcon, { viewBox: '0 0 24 24', ...props }, children);
+  }
+  Icon.displayName = displayName;
+  return Icon;
+}
+
+/**
+ * Ícone MUI a partir de markup SVG interno (ex.: export Inkscape/Figma com viewBox 1024).
+ * @param {string} displayName
+ * @param {string} viewBox
+ * @param {string} innerMarkup — conteúdo interno (ex.: `<g transform=...>...</g>`)
+ */
+export function createSaibIconFromMarkup(displayName, viewBox, innerMarkup) {
+  function Icon(props) {
+    return createElement(
+      SvgIcon,
+      { viewBox, ...props },
+      createElement('g', { dangerouslySetInnerHTML: { __html: innerMarkup.trim() } })
+    );
+  }
+  Icon.displayName = displayName;
+  return Icon;
+}

package/src/icons/generated/BooksCreatorIcon.js

@@ -0,0 +1,85 @@
+// Gerado por scripts/generate-icons.mjs — não editar manualmente
+import { createSaibIconFromMarkup } from '../../createIcon.js';
+
+export const BooksCreatorIcon = createSaibIconFromMarkup(
+  'BooksCreatorIcon',
+  '0 0 1024.000000 1024.000000',
+  `<g transform="translate(0.000000,1024.000000) scale(0.100000,-0.100000)"
+fill="currentColor" stroke="none">
+<path d="M1385 8519 c-192 -32 -370 -167 -455 -344 -75 -157 -70 67 -70 -2869
+0 -2236 2 -2645 14 -2709 48 -248 220 -437 476 -524 53 -17 173 -18 3240 -21
+1752 -1 3195 0 3207 3 12 3 29 12 37 21 14 14 16 288 16 2849 l0 2835 -23 15
+c-21 13 -331 15 -2853 13 l-2829 -3 -3 -58 c-2 -35 2 -64 9 -73 10 -12 405
+-14 2785 -14 l2774 0 -2 -2717 -3 -2718 -3090 -3 c-2078 -2 -3113 1 -3160 8
+-101 15 -222 76 -294 150 -101 102 -155 232 -154 370 2 227 141 414 370 496
+39 14 97 19 313 23 l264 6 18 45 c16 42 17 208 17 2617 l1 2572 -26 20 c-26
+20 -38 21 -278 20 -138 -1 -273 -5 -301 -10z"/>
+<path d="M2695 7110 c-13 -25 -15 -146 -15 -965 0 -1016 -1 -995 53 -995 12 0
+535 -1 1162 -1 l1139 -1 18 22 c17 21 18 74 18 974 0 845 -2 954 -16 974 l-15
+22 -1164 0 -1164 0 -16 -30z m2263 -967 l2 -883 -1085 0 -1085 0 0 878 c0 483
+3 882 7 885 3 4 491 6 1082 5 l1076 -3 3 -882z"/>
+<path d="M4540 6682 c-48 -24 -74 -73 -73 -136 l1 -51 -149 -165 -149 -164
+-48 -1 c-26 0 -58 -4 -72 -8 -21 -6 -46 6 -150 75 -123 82 -125 84 -132 128
+-11 64 -61 110 -121 110 -85 0 -154 -75 -142 -154 l6 -40 -148 -148 c-145
+-145 -148 -148 -191 -148 -86 0 -142 -48 -150 -129 -3 -36 1 -53 20 -81 84
+-125 257 -59 246 94 -2 35 5 44 147 187 142 142 152 150 182 144 17 -3 49 1
+70 8 l39 13 125 -82 c120 -80 124 -84 131 -126 16 -93 121 -146 196 -99 50 32
+74 77 69 133 -4 46 -3 48 72 131 240 265 221 247 263 247 119 0 182 103 128
+209 -20 40 -69 71 -112 71 -12 0 -39 -8 -58 -18z"/>
+<path d="M2976 5524 c-21 -20 -20 -68 1 -85 13 -12 165 -14 898 -14 861 0 883
+0 904 19 29 26 24 66 -9 83 -20 10 -217 13 -902 13 -784 0 -878 -2 -892 -16z"/>
+<path d="M5406 7124 c-14 -14 -16 -115 -16 -967 0 -524 3 -962 6 -974 4 -13
+19 -26 38 -33 37 -12 2084 -9 2104 4 10 6 18 90 10 98 -2 2 -464 5 -1028 8
+l-1025 5 -3 860 c-1 473 0 870 3 882 l5 23 1023 2 1022 3 3 53 3 52 -1065 0
+c-954 0 -1066 -2 -1080 -16z"/>
+<path d="M7137 6753 c-4 -3 -7 -300 -7 -659 0 -636 1 -654 19 -664 25 -13 201
+-13 235 0 l26 10 0 660 0 660 -133 0 c-74 0 -137 -3 -140 -7z"/>
+<path d="M6200 5970 c0 -513 1 -530 19 -540 11 -5 65 -10 121 -10 56 0 110 5
+121 10 18 10 19 27 19 540 l0 530 -140 0 -140 0 0 -530z"/>
+<path d="M6681 6257 c-13 -17 -21 -810 -8 -824 14 -13 232 -16 256 -3 21 11
+21 13 19 423 l-3 412 -126 3 c-98 2 -129 0 -138 -11z"/>
+<path d="M5815 6060 l-80 -5 -3 -305 c-2 -278 -1 -306 15 -317 21 -16 216 -18
+244 -3 18 10 19 24 19 320 0 285 -1 309 -17 314 -20 5 -57 4 -178 -4z"/>
+<path d="M7106 4870 c-116 -11 -133 -16 -151 -43 -8 -12 -26 -89 -40 -171 -14
+-82 -30 -156 -35 -166 -5 -10 -49 -31 -102 -49 -51 -18 -121 -48 -156 -67 -35
+-19 -69 -31 -75 -27 -7 4 -70 49 -142 100 -142 102 -169 111 -221 71 -180
+-137 -424 -402 -424 -460 0 -27 11 -45 112 -187 l90 -125 -32 -71 c-17 -38
+-46 -105 -63 -149 -20 -51 -38 -81 -52 -87 -11 -4 -81 -18 -155 -29 -172 -27
+-197 -35 -214 -69 -46 -88 -46 -588 0 -658 17 -27 50 -36 234 -63 80 -12 148
+-25 151 -28 4 -4 14 -32 24 -62 10 -30 28 -79 41 -107 l23 -53 85 0 c47 0 87
+4 90 8 3 5 -6 32 -19 61 -27 57 -78 206 -89 257 -12 55 -31 63 -212 90 -93 14
+-173 30 -179 35 -15 14 -13 375 2 390 6 6 82 22 168 34 86 13 167 31 180 39
+17 11 31 40 50 103 14 49 56 149 92 225 47 99 64 143 60 160 -4 14 -48 82 -98
+152 -71 100 -89 132 -83 147 19 39 255 269 278 269 7 0 41 -22 77 -48 159
+-120 192 -142 215 -142 13 0 82 28 152 63 71 35 168 74 216 87 48 13 97 30
+107 39 21 17 37 80 59 234 8 48 19 95 26 105 11 15 34 17 199 17 173 0 188 -1
+201 -19 8 -11 14 -29 14 -40 0 -36 21 -97 31 -91 5 4 9 74 9 159 0 151 0 154
+-22 160 -41 11 -331 15 -422 6z"/>
+<path d="M2705 4845 l-25 -24 0 -991 c0 -998 1 -1020 34 -1042 6 -4 530 -8
+1164 -8 1139 0 1152 0 1172 20 20 20 20 33 20 1025 0 992 0 1005 -20 1025 -20
+20 -33 20 -1170 20 l-1151 0 -24 -25z m2243 -93 c10 -7 12 -200 10 -933 l-3
+-924 -1080 0 -1080 0 -3 924 c-2 733 0 926 10 933 17 10 2129 10 2146 0z"/>
+<path d="M3675 4335 c-28 -7 -81 -25 -119 -39 -99 -37 -256 -134 -256 -157 0
+-11 126 -149 148 -162 8 -6 27 0 50 16 68 44 126 71 217 97 l90 26 3 117 3
+117 -43 -1 c-24 0 -66 -6 -93 -14z"/>
+<path d="M3944 4337 c-2 -7 -3 -60 -2 -117 l3 -105 68 -17 c74 -20 182 -66
+226 -97 16 -12 37 -21 47 -21 21 0 164 137 164 157 0 16 -109 92 -187 132
+-123 61 -306 100 -319 68z"/>
+<path d="M3149 3979 c-82 -121 -144 -294 -151 -419 l-3 -55 111 -3 c109 -3
+112 -2 118 20 3 13 6 33 6 45 0 12 11 57 25 100 21 66 46 112 110 199 7 10
+-10 34 -70 94 -44 44 -85 80 -92 80 -7 0 -31 -27 -54 -61z"/>
+<path d="M4464 3968 c-41 -39 -74 -79 -74 -89 0 -10 18 -47 40 -82 48 -76 78
+-158 88 -236 l7 -56 115 0 115 0 -2 66 c-2 70 -39 201 -80 284 -34 68 -105
+173 -121 180 -8 3 -45 -25 -88 -67z"/>
+<path d="M4165 3779 c-22 -12 -101 -56 -175 -99 -74 -42 -150 -82 -168 -89
+-42 -18 -89 -72 -97 -114 -9 -47 11 -115 44 -148 74 -73 218 -34 252 69 6 20
+55 114 107 210 59 108 91 177 86 182 -6 6 -25 2 -49 -11z m-260 -281 c26 -12
+41 -47 32 -72 -10 -25 -54 -48 -77 -41 -11 4 -28 18 -37 31 -24 38 -2 76 54
+93 1 1 14 -4 28 -11z"/>
+<path d="M7210 3903 c-136 -14 -306 -75 -417 -151 -180 -122 -322 -332 -371
+-546 -25 -112 -22 -310 7 -416 32 -117 79 -215 144 -302 93 -125 79 -119 262
+-116 l157 3 -75 47 c-315 200 -421 593 -249 923 54 103 183 229 289 284 154
+78 327 101 499 66 41 -9 79 -13 84 -10 6 3 10 46 10 95 0 102 9 94 -124 115
+-87 14 -138 16 -216 8z"/>
+</g>`
+);