Initial Commit

- Setup Webpack config with react, typescript and redux
- Create Store with simple reducer
- Add Dashboard component

Author: shb9019

.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,8 @@
+.vscode
+.idea
+.DS_STORE
+node_modules
+.module-cache
+*.log*
+build
+dist

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "arrowParens": "always",
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "singleQuote": true,
+  "jsxBracketSameLine": false,
+  "printWidth": 120
+}

README.md

@@ -0,0 +1,26 @@
+# CodeCharacter Web
+  Web App for the frontend of CodeCharacter 2019
+ 
+## Installation
+
+```
+$ npm ci
+```
+
+## Running
+
+```
+$ npm start
+```
+
+## Build
+
+```
+$ npm run build
+```
+
+## Format code (using [Prettier](https://github.com/prettier/prettier))
+
+```
+$ npm run prettier
+```

package.json

@@ -0,0 +1,64 @@
+{
+  "name": "codecharacter-web-2019",
+  "version": "1.0.0",
+  "private": true,
+  "description": "Web App for CodeCharacter",
+  "main": "index.js",
+  "scripts": {
+    "predeploy": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --mode development --hot --progress --color --port 3000 --open",
+    "build": "webpack -p --progress --colors",
+    "prettier": "prettier --write \"src/**/*.{ts,tsx,css}\""
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@types/classnames": "2.2.6",
+    "@types/history": "4.7.1",
+    "@types/node": "10.11.7",
+    "@types/react": "16.4.16",
+    "@types/react-dom": "16.0.9",
+    "@types/react-redux": "6.0.9",
+    "@types/react-router": "4.0.32",
+    "@types/redux-actions": "2.3.1",
+    "@types/webpack": "4.4.16",
+    "@types/webpack-env": "1.13.6",
+    "babel-loader": "^8.0.4",
+    "css-loader": "^1.0.0",
+    "file-loader": "^2.0.0",
+    "gh-pages": "^2.0.1",
+    "html-loader": "^1.0.0-alpha.0",
+    "html-webpack-plugin": "^4.0.0-alpha",
+    "mini-css-extract-plugin": "^0.4.4",
+    "postcss": "^7.0.5",
+    "postcss-browser-reporter": "^0.5.0",
+    "postcss-import": "^12.0.0",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.1.1",
+    "postcss-reporter": "^6.0.0",
+    "postcss-url": "^8.0.0",
+    "prettier": "^1.14.3",
+    "react-hot-loader": "^4.3.11",
+    "redux-devtools-extension": "^2.13.5",
+    "style-loader": "^0.23.1",
+    "ts-loader": "^5.2.1",
+    "typescript": "^3.1.3",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.20.2",
+    "webpack-cleanup-plugin": "^0.5.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9"
+  },
+  "dependencies": {
+    "@types/react-split-pane": "^0.1.67",
+    "classnames": "^2.2.6",
+    "react": "^16.5.2",
+    "react-ace": "^6.2.0",
+    "react-dom": "^16.5.2",
+    "react-redux": "^5.0.7",
+    "react-router": "^4.3.1",
+    "react-split-pane": "^0.1.84",
+    "redux": "^4.0.1",
+    "redux-actions": "^2.6.1"
+  }
+}

src/app/actions/dashboard.ts

@@ -0,0 +1,7 @@
+// import { createAction } from 'redux-actions';
+
+export namespace DashboardActions {
+  export enum Type {}
+}
+
+export type DashboardActions = Omit<typeof DashboardActions, 'Type'>;

src/app/actions/index.ts

@@ -0,0 +1 @@
+export * from 'app/actions/dashboard';

src/app/components/Dashboard/Code/editor.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import AceEditor from 'react-ace';
+
+import 'brace/theme/monokai';
+
+export class Editor extends React.Component<Editor.Props, Editor.State> {
+  render() {
+    return (
+      <AceEditor
+        mode="c_cpp"
+        theme="monokai"
+        name="editor"
+        style={{
+          height: window.innerHeight,
+          width: '100%'
+        }}
+        editorProps={{ $blockScrolling: true }}
+      />
+    );
+  }
+}
+
+export namespace Editor {
+  export interface Props {}
+  export interface State {}
+}

src/app/components/Dashboard/index.css

@@ -0,0 +1,50 @@
+.Resizer.horizontal {
+  background: #000;
+  opacity: 0.2;
+  width: 2px;
+  z-index: 1;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
+  height: 11px;
+  margin: -5px 0;
+  border-top: 5px solid rgba(255, 255, 255, 0);
+  border-bottom: 5px solid rgba(255, 255, 255, 0);
+  cursor: row-resize;
+  width: 100%;
+}
+
+.Resizer.horizontal:hover {
+  border-top: 5px solid rgba(0, 0, 0, 0.5);
+  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+  -webkit-transition: all 2s ease;
+  transition: all 2s ease;
+}
+
+.Resizer.vertical {
+  background: #000;
+  opacity: 0.2;
+  width: 2px;
+  z-index: 1;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
+  width: 11px;
+  margin: 0 -5px;
+  border-left: 5px solid rgba(255, 255, 255, 0);
+  border-right: 5px solid rgba(255, 255, 255, 0);
+  cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+  -webkit-transition: all 2s ease;
+  transition: all 2s ease;
+  border-left: 5px solid rgba(0, 0, 0, 0.5);
+  border-right: 5px solid rgba(0, 0, 0, 0.5);
+}

