gisikw/storybook-addon-superficial

View on GitHub

Showing 34 of 34 total issues

Similar blocks of code found in 2 locations. Consider refactoring.
Open

LookSection.propTypes = {
  rules: React.PropTypes.object.isRequired,
  onChange: React.PropTypes.func.isRequired,
  title: React.PropTypes.string,
  width: React.PropTypes.number,
Severity: Major
Found in src/components/LookSection.js and 1 other location - About 3 hrs to fix
src/components/LookRule.js on lines 82..89

Duplicated Code

Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

Tuning

This issue has a mass of 98.

We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

Refactorings

Further Reading

Similar blocks of code found in 2 locations. Consider refactoring.
Open

LookRule.propTypes = {
  prop: React.PropTypes.string.isRequired,
  onChange: React.PropTypes.func.isRequired,
  value: React.PropTypes.any,
  width: React.PropTypes.number,
Severity: Major
Found in src/components/LookRule.js and 1 other location - About 3 hrs to fix
src/components/LookSection.js on lines 57..64

Duplicated Code

Duplicated code can lead to software that is hard to understand and difficult to change. The Don't Repeat Yourself (DRY) principle states:

Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.

When you violate DRY, bugs and maintenance problems are sure to follow. Duplicated code has a tendency to both continue to replicate and also to diverge (leaving bugs as two similar implementations differ in subtle ways).

Tuning

This issue has a mass of 98.

We set useful threshold defaults for the languages we support but you may want to adjust these settings based on your project guidelines.

The threshold configuration represents the minimum mass a code block must have to be analyzed for duplication. The lower the threshold, the more fine-grained the comparison.

If the engine is too easily reporting duplication, try raising the threshold. If you suspect that the engine isn't catching enough duplication, try lowering the threshold. The best setting tends to differ from language to language.

See codeclimate-duplication's documentation for more information about tuning the mass threshold in your .codeclimate.yml.

Refactorings

Further Reading

Function LookTable has 42 lines of code (exceeds 25 allowed). Consider refactoring.
Open

function LookTable(props, looks) {
  const {
    min, max, width, onResize, onReset, onLookChange, rules, override,
  } = props;
  return (
Severity: Minor
Found in src/components/LookTable.js - About 1 hr to fix

    propType "max" is not required, but has no corresponding defaultProp declaration.
    Open

      max: numOrString,
    Severity: Minor
    Found in src/components/Breakpoint.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "max" is not required, but has no corresponding defaultProp declaration.
    Open

      max: React.PropTypes.number,
    Severity: Minor
    Found in src/components/LookSection.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "prop" is not required, but has no corresponding defaultProp declaration.
    Open

      prop: React.PropTypes.string,
    Severity: Minor
    Found in src/components/LookBar.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "max" is not required, but has no corresponding defaultProp declaration.
    Open

      max: React.PropTypes.number,
    Severity: Minor
    Found in src/components/Looks.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "max" is not required, but has no corresponding defaultProp declaration.
    Open

      max: React.PropTypes.number,
    Severity: Minor
    Found in src/components/LookBar.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "width" is not required, but has no corresponding defaultProp declaration.
    Open

      width: React.PropTypes.number,
    Severity: Minor
    Found in src/components/LookRule.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "width" is not required, but has no corresponding defaultProp declaration.
    Open

      width: React.PropTypes.number,
    Severity: Minor
    Found in src/components/Looks.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "value" is not required, but has no corresponding defaultProp declaration.
    Open

      value: numOrString,
    Severity: Minor
    Found in src/components/StyledRangeSlider.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "override" is not required, but has no corresponding defaultProp declaration.
    Open

      override: React.PropTypes.object,
    Severity: Minor
    Found in src/components/LookTable.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "min" is not required, but has no corresponding defaultProp declaration.
    Open

      min: React.PropTypes.number,
    Severity: Minor
    Found in src/components/LookTable.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "min" is not required, but has no corresponding defaultProp declaration.
    Open

      min: numOrString,
    Severity: Minor
    Found in src/components/StyledRangeSlider.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "min" is not required, but has no corresponding defaultProp declaration.
    Open

      min: React.PropTypes.number,
    Severity: Minor
    Found in src/components/Looks.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    'width' is missing in props validation
    Open

              Box Width: { this.props.width }
    Severity: Minor
    Found in example/components/TransformBox.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "width" is not required, but has no corresponding defaultProp declaration.
    Open

      width: React.PropTypes.number,
    Severity: Minor
    Found in src/components/LookBar.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    propType "width" is not required, but has no corresponding defaultProp declaration.
    Open

      width: React.PropTypes.number,
    Severity: Minor
    Found in src/components/LookTable.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    'superficial' is defined but never used.
    Open

    import superficial from 'superficial';
    Severity: Minor
    Found in example/stories/index.js by eslint

    Disallow Unused Variables (no-unused-vars)

    Variables that are declared and not used anywhere in the code are most likely an error due to incomplete refactoring. Such variables take up space in the code and can lead to confusion by readers.

    Rule Details

    This rule is aimed at eliminating unused variables, functions, and parameters of functions.

    A variable is considered to be used if any of the following are true:

    • It represents a function that is called (doSomething())
    • It is read (var y = x)
    • It is passed into a function as an argument (doSomething(x))
    • It is read inside of a function that is passed to another function (doSomething(function() { foo(); }))

    A variable is not considered to be used if it is only ever assigned to (var x = 5) or declared.

    Examples of incorrect code for this rule:

    /*eslint no-unused-vars: "error"*/
    /*global some_unused_var*/
    
    // It checks variables you have defined as global
    some_unused_var = 42;
    
    var x;
    
    // Write-only variables are not considered as used.
    var y = 10;
    y = 5;
    
    // A read for a modification of itself is not considered as used.
    var z = 0;
    z = z + 1;
    
    // By default, unused arguments cause warnings.
    (function(foo) {
        return 5;
    })();
    
    // Unused recursive functions also cause warnings.
    function fact(n) {
        if (n < 2) return 1;
        return n * fact(n - 1);
    }
    
    // When a function definition destructures an array, unused entries from the array also cause warnings.
    function getY([x, y]) {
        return y;
    }

    Examples of correct code for this rule:

    /*eslint no-unused-vars: "error"*/
    
    var x = 10;
    alert(x);
    
    // foo is considered used here
    myFunc(function foo() {
        // ...
    }.bind(this));
    
    (function(foo) {
        return foo;
    })();
    
    var myFunc;
    myFunc = setTimeout(function() {
        // myFunc is considered used
        myFunc();
    }, 50);
    
    // Only the second argument from the descructured array is used.
    function getY([, y]) {
        return y;
    }

    exported

    In environments outside of CommonJS or ECMAScript modules, you may use var to create a global variable that may be used by other scripts. You can use the /* exported variableName */ comment block to indicate that this variable is being exported and therefore should not be considered unused.

    Note that /* exported */ has no effect for any of the following:

    • when the environment is node or commonjs
    • when parserOptions.sourceType is module
    • when ecmaFeatures.globalReturn is true

    The line comment // exported variableName will not work as exported is not line-specific.

    Examples of correct code for /* exported variableName */ operation:

    /* exported global_var */
    
    var global_var = 42;

    Options

    This rule takes one argument which can be a string or an object. The string settings are the same as those of the vars property (explained below).

    By default this rule is enabled with all option for variables and after-used for arguments.

    {
        "rules": {
            "no-unused-vars": ["error", { "vars": "all", "args": "after-used", "ignoreRestSiblings": false }]
        }
    }

    vars

    The vars option has two settings:

    • all checks all variables for usage, including those in the global scope. This is the default setting.
    • local checks only that locally-declared variables are used but will allow global variables to be unused.

    vars: local

    Examples of correct code for the { "vars": "local" } option:

    /*eslint no-unused-vars: ["error", { "vars": "local" }]*/
    /*global some_unused_var */
    
    some_unused_var = 42;

    varsIgnorePattern

    The varsIgnorePattern option specifies exceptions not to check for usage: variables whose names match a regexp pattern. For example, variables whose names contain ignored or Ignored.

    Examples of correct code for the { "varsIgnorePattern": "[iI]gnored" } option:

    /*eslint no-unused-vars: ["error", { "varsIgnorePattern": "[iI]gnored" }]*/
    
    var firstVarIgnored = 1;
    var secondVar = 2;
    console.log(secondVar);

    args

    The args option has three settings:

    • after-used - only the last argument must be used. This allows you, for instance, to have two named parameters to a function and as long as you use the second argument, ESLint will not warn you about the first. This is the default setting.
    • all - all named arguments must be used.
    • none - do not check arguments.

    args: after-used

    Examples of incorrect code for the default { "args": "after-used" } option:

    /*eslint no-unused-vars: ["error", { "args": "after-used" }]*/
    
    // 1 error
    // "baz" is defined but never used
    (function(foo, bar, baz) {
        return bar;
    })();

    Examples of correct code for the default { "args": "after-used" } option:

    /*eslint no-unused-vars: ["error", {"args": "after-used"}]*/
    
    (function(foo, bar, baz) {
        return baz;
    })();

    args: all

    Examples of incorrect code for the { "args": "all" } option:

    /*eslint no-unused-vars: ["error", { "args": "all" }]*/
    
    // 2 errors
    // "foo" is defined but never used
    // "baz" is defined but never used
    (function(foo, bar, baz) {
        return bar;
    })();

    args: none

    Examples of correct code for the { "args": "none" } option:

    /*eslint no-unused-vars: ["error", { "args": "none" }]*/
    
    (function(foo, bar, baz) {
        return bar;
    })();

    ignoreRestSiblings

    The ignoreRestSiblings option is a boolean (default: false). Using a Rest Property it is possible to "omit" properties from an object, but by default the sibling properties are marked as "unused". With this option enabled the rest property's siblings are ignored.

    Examples of correct code for the { "ignoreRestSiblings": true } option:

    /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
    // 'type' is ignored because it has a rest property sibling.
    var { type, ...coords } = data;

    argsIgnorePattern

    The argsIgnorePattern option specifies exceptions not to check for usage: arguments whose names match a regexp pattern. For example, variables whose names begin with an underscore.

    Examples of correct code for the { "argsIgnorePattern": "^_" } option:

    /*eslint no-unused-vars: ["error", { "argsIgnorePattern": "^_" }]*/
    
    function foo(x, _y) {
        return x + 1;
    }
    foo();

    caughtErrors

    The caughtErrors option is used for catch block arguments validation.

    It has two settings:

    • none - do not check error objects. This is the default setting.
    • all - all named arguments must be used.

    caughtErrors: none

    Not specifying this rule is equivalent of assigning it to none.

    Examples of correct code for the { "caughtErrors": "none" } option:

    /*eslint no-unused-vars: ["error", { "caughtErrors": "none" }]*/
    
    try {
        //...
    } catch (err) {
        console.error("errors");
    }

    caughtErrors: all

    Examples of incorrect code for the { "caughtErrors": "all" } option:

    /*eslint no-unused-vars: ["error", { "caughtErrors": "all" }]*/
    
    // 1 error
    // "err" is defined but never used
    try {
        //...
    } catch (err) {
        console.error("errors");
    }

    caughtErrorsIgnorePattern

    The caughtErrorsIgnorePattern option specifies exceptions not to check for usage: catch arguments whose names match a regexp pattern. For example, variables whose names begin with a string 'ignore'.

    Examples of correct code for the { "caughtErrorsIgnorePattern": "^ignore" } option:

    /*eslint no-unused-vars: ["error", { "caughtErrorsIgnorePattern": "^ignore" }]*/
    
    try {
        //...
    } catch (ignoreErr) {
        console.error("errors");
    }

    When Not To Use It

    If you don't want to be notified about unused variables or function arguments, you can safely turn this rule off. Source: http://eslint.org/docs/rules/

    Missing semicolon.
    Open

      ))
    Severity: Minor
    Found in example/stories/index.js by eslint

    require or disallow semicolons instead of ASI (semi)

    JavaScript is unique amongst the C-like languages in that it doesn't require semicolons at the end of each statement. In many cases, the JavaScript engine can determine that a semicolon should be in a certain spot and will automatically add it. This feature is known as automatic semicolon insertion (ASI) and is considered one of the more controversial features of JavaScript. For example, the following lines are both valid:

    var name = "ESLint"
    var website = "eslint.org";

    On the first line, the JavaScript engine will automatically insert a semicolon, so this is not considered a syntax error. The JavaScript engine still knows how to interpret the line and knows that the line end indicates the end of the statement.

    In the debate over ASI, there are generally two schools of thought. The first is that we should treat ASI as if it didn't exist and always include semicolons manually. The rationale is that it's easier to always include semicolons than to try to remember when they are or are not required, and thus decreases the possibility of introducing an error.

    However, the ASI mechanism can sometimes be tricky to people who are using semicolons. For example, consider this code:

    return
    {
        name: "ESLint"
    };

    This may look like a return statement that returns an object literal, however, the JavaScript engine will interpret this code as:

    return;
    {
        name: "ESLint";
    }

    Effectively, a semicolon is inserted after the return statement, causing the code below it (a labeled literal inside a block) to be unreachable. This rule and the [no-unreachable](no-unreachable.md) rule will protect your code from such cases.

    On the other side of the argument are those who says that since semicolons are inserted automatically, they are optional and do not need to be inserted manually. However, the ASI mechanism can also be tricky to people who don't use semicolons. For example, consider this code:

    var globalCounter = { }
    
    (function () {
        var n = 0
        globalCounter.increment = function () {
            return ++n
        }
    })()

    In this example, a semicolon will not be inserted after the first line, causing a run-time error (because an empty object is called as if it's a function). The [no-unexpected-multiline](no-unexpected-multiline.md) rule can protect your code from such cases.

    Although ASI allows for more freedom over your coding style, it can also make your code behave in an unexpected way, whether you use semicolons or not. Therefore, it is best to know when ASI takes place and when it does not, and have ESLint protect your code from these potentially unexpected cases. In short, as once described by Isaac Schlueter, a \n character always ends a statement (just like a semicolon) unless one of the following is true:

    1. The statement has an unclosed paren, array literal, or object literal or ends in some other way that is not a valid way to end a statement. (For instance, ending with . or ,.)
    2. The line is -- or ++ (in which case it will decrement/increment the next token.)
    3. It is a for(), while(), do, if(), or else, and there is no {
    4. The next line starts with [, (, +, *, /, -, ,, ., or some other binary operator that can only be found between two tokens in a single expression.

    Rule Details

    This rule enforces consistent use of semicolons.

    Options

    This rule has two options, a string option and an object option.

    String option:

    • "always" (default) requires semicolons at the end of statements
    • "never" disallows semicolons as the end of statements (except to disambiguate statements beginning with [, (, /, +, or -)

    Object option:

    • "omitLastInOneLineBlock": true ignores the last semicolon in a block in which its braces (and therefore the content of the block) are in the same line

    always

    Examples of incorrect code for this rule with the default "always" option:

    /*eslint semi: ["error", "always"]*/
    
    var name = "ESLint"
    
    object.method = function() {
        // ...
    }

    Examples of correct code for this rule with the default "always" option:

    /*eslint semi: "error"*/
    
    var name = "ESLint";
    
    object.method = function() {
        // ...
    };

    never

    Examples of incorrect code for this rule with the "never" option:

    /*eslint semi: ["error", "never"]*/
    
    var name = "ESLint";
    
    object.method = function() {
        // ...
    };

    Examples of correct code for this rule with the "never" option:

    /*eslint semi: ["error", "never"]*/
    
    var name = "ESLint"
    
    object.method = function() {
        // ...
    }
    
    var name = "ESLint"
    
    ;(function() {
        // ...
    })()

    omitLastInOneLineBlock

    Examples of additional correct code for this rule with the "always", { "omitLastInOneLineBlock": true } options:

    /*eslint semi: ["error", "always", { "omitLastInOneLineBlock": true}] */
    
    if (foo) { bar() }
    
    if (foo) { bar(); baz() }

    When Not To Use It

    If you do not want to enforce semicolon usage (or omission) in any particular way, then you can turn this rule off.

    Further Reading

    Related Rules

    • [no-extra-semi](no-extra-semi.md)
    • [no-unexpected-multiline](no-unexpected-multiline.md)
    • [semi-spacing](semi-spacing.md) Source: http://eslint.org/docs/rules/
    Severity
    Category
    Status
    Source
    Language