@hsds/colorway - npm Package Compare versions

Comparing version 7.1.2-beta.0 to 7.2.0

package.json

 {
   "name": "@hsds/colorway",
-  "version": "7.1.2-beta.0",
+  "version": "7.2.0",
   "main": "src/index.js",
@@ -18,17 +18,19 @@ "bin": {
   ],
-  "types": "./src/index.d.ts",
-  "dependencies": {},
-  "peerDependencies": {
-    "@hsds/tokens": "0.0.1-beta.0",
+  "dependencies": {
+    "fast-glob": "3.2.7",
+    "minimist": "1.2.6",
+    "mkdirp": "1.0.4",
+    "nearest-color": "0.4.4",
     "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-is": "17.0.2",
     "styled-components": "5.1.1",
-    "fast-glob": "3.2.7",
-    "minimist": "1.2.6",
-    "mkdirp": "1.0.4",
-    "util": "0.11.1",
-    "lodash.isplainobject": "4.0.6",
+    "util": "0.11.1"
+  },
+  "peerDependencies": {
+    "@hsds/tokens": "0.1.0",
     "tslib": "2.4.1"
-  }
+  },
+  "types": "./src/index.d.ts"
 }

src/configs.js

@@ -18,3 +18,3 @@ // import {colors} from '../../tokens/src/js/colors.tokens';
     'gold',
-    // mapping sementic tokens here
+    // mapping semantic tokens here
     'link',
@@ -21,0 +21,0 @@ 'text',

src/templates/hs-app.js

@@ -5,12 +5,14 @@ const { generate } = require('../generate');
 const { warning } = require('./shared/warning');
-const { generateColorScheme, generateThemeColorScheme, combineColorScheme, } = require('../utils');
-const colorScheme = combineColorScheme([
-    [latest, targets],
-    [previous, ['red', 'purple', 'orange']],
-]);
+const { generateColorScheme, generateThemeColorScheme } = require('../utils');
 const content = `
 ${warning}
 
-${generateColorScheme(colorScheme)}
+$seed-color-scheme-helpscout: (
+  white: #fff,
+  black: #000,
 
+  ${generateColorScheme(latest, targets)}
+  ${generateColorScheme(previous, ['red', 'purple', 'orange'])}
+);
+
 ${generateThemeColorScheme(newBrand, 'newBrand')}
@@ -17,0 +19,0 @@

src/templates/search-autocomplete.js

@@ -5,12 +5,14 @@ const { generate } = require('../generate');
 const { warning } = require('./shared/warning');
-const { generateColorScheme, generateThemeColorScheme, combineColorScheme, } = require('../utils');
-const colorScheme = combineColorScheme([
-    [latest, targets],
-    [previous, ['red', 'purple', 'orange']],
-]);
+const { generateColorScheme, generateThemeColorScheme } = require('../utils');
 const content = `
 ${warning}
 
-${generateColorScheme(colorScheme)}
+$seed-color-scheme-helpscout: (
+  white: #fff,
+  black: #000,
 
+  ${generateColorScheme(latest, targets)}
+  ${generateColorScheme(previous, ['red', 'purple', 'orange'])}
+);
+
 ${generateThemeColorScheme(newBrand, 'newBrand')}
@@ -17,0 +19,0 @@

src/utils.d.ts

@@ -10,9 +10,3 @@ export function inspect(obj: any): void;
 export function prettyLog(...args: any[]): void;
-/**
- * @from https://github.com/rlapoele/json-to-scss/tree/master
- * @author Renaud Lapoële
- */
-export function jsValueToSassString(value: any, indentationText?: string, indentationSize?: number, emptyString?: string, keyFormat?: string, valueFormat?: string, stringKeys?: any[]): any;
-export function combineColorScheme(schemes: any): {};
-export function generateColorScheme(colorScheme: any): any;
+export function generateColorScheme(colorScheme: any, targets: any): string;
 export function generateThemeColorScheme(themeScheme: any, themeName: any): string;

src/utils.js

