Switched to tslint:recommended and fixed resulting conflicts and improved examples within the readme file (#29)

* Fixed example code

* Enabled tslind recommended, refactored map, removed equals by using Array.includes, added .editorconfig, added prettier config, added vscode launch config and improved examples within the readme

Author: rstaib

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false

.gitignore

@@ -6,7 +6,6 @@ node_modules/
 # Editors & OS
 .DS_Store
 .idea/
-.vscode/
 
 # Logs
 *.log
@@ -19,4 +18,4 @@ junit.xml
 # Output
 *.js
 *.js.map
-*.d.ts
+*.d.ts

.prettierrc.json

@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "bracketSpacing": false,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always"
+}

.vscode/launch.json

@@ -0,0 +1,24 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest Current File",
+      "args": [
+        "--inspect-brk",
+        "${workspaceRoot}/node_modules/jest/bin/jest.js",
+        "--runInBand",
+        "--config",
+        "\"${workspaceRoot}/jest.config.json\"",
+        "${relativeFile}"
+      ],
+      "protocol": "inspector",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    }
+  ]
+}

README.md

@@ -42,17 +42,17 @@ _React Rasta_ depends on the following packages which need to be installed manua
 ### Code Examples
 
 ```tsx
-import { Component } from "react";
-import { Column, Container, Row } from "react-rasta";
+import React, {Component} from "react";
+import {Column, Container, Row} from "react-rasta";
 
 export default class App extends Component {
   render() {
     return (
       <Container>
         <Row>
           <Column size={3}>Left</Column>
-          <Column size={{ xs: 9, md: 3 }}>Middle 1</Column>
-          <Column size={{ xs: 9, md: 3 }}>Middle 2</Column>
+          <Column size={{xs: 9, md: 3}}>Middle 1</Column>
+          <Column size={{xs: 9, md: 3}}>Middle 2</Column>
           <Column size={3}>Right</Column>
         </Row>
       </Container>
@@ -64,30 +64,30 @@ export default class App extends Component {
 Breakpoints (which will end up in media queries) could be redefined via `ThemeProvider`.
 
 ```tsx
-import { Component } from "react";
-import { Column, Container, Row, ThemeProvider } from "react-rasta";
+import React, {Component} from "react";
+import {Column, Container, Row, ThemeProvider} from "react-rasta";
 
 const breakpoints = {
   phone: 0,
   tablet: 600,
-  desktop: 800
+  desktop: 800,
 };
 
 const containerWidth = {
   // do not specify phone here
   tablet: 560,
-  desktop: 760
+  desktop: 760,
 };
 
 export default class App extends Component {
   render() {
     return (
-      <ThemeProvider theme={{ breakpoints, containerWidth }}>
+      <ThemeProvider theme={{breakpoints, containerWidth}}>
         <Container>
           <Row>
             <Column size={3}>Left</Column>
-            <Column size={{ phone: 9, tablet: 3 }}>Middle 1</Column>
-            <Column size={{ phone: 9, tablet: 3 }}>Middle 2</Column>
+            <Column size={{phone: 9, tablet: 3}}>Middle 1</Column>
+            <Column size={{phone: 9, tablet: 3}}>Middle 2</Column>
             <Column size={3}>Right</Column>
           </Row>
         </Container>

src/__utils__/Story.tsx

@@ -1,8 +1,8 @@
 import styled from "styled-components";
-import StoryProperties from "./StoryProperties";
 import Column from "../column";
 import Container from "../container";
 import Row from "../row";
+import StoryProperties from "./StoryProperties";
 
 const Story = styled.div`
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,

src/break/Break.story.tsx

@@ -1,10 +1,10 @@
+import {action} from "@storybook/addon-actions";
+import {storiesOf} from "@storybook/react";
 import React from "react";
-import { storiesOf } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
 import Story from "../__utils__/Story";
 import Title from "../__utils__/Title";
 
-import { Break, Column, Container, Row } from "..";
+import {Break, Column, Container, Row} from "..";
 
 storiesOf("Break", module).add("break", () => (
   <Story>

src/break/Break.test.tsx

@@ -1,5 +1,5 @@
+import {shallow} from "enzyme";
 import "jest-styled-components";
-import { shallow } from "enzyme";
 import React from "react";
 import styled from "styled-components";
 import Break from "./Break";

src/break/Break.tsx

@@ -1,7 +1,7 @@
+import {ClassAttributes, HTMLAttributes} from "react";
+import {StyledComponentClass} from "styled-components";
+import {styled, Theme} from "../theme";
 import "../utils/bootstrap";
-import { ClassAttributes, HTMLAttributes } from "react";
-import { StyledComponentClass } from "styled-components";
-import { styled, Theme } from "../theme";
 
 const Break = styled.div`
   width: 100%;

src/column/Column.test.tsx

@@ -1,5 +1,5 @@
+import {shallow} from "enzyme";
 import "jest-styled-components";
-import { shallow } from "enzyme";
 import React from "react";
 import styled from "styled-components";
 import Column from "./Column";
@@ -24,7 +24,7 @@ describe("<Column />", () => {
   it("should match the snapshot (alignSelf: { xs: 'baseline', sm: 'center', md: 'flex-end' })", () => {
     // act
     const result = shallow(
-      <Column alignSelf={{ xs: "baseline", sm: "center", md: "flex-end" }} />
+      <Column alignSelf={{xs: "baseline", sm: "center", md: "flex-end"}} />,
     );
 
     // assert
@@ -44,7 +44,7 @@ describe("<Column />", () => {
 
   it("should match the snapshot (offset: { xs: 3, sm: 4, md: 8 }) ", () => {
     // act
-    const result = shallow(<Column offset={{ xs: 3, sm: 4, md: 8 }} />);
+    const result = shallow(<Column offset={{xs: 3, sm: 4, md: 8}} />);
 
     // assert
     expect(result).toMatchSnapshot();
@@ -60,9 +60,7 @@ describe("<Column />", () => {
 
   it("should match the snapshot (order: { xs: 'first', sm: 3, md: 'last' }) ", () => {
     // act
-    const result = shallow(
-      <Column order={{ xs: "first", sm: 3, md: "last" }} />
-    );
+    const result = shallow(<Column order={{xs: "first", sm: 3, md: "last"}} />);
 
     // assert
     expect(result).toMatchSnapshot();
@@ -78,7 +76,7 @@ describe("<Column />", () => {
 
   it("should match the snapshot (size: { xs: 'auto', sm: 7, md: 'none' }) ", () => {
     // act
-    const result = shallow(<Column size={{ xs: "auto", sm: 7, md: "none" }} />);
+    const result = shallow(<Column size={{xs: "auto", sm: 7, md: "none"}} />);
 
     // assert
     expect(result).toMatchSnapshot();
@@ -92,7 +90,12 @@ describe("<Column />", () => {
 
     // act
     const result = shallow(
-      <Column alignSelf={"stretch"} offset={offset} order={order} size={size} />
+      <Column
+        alignSelf={"stretch"}
+        offset={offset}
+        order={order}
+        size={size}
+      />,
     );
 
     // assert