Apply prettier and lint to example project (#70)

Author: Havret

examples/react-styleguidist-example/.lintstagedrc

@@ -0,0 +1,6 @@
+{
+  "components/**/*.{ts,tsx}": [
+    "npm run prettier:base -- --write",
+    "git add"
+  ]
+}

examples/react-styleguidist-example/components/Column.tsx

@@ -1,30 +1,29 @@
 import * as React from 'react';
-import {Component} from 'react';
+import { Component } from 'react';
 
 /**
  * Column properties.
  */
 export interface IColumnProps extends React.HTMLAttributes<any> {
-    /** prop1 description */
-    prop1?: string;
-    /** prop2 description */
-    prop2: number;
-    /**
-     * prop3 description
-     */
-    prop3: () => void;
-    /** prop4 description */
-    prop4: 'option1' | 'option2' | 'option3';
+  /** prop1 description */
+  prop1?: string;
+  /** prop2 description */
+  prop2: number;
+  /**
+   * prop3 description
+   */
+  prop3: () => void;
+  /** prop4 description */
+  prop4: 'option1' | 'option2' | 'option3';
 }
 
 /**
  * Form column.
  */
 export class Column extends Component<IColumnProps, {}> {
-
-    render() {
-        return <div>Column</div>;
-    }
+  render() {
+    return <div>Column</div>;
+  }
 }
 
-export default Column;
+export default Column;

examples/react-styleguidist-example/components/ConstExport.tsx

@@ -4,45 +4,45 @@ import * as React from 'react';
  * Row properties.
  */
 export interface IRowProps {
-    /** prop1 description */
-    prop1?: string;
-    /** prop2 description */
-    prop2: number;
-    /**
-     * prop3 description
-     */
-    prop3: () => void;
-    /** prop4 description */
-    prop4: 'option1' | 'option2' | "option3";
+  /** prop1 description */
+  prop1?: string;
+  /** prop2 description */
+  prop2: number;
+  /**
+   * prop3 description
+   */
+  prop3: () => void;
+  /** prop4 description */
+  prop4: 'option1' | 'option2' | 'option3';
 }
 
 /**
  * test
- * 
+ *
  */
 export const test = (one: number) => {
-    return one;
-}
+  return one;
+};
 
 export const myObj = {
-  foo: 'bar',
-}
+  foo: 'bar'
+};
 
 /**
  * Form row.
  */
 export const ConstExportRow = (props: IRowProps) => {
-    const innerFunc = (props: IRowProps) => {
-        return <span>Inner Func</span>
-    };
-    const innerNonExportedFunc = (props: IRowProps) => {
-        return <span>Inner Func</span>
-    };
-    return <div>Test</div>;
+  const innerFunc = (props: IRowProps) => {
+    return <span>Inner Func</span>;
+  };
+  const innerNonExportedFunc = (props: IRowProps) => {
+    return <span>Inner Func</span>;
+  };
+  return <div>Test</div>;
 };
 
 const nonExportedFunc = (props: IRowProps) => {
-    return <div>No Export</div>
+  return <div>No Export</div>;
 };
 
 export default ConstExportRow;

examples/react-styleguidist-example/components/Grid.tsx

@@ -4,28 +4,30 @@ import * as React from 'react';
  * Grid properties.
  */
 export interface IGridProps {
-    /** prop1 description */
-    prop1?: string;
-    /** prop2 description */
-    prop2: number;
-    /**
-     * prop3 description
-     */
-    prop3: () => void;
-    /** Working grid description */
-    prop4: 'option1' | 'option2' | 'option3';
+  /** prop1 description */
+  prop1?: string;
+  /** prop2 description */
+  prop2: number;
+  /**
+   * prop3 description
+   */
+  prop3: () => void;
+  /** Working grid description */
+  prop4: 'option1' | 'option2' | 'option3';
 }
 
 /**
  * Form Grid.
  */
 export const Grid = (props: IGridProps) => {
-    const smaller = () => {return;};
-    return <div>Grid</div>;
+  const smaller = () => {
+    return;
+  };
+  return <div>Grid</div>;
 };
 
 const notExported = (props: IGridProps) => {
-    return <div>not exported grid</div>
+  return <div>not exported grid</div>;
 };
 
-export default Grid;
+export default Grid;

examples/react-styleguidist-example/components/HocComponent.tsx

@@ -4,32 +4,31 @@ import * as React from 'react';
  * Row properties.
  */
 export interface IRowProps {
-    /** prop1 description */
-    prop1?: string;
-    /** prop2 description */
-    prop2: number;
-    /**
-     * prop3 description
-     */
-    prop3: () => void;
-    /** prop4 description */
-    prop4: 'option1' | 'option2' | "option3";
+  /** prop1 description */
+  prop1?: string;
+  /** prop2 description */
+  prop2: number;
+  /**
+   * prop3 description
+   */
+  prop3: () => void;
+  /** prop4 description */
+  prop4: 'option1' | 'option2' | 'option3';
 }
 
 /**
  * Form row.
  */
 class Component extends React.Component<IRowProps, {}> {
-
-    render() {
+  render() {
     return <div>Test</div>;
-    }
-};
+  }
+}
 
 export function hoc<T>(Component: T): T {
-    // do whatever you need but return the same type T
-    return Component as T;
+  // do whatever you need but return the same type T
+  return Component as T;
 }
 
 /** This example shows HocComponent */
-export const HocComponent = hoc(Component);
+export const HocComponent = hoc(Component);

examples/react-styleguidist-example/components/PureRow.tsx

@@ -4,26 +4,25 @@ import * as React from 'react';
  * Row properties.
  */
 export interface IRowProps {
-    /** prop1 description */
-    prop1?: string;
-    /** prop2 description */
-    prop2: number;
-    /**
-     * prop3 description
-     */
-    prop3: () => void;
-    /** prop4 description */
-    prop4: 'option1' | 'option2' | "option3";
+  /** prop1 description */
+  prop1?: string;
+  /** prop2 description */
+  prop2: number;
+  /**
+   * prop3 description
+   */
+  prop3: () => void;
+  /** prop4 description */
+  prop4: 'option1' | 'option2' | 'option3';
 }
 
 /**
  * Form row.
  */
 export class PureRow extends React.PureComponent<IRowProps, {}> {
-
-    render() {
+  render() {
     return <div>Test</div>;
-    }
-};
+  }
+}
 
-export default PureRow;
+export default PureRow;

examples/react-styleguidist-example/components/Row.tsx

@@ -5,26 +5,25 @@ import { Component } from 'react';
  * Row properties.
  */
 export interface IRowProps {
-    /** prop1 description */
-    prop1?: string;
-    /** prop2 description */
-    prop2: number;
-    /**
-     * prop3 description
-     */
-    prop3: () => void;
-    /** prop4 description */
-    prop4: 'option1' | 'option2' | 'option3';
+  /** prop1 description */
+  prop1?: string;
+  /** prop2 description */
+  prop2: number;
+  /**
+   * prop3 description
+   */
+  prop3: () => void;
+  /** prop4 description */
+  prop4: 'option1' | 'option2' | 'option3';
 }
 
 /**
  * Form Row.
  */
 export class Row extends Component<IRowProps, {}> {
-
-    render() {
-        return <div>Row</div>;
-    }
+  render() {
+    return <div>Row</div>;
+  }
 }
 
-export default Row;
+export default Row;

examples/react-styleguidist-example/package.json

@@ -7,7 +7,12 @@
     "tsc": "tsc",
     "styleguidist": "styleguidist",
     "start": "tsc && styleguidist server --config styleguide.config.js",
-    "webpack": "webpack"
+    "webpack": "webpack",
+    "lint": "tslint -c tslint.json 'src/**/*.{ts,tsx}'",
+    "lint:fix": "npm run lint -- --fix",
+    "prettier:base": "prettier --parser typescript --single-quote --trailing-comma none",
+    "prettier:check": "npm run prettier:base -- -l \"components/**/*.{ts,tsx}\"",
+    "prettier:write": "npm run prettier:base -- --write \"components/**/*.{ts,tsx}\""
   },
   "author": "pvasek",
   "license": "MIT",
@@ -18,9 +23,13 @@
     "react-dom": "^16.2.0"
   },
   "devDependencies": {
+    "husky": "^0.14.3",
+    "lint-staged": "^6.0.1",
+    "prettier": "^1.10.2",
     "react-docgen-typescript": "^1.2.2",
     "react-styleguidist": "^6.1.0",
     "ts-loader": "^3.3.0",
+    "tslint": "^5.9.1",
     "typescript": "^2.3.3",
     "webpack": "^3.10.0"
   }

examples/react-styleguidist-example/tslint.json

@@ -0,0 +1,15 @@
+{
+    "defaultSeverity": "error",
+    "extends": [
+        "tslint:recommended"
+    ],
+    "jsRules": {},
+    "rules": {
+      "member-access": false,
+      "trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
+      "interface-name": false,
+      "quotemark": [true, "single"],
+      "arrow-parens": false
+    },
+    "rulesDirectory": []
+}