Skip to content

Commit c95e1fd

Browse files
gidsigidsi
committed
initial commit
0 parents  commit c95e1fd

File tree

11 files changed

+185
-0
lines changed

11 files changed

+185
-0
lines changed

‎.babelrc

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// NOTE: These options are overriden by the babel-loader configuration
2+
// for webpack, which can be found in ~/build/webpack.config.
3+
//
4+
// Why? The react-transform-hmr plugin depends on HMR (and throws if
5+
// module.hot is disabled), so keeping it and related plugins contained
6+
// within webpack helps prevent unexpected errors.
7+
{
8+
"presets": ["es2015", "react", "stage-0"],
9+
"plugins": ["transform-runtime"]
10+
}

‎.eslintrc

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"parser": "babel-eslint",
3+
"extends": [
4+
"airbnb"
5+
],
6+
"globals" : {
7+
"__LOCAL__" : false,
8+
"__DEV__" : false,
9+
"__PROD__" : false,
10+
"__DEBUG__" : false,
11+
"__DEBUG_NEW_WINDOW__" : false,
12+
"__BASENAME__" : false
13+
},
14+
"env": {
15+
"browser": true,
16+
"jest": true
17+
},
18+
"rules": {
19+
"indent" : [2, "tab", { "SwitchCase": 1 }],
20+
"react/jsx-indent": [2, 'tab'],
21+
"react/jsx-indent-props": [2, 'tab'],
22+
"no-tabs": 0
23+
}
24+
}

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎.npmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@kadira:registry=https://registry.npmjs.org

‎.storybook/config.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { configure } from '@kadira/storybook';
2+
3+
const req = require.context('../stories', true, /\.story\.jsx?$/);
4+
5+
function loadStories() {
6+
req.keys().forEach(req);
7+
}
8+
9+
configure(loadStories, module);

‎LICENSE

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Copyright 2016 sipgate GmbH
2+
3+
Licensed under the Apache License, Version 2.0 (the "License");
4+
you may not use this file except in compliance with the License.
5+
You may obtain a copy of the License at
6+
7+
http://www.apache.org/licenses/LICENSE-2.0
8+
9+
Unless required by applicable law or agreed to in writing, software
10+
distributed under the License is distributed on an "AS IS" BASIS,
11+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
See the License for the specific language governing permissions and
13+
limitations under the License.

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
sipgate React Components
2+
========================
3+
4+
sipgate React Components, used in several sipgate projects.

‎package.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "sipgate-react-components",
3+
"version": "0.0.1",
4+
"description": "",
5+
"main": "src/index.js",
6+
"scripts": {
7+
"lint": "eslint .",
8+
"start": "start-storybook -p 9001"
9+
},
10+
"keywords": [
11+
"sipgate",
12+
"react"
13+
],
14+
"author": "sipgate",
15+
"license": "Apache-2.0",
16+
"dependencies": {
17+
"react": "^15.3.2"
18+
},
19+
"devDependencies": {
20+
"@kadira/storybook": "^2.19.0",
21+
"babel-cli": "^6.18.0",
22+
"babel-preset-es2015": "^6.18.0",
23+
"babel-preset-stage-0": "^6.16.0",
24+
"debug": "~2.3.0",
25+
"eslint": "^3.9.1",
26+
"eslint-config-airbnb": "^12.0.0",
27+
"eslint-plugin-import": "^1.16.0",
28+
"eslint-plugin-jsx-a11y": "^2.2.2",
29+
"eslint-plugin-react": "^6.6.0",
30+
"extract-text-webpack-plugin": "^1.0.1",
31+
"html-webpack-plugin": "^2.24.1",
32+
"react-dom": "~15.3.2",
33+
"babel-preset-react-hmre": "^1.1.1",
34+
"webpack": "1.13.3"
35+
}
36+
}

‎src/containers/CenterContainer.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
3+
const alignItems = (direction, horizontal, vertical) => {
4+
return (direction === 'row' && vertical)
5+
|| (direction === 'column' && horizontal);
6+
};
7+
const justifyContent = (direction, horizontal, vertical) => {
8+
return (direction === 'row' && horizontal)
9+
|| (direction === 'column' && vertical);
10+
};
11+
12+
const CenterContainer = (props) => {
13+
const { style, direction, horizontal, vertical, children, ...other } = props;
14+
const containerStyle = {
15+
display: 'flex',
16+
flexDirection: props.direction,
17+
alignItems: alignItems(direction, horizontal, vertical) ? 'center' : 'stretch',
18+
justifyContent: justifyContent(direction, horizontal, vertical) ? 'center' : 'stretch',
19+
...style,
20+
};
21+
22+
return (
23+
<div style={containerStyle} {...other}>
24+
{children}
25+
</div>
26+
);
27+
};
28+
CenterContainer.propTypes = {
29+
children: React.PropTypes.node,
30+
style: React.PropTypes.object,
31+
direction: React.PropTypes.string,
32+
vertical: React.PropTypes.bool,
33+
horizontal: React.PropTypes.bool,
34+
};
35+
CenterContainer.defaultProps = {
36+
style: {},
37+
direction: 'row',
38+
vertical: true,
39+
horizontal: true,
40+
};
41+
42+
43+
export default CenterContainer;

‎src/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import CenterContainer from './containers/CenterContainer';
2+
3+
export { CenterContainer };

‎stories/CenterContainer.story.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import React from 'react';
2+
import { storiesOf } from '@kadira/storybook';
3+
import CenterContainer from '../src/containers/CenterContainer';
4+
5+
const style = {
6+
container: {
7+
height: '100vh',
8+
width: '100vw',
9+
},
10+
div: {
11+
margin: '10px',
12+
width: '100px',
13+
height: '100px',
14+
background: 'gold',
15+
},
16+
};
17+
storiesOf('Containers', module)
18+
.add('CenterContainer horizontal and vertical', () => (
19+
<CenterContainer style={style.container}>
20+
<div style={style.div} />
21+
<div style={style.div} />
22+
</CenterContainer>
23+
))
24+
.add('CenterContainer horizontal', () => (
25+
<CenterContainer
26+
style={style.container}
27+
vertical={false}
28+
>
29+
<div style={style.div} />
30+
<div style={style.div} />
31+
</CenterContainer>
32+
))
33+
.add('CenterContainer vertical', () => (
34+
<CenterContainer
35+
style={style.container}
36+
horizontal={false}
37+
>
38+
<div style={style.div} />
39+
<div style={style.div} />
40+
</CenterContainer>
41+
));

0 commit comments

Comments
 (0)