Commit c478a8bb by Ari Rizzitano

get rid of docs for now, sourcemaps, add some new components

parent f0784f3f
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import { BrowserRouter as Router } from 'react-router-dom';
import routes from './routes';
ReactDOM.render(
<Router>
{routes}
</Router>,
document.getElementById('root')
);
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<title>Component Explorer!</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
import React from 'react';
import { Route, Link } from 'react-router-dom';
import { Nav, NavItem, NavLink } from 'reactstrap';
import CourseHeader from './views/Header/CourseHeader';
import Home from './views/Home';
import Inputs from './views/Inputs';
const routes = (
<div>
<Nav>
<NavItem>
<NavLink href="/">Home</NavLink>
</NavItem>
<NavItem>
<NavLink href="/header">Header</NavLink>
</NavItem>
<NavItem>
<NavLink href="/inputs">Inputs</NavLink>
</NavItem>
</Nav>
<Route exact path="/" component={Home} />
<Route path="/header" component={CourseHeader} />
<Route path="/inputs" component={Inputs} />
</div>
);
export default routes;
import React, { Component } from 'react';
import MainNav from './MainNav';
import CourseNav from './CourseNav';
export default class CourseHeader extends Component {
render() {
const course = {
number: 'INST101X',
name: 'Interesting Course Title',
tabs: [
'Syllabus',
'Discussion',
'Progress',
'Instructor'
]
};
const user = {
displayName: 'FooBar McBaz',
image: 'http://placehold.it/40x40'
};
return (
<div className="header">
<MainNav course={course} user={user} />
<CourseNav course={course} />
</div>
);
}
}
import React, { Component } from 'react';
export default class CourseNav extends Component {
render() {
return (
<div className="container-fluid course-nav">
</div>
);
}
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
Nav,
NavItem,
NavLink,
NavDropdown,
DropdownMenu,
DropdownItem,
DropdownToggle
} from 'reactstrap';
class MainNav extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false
};
}
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
render() {
return (
<Nav className="navbar navbar-toggleable-md navbar-dark bg-white">
<NavItem>
<button className="navbar-toggler-right btn btn-secondary hidden-lg-up" type="button" data-toggle="collapse" data-target="#mNav" aria-controls="mNav" aria-expanded="false" aria-label="Toggle navigation">
<span><i className="fa fa-bars mr-2" aria-hidden="true"></i>Menu</span>
</button>
</NavItem>
<NavItem>
<h1 className="navbar-brand mb-0">
<NavLink href="#">
<img src="static/logo.png" alt="edX Home" className="d-inline-block align-top" width="60" height="30" />
</NavLink>
</h1>
</NavItem>
<NavItem className="navbar-text mr-auto">
<h2 className="mb-auto h6">
<b>{this.props.course.number}:</b> {this.props.course.name}
</h2>
</NavItem>
<NavItem>
<NavLink href="#">Help</NavLink>
</NavItem>
<NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle nav caret>
<img src={this.props.user.image} className="rounded mr-1" width="40px" height="40px" />
{this.props.user.displayName}
</DropdownToggle>
<DropdownMenu>
<DropdownItem>Dashboard</DropdownItem>
<DropdownItem>Profile</DropdownItem>
<DropdownItem>Account</DropdownItem>
<DropdownItem divider />
<DropdownItem>Sign Out</DropdownItem>
</DropdownMenu>
</NavDropdown>
</Nav>
);
}
}
MainNav.propTypes = {
course: PropTypes.shape({
number: PropTypes.string.isRequired,
name: PropTypes.string.isRequired
}),
user: PropTypes.shape({
displayName: PropTypes.string.isRequired,
image: PropTypes.string.isRequired
})
};
export default MainNav;
import React, { Component } from 'react';
export default class Home extends Component {
render() {
return (
<div>
hello i am a home
</div>
);
}
}
import React, { Component } from 'react';
export default class Inputs extends Component {
render() {
return (
<div>
hello i am an inputs
</div>
);
}
}
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
"eslint-plugin-jsx-a11y": "^4.0.0", "eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3", "eslint-plugin-react": "^6.10.3",
"react-router-dom": "^4.1.1", "react-router-dom": "^4.1.1",
"source-map-loader": "^0.2.1",
"static-site-generator-webpack-plugin": "^3.4.1", "static-site-generator-webpack-plugin": "^3.4.1",
"webpack": "^2.4.1", "webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4" "webpack-dev-server": "^2.4.4"
......
...@@ -37,11 +37,34 @@ class SelectInput extends React.Component { ...@@ -37,11 +37,34 @@ class SelectInput extends React.Component {
this.props.onChange(event.target.value); this.props.onChange(event.target.value);
} }
getOption(option, i) {
let { label, value } = option;
if (typeof option === 'string') {
label = value = option;
}
return (
<option value={value} key={`option-${i}`}>{label}</option>
);
}
getOptions() { getOptions() {
return this.props.options.map(option => { return this.props.options.map((option, i) => {
return ( let section;
<option>{option}</option> if (option.options) {
); const groupOpts = option.options.map((opt, j) => {
return this.getOption(opt, j);
});
section = (
<optgroup label={option.label} key={`group-${i}`}>
{groupOpts}
</optgroup>
);
} else {
section = this.getOption(option, i);
}
return section;
}); });
} }
...@@ -56,7 +79,7 @@ class SelectInput extends React.Component { ...@@ -56,7 +79,7 @@ class SelectInput extends React.Component {
id={this.state.uuid} id={this.state.uuid}
type="select" type="select"
name={this.props.name} name={this.props.name}
value={this.props.value} value={this.state.value}
aria-describedby={descriptionId} aria-describedby={descriptionId}
onChange={this.handleChange} onChange={this.handleChange}
> >
...@@ -71,7 +94,10 @@ class SelectInput extends React.Component { ...@@ -71,7 +94,10 @@ class SelectInput extends React.Component {
SelectInput.propTypes = { SelectInput.propTypes = {
label: PropTypes.string.isRequired, label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired, name: PropTypes.string.isRequired,
value: PropTypes.string, value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]),
description: PropTypes.oneOfType([ description: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,
PropTypes.element PropTypes.element
......
const path = require('path'); const path = require('path');
module.exports = { module.exports = {
devtool: 'source-map',
entry: path.resolve('./src/index.js'), entry: path.resolve('./src/index.js'),
output: { output: {
path: path.resolve('./dist'), path: path.resolve('./dist'),
...@@ -45,12 +46,15 @@ module.exports = { ...@@ -45,12 +46,15 @@ module.exports = {
{ {
test: /\.js$/, test: /\.js$/,
exclude: /(node_modules|bower_components)/, exclude: /(node_modules|bower_components)/,
use: { use: [
loader: 'babel-loader', {
options: { loader: 'babel-loader',
presets: ['env', 'babili'], options: {
presets: ['env', 'babili'],
},
}, },
}, { loader: 'source-map-loader' },
]
}, },
], ],
}, },
......
...@@ -63,6 +63,10 @@ align-text@^0.1.1, align-text@^0.1.3: ...@@ -63,6 +63,10 @@ align-text@^0.1.1, align-text@^0.1.3:
longest "^1.0.1" longest "^1.0.1"
repeat-string "^1.5.2" repeat-string "^1.5.2"
amdefine@>=0.0.4:
version "1.0.1"
resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
ansi-escapes@^1.1.0: ansi-escapes@^1.1.0:
version "1.4.0" version "1.4.0"
resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e" resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-1.4.0.tgz#d3a8a83b319aa67793662b13e761c7911422306e"
...@@ -186,6 +190,10 @@ async-each@^1.0.0: ...@@ -186,6 +190,10 @@ async-each@^1.0.0:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d" resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
async@^0.9.0:
version "0.9.2"
resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
async@^1.5.2: async@^1.5.2:
version "1.5.2" version "1.5.2"
resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a" resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
...@@ -1950,7 +1958,7 @@ faye-websocket@~0.11.0: ...@@ -1950,7 +1958,7 @@ faye-websocket@~0.11.0:
dependencies: dependencies:
websocket-driver ">=0.5.1" websocket-driver ">=0.5.1"
fbjs@^0.8.4, fbjs@^0.8.9: fbjs@^0.8.9:
version "0.8.12" version "0.8.12"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.12.tgz#10b5d92f76d45575fd63a217d4ea02bea2f8ed04"
dependencies: dependencies:
...@@ -2702,7 +2710,7 @@ loader-runner@^2.3.0: ...@@ -2702,7 +2710,7 @@ loader-runner@^2.3.0:
version "2.3.0" version "2.3.0"
resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2"
loader-utils@^0.2.16: loader-utils@^0.2.16, loader-utils@~0.2.2:
version "0.2.17" version "0.2.17"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348" resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348"
dependencies: dependencies:
...@@ -2799,7 +2807,7 @@ longest@^1.0.1: ...@@ -2799,7 +2807,7 @@ longest@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1: loose-envify@^1.0.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
version "1.3.1" version "1.3.1"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
dependencies: dependencies:
...@@ -3268,7 +3276,7 @@ promise@^7.1.1: ...@@ -3268,7 +3276,7 @@ promise@^7.1.1:
dependencies: dependencies:
asap "~2.0.3" asap "~2.0.3"
prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@~15.5.7: prop-types@^15.5.4, prop-types@^15.5.8:
version "15.5.8" version "15.5.8"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394"
dependencies: dependencies:
...@@ -3347,29 +3355,6 @@ rc@^1.1.7: ...@@ -3347,29 +3355,6 @@ rc@^1.1.7:
minimist "^1.2.0" minimist "^1.2.0"
strip-json-comments "~2.0.1" strip-json-comments "~2.0.1"
react-addons-css-transition-group@^15.5.2:
version "15.5.2"
resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.5.2.tgz#ea7e0a9f0e1c27ca426da4efd3559915bd42ead2"
dependencies:
fbjs "^0.8.4"
object-assign "^4.1.0"
react-addons-transition-group@^15.5.2:
version "15.5.2"
resolved "https://registry.yarnpkg.com/react-addons-transition-group/-/react-addons-transition-group-15.5.2.tgz#da6989d9cffe27dffacaedc862000ffb09ae2206"
dependencies:
fbjs "^0.8.4"
object-assign "^4.1.0"
react-dom@^15.5.4:
version "15.5.4"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.5.4.tgz#ba0c28786fd52ed7e4f2135fe0288d462aef93da"
dependencies:
fbjs "^0.8.9"
loose-envify "^1.1.0"
object-assign "^4.1.0"
prop-types "~15.5.7"
react-router-dom@^4.1.1: react-router-dom@^4.1.1:
version "4.1.1" version "4.1.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.1.1.tgz#3021ade1f2c160af97cf94e25594c5f294583025"
...@@ -3391,15 +3376,6 @@ react-router@^4.1.1: ...@@ -3391,15 +3376,6 @@ react-router@^4.1.1:
prop-types "^15.5.4" prop-types "^15.5.4"
warning "^3.0.0" warning "^3.0.0"
react@^15.5.4:
version "15.5.4"
resolved "https://registry.yarnpkg.com/react/-/react-15.5.4.tgz#fa83eb01506ab237cdc1c8c3b1cea8de012bf047"
dependencies:
fbjs "^0.8.9"
loose-envify "^1.1.0"
object-assign "^4.1.0"
prop-types "^15.5.7"
reactstrap-tether@1.3.4: reactstrap-tether@1.3.4:
version "1.3.4" version "1.3.4"
resolved "https://registry.yarnpkg.com/reactstrap-tether/-/reactstrap-tether-1.3.4.tgz#86d94d30216ffa34ceb2c626f4b9912c0d193894" resolved "https://registry.yarnpkg.com/reactstrap-tether/-/reactstrap-tether-1.3.4.tgz#86d94d30216ffa34ceb2c626f4b9912c0d193894"
...@@ -3746,6 +3722,14 @@ source-list-map@^1.1.1: ...@@ -3746,6 +3722,14 @@ source-list-map@^1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-1.1.1.tgz#1a33ac210ca144d1e561f906ebccab5669ff4cb4" resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-1.1.1.tgz#1a33ac210ca144d1e561f906ebccab5669ff4cb4"
source-map-loader@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-0.2.1.tgz#48126be9230bd47fad05e46a8c3c2e3d2dabe507"
dependencies:
async "^0.9.0"
loader-utils "~0.2.2"
source-map "~0.1.33"
source-map-support@^0.4.2: source-map-support@^0.4.2:
version "0.4.14" version "0.4.14"
resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.14.tgz#9d4463772598b86271b4f523f6c1f4e02a7d6aef" resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.14.tgz#9d4463772598b86271b4f523f6c1f4e02a7d6aef"
...@@ -3756,6 +3740,12 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, sour ...@@ -3756,6 +3740,12 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, sour
version "0.5.6" version "0.5.6"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
source-map@~0.1.33:
version "0.1.43"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
dependencies:
amdefine ">=0.0.4"
spdx-correct@~1.0.0: spdx-correct@~1.0.0:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40" resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment