@vibe/icons 0.0.1

package/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+  "ignorePatterns": ["dist", ".eslintrc.json"],
+  "plugins": ["@typescript-eslint"],
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "caughtErrorsIgnorePattern": "^_"
+      }
+    ],
+    "no-empty-function": "off",
+    "@typescript-eslint/no-empty-function": ["error", { "allow": ["arrowFunctions"] }]
+  },
+  "env": {
+    "node": true
+  }
+}

package/README.md

@@ -0,0 +1,31 @@
+# @vibe/icons
+
+This package includes all of the icons of monday.com's [Vibe Design System](https://vibe.monday.com/?path=/story/media-icon--icons-list-story), available as React components and raw SVGs for flexible usage in your projects.
+
+
+## Installation
+
+To install, use the following command:
+
+```bash
+npm install @vibe/icons
+```
+
+## Usage
+
+#### Using React Components
+
+```javascript
+import { Close } from "@vibe/icons";
+```
+
+#### Using Raw SVG Files
+
+```javascript
+import { Close as CloseSvg } from "@vibe/icons/raw";
+```
+
+
+## Peer dependencies
+
+We are reliant on React and React DOM, we are using them as externals, and we don't package them to the package, so you must have them in your project

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@vibe/icons",
+  "version": "0.0.1",
+  "description": "Vibe's icon library",
+  "repository": "git+https://github.com/mondaycom/vibe.git",
+  "author": "monday.com",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "default": "./dist/react/index.js"
+    },
+    "./meta": {
+      "types": "./dist/iconsMetaData.d.ts",
+      "import": "./dist/iconsMetaData.js",
+      "default": "./dist/iconsMetaData.js"
+    },
+    "./raw": {
+      "types": "./dist/svg/index.d.ts",
+      "import": "./dist/svg/index.js",
+      "default": "./dist/svg/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "meta": [
+        "./dist/iconsMetaData.d.ts"
+      ],
+      "raw": [
+        "./dist/svg/index.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "plop": "plop",
+    "build": "yarn clean && yarn build:react-icons && yarn generate-svg-index && rollup -c",
+    "build:react-icons": "svg2react-icon --typescript --keep-colors src/svg/ src/react/ --no-sub-dir",
+    "clean": "rm -rf dist",
+    "test": "vitest",
+    "lint": "eslint . --max-warnings 0 && yarn validate-icons",
+    "lint:fix": "yarn lint -- --fix",
+    "validate-icons": "node scripts/validate-meta.js && node scripts/validate-icons-colors.js",
+    "generate-meta": "node scripts/generate-meta.js",
+    "generate-svg-index": "node scripts/generate-svg-index.js"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.57.0",
+    "plop": "4.0.1",
+    "rollup": "^2.79.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-svg": "^2.0.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "svg2react-icon": "^3.1.178",
+    "typescript": "^4.7.3",
+    "vitest": "^1.6.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0"
+  }
+}

package/plop/icon/icon-metadata.txt

@@ -0,0 +1,7 @@
+$1
+  {
+      name: "{{iconName}}",
+      file: "{{fileName}}",
+      description: "{{description}}",
+      tags: "{{tags}}"
+  },

package/plop/icon/index.js

@@ -0,0 +1,59 @@
+import { exec } from "child_process";
+export default {
+  description: "Adding a new icon",
+  prompts: [
+    {
+      type: "input",
+      name: "iconName",
+      message: "What is the name of the icon"
+    },
+    {
+      type: "input",
+      name: "fileName",
+      message: "FileName including the suffix (including '.svg') suffix",
+      validate: input => input.endsWith(".svg") || "FileName must end with .svg"
+    },
+    {
+      type: "input",
+      name: "description",
+      message: "Enter the icon description"
+    },
+    {
+      type: "input",
+      name: "tags",
+      message: "Enter tags for the icon (separate with ',')"
+    }
+  ],
+  actions: () => {
+    return [
+      {
+        type: "modify",
+        path: "src/iconsMetaData.ts",
+        templateFile: "plop/icon/icon-metadata.txt",
+        pattern: /(\/\/ plop_marker:icon_metadata)/g
+      },
+      () =>
+        new Promise((resolve, reject) => {
+          console.log("Adding icon...");
+          exec("yarn validate-icons", (lintErr, lintStdout) => {
+            if (lintErr) {
+              console.error(lintErr);
+              reject(lintErr);
+              return;
+            }
+            console.log(lintStdout);
+
+            exec("yarn build:react-icons", (buildErr, buildStdout) => {
+              if (buildErr) {
+                console.error(buildErr);
+                reject(buildErr);
+                return;
+              }
+              console.log(buildStdout);
+              resolve("Icon added and icons built successfully!");
+            });
+          });
+        })
+    ];
+  }
+};

