Implemented align items feature

* Fixed bettercodehub config and excluded yml files from prettier task

* Added keywords to the package config

* Added snapshot tests for index modules and added a test config

* Updated yarn.lock file

* Improved tslint config and added tslint-sonarts

* Removed vendor prefixes and fully trust on styled-components doing its job right

* Implemented align items feature

.bettercodehub.yml

@@ -1 +1 @@
-component_depth: 2;
+component_depth: 2

jest.config.json

@@ -6,6 +6,7 @@
   ],
   "coverageReporters": ["cobertura", "lcov"],
   "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
+  "setupTestFrameworkScriptFile": "./test.config.ts",
   "snapshotSerializers": ["enzyme-to-json/serializer"],
   "testRegex": ".*?\\.(spec|test)\\.(jsx?|tsx?)$",
   "testResultsProcessor": "jest-junit",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-rasta",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "The most powerful and flexible grid system for React",
   "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -11,12 +11,13 @@
   },
   "author": "ChilliCream",
   "license": "MIT",
+  "keywords": ["grid", "layout", "css", "flexbox"],
   "scripts": {
     "build": "yarn prettier && yarn lint && yarn test:coverage && tsc",
     "build-storybook": "build-storybook",
     "cover": "coveralls < coverage/lcov.info",
     "lint": "tslint -c tslint.json 'src/**/*.ts*'",
-    "prettier": "prettier \"./*.+(js|json|md|yml)\" \"./src/**/*.*\" --write",
+    "prettier": "prettier \"./*.+(js|json|md)\" \"./src/**/*.*\" --write",
     "storybook": "start-storybook -p 6006",
     "test": "jest --config jest.config.json",
     "test:coverage": "jest --coverage --config jest.config.json"
@@ -54,6 +55,7 @@
     "ts-jest": "^22.0.1",
     "tslint": "^5.9.1",
     "tslint-react": "^3.3.3",
+    "tslint-sonarts": "^1.6.0",
     "typescript": "^2.8.1"
   },
   "dependencies": {}

src/__snapshots__/index.test.ts.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index should verify the API shape 1`] = `
+Object {
+  "BreakpointMap": Object {},
+  "BreakpointValue": Object {},
+  "BreakpointValues": Object {},
+  "Column": [Function],
+  "Container": [Function],
+  "Row": [Function],
+  "Theme": Object {},
+  "ThemeProvider": [Function],
+}
+`;

src/column/Column.test.tsx

@@ -1,15 +1,9 @@
-// Module mocks must mocked before importing modules
-jest.mock("../utils/bootstrap", () => jest.fn());
-
 import "jest-styled-components";
-import { configure, shallow } from "enzyme";
-import * as Adapter from "enzyme-adapter-react-16";
+import { shallow } from "enzyme";
 import * as React from "react";
 import styled from "styled-components";
 import Column from "./Column";
 
-configure({ adapter: new Adapter() });
-
 describe("<Column />", () => {
   it("should match the snapshot (no properties set)", () => {
     // act

src/column/Column.tsx

@@ -1,8 +1,6 @@
-// These imports are needed for declaration files
-import * as _React from "react";
-import * as _StyledComponents from "styled-components";
-// -------------------------------------------------------------------
 import "../utils/bootstrap";
+import { ClassAttributes, HTMLAttributes } from "react";
+import { StyledComponentClass } from "styled-components";
 import ColumnProperties from "./ColumnProperties";
 import ColumnOffset from "./ColumnOffset";
 import ColumnOrder from "./ColumnOrder";

src/column/__snapshots__/Column.test.tsx.snap

@@ -68,13 +68,9 @@ exports[
   width: 100%;
   min-height: 1px;
   margin-left: 25.000000%;
-  -webkit-box-ordinal-group: 3;
-  -ms-flex-order: 2;
   -webkit-order: 2;
   -ms-flex-order: 2;
   order: 2;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 75.000000%;
   -webkit-flex: 0 0 75.000000%;
   -ms-flex: 0 0 75.000000%;
   flex: 0 0 75.000000%;
@@ -96,17 +92,13 @@ exports[
   position: relative;
   width: 100%;
   min-height: 1px;
-  -webkit-box-ordinal-group: 0;
-  -ms-flex-order: -1;
   -webkit-order: -1;
   -ms-flex-order: -1;
   order: -1;
 }
 
 @media (min-width:576px) {
   .c0 {
-    -webkit-box-ordinal-group: 3;
-    -ms-flex-order: 2;
     -webkit-order: 2;
     -ms-flex-order: 2;
     order: 2;
@@ -115,8 +107,6 @@ exports[
 
 @media (min-width:768px) {
   .c0 {
-    -webkit-box-ordinal-group: 13;
-    -ms-flex-order: 12;
     -webkit-order: 12;
     -ms-flex-order: 12;
     order: 12;
@@ -140,8 +130,6 @@ exports[`<Column /> should match the snapshot (order: 5)  1`] = `
   position: relative;
   width: 100%;
   min-height: 1px;
