integrate React & Material UI

[sheppard]

This is a work-in-progress branch for wq.app 1.3. See #111 and wq/wq#41.

References

• https://reactjs.org/
• https://material-ui.com/

Tasks

• Integrate React
  • Isolate all jQuery-specific code into @wq/jquery-mobile
  • Create React integration module (@wq/react)
  • Allow any @wq/app plugin to define new components
  • Run plugin components in on-demand React root when using @wq/jquery-mobile
• Material UI Views
  • Create Material UI integration module (@wq/material)
  • Header / Footer
  • Index
  • List
  • Detail
  • Edit (requires form components)
  • Login / Logout
  • Other / Fallback
• Forms
  • Integrate form state library
  • Integrate MUI-compatible form components
• Update @wq/map
  • Create generic React components for Map/Basemap/Overlay/etc.
  • Isolate Leaflet-specific code into @wq/leaflet
  • Create MapBox GL JS integration module (@wq/mapbox)
  • Restore/update geometry editing

Early Preview Instructions

1. Install wq 1.2
2. Start new project with npm enabled (but don't run npm install yet)

wq start --with-npm --skip-npm-install
cd $PROJECT

3. Install latest development builds from bintray

cd app/
echo "@wq:registry=https://api.bintray.com/npm/wq/npm" > .npmrc
npm install @wq/app@latest \
            @wq/material@latest \
            @wq/mapbox@latest  # or @wq/leaflet@latest

4. Update src/index.js

- import app, { patterns, photos } from '@wq/app';
- import map from '@wq/map';
+ import app from '@wq/app';
+ import material from '@wq/material';
+ import mapbox from '@wq/mapbox';  // or @wq/leaflet
  import config from './config';
  import * as serviceWorker from './serviceWorker';

- app.use(map);
- app.use(patterns);
- app.use(photos);
+ app.use([material, mapbox]);

5. Preview in browser

npm start