package/plopfile.js

@@ -0,0 +1,5 @@
+import icon from "./plop/icon/index.js";
+
+export default function (plop) {
+  plop.setGenerator("Icon", icon);
+}

package/rollup.config.js

@@ -0,0 +1,19 @@
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "rollup-plugin-typescript2";
+import { terser } from "rollup-plugin-terser";
+import svg from "rollup-plugin-svg";
+
+export default {
+  input: ["src/react/index.ts", "src/svg/index.ts", "src/iconsMetaData.ts"],
+  output: {
+    dir: "dist",
+    indent: false,
+    strict: false,
+    exports: "named",
+    preserveModules: true,
+    preserveModulesRoot: "./src",
+    format: "esm"
+  },
+  external: [/node_modules/],
+  plugins: [resolve(), typescript(), terser(), svg()]
+};

package/scripts/__tests__/__snapshots__/validate-icons-colors.test.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`validate-icons-colors > validateColors > should throw an error for disallowed colors 1`] = `
+[Error: validate-icons-colors: Invalid color - fill="#123456" used in 'invalid-icon.svg'.
+      Should be one of the folowing values for outlined icons: ["currentColor","none"].
+      If color='white' and it's declared in <rect> (when using <clipPath> element), delete it and check if the icon looks fine]
+`;

package/scripts/__tests__/validate-icons-colors.test.ts

@@ -0,0 +1,129 @@
+import {
+  ALLOWED_COLORS,
+  EXCEPTIONAL_ICONS,
+  extractColorsFromSvg,
+  isEligibleForValidation,
+  validateColors
+} from "../utils";
+
+const mockRealSVGInvalid = `
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.6413 4.31058C11.6411 4.31074 11.6414 4.31043 11.6413 4.31058L10.1221 5.82974L14.5799 10.2875L16.0991 8.76837C16.0992 8.76824 16.0989 8.7685 16.0991 8.76837C16.1376 8.72937 16.1597 8.67635 16.1597 8.62149C16.1597 8.56664 16.138 8.514 16.0995 8.47501C16.0993 8.47488 16.0996 8.47514 16.0995 8.47501L11.935 4.31058C11.9349 4.31045 11.9352 4.31071 11.935 4.31058C11.896 4.27202 11.843 4.25 11.7882 4.25C11.7333 4.25 11.6803 4.27207 11.6413 4.31058ZM13.696 11.1714L9.23825 6.71362L3.31058 12.6413C3.31043 12.6414 3.31074 12.6411 3.31058 12.6413C3.27207 12.6803 3.25 12.7333 3.25 12.7882C3.25 12.843 3.27164 12.8957 3.3102 12.9346C3.31033 12.9348 3.31007 12.9345 3.3102 12.9346L6.45954 16.084H8.78344L13.696 11.1714ZM10.5512 16.084L16.9843 9.65094L16.9856 9.64962C17.2572 9.37638 17.4097 9.00676 17.4097 8.62149C17.4097 8.23622 17.2572 7.86661 16.9856 7.59337L12.8176 3.42538L12.8163 3.42407C12.543 3.15246 12.1734 3 11.7882 3C11.4029 3 11.0333 3.15246 10.76 3.42407L10.7587 3.42539L2.42539 11.7587L2.42407 11.76C2.15246 12.0333 2 12.4029 2 12.7882C2 13.1734 2.15246 13.543 2.42407 13.8163L2.42539 13.8176L5.75872 17.1509C5.87593 17.2681 6.0349 17.334 6.20066 17.334H15.3673C15.7125 17.334 15.9923 17.0542 15.9923 16.709C15.9923 16.3638 15.7125 16.084 15.3673 16.084H10.5512Z" fill="#676879"/>
+    </svg>
+  `;
+
+const mockSVGInvalid = `
+    <svg fill="currentColor" stroke="none">
+      <rect fill="currentColor" stroke="blue"/>
+      <circle fill="none" stroke="#123456"/>
+      <path fill="green" stroke="none"/>
+    </svg>
+  `;
+
+const mockSVGValid = `
+    <svg fill="none" stroke="currentColor">
+      <path stroke="none"/>
+      <rect fill="currentColor" stroke="currentColor"/>
+      <circle fill="none" stroke="currentColor"/>
+    </svg>
+  `;
+
+const mockSVGWithoutColors = `
+      <svg>
+        <path />
+        <circle />
+      </svg>
+    `;
+
+describe("validate-icons-colors", () => {
+  describe("isEligibleForValidation", () => {
+    it("should return true for a valid svg file", () => {
+      expect(isEligibleForValidation("valid-icon.svg")).toBe(true);
+    });
+
+    it("should return false for an svg file in the EXCEPTIONAL_ICONS list", () => {
+      expect(isEligibleForValidation(EXCEPTIONAL_ICONS[0])).toBe(false);
+    });
+
+    it("should return false for a non-svg file", () => {
+      expect(isEligibleForValidation("not-an-svg.png")).toBe(false);
+    });
+  });
+
+  describe("validateColors", () => {
+    const disallowedColors = ["red", "#123456", "helloworld"];
+    disallowedColors.forEach(color => {
+      it(`should throw an error for disallowed color ${disallowedColors}`, () => {
+        const colors = [
+          { attribute: "fill", color: "currentColor" },
+          { attribute: "stroke", color }
+        ];
+        const svgFileName = "valid-icon.svg";
+        expect(() => validateColors(colors, svgFileName)).toThrow();
+      });
+    });
+
+    const allowedColors = ALLOWED_COLORS;
+    allowedColors.forEach(color => {
+      it(`should not throw an error for allowed color ${color}`, () => {
+        const colors = [
+          { attribute: "fill", color },
+          { attribute: "stroke", color: "none" }
+        ];
+        const svgFileName = "valid-icon.svg";
+        expect(() => validateColors(colors, svgFileName)).not.toThrow();
+      });
+    });
+
+    it("should throw an error for disallowed colors", () => {
+      const colors = [{ attribute: "fill", color: "#123456" }];
+      const svgFileName = "invalid-icon.svg";
+      expect(() => validateColors(colors, svgFileName)).toThrowErrorMatchingSnapshot();
+    });
+  });
+
+  describe("extractColorsFromSvg", () => {
+    it("should extract colors from an invalid svg", () => {
+      const colors = extractColorsFromSvg(mockSVGInvalid);
+      const expectedColors = [
+        { attribute: "fill", color: "currentColor" },
+        { attribute: "stroke", color: "none" },
+        { attribute: "fill", color: "currentColor" },
+        { attribute: "stroke", color: "blue" },
+        { attribute: "fill", color: "none" },
+        { attribute: "stroke", color: "#123456" },
+        { attribute: "fill", color: "green" },
+        { attribute: "stroke", color: "none" }
+      ];
+      expect(colors).toEqual(expectedColors);
+    });
+
+    it("should extract colors from a valid svg", () => {
+      const colors = extractColorsFromSvg(mockSVGValid);
+      const expectedColors = [
+        { attribute: "fill", color: "none" },
+        { attribute: "stroke", color: "currentColor" },
+        { attribute: "stroke", color: "none" },
+        { attribute: "fill", color: "currentColor" },
+        { attribute: "stroke", color: "currentColor" },
+        { attribute: "fill", color: "none" },
+        { attribute: "stroke", color: "currentColor" }
+      ];
+      expect(colors).toEqual(expectedColors);
+    });
+
+    it("should extract colors from a real invalid svg", () => {
+      const colors = extractColorsFromSvg(mockRealSVGInvalid);
+      const expectedColors = [
+        { attribute: "fill", color: "none" },
+        { attribute: "fill", color: "#676879" }
+      ];
+      expect(colors).toEqual(expectedColors);
+    });
+
+    it("should handle SVG without color attributes", () => {
+      const colors = extractColorsFromSvg(mockSVGWithoutColors);
+      expect(colors).toEqual([]);
+    });
+  });
+});

