Implemented <Break /> and column flex feature

* Solved packaging issues

* Switched to es6

* Improved stories

* Implemented <Break /> component

* Implemented column flex (grow and shrink) feature

.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__/Story.ts → src/__utils__/Story.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__/Title.ts → src/__utils__/Title.ts

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

src/__utils__/flatten.ts

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

src/break/Break.story.tsx

@@ -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>
+));

src/break/Break.test.tsx

@@ -0,0 +1,15 @@
+import "jest-styled-components";
+import { shallow } from "enzyme";
+import * as React from "react";
+import styled from "styled-components";
+import Break from "./Break";
+
+describe("<Break />", () => {
+  it("should match the snapshot", () => {
+    // act
+    const result = shallow(<Break />);
+
+    // assert
+    expect(result).toMatchSnapshot();
+  });
+});

src/break/Break.tsx

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

src/break/__snapshots__/Break.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Break /> should match the snapshot 1`] = `
+.c0 {
+  width: 100%;
+  height: 0;
+}
+
+<div
+  className="c0"
+/>
+`;

src/break/__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/break/index.test.ts

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

src/break/index.ts

@@ -0,0 +1,3 @@
+import Break from "./Break";
+
+export default Break;

src/column/Column.tsx

@@ -2,11 +2,13 @@ import "../utils/bootstrap";
 import { ClassAttributes, HTMLAttributes } from "react";
 import { StyledComponentClass } from "styled-components";
 import ColumnAlignSelf from "./ColumnAlignSelf";
+import ColumnFlex from "./ColumnFlex";
 import ColumnOffset from "./ColumnOffset";
 import ColumnOrder from "./ColumnOrder";
 import ColumnProperties from "./ColumnProperties";
 import ColumnSize from "./ColumnSize";
 import renderAlignSelf from "./renderAlignSelf";
+import renderFlex from "./renderFlex";
 import renderOffset from "./renderOffset";
 import renderOrder from "./renderOrder";
 import renderSize from "./renderSize";
@@ -23,12 +25,14 @@ const Column = styled.div`
     const renderer = {
       alignSelf: (value?: PropertyValue) =>
         renderAlignSelf(value as ColumnAlignSelf),
+      flex: (value?: PropertyValue) => renderFlex(value as ColumnFlex),
       offset: (value?: PropertyValue) => renderOffset(value as ColumnOffset),
       order: (value?: PropertyValue) => renderOrder(value as ColumnOrder),
       size: (value?: PropertyValue) => renderSize(value as ColumnSize)
     };
     const valueMap = {
       alignSelf: props!.alignSelf as BreakpointValue<ColumnAlignSelf>,
+      flex: props!.flex as BreakpointValue<ColumnFlex>,
       offset: props!.offset as BreakpointValue<ColumnOffset>,
       order: props!.order as BreakpointValue<ColumnOrder>,
       size: props!.size as BreakpointValue<ColumnSize>

src/column/ColumnAlignSelf.story.tsx

@@ -1,29 +1,28 @@
 import * as React from "react";
 import { storiesOf } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
-import BlueSquare from "../__storybook__/BlueSquare";
-import Story from "../__storybook__/Story";
-import Title from "../__storybook__/Title";
+import Story from "../__utils__/Story";
+import Title from "../__utils__/Title";
 
 import { Column, Container, Row } from "..";
 
 storiesOf("ColumnAlignSelf", module)
   .add("baseline", () => (
     <Story>
       <Title>baseline</Title>
-      <Container style={{ background: "#ccc", height: 200 }}>
-        <Row style={{ height: 200 }}>
+      <Container>
+        <Row>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>1</BlueSquare>
+            1
           </Column>
           <Column alignSelf={"baseline"} size={2}>
-            <BlueSquare>2</BlueSquare>
+            2
           </Column>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>3</BlueSquare>
+            3
           </Column>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>4</BlueSquare>
+            4
           </Column>
         </Row>
       </Container>
@@ -32,19 +31,19 @@ storiesOf("ColumnAlignSelf", module)
   .add("center", () => (
     <Story>
       <Title>center</Title>
-      <Container style={{ background: "#ccc", height: 200 }}>
-        <Row style={{ height: 200 }}>
+      <Container>
+        <Row>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>1</BlueSquare>
+            1
           </Column>
           <Column alignSelf={"center"} size={2}>
-            <BlueSquare>2</BlueSquare>
+            2
           </Column>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>3</BlueSquare>
+            3
           </Column>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>4</BlueSquare>
+            4
           </Column>
         </Row>
       </Container>
@@ -53,19 +52,19 @@ storiesOf("ColumnAlignSelf", module)
   .add("flex-end", () => (
     <Story>
       <Title>flex-end</Title>
-      <Container style={{ background: "#ccc", height: 200 }}>
-        <Row style={{ height: 200 }}>
+      <Container>
+        <Row>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>1</BlueSquare>
+            1
           </Column>
           <Column alignSelf={"flex-end"} size={2}>
-            <BlueSquare>2</BlueSquare>
+            2
           </Column>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>3</BlueSquare>
+            3
           </Column>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>4</BlueSquare>
+            4
           </Column>
         </Row>
       </Container>
@@ -74,19 +73,19 @@ storiesOf("ColumnAlignSelf", module)
   .add("flex-start", () => (
     <Story>
       <Title>flex-start</Title>
-      <Container style={{ background: "#ccc", height: 200 }}>
-        <Row style={{ height: 200 }}>
+      <Container>
+        <Row>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>1</BlueSquare>
+            1
           </Column>
           <Column alignSelf={"flex-start"} size={2}>
-            <BlueSquare>2</BlueSquare>
+            2
           </Column>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>3</BlueSquare>
+            3
           </Column>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>4</BlueSquare>
+            4
           </Column>
         </Row>
       </Container>
@@ -95,19 +94,19 @@ storiesOf("ColumnAlignSelf", module)
   .add("stretch", () => (
     <Story>
       <Title>stretch</Title>
-      <Container style={{ background: "#ccc", height: 200 }}>
-        <Row style={{ height: 200 }}>
+      <Container>
+        <Row>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>1</BlueSquare>
+            1
           </Column>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>2</BlueSquare>
+            2
           </Column>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>3</BlueSquare>
+            3
           </Column>
           <Column alignSelf={"stretch"} size={2}>
-            <BlueSquare>4</BlueSquare>
+            4
           </Column>
         </Row>
       </Container>

src/column/ColumnFlex.story.tsx

@@ -0,0 +1,27 @@
+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 { Column, Container, Row } from "..";
+
+storiesOf("ColumnFlex", module).add("flex", () => (
+  <Story>
+    <Title>flex</Title>
+    <Container>
+      <Row>
+        <Column size={"none"} flex={"grow"}>
+          grow grow grow grow
+        </Column>
+        <Column size={"auto"} flex={"shrink"}>
+          shrink
+        </Column>
+        <Column size={"none"} flex={"none"}>
+          none
+        </Column>
+        <Column size={"none"}>undefined</Column>
+      </Row>
+    </Container>
+  </Story>
+));