Merge pull request #13 from mysticPrg/feature/neon

Feature/neon

.storybook/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "react-app"
+  ],
+  "plugins": [
+    [
+      "babel-plugin-root-import",
+      {
+        "rootPathSuffix": "./src/"
+      }
+    ]
+  ]
+}

.storybook/webpack.config.js

@@ -6,6 +6,8 @@
 // When you add this file, we won't add the default configurations which is similar
 // to "React Create App". This only has babel loader to load JavaScript.
 
+const autoprefixer = require('autoprefixer');
+
 module.exports = {
   plugins: [
     // your custom plugins
@@ -14,5 +16,37 @@ module.exports = {
     loaders: [
       // add your custom loaders.
     ],
+    rules: [
+    	{
+    	  test: /\.css$/,
+    	  use: [
+    	    require.resolve('style-loader'),
+    	    {
+    	      loader: require.resolve('css-loader'),
+    	      options: {
+    	        importLoaders: 1,
+    	      },
+    	    },
+    	    {
+    	      loader: require.resolve('postcss-loader'),
+    	      options: {
+    	        ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+    	        plugins: () => [
+    	          require('postcss-flexbugs-fixes'),
+    	          autoprefixer({
+    	            browsers: [
+    	              '>1%',
+    	              'last 4 versions',
+    	              'Firefox ESR',
+    	              'not ie < 9', // React doesn't support IE8 anyway
+    	            ],
+    	            flexbox: 'no-2009',
+    	          }),
+    	        ],
+    	      },
+    	    },
+    	  ],
+    	},
+    ]
   },
 };

package.json

@@ -10,7 +10,8 @@
     "react-dom": "^15.6.0",
     "react-redux": "^5.0.5",
     "redux": "^3.7.0",
-    "redux-saga": "^0.15.3"
+    "redux-saga": "^0.15.3",
+    "styled-components": "^2.1.1"
   },
   "devDependencies": {
     "@storybook/react": "^3.1.3",
@@ -40,12 +41,14 @@
     "fs-extra": "3.0.1",
     "html-webpack-plugin": "2.28.0",
     "jest": "20.0.3",
+    "jest-styled-components": "^3.1.5",
     "object-assign": "4.1.1",
     "postcss-flexbugs-fixes": "3.0.0",
     "postcss-loader": "2.0.5",
     "promise": "7.1.1",
     "react-dev-utils": "^3.0.0",
     "react-error-overlay": "^1.0.7",
+    "react-storybook-decorator-background": "^1.0.5",
     "react-test-renderer": "^15.6.1",
     "redux-devtools-extension": "^2.13.2",
     "style-loader": "0.17.0",

src/components/light/Light.js

@@ -1,9 +1,7 @@
 import React, { Component } from 'react';
 
-// import { getRandomNumber } from '~/utils/common';
-// import { combineChecker, rangeCheck, compareWithOtherProps } from '~/utils/propTypeChecker';
-import { getRandomNumber } from '../../utils/common';
-import { combineChecker, rangeCheck, compareWithOtherProps } from '../../utils/propTypeChecker';
+import { getRandomNumber } from '~/utils/common';
+import { combineChecker, rangeCheck, compareWithOtherProps } from '~/utils/propTypeChecker';
 
 const rangeCheck0to1000 = rangeCheck(0, 1000);
 const compareWithMax = (min, max, component) => {

src/components/light/Light.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 
 import Light from './Light';
-import { getFakeKey, getRandomColor } from '../../utils/common';
+import { getFakeKey, getRandomColor } from '~/utils/common';
 
 jest.useRealTimers();
 

src/components/light/LightSpace.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 
 import LightSpace from './LightSpace';
-import { getRandomNumber, getFakeKey } from '../../utils/common';
+import { getRandomNumber, getFakeKey } from '~/utils/common';
 
 describe('LightSpace', () => {
 	it('should be render without crash', () => {

src/components/neon/Button.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+export const Button = styled.button`
+	font: 13px Arial;
+	color: #00BCD4;
+	background-color: rgba(0, 188, 212, 0.45);
+	border: 1px solid #56ffd8;
+	box-shadow: none;
+	border: 1px solid #56ffd8;
+	outline: none;
+	border-radius: 5px;
+	padding: 5px;
+	margin: 7px;
+	transition: box-shadow 0.3s;
+	transition: background-color 0.3s;
+	transition: color 0.3s;
+
+	&:hover, &:focus {
+		box-shadow: 0 0 18px 3px #00BCD4;
+		background-color: rgba(0, 188, 212, 0.8);
+		color: white;
+	}
+
+	&:active {
+		box-shadow: 0 0 18px 3px white;
+		transition: box-shadow 0.1s;
+		color: #00BCD4;
+		background-color: rgba(0, 188, 212, 0.45);
+	}
+`;
+
+export default Button;

src/components/neon/Button.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Button from './Button';
+import { getRandomString } from '~/utils/common';
+
+describe('TextField', () => {
+	it('should be render without crash', () => {
+		expect(() => {
+			shallow(<Button/>);
+		}).not.toThrow();
+	});
+
+	it('should be initialized to the input value', () => {
+		const inputValue = getRandomString(20);
+
+		const target = shallow(<Button>{inputValue}</Button>);
+
+		const value = target.find('button').text();
+
+		expect(value).toEqual(inputValue);
+	});
+
+	it('should call the registered handler when the click event occurs', () => {
+		const onClick = jasmine.createSpy();
+
+		const target = shallow(<Button onClick={onClick}/>);
+
+		target.simulate('click');
+
+		expect(onClick).toHaveBeenCalled();
+	});
+});

src/components/neon/CheckBox.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+class UnstyledCheckBox extends Component {
+	render() {
+		return (
+			<label className={this.props.className}>
+				<input type="checkbox"/>
+				{this.props.children}
+			</label>
+		);
+	}
+}
+
+export const CheckBox = styled(UnstyledCheckBox)`
+	color: green;
+`;
+
+export default CheckBox;

src/components/neon/CheckBox.test.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import CheckBox from './CheckBox';
+
+describe('CheckBox', () => {
+	it('should be render without crash', () => {
+		expect(() => {
+			shallow(<CheckBox/>);
+		}).not.toThrow();
+	});
+});

src/components/neon/TextField.js

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import styled from 'styled-components';
+
+/*
+	ToDo 
+	1. use theme
+	2. use rem (for flexible UI)
+*/
+
+export const TextField = styled.input`
+	margin: 7px;
+	font: 13px Arial;
+	order: 0;
+	padding: 5px;
+	display: block;
+	color: #00BCD4;
+	outline: none;
+	border: 1px solid #56ffd8;
+	background-color: transparent;
+	box-shadow: none;
+	transition: box-shadow 0.3s;
+	border-radius: 5px;
+
+	&:focus, &:hover {
+		box-shadow: 0 0 18px 3px #00BCD4;
+	}
+
+	&:active {
+		box-shadow: 0 0 18px 3px white;
+	}
+
+	&::placeholder {
+		font: 13px Arial;
+		color: rgba(0, 188, 212, 0.8);
+		opacity: 1;
+		transition: opacity 0.5s;
+	}
+
+	&:focus::placeholder {
+		opacity: 0;
+	}
+`;
+
+export default TextField;

src/components/neon/TextField.test.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+
+import TextField from './TextField';
+import { getRandomString } from '~/utils/common';
+
+describe('TextField', () => {
+	it('should be render without crash', () => {
+		expect(() => {
+			shallow(<TextField/>);
+		}).not.toThrow();
+	});
+
+	it('should be initialized to the input value', () => {
+		const inputValue = getRandomString(20);
+
+		const target = mount(
+			<TextField defaultValue={inputValue}></TextField>
+		);
+
+		const readData = target.find('input').get(0).value;
+		expect(readData).toEqual(inputValue);
+	});
+
+	it('should display the text when it is typed', () => {
+		const value = getRandomString(20);
+		const event = {
+			target: {
+				value
+			}
+		};
+		const onChange = jasmine.createSpy();
+		let input = null;
+
+		const target = mount(
+			<TextField
+				innerRef={ref => input = ref}
+				onChange={onChange}
+			/>
+		);
+
+		target.simulate('change', event);
+		expect(onChange.calls.first().args[0].target.value).toEqual(value);
+	});
+
+	it('should call the registered handler when the focus event occurs', () => {
+		const focusHandler = jasmine.createSpy();
+		const blurHandler = jasmine.createSpy();
+
+		const target = mount(
+			<TextField
+				onFocus={focusHandler}
+				onBlur={blurHandler}
+			/>
+		);
+
+		const input = target.find('input');
+
+		input.simulate('focus');
+		expect(focusHandler).toHaveBeenCalled();
+
+		input.simulate('blur');
+		expect(blurHandler).toHaveBeenCalled();
+	});
+});

src/components/neon/index.js

@@ -0,0 +1,3 @@
+export * from './TextField';
+export * from './Button';
+export * from './CheckBox';

src/containers/LightContainer.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import LightSpace from '../components/light/LightSpace';
+import LightSpace from '~/components/light/LightSpace';
 import { connect } from 'react-redux';
-import { light_invoke_request } from '../actions/Light';
+import { light_invoke_request } from '~/actions/Light';
 
 class LightContainer extends Component {
 	render() {

src/containers/LightContainer.test.js

@@ -3,11 +3,11 @@ import { mount } from 'enzyme';
 import { Provider } from 'react-redux';
 
 import LightContainer from './LightContainer';
-import LightSpace from '../components/light/LightSpace';
-import Light from '../components/light/Light';
-import LightModel from '../models/LightModel';
-import { fakeStore } from '../utils/common';
-import { light_invoke_request } from '../actions/Light';
+import LightSpace from '~/components/light/LightSpace';
+import Light from '~/components/light/Light';
+import LightModel from '~/models/LightModel';
+import { fakeStore } from '~/utils/common';
+import { light_invoke_request } from '~/actions/Light';
 
 describe('LightContainer', () => {
 	let existLight, state, store, container;

src/index.js

@@ -10,8 +10,9 @@ import LightContainer from './containers/LightContainer';
 import LightModel from './models/LightModel';
 import reducer from './reducers';
 import { light_created } from './actions/Light';
-
 import sagas from './sagas';
+import fakeSocket from './utils/fakeSocket';
+
 import registerServiceWorker from './registerServiceWorker';
 
 const saga = createSagaMiddleware();
@@ -20,6 +21,15 @@ const store = createStore(
 	composeWithDevTools(applyMiddleware(saga))
 );
 
+const io = fakeSocket(300);
+io.on('connection', socket => {
+	//TODO: init client (set width/height, render, ...)
+
+	socket.on('msg', action => {
+		store.dispatch(action);
+	});
+});
+
 const addLight = () => {
 	let newLight = new LightModel();
 	newLight.toRandomize();