feat(init): initialize Navbar, Callout and Button Group components

Author: liorocks

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "react",
+    "es2015",
+    "stage-2"
+  ]
+}

.editorconfig

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

.gitignore

@@ -0,0 +1,5 @@
+/node_modules
+/build
+/.idea
+*.log
+

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "parser": "babylon"
+}

README.md

@@ -0,0 +1,11 @@
+### Install Dependencies
+```
+yarn
+```
+
+### Run Docs
+```
+yarn docs
+```
+
+Visit [http://localhost:6060/](http://localhost:6060/)

__tests__/ButtonGroup.test.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { ButtonGroup } from '../src/index';
+import { Button } from '@blueprintjs/core';
+
+describe('<ButtonGroup />', () => {
+  it('renders basic <ButtonGroup />', () => {
+    expect(renderToStaticMarkup(<ButtonGroup />)).toEqual(
+      '<div class="pt-button-group"></div>'
+    );
+  });
+
+  it('renders basic <ButtonGroup /> with children', () => {
+    expect(
+      renderToStaticMarkup(
+        <ButtonGroup>
+          <Button text="home" />
+        </ButtonGroup>
+      )
+    ).toEqual(
+      '<div class="pt-button-group"><button type="button" class="pt-button"><span>home</span></button></div>'
+    );
+  });
+
+  it('renders basic <ButtonGroup /> with props', () => {
+    expect(renderToStaticMarkup(<ButtonGroup large />)).toEqual(
+      '<div class="pt-button-group pt-large"></div>'
+    );
+
+    expect(renderToStaticMarkup(<ButtonGroup minimal />)).toEqual(
+      '<div class="pt-button-group pt-minimal"></div>'
+    );
+
+    expect(renderToStaticMarkup(<ButtonGroup fill />)).toEqual(
+      '<div class="pt-button-group pt-fill"></div>'
+    );
+
+    expect(renderToStaticMarkup(<ButtonGroup vertical />)).toEqual(
+      '<div class="pt-button-group pt-vertical"></div>'
+    );
+
+    expect(renderToStaticMarkup(<ButtonGroup align="left" />)).toEqual(
+      '<div class="pt-button-group pt-align-left"></div>'
+    );
+  });
+
+});

__tests__/Callout.test.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Callout } from '../src/index';
+import { Intent, Classes } from '@blueprintjs/core';
+
+describe('<Callout />', () => {
+  it('renders basic <Callout />', () => {
+    expect(renderToStaticMarkup(<Callout />)).toEqual(
+      '<div class="pt-callout"></div>'
+    );
+  });
+
+  it('renders basic <Callout /> with props and children', () => {
+    expect(
+      renderToStaticMarkup(
+        <Callout intent={Intent.PRIMARY} iconName="info-sign">
+          <h5>Callout Heading</h5>
+          Callout Content
+        </Callout>
+      )
+    ).toEqual(
+      '<div class="pt-callout pt-intent-primary pt-icon-info-sign"><h5>Callout Heading</h5>Callout Content</div>'
+    );
+  });
+
+  it('renders basic <Callout /> with `intent` prop', () => {
+    expect(renderToStaticMarkup(<Callout intent={0} />)).toEqual(
+      '<div class="pt-callout pt-intent-primary"></div>'
+    );
+
+    expect(renderToStaticMarkup(<Callout intent={1} />)).toEqual(
+      '<div class="pt-callout pt-intent-success"></div>'
+    );
+
+    expect(renderToStaticMarkup(<Callout intent={2} />)).toEqual(
+      '<div class="pt-callout pt-intent-warning"></div>'
+    );
+
+    expect(renderToStaticMarkup(<Callout intent={3} />)).toEqual(
+      '<div class="pt-callout pt-intent-danger"></div>'
+    );
+  });
+
+});