-  -webkit-box-ordinal-group: 5;
-  -ms-flex-order: 4;
   -webkit-order: 4;
   -ms-flex-order: 4;
   order: 4;
@@ -153,39 +141,17 @@ exports[`<Column /> should match the snapshot (order: 5)  1`] = `
 />
 `;
 
-exports[`<Column /> should match the snapshot (size: 7)  1`] = `
-.c0 {
-  position: relative;
-  width: 100%;
-  min-height: 1px;
-  -webkit-box-flex: 0;
-  -ms-flex: 0 0 58.333333%;
-  -webkit-flex: 0 0 58.333333%;
-  -ms-flex: 0 0 58.333333%;
-  flex: 0 0 58.333333%;
-  max-width: 58.333333%;
-}
-
-<div
-  className="c0"
-  size={7}
-/>
-`;
-
 exports[
   `<Column /> should match the snapshot (size: { xs: 'auto', sm: 7, md: 'none' })  1`
 ] = `
 .c0 {
   position: relative;
   width: 100%;
   min-height: 1px;
-  -ms-flex-preferred-size: 0;
   -webkit-flex-basis: 0;
   -ms-flex-preferred-size: 0;
   flex-basis: 0;
   -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
@@ -194,8 +160,6 @@ exports[
 
 @media (min-width:576px) {
   .c0 {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 58.333333%;
     -webkit-flex: 0 0 58.333333%;
     -ms-flex: 0 0 58.333333%;
     flex: 0 0 58.333333%;
@@ -205,8 +169,6 @@ exports[
 
 @media (min-width:768px) {
   .c0 {
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 auto;
     -webkit-flex: 0 0 auto;
     -ms-flex: 0 0 auto;
     flex: 0 0 auto;
@@ -226,3 +188,20 @@ exports[
   }
 />
 `;
+
+exports[`<Column /> should match the snapshot (size: 7)  1`] = `
+.c0 {
+  position: relative;
+  width: 100%;
+  min-height: 1px;
+  -webkit-flex: 0 0 58.333333%;
+  -ms-flex: 0 0 58.333333%;
+  flex: 0 0 58.333333%;
+  max-width: 58.333333%;
+}
+
+<div
+  className="c0"
+  size={7}
+/>
+`;

src/column/__snapshots__/index.test.ts.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index should verify the API shape 1`] = `
+Object {
+  "default": [Function],
+}
+`;

src/column/index.test.ts

@@ -0,0 +1,7 @@
+import * as module from ".";
+
+describe("index", () => {
+  it("should verify the API shape", () => {
+    expect(module).toMatchSnapshot();
+  });
+});

src/column/renderOrder.test.ts

@@ -9,9 +9,7 @@ describe("renderOrder", () => {
     const output = renderOrder(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("order:-1;");
   });
 
   it("should render css for flex order (input: 0)", () => {
@@ -22,9 +20,7 @@ describe("renderOrder", () => {
     const output = renderOrder(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("order:-1;");
   });
 
   it("should render css for flex order (input: 5)", () => {
@@ -35,9 +31,7 @@ describe("renderOrder", () => {
     const output = renderOrder(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-ordinal-group:5;-ms-flex-order:4;order:4;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("order:4;");
   });
 
   it("should render css for flex order (input: 'last')", () => {
@@ -48,9 +42,7 @@ describe("renderOrder", () => {
     const output = renderOrder(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("order:12;");
   });
 
   it("should render css for flex order (input: 13)", () => {
@@ -61,8 +53,6 @@ describe("renderOrder", () => {
     const output = renderOrder(input);
 
     // assert
-    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-ordinal-group:13;-ms-flex-order:12;order:12;"
-    );
+    expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe("order:12;");
   });
 });

src/column/renderOrder.ts

@@ -12,8 +12,6 @@ const renderOrder = (order?: ColumnOrder | 0 | 13): string => {
 
     if (typeof order === "number") {
       return `
