Skip to content

Commit abb2d4f

Browse files
nikgrafnikgraf
committed
initial commit
0 parents  commit abb2d4f

File tree

25 files changed

+700
-0
lines changed

25 files changed

+700
-0
lines changed

‎.babelrc

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"presets": ["react", "es2015", "stage-0"],
3+
"env": {
4+
"development": {
5+
"presets": ["react-hmre"]
6+
}
7+
}
8+
}

‎.eslintignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
**/node_modules/**
2+
lib/**
3+
app/**

‎.eslintrc

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "airbnb",
3+
"env": {
4+
"mocha": true
5+
},
6+
"rules": {
7+
"react/prop-types": 0
8+
}
9+
}

‎.gitignore

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Dependency directory
2+
# Commenting this out is preferred by some people, see
3+
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
4+
node_modules
5+
6+
.DS_Store
7+
8+
# Webpack cache & build files
9+
bundle.js
10+
.bundle.js
11+
12+
# Build
13+
/lib/
14+
15+
# NPM debug
16+
npm-debug.log
17+
npm-debug.log*

‎.jscsrc

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"preset": "airbnb",
3+
"validateQuoteMarks": null,
4+
"excludeFiles": [
5+
"coverage/**",
6+
"node_modules/**",
7+
"app/**",
8+
"lib/**"
9+
]
10+
}

‎.npmignore

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Dependency directory
2+
# Commenting this out is preferred by some people, see
3+
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
4+
node_modules
5+
6+
# Webpack cache & build files
7+
bundle.js
8+
.bundle.js
9+
10+
# Sources
11+
/app/
12+
13+
# NPM debug
14+
npm-debug.log
15+
16+
tests
17+
docs

‎.travis.yml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
language: node_js
2+
node_js:
3+
- "4.1"
4+
sudo: false
5+
script:
6+
- npm test
7+
- npm run lint

‎LICENSE

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
Copyright (c) 2015 Nik Graf
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4+
5+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6+
7+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
# A Playground to investigate a good third-party React UI Lib Architecture
2+
3+
My goal is to find an architecture which could be common ground a base for quality React UI libraries. A consistent theming/styling API would make the lives of many developers way more comfortable.
4+
5+
HELP/FEEDBACK/YOUR OPINION WANTED! :)
6+
7+
## How to setup & run
8+
9+
```
10+
npm install
11+
cd app
12+
npm install
13+
npm start
14+
```
15+
16+
## Basic Ideas
17+
18+
#### Class based
19+
20+
Component styles should be class based. It's more performant & responsive styling doesn't work with server-side rendering. I myself went down the inline-styles path in the past, but switched back to classes. Your thoughts?
21+
22+
#### react-themeable
23+
24+
Leverage react-themeable. It's a nice way of providing many styling classes to a single component.
25+
I believe establishing this as a convention would benefit the React community due the consistent API over many libs.
26+
27+
#### Self-contained
28+
29+
Make components self contained (no global UI lib dependencies) so you can import them and avoid importing the whole library e.g.
30+
31+
```
32+
// import the whole lib and get Toggle
33+
import { Toggle } from 'ui-lib';
34+
35+
// just import toggle without importing the whole library
36+
import Toggle from 'ui-lib/Toggle';
37+
```
38+
39+
#### Ship without a theme
40+
41+
Ship without a global theme (so people don't have to import the styling code).
42+
43+
#### Global theming utility
44+
45+
Provide a simple & handy way to apply a global theme for all the imported components.
46+
47+
## Global Theming
48+
49+
While react-themeable is super useful I believe having a way to set a default styling is a crucial feature for a UI library. Most of the time you will use the default theme specific to your product. This avoids adding a lot of theme props through the whole application.
50+
51+
#### Module export
52+
53+
https://github.com/nikgraf/future-react-ui/tree/master/ui-lib
54+
55+
In this version the defaultTheme is exported through a named module export. On line 9, 10, 11 you can see how the default theme is patched with custom classes. (https://github.com/nikgraf/future-react-ui/blob/master/app/index.js#L8) Since this is not so hand it might be useful to have utility function for each library to apply a theme.
56+
57+
#### Static property
58+
59+
https://github.com/nikgraf/future-react-ui/blob/master/ui-lib/StaticProperty/Hint.js
60+
61+
In this version the defaultTheme is attached to the component itself as static property. Compared to the 'Module export' this is a bit more flexible as you can overwrite the whole `theme` object in one go. See line 13-20 for usage. (https://github.com/nikgraf/future-react-ui/blob/master/app/index.js#L13)
62+
63+
#### Theme Component leveraging Context
64+
65+
https://github.com/nikgraf/future-react-ui/blob/master/ui-lib/Context/Hint.js
66+
67+
In this version we leverage context to build a `<Theme />` component that takes a theme as property and passes it down to all child components via React's context. A theme is still a simple JS object as can be seen on line 25-30. (https://github.com/nikgraf/future-react-ui/blob/master/app/index.js#L22). See how it's used here: https://github.com/nikgraf/future-react-ui/blob/master/app/index.js#L94. On one hand this approach is powerful, because you can apply different themes various nesting levels in the render tree.
68+
69+
```
70+
<Theme theme={baseTheme}>
71+
<Theme theme={headerTheme}>
72+
<Menu items=['Home', 'About'] />
73+
</Theme>
74+
<Hint isOpen>Basic open hint without styling.</Hint>
75+
</Theme>
76+
```
77+
78+
There is one obvious concern with this approach. There could be name-clashing between libraries that use the same key in the `theme` object. This could be solved by following a namespace convention like prefixing the keys with the npm package name.
79+
80+
## Conclusion
81+
82+
While the Theme component based idea is pretty powerful it's issues make me not having this as a default way of doing things. I'm not sure if there are some up/downsides between Module export vs Static property, but currently I'm leaning more to the static property implementation. If you have some ideas/feedback please reach out to me and let's discuss. (Github Issues might be best, but Twitter, Email, Skype, Hangout works as well)
83+
84+
## License
85+
86+
MIT

‎app/README.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
Examples Playground for Development
2+
================
3+
4+
## Install
5+
6+
```
7+
npm install
8+
```
9+
10+
Make sure you ran `npm install` in the root folder.
11+
12+
## Run
13+
14+
```
15+
npm start
16+
```
17+
18+
The app will run with hot reloading on `http://localhost:3000`.

‎app/components/HintCssModulesExample/index.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import Hint from 'ui-lib/StaticProperty/Hint';
3+
import styles from './styles.css';
4+
5+
const HintExample = () => {
6+
return (
7+
<div>
8+
<Hint theme={styles}>
9+
CSS Modules styled closed hint.
10+
</Hint>
11+
12+
<Hint theme={styles} isOpen>
13+
CSS Modules styles open hint.
14+
</Hint>
15+
</div>
16+
);
17+
};
18+
19+
export default HintExample;

‎app/components/HintCssModulesExample/styles.css

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.base {
2+
margin-bottom: 10px;
3+
}
4+
5+
.questionMark {
6+
box-sizing: border-box;
7+
background: grey;
8+
color: #fff;
9+
border-radius: 18px;
10+
width: 18px;
11+
height: 18px;
12+
font-size: 14px;
13+
text-align: center;
14+
padding-top: 1px;
15+
cursor: pointer;
16+
display: inline-block;
17+
}
18+
19+
.visibleContent {
20+
position: relative;
21+
border: 1px solid #ccc;
22+
border-radius: 3px;
23+
padding: 10px;
24+
display: inline-block;
25+
margin-left: 5px;
26+
}
27+
28+
.hiddenContent {
29+
display: none;
30+
}

‎app/components/HintExample/index.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import Hint from 'ui-lib/StaticProperty/Hint';
3+
import Hint2 from 'ui-lib/ModuleExport/Hint';
4+
import Hint3 from 'ui-lib/ModuleExport/Hint';
5+
6+
const HintExample = () => {
7+
return (
8+
<div>
9+
10+
</div>
11+
);
12+
};
13+
14+
export default HintExample;

‎app/components/HintJssExample/index.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import Hint from 'ui-lib/StaticProperty/Hint';
3+
import jss from 'jss';
4+
import styles from './styles';
5+
6+
const styleSheet = jss.createStyleSheet(styles).attach();
7+
8+
const HintExample = () => {
9+
return (
10+
<div>
11+
<Hint theme={styleSheet.classes}>
12+
JSS styled closed hint.
13+
</Hint>
14+
15+
<Hint theme={styleSheet.classes} isOpen>
16+
JSS styles open hint.
17+
</Hint>
18+
</div>
19+
);
20+
};
21+
22+
export default HintExample;

‎app/components/HintJssExample/styles.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
export default {
2+
base: {
3+
'margin-bottom': '10px',
4+
},
5+
questionMark: {
6+
'box-sizing': 'border-box',
7+
background: 'grey',
8+
color: '#fff',
9+
'border-radius': '18px',
10+
width: '18px',
11+
height: '18px',
12+
'font-size': '14px',
13+
'text-align': 'center',
14+
'padding-top': '1px',
15+
cursor: 'pointer',
16+
display: 'inline-block',
17+
},
18+
visibleContent: {
19+
position: 'relative',
20+
border: '1px solid #ccc',
21+
'border-radius': '3px',
22+
padding: '10px',
23+
display: 'inline-block',
24+
'margin-left': '5px',
25+
},
26+
hiddenContent: {
27+
display: 'none',
28+
},
29+
};

‎app/index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" />
8+
<link rel="stylesheet" href="static/style.css" />
9+
<title>Belle Future</title>
10+
<style>
11+
.custom-class-for-question-mark-green {
12+
color: green;
13+
}
14+
.custom-class-for-question-mark-red {
15+
color: red;
16+
}
17+
.custom-class-for-question-mark-blue {
18+
color: blue;
19+
}
20+
 </style>
21+
</head>
22+
<body>
23+
<section id="react"></section>
24+
<script src="static/bundle.js"></script>
25+
</body>
26+
</html>

0 commit comments

Comments
 (0)