src/app/components/Dashboard/index.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as style from './index.css';
+import SplitPane from 'react-split-pane';
+import { Editor } from './Code/editor';
+
+export namespace Dashboard {
+  export interface Props {}
+
+  export interface State {
+    code: String;
+  }
+}
+
+export class Dashboard extends React.Component<Dashboard.Props, Dashboard.State> {
+  constructor(props: Dashboard.Props, context?: any) {
+    super(props, context);
+    this.state = {
+      code: ''
+    };
+  }
+
+  render() {
+    return (
+      <SplitPane split="vertical" minSize={50} defaultSize={100} resizerClassName={style.vertical}>
+        <Editor />
+        <SplitPane split="horizontal" resizerClassName={style.horizontal}>
+          <div />
+          <div />
+        </SplitPane>
+      </SplitPane>
+    );
+  }
+}

src/app/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { Route, Switch } from 'react-router';
+import { Dashboard } from 'app/components/Dashboard';
+import { hot } from 'react-hot-loader';
+
+export const App = hot(module)(() => (
+  <Switch>
+    <Route path="/dashboard" component={Dashboard} />
+  </Switch>
+));

src/app/middleware/index.ts

@@ -0,0 +1 @@
+export * from './logger';

src/app/middleware/logger.ts

@@ -0,0 +1,8 @@
+import { Middleware } from 'redux';
+
+export const logger: Middleware = (store) => (next) => (action) => {
+  if (process.env.NODE_ENV !== 'production') {
+    console.log(action);
+  }
+  return next(action);
+};

src/app/models/index.ts

@@ -0,0 +1,9 @@
+import { handleActions } from 'redux-actions';
+import { RootState } from './state';
+// import { DashboardActions } from 'app/actions/dashboard';
+
+const initialState: RootState = {};
+
+export interface Action {}
+
+export const DashboardReducer = handleActions<RootState, Action>({}, initialState);

src/app/reducers/dashboard.ts

@@ -0,0 +1,9 @@
+import { combineReducers } from 'redux';
+import { RootState } from './state';
+import { DashboardReducer } from './dashboard';
+
+export { RootState };
+
+export const rootReducer = combineReducers<RootState>({
+  dashboard: DashboardReducer as any
+});

src/app/reducers/index.ts

@@ -0,0 +1 @@
+export interface RootState {}

src/app/reducers/state.ts

@@ -0,0 +1,23 @@
+import { Store, createStore, applyMiddleware } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension';
+import { logger } from 'app/middleware';
+import { RootState, rootReducer } from 'app/reducers';
+
+export function configureStore(initialState?: RootState): Store<RootState> {
+  let middleware = applyMiddleware(logger);
+
+  if (process.env.NODE_ENV !== 'production') {
+    middleware = composeWithDevTools(middleware);
+  }
+
+  const store = createStore(rootReducer as any, initialState as any, middleware) as Store<RootState>;
+
+  if (module.hot) {
+    module.hot.accept('app/reducers', () => {
+      const nextReducer = require('app/reducers');
+      store.replaceReducer(nextReducer);
+    });
+  }
+
+  return store;
+}

src/app/store/index.ts

@@ -0,0 +1,11 @@
+export function omit<T extends object, K extends keyof T>(target: T, ...omitKeys: K[]): Omit<T, K> {
+  return (Object.keys(target) as K[]).reduce(
+    (res, key) => {
+      if (!omitKeys.includes(key)) {
+        res[key] = target[key];
+      }
+      return res;
+    },
+    {} as any
+  );
+}

src/app/utils/index.ts

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
+    <title>Code Character</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

src/assets/index.html

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { createBrowserHistory } from 'history';
+import { configureStore } from 'app/store';
+import { Router } from 'react-router';
+import { App } from './app';
+
+// prepare store
+const history = createBrowserHistory();
+const store = configureStore();
+
+ReactDOM.render(
+  <Provider store={store}>
+    <Router history={history}>
+      <App />
+    </Router>
+  </Provider>,
+  document.getElementById('root')
+);

src/main.tsx

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "target": "es5",
+    "jsx": "react",
+    "module": "es6",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "declaration": false,
+    "removeComments": true,
+    "noImplicitReturns": true,
+    "noUnusedLocals": true,
+    "strict": true,
+    "outDir": "build",
+    "lib": ["es6", "es7", "dom"],
+    "baseUrl": "src",
+    "paths": {
+      "app/*": ["./app/*"]
+    }
+  },
+  "exclude": ["build", "node_modules"]
+}

tsconfig.json

@@ -0,0 +1,11 @@
+/** Global definitions for development **/
+
+// for style loader
+declare module '*.css' {
+  const styles: any;
+  export = styles;
+}
+
+// Omit type https://github.com/Microsoft/TypeScript/issues/12215#issuecomment-377567046
+type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
+type PartialPick<T, K extends keyof T> = Partial<T> & Pick<T, K>;