redux as storage represent application state
-
component fire actions
-
reducers check actions and modify storage
-
on storage change components are rerendered
eslint is used for basic style checking
flow is used as static style checker
examples:
// @flow
function square(n: number): number {
return n * n;
}
//@flow should be added for each file which should be checked by flow
n: number inform flow about type of n
js class example:
class FLowExample<{n: number}> {}
Default react functions and component are used for lazy loading and react-router for routing
import React, { Component, Suspense, lazy } from 'react';
import { Route, Switch } from 'react-router-dom';
const Dashboard = lazy(() => import('../views/dashboard/dashboard'));
class Example extends Component {
render() {
return (
<Suspense fallback={<LoadingBox />}>
<Switch>
<Route exact path="/" component={Dashboard}/>
<Route exact path="/dynamic/:template/:objectType/:objectId" component={DynamicPage}/>
</Switch>
</Suspense>
);
}
}
- /app - basic app code - storage, middleware, config, routes, auth functions
- /components - all UI components we use (containers, controls etc.)
- /components/styled - custom styling (not regular material ui) is here
- /jsxParse - everything about parsing generated pages
- /views - applications pages
- /view/example - example page dir
- /view/example/example.js - example page logic
- /view/example/exampleTemplate.js - example page template rendered by component in example.js
- /view/example/exampleReducer.js - example page reducer
material-ui is used as UI framework
styled components is used for custom styling (no css files in project)
styled components examples:
// Static object
const Box = styled.div({
background: 'palevioletred',
height: '50px',
width: '50px'
});
// Adapting based on props
const PropsBox = styled.div(props => ({
background: props.background,
height: '50px',
width: '50px'
}));
render(
<div>
<Box />
<PropsBox background="blue" />
</div>
);
REST api is user for backed
All API requests are handler by redux-rest-middleware
To make api call - component should fire event with meta property:
const listTodos = () => ({
type: 'LIST_TODOS',
meta: {
rest: '/todos',
},
});
JWT is used for authorization
auth middleware store JWT token in locaStorage remove it when token is expired
custom theme parameters is stored in src/public/config
palette: {
type: "light",
primary: {
light: '#42a5f5',
main: '#0d1d41', // used as background-color for top Navigation, primary Buttons, main right side Menu, DatePicker header and Primary icons
dark: '#24ce7b', // used as background-color for :hover primary Buttons
contrastText: '#fff', // color for text in top Navigation, primary Buttons, main right side Menu items text
},
secondary: {
light: '#66bb6a',
main: '#388e3c', // used as background-color for secondary Buttons, color for Loader
dark: '#2e7d32', // used as background-color for :hover secondary Buttons
contrastText: '#fff', // color for text in secondary Buttons
},
background: {
default: '#f1f5f6',// used as page background-color
paper: "#ffffff", // used as background-color for content blocks in application
},
action: {
active: '#0d1d41',
hover: '#24ce7b', // used as :hover background-color for items in main right side Menu
hoverOpacity: "0.1",
selected: '#37D287', // used as background-color for active items in main right side Menu
}
all parameters can be redefined there, or few other themes can be added.
Parameters are set:
palette- colors for theme elements:type- default type of theme ("dark" or "light")background- default for all application and paper inside Paper componentprimary- colors for primary elements (headers, checkboxes and buttons)secondary- colors for secondary elements (headers, checkboxes and buttons)action- styles for menu items, links and buttons on Hover, Active
More details about using Matherial UI Theme can be found here material-ui-themes
NodeJS, yarn
Go to project path
run npm install
run yarn && yarn start