Skip to content

Commit f33c622

Browse files
jordangarciajordangarcia
committed
Add usage section with code examples
1 parent 8cb887d commit f33c622

File tree

11 files changed

+13100
-1056
lines changed

11 files changed

+13100
-1056
lines changed

‎docs/app.js

Lines changed: 12880 additions & 994 deletions
Large diffs are not rendered by default.

‎docs/index.html

Lines changed: 72 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -83,41 +83,82 @@ <h5 class="tour-section--bullet-title">
8383
<div class="tour-section--bg">
8484
<div class="container">
8585
<div class="section tour-section">
86-
<!-- Icon Section -->
8786
<div class="row" style="margin-bottom: 0;">
87+
<div class="col s12 m12 l7 tour-section--info">
8888

89-
<div class="col s12 m12 l5">
89+
<div id="code-example"></div>
9090
</div>
9191

92-
<div class="col s12 m12 l6 offset-m1 valign-wrapper tour-section--info">
93-
<div class="valign">
94-
<h4 class="red-text tour-section--title">
95-
Tested & Production Ready
96-
</h4>
97-
98-
<h5 class="tour-section--bullet-title">
99-
Maintained by Optimizely
100-
</h5>
101-
<p class="tour-section--bullet-item">
102-
Optimizely has been using NuclearJS in production since 2014 and will offer long term support and a stable API.
103-
</p>
104-
105-
<h5 class="tour-section--bullet-title">
106-
Easy Debugging
107-
</h5>
108-
<p class="tour-section--bullet-item">
109-
Developing with NuclearJS is a true pleasure! By being able to see your application state at any time you finding bugs
110-
becomes easier and you spend more time writing productive code!
111-
</p>
112-
113-
<h5 class="tour-section--bullet-title">
114-
Opinionated about testing
115-
</h5>
116-
<p class="tour-section--bullet-item">
117-
When building with NuclearJS there is never a question of "How do I test this?". There are prescribed testing strategies
118-
for every type of thing you will build with NuclearJS.
119-
</p>
120-
</div>
92+
<div class="col s12 m12 l4 offset-l1 tour-section--info">
93+
<h4 class="red-text tour-section--title">
94+
Usage:
95+
</h4>
96+
97+
<h5 class="tour-section--bullet-title">
98+
Create a <code>Reactor</code>
99+
</h5>
100+
101+
<p class="tour-section--bullet-item">
102+
The Reactor maintains the application state map, and handles dispatching actions.
103+
</p>
104+
105+
<h5 class="tour-section--bullet-title">
106+
Register stores
107+
</h5>
108+
<p class="tour-section--bullet-item">
109+
In NuclearJS determine the shape of your application state. Stores must define two methods:
110+
</p>
111+
112+
<p>
113+
<code>getInitialState</code> - Returns the initial state for that stores specific key in the application state.
114+
</p>
115+
116+
<p>
117+
<code>initialize</code> - Sets up any action handlers, by specifying the action type and a function that transforms
118+
<pre><code>(storeState, action) => (newStoreState)</code></pre>
119+
</p>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
126+
<div class="container">
127+
<div class="section tour-section">
128+
<!-- Icon Section -->
129+
<div class="row" style="margin-bottom: 0;">
130+
131+
<div class="col s12 m12 l5">
132+
</div>
133+
134+
<div class="col s12 m12 l6 offset-m1 valign-wrapper tour-section--info">
135+
<div class="valign">
136+
<h4 class="red-text tour-section--title">
137+
Tested & Production Ready
138+
</h4>
139+
140+
<h5 class="tour-section--bullet-title">
141+
Maintained by Optimizely
142+
</h5>
143+
<p class="tour-section--bullet-item">
144+
Optimizely has been using NuclearJS in production since 2014 and will offer long term support and a stable API.
145+
</p>
146+
147+
<h5 class="tour-section--bullet-title">
148+
Easy Debugging
149+
</h5>
150+
<p class="tour-section--bullet-item">
151+
Developing with NuclearJS is a true pleasure! By being able to see your application state at any time you finding bugs
152+
becomes easier and you spend more time writing productive code!
153+
</p>
154+
155+
<h5 class="tour-section--bullet-title">
156+
Opinionated about testing
157+
</h5>
158+
<p class="tour-section--bullet-item">
159+
When building with NuclearJS there is never a question of "How do I test this?". There are prescribed testing strategies
160+
for every type of thing you will build with NuclearJS.
161+
</p>
121162
</div>
122163
</div>
123164
</div>