-        -webkit-box-ordinal-group: ${order};
-        -ms-flex-order: ${order - 1};
         order: ${order - 1};
       `;
     }

src/column/renderSize.test.ts

@@ -10,7 +10,7 @@ describe("renderSize", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;max-width:100%;"
+      "flex-basis:0;flex-grow:1;max-width:100%;"
     );
   });
 
@@ -23,7 +23,7 @@ describe("renderSize", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-flex:0;-ms-flex:00auto;flex:00auto;width:auto;max-width:none;"
+      "flex:00auto;width:auto;max-width:none;"
     );
   });
 
@@ -47,7 +47,7 @@ describe("renderSize", () => {
 
     // assert
     expect(output.replace(/\n|\r|\s|\t/gi, "")).toBe(
-      "-webkit-box-flex:0;-ms-flex:0050.000000%;flex:0050.000000%;max-width:50.000000%;"
+      "flex:0050.000000%;max-width:50.000000%;"
     );
   });
 });

src/column/renderSize.ts

@@ -8,8 +8,6 @@ export default (size?: ColumnSize): string => {
 
   if (size === "none") {
     return `
-      -webkit-box-flex: 0;
-      -ms-flex: 0 0 auto;
       flex: 0 0 auto;
       width: auto;
       max-width: none;
@@ -18,10 +16,7 @@ export default (size?: ColumnSize): string => {
 
   if (size === "auto") {
     return `
-      -ms-flex-preferred-size: 0;
       flex-basis: 0;
-      -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
       flex-grow: 1;
       max-width: 100%;
     `;
@@ -30,8 +25,6 @@ export default (size?: ColumnSize): string => {
   const calculatedPercentage = percentage(size);
 
   return `
-    -webkit-box-flex: 0;
-    -ms-flex: 0 0 ${calculatedPercentage}%;
     flex: 0 0 ${calculatedPercentage}%;
     max-width: ${calculatedPercentage}%;
   `;

src/container/Container.test.tsx

@@ -1,15 +1,9 @@
-// Module mocks must mocked before importing modules
-jest.mock("../utils/bootstrap", () => jest.fn());
-
 import "jest-styled-components";
-import { configure, shallow } from "enzyme";
-import * as Adapter from "enzyme-adapter-react-16";
+import { shallow } from "enzyme";
 import * as React from "react";
 import styled from "styled-components";
 import Container from "./Container";
 
-configure({ adapter: new Adapter() });
-
 describe("<Container />", () => {
   it("should match the snapshot (no properties set)", () => {
     // act

src/container/Container.tsx

@@ -1,8 +1,6 @@
-// These imports are needed for declaration files
-import * as _React from "react";
-import * as _StyledComponents from "styled-components";
-// -------------------------------------------------------------------
 import "../utils/bootstrap";
+import { ClassAttributes, HTMLAttributes } from "react";
+import { StyledComponentClass } from "styled-components";
 import ContainerProperties from "./ContainerProperties";
 import renderWidth from "./renderWidth";
 import getWidth from "./width";

src/container/__snapshots__/index.test.ts.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`index should verify the API shape 1`] = `
+Object {
+  "default": [Function],
+}
+`;

src/container/index.test.ts

@@ -0,0 +1,7 @@
+import * as module from ".";
+
+describe("index", () => {
+  it("should verify the API shape", () => {
+    expect(module).toMatchSnapshot();
+  });
+});