Why Typescript?

TSLint styleguide
Interfaces
Code Editor Integration (VSCode, Sublime, Atom)
Able to validate our code without leaving the editor
ES6 Features

Workflow

Work

Type

Test

Git Hooks

TSLint styleguide based on our rules & prettier, before you even commit

Commitizen

Standardize commits to show what does the commits has, currently checking:

Feature? breaking change? Fix? Refactor? Docs? Styleguide? Test?

Jest + Enzyme + Sinon

Testing functions, props, state & life cycle methods in React Components

Storybook

UI Testing (this is the only thing in this repo that is not mandatory, but you should definitely use the server we setup!)

Code Coverage

Checks percentage of code covered by tests based on Jest configuration in package.json

DangerJS

Changes to package.json, but not yarn.lock
PRs with more than 600 lines of code
Assign someone to PR
Checks for new dependencies

Continuous Integration

Git Review

After CI has completed its tasks, we need repo owners to registry a review on the code to allow merging to master

Semantic Release

Releases right version BASED ON COMMITIZEN to Github & NPM

I Know

Workflow

Commit

TSLint

Review

New

Release

Semantic Release

How does it determine to which version should it update? Based on x.y.z fundamentals

Example #1

import React from 'react';

class Example extends React.Component {
  render() {
    return (
      <div>
        Hello World!
      </div>
    )
  }
}

export default Example;

import React from 'react';

class Example extends React.Component {
  render(): React.ReactNode {
    return (
      <div>
        Hello World!
      </div>
    )
  }
}

export default Example;

Example #2

import React from 'react';

interface IProps {
  message?: string;
}

class Example extends React.Component<IProps> {
  render(): React.ReactNode {
    return (
      <div>
        {this.props.message}
      </div>
    )
  }
}

export default Example;

import React from 'react';

class Example extends React.Component {
  render() {
    return (
      <div>
        {this.props.message}
      </div>
    )
  }
}

export default Example;

Example #3

import React from 'react';

interface IProps {
  message?: string;
}

interface IState {
  title: Date;
}

class Example 
    extends React.Component<IProps, IState> {
  render(): React.ReactNode {
    return (
      <div>
        {this.state.title}
        {this.props.message}
      </div>
    )
  }
}

export default Example;

import React from 'react';

class Example extends React.Component {
  render() {
    return (
      <div>
        {this.props.message}
      </div>
    )
  }
}

export default Example;

Questions?

@santospatrick

patrickspteixeira@gmail.com