Skip to content
This repository has been archived by the owner on Mar 2, 2022. It is now read-only.

Commit

Permalink
Patch Release v1.0.3 (#10)
Browse files Browse the repository at this point in the history
* add tests, remove unused functions (#9)

* add tests, remove unused exported functions

* remove blocking code for non-null assertions

* fix testing error

* adjust package manifest, oops.

* bump version

* remove non-null assertion warning

* remove commented out code

* Update README (#11)

* update README

* update README

* update README

* update README
  • Loading branch information
pqt authored Mar 17, 2020
1 parent f3b3d63 commit 107a32b
Show file tree
Hide file tree
Showing 12 changed files with 4,178 additions and 162 deletions.
8 changes: 8 additions & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# Ignore everything:
/*

# Except the source files
!/src

# Exclude tests folder
src/__tests__
31 changes: 31 additions & 0 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"plugins": ["@typescript-eslint/eslint-plugin"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"prettier",
"prettier/@typescript-eslint"
],
"rules": {
/**
0 = off
1 = warn
2 = error
*/
"@typescript-eslint/explicit-function-return-type": "off"
},
"overrides": [
{
"files": ["./src/index.ts"],
"rules": {
"@typescript-eslint/no-non-null-assertion": "off"
}
}
]
}
20 changes: 4 additions & 16 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ on: push

jobs:
npm:
name: "Publish"
name: Publish to NPM
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- uses: actions/setup-node@master
with:
node-version: 12
node-version: "12.x"

- name: install
run: npm install
Expand All @@ -26,21 +26,9 @@ jobs:
- name: build
run: npm run build

# - name: prepublish
# run: scripts/prepublish

- name: publish (npm)
uses: primer/publish@master
uses: primer/publish@v2.0.0
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

- uses: actions/setup-node@master
with:
node-version: 12
registry-url: "https://npm.pkg.github.com"

- name: publish (gpr)
run: npm publish
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
args: "--dry-run -- --unsafe-perm"
15 changes: 4 additions & 11 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
# Dependancies
node_modules/

# Log Files
*.log
# Build Files
build

# Git Ignore Specific
# Dot Files
.DS_Store

# Built Files
dist/
# Dependancies
node_modules
28 changes: 21 additions & 7 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -1,15 +1,29 @@
# GitHub Configuration Files
.github

# Testing Files
__tests__
*.test.*

# Dependancies
node_modules/
node_modules

# Source Files
src

# Log Files
*.log

# NPM Ignore Specific
# Source Files
src/

# Compiler Config
tsconfig.json
# Lock Files
*.lock
package-lock.json

# Dotfiles
.*

# Configurations
tsconfig.json
tsconfig.tsbuildinfo

# Results of `npm pack`
*.tgz
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2019 Austin Paquette
Copyright (c) 2020 Austin Paquette

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
72 changes: 21 additions & 51 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,30 +1,36 @@
<h1 align="center">
Foreground
foreground
</h1>

<h3 align="center">
🎨 📦 💄
Determine whether a given background color will need a light or dark foreground
</h3>
<p align="center">
Validate a hexadecimal value, Convert hexadecimal to HSL, determine if the colour needs a light or dark foreground.
</p>

<p align="center">
<a href="https://github.com/pqt/foreground/actions?workflow=status">
<img src="https://github.com/pqt/foreground/workflows/status/badge.svg" alt="Current Github Action build status." />
</a>
<a href="https://www.npmjs.org/package/@pqt/foreground">
<img src="https://img.shields.io/npm/v/@pqt/foreground.svg" alt="Current npm package version." />
</a>
<a href="https://github.com/pqt/foreground/blob/master/LICENSE">
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="@pqt/foreground is released under the MIT license." />
<img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Released under the MIT license." />
</a>
<a href="https://github.com/pqt/foreground/actions?workflow=status">
<img src="https://github.com/pqt/foreground/workflows/status/badge.svg" alt="Current Github Action build status." />
</a>
<a href="https://npmcharts.com/compare/@pqt/foreground?minimal=true">
<img src="https://img.shields.io/npm/dm/@pqt/foreground.svg" alt="Downloads per month on npm." />
</a>
<a href="https://npmcharts.com/compare/@pqt/foreground?minimal=true">
<img src="https://img.shields.io/npm/dt/@pqt/foreground.svg" alt="Total downloads on npm." />
</a>
<a href="https://twitter.com/intent/follow?screen_name=pqtdev">
<img src="https://img.shields.io/twitter/follow/pqtdev.svg?label=Follow%20@pqtdev" alt="Follow @pqtdev" />
</a>
</p>

## Getting Started
## Installation

```bash
npm i @pqt/foreground --save
```
npm install @pqt/foreground
# OR
yarn add @pqt/foreground
```
Expand All @@ -34,47 +40,11 @@ yarn add @pqt/foreground
```js
import { foreground } from "@pqt/foreground";

// could be "fff" | "#fff" | "ffffff" | "#ffffff"
const backgroundColor = "#fff";

// value becomes: { color: "000000", type: "dark" }
const foregroundColor = foreground(backgroundColor);
foreground("fff"); // => returns "dark"
foreground("000"); // => returns "light"
foreground("005cc5"); // => returns "light"
```

## Functions

| function | parameter: type | returns |
| ----------------------- | -------------------------------- | --------------- |
| removeHash | color: string | string |
| expandHexadecimal | color: string | string |
| parseHexadecimal | color: string | RegExpExecArray |
| isValidHexadecimal | color: string | boolean |
| convertHexadecimalToHSL | color: string | number[] |
| foreground | color: string, threshold: number | object |

## Parameters Insight

The `color` parameter should be a valid hexidecimal code, either with or without the hash. All functions remove the hash immediately and any hexidecimal values returned will be without it. So be conscious of that.

The `threshold` parameter in the `foreground` function starts at 75. This is the "lightness" of the passed color (in HSL format). If the lightness of the color is **greater than** the threshold, a dark color suggestion will be made. If the lightness is **equal to or less than** the allowed threshold a light color suggestion will be returned instead.

## Validations and Errors

When using any of the functions, the hexidecimal value is validated and stripped of the hash (#). The validation process accepts most accepted forms for a color hex code. This includes both shorthand and full length.

Validation is **case-insensitive**.

**Validation Passing Formats**

```
fff
#fff
ffffff
#ffffff
```

Validation of new-era hexidecimal is not _yet_ supported or on the roadmap since it is very seldom used. If you'd like to see it though feel free to post an issue and I'll revisit this opinion there.

## License

MIT
64 changes: 46 additions & 18 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,25 +1,53 @@
{
"name": "@pqt/foreground",
"version": "1.0.2",
"description": "Validate a hexadecimal value, Convert hexadecimal to HSL, determine if the colour needs a light or dark foreground. ",
"main": "dist/index.js",
"repository": {
"type": "git",
"url": "ssh://[email protected]/pqt/foreground.git"
},
"version": "1.0.3",
"description": "Determine whether a given background color will need a light or dark foreground",
"author": "Austin Paquette <[email protected]>",
"license": "MIT",
"private": false,
"keywords": [],
"main": "build/index.js",
"types": "build/index.d.ts",
"scripts": {
"build": "tsc",
"commit": "npx git-cz",
"cz": "npm run commit",
"dev": "tsc -w",
"format": "echo \"Add prettier format! -> @pqt/foreground\"",
"lint": "echo \"Add linter! -> @pqt/foreground\"",
"test": "echo \"Write tests! -> @pqt/foreground\""
"build": "rimraf build && tsc",
"dev": "rimraf build && tsc --watch",
"format": "prettier ./{src,__{tests,mocks}__}/{**,**/**}/*.{js,jsx,ts,tsx} --write",
"lint": "eslint src --ext=\".js,.jsx,.ts,.tsx\"",
"test": "jest"
},
"devDependencies": {
"typescript": "^3.6.4"
}
"@types/jest": "^25.1.4",
"@typescript-eslint/eslint-plugin": "^2.23.0",
"@typescript-eslint/parser": "^2.23.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"jest": "^25.1.0",
"prettier": "^1.19.1",
"rimraf": "^3.0.2",
"ts-jest": "^25.2.1",
"typescript": "^3.8.3"
},
"repository": {
"type": "git",
"url": "https://github.com/pqt/foreground"
},
"bugs": {
"url": "https://github.com/pqt/foreground/issues"
},
"husky": {
"hooks": {
"pre-push": "npm run format && npm run lint && npm run test"
}
},
"jest": {
"roots": [
"<rootDir>/src"
],
"testMatch": [
"**/__tests__/**/*.+(ts|tsx|js)",
"**/?(*.)+(spec|test).+(ts|tsx|js)"
],
"transform": {
"^.+\\.(ts|tsx)$": "ts-jest"
}
},
"license": "MIT"
}
Loading

0 comments on commit 107a32b

Please sign in to comment.