mass update

.env

@@ -1 +1,2 @@
 BROWSER=none
+NODE_PATH=src/

package.json

@@ -26,7 +26,7 @@
   },
   "scripts": {
     "build": "inferno-scripts build",
-    "dist": "npm run build && build",
+    "dist": "yarn run build && build",
     "eject": "inferno-scripts eject",
     "electron-start": "node src/electron/wait-inferno",
     "electron": "electron .",

public/css/app.css

@@ -31,6 +31,12 @@ bs-container > * {
 	padding: 0.5em 1em;
 }
 
+bs-card,
+bs-card-deck,
+bs-card-group,
+bs-card-header,
+bs-card-body,
+bs-card-footer,
 bs-form-feedback,
 bs-form-group,
 bs-jumbotron {

src/components/Bootstrap/Bootstrap.js

@@ -1,4 +1,4 @@
-import Alert from 'inferno-bootstrap/dist/Alert';
+import BSAlert from 'inferno-bootstrap/dist/Alert';
 import Badge from 'inferno-bootstrap/dist/Badge';
 import Breadcrumb from 'inferno-bootstrap/dist/Breadcrumb';
 import BreadcrumbItem from 'inferno-bootstrap/dist/BreadcrumbItem';
@@ -31,10 +31,10 @@ export const BSWrapper = (Component, tagName) => {
 	)
 }
 
+export const Alert = BSWrapper(BSAlert, 'bs-alert');
 export const Jumbotron = BSWrapper(BSJumbotron, 'bs-jumbotron');
 
 export {
-	Alert,
 	Badge,
 	Breadcrumb,
 	BreadcrumbItem,

src/components/Bootstrap/Card.js

@@ -1,27 +1,30 @@
-import Card from 'inferno-bootstrap/dist/Card/Card';
+import BSCard from 'inferno-bootstrap/dist/Card/Card';
-import CardBody from 'inferno-bootstrap/dist/Card/CardBody';
+import BSCardBody from 'inferno-bootstrap/dist/Card/CardBody';
-import CardColumns from 'inferno-bootstrap/dist/Card/CardColumns';
+import BSCardColumns from 'inferno-bootstrap/dist/Card/CardColumns';
-import CardDeck from 'inferno-bootstrap/dist/Card/CardDeck';
+import BSCardDeck from 'inferno-bootstrap/dist/Card/CardDeck';
-import CardFooter from 'inferno-bootstrap/dist/Card/CardFooter';
+import BSCardFooter from 'inferno-bootstrap/dist/Card/CardFooter';
-import CardGroup from 'inferno-bootstrap/dist/Card/CardGroup';
+import BSCardGroup from 'inferno-bootstrap/dist/Card/CardGroup';
-import CardHeader from 'inferno-bootstrap/dist/Card/CardHeader';
+import BSCardHeader from 'inferno-bootstrap/dist/Card/CardHeader';
+import BSCardImgOverlay from 'inferno-bootstrap/dist/Card/CardImgOverlay';
 import CardImg from 'inferno-bootstrap/dist/Card/CardImg';
-import CardImgOverlay from 'inferno-bootstrap/dist/Card/CardImgOverlay';
 import CardLink from 'inferno-bootstrap/dist/Card/CardLink';
 import CardSubtitle from 'inferno-bootstrap/dist/Card/CardSubtitle';
 import CardText from 'inferno-bootstrap/dist/Card/CardText';
 import CardTitle from 'inferno-bootstrap/dist/Card/CardTitle';
 
+import { BSWrapper } from 'components/Bootstrap';
+
+export const Card = BSWrapper(BSCard, 'bs-card');
+export const CardBody = BSWrapper(BSCardBody, 'bs-card-body');
+export const CardColumns = BSWrapper(BSCardColumns, 'bs-card-columns');
+export const CardDeck = BSWrapper(BSCardDeck, 'bs-card-deck');
+export const CardFooter = BSWrapper(BSCardFooter, 'bs-card-footer');
+export const CardGroup = BSWrapper(BSCardGroup, 'bs-card-group');
+export const CardHeader = BSWrapper(BSCardHeader, 'bs-card-header');
+export const CardImgOverlay = BSWrapper(BSCardImgOverlay, 'bs-card-img-overlay');
+
 export {
-	Card,
-	CardBody,
-	CardColumns,
-	CardDeck,
-	CardFooter,
-	CardGroup,
-	CardHeader,
 	CardImg,
-	CardImgOverlay,
 	CardLink,
 	CardSubtitle,
 	CardText,

src/components/Bootstrap/Form.js

@@ -1,4 +1,3 @@
-import { BSWrapper } from './Bootstrap';
 import Button from 'inferno-bootstrap/dist/Button';
 import Form from 'inferno-bootstrap/dist/Form/Form';
 import BSFormFeedback from 'inferno-bootstrap/dist/Form/FormFeedback';
@@ -11,6 +10,8 @@ import InputGroupButtonDropdown from 'inferno-bootstrap/dist/Form/InputGroupButt
 import InputGroupText from 'inferno-bootstrap/dist/Form/InputGroupText';
 import Label from 'inferno-bootstrap/dist/Form/Label';
 
+import { BSWrapper } from 'components/Bootstrap';
+
 export const FormFeedback = BSWrapper(BSFormFeedback, 'bs-form-feedback');
 export const FormGroup = BSWrapper(BSFormGroup, 'bs-form-group');
 

src/components/Bootstrap/Grid.js

@@ -1,6 +1,7 @@
 import BSCol from 'inferno-bootstrap/dist/Col';
 import BSContainer from 'inferno-bootstrap/dist/Container';
 import BSRow from 'inferno-bootstrap/dist/Row';
+
 import { BSWrapper } from './Bootstrap'
 
 export const Col = BSWrapper(BSCol, 'bs-col');

src/components/Form/FormBlock.js

@@ -3,7 +3,7 @@ import {
 	FormGroup,
 	Input,
 	Label,
-} from './Bootstrap';
+} from 'components/Bootstrap';
 
 export const FormBlock = ({
 	children,
@@ -16,7 +16,7 @@ export const FormBlock = ({
 		: <Input id={props.name} name={props.name} type={type} {...props} />;
 
 	return (
-		<Col xs={12} sm={6} md={3}>
+		<Col xs={12} sm={6} md={3} className="d-flex align-items-baseline justify-content-around">
 			<FormGroup>
 				<Label for={props.name}>{label}</Label>
 				{formElement}

src/components/Form/index.js

@@ -0,0 +1 @@
+export * from './FormBlock';

src/components/index.js

@@ -1,2 +1,2 @@
 export * from './Bootstrap';
-export * from './FormBlock';
+export * from './Form';

src/views/Film/FilmAddView.js

@@ -1,27 +1,46 @@
-import { Component } from 'inferno';
+import { linkEvent, Component } from 'inferno';
 
 import {
 	Button,
+	Card,
+	CardBody,
+	CardHeader,
+	CardFooter,
+	CardTitle,
 	Col,
 	Form,
 	Row,
-} from '../../components/Bootstrap'
+} from 'components/Bootstrap'
 
-import { FormBlock } from '../../components';
+import { FormBlock } from 'components/Form';
 
 export class FilmAddView extends Component {
 	constructor (props) {
 		super (props);
 
 		this.state = {
-
+			form: {
+				valid: {},
+				values: {},
+			}
 		};
 	}
 
+	handleFormChange (e) {
+		console.log(e);
+	}
+
 	render () {
 		return (
-			<Form>
+			<Row className="full-height">
-				<Row>
+				<Col sm={12} md={8} lg={4} className="abs-center">
+					<Form onChange={ linkEvent(this, this.handleFormChange) }>
+						<Card>
+							<CardHeader>
+								<CardTitle>Add a Film</CardTitle>
+							</CardHeader>
+							<CardBody>
+								<Row className="align-items-baseline">
 									<FormBlock
 										label="Brand"
 										name="brand"
@@ -56,12 +75,18 @@ export class FilmAddView extends Component {
 										</select>
 									</FormBlock>
 								</Row>
+							</CardBody>
+							<CardFooter>
 								<Row>
 									<Col xs={12}>
 										<Button color="primary" type="submit">Save</Button>
 									</Col>
 								</Row>
+							</CardFooter>
+						</Card>
 					</Form>
+				</Col>
+			</Row>
 		)
 	}
 }

src/views/HomeView.js

@@ -2,7 +2,7 @@ import {
 	Container,
 	Jumbotron,
 	Row,
-} from '../components/Bootstrap';
+} from 'components/Bootstrap';
 
 function handleDrop (e) {
 	e.preventDefault();

src/views/OopsView.js

@@ -1,4 +1,4 @@
-import { Alert, Row } from '../components/Bootstrap';
+import { Alert, Row } from 'components/Bootstrap';
 
 export const OopsView = (props) => (
 	<Row className="align-items-center justify-content-center full-height">