font-picker-react - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

dist/FontPicker.d.ts

@@ -8,9 +8,9 @@ import { Category, Font, FontManager, Script, SortOption, Variant } from "@samuelmeuli/font-manager";
     onChange: (font: Font) => void;
-    pickerId?: string;
-    families?: string[];
-    categories?: Category[];
-    scripts?: Script[];
-    variants?: Variant[];
-    limit?: number;
-    sort?: SortOption;
+    pickerId: string;
+    families: string[];
+    categories: Category[];
+    scripts: Script[];
+    variants: Variant[];
+    limit: number;
+    sort: SortOption;
 }
@@ -27,8 +27,9 @@ interface State {
         categories: Category[];
-        scripts: string[];
-        variants: string[];
+        scripts: Script[];
+        variants: Variant[];
         limit: number;
-        sort: string;
+        sort: SortOption;
         onChange: () => void;
     };
+    state: Readonly<State>;
     fontManager: FontManager;
@@ -35,0 +36,0 @@ constructor(props: Props);

dist/FontPicker.js

@@ -1,162 +0,272 @@
-'use strict';
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var fontManager = require('@samuelmeuli/font-manager');
-var React = require('react');
-var React__default = _interopDefault(React);
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
-***************************************************************************** */
-/* global Reflect, Promise */
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function __extends(d, b) {
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { FontManager, FONT_FAMILY_DEFAULT, OPTIONS_DEFAULTS } from "@samuelmeuli/font-manager";
+import React, { PureComponent } from "react";
+
+/**
+ * Return the fontId based on the provided font family
+ */
 function getFontId(fontFamily) {
-    return fontFamily.replace(/\s+/g, "-").toLowerCase();
+  return fontFamily.replace(/\s+/g, "-").toLowerCase();
 }
-var FontPicker = (function (_super) {
-    __extends(FontPicker, _super);
-    function FontPicker(props) {
-        var _this = _super.call(this, props) || this;
-        var _a = _this.props, apiKey = _a.apiKey, activeFontFamily = _a.activeFontFamily, pickerId = _a.pickerId, families = _a.families, categories = _a.categories, scripts = _a.scripts, variants = _a.variants, limit = _a.limit, onChange = _a.onChange;
-        _this.state = {
-            expanded: false,
-            loadingStatus: "loading",
-        };
-        var options = {
-            pickerId: pickerId,
-            families: families,
-            categories: categories,
-            scripts: scripts,
-            variants: variants,
-            limit: limit,
-        };
-        _this.fontManager = new fontManager.FontManager(apiKey, activeFontFamily, options, onChange);
-        _this.fontManager
-            .init()
-            .then(function () {
-            _this.setState({
-                loadingStatus: "finished",
-            });
-        })["catch"](function (err) {
-            _this.setState({
-                loadingStatus: "error",
-            });
-            console.error("Error trying to fetch the list of available fonts");
-            console.error(err);
-        });
-        _this.onClose = _this.onClose.bind(_this);
-        _this.onSelection = _this.onSelection.bind(_this);
-        _this.setActiveFontFamily = _this.setActiveFontFamily.bind(_this);
-        _this.toggleExpanded = _this.toggleExpanded.bind(_this);
-        return _this;
+
+var FontPicker =
+/*#__PURE__*/
+function (_PureComponent) {
+  _inherits(FontPicker, _PureComponent);
+
+  // Instance of the FontManager class used for managing, downloading and applying fonts
+  function FontPicker(props) {
+    var _this;
+
+    _classCallCheck(this, FontPicker);
+
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(FontPicker).call(this, props));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      expanded: false,
+      loadingStatus: "loading"
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "fontManager", void 0);
+
+    var _this$props = _this.props,
+        apiKey = _this$props.apiKey,
+        activeFontFamily = _this$props.activeFontFamily,
+        pickerId = _this$props.pickerId,
+        families = _this$props.families,
+        categories = _this$props.categories,
+        scripts = _this$props.scripts,
+        variants = _this$props.variants,
+        limit = _this$props.limit,
+        sort = _this$props.sort,
+        onChange = _this$props.onChange;
+    var options = {
+      pickerId: pickerId,
+      families: families,
+      categories: categories,
+      scripts: scripts,
+      variants: variants,
+      limit: limit,
+      sort: sort
+    }; // Initialize FontManager object and generate font list
+
+    _this.fontManager = new FontManager(apiKey, activeFontFamily, options, onChange);
+
+    _this.fontManager.init().then(function () {
+      _this.setState({
+        loadingStatus: "finished"
+      });
+    })["catch"](function (err) {
+      // On error: Log error message
+      _this.setState({
+        loadingStatus: "error"
+      });
+
+      console.error("Error trying to fetch the list of available fonts");
+      console.error(err);
+    }); // Function bindings
+
+
+    _this.onClose = _this.onClose.bind(_assertThisInitialized(_this));
+    _this.onSelection = _this.onSelection.bind(_assertThisInitialized(_this));
+    _this.setActiveFontFamily = _this.setActiveFontFamily.bind(_assertThisInitialized(_this));
+    _this.toggleExpanded = _this.toggleExpanded.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+  /**
+   * After every component update, check whether the activeFontFamily prop has changed. If so,
+   * call this.setActiveFontFamily with the new font
+   */
+
+
+  _createClass(FontPicker, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this$props2 = this.props,
+          activeFontFamily = _this$props2.activeFontFamily,
+          onChange = _this$props2.onChange; // If active font prop has changed: Update font family in font manager and component state
+
+      if (activeFontFamily !== prevProps.activeFontFamily) {
+        this.setActiveFontFamily(activeFontFamily);
+      } // If onChange prop has changed: Update onChange function in font manager
+
+
+      if (onChange !== prevProps.onChange) {
+        this.fontManager.setOnChange(onChange);
+      }
     }
-    FontPicker.prototype.componentDidUpdate = function (prevProps) {
-        var _a = this.props, activeFontFamily = _a.activeFontFamily, onChange = _a.onChange;
-        if (activeFontFamily !== prevProps.activeFontFamily) {
-            this.setActiveFontFamily(activeFontFamily);
+    /**
+     * EventListener for closing the font picker when clicking anywhere outside it
+     */
+
+  }, {
+    key: "onClose",
+    value: function onClose(e) {
+      var targetEl = e.target; // Clicked element
+
+      var fontPickerEl = document.getElementById("font-picker".concat(this.fontManager.selectorSuffix)); // eslint-disable-next-line no-constant-condition
+
+      while (true) {
+        if (targetEl === fontPickerEl) {
+          // Click inside font picker: Exit
+          return;
         }
-        if (onChange !== prevProps.onChange) {
-            this.fontManager.setOnChange(onChange);
+
+        if (targetEl.parentNode) {
+          // Click outside font picker: Move up the DOM
+          targetEl = targetEl.parentNode;
+        } else {
+          // DOM root is reached: Toggle picker, exit
+          this.toggleExpanded();
+          return;
         }
-    };
-    FontPicker.prototype.onClose = function (e) {
-        var targetElement = e.target;
-        do {
-            if (targetElement === document.getElementById("font-picker" + this.fontManager.selectorSuffix)) {
-                return;
-            }
-            targetElement = targetElement.parentNode;
-        } while (targetElement);
-        this.toggleExpanded();
-    };
-    FontPicker.prototype.onSelection = function (e) {
-        var target = e.target;
-        var activeFontFamily = target.textContent;
-        this.setActiveFontFamily(activeFontFamily);
-        this.toggleExpanded();
-    };
-    FontPicker.prototype.setActiveFontFamily = function (activeFontFamily) {
-        this.fontManager.setActiveFont(activeFontFamily);
-    };
-    FontPicker.prototype.generateFontList = function (fonts) {
-        var _this = this;
-        var activeFontFamily = this.props.activeFontFamily;
-        var loadingStatus = this.state.loadingStatus;
-        if (loadingStatus !== "finished") {
-            return React__default.createElement("div", null);
-        }
-        return (React__default.createElement("ul", null, fonts.map(function (font) {
-            var isActive = font.family === activeFontFamily;
-            var fontId = getFontId(font.family);
-            return (React__default.createElement("li", { key: fontId },
-                React__default.createElement("button", { type: "button", id: "font-button-" + fontId + _this.fontManager.selectorSuffix, className: isActive ? "active-font" : "", onClick: _this.onSelection, onKeyPress: _this.onSelection }, font.family)));
-        })));
-    };
-    FontPicker.prototype.toggleExpanded = function () {
-        var expanded = this.state.expanded;
-        if (expanded) {
-            this.setState({
-                expanded: false,
-            });
-            document.removeEventListener("click", this.onClose);
-        }
-        else {
-            this.setState({
-                expanded: true,
-            });
-            document.addEventListener("click", this.onClose);
-        }
-    };
-    FontPicker.prototype.render = function () {
-        var _a = this.props, activeFontFamily = _a.activeFontFamily, sort = _a.sort;
-        var _b = this.state, expanded = _b.expanded, loadingStatus = _b.loadingStatus;
-        var fonts = Array.from(this.fontManager.getFonts().values());
-        if (sort === "alphabet") {
-            fonts.sort(function (font1, font2) { return font1.family.localeCompare(font2.family); });
-        }
-        return (React__default.createElement("div", { id: "font-picker" + this.fontManager.selectorSuffix, className: expanded ? "expanded" : "" },
-            React__default.createElement("button", { type: "button", className: "dropdown-button", onClick: this.toggleExpanded, onKeyPress: this.toggleExpanded },
-                React__default.createElement("p", { className: "dropdown-font-family" }, activeFontFamily),
-                React__default.createElement("p", { className: "dropdown-icon " + loadingStatus })),
-            loadingStatus === "finished" && this.generateFontList(fonts)));
-    };
-    FontPicker.defaultProps = {
-        defaultFamily: "Open Sans",
-        pickerId: "",
-        families: [],
-        categories: [],
-        scripts: ["latin"],
-        variants: ["regular"],
-        limit: 50,
-        sort: "alphabet",
-        onChange: function () { },
-    };
-    return FontPicker;
-}(React.PureComponent));
+      }
+    }
+    /**
+     * Update the active font on font button click
+     */
 
-module.exports = FontPicker;
+  }, {
+    key: "onSelection",
+    value: function onSelection(e) {
+      var target = e.target;
+      var activeFontFamily = target.textContent;
+
+      if (!activeFontFamily) {
+        throw Error("Missing font family in clicked font button");
+      }
+
+      this.setActiveFontFamily(activeFontFamily);
+      this.toggleExpanded();
+    }
+    /**
+     * Set the specified font as the active font in the fontManager and update activeFontFamily in the
+     * state
+     */
+
+  }, {
+    key: "setActiveFontFamily",
+    value: function setActiveFontFamily(activeFontFamily) {
+      this.fontManager.setActiveFont(activeFontFamily);
+    }
+    /**
+     * Generate <ul> with all font families
+     */
+
+  }, {
+    key: "generateFontList",
+    value: function generateFontList(fonts) {
+      var _this2 = this;
+
+      var activeFontFamily = this.props.activeFontFamily;
+      var loadingStatus = this.state.loadingStatus;
+
+      if (loadingStatus !== "finished") {
+        return React.createElement("div", null);
+      }
+
+      return React.createElement("ul", null, fonts.map(function (font) {
+        var isActive = font.family === activeFontFamily;
+        var fontId = getFontId(font.family);
+        return React.createElement("li", {
+          key: fontId
+        }, React.createElement("button", {
+          type: "button",
+          id: "font-button-".concat(fontId).concat(_this2.fontManager.selectorSuffix),
+          className: isActive ? "active-font" : "",
+          onClick: _this2.onSelection,
+          onKeyPress: _this2.onSelection
+        }, font.family));
+      }));
+    }
+    /**
+     * Expand/collapse the picker's font list
+     */
+
+  }, {
+    key: "toggleExpanded",
+    value: function toggleExpanded() {
+      var expanded = this.state.expanded;
+
+      if (expanded) {
+        this.setState({
+          expanded: false
+        });
+        document.removeEventListener("click", this.onClose);
+      } else {
+        this.setState({
+          expanded: true
+        });
+        document.addEventListener("click", this.onClose);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          activeFontFamily = _this$props3.activeFontFamily,
+          sort = _this$props3.sort;
+      var _this$state = this.state,
+          expanded = _this$state.expanded,
+          loadingStatus = _this$state.loadingStatus; // Extract and sort font list
+
+      var fonts = Array.from(this.fontManager.getFonts().values());
+
+      if (sort === "alphabet") {
+        fonts.sort(function (font1, font2) {
+          return font1.family.localeCompare(font2.family);
+        });
+      } // Render font picker button and attach font list to it
+
+
+      return React.createElement("div", {
+        id: "font-picker".concat(this.fontManager.selectorSuffix),
+        className: expanded ? "expanded" : ""
+      }, React.createElement("button", {
+        type: "button",
+        className: "dropdown-button",
+        onClick: this.toggleExpanded,
+        onKeyPress: this.toggleExpanded
+      }, React.createElement("p", {
+        className: "dropdown-font-family"
+      }, activeFontFamily), React.createElement("p", {
+        className: "dropdown-icon ".concat(loadingStatus)
+      })), loadingStatus === "finished" && this.generateFontList(fonts));
+    }
+  }]);
+
+  return FontPicker;
+}(PureComponent);
+
+_defineProperty(FontPicker, "defaultProps", {
+  defaultFamily: FONT_FAMILY_DEFAULT,
+  pickerId: OPTIONS_DEFAULTS.pickerId,
+  families: OPTIONS_DEFAULTS.families,
+  categories: OPTIONS_DEFAULTS.categories,
+  scripts: OPTIONS_DEFAULTS.scripts,
+  variants: OPTIONS_DEFAULTS.variants,
+  limit: OPTIONS_DEFAULTS.limit,
+  sort: OPTIONS_DEFAULTS.sort,
+  onChange: function onChange() {}
+});
+
+export { FontPicker as default };

package.json

 {
 	"name": "font-picker-react",
-	"version": "3.2.0",
+	"version": "3.3.0",
 	"description": "Font selector component for Google Fonts",
-	"author": "Samuel Meuli <[e-mail]>",
+	"author": {
+		"name": "Samuel Meuli",
+		"email": "[e-mail]",
+		"url": "https://samuelmeuli.com"
+	},
 	"repository": "github:samuelmeuli/font-picker-react",
@@ -21,3 +25,2 @@ "homepage": "https://font-picker.samuelmeuli.com",
 	"main": "./dist/FontPicker.js",
-	"module": "./dist/FontPicker.es.js",
 	"types": "./dist/FontPicker.d.ts",
@@ -28,8 +31,9 @@ "files": [
 	"scripts": {
-		"start": "npm-run-all build:rollup --parallel start:*",
-		"start:rollup": "rollup --config --sourcemap --watch",
+		"start": "npm-run-all build:clean build:ts --parallel start:*",
+		"start:ts": "babel ./src/FontPicker.tsx --out-file ./dist/FontPicker.js --watch",
 		"start:storybook": "start-storybook --port 3000",
 		"build": "run-s build:*",
-		"build:clean": "rm -rf ./dist/",
-		"build:rollup": "rollup --config",
+		"build:clean": "rm -rf ./dist/ && mkdir ./dist/",
+		"build:ts": "babel ./src/FontPicker.tsx --out-file ./dist/FontPicker.js",
+		"build:types": "tsc --emitDeclarationOnly",
 		"format": "prettier --write",
@@ -40,2 +44,3 @@ "lint:css": "stylelint --fix --max-warnings 0",
 		"lint:ts": "eslint --ext .ts,.tsx --fix --max-warnings 0",
+		"typecheck": "tsc --noEmit",
 		"version": "yarn build",
@@ -45,3 +50,3 @@ "release": "np"
 	"dependencies": {
-		"@samuelmeuli/font-manager": "^1.0.0"
+		"@samuelmeuli/font-manager": "^1.1.1"
 	},
@@ -53,5 +58,11 @@ "peerDependencies": {
 	"devDependencies": {
-		"@babel/core": "^7.4.0",
+		"@babel/cli": "^7.5.5",
+		"@babel/core": "^7.5.5",
+		"@babel/plugin-proposal-class-properties": "^7.5.5",
+		"@babel/preset-env": "^7.5.5",
+		"@babel/preset-react": "^7.0.0",
+		"@babel/preset-typescript": "^7.3.3",
 		"@samuelmeuli/eslint-config": "^2.1.0",
 		"@samuelmeuli/stylelint-config": "^1.0.2",
+		"@samuelmeuli/tsconfig": "^0.1.1",
 		"@storybook/react": "^5.0.5",
@@ -61,11 +72,11 @@ "@types/react": "^16.8.10",
 		"@typescript-eslint/parser": "^1.5.0",
-		"babel-loader": "^8.0.4",
+		"babel-loader": "^8.0.6",
 		"eslint": "^5.15.3",
 		"eslint-config-airbnb": "^17.1.0",
-		"eslint-config-prettier": "^4.1.0",
+		"eslint-config-prettier": "^6.0.0",
 		"eslint-plugin-import": "^2.14.0",
 		"eslint-plugin-jsx-a11y": "^6.1.1",
 		"eslint-plugin-react": "^7.11.1",
-		"husky": "^2.2.0",
-		"lint-staged": "^8.1.5",
+		"husky": "^3.0.2",
+		"lint-staged": "^9.2.1",
 		"np": "^5.0.2",
@@ -76,7 +87,20 @@ "npm-run-all": "^4.1.3",
 		"react-dom": "^16.8.6",
-		"rollup": "^1.7.4",
-		"rollup-plugin-typescript2": "^0.21.0",
 		"stylelint": "^10.1.0",
-		"typescript": "^3.3.4000"
+		"typescript": "^3.5.3"
 	},
+	"babel": {
+		"presets": [
+			"@babel/preset-typescript",
+			"@babel/react",
+			[
+				"@babel/preset-env",
+				{
+					"modules": false
+				}
+			]
+		],
+		"plugins": [
+			"@babel/plugin-proposal-class-properties"
+		]
+	},
 	"eslintConfig": {
@@ -99,3 +123,2 @@ "root": true,
 						"./.storybook/**/*.js",
-						"./rollup.config.js",
 						"./stories/**/*.jsx"
@@ -143,5 +166,5 @@ ]
 		"hooks": {
-			"pre-commit": "lint-staged"
+			"pre-commit": "yarn typecheck && lint-staged"
 		}
 	}
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

21644

decreased by-13.72%

Dev dependency count

29

increased by16%

Number of package files

6

decreased by-14.29%

Lines of code

269

decreased by-22.03%

Dependency changes

• Updated@samuelmeuli/font-manager@^1.1.1