@cypress-design/icon-registry 0.1.0

package/ReadMe.md

@@ -0,0 +1,82 @@
+# Registry of icons
+
+This package contains the SVG icons and provides a way to load them as HTML elements.
+This contains all the elements that are not specifically react or vue.
+
+## Usage
+
+```ts
+import {
+  /**
+   * Array of icons generated by svg-to-ts
+   * contains the body of each icon
+   */
+  iconSet,
+  /**
+   * Record of each icon with is meta data
+   * key: camel case of the rootId (ex: "action-next")
+   * value: {
+   *  availableSizes: ['16'],
+   *  hasFillColor: false,
+   *  hasStrokeColor: true,
+   *  hasSecondaryFillColor: false,
+   *  hasSecondaryStrokeColor: false,
+   * }
+   */
+  iconsMetadata,
+  compileIcon,
+  getComponentAttributes,
+} from '@cypress-design/icon-registry';
+
+iconSet.forEach((icon) => {
+  // `icon.name` contains "book-code-x16"
+  // since we mostly need the rooId we can extract it from the name
+  const [rootId] = icon.name.split('_x');
+  // these information sets are intended to be used in a template or a render function
+  console.log({
+    body: icon.data,
+    metaData: icons[rootId],
+  });
+
+  const { size, compiledClasses, body } = compileIcon({
+    name: rootId,
+    size: 16,
+    // colors from the windicss set of colors
+    strokeColor: 'red-600',
+    fillColor: 'amber-300',
+  });
+  // size: the size of the icon with the default value if possible,
+  // compiledClasses: all css classes that we will hav to add to our SVG element becaus eof the color passed,
+  // body: the interior of the SVG element between the opening and closing SVG tags,
+});
+```
+
+## Build
+
+### Generated types
+
+Sample:
+
+```ts
+// lists all the colors available from windi classes
+export type WindiColors = 'jade-200' | 'jade-300' | 'red-200' | 'red-300';
+
+export type IconProps =
+  | IconActionDeleteCircleProps
+  | IconTestingTypeComponentProps;
+// | ...
+
+interface IconActionDeleteCircleProps {
+  name: 'action-delete-circle';
+  color?: keyof typeof colors;
+}
+
+interface IconTestingTypeComponentProps {
+  name: 'testing-type-component';
+  size?: 16 | 24 | 64 | 120;
+  color?: keyof typeof colors;
+  bgColor?: keyof typeof colors;
+}
+
+//...
+```

package/dist/cjs/compileIcon.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getComponentAttributes = exports.compileIcon = void 0;
+const icons_1 = require("./icons");
+const iconsList_1 = require("./iconsList");
+const camelcase_1 = require("camelcase");
+const compileIcon = (props) => {
+    const { name } = props;
+    const { availableSizes } = icons_1.iconsMetadata[name];
+    const { sizeWithDefault, compiledClasses } = (0, exports.getComponentAttributes)(Object.assign(Object.assign({}, props), { availableSizes }));
+    const nameWithSize = (0, camelcase_1.default)(`${name}_x${sizeWithDefault}`);
+    const iconData = iconsList_1.iconSet.find((i) => i.name === nameWithSize);
+    if (!iconData) {
+        throw new Error(`icon '${name}' at size ${sizeWithDefault} not found`);
+    }
+    return Object.assign(Object.assign({}, props), { size: sizeWithDefault, compiledClasses, body: iconData.data });
+};
+exports.compileIcon = compileIcon;
+const getComponentAttributes = ({ size, availableSizes, strokeColor, fillColor, secondaryStrokeColor, secondaryFillColor, }) => {
+    const sizeWithDefault = size !== null && size !== void 0 ? size : (availableSizes.length >= 1
+        ? availableSizes.indexOf('16') > -1
+            ? '16'
+            : availableSizes[0]
+        : '');
+    // TODO: when all icons are converted to using the design system,
+    // replace dark by stroke and light by fill,
+    // both here and in the windi plugins configs.
+    const compiledClasses = [
+        strokeColor && `icon-dark-${strokeColor}`,
+        fillColor && `icon-light-${fillColor}`,
+        secondaryStrokeColor && `icon-dark-secondary-${secondaryStrokeColor}`,
+        secondaryFillColor && `icon-light-secondary-${secondaryFillColor}`,
+    ].filter(Boolean);
+    return { compiledClasses, sizeWithDefault };
+};
+exports.getComponentAttributes = getComponentAttributes;
+//# sourceMappingURL=compileIcon.js.map

package/dist/cjs/compileIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"compileIcon.js","sourceRoot":"","sources":["../../src/compileIcon.ts"],"names":[],"mappings":";;;AAAA,mCAAwD;AACxD,2CAAsC;AACtC,yCAAkC;AAE3B,MAAM,WAAW,GAAG,CAAC,KAAgB,EAAE,EAAE;IAC9C,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACvB,MAAM,EAAE,cAAc,EAAE,GAAG,qBAAa,CAAC,IAAI,CAAC,CAAC;IAE/C,MAAM,EAAE,eAAe,EAAE,eAAe,EAAE,GAAG,IAAA,8BAAsB,kCAC7D,KAAa,KACjB,cAAc,IACd,CAAC;IAEH,MAAM,YAAY,GAAG,IAAA,mBAAS,EAAC,GAAG,IAAI,KAAK,eAAe,EAAE,CAAC,CAAC;IAC9D,MAAM,QAAQ,GAAG,mBAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC;IAC9D,IAAI,CAAC,QAAQ,EAAE;QACb,MAAM,IAAI,KAAK,CAAC,SAAS,IAAI,aAAa,eAAe,YAAY,CAAC,CAAC;KACxE;IACD,uCACM,KAAa,KACjB,IAAI,EAAE,eAAe,EACrB,eAAe,EACf,IAAI,EAAE,QAAQ,CAAC,IAAI,IACnB;AACJ,CAAC,CAAC;AApBW,QAAA,WAAW,eAoBtB;AAEK,MAAM,sBAAsB,GAAG,CAAC,EACrC,IAAI,EACJ,cAAc,EACd,WAAW,EACX,SAAS,EACT,oBAAoB,EACpB,kBAAkB,GAQnB,EAAE,EAAE;IACH,MAAM,eAAe,GACnB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GACJ,CAAC,cAAc,CAAC,MAAM,IAAI,CAAC;QACzB,CAAC,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACjC,CAAC,CAAC,IAAI;YACN,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;QACrB,CAAC,CAAC,EAAE,CAAC,CAAC;IAEV,iEAAiE;IACjE,4CAA4C;IAC5C,8CAA8C;IAC9C,MAAM,eAAe,GAAG;QACtB,WAAW,IAAI,aAAa,WAAW,EAAE;QACzC,SAAS,IAAI,cAAc,SAAS,EAAE;QACtC,oBAAoB,IAAI,uBAAuB,oBAAoB,EAAE;QACrE,kBAAkB,IAAI,wBAAwB,kBAAkB,EAAE;KACnE,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IAElB,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;AAC9C,CAAC,CAAC;AAlCW,QAAA,sBAAsB,0BAkCjC"}