Use font-manager package

Author: samuelmeuli

package.json

@@ -17,18 +17,18 @@
 		"react",
 		"react-component"
 	],
-	"main": "dist/FontPicker.js",
-	"module": "dist/FontPicker.es.js",
-	"types": "dist/FontPicker.d.ts",
+	"main": "./dist/FontPicker.js",
+	"module": "./dist/FontPicker.es.js",
+	"types": "./dist/FontPicker.d.ts",
 	"files": [
-		"lib/"
+		"./dist/"
 	],
 	"scripts": {
 		"start": "npm-run-all build:rollup --parallel start:*",
 		"start:rollup": "rollup --config --sourcemap --watch",
 		"start:storybook": "start-storybook --port 3000",
 		"build": "run-s build:*",
-		"build:clean": "rm -rf dist/",
+		"build:clean": "rm -rf ./dist/",
 		"build:rollup": "rollup --config",
 		"format": "prettier --write",
 		"lint:css": "stylelint --fix --max-warnings 0",
@@ -39,16 +39,16 @@
 		"release": "np"
 	},
 	"dependencies": {
-		"font-picker": "^3.1.0"
+		"@samuelmeuli/font-manager": "^1.0.0"
 	},
 	"peerDependencies": {
 		"@types/react": "^16.8.10",
 		"react": "^16.0.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.4.0",
-		"@samuelmeuli/eslint-config": "~2.0.1",
-		"@samuelmeuli/stylelint-config": "~1.0.0",
+		"@samuelmeuli/eslint-config": "^2.1.0",
+		"@samuelmeuli/stylelint-config": "^1.0.2",
 		"@storybook/react": "^5.0.5",
 		"@types/react": "^16.8.10",
 		"@typescript-eslint/eslint-plugin": "^1.5.0",
@@ -69,7 +69,7 @@
 		"react-dom": "^16.8.6",
 		"rollup": "^1.7.4",
 		"rollup-plugin-typescript2": "^0.21.0",
-		"stylelint": "^10.0.1",
+		"stylelint": "^10.1.0",
 		"typescript": "^3.3.4000"
 	},
 	"eslintConfig": {
@@ -88,13 +88,12 @@
 				"error",
 				{
 					"devDependencies": [
-						".storybook/**/*.js",
-						"rollup.config.js",
-						"stories/**/*.jsx"
+						"./.storybook/**/*.js",
+						"./rollup.config.js",
+						"./stories/**/*.jsx"
 					]
 				}
 			],
-			"import/no-unresolved": "off",
 			"react/jsx-sort-default-props": "off"
 		}
 	},

rollup.config.js

@@ -2,10 +2,8 @@ import typescript from "rollup-plugin-typescript2";
 
 import pkg from "./package.json";
 
-const TS_CACHE_DIR = "node_modules/.cache/rollup-plugin-typescript2";
-
 export default {
-	input: "src/FontPicker.tsx",
+	input: "./src/FontPicker.tsx",
 	output: [
 		{
 			file: pkg.main,
@@ -16,10 +14,10 @@ export default {
 			format: "es",
 		},
 	],
-	external: ["font-picker", "react"],
+	external: ["font-manager", "react"],
 	plugins: [
 		typescript({
-			cacheRoot: TS_CACHE_DIR,
+			cacheRoot: "./node_modules/.cache/rollup-plugin-typescript2/",
 		}),
 	],
 };

src/FontPicker.tsx

@@ -1,13 +1,12 @@
-import FontManager from "font-picker/dist/font-manager/font-manager/FontManager";
 import {
 	Category,
 	Font,
+	FontManager,
 	Options,
 	Script,
 	SortOption,
 	Variant,
-} from "font-picker/dist/font-manager/shared/types";
-import "font-picker/dist/styles.min.css";
+} from "@samuelmeuli/font-manager";
 import React, { PureComponent } from "react";
 
 type LoadingStatus = "loading" | "finished" | "error";
