Skip to content

Commit

Permalink
Use static-react react-html and router
Browse files Browse the repository at this point in the history
  • Loading branch information
Brent Jackson committed Mar 4, 2015
1 parent bd524f8 commit 0616360
Show file tree
Hide file tree
Showing 17 changed files with 5,249 additions and 2,302 deletions.
3 changes: 3 additions & 0 deletions .npmignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@

dist/.module-cache/

20 changes: 15 additions & 5 deletions dist/Button.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@

var React = require('react');
var classnames = require('classnames');
var ThemeMixin = require('./theme-mixin');

module.exports = React.createClass({displayName: "exports",
Expand All @@ -8,18 +9,27 @@ module.exports = React.createClass({displayName: "exports",

getDefaultProps: function() {
return {
theme: 'light-gray',
theme: 'silver',
flush: false,
isActive: false,
className: '',
outline: false,
transparent: false,
}
},

render: function() {
var buttonClass = this.props.className + ' button ';
buttonClass += this.getThemeClasses().main;
buttonClass += this.props.flush ? '' : ' mr1';
buttonClass += this.props.isActive ? ' is-active' : '';
var themeClasses = this.getThemeClasses();
var activeClass = (this.props.outline || this.props.transparent) ? themeClasses.main : 'is-active';
var buttonClass =
classnames(
this.props.className,
(!this.props.isActive && this.props.outline || this.props.transparent) ? this.props.theme : themeClasses.main,
'button',
{ mr1: this.props.flush },
this.props.isActive ? activeClass : false,
{ 'button-outline': this.props.outline },
{ 'button-transparent': this.props.transparent });
return (
React.createElement("button", React.__spread({}, this.props, {className: buttonClass}),
this.props.children
Expand Down
2 changes: 1 addition & 1 deletion dist/theme-mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

module.exports = {

getThemeClasses: function() {
getThemeClasses: function(options) {

var theme = this.props.theme;
var classes = {};
Expand Down
12 changes: 3 additions & 9 deletions docs/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,7 @@
// App

var React = require('react');
var data = require('./data');

var Index = React.createFactory(require('./components/Index.jsx'));

React.render(
Index(data),
document.getElementById('app')
);

var Root = React.createFactory(require('./components/root.jsx'));

React.render(Root(window.INITIAL_PROPS), document);

18 changes: 7 additions & 11 deletions docs/build.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
// Static site build task

var fs = require('fs');
var path = require('path');
var _ = require('lodash');
var React = require('react');
require('node-jsx').install();

var template = _.template(fs.readFileSync(path.join(__dirname, './layouts/default.html'), 'utf8'));
var Index = React.createFactory(require('./components/Index.jsx'));

var staticReact = require('static-react');
var Root = require('./components/root.jsx');
var data = require('./data');

data.app = React.renderToString(Index(data));
var html = template(data);
fs.writeFileSync(path.join(__dirname, '../index.html'), html);
staticReact({
dir: path.join(__dirname, '..'),
Root: Root,
props: data
});

10 changes: 6 additions & 4 deletions docs/components/body.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,17 @@ module.exports = React.createClass({

<Section heading="Button">
<Button>Button</Button>
<Button theme="blue">Button</Button>
<Button theme="red">Button</Button>
<Button theme="gray">Button</Button>
<Button theme="blue">Button</Button>
<Button theme="green">Button</Button>
<Button theme="orange">Button</Button>
<Button theme="red">Button</Button>
<Button theme="purple">Button</Button>
</Section>

<Section heading="Radio Button">
<RadioButton theme="blue-outline" onClick={handleRadioButton}>Radio Button</RadioButton>
<RadioButton theme="blue-outline" isActive={true}>Radio Button</RadioButton>
<RadioButton outline={true} onClick={handleRadioButton}>Radio Button</RadioButton>
<RadioButton outline={true} isActive={true}>Radio Button</RadioButton>
</Section>

<Section heading="Group">
Expand Down
30 changes: 15 additions & 15 deletions docs/components/footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
/** @jsx React.DOM */

var React = require('react');

module.exports = React.createClass({


render: function() {
var homeLink = '//jxnblk.com/' + this.props.name;
return (
<footer className="flex flex-wrap flex-center py3 mxn1">
<h3 className="h4 m0 px1">
<a href={homeLink}>
{this.props.name}
</a>
</h3>
<div className="h5 bold px1">v{this.props.version}</div>
<a href={this.props.homepage} className="button">Github</a>
<div className="flex-auto" />
<p className="h5 px1 m0">
<span>Made by </span>
<a href="//jxnblk.com">Jxnblk</a>
</p>
<footer className="container px2">
<div className="flex flex-wrap flex-center py3 mxn1">
<h3 className="h4 m0 px1">
<a href={homeLink}>
{this.props.name}
</a>
</h3>
<div className="h5 bold px1">v{this.props.version}</div>
<a href={this.props.homepage} className="button button-transparent blue">Github</a>
<div className="flex-auto" />
<p className="h5 px1 m0">
<span>Made by </span>
<a href="//jxnblk.com">Jxnblk</a>
</p>
</div>
</footer>
)
}
Expand Down
11 changes: 6 additions & 5 deletions docs/components/header.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/** @jsx React.DOM */

var React = require('react');

Expand All @@ -7,10 +6,12 @@ module.exports = React.createClass({

render: function() {
return (
<header className="flex flex-center py3 border-bottom">
<div className="flex-auto">
<h1 className="m0">{this.props.name}</h1>
<p className="m0">{this.props.description}</p>
<header className="container px2">
<div className="flex flex-center py3 border-bottom">
<div className="flex-auto">
<h1 className="m0">{this.props.name}</h1>
<p className="m0">{this.props.description}</p>
</div>
</div>
</header>
)
Expand Down
203 changes: 203 additions & 0 deletions docs/components/home.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@

var React = require('react');
var Section = require('./section.jsx');

var Rebass = require('../..');
var Button = Rebass.Button;
var RadioButton = Rebass.RadioButton;
var Group = Rebass.Group;
var NavItem = Rebass.NavItem;
var Navbar = Rebass.Navbar;
var NavSpacer = Rebass.NavSpacer;
var Dropdown = Rebass.Dropdown;
var Badge = Rebass.Badge;
var Message = Rebass.Message;
var Media = Rebass.Media;
var Flag = Rebass.Flag
var Panel = Rebass.Panel

//var Modal = Rebass.Modal;

var ModalSection = require('./modal-section.jsx');

// var FuzzyInputSection = require('./fuzzy-input-section.jsx');
var HslSlidersSection = require('./hsl-sliders-section.jsx');
var IconSection = require('./icon-section.jsx');

module.exports = React.createClass({

render: function() {
var style = {
minHeight: '100vh',
};
var handleRadioButton = function(val) {
console.log(val);
};
return (
<div style={style} className="container px2">

<Section heading="Button">
<Button>Button</Button>
<Button theme="gray">Button</Button>
<Button theme="blue">Button</Button>
<Button theme="green">Button</Button>
<Button theme="red">Button</Button>
</Section>

<Section heading="Radio Button">
<RadioButton theme="blue" outline={true} onClick={handleRadioButton}>Radio Button</RadioButton>
<RadioButton theme="blue" outline={true} isActive={true}>Radio Button</RadioButton>
</Section>

<Section heading="Group">
<Group theme="orange" className="mr1">
<Button>Button</Button>
<Button theme="orange">Button</Button>
<Button theme="orange">Button</Button>
</Group>
<Group className="mr1">
<input type="text" className="field-light" placeholder="Search" />
<Button>Go</Button>
</Group>
<Group theme="blue">
<Button>Go</Button>
<Dropdown label="Dropdown" right={true}>
<NavItem href="#!">Action</NavItem>
<a href="#!" className="button block button-nav-light">Action</a>
<a href="#!" className="button block button-nav-light">Action</a>
<a href="#!" className="button block button-nav-light">Action</a>
</Dropdown>
</Group>
</Section>

<Section heading="Dropdown">
<Dropdown label="Dropdown">
<a href="#!" className="button block button-nav-light">Action</a>
<a href="#!" className="button block button-nav-light">Action</a>
<a href="#!" className="button block button-nav-light">Action</a>
</Dropdown>
<Dropdown label="Right" theme="blue" right={true}>
<a href="#!" className="button block button-nav-light">Action</a>
<a href="#!" className="button block button-nav-light">Action</a>
<a href="#!" className="button block button-nav-light">Action</a>
</Dropdown>
</Section>

<ModalSection />

<Section heading="Nav Item">
<div className="mb2 border-bottom">
<NavItem href="#nav-item">Nav Item</NavItem>
<NavItem href="#nav-item">Nav Item</NavItem>
<NavItem href="#nav-item">Nav Item</NavItem>
</div>
<div className="mb2 bg-dark-gray">
<NavItem href="#nav-item" inverse={true}>Nav Item</NavItem>
<NavItem href="#nav-item" inverse={true}>Nav Item</NavItem>
<NavItem href="#nav-item" inverse={true}>Nav Item</NavItem>
</div>
</Section>

<Section heading="Navbar">
<Navbar>
<NavItem href="#nav-item">Default Navbar</NavItem>
<NavItem href="#nav-item">Nav Item</NavItem>
<NavSpacer />
<NavItem href="#nav-item">Nav Item</NavItem>
</Navbar>
<Navbar theme="blue">
<NavItem href="#nav-item">Blue Navbar</NavItem>
<NavItem href="#nav-item">Nav Item</NavItem>
<NavSpacer />
<NavItem href="#nav-item">Nav Item</NavItem>
</Navbar>
<Navbar theme="dark-gray" compact={true}>
<NavItem href="#nav-item">Compact Navbar</NavItem>
<NavItem href="#nav-item">Nav Item</NavItem>
<NavSpacer />
<NavItem href="#nav-item">Nav Item</NavItem>
</Navbar>
<Navbar theme="dark-gray" justified={true}>
<NavItem href="#nav-item">Justified Navbar</NavItem>
<NavItem href="#nav-item">Nav Item</NavItem>
<NavItem href="#nav-item">Nav Item</NavItem>
</Navbar>
<Navbar theme="dark-gray">
<NavItem href="#nav-item">Navbar</NavItem>
<NavItem href="#nav-item">Groups</NavItem>
<Group theme="gray">
<Button>Button</Button>
<Button>Button</Button>
</Group>
<NavSpacer />
<Group>
<input type="text" className="field-dark" placeholder="Search" />
<Button theme="blue">Go</Button>
</Group>
<NavItem href="#nav-item">Nav Item</NavItem>
</Navbar>
</Section>

<Section heading="Badge">
<Badge>Badge</Badge>
<Badge theme="red">Badge</Badge>
<Badge theme="yellow">Badge</Badge>
<Badge theme="green">Badge</Badge>
<Badge theme="blue">Badge</Badge>
<Badge theme="dark-gray">Badge</Badge>
</Section>

<Section heading="Message">
<Message>Message</Message>
<Message theme="red">Message</Message>
<Message theme="yellow">Message</Message>
<Message theme="green">Message</Message>
<Message theme="blue">Message</Message>
<Message theme="dark-gray">Message</Message>
</Section>

<Section heading="Media Object">
<Media>
<img src="//placehold.it/96" />
<div>Media Object</div>
</Media>
</Section>

<Section heading="Flag Object">
<Flag>
<img src="//placehold.it/96" />
<div>Flag Object</div>
</Flag>
</Section>

<Section heading="Panel">
<Panel header="Panel Header">
<div>Panel Body</div>
</Panel>
<Panel header="Panel Header" theme="blue">
<div>Panel Body</div>
</Panel>
<Panel header="Panel Header" theme="green">
<div>Panel Body</div>
</Panel>
<Panel header="Panel Header" theme="yellow">
<div>Panel Body</div>
</Panel>
<Panel header="Panel Header" theme="red">
<div>Panel Body</div>
</Panel>
</Section>

{/* <FuzzyInputSection />
*/}

<HslSlidersSection />

<IconSection />

</div>
)
}

});

Loading

0 comments on commit 0616360

Please sign in to comment.