__tests__/Navbar.test.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import {
+  Navbar,
+  NavbarDivider,
+  NavbarGroup,
+  NavbarHeading,
+} from '../src/index';
+
+describe('<Navbar />', () => {
+  it('renders basic <Navbar />', () => {
+    expect(renderToStaticMarkup(<Navbar />)).toEqual(
+      '<nav class="pt-navbar"></nav>'
+    );
+  });
+
+  it('renders basic <Navbar /> with props and children', () => {
+    expect(
+      renderToStaticMarkup(
+        <Navbar fixed dark>
+          <NavbarGroup>
+            <NavbarDivider />
+          </NavbarGroup>
+        </Navbar>
+      )
+    ).toEqual(
+      '<nav class="pt-navbar pt-dark pt-fixed-top"><div class="pt-navbar-group pt-align-left"><span class="pt-navbar-divider"></span></div></nav>'
+    );
+  });
+
+  it('renders basic <NavbarDivider />', () => {
+    expect(renderToStaticMarkup(<NavbarDivider />)).toEqual(
+      '<span class="pt-navbar-divider"></span>'
+    );
+  });
+
+  it('renders basic <NavbarGroup />', () => {
+    expect(renderToStaticMarkup(<NavbarGroup />)).toEqual(
+      '<div class="pt-navbar-group pt-align-left"></div>'
+    );
+  });
+
+  it('renders basic <NavbarGroup /> with props and children', () => {
+    expect(
+      renderToStaticMarkup(
+        <NavbarGroup align="right">
+          <NavbarDivider />
+        </NavbarGroup>
+      )
+    ).toEqual(
+      '<div class="pt-navbar-group pt-align-right"><span class="pt-navbar-divider"></span></div>'
+    );
+  });
+
+  it('renders basic <NavbarHeading />', () => {
+    expect(renderToStaticMarkup(<NavbarHeading />)).toEqual(
+      '<div class="pt-navbar-heading"></div>'
+    );
+  });
+
+  it('renders basic <NavbarHeading /> with children', () => {
+    expect(
+      renderToStaticMarkup(<NavbarHeading>Blueprint Components</NavbarHeading>)
+    ).toEqual('<div class="pt-navbar-heading">Blueprint Components</div>');
+  });
+});

docs/index.md

@@ -0,0 +1,13 @@
+# Blueprint Components
+
+> The missing components for [Blueprint](http://blueprintjs.com/).
+> 
+> **Note:** *[Blueprint](http://blueprintjs.com/) is a React-based UI toolkit for the web.*
+
+## Getting Started
+
+### Installation
+
+```shell
+$ yarn add blueprint-components
+```

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "bluprint-components",
+  "version": "0.0.1",
+  "main": "src/index.js",
+  "description": "The missing components for Blueprint",
+  "repository": "git@github.com:Landish/bluprint-components.git",
+  "author": "Lado Lomidze <lado.lomidze@gmail.com> (https://ladolomidze.com/)",
+  "license": "MIT",
+  "config": {
+    "commitizen": {
+      "path": "cz-conventional-changelog"
+    }
+  },
+  "lint-staged": {
+    "{src,styleguide,__tests__}/**/*.{js,jsx,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "scripts": {
+    "cz": "git-cz",
+    "precommit": "lint-staged",
+    "format": "prettier --write {src,styleguide,__tests__}/**/*.{js,jsx,json}",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "docs": "styleguidist server",
+    "docs:build": "styleguidist build"
+  },
+  "dependencies": {
+    "@blueprintjs/core": "^1.28.0",
+    "classnames": "^2.2.5",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-addons-css-transition-group": "^15.6.0",
+    "react-dom": "^15.6.1"
+  },
+  "devDependencies": {
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "commitizen": "^2.9.6",
+    "cz-conventional-changelog": "^2.0.0",
+    "jest": "20",
+    "lint-staged": "^4.2.1",
+    "loaders": "^1.1.3",
+    "prettier": "^1.7.0",
+    "react-styleguidist": "^6.0.24",
+    "webpack": "^3.6.0"
+  }
+}