package/scripts/generate-meta.js

@@ -0,0 +1,20 @@
+const nodePlop = require("node-plop");
+const { getFilesWithNoMetadata } = require("./metadata-util");
+
+const plop = nodePlop(`./plopfile.js`);
+const IconGenerator = plop.getGenerator("Icon");
+
+const { fileWithNoMeta } = getFilesWithNoMetadata();
+
+async function addFiles() {
+  if (fileWithNoMeta && fileWithNoMeta.length > 0) {
+    for (const file of fileWithNoMeta) {
+      console.log(`generating meta for file: ${file}`);
+      const iconName = file.substr(0, file.indexOf("."));
+      const answers = await IconGenerator.runPrompts([iconName, file]);
+      await IconGenerator.runActions(answers);
+    }
+  }
+}
+
+addFiles();

package/scripts/generate-svg-index.js

@@ -0,0 +1,18 @@
+import fs from "fs";
+import path from "path";
+
+const SVG_FOLDER = "./src/svg";
+const INDEX_FILE = `${SVG_FOLDER}/index.ts`;
+
+const svgFiles = fs.readdirSync(SVG_FOLDER).filter(file => file.endsWith(".svg"));
+
+const svgExports = svgFiles
+  .map(file => {
+    const fileNameWithoutExtension = path.basename(file, ".svg");
+    return `export { default as ${fileNameWithoutExtension} } from './${file}';`;
+  })
+  .join("\n");
+
+fs.writeFileSync(INDEX_FILE, svgExports);
+
+console.log(`Generated index.ts for SVG exports in ${SVG_FOLDER}`);