@@ -5,142 +5,31 @@ const fs = require('fs');
 const util = require('util');
-const isPlainObject = require('lodash.isplainobject');
-const { isArray } = Array;
-const FN_DEFAULT_INDENTATION_TEXT = '  ';
-const FN_DEFAULT_INDENTATION_SIZE = 1;
-const FN_DEFAULT_EMPTY_STRING = '""';
-const FN_FORMAT_AUTO = 'auto';
-const FN_DEFAULT_KEY_FORMAT = FN_FORMAT_AUTO;
-const FN_DEFAULT_VALUE_FORMAT = FN_FORMAT_AUTO;
-const FN_DEFAULT_STRING_KEYS = [];
-const FN_FORMAT_SINGLE_QUOTED = 'sq';
-function isNull(value) {
-    return value === null;
-}
-function isUndefined(value) {
-    return typeof value === 'undefined';
-}
-/**
- * @from https://github.com/rlapoele/json-to-scss/tree/master
- * @author Renaud Lapoële
- */
-function jsValueToSassString(value, indentationText = FN_DEFAULT_INDENTATION_TEXT, indentationSize = FN_DEFAULT_INDENTATION_SIZE, emptyString = FN_DEFAULT_EMPTY_STRING, keyFormat = FN_DEFAULT_KEY_FORMAT, valueFormat = FN_DEFAULT_VALUE_FORMAT, stringKeys = FN_DEFAULT_STRING_KEYS) {
-    function _formatString(string, format) {
-        if ('string' !== typeof string) {
-            return string;
+const generateColorScheme = (colorScheme, targets) => {
+    let output = '';
+    Object.entries(colorScheme).forEach(([key, shades]) => {
+        if (targets.includes(key)) {
+            output += `
+        ${key}: (
+          ${JSON.stringify(shades, null, 2).replace(/{|}|"/g, '')}
+        ),
+      `;
         }
-        if (!string) {
-            return format === FN_FORMAT_AUTO
-                ? emptyString
-                : format === FN_FORMAT_SINGLE_QUOTED
-                    ? "''"
-                    : '""';
-        }
-        else {
-            let sqRegExp = /'/g;
-            let dqRegExp = /"/g;
-            let _sqString = string.replace(sqRegExp, '"');
-            let _dqString = string.replace(dqRegExp, "'");
-            return format === FN_FORMAT_AUTO
-                ? string
-                : format === FN_FORMAT_SINGLE_QUOTED
-                    ? `'${_sqString}'`
-                    : `"${_dqString}"`;
-        }
-    }
-    function _quoteIfStringKey(propertyName, value, quoteFormat) {
-        if ('' !== propertyName) {
-            if (stringKeys.includes(propertyName.toUpperCase())) {
-                return quoteFormat === FN_FORMAT_SINGLE_QUOTED
-                    ? `'${value}'`
-                    : `"${value}"`;
-            }
-        }
-        return value;
-    }
-    // computed flag.
-    const mustIndent = '' !== indentationText && 0 !== indentationSize;
-    function _process(propertyName, value, indentationLevel) {
-        const _switch = {
-            boolean: () => _formatString(value.toString(), valueFormat),
-            number: () => _formatString(value.toString(), valueFormat),
-            string: () => _formatString(value, valueFormat),
-            object: () => {
-                if (isPlainObject(value)) {
-                    let _jsObj = value;
-                    let _sassKeyValPairs = Object.keys(_jsObj).reduce((result, key) => {
-                        let _jsVal = _jsObj[key];
-                        let _propName = isPlainObject(_jsVal) ? '' : key;
-                        let _sassVal = _process(_propName, _jsVal, indentationLevel + 1);
-                        if (!isUndefined(_sassVal)) {
-                            result.push(`${_formatString(key, keyFormat)}: ${_quoteIfStringKey(_propName, _sassVal, valueFormat)}`);
-                        }
-                        return result;
-                    }, []);
-                    let _result = '';
-                    if (mustIndent) {
-                        let _indentIn = indentationText.repeat(indentationSize * (indentationLevel + 1));
-                        let _indentOut = indentationText.repeat(indentationSize * indentationLevel);
-                        if (indentationLevel === 0) {
-                            _result = `\n${_indentIn + _sassKeyValPairs.join(`,\n${_indentIn}`)}\n${_indentOut}`;
-                        }
-                        else {
-                            _result = `(\n${_indentIn + _sassKeyValPairs.join(`,\n${_indentIn}`)}\n${_indentOut})`;
-                        }
-                    }
-                    else {
-                        _result = `(${_sassKeyValPairs.join(', ')})`;
-                    }
-                    if (indentationLevel === 0) {
-                        _result = `\n${_result};\n`;
-                    }
-                    return _result;
-                }
-                else if (isArray(value)) {
-                    let _sassVals = value.reduce((result, v) => {
-                        if (!isUndefined(v))
-                            result.push(_process('', v, indentationLevel));
-                        return result;
-                    }, []);
-                    return `(${_sassVals.join(', ')})`;
-                }
-                else if (isNull(value)) {
-                    return 'null';
-                }
-                return _formatString(value.toString(), valueFormat);
-            },
-            default: () => { },
-        };
-        return (_switch[typeof value] || _switch['default'])();
-    }
-    return _process('', value, 0);
-}
-const combineColorScheme = schemes => {
-    const output = {};
-    schemes.forEach(scheme => {
-        const [colorScheme, targets] = scheme;
-        Object.entries(colorScheme).forEach(([key, shades]) => {
-            if (targets.includes(key)) {
-                output[key] = shades;
-            }
-        });
     });
     return output;
 };
-const generateColorScheme = colorScheme => {
-    let output = '';
-    const data = {
-        '$seed-color-scheme-helpscout': Object.assign({ white: '#fff', black: '#000' }, colorScheme),
-    };
-    return jsValueToSassString(data);
-};
 const generateThemeColorScheme = (themeScheme, themeName) => {
-    const data = {
-        '$seed-color-scheme-helpscout': Object.assign({ white: '#fff', black: '#000' }, themeScheme),
-    };
     let output = `
-@if $HELPSCOUT_THEME == '${themeName}' {
-    `;
-    output += jsValueToSassString(data);
+  @if $HELPSCOUT_THEME == '${themeName}' {
+    $seed-color-scheme-helpscout: (
+      white: #fff,
+      black: #000,
+  `;
+    Object.entries(themeScheme).forEach(([key, shades]) => {
+        output += `
+        ${key}: (
+          ${JSON.stringify(shades, null, 2).replace(/{|}|"/g, '')}
+        ),
+      `;
+    });
     output += `
-
+    );
   }
@@ -150,3 +39,2 @@ `;
 };
-exports.jsValueToSassString = jsValueToSassString;
 exports.inspect = obj => {
@@ -157,3 +45,2 @@ console.log(util.inspect(obj, false, null, true));
 exports.there = dest => path.resolve(process.cwd(), dest);
-exports.combineColorScheme = combineColorScheme;
 exports.readFile = dest => fs.readFileSync(exports.here(dest), 'utf8');
@@ -160,0 +47,0 @@ exports.prepareWrite = dest => {

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

41008

decreased by-18.87%

Dependency count

12

increased by9.09%

Lines of code

639

decreased by-15.48%

Dependency changes

• + Addedfast-glob@3.2.7

• + Addedminimist@1.2.6

• + Addedmkdirp@1.0.4

• + Addednearest-color@0.4.4

• + Addedprop-types@15.7.2

• + Addedreact@17.0.2

• + Addedreact-dom@17.0.2

• + Addedreact-is@17.0.2

• + Addedstyled-components@5.1.1

• + Addedutil@0.11.1

• + Added@hsds/tokens@0.1.0(transitive)

• + Addednearest-color@0.4.4(transitive)

• + Addedreact-is@17.0.2(transitive)

• - Removed@hsds/tokens@0.0.1-beta.0(transitive)

• - Removedlodash.isplainobject@4.0.6(transitive)