‎docs/js/components/code-example.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
require('highlight.js/styles/github.css')
2+
3+
import React from 'react'
4+
import { Reactor, Store, toImmutable } from 'nuclear-js'
5+
import Code from './code'
6+
7+
const storeCode = `const reactor = new Reactor({ debug: true });
8+
9+
reactor.registerStores({
10+
typeFilter: Store({
11+
getInitialState() {
12+
return null;
13+
},
14+
15+
initialize() {
16+
this.on('FILTER_TYPE', (state, type) => type)
17+
}
18+
}),
19+
20+
items: Store({
21+
getInitialState() {
22+
return toImmutable([
23+
{ type: 'food', name: 'banana', price: 1 },
24+
{ type: 'food', name: 'doritos', price: 4 },
25+
{ type: 'clothes', name: 'shirt', price: 15 },
26+
{ type: 'clothes', name: 'pants', price: 20 },
27+
])
28+
},
29+
30+
initialize() {
31+
this.on('ADD_ITEM', (state, item) => state.push(item))
32+
}
33+
})
34+
})`
35+
36+
const getterCode = `const filteredItemsGetter = [
37+
['typeFilter'],
38+
['items'],
39+
(filter, items) => {
40+
return (filter)
41+
? items.filter(i => i.get('type') === filter)
42+
: items
43+
}
44+
]`
45+
46+
const componentCode = `const ItemViewer = React.createClass({
47+
mixins: [reactor.ReactMixin],
48+
49+
getDataBindings() {
50+
return {
51+
items: filteredItemsGetter
52+
}
53+
},
54+
55+
render() {
56+
return (
57+
<table>
58+
<thead>
59+
<tr>
60+
<th>Name</th>
61+
<th>Type</th>
62+
<th>Price</th>
63+
</tr>
64+
</thead>
65+
66+
<tbody>
67+
{this.state.items.map(item => {
68+
return <tr>
69+
<td>{item.get('name')}</td>
70+
<td>{item.get('type')}</td>
71+
<td>{item.get('price')}</td>
72+
</tr>
73+
})}
74+
</tbody>
75+
</table>
76+
)
77+
}
78+
})`
79+
80+
export default React.createClass({
81+
render() {
82+
return (
83+
<div>
84+
<Code lang="javascript">
85+
{storeCode}
86+
</Code>
87+
<Code lang="javascript">
88+
{getterCode}
89+
</Code>
90+
<Code lang="javascript">
91+
{componentCode}
92+
</Code>
93+
</div>
94+
)
95+
}
96+
})

‎docs/js/components/code.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
require('highlight.js/styles/github.css')
2+
3+
import React from 'react'
4+
import Highlight from 'react-highlight'
5+
6+
export default React.createClass({
7+
render() {
8+
return (
9+
<div className="highlighted-code">
10+
<Highlight className={this.props.lang}>
11+
{this.props.children}
12+
</Highlight>
13+
</div>
14+
)
15+
}
16+
})

‎docs/js/examples/item-filter/index.js renamed to ‎docs/js/components/item-filter-example.js

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import React from 'react'
22
import { Reactor, Store, toImmutable } from 'nuclear-js'
3-
import StateViewer from '../../components/state-viewer'
4-
import ExampleStep from '../../components/example-step'
5-
import Browser from '../../components/browser'
6-
import BrowserDevPanel from '../../components/browser-dev-panel'
7-
3+
import StateViewer from './state-viewer'
4+
import ExampleStep from './example-step'
5+
import Browser from './browser'
86