@@ -89,23 +88,19 @@ export default class FontPicker extends PureComponent<Props, State> {
 		this.fontManager = new FontManager(apiKey, activeFontFamily, options, onChange);
 		this.fontManager
 			.init()
-			.then(
-				(): void => {
-					this.setState({
-						loadingStatus: "finished",
-					});
-				},
-			)
-			.catch(
-				(err: Error): void => {
-					// On error: Log error message
-					this.setState({
-						loadingStatus: "error",
-					});
-					console.error("Error trying to fetch the list of available fonts");
-					console.error(err);
-				},
-			);
+			.then((): void => {
+				this.setState({
+					loadingStatus: "finished",
+				});
+			})
+			.catch((err: Error): void => {
+				// 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(this);

stories/index.stories.jsx

@@ -1,8 +1,8 @@
 import { storiesOf } from "@storybook/react";
 import React, { useState } from "react";
 
-import FontPicker from "../dist/FontPicker.es.js";
-import "./style.css";
+import FontPicker from "../dist/FontPicker.es.js"; /* eslint-disable-line import/extensions */
+import "./styles.css";
 
 const API_KEY = "AIzaSyAOkdDlx49HCSBdu86oe8AD1Q7piIxlR6k";
 

stories/style.css renamed to stories/styles.css

@@ -2,24 +2,19 @@
 	"compilerOptions": {
 		"allowSyntheticDefaultImports": true,
 		"declaration": true,
-		"declarationDir": "./dist/js/",
 		"declarationMap": true,
+		"esModuleInterop": true,
 		"forceConsistentCasingInFileNames": true,
 		"jsx": "react",
-		"module": "es6",
-		"moduleResolution": "node",
 		"noFallthroughCasesInSwitch": true,
 		"noImplicitAny": true,
 		"noImplicitReturns": true,
 		"noImplicitThis": true,
 		"noUnusedLocals": true,
 		"noUnusedParameters": true,
-		"outDir": "./dist/js/",
 		"removeComments": true,
 		"sourceMap": true,
 		"strictBindCallApply": true,
-		"strictFunctionTypes": true,
-		"target": "es5"
-	},
-	"include": ["src/**/*"]
+		"strictFunctionTypes": true
+	}
 }

tsconfig.json

@@ -1048,12 +1048,17 @@
     react-lifecycles-compat "^3.0.4"
     warning "^3.0.0"
 
-"@samuelmeuli/eslint-config@~2.0.1":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@samuelmeuli/eslint-config/-/eslint-config-2.0.1.tgz#10b2f70bf455f14938bbde5983f5a900d7bbc225"
-  integrity sha512-mPD6Uu1/skwxkMYC+PDtZC5VoK9Eg/B/bpzY9KX5L51yC7sKtxelS0Pb00QiCfKU8YEs5DbJfGciEFsnoqALag==
+"@samuelmeuli/eslint-config@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@samuelmeuli/eslint-config/-/eslint-config-2.1.0.tgz#f2824925419529b3501d888e0c5adc72bd0bacde"
+  integrity sha512-hIC0kuSlkIDLR99FEoyangrtcqSdUgmg3T3y+/7rTjYI80j//16iULEFtoZT+lS1Kau/z+XFHNjChSBBEkXhaw==
+
+"@samuelmeuli/font-manager@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@samuelmeuli/font-manager/-/font-manager-1.0.0.tgz#df1cd3b382c89a85d1261ba8fd69e0c383d8d9f1"
+  integrity sha512-rrnURUgZKL7UIUq5jwsMXy6MK29LjW+FIqjrFFXsoKhyLJa9jGSRo0kx+XMPRGAxuR+2+uWuOoaRPjaXsXuAdA==
 
-"@samuelmeuli/stylelint-config@~1.0.0":
+"@samuelmeuli/stylelint-config@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@samuelmeuli/stylelint-config/-/stylelint-config-1.0.2.tgz#fb66d6529a33239202a69fa204dd8636398fa714"
   integrity sha512-j8sYYH0lYmmm8POd6rl7R6TZsnDC8GLnbl7UAgXhNNBPobcz7ETiwV2S3cOaAb4xBkrIx38mNbPenIgwFLDEYw==
@@ -4492,11 +4497,6 @@ focus-lock@^0.6.3:
   resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.5.tgz#f6eb37832a9b1b205406175f5277396a28c0fce1"
   integrity sha512-i/mVBOoa9o+tl+u9owOJUF8k8L85odZNIsctB+JAK2HFT8jckiBwmk+3uydlm6FN8czgnkIwQtBv6yyAbrzXjw==
 
-font-picker@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/font-picker/-/font-picker-3.1.0.tgz#587afeb46517d3788adbe538d3823c8c6bc2b5df"
-  integrity sha512-OB5gPtAoSY0CVfolwKd3PXaKl59F0QeP6+Ylt+4js0o1JkKGjvON5MO8lUlYq6VLPJlWx8l/ZmUrvHcAu94CJg==
-
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -9308,7 +9308,7 @@ stylelint-scss@^3.4.0:
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^3.3.1"
 
-stylelint@^10.0.1:
+stylelint@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-10.1.0.tgz#1bc4c4ce878107e7c396b19226d91ba28268911a"
   integrity sha512-OmlUXrgzEMLQYj1JPTpyZPR9G4bl0StidfHnGJEMpdiQ0JyTq0MPg1xkHk1/xVJ2rTPESyJCDWjG8Kbpoo7Kuw==