@xplortech/apollo-icons 0.2.2 → 0.3.0

package/index.js

@@ -1,13 +1,34 @@
-const data = require('./build/data.json')
-const objectAssign = require('object-assign')
+const data = require('./build/data.json');
+const objectAssign = require('object-assign');
+const nameAliases = require('./build/name-aliases.json');
 
-const DEFAULT_HEIGHT = 16
+const DEFAULT_HEIGHT = 16;
+
+// Track which apollo names have already warned (warn once per name)
+const warnedNames = new Set();
+
+/**
+ * Log a deprecation warning for apollo name usage (once per name)
+ * @param {string} apolloName - The deprecated apollo name that was used
+ * @param {string} nucleoName - The nucleo name that should be used instead
+ */
+function warnDeprecation(apolloName, nucleoName) {
+  if (warnedNames.has(apolloName)) return;
+  warnedNames.add(apolloName);
+
+  // eslint-disable-next-line no-console
+  console.warn(
+    `[octicons] Deprecation warning: Icon name "${apolloName}" is deprecated ` +
+      `and will be removed in the next major release. ` +
+      `Please use "${nucleoName}" instead.`
+  );
+}
 
 for (const key of Object.keys(data)) {
   // Returns a string representation of html attributes
   const htmlAttributes = (icon, defaultOptions, options) => {
-    const attributes = []
-    const attrObj = objectAssign({}, defaultOptions, options)
+    const attributes = [];
+    const attrObj = objectAssign({}, defaultOptions, options);
 
     // If the user passed in options
     if (options) {
@@ -15,37 +36,39 @@ for (const key of Object.keys(data)) {
       if (options['width'] || options['height']) {
         attrObj['width'] = options['width']
           ? options['width']
-          : (parseInt(options['height']) * defaultOptions['width']) / defaultOptions['height']
+          : (parseInt(options['height']) * defaultOptions['width']) /
+            defaultOptions['height'];
         attrObj['height'] = options['height']
           ? options['height']
-          : (parseInt(options['width']) * defaultOptions['height']) / defaultOptions['width']
+          : (parseInt(options['width']) * defaultOptions['height']) /
+            defaultOptions['width'];
       }
 
       // If the user passed in class
       if (options['class']) {
-        attrObj['class'] = `octicon octicon-${key} ${options['class']}`
-        attrObj['class'].trim()
+        attrObj['class'] = `octicon octicon-${key} ${options['class']}`;
+        attrObj['class'].trim();
       }
 
       // If the user passed in aria-label
       if (options['aria-label']) {
-        attrObj['aria-label'] = options['aria-label']
-        attrObj['role'] = 'img'
+        attrObj['aria-label'] = options['aria-label'];
+        attrObj['role'] = 'img';
 
         // Un-hide the icon
-        delete attrObj['aria-hidden']
+        delete attrObj['aria-hidden'];
       }
     }
 
     for (const option of Object.keys(attrObj)) {
-      attributes.push(`${option}="${attrObj[option]}"`)
+      attributes.push(`${option}="${attrObj[option]}"`);
     }
 
-    return attributes.join(' ').trim()
-  }
+    return attributes.join(' ').trim();
+  };
 
   // Set the symbol for easy access
-  data[key].symbol = key
+  data[key].symbol = key;
 
   // Set options for each icon height
   for (const height of Object.keys(data[key].heights)) {
@@ -56,24 +79,117 @@ for (const key of Object.keys(data)) {
       viewBox: `0 0 ${data[key].heights[height].width} ${height}`,
       class: `octicon octicon-${key}`,
       'aria-hidden': 'true',
-    }
+    };
   }
 
   // Function to return an SVG object
   data[key].toSVG = function (options = {}) {
-    const {height, width} = options
-    const naturalHeight = closestNaturalHeight(Object.keys(data[key].heights), height || width || DEFAULT_HEIGHT)
-    return `<svg ${htmlAttributes(data[key], data[key].heights[naturalHeight].options, options)}>${
-      data[key].heights[naturalHeight].path
-    }</svg>`
+    const { height, width } = options;
+    const naturalHeight = closestNaturalHeight(
+      Object.keys(data[key].heights),
+      height || width || DEFAULT_HEIGHT
+    );
+    return `<svg ${htmlAttributes(
+      data[key],
+      data[key].heights[naturalHeight].options,
+      options
+    )}>${data[key].heights[naturalHeight].path}</svg>`;
+  };
+}
+
+// Returns all icons that have the specified tag/keyword
+function getIconsByTag(tag) {
+  return Object.values(data).filter(
+    (icon) => icon.keywords && icon.keywords.includes(tag)
+  );
+}
+
+/**
+ * Get an icon by name, with fallback to aliased names.
+ * Logs deprecation warning when apollo names are used.
+ * @param {string} name - Icon name (nucleo or apollo)
+ * @returns {object|undefined} The icon object or undefined if not found
+ */
+function getIcon(name) {
+  // Direct lookup first (no warning)
+  if (data[name]) return data[name];
+
+  // Try apollo -> nucleo fallback (with warning)
+  const nucleoName = nameAliases.apolloToNucleo[name];
+  if (nucleoName && data[nucleoName]) {
+    warnDeprecation(name, nucleoName);
+    return data[nucleoName];
   }
+
+  return undefined;
 }
 
