10 | // Ops, page not found.
11 | //
15 | // );
16 | // }
17 | }
18 |
--------------------------------------------------------------------------------
/src/features/common/OpenLink.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | export default class OpenLink extends Component {
4 | handleClick = evt => {
5 | evt.preventDefault();
6 | evt.stopPropagation();
7 | window.bridge.shell.openExternal(this.props.href);
8 | };
9 |
10 | render() {
11 | return (
12 |
13 | {this.props.children}
14 |
15 | );
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/features/home/redux/actions.js:
--------------------------------------------------------------------------------
1 | export { openProject, dismissOpenProjectError } from './openProject';
2 | export { closeProject, dismissCloseProjectError } from './closeProject';
3 | export { getInitialState, dismissGetInitialStateError } from './getInitialState';
4 | export { getMainState, dismissGetMainStateError } from './getMainState';
5 | export { showNewProjectDialog } from './showNewProjectDialog';
6 | export { hideNewProjectDialog } from './hideNewProjectDialog';
7 | export { showWelcomePage } from './showWelcomePage';
8 |
--------------------------------------------------------------------------------
/src/features/home/redux/initialState.js:
--------------------------------------------------------------------------------
1 | const initialState = {
2 | openProjectPending: false,
3 | openProjectError: null,
4 | closeProjectPending: false,
5 | closeProjectError: null,
6 |
7 | studios: [],
8 | studioById: {},
9 | getInitialStatePending: false,
10 | getInitialStateError: null,
11 |
12 | initializing: true,
13 | getMainStatePending: false,
14 | getMainStateError: null,
15 |
16 | newProjectDialogVisible: false,
17 | welcomePageVisible: false,
18 | };
19 |
20 | export default initialState;
21 |
--------------------------------------------------------------------------------
/tests/features/home/DefaultPage.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { DefaultPage } from '../../../src/features/home/DefaultPage';
4 |
5 | describe('home/DefaultPage', () => {
6 | it('renders node with correct class name', () => {
7 | const props = {
8 | home: {},
9 | actions: {},
10 | };
11 | const renderedComponent = shallow(12 | // Back to welcome page. 13 | //
14 | //
15 |
20 |
27 |
28 | );
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/tests/Root.test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import configStore from '../src/common/configStore';
4 | import Root from '../src/Root';
5 |
6 | describe('Root', () => {
7 | it('Root has no error', () => {
8 | const DumpContainer = () => {item.description}
19 |{this.props.children}
;
9 | const NotFoundComp = () => Not found
;
10 | const routes = [{
11 | childRoutes: [
12 | { path: '/', component: DumpContainer, childRoutes: [{ path: 'abc' }] },
13 | { path: '/root', autoIndexRoute: true },
14 | { path: 'relative-path', name: 'Link Name' },
15 | {
16 | path: 'sub-links',
17 | childRoutes: [
18 | { path: 'sub-link' },
19 | ],
20 | },
21 | { path: '*', component: NotFoundComp },
22 | ],
23 | }];
24 | const store = configStore();
25 |
26 | shallow(
27 |
16 | Page Content: new-project/ProjectProperties2
17 |
18 | );
19 | }
20 | }
21 |
22 | /* istanbul ignore next */
23 | function mapStateToProps(state) {
24 | return {
25 | newProject: state.newProject,
26 | };
27 | }
28 |
29 | /* istanbul ignore next */
30 | function mapDispatchToProps(dispatch) {
31 | return {
32 | actions: bindActionCreators({ ...actions }, dispatch)
33 | };
34 | }
35 |
36 | export default connect(
37 | mapStateToProps,
38 | mapDispatchToProps
39 | )(ProjectProperties);
40 |
--------------------------------------------------------------------------------
/src/styles/mixins.less:
--------------------------------------------------------------------------------
1 | @primary-color: #1890ff;
2 | @header-height: 22px;
3 | @red2: rgb(242, 119, 119);
4 | @green2: rgb(93, 167, 0);
5 | .scroll-style() {
6 | &::-webkit-scrollbar {
7 | width: 0.5rem;
8 | height: 0.5rem;
9 | }
10 |
11 | &::-webkit-scrollbar-thumb {
12 | transition: all 0.3s ease;
13 | border-color: transparent;
14 | background-color: hsla(0, 0%, 100%, 0.1);
15 | z-index: 40;
16 | }
17 |
18 | &::-webkit-scrollbar-corner {
19 | background-color: rgba(0, 0, 0, 0);
20 | }
21 | }
22 |
23 | .abs-fullsize {
24 | position: absolute;
25 | left: 0;
26 | right: 0;
27 | top: 0;
28 | bottom: 0;
29 | }
30 |
31 | .vertical-center {
32 | position: relative;
33 | top: 50%;
34 | transform: translateY(-50%);
35 | }
36 |
37 | .full-page {
38 | .abs-fullsize;
39 | top: @header-height;
40 | }
41 |
42 | .spin {
43 | animation-name: spin;
44 | animation-duration: 2000ms;
45 | animation-iteration-count: infinite;
46 | animation-timing-function: linear;
47 | }
48 |
49 | @keyframes spin {
50 | from {
51 | transform: rotate(0deg);
52 | }
53 | to {
54 | transform: rotate(360deg);
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { AppContainer } from 'react-hot-loader';
3 | import { render } from 'react-dom';
4 | // import configStore from './common/configStore';
5 | import store from './common/store';
6 |
7 | import routeConfig from './common/routeConfig';
8 | import Root from './Root';
9 |
10 | function renderApp(app) {
11 | render(
54 |
57 |
58 | );
59 | }
60 | }
61 |
62 | export default Form.create()(NewProjectForm);
63 |
--------------------------------------------------------------------------------
/src/features/home/WelcomePage.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/mixins';
2 |
3 | .home-welcome-page {
4 | .abs-fullsize;
5 | top: @header-height;
6 | background-color: #1e1e1e;
7 | color: #ccc;
8 | font-family: Roboto, Arial, Helvetica, sans-serif;
9 | font-weight: 300;
10 |
11 | h1,
12 | h2,
13 | h3,
14 | h4 {
15 | color: #ccc;
16 | font-weight: 100;
17 | }
18 |
19 | .main-area {
20 | width: 800px;
21 | height: 400px;
22 | background-color: #191919;
23 | border-radius: 6px;
24 | margin: 0 auto;
25 | .vertical-center;
26 | .rekit-logo {
27 | width: 60px;
28 | }
29 | .footer {
30 | // background-color: red;
31 | // margin-bottom:
32 | line-height: 50px;
33 | text-align: left;
34 | color: #555;
35 | font-size: 12px;
36 | padding-left: 10px;
37 | label,
38 | a {
39 | color: #555;
40 | cursor: pointer;
41 | margin-right: 15px;
42 | &:last-child {
43 | margin-right: 0;
44 | }
45 | &:hover {
46 | color: #888;
47 | }
48 | }
49 | }
50 | }
51 |
52 | .welcome-area {
53 | text-align: center;
54 | padding-top: 50px;
55 | }
56 | p {
57 | margin-bottom: 50px;
58 | }
59 |
60 | .row-button {
61 | position: relative;
62 | padding-left: 20px;
63 | margin: 15px 0 0 110px;
64 | text-align: left;
65 | line-height: 20px;
66 | color: @primary-color;
67 | cursor: pointer;
68 | // background-color: rgba(255, 255, 255, 0.05);
69 | height: 20px;
70 | .anticon {
71 | position: absolute;
72 | font-size: 16px;
73 | color: @primary-color;
74 | left: 0px;
75 | top: 2px;
76 | }
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/features/plugin-manager/PluginList.less:
--------------------------------------------------------------------------------
1 | @import '../../styles/mixins';
2 |
3 | .plugin-manager-plugin-list {
4 | background-color: #262626;
5 | position: absolute;
6 | top: 40px;
7 | left: 0px;
8 | right: 0px;
9 | bottom: 0;
10 |
11 | &.plugins-loading {
12 | padding: 10px;
13 | color: #777;
14 | }
15 | ul {
16 | height: 100%;
17 | overflow: auto;
18 | .scroll-style();
19 | }
20 | ul,
21 | li {
22 | list-style: none;
23 | padding: 0;
24 | margin: 0;
25 | }
26 |
27 | li {
28 | position: relative;
29 | padding: 5px 5px 5px 45px;
30 | border-bottom: 1px solid #333;
31 | &.selected {
32 | background-color: #111;
33 | }
34 | .plugin-logo {
35 | position: absolute;
36 | left: 10px;
37 | top: 10px;
38 | width: 26px;
39 | max-height: 40px;
40 | }
41 | .name {
42 | overflow: hidden;
43 | text-overflow: ellipsis;
44 | display: inline-block;
45 | max-width: 200px;
46 | white-space: nowrap;
47 | font-size: 12px;
48 | vertical-align: bottom;
49 | }
50 | .version {
51 | display: inline-block;
52 | margin-left: 5px;
53 | font-size: 10px;
54 | color: #999;
55 | }
56 | p {
57 | color: #999;
58 | font-size: 12px;
59 | margin-bottom: 0;
60 | white-space: nowrap;
61 | overflow: hidden;
62 | text-overflow: ellipsis;
63 | }
64 |
65 | .ant-col {
66 | font-size: 12px;
67 | .author {
68 | overflow: hidden;
69 | white-space: nowrap;
70 | color:#777;
71 | font-size: 10px;
72 | max-width: 100%;
73 | text-overflow: ellipsis;
74 | }
75 |
76 | }
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/images/discord.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/features/plugin-manager/PluginDetail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import _ from 'lodash';
4 | import { bindActionCreators } from 'redux';
5 | import { connect } from 'react-redux';
6 | import * as actions from './redux/actions';
7 | import { PluginHeader } from './';
8 |
9 | export class PluginDetail extends Component {
10 | static propTypes = {
11 | pluginManager: PropTypes.object.isRequired,
12 | actions: PropTypes.object.isRequired,
13 | name: PropTypes.string,
14 | };
15 | renderNotFound() {
16 | return Plugin not found: {this.props.name}.
;
17 | }
18 | renderNotSelected() {
19 | return No plugin selected.
;
20 | }
21 | render() {
22 | const { name, plugins, onlinePlugins } = this.props;
23 | if (!name) return this.renderNotSelected();
24 | const allPlugins = [...plugins, ...onlinePlugins];
25 | const found = _.find(allPlugins, { name });
26 | if (!found) return this.renderNotFound();
27 | return (
28 |
29 |
32 | );
33 | }
34 | }
35 |
36 | /* istanbul ignore next */
37 | function mapStateToProps(state) {
38 | return {
39 | onlinePlugins: state.pluginManager.onlinePlugins,
40 | plugins: state.pluginManager.plugins,
41 | pluginManager: state.pluginManager,
42 | };
43 | }
44 |
45 | /* istanbul ignore next */
46 | function mapDispatchToProps(dispatch) {
47 | return {
48 | actions: bindActionCreators({ ...actions }, dispatch),
49 | };
50 | }
51 |
52 | export default connect(
53 | mapStateToProps,
54 | mapDispatchToProps,
55 | )(PluginDetail);
56 |
--------------------------------------------------------------------------------
/src/features/plugin-manager/MainPage.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { bindActionCreators } from 'redux';
4 | import { connect } from 'react-redux';
5 | import * as actions from './redux/actions';
6 | import { Row, Col, Button } from 'antd';
7 | import { PluginList, PluginDetail } from './';
8 | import history from '../../common/history';
9 |
10 | export class MainPage extends Component {
11 | static propTypes = {
12 | pluginManager: PropTypes.object.isRequired,
13 | actions: PropTypes.object.isRequired,
14 | match: PropTypes.object.isRequired,
15 | };
16 |
17 | render() {
18 | return (
19 |
20 |
35 | );
36 | }
37 | }
38 |
39 | /* istanbul ignore next */
40 | function mapStateToProps(state) {
41 | return {
42 | pluginManager: state.pluginManager,
43 | };
44 | }
45 |
46 | /* istanbul ignore next */
47 | function mapDispatchToProps(dispatch) {
48 | return {
49 | actions: bindActionCreators({ ...actions }, dispatch),
50 | };
51 | }
52 |
53 | export default connect(
54 | mapStateToProps,
55 | mapDispatchToProps,
56 | )(MainPage);
57 |
--------------------------------------------------------------------------------
/src/features/plugin-manager/redux/reducer.js:
--------------------------------------------------------------------------------
1 | // This is the root reducer of the feature. It is used for:
2 | // 1. Load reducers from each action in the feature and process them one by one.
3 | // Note that this part of code is mainly maintained by Rekit, you usually don't need to edit them.
4 | // 2. Write cross-topic reducers. If a reducer is not bound to some specific action.
5 | // Then it could be written here.
6 | // Learn more from the introduction of this approach:
7 | // https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da.
8 |
9 | import initialState from './initialState';
10 | import { reducer as fetchInstalledPluginsReducer } from './fetchInstalledPlugins';
11 | import { reducer as enablePluginReducer } from './enablePlugin';
12 | import { reducer as disablePluginReducer } from './disablePlugin';
13 | import { reducer as installPluginReducer } from './installPlugin';
14 | import { reducer as uninstallPluginReducer } from './uninstallPlugin';
15 | import { reducer as fetchOnlinePluginsReducer } from './fetchOnlinePlugins';
16 |
17 | import { HOME_GET_MAIN_STATE_SUCCESS } from '../../home/redux/constants';
18 |
19 | const reducers = [
20 | fetchInstalledPluginsReducer,
21 | enablePluginReducer,
22 | disablePluginReducer,
23 | installPluginReducer,
24 | uninstallPluginReducer,
25 | fetchOnlinePluginsReducer,
26 | ];
27 |
28 | export default function reducer(state = initialState, action) {
29 | let newState;
30 | switch (action.type) {
31 | // Handle cross-topic actions here
32 | case HOME_GET_MAIN_STATE_SUCCESS:
33 | newState = {
34 | ...state,
35 | installing: action.data.installing,
36 | uninstalling: action.data.uninstalling,
37 | };
38 | break;
39 | default:
40 | newState = state;
41 | break;
42 | }
43 | return reducers.reduce((s, r) => r(s, action), newState);
44 | }
45 |
--------------------------------------------------------------------------------
/src/features/home/RecentProjects.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { bindActionCreators } from 'redux';
4 | import { connect } from 'react-redux';
5 | import * as actions from './redux/actions';
6 | import { Icon } from 'antd';
7 | import utils from './utils';
8 |
9 | export class RecentProjects extends Component {
10 | static propTypes = {
11 | recentProjects: PropTypes.array.isRequired,
12 | actions: PropTypes.object.isRequired,
13 | };
14 |
15 | handleOpenProject = (dir) => {
16 | utils.openProject(dir);
17 | };
18 |
19 | render() {
20 | const { recentProjects } = this.props;
21 | return (
22 |
21 |
25 |
28 |
29 |
33 |
34 |
22 |
24 | Plugins
27 |
23 |
40 | );
41 | }
42 | }
43 |
44 | /* istanbul ignore next */
45 | function mapStateToProps(state) {
46 | return {
47 | recentProjects: state.home.recentProjects,
48 | };
49 | }
50 |
51 | /* istanbul ignore next */
52 | function mapDispatchToProps(dispatch) {
53 | return {
54 | actions: bindActionCreators({ ...actions }, dispatch)
55 | };
56 | }
57 |
58 | export default connect(
59 | mapStateToProps,
60 | mapDispatchToProps
61 | )(RecentProjects);
62 |
--------------------------------------------------------------------------------
/src/features/home/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { bindActionCreators } from 'redux';
4 | import { matchPath } from 'react-router-dom';
5 | import { connect } from 'react-redux';
6 | import { RekitStudioPage, TitleBar, DialogPlace } from './';
7 | import { getMainState } from './redux/actions';
8 |
9 | /*
10 | This is the root component of your app. Here you define the overall layout
11 | and the container of the react router.
12 | You should adjust it according to the requirement of your app.
13 | */
14 | export class App extends Component {
15 | static propTypes = {
16 | children: PropTypes.node,
17 | actions: PropTypes.object.isRequired,
18 | initializing: PropTypes.bool.isRequired,
19 | router: PropTypes.object.isRequired,
20 | };
21 |
22 | static defaultProps = {
23 | children: '',
24 | };
25 |
26 | componentDidMount() {
27 | this.props.actions.getMainState();
28 | window.bridge.ipcRenderer.on('state-changed', () => {
29 | this.props.actions.getMainState();
30 | });
31 | }
32 |
33 | render() {
34 | const match = matchPath(this.props.router.location.pathname, {
35 | path: '/rekit-studio/:port',
36 | exact: true,
37 | });
38 | return (
39 | Recent Projects
24 |-
25 | {recentProjects.map(prj => (
26 |
- this.handleOpenProject(prj.path)}
31 | >
32 | {prj.logo ?
:
} 33 | {prj.path.split('/').pop()}
34 |{prj.path}
35 |
36 | ))}
37 | {recentProjects.length === 0 && - No recent projects. } 38 |
40 |
47 | );
48 | }
49 | }
50 |
51 | /* istanbul ignore next */
52 | function mapStateToProps(state) {
53 | return {
54 | initializing: state.home.initializing,
55 | router: state.router,
56 | };
57 | }
58 |
59 | /* istanbul ignore next */
60 | function mapDispatchToProps(dispatch) {
61 | return {
62 | actions: bindActionCreators({ getMainState }, dispatch),
63 | };
64 | }
65 |
66 | export default connect(
67 | mapStateToProps,
68 | mapDispatchToProps,
69 | )(App);
70 |
--------------------------------------------------------------------------------
/src/features/new-project/redux/reducer.js:
--------------------------------------------------------------------------------
1 | // This is the root reducer of the feature. It is used for:
2 | // 1. Load reducers from each action in the feature and process them one by one.
3 | // Note that this part of code is mainly maintained by Rekit, you usually don't need to edit them.
4 | // 2. Write cross-topic reducers. If a reducer is not bound to some specific action.
5 | // Then it could be written here.
6 | // Learn more from the introduction of this approach:
7 | // https://medium.com/@nate_wang/a-new-approach-for-managing-redux-actions-91c26ce8b5da.
8 |
9 | import initialState from './initialState';
10 | import { reducer as fetchAppTypesReducer } from './fetchAppTypes';
11 | import { reducer as createAppReducer } from './createApp';
12 | import { reducer as clearCreateAppStatusReducer } from './clearCreateAppStatus';
13 | import { HOME_GET_MAIN_STATE_SUCCESS } from '../../home/redux/constants';
14 | const reducers = [
15 | fetchAppTypesReducer,
16 | createAppReducer,
17 | clearCreateAppStatusReducer,
18 | ];
19 |
20 | export default function reducer(state = initialState, action) {
21 | let newState = state;
22 | switch (action.type) {
23 | // Handle cross-topic actions here
24 | case 'CREATE_APP_STATUS':
25 | newState = {
26 | ...state,
27 | createAppStatus: [...state.createAppStatus, action.data],
28 | };
29 | break;
30 | case 'CREATE_APP_SUCCESS':
31 | newState = {
32 | ...state,
33 | createAppStatus: [],
34 | createAppPending: false,
35 | };
36 | break;
37 | case 'CREATE_APP_FAILURE':
38 | newState = {
39 | ...state,
40 | createAppStatus: [],
41 | createAppPending: false,
42 | createAppError: action.data,
43 | };
44 | break;
45 | case HOME_GET_MAIN_STATE_SUCCESS:
46 | newState = {
47 | ...state,
48 | appTypes: action.data.appTypes,
49 | };
50 | break;
51 | default:
52 | newState = state;
53 | break;
54 | }
55 | return reducers.reduce((s, r) => r(s, action), newState);
56 | }
57 |
--------------------------------------------------------------------------------
/src/Root.js:
--------------------------------------------------------------------------------
1 | /* This is the Root component mainly initializes Redux and React Router. */
2 |
3 | import React from 'react';
4 | import PropTypes from 'prop-types';
5 | import { Provider } from 'react-redux';
6 | import { Switch, Route } from 'react-router-dom';
7 | import { ConnectedRouter } from 'react-router-redux';
8 | import history from './common/history';
9 |
10 | function renderRouteConfigV3(routes, contextPath) {
11 | // Resolve route config object in React Router v3.
12 | const children = []; // children component list
13 |
14 | const renderRoute = (item, routeContextPath) => {
15 | let newContextPath;
16 | if (/^\//.test(item.path)) {
17 | newContextPath = item.path;
18 | } else {
19 | newContextPath = `${routeContextPath}/${item.path}`;
20 | }
21 | newContextPath = newContextPath.replace(/\/+/g, '/');
22 | if (item.component && item.childRoutes) {
23 | const childRoutes = renderRouteConfigV3(item.childRoutes, newContextPath);
24 | children.push(
25 |
43 | {this.props.initializing ? 'Loading...' : this.props.children}
44 |
45 | Which type of the project to create?
34 |
38 | {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13].map(i => (
39 |
49 | {this.state.selected && (
50 | this.handleSelect(i)}
43 | >
44 |
47 | ))}
48 |
51 | Rekit React template provides feature based SPA boilerplate with React Router, Redux
52 | outof box.
53 |
54 | )}
55 |