package/scripts/metadata-util.js

@@ -0,0 +1,28 @@
+import fs from "fs";
+import path from "path";
+const ICONS_FOLDERS = path.resolve("./src/svg/");
+const METADATA_FILENAME = "iconsMetaData.ts";
+const METADATA_FILE_PATH = path.resolve("./src") + "/" + METADATA_FILENAME;
+
+function getIconsFiles() {
+  return fs.readdirSync(ICONS_FOLDERS);
+}
+
+function getIconsMetaFiles() {
+  let file = fs.readFileSync(METADATA_FILE_PATH, { encoding: "utf-8" });
+  file.substr(file.indexOf("iconsMetaData"));
+  return [...file.matchAll(/file: "(?<name>.*?)"/g)].map(f => f.groups.name);
+}
+
+function getFilesWithNoMetadata() {
+  const actualFiles = getIconsFiles().filter(f => f.endsWith(".svg"));
+  const actualFilesSet = new Set(actualFiles);
+  const metaFiles = getIconsMetaFiles();
+  const metaFilesSet = new Set(metaFiles);
+
+  const metaBadReferences = metaFiles.filter(f => !actualFilesSet.has(f));
+  const fileWithNoMeta = actualFiles.filter(f => !metaFilesSet.has(f));
+  return { metaBadReferences, fileWithNoMeta };
+}
+
+export default getFilesWithNoMetadata;

package/scripts/utils.js

@@ -0,0 +1,35 @@
+// Files on which the rule doesn't apply
+const EXCEPTIONAL_ICONS = ["ConnectedDoc.svg"];
+const ALLOWED_COLORS = ["currentColor", "none"];
+
+function isEligibleForValidation(svgFile) {
+  return svgFile.endsWith(".svg") && !EXCEPTIONAL_ICONS.includes(svgFile);
+}
+
+function validateColors(colors, svgFileName, allowedColors = ALLOWED_COLORS) {
+  colors.forEach(({ attribute, color }) => {
+    if (!allowedColors.includes(color)) {
+      throw Error(generateErrorMessage(attribute, color, svgFileName));
+    }
+  });
+}
+
+function extractColorsFromSvg(content) {
+  const colorMatches = content.match(/(fill|stroke)=["']([\w#]+)["']/g) || [];
+  return colorMatches.map(match => {
+    const [, attribute, color] = match.match(/(fill|stroke)=["']([\w#]+)["']/) || [];
+    return { attribute, color };
+  });
+}
+
+function colorErrorMessage(message) {
+  return `\x1b[31m${message}\x1b[0m`;
+}
+
+function generateErrorMessage(attribute, color, svgFileName) {
+  return colorErrorMessage(`validate-icons-colors: Invalid color - ${attribute}="${color}" used in '${svgFileName}'.
+      Should be one of the folowing values for outlined icons: ${JSON.stringify(ALLOWED_COLORS)}.
+      If color='white' and it's declared in <rect> (when using <clipPath> element), delete it and check if the icon looks fine`);
+}
+
+export { EXCEPTIONAL_ICONS, ALLOWED_COLORS, isEligibleForValidation, validateColors, extractColorsFromSvg };

package/scripts/validate-icons-colors.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+
+// Validation rule for icons svg files, to make sure they use only allowed fill/stroke colors
+// Usage: node scripts/validate-icons-colors.js
+
+import { extractColorsFromSvg, isEligibleForValidation, validateColors } from "./utils.js";
+import fs from "fs";
+
+const SVGS_PATH = "src/svg";
+
+function validateSvgFile(name, content) {
+  const colors = extractColorsFromSvg(content);
+  validateColors(colors, name);
+}
+
+function readSvgFileContent(svgFilePath) {
+  return fs.readFileSync(svgFilePath, "utf8").toString();
+}
+
+function validateAllSvgsInPath(path) {
+  const svgFiles = fs.readdirSync(path).filter(isEligibleForValidation);
+  svgFiles.forEach(svgFileName => validateSvgFile(svgFileName, readSvgFileContent(`${path}/${svgFileName}`)));
+}
+
+validateAllSvgsInPath(SVGS_PATH);

package/scripts/validate-meta.js

@@ -0,0 +1,10 @@
+import getFilesWithNoMetadata from "./metadata-util.js";
+
+const { metaBadReferences, fileWithNoMeta } = getFilesWithNoMetadata();
+
+if (metaBadReferences && metaBadReferences.length > 0) {
+  throw new Error("No matching file for metas: " + metaBadReferences.join(", "));
+}
+if (fileWithNoMeta && fileWithNoMeta.length > 0) {
+  throw new Error("No matching meta for files: " + fileWithNoMeta.join(", "));
+}