SchemaForm sketching

src/components/App.tsx

@@ -13,8 +13,8 @@ class App extends React.Component {
       <div className='Application'>
         <Navigation />
         <Switch>
-          <Route exact={true} path="/" render={FrontPage} />
-          <Route path="/forms/:formSlug" render={() => <FormView />} />
+          <Route exact={true} path="/" component={FrontPage} />
+          <Route path="/forms/:formSlug" component={FormView} />
           <Route render={NotFound} />
         </Switch>
       </div>

src/components/DataTable/index.tsx

@@ -10,7 +10,7 @@ import Session from '../SessionContext/Session';
 interface DataTableProps {
   endpoint: string;
   columns: string[];
-  namespaces?: string[];
+  ns?: string[];
 }
 
 interface DataTableState<ItemType> {
@@ -41,10 +41,10 @@ export default class DataTable<ItemType> extends React.PureComponent<DataTablePr
 
     const { columns } = this.props;
     const { items } = this.state;
-    const namespaces = this.props.namespaces ? this.props.namespaces.concat([this.defaultNamespace]) : [this.defaultNamespace];
+    const ns = this.props.ns ? this.props.ns.concat([this.defaultNamespace]) : [this.defaultNamespace];
 
     return (
-      <NamespacesConsumer ns={namespaces}>
+      <NamespacesConsumer ns={ns}>
         {(t) => (
           <Table>
             <thead>

src/components/FormView.tsx

@@ -1,8 +1,51 @@
 import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
 
+import MainViewContainer from './MainViewContainer';
+import SchemaForm from './SchemaForm';
+import { Field } from './SchemaForm/models';
+
+
+
+interface FormViewRouterProps {
+  formSlug: string;
+}
+
+interface FormViewState {
+  title?: string;
+  introductionText?: string;
+  fields: Field[];
+}
+
+
+export default class FormView extends React.Component<RouteComponentProps<FormViewRouterProps>, FormViewState> {
+  state: FormViewState = {
+    title: 'Dynaamine lomake höhöhö',
+    introductionText: 'Lorem ipsum höhöhö sit amet.\n\nWith paragraphs!',
+    fields: [
+      {
+        type: 'Input',
+        name: 'foo',
+        title: 'Foo',
+      },
+      {
+        type: 'TextArea',
+        name: 'bar',
+        title: 'Bar',
+      },
+    ],
+  };
 
-export default class FormView extends React.Component<{}, {}> {
   render() {
-    return <div>form view</div>;
+    const { title, fields, introductionText } = this.state;
+
+    return (
+      <MainViewContainer>
+        {title ? <h1>{title}</h1> : null}
+        {introductionText ? introductionText.split('\n\n').map((paragraph, index) => <p key={index}>{paragraph}</p>) : null}
+
+        <SchemaForm fields={fields} layout="horizontal" />
+      </MainViewContainer>
+    );
   }
 }

src/components/FrontPage.tsx

@@ -12,7 +12,7 @@ export default () => (
     <DataTable
       endpoint="events"
       columns={['name', 'headline']}
-      namespaces={["Event"]}
+      ns={["Event"]}
     />
   </Container>
 );

src/components/MainViewContainer/index.css

@@ -0,0 +1,3 @@
+.MainViewContainer {
+  padding-top: 2em;
+}

src/components/MainViewContainer/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import Container from "reactstrap/lib/Container";
+
+import './index.css';
+
+
+export default class MainViewContainer extends React.Component<{}, {}> {
+  render() {
+    return <Container className='MainViewContainer'>{this.props.children}</Container>;
+  }
+}

src/components/SchemaForm/index.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { NamespacesConsumer } from 'react-i18next';
+
+import Button from 'reactstrap/lib/Button';
+import ButtonGroup from 'reactstrap/lib/ButtonGroup';
+import Col from 'reactstrap/lib/Col';
+import Form from 'reactstrap/lib/Form';
+import FormGroup from 'reactstrap/lib/FormGroup';
+import Input from 'reactstrap/lib/Input';
+import Label from 'reactstrap/lib/Label';
+
+import { Field, FieldType } from './models';
+
+
+interface SchemaFormProps {
+  fields: Field[];
+  layout?: 'vertical' | 'horizontal';
+  ns?: string[];
+}
+
+
+interface SchemaFormState { }
+
+
+export default class SchemaForm extends React.PureComponent<SchemaFormProps, SchemaFormState> {
+  static defaultNamespace = 'SchemaForm';
+
+  render() {
+    const { layout } = this.props;
+    const ns = (this.props.ns || []).concat(['SchemaForm']);
+
+    return (
+      <NamespacesConsumer ns={ns}>
+        {t => (
+          <Form className={layout === 'horizontal' ? 'form-horizontal' : ''}>
+            {this.props.fields.map(this.renderField)}
+
+            <ButtonGroup className="float-md-right">
+              <Button color="primary">{t('submit')}</Button>
+            </ButtonGroup>
+          </Form>
+        )}
+      </NamespacesConsumer>
+    );
+  }
+
+  renderField = (field: Field) => {
+    const { layout } = this.props;
+    const { name, title, helpText } = field;
+
+    switch (layout) {
+      case 'horizontal':
+        return (
+          <FormGroup key={name} className="row">
+            <Label for={name} className="col-md-3 col-form-label">{title}</Label>
+            <Col md={9}>{this.renderInput(field)}</Col>
+          </FormGroup>
+        );
+      case 'vertical':
+      default:
+        return (
+          <FormGroup key={name} className="row">
+            <Label for={name}>{title}</Label>
+            {this.renderInput(field)}
+          </FormGroup>
+        );
+    }
+  }
+
+  renderInput = (field: Field) => {
+    switch (field.type) {
+      case 'Input':
+        return <Input name={field.name} />;
+      case 'TextArea':
+        return <Input type="textarea" name={field.name} rows={field.rows || 10} />;
+    }
+  }
+}

src/components/SchemaForm/models.ts

@@ -0,0 +1,23 @@
+export type FieldType = 'Input' | 'TextArea';
+
+interface BaseField {
+  type: FieldType;
+  name: string;
+  title: string;
+  helpText?: string;
+  required?: boolean;
+}
+
+
+export interface Input extends BaseField {
+  type: 'Input';
+}
+
+
+export interface TextArea extends BaseField {
+  type: 'TextArea';
+  rows?: number;
+  cols?: number;
+}
+
+export type Field = Input | TextArea;

src/translations/en.ts

@@ -9,6 +9,9 @@ const translations: Translations = {
     logIn: 'Log in',
     logOut: 'Log out',
   },
+  SchemaForm: {
+    submit: 'Submit',
+  }
 };
 
 export default translations;

src/translations/fi.ts

@@ -9,5 +9,8 @@ const translations: Translations = {
     logIn: 'Kirjaudu sisään',
     logOut: 'Kirjaudu ulos',
   },
+  SchemaForm: {
+    submit: 'Lähetä',
+  },
 };
 export default translations;

src/translations/index.ts

@@ -7,10 +7,17 @@ import fi from './fi';
 
 export interface Translations {
   [index: string]: i18n.ResourceKey;
+  Event: {
+    name: string;
+    headline: string;
+  };
   Navigation: {
     logIn: string;
     logOut: string;
   };
+  SchemaForm: {
+    submit: string;
+  };
 }
 
 const resources: i18n.Resource = { fi, en };