Implemented fullscreen feature

* Refined Readme and bettercodehub config

* Added lint-staged for prettyfing code on commit

* Implemented fullscreen feature

Author: rstaib

.bettercodehub.yml

@@ -1 +1,11 @@
-component_depth: 2
+component_depth: 2
+languages:
+- name: typescript
+  production:
+    exclude:
+      - .*/__snapshots__/.*\.snap
+      - .*/__utils__/.*\.ts
+      - .*/__utils__/.*\.tsx
+      - .*\.story\.tsx
+      - .*\.test\.ts
+      - .*\.test\.tsx

.lintstagedrc.json

@@ -0,0 +1,3 @@
+{
+  "src/**/*": ["yarn prettier", "git add"]
+}

README.md

@@ -6,9 +6,9 @@
 
 **The most powerful and flexible grid system for _React_**
 
-_React Rasta_ is a 12 column grid system and works underneath with the _CSS flexbox_ layout.
-But because it can be difficult to work with _CSS flexbox_, _React Rasta_ offers a simple _API_
-so you don't have to worry about that.
+_React Rasta_ is a 12 column grid system built on top of `styled-components` which works underneath
+with the _CSS flexbox_ layout. _React Rasta_ implements all features from the _Bootstrap V4.1_ grid
+system but adds more flexibility on top of it.
 
 ## Getting Started
 
@@ -30,9 +30,16 @@ And when using _npm_ it looks like this.
 npm install react-rasta --save
 ```
 
-### Code Example
+#### Required Dependencies
 
-_React Rasta_ implements all features from the _Bootstrap V4_ grid system and adds more flexibility on top of it.
+_React Rasta_ depends on the following packages which need to be installed manually.
+
+| Package             | Version      |
+| ------------------- | ------------ |
+| `react`             | 16 or higher |
+| `styled-components` | 3 or higher  |
+
+### Code Examples
 
 ```tsx
 import { Component } from "react";

package.json

@@ -17,13 +17,14 @@
     "build-storybook": "build-storybook",
     "cover": "coveralls < coverage/lcov.info",
     "lint": "tslint -c tslint.json 'src/**/*.ts*'",
+    "precommit": "lint-staged",
     "prettier": "prettier \"./*.+(js|json|md)\" \"./src/**/*.*\" --write",
     "storybook": "start-storybook -p 6006",
     "test": "jest --runInBand --config jest.config.json",
     "test:coverage": "jest --runInBand --coverage --config jest.config.json"
   },
   "peerDependencies": {
-    "styled-components": ">= 1 < 4"
+    "styled-components": ">= 3 < 4"
   },
   "devDependencies": {
     "@storybook/addon-actions": "^3.4.0",
@@ -44,9 +45,11 @@
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.3",
+    "husky": "^0.14.3",
     "jest": "^22.0.5",
     "jest-junit": "^3.6.0",
     "jest-styled-components": "^5.0.1",
+    "lint-staged": "^7.0.5",
     "prettier": "^1.11.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",

src/__utils__/Story.ts src/__utils__/Story.tsxsrc/__utils__/Story.ts renamed to src/__utils__/Story.tsx

@@ -3,6 +3,7 @@ import * as _React from "react";
 import * as _StyledComponents from "styled-components";
 // -------------------------------------------------------------------
 import styled from "styled-components";
+import StoryProperties from "./StoryProperties";
 import Column from "../column";
 import Container from "../container";
 import Row from "../row";
@@ -11,11 +12,12 @@ 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";
+  ${(props: StoryProperties) => (props.fullscreen ? "height: 100%;" : "")}
 
   ${Container},
   ${Row} {
     background: #ccc;
-    height: 300px;
+    ${(props: StoryProperties) => (props.fullscreen ? "" : "height: 300px;")}
   }
 
   ${Row} > ${Column} {

src/__utils__/StoryProperties.ts

@@ -0,0 +1,5 @@
+interface StoryProperties {
+  fullscreen?: boolean;
+}
+
+export default StoryProperties;

src/__utils__/Title.ts src/__utils__/Title.tsxsrc/__utils__/Title.ts renamed to src/__utils__/Title.tsx

@@ -6,10 +6,12 @@ import ColumnSize from "./ColumnSize";
 import { BreakpointValue } from "../media";
 import { ThemeProperties } from "../theme";
 
-export default interface ColumnProperties extends ThemeProperties {
+interface ColumnProperties extends ThemeProperties {
   alignSelf?: BreakpointValue<ColumnAlignSelf>;
   flex?: BreakpointValue<ColumnFlex>;
   offset?: BreakpointValue<ColumnOffset>;
   order?: BreakpointValue<ColumnOrder>;
   size?: BreakpointValue<ColumnSize>;
-};
+}
+
+export default ColumnProperties;

src/column/ColumnProperties.ts

@@ -30,6 +30,15 @@ storiesOf("Container", module)
       </Container>
     </Story>
   ))
+  .add("fullscreen", () => (
+    <Story fullscreen>
+      <Container fullscreen>
+        <Row>
+          <Column>fullscreen</Column>
+        </Row>
+      </Container>
+    </Story>
+  ))
   .add("themeProvider", () => (
     <Story>
       <Title>themeProvider</Title>

src/container/Container.story.tsx

@@ -13,14 +13,22 @@ describe("<Container />", () => {
     expect(result).toMatchSnapshot();
   });
 
-  it("should match the snapshot (fluid property set to true) ", () => {
+  it("should match the snapshot (fluid property set to true)", () => {
     // act
     const result = shallow(<Container fluid />);
 
     // assert
     expect(result).toMatchSnapshot();
   });
 
+  it("should match the snapshot (fullscreen property set to true)", () => {
+    // act
+    const result = shallow(<Container fullscreen />);
+
+    // assert
+    expect(result).toMatchSnapshot();
+  });
+
   it("should match the snapshot (width property set to { xs: 100, sm: 200, md: 300 })", () => {
     // act
     const result = shallow(<Container width={{ xs: 100, sm: 200, md: 300 }} />);
@@ -32,7 +40,17 @@ describe("<Container />", () => {
   it("should match the snapshot (ignores width when fluid is set)", () => {
     // act
     const result = shallow(
-      <Container fluid={true} width={{ xs: 100, sm: 200, md: 300 }} />
+      <Container fluid width={{ xs: 100, sm: 200, md: 300 }} />
+    );
+
+    // assert
+    expect(result).toMatchSnapshot();
+  });
+
+  it("should match the snapshot (ignores fluid and width when fullscreen is set)", () => {
+    // act
+    const result = shallow(
+      <Container fluid fullscreen width={{ xs: 100, sm: 200, md: 300 }} />
     );
 
     // assert