-// Import data into exports
-module.exports = data
+// Proxy handler to intercept apollo name lookups with deprecation warnings
+const proxyHandler = {
+  get(target, prop, receiver) {
+    // Handle non-string properties and special cases
+    if (typeof prop !== 'string') {
+      return Reflect.get(target, prop, receiver);
+    }
+
+    // If it's a direct property, return it
+    if (prop in target) {
+      return Reflect.get(target, prop, receiver);
+    }
+
+    // Check if it's an apollo name that maps to a nucleo name
+    const nucleoName = nameAliases.apolloToNucleo[prop];
+    if (nucleoName && nucleoName in target) {
+      warnDeprecation(prop, nucleoName);
+      return Reflect.get(target, nucleoName, receiver);
+    }
+
+    return undefined;
+  },
+
+  // Support 'in' operator for apollo names
+  has(target, prop) {
+    if (prop in target) return true;
+    const nucleoName = nameAliases.apolloToNucleo[prop];
+    return nucleoName && nucleoName in target;
+  },
+
+  // Ensure Object.keys() only returns nucleo names
+  ownKeys(target) {
+    return Reflect.ownKeys(target);
+  },
+
+  getOwnPropertyDescriptor(target, prop) {
+    return Reflect.getOwnPropertyDescriptor(target, prop);
+  },
+};
+
+// Create proxied export
+const proxiedData = new Proxy(data, proxyHandler);
+
+// Export the proxied data
+module.exports = proxiedData;
+
+// Add getIconsByTag as a non-enumerable property so it doesn't
+// appear when iterating over icon keys with Object.keys()
+Object.defineProperty(module.exports, 'getIconsByTag', {
+  value: getIconsByTag,
+  enumerable: false,
+  writable: false,
+});
+
+// Add getIcon as a non-enumerable property
+Object.defineProperty(module.exports, 'getIcon', {
+  value: getIcon,
+  enumerable: false,
+  writable: false,
+});
 
 function closestNaturalHeight(naturalHeights, height) {
   return naturalHeights
-    .map(naturalHeight => parseInt(naturalHeight, 10))
-    .reduce((acc, naturalHeight) => (naturalHeight <= height ? naturalHeight : acc), naturalHeights[0])
+    .map((naturalHeight) => parseInt(naturalHeight, 10))
+    .reduce(
+      (acc, naturalHeight) => (naturalHeight <= height ? naturalHeight : acc),
+      naturalHeights[0]
+    );
 }

package/index.scss

@@ -1,6 +1,6 @@
 .octicon {
   display: inline-block;
   vertical-align: text-top;
-  fill: currentColor;
+  stroke: currentColor;
   overflow: visible;
 }

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@xplortech/apollo-icons",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "A scalable set of icons for Xplor's Apollo Design System.",
   "homepage": "https://xplor-apollo.herokuapp.com/?path=/story/icons-icons--icons",
   "author": "Xplor Technologies",
   "license": "MIT",
   "style": "index.scss",
   "main": "index.js",
+  "types": "index.d.ts",
   "files": [
     "index.js",
+    "index.d.ts",
     "index.scss",
     "build"
   ],
@@ -24,7 +26,7 @@
     "url": "https://github.com/xplor/apollo-icons/issues"
   },
   "scripts": {
-    "build": "\\cp -r ../build/ ./build && \\cp index.scss ./build/build.css",
+    "build": "\\cp -r ../build/ ./build && \\cp index.scss ./build/build.css && cp ../../name-aliases.json ./build/name-aliases.json",
     "lint": "eslint index.js tests/*.js",
     "test": "ava --verbose 'tests/*.js'"
   },