├── screenshot.jpg
├── src
├── electron
│ ├── .gitignore
│ ├── src
│ │ ├── globals.js
│ │ └── state.js
│ ├── package.json
│ ├── index.js
│ └── index.html
├── shared
│ ├── stores
│ │ ├── app.js
│ │ ├── ui
│ │ │ ├── PostCreateModal.js
│ │ │ ├── AppBar.js
│ │ │ ├── AppNav.js
│ │ │ ├── SnackBar.js
│ │ │ └── Auth.js
│ │ ├── ui.js
│ │ ├── auth.js
│ │ └── post.js
│ ├── styles
│ │ ├── AppNav.css
│ │ ├── AppLayout.css
│ │ ├── AppBar.css
│ │ ├── PostList.css
│ │ ├── _.modal.js
│ │ ├── _.material.js
│ │ ├── Home.css
│ │ ├── _.global.css
│ │ ├── MenuLinkDX.css
│ │ ├── _.custom.css
│ │ └── _.mixins.js
│ ├── components
│ │ ├── PostInfo.jsx
│ │ ├── form
│ │ │ ├── inputs
│ │ │ │ └── MaterialTextField.jsx
│ │ │ ├── AuthLogin.jsx
│ │ │ ├── AuthRegister.jsx
│ │ │ └── controls
│ │ │ │ └── FormControls.jsx
│ │ ├── AppNav.jsx
│ │ ├── MenuLinksSX.jsx
│ │ ├── PostSearch.jsx
│ │ ├── AuthModal.jsx
│ │ ├── Pagination.jsx
│ │ ├── PostListHeader.jsx
│ │ ├── PostFilter.jsx
│ │ ├── PostDetailsHeader.jsx
│ │ ├── PostListBar.jsx
│ │ ├── AuthForm.jsx
│ │ ├── AppBar.jsx
│ │ ├── PostDetails.jsx
│ │ ├── PostList.jsx
│ │ ├── PostCreateModal.jsx
│ │ └── MenuLinksDX.jsx
│ ├── containers
│ │ ├── NotFound.jsx
│ │ ├── Auth.jsx
│ │ ├── Messages.jsx
│ │ ├── Message.jsx
│ │ ├── Home.jsx
│ │ ├── AppLayout.jsx
│ │ ├── Breakpoints.jsx
│ │ └── Packages.jsx
│ ├── forms
│ │ ├── _.bindings.js
│ │ ├── auth.js
│ │ ├── _.extend.js
│ │ ├── post.js
│ │ └── user.js
│ ├── stores.js
│ ├── app.js
│ └── routes.jsx
├── web
│ ├── bootstrap.js
│ ├── middleware
│ │ ├── serveStatic.js
│ │ ├── hot.js
│ │ └── routing.js
│ ├── App.jsx
│ ├── views
│ │ └── index.ejs
│ ├── client.jsx
│ ├── server.js
│ └── ssr.js
├── api
│ ├── hooks
│ │ ├── addDelay.js
│ │ ├── timestamp.js
│ │ ├── setupJWTPayload.js
│ │ └── setUUID.js
│ ├── middleware
│ │ ├── notFound.js
│ │ └── logger.js
│ ├── services
│ │ ├── post
│ │ │ ├── config.js
│ │ │ ├── hooks.after.js
│ │ │ ├── hooks.before.js
│ │ │ └── model.js
│ │ └── user
│ │ │ ├── config.js
│ │ │ ├── hooks.after.js
│ │ │ ├── model.js
│ │ │ └── hooks.before.js
│ ├── connector.js
│ ├── auth.js
│ ├── autoloader.js
│ └── server.js
├── seeds
│ ├── handlers
│ │ └── development.js
│ └── factories
│ │ ├── post.js
│ │ └── user.js
└── utils
│ ├── jwt.js
│ ├── seeder.runner.js
│ ├── authorize.hoc.jsx
│ ├── services.autoload.js
│ ├── server.start.js
│ └── logger.js
├── .gitignore
├── public
└── static
│ └── img
│ └── bg.jpg
├── run
├── start.api.js
├── global.js
├── start.web.js
└── start.seeder.js
├── webpack
├── .eslintrc
├── globals.js
├── config.client.js
├── config.server.js
├── loaders.js
├── config.server.build.js
├── config.client.dev.js
├── config.server.dev.js
└── config.client.build.js
├── config
├── feathers
│ ├── production.json
│ └── default.json
├── hot.js
├── expose.js
├── vendor.js
├── postcss.js
└── dir.js
├── .env
├── .babelrc
├── .eslintrc
├── CHANGELOG.md
├── webpack.config.client.babel.js
├── LICENSE
├── webpack.config.babel.js
├── README.md
├── package.json
└── DOCUMENTATION.md
/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foxhound87/rfx-stack/HEAD/screenshot.jpg
--------------------------------------------------------------------------------
/src/electron/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | .DS_Store
3 | npm-debug.log
4 | yarn.lock
5 |
--------------------------------------------------------------------------------
/src/shared/stores/app.js:
--------------------------------------------------------------------------------
1 | export default class AppStore {
2 |
3 | ssrLocation = null;
4 | }
5 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /public/build
2 | /run/build
3 | /node_modules
4 | .DS_Store
5 | npm-debug.log
6 | yarn.lock
7 |
--------------------------------------------------------------------------------
/public/static/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/foxhound87/rfx-stack/HEAD/public/static/img/bg.jpg
--------------------------------------------------------------------------------
/run/start.api.js:
--------------------------------------------------------------------------------
1 | require('babel-register');
2 | require('./global');
3 | require('../src/api/server');
4 |
--------------------------------------------------------------------------------
/src/electron/src/globals.js:
--------------------------------------------------------------------------------
1 | /*
2 | Globals
3 | */
4 | global.ELECTRON = 'ELECTRON';
5 | global.HOT = 'HOT';
6 |
--------------------------------------------------------------------------------
/src/shared/styles/AppNav.css:
--------------------------------------------------------------------------------
1 | .drawer a {
2 | padding: 15px;
3 | }
4 |
5 | .drawer a:hover {
6 | background: #3A506B;
7 | }
8 |
--------------------------------------------------------------------------------
/webpack/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/web/bootstrap.js:
--------------------------------------------------------------------------------
1 | /**
2 | Store Bootstrap
3 | @return array of promises
4 | */
5 | export default store => ([
6 | store.auth.authenticate(),
7 | ]);
8 |
--------------------------------------------------------------------------------
/config/feathers/production.json:
--------------------------------------------------------------------------------
1 | {
2 | "auth": {
3 | "secret": "JNoSF4uRkGB1zhccVkpX3ulB/1KErbj/tuhCTY0dkpVNyYTU8bJiNC4ErCUK4sDSe/YMjuC0kqtlYnWuK8tHsQ=="
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/src/shared/styles/AppLayout.css:
--------------------------------------------------------------------------------
1 | .su {
2 | min-height: 400px;
3 | margin-left: 256px;
4 | }
5 |
6 | .content {
7 | padding-top: 0;
8 | display: block;
9 | }
10 |
--------------------------------------------------------------------------------
/src/api/hooks/addDelay.js:
--------------------------------------------------------------------------------
1 | // Add a delay to test slower connections
2 | export function addDelay(delay) {
3 | return (hook, next) => {
4 | setTimeout(next, delay);
5 | };
6 | }
7 |
--------------------------------------------------------------------------------
/run/global.js:
--------------------------------------------------------------------------------
1 | const dotenv = require('dotenv');
2 | const path = require('path');
3 | const dir = require('../config/dir').default;
4 |
5 | dotenv.config();
6 | global.DIR = dir(path);
7 |
--------------------------------------------------------------------------------
/src/api/hooks/timestamp.js:
--------------------------------------------------------------------------------
1 | export function timestamp(name) {
2 | return (hook, next) => {
3 | const data = hook.data;
4 | data[name] = new Date();
5 | next();
6 | };
7 | }
8 |
--------------------------------------------------------------------------------
/src/electron/src/state.js:
--------------------------------------------------------------------------------
1 | /* eslint no-underscore-dangle: 0 */
2 |
3 | /*
4 | Initial State
5 | */
6 | window.__STATE = {
7 | app: { ssrLocation: '#/' },
8 | ui: {},
9 | };
10 |
--------------------------------------------------------------------------------
/src/api/middleware/notFound.js:
--------------------------------------------------------------------------------
1 | import errors from 'feathers-errors';
2 |
3 | export default function () {
4 | return (req, res, next) => next(new errors.NotFound('Page not found'));
5 | }
6 |
--------------------------------------------------------------------------------
/src/shared/styles/AppBar.css:
--------------------------------------------------------------------------------
1 | .bar {
2 | z-index: 999;
3 | background: none;
4 | color: #5BC0BE;
5 | }
6 |
7 | .leftShifted {
8 | left: 256px;
9 | }
10 |
11 | .openNavBtn:hover {
12 | color: #6FFFE9;
13 | }
14 |
--------------------------------------------------------------------------------
/run/start.web.js:
--------------------------------------------------------------------------------
1 | require('./global');
2 |
3 | // neded for css import on node
4 | require('css-modules-require-hook')({
5 | generateScopedName: '[name]__[local]___[hash:base64:5]',
6 | });
7 |
8 | require('../src/web/server');
9 |
--------------------------------------------------------------------------------
/src/api/services/post/config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | model: 'post',
3 | namespace: '/post',
4 | options: {
5 | id: 'uuid',
6 | paginate: {
7 | default: 25,
8 | max: 50,
9 | },
10 | },
11 | };
12 |
--------------------------------------------------------------------------------
/src/api/services/user/config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | model: 'user',
3 | namespace: '/user',
4 | options: {
5 | id: 'uuid',
6 | paginate: {
7 | default: 25,
8 | max: 50,
9 | },
10 | },
11 | };
12 |
--------------------------------------------------------------------------------
/src/shared/styles/PostList.css:
--------------------------------------------------------------------------------
1 | .postList ul {
2 | list-style: none;
3 | padding: 0;
4 | }
5 |
6 | .postList ul li {
7 | border-bottom: 1px solid #ccc;
8 | }
9 |
10 | .postList h3 {
11 | font-weight: 500;
12 | }
13 |
--------------------------------------------------------------------------------
/src/shared/stores/ui/PostCreateModal.js:
--------------------------------------------------------------------------------
1 | import { observable } from 'mobx';
2 | import { toggle } from 'rfx-core';
3 |
4 | @toggle('open', 'isOpen')
5 | export default class PostCreateModal {
6 |
7 | @observable isOpen = false;
8 | }
9 |
--------------------------------------------------------------------------------
/src/shared/stores/ui/AppBar.js:
--------------------------------------------------------------------------------
1 | import { observable } from 'mobx';
2 | import { toggle } from 'rfx-core';
3 |
4 | @toggle('toggleAccountMenu', 'accountMenuIsOpen')
5 | export default class AppBar {
6 |
7 | @observable accountMenuIsOpen = false;
8 | }
9 |
--------------------------------------------------------------------------------
/src/api/hooks/setupJWTPayload.js:
--------------------------------------------------------------------------------
1 | export function setupJWTPayload() {
2 | return (hook) => {
3 | // eslint-disable-next-line
4 | hook.data.payload = {
5 | userId: hook.params.user.id,
6 | };
7 |
8 | return Promise.resolve(hook);
9 | };
10 | }
11 |
--------------------------------------------------------------------------------
/config/hot.js:
--------------------------------------------------------------------------------
1 | /*
2 | Webpack Dev Middleware Config
3 | */
4 | export const wdmc = ({
5 | historyApiFallback: false,
6 | quiet: true,
7 | hot: true,
8 | });
9 |
10 | /*
11 | Webpack Hot Middleware Config
12 | */
13 | export const whmc = ({
14 | // ...
15 | });
16 |
--------------------------------------------------------------------------------
/src/api/connector.js:
--------------------------------------------------------------------------------
1 | import mongoose from 'mongoose';
2 |
3 | export function connector(config) {
4 | const { host, port, name } = config;
5 | const uri = ['mongodb://', host, ':', port, '/', name].join('');
6 | mongoose.Promise = global.Promise;
7 | return mongoose.connect(uri);
8 | }
9 |
--------------------------------------------------------------------------------
/src/shared/stores/ui/AppNav.js:
--------------------------------------------------------------------------------
1 | import { observable } from 'mobx';
2 | import { toggle } from 'rfx-core';
3 |
4 | @toggle('open', 'isOpen')
5 | @toggle('dock', 'isDocked')
6 | export default class AppNav {
7 |
8 | @observable isOpen = false;
9 | @observable isDocked = false;
10 | }
11 |
--------------------------------------------------------------------------------
/run/start.seeder.js:
--------------------------------------------------------------------------------
1 | require('babel-register');
2 | require('./global');
3 |
4 | const getenv = require('getenv');
5 | const env = require('../config/expose');
6 |
7 | global.CONFIG = getenv.multi(env).default;
8 |
9 | require('../src/utils/seeder.runner')
10 | .default('./src/seeds/');
11 |
--------------------------------------------------------------------------------
/src/shared/components/PostInfo.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 |
4 | export default observer(({ itemsFound, currentPage, totalPages }) => (
5 |
6 | {itemsFound} Items found - Page {currentPage} of {totalPages}
7 |
8 | ));
9 |
--------------------------------------------------------------------------------
/src/web/middleware/serveStatic.js:
--------------------------------------------------------------------------------
1 | import serveStatic from 'serve-static';
2 |
3 | export function serveStaticMiddleware() {
4 | const app = this;
5 | const Dir = global.DIR;
6 |
7 | app.use('/build', serveStatic(Dir.staticBuild));
8 | app.use('/static', serveStatic(Dir.static));
9 | }
10 |
--------------------------------------------------------------------------------
/webpack/globals.js:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 |
3 | const Dir = global.DIR;
4 |
5 | export default {
6 | resolve: {
7 | modules: ['node_modules'],
8 | extensions: ['.js', '.jsx', '.json'],
9 | alias: {
10 | react: path.join(Dir.modules, 'react'),
11 | },
12 | },
13 | };
14 |
--------------------------------------------------------------------------------
/src/seeds/handlers/development.js:
--------------------------------------------------------------------------------
1 | import { userSeederDevelopment as userSeeder } from '@/seeds/factories/user';
2 | import { postSeederDevelopment as postSeeder } from '@/seeds/factories/post';
3 |
4 | export function handle() {
5 | return [
6 | userSeeder(),
7 | postSeeder(50),
8 | ];
9 | }
10 |
--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | NODE_CONFIG_DIR=./config/feathers/
2 |
3 | BROWSERSYNC_HOST=localhost
4 | BROWSERSYNC_PORT=3100
5 |
6 | WEB_HOST=localhost
7 | WEB_PORT=3000
8 |
9 | API_HOST=localhost
10 | API_PORT=9090
11 |
12 | IO_HOST=localhost
13 | IO_PORT=9090
14 |
15 | DB_HOST=localhost
16 | DB_NAME=aggregator
17 | DB_PORT=27017
18 |
--------------------------------------------------------------------------------
/config/expose.js:
--------------------------------------------------------------------------------
1 | /*
2 | Expose Env to Client Side
3 | */
4 | export default ({
5 | web: {
6 | host: 'WEB_HOST',
7 | port: 'WEB_PORT',
8 | },
9 | api: {
10 | host: 'API_HOST',
11 | port: 'API_PORT',
12 | },
13 | io: {
14 | host: 'IO_HOST',
15 | port: 'IO_PORT',
16 | },
17 | });
18 |
--------------------------------------------------------------------------------
/src/api/services/post/hooks.after.js:
--------------------------------------------------------------------------------
1 | import hooks from 'feathers-hooks';
2 |
3 | /**
4 | Hook: after
5 | Service: post
6 | */
7 | export default {
8 | all: [
9 | hooks.remove('__v', '_id'),
10 | ],
11 | find: [],
12 | get: [],
13 | create: [],
14 | update: [],
15 | patch: [],
16 | remove: [],
17 | };
18 |
--------------------------------------------------------------------------------
/src/api/services/user/hooks.after.js:
--------------------------------------------------------------------------------
1 | import hooks from 'feathers-hooks';
2 |
3 | /**
4 | Hook: after
5 | Service: user
6 | */
7 | export default {
8 | all: [
9 | hooks.remove('__v', 'password'),
10 | ],
11 | find: [
12 | ],
13 | get: [],
14 | create: [],
15 | update: [],
16 | patch: [],
17 | remove: [],
18 | };
19 |
--------------------------------------------------------------------------------
/src/shared/components/form/inputs/MaterialTextField.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 | import TextField from 'material-ui/TextField';
4 |
5 | export default observer(({ field, type = 'text', placeholder = null }) => (
6 |
7 |
8 |
9 | ));
10 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "stage-0", "react"],
3 | "plugins": [
4 | "transform-decorators-legacy",
5 | "transform-class-properties",
6 | "transform-runtime",
7 | ["babel-root-import", [{
8 | "rootPathPrefix": "~",
9 | "rootPathSuffix": "."
10 | }, {
11 | "rootPathPrefix": "@",
12 | "rootPathSuffix": "src"
13 | }]]
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/src/shared/containers/NotFound.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Helmet from 'react-helmet';
3 |
4 | export default class NotFound extends Component {
5 |
6 | static fetchData() {}
7 |
8 | render() {
9 | return (
10 |
11 |
12 |
Not Found
13 |
14 | );
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/api/services/post/hooks.before.js:
--------------------------------------------------------------------------------
1 | import { hooks as auth } from 'feathers-authentication';
2 | import { setUUID } from '@/api/hooks/setUUID';
3 |
4 | /**
5 | Hook: before
6 | Service: post
7 | */
8 | export default {
9 | all: [
10 | auth.authenticate(['jwt', 'local']),
11 | ],
12 | find: [],
13 | get: [],
14 | create: [
15 | setUUID(),
16 | ],
17 | update: [],
18 | patch: [],
19 | remove: [],
20 | };
21 |
--------------------------------------------------------------------------------
/src/shared/stores/ui/SnackBar.js:
--------------------------------------------------------------------------------
1 | import { observable, action } from 'mobx';
2 |
3 | export default class SnackBar {
4 |
5 | @observable isOpen = false;
6 | @observable duration = 3000;
7 | @observable message = '';
8 |
9 | @action
10 | open(message) {
11 | this.message = message;
12 | this.isOpen = true;
13 | }
14 |
15 | @action
16 | close() {
17 | this.message = '';
18 | this.isOpen = false;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/shared/styles/_.modal.js:
--------------------------------------------------------------------------------
1 | /*
2 | react-modal global style
3 | */
4 | export default {
5 | overlay: {
6 | backgroundColor: 'rgba(255, 255, 255, 0.75)',
7 | },
8 | content: {
9 | backgroundColor: '#1C2541',
10 | border: 0,
11 | padding: 0,
12 | maxWidth: '450px',
13 | maxHeight: '350px',
14 | marginTop: 'auto',
15 | marginBottom: 'auto',
16 | marginLeft: 'auto',
17 | marginRight: 'auto',
18 | },
19 | };
20 |
--------------------------------------------------------------------------------
/src/api/hooks/setUUID.js:
--------------------------------------------------------------------------------
1 | import uuid from 'uuid';
2 |
3 | function assignUUID(item) {
4 | item.uuid = uuid.v4(); // eslint-disable-line no-param-reassign
5 | }
6 |
7 | export function setUUID() {
8 | return (hook, next) => {
9 | const data = hook.data;
10 |
11 | if (Array.isArray(data)) {
12 | data.map(item => assignUUID(item));
13 | return next();
14 | }
15 |
16 | assignUUID(data);
17 | return next();
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/src/shared/styles/_.material.js:
--------------------------------------------------------------------------------
1 | import { lightWhite } from 'material-ui/styles/colors';
2 |
3 | /*
4 | material-ui override styles
5 | */
6 | export default {
7 | palette: {
8 | primary1Color: '#5BC0BE',
9 | textColor: '#f0f0f0',
10 | },
11 | textField: {
12 | errorColor: '#F25F5C',
13 | },
14 | overlay: {
15 | backgroundColor: lightWhite,
16 | },
17 | drawer: {
18 | color: '#1C2541', // this is the background-color
19 | },
20 | };
21 |
--------------------------------------------------------------------------------
/src/api/services/post/model.js:
--------------------------------------------------------------------------------
1 | import mongoose, { Schema } from 'mongoose';
2 |
3 | const PostSchema = new Schema(
4 | {
5 | uuid: { type: String, required: true, unique: true },
6 | title: { type: String, required: true },
7 | completed: { type: Boolean, default: false },
8 | },
9 | {
10 | timestamps: true, // Will automatically create and update updatedAt and createdAt Fields
11 | });
12 |
13 | export default mongoose.model('post', PostSchema);
14 |
--------------------------------------------------------------------------------
/src/seeds/factories/post.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 | import faker from 'faker';
3 | import { service } from '@/shared/app';
4 |
5 | const items = [];
6 |
7 | export function factory() {
8 | return {
9 | title: faker.name.title(),
10 | completed: faker.random.boolean(),
11 | };
12 | }
13 |
14 | function pushData() {
15 | items.push(factory());
16 | }
17 |
18 | export function postSeederDevelopment(n = 15) {
19 | _.times(n, pushData);
20 | return service('post').create(items);
21 | }
22 |
--------------------------------------------------------------------------------
/src/shared/forms/_.bindings.js:
--------------------------------------------------------------------------------
1 | /**
2 | Fields Bindings
3 | https://foxhound87.github.io/mobx-react-form/docs/bindings/
4 | */
5 |
6 | export default {
7 |
8 | MaterialTextField: {
9 | id: 'id',
10 | name: 'name',
11 | type: 'type',
12 | value: 'value',
13 | label: 'floatingLabelText',
14 | placeholder: 'hintText',
15 | disabled: 'disabled',
16 | error: 'errorText',
17 | onChange: 'onChange',
18 | onFocus: 'onFocus',
19 | onBlur: 'onBlur',
20 | },
21 |
22 | };
23 |
--------------------------------------------------------------------------------
/config/vendor.js:
--------------------------------------------------------------------------------
1 | /**
2 | Vendor for webpack code splitting
3 | */
4 |
5 | export default [
6 | 'animate.css',
7 | 'bluebird',
8 | 'classnames',
9 | 'lodash',
10 | 'mobx',
11 | 'mobx-react',
12 | 'mobx-react-form',
13 | 'mobx-react-matchmedia',
14 | 'material-ui',
15 | 'react',
16 | 'react-dom',
17 | 'react-modal',
18 | 'react-pagify',
19 | 'react-parallax',
20 | 'react-router',
21 | 'react-timeago',
22 | 'rfx-core',
23 | 'validatorjs',
24 | 'tachyons',
25 | 'socket.io-client',
26 | ];
27 |
--------------------------------------------------------------------------------
/src/api/services/user/model.js:
--------------------------------------------------------------------------------
1 | import mongoose from 'mongoose';
2 |
3 | const Schema = mongoose.Schema;
4 |
5 | export default mongoose.model('user',
6 | new Schema({
7 | uuid: { type: String, required: true, unique: true },
8 | email: { type: String, required: true, unique: true },
9 | username: { type: String, required: true, unique: true },
10 | password: { type: String, required: true },
11 | createdAt: { type: Date, default: Date.now },
12 | updatedAt: { type: Date, default: Date.now },
13 | }));
14 |
--------------------------------------------------------------------------------
/src/electron/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "electron",
3 | "version": "1.0.0",
4 | "description": "Electron App",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "electron ."
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "electron-debug": "^1.0.0",
15 | "electron-packager": "^7.0.3",
16 | "electron-prebuilt": "^1.2.2",
17 | "electron-rebuild": "^1.1.5"
18 | },
19 | "dependencies": {}
20 | }
21 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": ["airbnb"],
4 | "globals": {
5 | "fetch": true,
6 | "navigator": true,
7 | "document": true,
8 | "window": true
9 | },
10 | "rules": {
11 | "react/forbid-prop-types": 0,
12 | "react/require-default-props": 0,
13 | "import/extensions": 0,
14 | "import/prefer-default-export": 0,
15 | "import/no-unresolved": [2, { "ignore": ["^[~]", "^[@]"] }],
16 | "class-methods-use-this": 0,
17 | "no-useless-computed-key": 0,
18 | "key-spacing": [0, { "align": "value" }]
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/config/postcss.js:
--------------------------------------------------------------------------------
1 | /* eslint import/no-extraneous-dependencies: 0 */
2 | import postcssImport from 'postcss-import';
3 | import postcssExtend from 'postcss-extend';
4 | import postcssFocus from 'postcss-focus';
5 | import postcssUrl from 'postcss-url';
6 | import autoprefixer from 'autoprefixer';
7 | import precss from 'precss';
8 | import cssnano from 'cssnano';
9 |
10 | export default bundler => [
11 | postcssImport({ addDependencyTo: bundler }),
12 | postcssUrl('inline'),
13 | postcssExtend(),
14 | postcssFocus(),
15 | autoprefixer(),
16 | precss(),
17 | cssnano(),
18 | ];
19 |
--------------------------------------------------------------------------------
/src/seeds/factories/user.js:
--------------------------------------------------------------------------------
1 | import faker from 'faker';
2 | import { service } from '@/shared/app';
3 |
4 | export function factory() {
5 | return {
6 | email: faker.internet.email(),
7 | username: faker.internet.userName(),
8 | password: faker.internet.password(),
9 | };
10 | }
11 |
12 | export function userSeederDevelopment() {
13 | return service('user').create({
14 | email: 'admin@test.tld',
15 | username: 'admin',
16 | password: '12345',
17 | });
18 | }
19 |
20 | export function userSeederTesting() {
21 | return service('user').create(factory());
22 | }
23 |
--------------------------------------------------------------------------------
/config/feathers/default.json:
--------------------------------------------------------------------------------
1 | {
2 | "server": {
3 | "db": {
4 | "host": "DB_HOST",
5 | "name": "DB_NAME",
6 | "port": "DB_PORT"
7 | },
8 | "web": {
9 | "host": "WEB_HOST",
10 | "port": "WEB_PORT"
11 | },
12 | "api": {
13 | "host": "API_HOST",
14 | "port": "API_PORT"
15 | }
16 | },
17 | "auth": {
18 | "path": "/authentication",
19 | "header": "Authorization",
20 | "entity": "user",
21 | "service": "user",
22 | "secret": "JNoSF4uRkGB1zhccVkpX3ulB/1KErbj/tuhCTY0dkpVNyYTU8bJiNC4ErCUK4sDSe/YMjuC0kqtlYnWuK8tHsQ=="
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/shared/components/form/AuthLogin.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 |
4 | import TextField from './inputs/MaterialTextField';
5 | import FormControls from './controls/FormControls';
6 |
7 | export default observer(({ form }) => (
8 |
18 | ));
19 |
--------------------------------------------------------------------------------
/src/shared/stores.js:
--------------------------------------------------------------------------------
1 | import { store } from 'rfx-core';
2 | import { useStrict } from 'mobx';
3 |
4 | import UIStore from './stores/ui';
5 | import AppStore from './stores/app';
6 | import AuthStore from './stores/auth';
7 | import PostStore from './stores/post';
8 |
9 | /**
10 | Enables MobX strict mode globally.
11 | In strict mode, it is not allowed to
12 | change any state outside of an action
13 | */
14 | useStrict(true);
15 |
16 | /**
17 | Stores
18 | */
19 | export default store
20 | .setup({
21 | ui: UIStore,
22 | app: AppStore,
23 | auth: AuthStore,
24 | post: PostStore,
25 | });
26 |
--------------------------------------------------------------------------------
/src/api/middleware/logger.js:
--------------------------------------------------------------------------------
1 | import { log } from '@/utils/logger';
2 |
3 | export default function (app) {
4 | // Add a logger to our app object for convenience
5 | app.logger = log; // eslint-disable-line no-param-reassign
6 |
7 | return (err, req, res, next) => {
8 | if (err) {
9 | const { url } = req;
10 | const { code, message } = err;
11 | const msg = `${code ? `(${code})` : ''} Route: ${url} - ${message}`;
12 |
13 | if (err.code === 404) {
14 | log.info(msg);
15 | } else {
16 | log.error(msg);
17 | log.info(err.stack);
18 | }
19 | }
20 | next(err);
21 | };
22 | }
23 |
--------------------------------------------------------------------------------
/src/shared/stores/ui/Auth.js:
--------------------------------------------------------------------------------
1 | import { observable, action } from 'mobx';
2 |
3 | export default class Auth {
4 |
5 | @observable modalIsOpen = false;
6 |
7 | @observable showSection = 'signin';
8 |
9 | @action toggleModal(flag = null, section = null) {
10 | if (!flag) this.modalIsOpen = !this.modalIsOpen;
11 | if (flag === 'open') this.modalIsOpen = true;
12 | if (flag === 'close') this.modalIsOpen = false;
13 | if (section) this.toggleSection(section);
14 | }
15 |
16 | @action toggleSection(to = 'signin') {
17 | if (to === 'signin') this.showSection = 'signin';
18 | if (to === 'signup') this.showSection = 'signup';
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/shared/styles/Home.css:
--------------------------------------------------------------------------------
1 | .title {
2 | color: #6FFFE9;
3 | font-weight: 100;
4 | }
5 |
6 | .subTitle {
7 | color: #5BC0BE;
8 | font-weight: 200;
9 | }
10 |
11 | .xsTitle {
12 | margin: 100px auto 15px auto;
13 | font-size: 80px;
14 | }
15 |
16 | .xsSubTitle {
17 | margin: 0 auto 50px auto;
18 | font-size: 15px;
19 | }
20 |
21 | .suTitle {
22 | margin: 250px auto 15px auto;
23 | font-size: 130px;
24 | }
25 |
26 | .suSubTitle {
27 | margin: 0 auto 250px auto;
28 | font-size: 25px;
29 | }
30 |
31 | .features {
32 | color: #5BC0BE;
33 | background: #0B132B;
34 | padding: 50px 0;
35 | font-size: 20px;
36 | }
37 |
38 | .features i {
39 | font-size: 55px;
40 | }
41 |
42 |
--------------------------------------------------------------------------------
/src/electron/index.js:
--------------------------------------------------------------------------------
1 | /* eslint global-require: 0 */
2 | /* eslint import/no-extraneous-dependencies: 0 */
3 | const electron = require('electron');
4 |
5 | const app = electron.app; // Module to control application life.
6 | const BrowserWindow = electron.BrowserWindow; // Module to create native browser window.
7 | let mainWindow = null;
8 |
9 | app.on('window-all-closed', () => {
10 | if (process.platform !== 'darwin') {
11 | app.quit();
12 | }
13 | });
14 |
15 | app.on('ready', () => {
16 | mainWindow = new BrowserWindow({ width: 1100, height: 700 });
17 | mainWindow.loadURL(`file://${__dirname}/index.html`);
18 |
19 | mainWindow.on('closed', () => {
20 | mainWindow = null;
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/src/web/App.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Router } from 'react-router';
3 | import { Provider } from 'mobx-react';
4 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
5 |
6 | export default class App extends Component {
7 |
8 | static propTypes = {
9 | store: React.PropTypes.object,
10 | routerProps: React.PropTypes.object,
11 | };
12 |
13 | static fetchData() {}
14 |
15 | render() {
16 | return (
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/src/web/middleware/hot.js:
--------------------------------------------------------------------------------
1 | /* eslint import/no-extraneous-dependencies: 0 */
2 | import webpackHotMiddleware from 'webpack-hot-middleware';
3 | import webpackDevMiddleware from 'webpack-dev-middleware';
4 | import webpack from 'webpack';
5 | import isDev from 'isdev';
6 | import _ from 'lodash';
7 |
8 | export function hotMiddleware({ wpc, wdmc, whmc }) {
9 | const bundler = webpack(wpc);
10 |
11 | return isDev ? [
12 |
13 | webpackDevMiddleware(bundler, _.merge(wdmc, {
14 | filename: wpc.output.filename,
15 | publicPath: wpc.output.publicPath,
16 | })),
17 |
18 | webpackHotMiddleware(bundler, _.merge(whmc, {
19 | log: () => {},
20 | })),
21 |
22 | ] : (req, res, next) => next();
23 | }
24 |
--------------------------------------------------------------------------------
/src/shared/components/form/AuthRegister.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 |
4 | import TextField from './inputs/MaterialTextField';
5 | import FormControls from './controls/FormControls';
6 |
7 | export default observer(({ form }) => (
8 |
20 | ));
21 |
--------------------------------------------------------------------------------
/src/utils/jwt.js:
--------------------------------------------------------------------------------
1 | import decodeJWT from 'jwt-decode';
2 |
3 | const payloadIsValid = payload =>
4 | payload && payload.exp * 1000 > new Date().getTime();
5 |
6 | export const verifyJWT = (token) => {
7 | if (typeof token !== 'string') {
8 | return Promise.reject(new Error('Token provided to verifyJWT is missing or not a string'));
9 | }
10 |
11 | try {
12 | const payload = decodeJWT(token);
13 |
14 | if (payloadIsValid(payload)) {
15 | // return both payload and token for better promise handling
16 | return Promise.resolve({ payload, token });
17 | }
18 |
19 | return Promise.reject(new Error('Invalid token: expired'));
20 | } catch (error) {
21 | return Promise.reject(new Error('Cannot decode malformed token.'));
22 | }
23 | };
24 |
--------------------------------------------------------------------------------
/src/shared/app.js:
--------------------------------------------------------------------------------
1 | import feathers from 'feathers/client';
2 | import hooks from 'feathers-hooks';
3 | import auth from 'feathers-authentication-client';
4 | import socket from 'feathers-socketio/client';
5 | import io from 'socket.io-client';
6 |
7 | let instance = false;
8 | const config = global.CONFIG;
9 | const storage = (global.TYPE === 'CLIENT') ? window.localStorage : null;
10 | const uri = ['http://', config.io.host, ':', config.io.port].join('');
11 |
12 | export function app() {
13 | if (instance) return instance;
14 |
15 | instance = feathers()
16 | .configure(socket(io(uri)))
17 | .configure(hooks())
18 | .configure(auth({ storage }));
19 |
20 | return instance;
21 | }
22 |
23 | export function service(name) {
24 | return app().service(name);
25 | }
26 |
--------------------------------------------------------------------------------
/src/shared/components/AppNav.jsx:
--------------------------------------------------------------------------------
1 | /* eslint jsx-a11y/no-static-element-interactions: 0 */
2 | import React from 'react';
3 | import { observer } from 'mobx-react';
4 | import { dispatch } from 'rfx-core';
5 | import cx from 'classnames';
6 |
7 | // styles
8 | import styles from '@/shared/styles/AppNav.css';
9 |
10 | // components
11 | import Drawer from 'material-ui/Drawer';
12 |
13 | const handleOnRequestChange = (open) => {
14 | dispatch('ui.appNav.open', open);
15 | };
16 |
17 | const handleOnClick = () => {
18 | dispatch('ui.appNav.open', false);
19 | };
20 |
21 | export default observer(({ children, open, docked }) => (
22 |
28 | {children}
29 |
30 | ));
31 |
--------------------------------------------------------------------------------
/webpack/config.client.js:
--------------------------------------------------------------------------------
1 | import webpack from 'webpack';
2 | import getenv from 'getenv';
3 | import env from '~/config/expose';
4 | import postcss from '~/config/postcss';
5 |
6 | export function load() {
7 | return {
8 | target: 'web',
9 | plugins: [
10 | new webpack.DefinePlugin({
11 | 'global.DIR': JSON.stringify(global.DIR),
12 | 'global.CONFIG': JSON.stringify(getenv.multi(env)),
13 | 'global.TYPE': JSON.stringify('CLIENT'),
14 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
15 | }),
16 | new webpack.ProvidePlugin({
17 | Promise: 'bluebird',
18 | }),
19 | new webpack.LoaderOptionsPlugin({
20 | minimize: false,
21 | debug: true,
22 | options: {
23 | postcss: postcss(webpack),
24 | },
25 | }),
26 | ],
27 | };
28 | }
29 |
--------------------------------------------------------------------------------
/src/shared/components/MenuLinksSX.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 | import cx from 'classnames';
4 |
5 | // components
6 | import { Link } from 'react-router';
7 |
8 | // stules
9 | const a = cx('db', 'ph3', 'pv3', 'fw4');
10 | const listBlock = cx('list', 'pl0', 'ml0');
11 | const listInline = cx('list', 'pa0', 'mv0');
12 | const liBlock = cx('db');
13 | const liInline = cx('dib');
14 |
15 | export default observer(({ inline }) => (
16 |
17 | - Home
18 | - Messages Demo
19 | - Packages
20 |
21 | ));
22 |
--------------------------------------------------------------------------------
/src/shared/components/PostSearch.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 | import { dispatch } from 'rfx-core';
4 | import $ from '@/shared/styles/_.mixins';
5 |
6 | const handleSearch = (e) => {
7 | e.preventDefault();
8 | const val = e.target.value;
9 | dispatch('post.search', val);
10 | };
11 |
12 | const resetSearch = (e) => {
13 | e.preventDefault();
14 | dispatch('post.search', null);
15 | };
16 |
17 | export default observer(({ search }) => (
18 |
31 | ));
32 |
--------------------------------------------------------------------------------
/src/shared/components/AuthModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 | import { dispatch } from 'rfx-core';
4 |
5 | import _ from 'lodash';
6 | import modalBaseStyle from '@/shared/styles/_.modal.js';
7 |
8 | import Modal from 'react-modal';
9 | import AuthForm from './AuthForm';
10 |
11 | const styles = _.cloneDeep(modalBaseStyle);
12 |
13 | _.assign(styles.content, {
14 | maxWidth: '450px',
15 | maxHeight: '500px',
16 | });
17 |
18 | const handleCloseModal = () =>
19 | dispatch('ui.auth.toggleModal', 'close');
20 |
21 | export default observer(({ open, showSection, forms }) => (
22 |
28 |
32 |
33 | ));
34 |
--------------------------------------------------------------------------------
/src/web/views/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | <%-head.title%>
8 | <%-head.meta%>
9 | <%-head.link%>
10 | <% if (build) { %>
11 |
12 | <% } %>
13 |
16 |
17 |
18 | <%-root%>
19 | <% if (build) { %>
20 |
21 |
22 | <% } else { %>
23 |
24 | <% } %>
25 |
26 |
27 |
--------------------------------------------------------------------------------
/webpack/config.server.js:
--------------------------------------------------------------------------------
1 | import webpack from 'webpack';
2 | import getenv from 'getenv';
3 | import env from '~/config/expose';
4 | import postcss from '~/config/postcss';
5 |
6 | export function load() {
7 | return {
8 | target: 'async-node',
9 | node: {
10 | __filename: true,
11 | __dirname: true,
12 | },
13 | plugins: [
14 | new webpack.ProvidePlugin({
15 | Promise: 'bluebird',
16 | }),
17 | new webpack.DefinePlugin({
18 | 'global.CONFIG': JSON.stringify(getenv.multi(env)),
19 | 'global.TYPE': JSON.stringify('SERVER'),
20 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
21 | }),
22 | new webpack.LoaderOptionsPlugin({
23 | minimize: true,
24 | debug: false,
25 | options: {
26 | postcss: postcss(webpack),
27 | },
28 | }),
29 | ],
30 | };
31 | }
32 |
--------------------------------------------------------------------------------
/src/shared/styles/_.global.css:
--------------------------------------------------------------------------------
1 | @import 'font-awesome';
2 | @import 'animate.css';
3 | @import 'normalize.css';
4 | @import "tachyons";
5 | @import "./_.custom.css";
6 |
7 | :root {
8 | --button-color: #1C2541;
9 | --button-background-color: #5BC0BE;
10 | }
11 |
12 |
13 | body {
14 | color: #5BC0BE;
15 | background-color: #1C2541;
16 | }
17 |
18 | a {
19 | color: #5BC0BE;
20 | text-decoration: none;
21 | transition: all 0.2s;
22 | }
23 |
24 | a:hover,
25 | a:focus {
26 | border-color: rgba(0,0,0,0) !important;
27 | box-shadow: none !important;
28 | text-decoration: none;
29 | color: #6FFFE9;
30 | }
31 |
32 | a, button {
33 | outline: 0;
34 | }
35 |
36 | h1, h3, h4 {
37 | color: #FFD98E;
38 | }
39 |
40 | img {
41 | max-width: 100%;
42 | }
43 |
44 | input, textarea {
45 | font-size: 1rem;
46 | }
47 |
48 | input::-ms-clear, textarea::-ms-clear {
49 | display: none;
50 | }
51 |
--------------------------------------------------------------------------------
/src/shared/forms/auth.js:
--------------------------------------------------------------------------------
1 | import { dispatch } from 'rfx-core';
2 | import Form from './_.extend';
3 |
4 | class AuthForm extends Form {
5 |
6 | onSuccess(form) {
7 | return dispatch('auth.login', form.values())
8 | .then(() => dispatch('ui.auth.toggleModal', 'close'))
9 | .then(() => dispatch('ui.snackBar.open', 'Login Successful.'))
10 | .then(() => form.clear())
11 | .catch((err) => {
12 | form.invalidate(err.message);
13 | dispatch('ui.snackBar.open', err.message);
14 | });
15 | }
16 | }
17 |
18 | export default
19 | new AuthForm({
20 | fields: {
21 | email: {
22 | label: 'Email',
23 | placeholder: 'Insert Email',
24 | rules: 'required|email|string|between:5,50',
25 | },
26 | password: {
27 | label: 'Password',
28 | placeholder: 'Insert Password',
29 | rules: 'required|between:5,20',
30 | },
31 | },
32 | });
33 |
--------------------------------------------------------------------------------
/src/shared/styles/MenuLinkDX.css:
--------------------------------------------------------------------------------
1 | .divider {
2 | color: #3A506B;
3 | }
4 |
5 | .loginBtn {
6 | border: 1px solid #5BC0BE;
7 | color: #5BC0BE;
8 | }
9 |
10 | .registerBtn {
11 | border: 1px solid #FFD98E;
12 | background: #FFD98E;
13 | color: #1C2541;
14 | }
15 |
16 | .loginBtn:hover,
17 | .registerBtn:hover {
18 | background: #6FFFE9;
19 | color: #1C2541;
20 | }
21 |
22 | .menuAccount ul {
23 | /* min-width:128px; */
24 | color: #1C2541;
25 | background: #5BC0BE;
26 | }
27 |
28 | .menuAccount ul li a {
29 | color: #1C2541;
30 | }
31 |
32 | .menuAccount ul li a:hover {
33 | background: #6FFFE9;
34 | }
35 |
36 | .menuAccount ul li:first-child,
37 | .menuAccount ul li:first-child a {
38 | border-top-left-radius: 3px;
39 | border-top-right-radius: 3px;
40 | }
41 |
42 | .menuAccount ul li:last-child,
43 | .menuAccount ul li:last-child a {
44 | border-bottom-left-radius: 3px;
45 | border-bottom-right-radius: 3px;
46 | }
47 |
--------------------------------------------------------------------------------
/src/web/middleware/routing.js:
--------------------------------------------------------------------------------
1 | import { match } from 'react-router';
2 |
3 | function handleRouter(req, res, props, ssr) {
4 | console.log('route:', req.url); // eslint-disable-line no-console
5 | if (req.url !== '/favicon.ico') ssr(req, res, props);
6 | }
7 |
8 | function handleRedirect(res, redirect) {
9 | res.redirect(302, redirect.pathname + redirect.search);
10 | }
11 |
12 | function handleNotFound(res) {
13 | res.status(404).send('Not Found');
14 | }
15 |
16 | function handleError(res, err) {
17 | res.status(500).send(err.message);
18 | }
19 |
20 | export function routingMiddleware(routes, ssr) {
21 | return (req, res) => {
22 | match({ routes, location: req.url },
23 | (err, redirect, props) => {
24 | if (err) handleError(res, err);
25 | else if (redirect) handleRedirect(res, redirect);
26 | else if (props) handleRouter(req, res, props, ssr);
27 | else handleNotFound(res);
28 | });
29 | };
30 | }
31 |
--------------------------------------------------------------------------------
/src/shared/forms/_.extend.js:
--------------------------------------------------------------------------------
1 | import MobxReactForm from 'mobx-react-form';
2 | import validatorjs from 'validatorjs';
3 | import bindings from './_.bindings';
4 |
5 | /**
6 | What can I do with mobx-react-form ?
7 |
8 | API: https://foxhound87.github.io/mobx-react-form/docs/api-reference/
9 | FIELDS: https://foxhound87.github.io/mobx-react-form/docs/defining-fields.html
10 | ACTIONS: https://foxhound87.github.io/mobx-react-form/docs/actions/
11 | EVENTS: https://foxhound87.github.io/mobx-react-form/docs/events/
12 | VALIDATION: https://foxhound87.github.io/mobx-react-form/docs/validation/
13 | BINDINGS: https://foxhound87.github.io/mobx-react-form/docs/bindings/
14 | */
15 |
16 | export default class Form extends MobxReactForm {
17 |
18 | plugins() {
19 | return {
20 | dvr: validatorjs,
21 | };
22 | }
23 |
24 | bindings() {
25 | return bindings;
26 | }
27 |
28 | onInit() {
29 | this.each(field =>
30 | field.set('bindings', 'MaterialTextField'));
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/shared/components/Pagination.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 | import Paginator from 'react-pagify';
4 | import $ from '@/shared/styles/_.mixins';
5 |
6 | export default observer(({ currentPage, onPageChange }) => (
7 |
12 |
13 |
14 |
18 |
19 |
20 |
24 |
25 |
25 |
26 |
Not Authorized
27 |
You are not authorized to access.
28 |
35 |
19 |
27 |
35 |
36 | ));
37 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # 0.8.0 (alpha.8)
2 |
3 | * Code Splitting
4 | * Introduced mobx-react Provide
5 | * Introduced tachyons
6 | * Introduced rfx-core
7 | * Updated Dependencies
8 |
9 | # 0.7.0 (alpha.7)
10 |
11 | * Added Electron App
12 |
13 | # 0.6.0 (alpha.6)
14 |
15 | * Form management with mobx-react-form
16 | * Updated Graphic
17 |
18 | # 0.5.0 (alpha.5)
19 |
20 | * Updated to react-hot-loader 3 beta
21 | * Hot-Reloadable MobX Stores
22 | * Improved directory structure and scripts
23 | * Better documentation
24 |
25 | # 0.4.0 (alpha.4)
26 |
27 | * Enabled MobX strict mode
28 |
29 | # 0.3.0 (alpha.3)
30 |
31 | * React Stateless Components implementation
32 | * Action Dispatcher for Stateless React Components
33 | * Helmet w/ server side rendering
34 | * Updated NPM Dependencies
35 |
36 | # 0.2.0 (alpha.2)
37 |
38 | * Browser Sync Integration
39 | * Reactive Media Queries (MatchMedia + MobX)
40 |
41 | # 0.1.0 (alpha.1)
42 |
43 | * Server Side Rendering
44 | * React Transform HMR
45 | * Isomorphic Fetch/Socket
46 | * Modular CSS for React
47 |
--------------------------------------------------------------------------------
/src/api/services/user/hooks.before.js:
--------------------------------------------------------------------------------
1 | import { hooks as auth } from 'feathers-authentication';
2 | import { hooks as local } from 'feathers-authentication-local';
3 | import { hooks as perms } from 'feathers-permissions';
4 | import { setUUID } from '@/api/hooks/setUUID';
5 |
6 | /**
7 | Hook: before
8 | Service: user
9 | */
10 | export default {
11 | all: [],
12 | find: [
13 | auth.authenticate(['jwt', 'local']),
14 | perms.checkPermissions({ service: 'user' }),
15 | ],
16 | get: [
17 | auth.authenticate(['jwt', 'local']),
18 | perms.checkPermissions({ service: 'user' }),
19 | ],
20 | create: [
21 | setUUID(),
22 | local.hashPassword(),
23 | ],
24 | update: [
25 | auth.authenticate(['jwt', 'local']),
26 | perms.checkPermissions({ service: 'user' }),
27 | ],
28 | patch: [
29 | auth.authenticate(['jwt', 'local']),
30 | perms.checkPermissions({ service: 'user' }),
31 | ],
32 | remove: [
33 | auth.authenticate(['jwt', 'local']),
34 | perms.checkPermissions({ service: 'user' }),
35 | ],
36 | };
37 |
--------------------------------------------------------------------------------
/webpack.config.client.babel.js:
--------------------------------------------------------------------------------
1 | /* eslint global-require: 0 */
2 | /* eslint import/first: 0 */
3 | /* eslint import/newline-after-import: 0 */
4 | /* eslint import/no-extraneous-dependencies: 0 */
5 | import './run/global';
6 | import merge from 'webpack-merge';
7 | import Globals from './webpack/globals';
8 | import getLoaders from './webpack/loaders';
9 |
10 | let Config;
11 | let Loader = getLoaders();
12 |
13 | Config = require('./webpack/config.client').load();
14 | const ConfigClientDev = require('./webpack/config.client.dev');
15 | Loader = merge(Loader, ConfigClientDev.loader());
16 | Config = merge(Config, ConfigClientDev.config('web'));
17 |
18 | // Globals
19 | Config = merge(Config, Globals);
20 |
21 | // Loaders
22 | Config = merge(Config, {
23 | module: {
24 | loaders: [
25 | Loader.eslint,
26 | Loader.jsx,
27 | Loader.json,
28 | Loader.url,
29 | Loader.file,
30 | Loader.cssGlobal,
31 | Loader.cssModules,
32 | ],
33 | },
34 | });
35 |
36 | const WebpackConfig = Config;
37 | export default WebpackConfig;
38 |
--------------------------------------------------------------------------------
/src/shared/forms/post.js:
--------------------------------------------------------------------------------
1 | import { dispatch } from 'rfx-core';
2 | import Form from './_.extend';
3 |
4 | export class PostForm extends Form {
5 | onSuccess(form) {
6 | const storeAction = form.values().uuid ? 'post.update' : 'post.create';
7 |
8 | return dispatch(storeAction, form.values())
9 | .then(() => dispatch('ui.postCreateModal.open', false))
10 | .then(() => dispatch('ui.snackBar.open', 'Post Saved.'))
11 | .then(() => form.clear())
12 | .catch((err) => {
13 | form.invalidate(err.message);
14 | dispatch('ui.snackBar.open', err.message);
15 | });
16 | }
17 | }
18 |
19 | export const fields = {
20 | title: {
21 | label: 'Title',
22 | rules: 'required|string|between:5,50',
23 | },
24 | completed: {
25 | label: 'Completed',
26 | value: true,
27 | rules: 'boolean',
28 | },
29 | uuid: {
30 | rules: 'string',
31 | value: null,
32 | },
33 | };
34 |
35 | export function init(values = {}) {
36 | return new PostForm({ fields, values });
37 | }
38 |
39 | export default new PostForm({ fields });
40 |
--------------------------------------------------------------------------------
/src/shared/components/PostFilter.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 | import { dispatch } from 'rfx-core';
4 | import cx from 'classnames';
5 | import $ from '@/shared/styles/_.mixins';
6 |
7 | const handleSelect = (e) => {
8 | e.preventDefault();
9 | const val = e.target.value;
10 | dispatch('post.filterBy', val);
11 | };
12 |
13 | export default observer(({ filter }) => (
14 |
15 |
22 |
29 |
36 |
37 | ));
38 |
--------------------------------------------------------------------------------
/src/shared/components/PostDetailsHeader.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { browserHistory } from 'react-router';
3 | import { observer } from 'mobx-react';
4 | import { dispatch } from 'rfx-core';
5 | import $ from '@/shared/styles/_.mixins';
6 |
7 | const handleEditPost = (e) => {
8 | e.preventDefault();
9 | dispatch('ui.postCreateModal.open', true);
10 | };
11 |
12 | export default observer(({ post }) => (
13 |
14 |
{post.name || 'Post Details'}
15 |
16 |
17 |
25 |
26 |
27 |
28 |
36 |
37 |
31 |
32 |
33 |
34 |
37 |
41 |
19 |
20 |
26 |
32 |
33 |
34 |
38 |
39 |
43 |
31 |
37 |
38 |
39 |
40 |
42 |
48 |
49 |
50 | ));
51 |
52 |
--------------------------------------------------------------------------------
/src/shared/components/form/controls/FormControls.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 |
4 | import cx from 'classnames';
5 | import $ from '@/shared/styles/_.mixins';
6 |
7 | const errorMessage = cx('red', 'm2', 'pt4');
8 | const button = cx($.buttonPill, '_c1', '_b1', 'b');
9 |
10 | export default observer(({ form, controls = null, labels = null }) => (
11 |
12 |
13 |
14 | {(!controls || controls.onSubmit) &&
15 | }
25 |
26 | {(!controls || controls.onClear) &&
27 | }
30 |
31 | {(!controls || controls.onReset) &&
32 | }
35 |
36 |
37 |
38 | {((!controls || controls.error) && form.hasError) &&
39 |
{form.error}
}
40 |
41 |
14 |
15 |
Loading ... {!item}
16 |
21 |
22 |
23 | { item.completed
24 | ?
25 | : }
26 | {' '}
27 | { item.title }
28 |
29 |
ID: { item.uuid }
30 |
31 |
32 |
Created at:
33 |
Updated at:
34 |
35 |
43 | {_.isEmpty(item)
44 | ?
45 | : }
46 |
47 | );
48 | });
49 |
--------------------------------------------------------------------------------
/src/shared/components/PostList.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 |
4 | // components
5 | import { Link } from 'react-router';
6 | import TimeAgo from 'react-timeago';
7 |
8 | // styles
9 | import styles from '@/shared/styles/PostList.css';
10 |
11 | const ItemsNotFound = () => (
12 |
13 |
14 |
NO ITEMS FOUND
15 |
20 | {items.map(item =>
21 | -
22 |
23 |
24 | {item.completed
25 | ?
26 | :
27 | } {item.title}
28 |
29 |
30 | ID: {item.uuid}
31 |
32 |
34 |
Created at:
35 |
Updated at:
36 |
)}
38 |
39 | ));
40 |
41 | export default observer(({ items }) => (
42 |
43 | {items.length
44 | ?
45 | : }
46 |
47 | ));
48 |
--------------------------------------------------------------------------------
/src/web/ssr.js:
--------------------------------------------------------------------------------
1 | /* eslint react/jsx-filename-extension: [1, { "extensions": [".js", ".jsx"] }] */
2 | import isDev from 'isdev';
3 | import React from 'react';
4 | import Helmet from 'react-helmet';
5 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
6 | import { renderToString } from 'react-dom/server';
7 | import { RouterContext } from 'react-router';
8 | import { Provider } from 'mobx-react';
9 | import { setMatchMediaConfig } from 'mobx-react-matchmedia';
10 | import { fetchData, dehydrate } from 'rfx-core';
11 | import stores from '@/shared/stores';
12 | import bootstrap from './bootstrap';
13 |
14 | export default (req, res, props) => {
15 | const cookieName = 'ssrToken';
16 |
17 | const store = stores.inject({
18 | app: { ssrLocation: req.url },
19 | auth: { jwt: req.cookies[cookieName], cookieName },
20 | ui: { mui: { userAgent: req.headers['user-agent'] } },
21 | });
22 |
23 | Promise.all(bootstrap(store))
24 | .then(() => fetchData(store, props)
25 | .then(() => setMatchMediaConfig(req))
26 | .then(() => renderToString(
27 |
28 |
29 |
30 |
31 | ,
32 | ))
33 | .then(html => res
34 | .status(200)
35 | .render('index', {
36 | build: isDev ? null : '/build',
37 | head: Helmet.rewind(),
38 | state: dehydrate(),
39 | root: html,
40 | })));
41 | };
42 |
--------------------------------------------------------------------------------
/src/utils/server.start.js:
--------------------------------------------------------------------------------
1 | import getenv from 'getenv';
2 |
3 | class ServerSetup {
4 | init(props) {
5 | this.config = props.config;
6 | this.namespace = props.namespace;
7 | this.logger = props.logger;
8 | }
9 | }
10 |
11 | class ServerStart {
12 |
13 | constructor(app) {
14 | this.app = app;
15 | this.fixUA();
16 | }
17 |
18 | init(props) {
19 | const key = props.namespace || 'api';
20 | const configkey = this.configkey || 'server';
21 | const logger = props.logger || null;
22 | const config = this.getFeathersConfig(configkey) || this.getEnvConfig(key);
23 | this.start(config, key, logger);
24 | }
25 |
26 | start(config, key, logger) {
27 | this.app
28 | .listen(
29 | config[key.toLowerCase()].port,
30 | config[key.toLowerCase()].host,
31 | )
32 | .on('listening', () => logger && logger(key));
33 | }
34 |
35 | getFeathersConfig(configkey) {
36 | return this.app.get(configkey);
37 | }
38 |
39 | getEnvConfig(key) {
40 | return {
41 | [key.toLowerCase()]: {
42 | host: getenv([key.toUpperCase(), 'HOST'].join('_')),
43 | port: getenv([key.toUpperCase(), 'PORT'].join('_')),
44 | },
45 | };
46 | }
47 |
48 | fixUA() {
49 | // Tell any CSS tooling (such as Material UI) to use
50 | // "all" vendor prefixes if the user agent is not known.
51 | global.navigator = global.navigator || {};
52 | global.navigator.userAgent = global.navigator.userAgent || 'all';
53 | }
54 | }
55 |
56 | const serverSetup = new ServerSetup();
57 |
58 | export function setupServer($props) {
59 | serverSetup.init($props);
60 | }
61 |
62 | export function startServer() {
63 | new ServerStart(this).init(serverSetup);
64 | }
65 |
--------------------------------------------------------------------------------
/src/utils/logger.js:
--------------------------------------------------------------------------------
1 | import log from 'winston';
2 | import getenv from 'getenv';
3 |
4 | // set log as cli mode
5 | log.cli();
6 |
7 | export const webhost = key => ['http://',
8 | getenv([key.toUpperCase(), 'HOST'].join('_')), ':',
9 | getenv([key.toUpperCase(), 'PORT'].join('_')),
10 | ].join('');
11 |
12 | const logInit = () => {
13 | log.info('------------------------------------------');
14 | log.info('--------------- RFX STACK ----------------');
15 | log.info('------------------------------------------');
16 | };
17 |
18 | const logServerAPI = (url) => {
19 | log.info('API Listening at:', url);
20 | log.info('Environment:', getenv('NODE_ENV'));
21 | log.info('------------------------------------------');
22 | log.info('Database Host:', getenv('DB_HOST'));
23 | log.info('Database Name:', getenv('DB_NAME'));
24 | log.info('Database Port:', getenv('DB_PORT'));
25 | log.info('------------------------------------------');
26 | };
27 |
28 | const logServerWEB = (url) => {
29 | log.info('API Listening at:', url);
30 | log.info('Environment:', getenv('NODE_ENV'));
31 | log.info('------------------------------------------');
32 | log.info('IO Host:', getenv('IO_HOST'));
33 | log.info('IO Port:', getenv('IO_PORT'));
34 | log.info('------------------------------------------');
35 | };
36 |
37 | export const logServerConfigWebpack = url => ([
38 | 'RFX STACK',
39 | `WEB Listening at: ${webhost(url)}`,
40 | `Environment: ${getenv('NODE_ENV')}`,
41 | `IO Host: ${getenv('IO_HOST')}`,
42 | `IO Port: ${getenv('IO_PORT')}`,
43 | ]);
44 |
45 | export const logServerConfig = (key = null) => {
46 | logInit();
47 | const url = webhost(key);
48 | return (key.toUpperCase() === 'API')
49 | ? logServerAPI(url)
50 | : logServerWEB(url);
51 | };
52 |
53 | export { log };
54 |
--------------------------------------------------------------------------------
/src/api/server.js:
--------------------------------------------------------------------------------
1 | import feathers from 'feathers';
2 | import configuration from 'feathers-configuration';
3 | import local from 'feathers-authentication-local';
4 | import jwt from 'feathers-authentication-jwt';
5 | import hooks from 'feathers-hooks';
6 | import rest from 'feathers-rest';
7 | import socketio from 'feathers-socketio';
8 | import adapter from 'feathers-mongoose';
9 | import errorHandler from 'feathers-errors/handler';
10 |
11 | import compression from 'compression';
12 | import bodyParser from 'body-parser';
13 | import cookieParser from 'cookie-parser';
14 | import cors from 'cors';
15 |
16 | import { setupServices, initServices } from '@/utils/services.autoload';
17 | import { setupServer, startServer } from '@/utils/server.start';
18 | import { logServerConfig } from '@/utils/logger';
19 |
20 | import auth from './auth';
21 | import { connector } from './connector';
22 | import { autoloader } from './autoloader';
23 |
24 | import loggerMiddleware from './middleware/logger';
25 | import notFoundMiddleware from './middleware/notFound';
26 |
27 | setupServer({
28 | namespace: 'api',
29 | logger: logServerConfig,
30 | });
31 |
32 | setupServices({
33 | dir: __dirname,
34 | adapter,
35 | connector,
36 | autoloader,
37 | });
38 |
39 | const app = feathers();
40 |
41 | app
42 | .configure(configuration())
43 | .use(compression())
44 | .options('*', cors())
45 | .use(cors({ origin: true }))
46 | .configure(rest())
47 | .configure(socketio(io => io.set('origins', '*:*')))
48 | .configure(hooks())
49 | .use(cookieParser())
50 | .use(bodyParser.json())
51 | .use(bodyParser.urlencoded({ extended: true }))
52 | .configure(auth)
53 | .configure(local())
54 | .configure(jwt())
55 | .configure(initServices)
56 | .use(notFoundMiddleware())
57 | .use(loggerMiddleware(app))
58 | .use(errorHandler({ html: false }))
59 | .configure(startServer);
60 |
--------------------------------------------------------------------------------
/webpack/config.server.build.js:
--------------------------------------------------------------------------------
1 | import webpack from 'webpack';
2 | import ExtractTextPlugin from 'extract-text-webpack-plugin';
3 | import ProgressBarPlugin from 'progress-bar-webpack-plugin';
4 | import nodeExternalModules from 'webpack-node-externals';
5 | import path from 'path';
6 |
7 | const Dir = global.DIR;
8 |
9 | export function loader() {
10 | return {
11 | jsx: {
12 | query: {
13 | cacheDirectory: true,
14 | presets: [['es2015', { modules: false }], 'stage-0', 'react'],
15 | plugins: [
16 | 'system-import-transformer',
17 | 'transform-decorators-legacy',
18 | 'transform-runtime',
19 | 'transform-class-properties',
20 | 'babel-root-import',
21 | ],
22 | },
23 | },
24 | cssModules: {
25 | loader: ExtractTextPlugin.extract({
26 | fallbackLoader: 'isomorphic-style-loader',
27 | loader: ['css-loader?modules',
28 | 'importLoaders=1',
29 | 'localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader']
30 | .join('&'),
31 | }),
32 | },
33 | cssGlobal: {
34 | loader: ExtractTextPlugin.extract({
35 | fallbackLoader: 'isomorphic-style-loader',
36 | loader: 'css-loader!postcss-loader',
37 | }),
38 | },
39 | };
40 | }
41 |
42 | export function config(entry) {
43 | return {
44 | devtool: 'source-map',
45 | entry: [
46 | 'babel-polyfill',
47 | 'isomorphic-fetch',
48 | 'whatwg-fetch',
49 | path.join(Dir.run, entry),
50 | ],
51 | output: {
52 | path: Dir.nodeBuild,
53 | filename: [entry, 'bundle', 'js'].join('.'),
54 | },
55 | externals: [nodeExternalModules()],
56 | plugins: [
57 | new ProgressBarPlugin(),
58 | new ExtractTextPlugin({
59 | disable: true,
60 | }),
61 | new webpack.optimize.UglifyJsPlugin({
62 | comments: false,
63 | sourceMap: true,
64 | compress: {
65 | screw_ie8: true,
66 | warnings: false,
67 | },
68 | }),
69 | ],
70 | };
71 | }
72 |
--------------------------------------------------------------------------------
/webpack.config.babel.js:
--------------------------------------------------------------------------------
1 | /* eslint global-require: 0 */
2 | /* eslint import/first: 0 */
3 | /* eslint import/newline-after-import: 0 */
4 | /* eslint import/no-extraneous-dependencies: 0 */
5 | import './run/global';
6 | import { match } from 'rfx-core';
7 | import merge from 'webpack-merge';
8 | import Globals from './webpack/globals';
9 | import getLoaders from './webpack/loaders';
10 |
11 | let Config;
12 | let Loader = getLoaders();
13 |
14 | if (match.script('web:dev', 'development')) {
15 | Config = require('./webpack/config.server').load();
16 | const ConfigServerDev = require('./webpack/config.server.dev');
17 | Loader = merge(Loader, ConfigServerDev.loader());
18 | Config = merge(Config, ConfigServerDev.config('start.web'));
19 | }
20 |
21 | if (match.script('build:client:web', 'production')) {
22 | Config = require('./webpack/config.client').load();
23 | const ConfigClientBuild = require('./webpack/config.client.build');
24 | Loader = merge(Loader, ConfigClientBuild.loader());
25 | Config = merge(Config, ConfigClientBuild.config('web'));
26 | }
27 |
28 | if (match.script('build:server:web', 'production')) {
29 | Config = require('./webpack/config.server').load();
30 | const ConfigServerBuild = require('./webpack/config.server.build');
31 | Loader = merge(Loader, ConfigServerBuild.loader());
32 | Config = merge(Config, ConfigServerBuild.config('start.web'));
33 | }
34 |
35 | if (match.script('build:server:api', 'production')) {
36 | Config = require('./webpack/config.server').load();
37 | const ConfigServerBuild = require('./webpack/config.server.build');
38 | Loader = merge(Loader, ConfigServerBuild.loader());
39 | Config = merge(Config, ConfigServerBuild.config('start.api'));
40 | }
41 |
42 | // Globals
43 | Config = merge(Config, Globals);
44 |
45 | // Loaders
46 | Config = merge(Config, {
47 | module: {
48 | loaders: [
49 | Loader.eslint,
50 | Loader.jsx,
51 | Loader.json,
52 | Loader.url,
53 | Loader.file,
54 | Loader.cssGlobal,
55 | Loader.cssModules,
56 | ],
57 | },
58 | });
59 |
60 | const WebpackConfig = Config;
61 | export default WebpackConfig;
62 |
--------------------------------------------------------------------------------
/webpack/config.client.dev.js:
--------------------------------------------------------------------------------
1 | import BrowserSyncPlugin from 'browser-sync-webpack-plugin';
2 | import FriendlyErrorsWebpackPlugin from 'friendly-errors-webpack-plugin';
3 | import webpack from 'webpack';
4 | import getenv from 'getenv';
5 | import path from 'path';
6 |
7 | import { logServerConfigWebpack, webhost } from '@/utils/logger';
8 |
9 | const Dir = global.DIR;
10 |
11 | export function loader() {
12 | return {
13 | jsx: {
14 | query: {
15 | presets: [['es2015', { modules: false }], 'stage-0', 'react'],
16 | plugins: [
17 | 'transform-decorators-legacy',
18 | 'transform-class-properties',
19 | 'transform-runtime',
20 | 'babel-root-import',
21 | 'react-hot-loader/babel',
22 | ],
23 | },
24 | },
25 | cssModules: {
26 | loaders: [
27 | 'style-loader',
28 | ['css-loader?modules',
29 | 'importLoaders=1',
30 | 'localIdentName=[name]__[local]___[hash:base64:5]']
31 | .join('&'),
32 | 'postcss-loader',
33 | ],
34 | },
35 | };
36 | }
37 |
38 | export function config(entry) {
39 | return {
40 | devtool: 'cheap-module-eval-source-map',
41 | entry: {
42 | app: [
43 | 'babel-polyfill',
44 | 'isomorphic-fetch',
45 | 'whatwg-fetch',
46 | 'react-hot-loader/patch',
47 | 'webpack-hot-middleware/client',
48 | // ['webpack-hot-middleware/client', webhost].join('?'),
49 | path.join(Dir.src, entry, 'client'),
50 | ],
51 | },
52 | output: {
53 | path: '/',
54 | publicPath: '/',
55 | filename: 'bundle.js',
56 | },
57 | plugins: [
58 | new FriendlyErrorsWebpackPlugin({
59 | clearConsole: true,
60 | compilationSuccessInfo: {
61 | messages: logServerConfigWebpack(entry),
62 | },
63 | }),
64 | new BrowserSyncPlugin({
65 | host: getenv('BROWSERSYNC_HOST'),
66 | port: getenv('BROWSERSYNC_PORT'),
67 | proxy: webhost(entry),
68 | }, { reload: false }),
69 | new webpack.HotModuleReplacementPlugin(),
70 | new webpack.NoErrorsPlugin(),
71 | ],
72 | };
73 | }
74 |
--------------------------------------------------------------------------------
/webpack/config.server.dev.js:
--------------------------------------------------------------------------------
1 | import webpack from 'webpack';
2 | import ExtractTextPlugin from 'extract-text-webpack-plugin';
3 | import StartServerPlugin from 'start-server-webpack-plugin';
4 | import nodeExternalModules from 'webpack-node-externals';
5 | import path from 'path';
6 |
7 | const Dir = global.DIR;
8 |
9 | export function loader() {
10 | return {
11 | jsx: {
12 | query: {
13 | cacheDirectory: true,
14 | presets: [['es2015', { modules: false }], 'stage-0', 'react'],
15 | plugins: [
16 | 'system-import-transformer',
17 | 'transform-decorators-legacy',
18 | 'transform-runtime',
19 | 'transform-class-properties',
20 | 'babel-root-import',
21 | ],
22 | },
23 | },
24 | cssModules: {
25 | loader: ExtractTextPlugin.extract({
26 | fallbackLoader: 'isomorphic-style-loader',
27 | loader: ['css-loader?modules',
28 | 'importLoaders=1',
29 | 'localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader']
30 | .join('&'),
31 | }),
32 | },
33 | cssGlobal: {
34 | loader: ExtractTextPlugin.extract({
35 | fallbackLoader: 'isomorphic-style-loader',
36 | loader: 'css-loader!postcss-loader',
37 | }),
38 | },
39 | };
40 | }
41 |
42 | export function config(entry) {
43 | return {
44 | devtool: 'cheap-module-eval-source-map',
45 | entry: [
46 | 'babel-polyfill',
47 | 'isomorphic-fetch',
48 | 'whatwg-fetch',
49 | // 'webpack/hot/poll?1000',
50 | path.join(Dir.run, entry),
51 | ],
52 | output: {
53 | path: Dir.nodeBuild,
54 | filename: [entry, 'dev', 'bundle', 'js'].join('.'),
55 | chunkFilename: '[id].[hash:5]-[chunkhash:7].js',
56 | devtoolModuleFilenameTemplate: '[absolute-resource-path]',
57 | libraryTarget: 'commonjs2',
58 | },
59 | externals: [nodeExternalModules()],
60 | // externals: [nodeExternalModules({
61 | // whitelist: ['webpack/hot/poll?1000'],
62 | // })],
63 | plugins: [
64 | new ExtractTextPlugin({
65 | disable: true,
66 | }),
67 | new StartServerPlugin(),
68 | new webpack.HotModuleReplacementPlugin(),
69 | new webpack.NamedModulesPlugin(),
70 | new webpack.NoErrorsPlugin(),
71 | ],
72 | };
73 | }
74 |
--------------------------------------------------------------------------------
/webpack/config.client.build.js:
--------------------------------------------------------------------------------
1 | import ExtractTextPlugin from 'extract-text-webpack-plugin';
2 | import ProgressBarPlugin from 'progress-bar-webpack-plugin';
3 | import webpack from 'webpack';
4 | import path from 'path';
5 |
6 | import vendor from '~/config/vendor';
7 |
8 | const Dir = global.DIR;
9 |
10 | export function loader() {
11 | return {
12 | jsx: {
13 | query: {
14 | presets: [['es2015', { modules: false }], 'stage-0', 'react'],
15 | plugins: [
16 | 'transform-decorators-legacy',
17 | 'transform-class-properties',
18 | 'transform-runtime',
19 | 'babel-root-import',
20 | ],
21 | },
22 | },
23 | cssModules: {
24 | loader: ExtractTextPlugin.extract({
25 | fallbackLoader: 'style-loader',
26 | loader: [
27 | 'css-loader?modules',
28 | 'importLoaders=1',
29 | 'localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader',
30 | ].join('&'),
31 | }),
32 | },
33 | cssGlobal: {
34 | loader: ExtractTextPlugin.extract({
35 | fallbackLoader: 'style-loader',
36 | loader: 'css-loader!postcss-loader',
37 | }),
38 | },
39 | };
40 | }
41 |
42 | export function config(entry) {
43 | return {
44 | bail: true,
45 | devtool: 'source-map',
46 | entry: {
47 | vendor,
48 | app: [
49 | 'babel-polyfill',
50 | 'isomorphic-fetch',
51 | 'whatwg-fetch',
52 | path.join(Dir.src, entry, 'client'),
53 | ],
54 | },
55 | output: {
56 | path: path.join(Dir.public, 'build'),
57 | publicPath: '/build/',
58 | filename: [entry, 'app', 'bundle', 'js'].join('.'),
59 | },
60 | plugins: [
61 | new ProgressBarPlugin(),
62 | new webpack.optimize.UglifyJsPlugin({
63 | comments: false,
64 | sourceMap: true,
65 | compress: {
66 | screw_ie8: true,
67 | warnings: false,
68 | },
69 | }),
70 | new webpack.optimize.CommonsChunkPlugin({
71 | name: 'vendor',
72 | minChunks: Infinity,
73 | filename: [entry, 'vendor', 'bundle', 'js'].join('.'),
74 | }),
75 | new ExtractTextPlugin({
76 | filename: [entry, 'style', 'css'].join('.'),
77 | allChunks: true,
78 | }),
79 | ],
80 | };
81 | }
82 |
--------------------------------------------------------------------------------
/src/shared/components/PostCreateModal.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { observer } from 'mobx-react';
3 | import { dispatch } from 'rfx-core';
4 |
5 | import Modal from 'react-modal';
6 | import TextField from 'material-ui/TextField';
7 | import Toggle from 'material-ui/Toggle';
8 |
9 | import _ from 'lodash';
10 | import cx from 'classnames';
11 | import $ from '@/shared/styles/_.mixins';
12 | import modalBaseStyle from '@/shared/styles/_.modal.js';
13 |
14 | const styles = _.cloneDeep(modalBaseStyle);
15 | const errorMessage = cx('red', 'm1');
16 | const button = cx($.buttonPill, '_c1', '_b1', 'b');
17 |
18 | _.assign(styles.content, {
19 | maxWidth: '450px',
20 | maxHeight: '300px',
21 | });
22 |
23 | // events
24 | const handleCloseModal = () =>
25 | dispatch('ui.postCreateModal.open', false);
26 |
27 | export default observer(({ open, form }) => (
28 |
34 | {!(form && form.$) ? null : (
35 |
36 |
{form.$('uuid').value ? 'Edit' : 'Create'} Post
37 |
71 |
21 |
22 |
23 |
24 | RFX STACK
32 | Universal App featuring: React + Feathers + MobX
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
MobX Reactive State Management
49 |
50 |
51 |
52 |
Blazing fast Real Time by Feathers
53 |
54 |
55 |
56 |
React HOC for Responsive Media Queries
57 |
58 |
59 |
60 |
61 |
62 |
Isomorphic Fetch/Socket
63 |
64 |
65 |
66 |
Microservices Ready
67 |
68 |
69 |
70 |
React Hot Loader 3
71 |
72 |
73 |
74 |
75 |
54 | {isDev &&
}
55 | {isDev &&
}
56 |
61 |
67 |
72 |
73 |
74 |
75 |
81 |
82 | {this.props.children}
83 |
84 |
85 |
ui.snackBar.close()}
90 | />
91 |
99 |
40 |
![]()
45 |
82 |
83 |
84 | ));
85 |
86 | const UserMenu = observer(({ inline, user, accountMenuIsOpen }) => (
87 |
88 |
92 | {user.email} {inline && }
93 |
94 | {inline ?
95 | : }
99 |
100 | ));
101 |
102 | const GuestMenu = observer(({ inline }) => (
103 |
104 |
113 | Login
114 |
115 |
124 | Register
125 |
126 |
127 | ));
128 |
129 | export default observer(({ user, inline, authCheck, accountMenuIsOpen }) => (
130 |
131 | {(authCheck && !inline) && }
132 |
133 | {authCheck ?
134 | : }
139 |
140 |
141 |
142 | ));
143 |
--------------------------------------------------------------------------------
/src/shared/containers/Breakpoints.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Helmet from 'react-helmet';
3 | import { inject, observer } from 'mobx-react';
4 | import cx from 'classnames';
5 | import $ from '@/shared/styles/_.mixins';
6 |
7 | // styles
8 | const button = cx($.buttonPill, '_c1', '_b1');
9 |
10 | @inject('store') @observer
11 | export default class MatchMedia extends Component {
12 |
13 | static fetchData() {}
14 |
15 | static propTypes = {
16 | store: React.PropTypes.object,
17 | };
18 |
19 | render() {
20 | const bp = this.props.store.ui.breakpoints;
21 | return (
22 |
23 |
24 |
25 |
26 |
27 |
MobX React MatchMedia
28 |
Resize your browser window to see the breakpoints changing automatically.
29 |
The breakpoints are customizables in /src/shared/stores/ui.js
30 |
31 |
32 |
38 |
39 |
40 |
46 |
47 |
48 |
49 |
50 |
51 | | xs |
52 |
53 | {bp.xs
54 | ?
55 | :
56 | }
57 | |
58 | Extra small devices |
59 |
60 |
61 | | su |
62 |
63 | {bp.su
64 | ?
65 | :
66 | }
67 | |
68 | Small devices and UP |
69 |
70 |
71 | | sm |
72 |
73 | {bp.sm
74 | ?
75 | :
76 | }
77 | |
78 | Small devices |
79 |
80 |
81 | | md |
82 |
83 | {bp.md
84 | ?
85 | :
86 | }
87 | |
88 | Medium devices |
89 |
90 |
91 | | mu |
92 |
93 | {bp.mu
94 | ?
95 | :
96 | }
97 | |
98 | Medium devices and UP |
99 |
100 |
101 | | lg |
102 |
103 | {bp.lg
104 | ?
105 | :
106 | }
107 | |
108 | Large devices and UP |
109 |
110 |
111 |
112 |
20 |
21 |
47 |
71 |
72 |
73 |
74 | | xs |
75 |
76 | {bp.xs
77 | ?
78 | :
79 | }
80 | |
81 | Extra small devices |
82 |
83 |
84 | | su |
85 |
86 | {bp.su
87 | ?
88 | :
89 | }
90 | |
91 | Small devices and UP |
92 |
93 |
94 | | sm |
95 |
96 | {bp.sm
97 | ?
98 | :
99 | }
100 | |
101 | Small devices |
102 |
103 |
104 | | md |
105 |
106 | {bp.md
107 | ?
108 | :
109 | }
110 | |
111 | Medium devices |
112 |
113 |
114 | | mu |
115 |
116 | {bp.mu
117 | ?
118 | :
119 | }
120 | |
121 | Medium devices and UP |
122 |
123 |
124 | | lg |
125 |
126 | {bp.lg
127 | ?
128 | :
129 | }
130 | |
131 | Large devices and UP |
132 |
133 |
134 |
135 |