font-picker - npm Package Compare versions

Comparing version 2.2.1 to 3.0.0

package.json

 {
 	"name": "font-picker",
-	"version": "2.2.1",
+	"version": "3.0.0",
 	"description": "Font selector component for Google Fonts",
+	"author": "Samuel Meuli <[e-mail]>",
+	"repository": "github:samuelmeuli/font-picker",
+	"homepage": "https://samuelmeuli.github.io/font-picker",
+	"license": "MIT",
 	"keywords": [
@@ -14,8 +18,8 @@ "fonts",
 	],
-	"main": "lib/font-picker.js",
-	"module": "lib/font-picker.es.js",
-	"author": "Samuel Meuli <[e-mail]>",
-	"repository": "github:samuelmeuli/font-picker",
-	"homepage": "https://samuelmeuli.github.io/font-picker",
-	"license": "MIT",
+	"main": "dist/font-picker/FontPicker.js",
+	"module": "dist/font-picker/FontPicker.es.js",
+	"types": "dist/font-picker/index.d.ts",
+	"files": [
+		"dist/"
+	],
 	"scripts": {
@@ -26,17 +30,18 @@ "start": "npm-run-all build --parallel start:*",
 		"build": "run-s build:*",
-		"build:clean": "rm -rf lib",
+		"build:clean": "rm -rf dist/ demo/dist/",
 		"build:rollup": "rollup --config",
-		"format:any": "prettier --print-width 100 --write",
-		"format:js": "prettier --print-width 100 --single-quote --write",
-		"lint": "eslint --fix"
+		"build:scss": "node-sass --output-style compressed src/font-picker/styles/styles.scss dist/styles.min.css",
+		"format": "prettier --write",
+		"lint:css": "stylelint --fix",
+		"lint:scss": "stylelint --fix --syntax scss",
+		"lint:js": "eslint --ext .js,.jsx --fix",
+		"lint:ts": "eslint --ext .ts,.tsx --fix"
 	},
-	"dependencies": {
-		"lodash.throttle": "^4.1.1"
-	},
 	"devDependencies": {
-		"@babel/core": "^7.1.6",
-		"@babel/preset-env": "^7.3.1",
-		"@samuelmeuli/eslint-config": "~1.1.0",
-		"autoprefixer": "^9.4.7",
-		"eslint": "5.13.0",
+		"@samuelmeuli/eslint-config": "~2.0.0",
+		"@samuelmeuli/stylelint-config": "~1.0.0",
+		"@typescript-eslint/eslint-plugin": "^1.4.2",
+		"@typescript-eslint/parser": "^1.4.2",
+		"autoprefixer": "^9.5.0",
+		"eslint": "5.15.2",
 		"eslint-config-airbnb-base": "13.1.0",
@@ -52,11 +57,8 @@ "eslint-config-prettier": "^4.0.0",
 		"rollup": "^1.1.2",
-		"rollup-plugin-babel": "^4.3.2",
-		"rollup-plugin-commonjs": "^9.2.0",
-		"rollup-plugin-node-resolve": "^4.0.0",
 		"rollup-plugin-postcss": "^2.0.3",
-		"serve": "^10.1.2"
+		"rollup-plugin-typescript2": "^0.20.1",
+		"serve": "^10.1.2",
+		"stylelint": "^9.10.1",
+		"typescript": "^3.3.3333"
 	},
-	"files": [
-		"lib/"
-	],
 	"husky": {
@@ -68,12 +70,27 @@ "hooks": {
 	"lint-staged": {
-		"*.js": [
-			"yarn lint",
-			"yarn format:js",
+		"*.{js,jsx}": [
+			"yarn lint:js",
+			"yarn format",
 			"git add"
 		],
-		"*.{css,json,md,scss,yml}": [
-			"yarn format:any",
+		"*.{ts,tsx}": [
+			"yarn lint:ts",
+			"yarn format",
 			"git add"
+		],
+		"*.css": [
+			"yarn lint:css",
+			"yarn format",
+			"git add"
+		],
+		"*.scss": [
+			"yarn lint:scss",
+			"yarn format",
+			"git add"
+		],
+		"*.{json,md,yml}": [
+			"yarn format",
+			"git add"
 		]
 	}
 }

README.md

 # Font Picker
 
-**A simple, customizable font picker allowing users to preview, select, and use Google Fonts on your website.**
+**A simple, customizable font picker allowing users to preview, select and use Google Fonts on your website.**
 
-* Simple setup
-* Automatic font download and generation of the required CSS styles
-* Efficient font previews (previews are loaded dynamically and full fonts are only downloaded on selection)
+- Simple setup
+- No dependencies
+- Automatic font download and generation of the required CSS selectors
+- Efficient font previews (full fonts are only downloaded on selection)
 
-→ **[Demo](https://samuelmeuli.github.io/font-picker)**
+→ **[Examples](https://samuelmeuli.github.io/font-picker)**
 
@@ -14,8 +15,9 @@ _If you use React, see [**Font Picker for React**](https://github.com/samuelmeuli/font-picker-react)._
 <p align="center">
-  <img src=".github/demo.gif" width=700 alt="Demo">
+  <img src=".github/demo.gif" width="700" alt="Font picker demo" />
 </p>
 
-
 ## Getting started
 
+To be able to access the API, you'll need to [generate a Google Fonts API key](https://developers.google.com/fonts/docs/developer_api#APIKey).
+
 ### 1. Setup
@@ -25,11 +27,11 @@
 
-* **Download using script tags:** Download the `font-picker.js` file from the [releases page](https://github.com/samuelmeuli/font-picker/releases/latest), add it to your project, and include it in your HTML:
+- **Using script tags:** Download the `FontPicker.js` file from the [releases page](https://github.com/samuelmeuli/font-picker/releases/latest), save it in your project and include it in your HTML:
 
 ```html
-<script type="text/javascript" src="path/to/font-picker.js"></script>
-<script type="text/javascript">
+<script src="path/to/FontPicker.js"></script>
+<script>
   const fontPicker = new FontPicker(
-    'YOUR_API_KEY', // Google API key
-    'Open Sans', // default font
-    { limit: 50 } // additional options
+    YOUR_API_KEY, // Google API key
+    "Open Sans", // Default font
+    { limit: 30 }, // Additional options
   );
@@ -39,17 +41,4 @@ </script>
 
-* **Using CDN:** You can load the package from a CDN like unpkg:
+- **Using NPM:** If you're using a module bundler like Webpack, you can install the `font-picker` package from NPM and import it in your code:
 
-```html
-<script type="text/javascript" src="https://unpkg.com/font-picker^@2"></script>
-<script type="text/javascript">
-  const fontPicker = new FontPicker(
-    'YOUR_API_KEY', // Google API key
-    'Open Sans', // default font
-    { limit: 50 } // additional options
-  );
-</script>
-```
-
-* **Using NPM:** If you're using a module bundler like Webpack, you can install the `font-picker` package from NPM and import it in your code:
-
 ```sh
@@ -60,15 +49,14 @@ npm install font-picker
 ```js
-import { FontPicker } from 'font-picker';
+import FontPicker from "font-picker";
 
 const fontPicker = new FontPicker(
-  'YOUR_API_KEY', // Google API key
-  'Open Sans', // default font
-  { limit: 50 } // additional options
+  YOUR_API_KEY, // Google API key
+  "Open Sans", // Default font
+  { limit: 30 }, // Additional options
 );
 ```
 
-
 ### 2. Displaying the font picker
 
-**Create an empty `<div>` with the ID `"font-picker"`** in your HTML file. This is where the font picker will be generated.
+**Create an empty `<div>` with `id="font-picker"`** in your HTML file. This is where the font picker will be generated.
 
@@ -79,3 +67,2 @@ ```html
 
-
 ### 3. Applying the selected font
@@ -85,14 +72,8 @@
 
-When the user selects a font, it will automatically be downloaded and applied to all HTML elements of the `"apply-font"` class.
+When the user selects a font, it will automatically be downloaded and applied to all HTML elements with the `"apply-font"` class.
 
 <p align="center">
-  <img src=".github/html-element-names.png" width=800 alt="Class names">
+  <img src=".github/html-element-names.png" width="800" alt="Class names" />
 </p>
 
-
-## Example
-
-See [`demo/index.html`](demo/index.html) for an example.
-
-
 ## Customization
@@ -105,33 +86,36 @@
 ```js
-const fontPicker = new FontPicker(apiKey, defaultFont, options, onChange);
+const fontPicker = new FontPicker(apiKey, defaultFamily, options, onChange);
 ```
 
-* **`apiKey` (required)**: Google API key (can be generated [here](https://developers.google.com/fonts/docs/developer_api#APIKey))
-* **`defaultFont`**: Font that is selected on initialization (default: `'Open Sans'`)
-* **`options`**: Object with additional optional parameters:
-  * **`name`**: If you have multiple font pickers on your site, you need to give them unique names (which may only consist of letters and digits). These names must also be appended to the font picker's ID and the `.apply-font` class name. Example: If `options = { name: 'main' }`, use `#font-picker-main` and `.apply-font-main`
-  * **`families`**: If only specific fonts shall appear in the list, specify their names in an array (default: all font families)
-  * **`categories`**: Array of font categories – possible values: `'sans-serif', 'serif', 'display', handwriting', 'monospace'` (default: all categories)
-  * **`variants`**: Array of variants which the fonts must include and which will be downloaded; the first variant in the array will become the default variant and will be used in the font picker and the `.apply-font` class. Example: `['regular', 'italic', '700', '700italic']` (default: `['regular']`)
-  * **`limit`**: Maximum number of fonts to be displayed in the list (the least popular fonts will be omitted; default: `100`)
-  * **`sort`**: Sorting attribute for the font list – possible values: `'alphabetical'` (default), `'popularity'`
-* **`onChange`**: Function which is executed when the user changes the active font and its stylesheet has finished downloading
+- **`apiKey` (required)**: Google API key
+- **`defaultFamily`**: Font that is selected on initialization. Default: `"Open Sans"`
+- **`options`**: Object with additional optional parameters:
+  - **`pickerId`**: If you have multiple font pickers on your site, you need to give them unique IDs which must be appended to the pickers' `id` attributes and the `.apply-font` class names. Example: If `options = { pickerId: "main" }`, use `#font-picker-main` and `.apply-font-main`
+  - **`families`**: If only specific fonts shall appear in the list, specify their names in an array. Default: All font families
+  - **`categories`**: Array of font categories to include in the list. Possible values: `"sans-serif", "serif", "display", "handwriting", "monospace"`. Default: All categories
+  - **`scripts`**: Array of scripts which the fonts must include and which will be downloaded on font selection. Example: `["latin", "greek", "hebrew"]` (see [all possible values](./src/shared/types.ts)). Default: `["latin"]`
+  - **`variants`**: Array of variants which the fonts must include and which will be downloaded on font selection. Example: `["regular", "italic", "700", "700italic"]` (see [all possible values](./src/shared/types.ts)). Default: `["regular"]`
+  - **`limit`**: Maximum number of fonts to display in the list (the least popular fonts will be omitted). Default: `50`
+  - **`sort`**: Sorting attribute for the font list. Possible values: `"alphabet", "popularity"`. Default: `"alphabet"`
+- **`onChange`**: Function to execute whenever the active font is changed
 
-
 ### Functions
 
-The `FontPicker` class has the following functions:
+The `FontPicker` class exposes the following functions:
 
-* **`getActiveFont()`**: Returns an object with information about the currently selected font
-* **`setActiveFont(fontFamily)`**: Change the active font programmatically
+- **`getFonts()`**: Returns a map of all font names/objects
+- **`addFont(fontFamily: string, index?: number)`**: Adds the specified font to the font list (at the given index)
+- **`removeFont(fontFamily: string)`**: Removes the specified font from the font list
+- **`getActiveFont()`**: Returns the font object of the currently active font
+- **`setActiveFont(fontFamily: string)`**: Sets the provided font as the active font
 
-
 ## Development
 
-To build the project locally, do the following:
+Requirements: Node.js, Yarn
 
-* `git clone`
-* `yarn install`
-* `yarn start` to generate the library bundle using [Rollup](https://github.com/rollup/rollup) and serve the demo website on `localhost:3000`
+1. Clone this repository: `git clone REPO_URL`
+2. Install all dependencies: `yarn`
+3. Generate the library bundle: `yarn start`
+4. View the rendered component on `localhost:3000`
 
-Suggestions and contributions are always welcome! Please first discuss changes via issue before submitting a pull request.
+Suggestions and contributions are always welcome! Please discuss larger changes via issue before submitting a pull request.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

119002

increased by25.16%

Dependency count

0

decreased by-100%

Number of package files

58

increased by1060%

Worsened metrics

Dev dependency count

21

increased by5%

Number of low license alerts

1

increased byInfinity%

Lines of code

1010

decreased by-52.67%

Number of lines in readme file

115

decreased by-12.21%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedlodash.throttle@^4.1.1

• - Removedlodash.throttle@4.1.1(transitive)