97
const reactor = new Reactor({ debug: true });
108

@@ -41,7 +39,7 @@ const filteredItemsGetter = [
4139
}
4240
]
4341

44-
const ItemFilterExample = React.createClass({
42+
export default React.createClass({
4543
mixins: [reactor.ReactMixin],
4644

4745
getDataBindings() {
@@ -92,23 +90,16 @@ const ItemFilterExample = React.createClass({
9290
</table>
9391
<div className="example-step">
9492
<h6 className="example-step--title valign">User action updates application state</h6>
95-
<StateViewer active="true" title="AppState" reactor={reactor} />
93+
<StateViewer title="AppState" reactor={reactor} />
9694
</div>
9795

9896
<div className="example-step">
9997
<h6 className="example-step--title">Getters compose and transform application state reactively notifying components of any changes.</h6>
100-
<StateViewer active="true" title="filteredItems Getter" reactor={reactor} getter={filteredItemsGetter} />
98+
<StateViewer title="filteredItems Getter" reactor={reactor} getter={filteredItemsGetter} />
10199
</div>
102100
</div>
103101
</Browser>
104102
</div>
105103
)
106104
}
107105
})
108-
109-
export default function(el) {
110-
React.render(
111-
<ItemFilterExample />,
112-
el
113-
)
114-
}

‎docs/js/components/state-viewer.js

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react'
22
import { toJS } from 'nuclear-js'
3+
import Code from './code'
34

45
function formatState(state) {
56
return JSON.stringify(toJS(state), null, ' ').replace(/\{([^{}]+)\}/g, function(match, contents, index, all) {
@@ -33,17 +34,8 @@ export default React.createClass({
3334
title = <strong>{this.props.title} </strong>
3435
}
3536

36-
var className = "state-viewer"
37-
38-
if (this.props.active) {
39-
className += " active"
40-
}
41-
42-
return <div className={className}>
43-
<pre className="state-viewer--contents">
44-
{title}
45-
{this.state.appState}
46-
</pre>
47-
</div>
37+
return <Code lang="json">
38+
{title}{this.state.appState}
39+
</Code>
4840
}
4941
})

‎docs/js/main.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1-
import InitItemFilterExample from './examples/item-filter'
1+
import React from 'react'
2+
import ItemFilterExample from './components/item-filter-example'
3+
import CodeExample from './components/code-example'
24

3-
InitItemFilterExample(document.getElementById('ex1'))
5+
React.render(
6+
<ItemFilterExample />,
7+
document.getElementById('ex1')
8+
)
9+
10+
React.render(
11+
<CodeExample />,
12+
document.getElementById('code-example')
13+
)

‎docs/output.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7293,3 +7293,6 @@ button.picker__today:focus, button.picker__clear:focus, button.picker__close:foc
72937293
font-size: 1.5em;
72947294
padding: 3px 5px;
72957295
font-weight: 300; }
7296+
7297+
.highlighted-code {
7298+
font-size: 12px; }

‎docs/package.json

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@
1818
"react": "^0.13.3",
1919
"babel-core": "^5.5.4",
2020
"babel-loader": "^5.1.4",
21-
"webpack": "^1.9.10"
21+
"webpack": "^1.9.10",
22+
"highlight.js": "^8.6.0",
23+
"react-highlight": "^0.4.1",
24+
"css-loader": "^0.14.4",
25+
"style-loader": "^0.12.3"
2226
}
2327
}

‎docs/sass/main.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@
3838
@import "components/date_picker/default.time.scss";
3939

4040

41-
4241
.tour-section {
4342
padding: 0;
4443
position: relative;
@@ -181,3 +180,7 @@
181180
font-weight: 300;
182181
}
183182
}
183+
184+
.highlighted-code {
185+
font-size: 12px;
186+
}

0 commit comments

Comments
 (0)