Implemented <Break /> and column flex feature

* Solved packaging issues

* Switched to es6

* Improved stories

* Implemented <Break /> component

* Implemented column flex (grow and shrink) feature

Author: rstaib

.gitignore

@@ -1,6 +1,7 @@
 # Build
 lib/
 node_modules/
+*.tgz
 
 # Editors & OS
 .DS_Store

.npmignore

@@ -2,6 +2,8 @@
 .circleci/
 .storybook/
 node_modules/
+*.tgz
+tslint.json
 
 # Editors & OS
 .DS_Store
@@ -17,8 +19,8 @@ test/
 junit.xml
 
 # Source
-src/**/__snapshots__/*.snap
-src/__storybook__/
+src/__utils__/
+src/**/__snapshots__/*.*
 src/**/*.story.*
 src/**/*.test.*
 

jest.config.json

@@ -1,7 +1,7 @@
 {
   "collectCoverageFrom": [
     "src/**/*.{js,jsx,ts,tsx}",
-    "!src/__storybook__/**/*.*",
+    "!src/__utils__/**/*.*",
     "!src/**/*.story.{js,jsx,ts,tsx}"
   ],
   "coverageReporters": ["cobertura", "lcov"],

package.json

@@ -22,7 +22,6 @@
     "test": "jest --runInBand --config jest.config.json",
     "test:coverage": "jest --runInBand --coverage --config jest.config.json"
   },
-  "files": ["lib", "src"],
   "peerDependencies": {
     "styled-components": ">= 1 < 4"
   },

src/__snapshots__/index.test.ts.snap

@@ -2,6 +2,7 @@
 
 exports[`index should verify the API shape 1`] = `
 Object {
+  "Break": [Function],
   "BreakpointMap": Object {},
   "BreakpointValue": Object {},
   "BreakpointValues": Object {},

src/__storybook__/BlueSquare.ts

@@ -3,12 +3,29 @@ import * as _React from "react";
 import * as _StyledComponents from "styled-components";
 // -------------------------------------------------------------------
 import styled from "styled-components";
+import Column from "../column";
+import Container from "../container";
+import Row from "../row";
 
 const Story = styled.div`
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol";
-  text-align: center;
+
+  ${Container},
+  ${Row} {
+    background: #ccc;
+    height: 300px;
+  }
+
+  ${Row} > ${Column} {
+    background: #0a5991;
+    border: 5px solid #ccc;
+    color #fff;
+    font-size: 2em;
+    line-height: 65px;
+    text-align: center;
+  }
 `;
 
 export default Story;

src/__storybook__/Story.ts src/__utils__/Story.tssrc/__storybook__/Story.ts renamed to src/__utils__/Story.ts

@@ -8,6 +8,7 @@ const Title = styled.div`
   color: #0a5991;
   font-size: 3em;
   margin: 30px 0;
+  text-align: center;
 `;
 
 export default Title;

src/__storybook__/Title.ts src/__utils__/Title.tssrc/__storybook__/Title.ts renamed to src/__utils__/Title.ts

@@ -0,0 +1,7 @@
+export default (source?: string) => {
+  if (source == null) {
+    return "";
+  } else {
+    return source.replace(/\n|\r|\s|\t/gi, "");
+  }
+};

src/__utils__/flatten.ts

@@ -0,0 +1,20 @@
+import * as 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 "..";
+
+storiesOf("Break", module).add("break", () => (
+  <Story>
+    <Title>break</Title>
+    <Container>
+      <Row>
+        <Column size={6}>1</Column>
+        <Break />
+        <Column size={6}>2</Column>
+      </Row>
+    </Container>
+  </Story>
+));