Code Contribution Guideline

Component structure

export class ComponentName {
    // public @Input() component properties

    // public @Output() component properties

    // public component properties

    // private component properties
    constructor() {}

    // lifecycle hooks methods

    // interfaces methods

    // public component methods

    // private component methods
}

example:

export class ComponentName implements OnInit, OnChanges, OnDestroy, CssClassBuilder {
    // public component properties
    public prop1: string;
    public prop2: string;
    public prop3: string;
    // private component properties

    private _prop1: string;
    private _prop2: string;
    private _prop3: string;

    constructor() {}
    // lifecycle hooks methods
    public ngOnInit(): void {}

    public ngOnChanges(): void {}

    public ngDestroy(): void {}

    // interfaces methods
    public buildComponentCssClass(): string {
        return '';
    }

    // public component methods
    public method1(): void {}
    public method2(): void {}
    public method3(): void {}

    // private component methods
    private _method4(): void {}
    private _method5(): void {}
    private _method6(): void {}
}

Methods and Variables naming

• public: lowerCamelCase. Example: firstName, addProductToShopCart()
• private: lowerCamelCase with _ prefix. Example: _firstName, _addProductToShopCart()
• Properties/Decorators: variable declaration should starts from newline from decorator. Example

/** Bad Usage */
@Input() disabled: boolean = false;

/** Good Usage */
@Input()
disabled: boolean = false;

Comments

• Comments should be consistent, for methods and variables in *.ts files, we should add comments, directly above the commented property.

/** Example of 1 line comment */
public firstName: string = '';

/** 
 * Example of comment with 
 * text longer than 1 line
 */
public firstName: string = '';

• Private variables, methods, or Life cycle Hook Methods Should have comment with @hidden annotation

/** 
 * @hidden
 * Example of comment for cycle method, that requires some comment
 */
private _removeList(): void {}

/** @hidden */
private _propertyWithoutComment: string;

Angular

• All components should have changeDetectionStrategy.OnPush. It improves the performance of library.

Building component css classes

In order to build css classes for component, rules listed below must be used:

• Component has to implement both CssClassBuilder and OnChanges interfaces

export class RadioButtonComponent implements OnChanges, CssClassBuilder

• buildComponentCssClass() method must be implemented like in example

    @applyCssClass
     /** This method is responsible for building a css class based on current state
      *  It is implementation of CssClassBuilder interface and
      *  should be used with @applyCssClass decorator
      */
    public buildComponentCssClass(): string {
        return [
            'fd-radio',
            this.compact ? 'fd-radio--compact' : '',
            this.state !== 'default' ? `is-${this.state}` : ''
        ].join(' ');
    }

Usage of @applyCssClass is recomended because it hides logic for applying classes to component. In developer's responsibility is to provide correct order of classes, which buildComponentCssClass helps in.

• ngOnChanges() method must be implemented and the method has to call buildComponentCssClass()

    /** @hidden */
    public ngOnChanges(): void {
        this.buildComponentCssClass();
        this._checkMandatoryFields();
    }