eslint-plugin-uilib - npm Package Compare versions

Comparing version 1.0.19 to 1.0.24

index.js

@@ -7,8 +7,11 @@ module.exports = {
     'assets-deprecation': require('./lib/rules/assets-deprecation'),
+    'typography-deprecation': require('./lib/rules/typography-deprecation'),
     // for duplicate rules usage
     'component-deprecation_warn': require('./lib/rules/component-deprecation'),
     'assets-deprecation_warn': require('./lib/rules/assets-deprecation'),
+    'typography-deprecation_warn': require('./lib/rules/typography-deprecation'),
     'component-deprecation_error': require('./lib/rules/component-deprecation'),
     'assets-deprecation_error': require('./lib/rules/assets-deprecation'),
+    'typography-deprecation_error': require('./lib/rules/typography-deprecation'),
   },
 };

lib/utils.js

@@ -0,1 +1,3 @@
+const _ = require('lodash');
+
 // no-hard-coded-color
@@ -60,2 +62,22 @@ const colorProps = [
 
+function getLocalImportSpecifier(node, source, defaultImportName) {
+  let localImportSpecifier;
+  const importSource = node.source.value;
+  if (source === importSource) {
+    const specifiers = node.specifiers;
+    if (specifiers) {
+      localImportSpecifier = _.find(specifiers, specifier => specifier.imported && specifier.imported.name === defaultImportName);
+      if (localImportSpecifier) {
+        localImportSpecifier = localImportSpecifier.local.name;
+      }
+    }
+
+    if (!localImportSpecifier) { // someone is importing everything (*)
+      localImportSpecifier = defaultImportName;
+    }
+  }
+
+  return localImportSpecifier;
+}
+
 module.exports = {
@@ -68,2 +90,3 @@ isPropFont,
   findValueNodeOfIdentifier,
+  getLocalImportSpecifier,
 };

package.json

 {
   "name": "eslint-plugin-uilib",
-  "version": "1.0.19",
+  "version": "1.0.24",
   "description": "uilib set of eslint rules",
@@ -17,3 +17,3 @@ "keywords": [
     "type": "git",
-    "url": "https://github.com/wix/react-native-ui-lib"
+    "url": "https://github.com/wix/react-native-ui-lib/blob/master/eslint-rules/README.md"
   },
@@ -32,3 +32,3 @@ "main": "index.js",
     "babel-eslint": "^7.0.0",
-    "babel-jest": "^20.0.3",
+    "babel-jest": "^25.5.1",
     "babel-preset-es2015": "^6.22.0",
@@ -43,3 +43,3 @@ "babel-preset-react": "^6.22.0",
     "eslint-plugin-standard": "^3.0.1",
-    "mocha": "^3.1.2"
+    "mocha": "7.1.2"
   },
@@ -46,0 +46,0 @@ "engines": {

README.md

@@ -46,7 +46,61 @@ # eslint-plugin-uilib
 
-* Fill in provided rules here
+#### uilib/no-hard-coded-color
+```js
+// Your app valid colors 
+const validColors = {
+  blue: '#459FED',
+  red: '#F2564D',
+  green: '#00CD8B',
+  yellow: '#FFB600',
+}
 
+// Lint will catch all hard coded color values in the code and replace with valid colors if exist
+// `#459FED` will turn to `Colors.blue`
+{
+    "rules": {
+        "uilib/no-hard-coded-color": ['error', {validColors}]
+    }
+}
+```
 
+### uilib/component-deprecation_warn, uilib/component-deprecation_error
+```js
 
+// deprecation message to warn you consumers about
+const deprecationWarnings = [
+  {
+      "component": "ActivityIndicator",
+      "source": "react-native",
+      "message": "Please avoid using react-native ActivityIndicator, use the 'Loader' component instead"
+   },
+   {
+      "component": "OldComponent",
+      "source": "react-native-ui-lib",
+      "message": "Please use the 'NewComponent' instead. Auto fix available.",
+      "fix": { "componentName": "NewComponent" }
+    },
+];
 
+const deprecationErrors = [
+  {
+      "component": "Button", /// The component 
+      "source": "react-native-ui-lib", // The source you import the component from
+      "message": "",
+      "props": [
+        {
+          "prop": "title", // the prop to depreciate
+          "message": "Please use `label` prop instead of `title` prop", // custom message to the user
+          "fix": { "propName": "label" } // provice auto fix
+        }
+      ]
+    },
+];
 
+// Two phases: warn & error to allow phasing your migration process
+{
+    "rules": {
+      'uilib/component-deprecation_warn': ['warn', {deprecations: deprecationWarnings, dueDate: 'Thursday 31 January'}],
+      'uilib/component-deprecation_error': ['error', {deprecations: deprecationErrors , dueDate: 'Thursday 31 January' 
+    }
+}
+```

tests/component_deprecation.json

@@ -9,3 +9,3 @@ [
         "prop": "url",
-        "message": "Please use the 'imageSource' prop instead."
+        "message": "Please use the 'source' prop instead."
       }
@@ -12,0 +12,0 @@ ]

tests/lib/rules/component-deprecation.js

@@ -13,3 +13,3 @@ const RuleTester = require('eslint').RuleTester;
 const ruleOptions = [{deprecations: deprecationsJson}];
-const validExample = "const test = <Avatar imageSource={{uri: 'some_uri_string'}}/>";
+const validExample = "const test = <Avatar source={{uri: 'some_uri_string'}}/>";
 const validImportExample = "import {Avatar} from 'another-module'; const test = <Avatar url={'some_uri_string'}/>";
@@ -34,3 +34,3 @@ const invalidExample = "import {Avatar} from 'module-with-deprecations'; const test = <Avatar url={'some_uri_string'}/>";
       code: invalidExample,
-      errors: [{message: "The 'Avatar' component's prop 'url' is deprecated. Please use the 'imageSource' prop instead."}],
+      errors: [{message: "The 'Avatar' component's prop 'url' is deprecated. Please use the 'source' prop instead."}],
     },
@@ -43,3 +43,3 @@ {
           message:
-            "The 'Avatar' component's prop 'url' is deprecated. Please use the 'imageSource' prop instead. Please fix this issue by 10/11/18!", // eslint-disable-line
+            "The 'Avatar' component's prop 'url' is deprecated. Please use the 'source' prop instead. Please fix this issue by 10/11/18!", // eslint-disable-line
         },
@@ -70,3 +70,3 @@ ],
       code:
-        'import {Button} from \'module-with-deprecations\'; const props = {text: "button", color: "red"}; <Button {...props} value="value"/>', // eslint-disable-line 
+        'import {Button} from \'module-with-deprecations\'; const props = {text: "button", color: "red"}; <Button {...props} value="value"/>', // eslint-disable-line
       errors: [{message: "The 'Button' component's prop 'text' is deprecated. Please use the 'label' prop instead."}],
@@ -73,0 +73,0 @@ },

tests/lib/rules/no-hard-coded-color.js

@@ -1,3 +0,16 @@
-const Colors = require('../../../../src/style/colorsPalette').colorsPalette;
-const extraFixColorsMap = require('../../../../src/style/colorsPalette').extraFixColorsMap;
+const Colors = {
+  dark10: '#20303C',
+  dark20: '#43515C',
+  dark30: '#66737C',
+  white: '#ffffff',
+  black: '#000000'
+};
+
+const extraFixColorsMap = {
+  black: 'black',
+  white: 'white',
+  '#000': 'black',
+  '#fff': 'white'
+};
+
 const rule = require('../../../lib/rules/no-hard-coded-color');
@@ -8,3 +21,3 @@ const RuleTester = require('eslint').RuleTester;
   parser: 'babel-eslint',
-  parserOptions: { ecmaVersion: 6, ecmaFeatures: { jsx: true } },
+  parserOptions: {ecmaVersion: 6, ecmaFeatures: {jsx: true}}
 });
@@ -29,4 +42,7 @@ const ruleOptions = [{validColors: Colors, customColors: extraFixColorsMap}];
 
-const invalidConditionalExpression = `const test = <Text style = {{ color: true ? '${Colors.dark10}' : '${Colors.dark20}'}}> </Text>;`;
-const validConditionalExpression = 'const test = <Text style = {{ color: true ? Colors.dark10 : Colors.dark20}}> </Text>;';
+const invalidConditionalExpression = `const test = <Text style = {{ color: true ? '${Colors.dark10}' : '${
+  Colors.dark20
+}'}}> </Text>;`;
+const validConditionalExpression =
+  'const test = <Text style = {{ color: true ? Colors.dark10 : Colors.dark20}}> </Text>;';
 
@@ -45,4 +61,4 @@ const invalidIdentifierExample = `
   valid: [
-    { code: 'const goodUsage = <Text style={{color: Constants.dark10}}/>;' },
-    { code: 'const goodUsage = <View style={{backgroundColor: Constants.blue20}}/>;' },
+    {code: 'const goodUsage = <Text style={{color: Constants.dark10}}/>;'},
+    {code: 'const goodUsage = <View style={{backgroundColor: Constants.blue20}}/>;'}
   ],
@@ -54,5 +70,3 @@ invalid: [
       output: validStyleSheetExample,
-      errors: [
-        { message: "Found '#66737C'. Use UILib colors instead of hardcoded colors." },
-      ],
+      errors: [{message: 'Found \'#66737C\'. Use UILib colors instead of hardcoded colors.'}]
     },
@@ -64,5 +78,5 @@ {
       errors: [
-        { message: "Found '#20303C'. Use UILib colors instead of hardcoded colors." },
-        { message: "Found '#43515C'. Use UILib colors instead of hardcoded colors." },
-      ],
+        {message: 'Found \'#20303C\'. Use UILib colors instead of hardcoded colors.'},
+        {message: 'Found \'#43515C\'. Use UILib colors instead of hardcoded colors.'}
+      ]
     },
@@ -74,5 +88,5 @@ {
       errors: [
-        { message: "Found '#20303C'. Use UILib colors instead of hardcoded colors." },
-        { message: "Found '#43515C'. Use UILib colors instead of hardcoded colors." },
-      ],
+        {message: 'Found \'#20303C\'. Use UILib colors instead of hardcoded colors.'},
+        {message: 'Found \'#43515C\'. Use UILib colors instead of hardcoded colors.'}
+      ]
     },
@@ -83,5 +97,3 @@ {
       output: 'const badUsage = <Text style = {{ color: Colors.dark10}}> </Text>;',
-      errors: [
-        { message: "Found '#20303C'. Use UILib colors instead of hardcoded colors." },
-      ],
+      errors: [{message: 'Found \'#20303C\'. Use UILib colors instead of hardcoded colors.'}]
     },
@@ -91,5 +103,3 @@ {
       code: 'const badUsage = <Text style={{color: \'#123456\'}}/>;',
-      errors: [
-        { message: "Found '#123456'. Use UILib colors instead of hardcoded colors." },
-      ],
+      errors: [{message: 'Found \'#123456\'. Use UILib colors instead of hardcoded colors.'}]
     },
@@ -100,5 +110,3 @@ {
       output: 'const badUsage = <Text style = {{ color: Colors.dark10}}> </Text>;',
-      errors: [
-        { message: "Found '#20303c'. Use UILib colors instead of hardcoded colors." },
-      ],
+      errors: [{message: 'Found \'#20303c\'. Use UILib colors instead of hardcoded colors.'}]
     },
@@ -109,5 +117,3 @@ {
       output: 'const badUsage = <Text style = {{ color: Colors.white}}> </Text>;',
-      errors: [
-        { message: "Found '#fff'. Use UILib colors instead of hardcoded colors." },
-      ],
+      errors: [{message: 'Found \'#fff\'. Use UILib colors instead of hardcoded colors.'}]
     },
@@ -119,6 +125,9 @@ {
       errors: [
-        { message: "Found '#ffffff'. Use UILib colors instead of hardcoded colors. Please fix this issue by Thursday, 12 August!" },
-      ],
-    },
-  ],
+        {
+          message:
+            'Found \'#ffffff\'. Use UILib colors instead of hardcoded colors. Please fix this issue by Thursday, 12 August!'
+        }
+      ]
+    }
+  ]
 });

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

50880

increased by52.66%

Number of package files

21

increased by16.67%

Lines of code

1417

increased by57.27%

Number of lines in readme file

106

increased by103.85%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes