From a4ed88b05808b9cfd146dd42100ec5aa2166edaa Mon Sep 17 00:00:00 2001 From: snoop Date: Thu, 25 May 2017 17:44:58 +0900 Subject: [PATCH] test web first commit --- .gitignore | 63 +++++++ .ignore | 4 + gulpfile.js | 12 ++ package.json | 39 ++++ postcss.config.js | 5 + src/scss/components/Hello.scss | 24 +++ src/scss/index.scss | 5 + src/ts/containers/Main.tsx | 82 +++++++++ src/ts/containers/member/emailConfirm.tsx | 44 +++++ src/ts/containers/member/regist.tsx | 212 ++++++++++++++++++++++ src/ts/containers/member/registResult.tsx | 44 +++++ src/ts/index.tsx | 16 ++ tsconfig.json | 25 +++ tslint.json | 23 +++ webpack.config.js | 93 ++++++++++ 15 files changed, 691 insertions(+) create mode 100644 .gitignore create mode 100644 .ignore create mode 100644 gulpfile.js create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 src/scss/components/Hello.scss create mode 100644 src/scss/index.scss create mode 100644 src/ts/containers/Main.tsx create mode 100644 src/ts/containers/member/emailConfirm.tsx create mode 100644 src/ts/containers/member/regist.tsx create mode 100644 src/ts/containers/member/registResult.tsx create mode 100644 src/ts/index.tsx create mode 100644 tsconfig.json create mode 100644 tslint.json create mode 100644 webpack.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..447f30c --- /dev/null +++ b/.gitignore @@ -0,0 +1,63 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (http://nodejs.org/api/addons.html) +build/Release + +# Dependency directories +node_modules/ +jspm_packages/ + +# Typescript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env + +dist/ +node_modules/ +public/ +.vscode/ diff --git a/.ignore b/.ignore new file mode 100644 index 0000000..ceae385 --- /dev/null +++ b/.ignore @@ -0,0 +1,4 @@ +dist/ +node_modules/ +public/ +.vscode/ diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 0000000..11a2be0 --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,12 @@ +var gulp = require('gulp'); +var webpack = require('webpack'); +var webpackStream = require('webpack-stream'); +var webpackDevServer = require("webpack-dev-server"); + +gulp.task('webpack', function (callback) { + var webpackConfig = require('./webpack.config'); + + return webpackStream(webpackConfig, webpack) + .pipe(gulp.dest('./dist')); +}); + diff --git a/package.json b/package.json new file mode 100644 index 0000000..8dad7f9 --- /dev/null +++ b/package.json @@ -0,0 +1,39 @@ +{ + "name": "web_ui", + "version": "0.0.1", + "scripts": { + "webpack-dev-server": "webpack-dev-server" + }, + "devDependencies": { + "@types/material-ui": "^0.17.7", + "@types/node": "^7.0.22", + "@types/react": "^15.0.24", + "@types/react-dom": "^15.5.0", + "@types/react-router": "^4.0.9", + "@types/react-router-dom": "^4.0.4", + "@types/react-tap-event-plugin": "^0.0.30", + "awesome-typescript-loader": "^3.1.3", + "css-loader": "^0.28.2", + "extract-text-webpack-plugin": "^2.1.0", + "file-loader": "^0.11.1", + "gulp": "^3.9.1", + "image-webpack-loader": "^3.3.1", + "node-sass": "^4.5.3", + "postcss-loader": "^2.0.5", + "react-router-dom": "^4.1.1", + "sass-loader": "^6.0.5", + "source-map-loader": "^0.2.1", + "style-loader": "^0.18.1", + "typescript": "^2.3.3", + "webpack": "^2.6.0", + "webpack-dev-server": "^2.4.5", + "webpack-stream": "^3.2.0" + }, + "dependencies": { + "material-ui": "^0.18.1", + "react": "^15.5.4", + "react-dom": "15.5.4", + "react-router": "^4.1.1", + "react-tap-event-plugin": "^2.0.1" + } +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..134417d --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,5 @@ +module.exports = { + plugins: [ + require('autoprefixer') + ] +} \ No newline at end of file diff --git a/src/scss/components/Hello.scss b/src/scss/components/Hello.scss new file mode 100644 index 0000000..2afbe7d --- /dev/null +++ b/src/scss/components/Hello.scss @@ -0,0 +1,24 @@ +.App { + text-align: center; +} + +.App-logo { + animation: App-logo-spin infinite 20s linear; + height: 80px; +} + +.App-header { + background-color: #222; + height: 150px; + padding: 20px; + color: white; +} + +.App-intro { + font-size: large; +} + +@keyframes App-logo-spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} \ No newline at end of file diff --git a/src/scss/index.scss b/src/scss/index.scss new file mode 100644 index 0000000..673b879 --- /dev/null +++ b/src/scss/index.scss @@ -0,0 +1,5 @@ +body { + margin: 0; + padding: 0; + font-family: sans-serif; +} \ No newline at end of file diff --git a/src/ts/containers/Main.tsx b/src/ts/containers/Main.tsx new file mode 100644 index 0000000..ea80f4e --- /dev/null +++ b/src/ts/containers/Main.tsx @@ -0,0 +1,82 @@ +import * as React from 'react'; +import RaisedButton from 'material-ui/RaisedButton'; +import Dialog from 'material-ui/Dialog'; +import {deepOrange500} from 'material-ui/styles/colors'; +import FlatButton from 'material-ui/FlatButton'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; + + +const styles = { + container: { + textAlign: 'center', + paddingTop: 200, + }, +}; + +const muiTheme = getMuiTheme({ + palette: { + accent1Color: deepOrange500, + }, +}); + +interface MainState { + open: boolean; +} + +export class Main extends React.Component { + constructor(props: any, context: any) { + super(props, context); + + this.handleRequestClose = this.handleRequestClose.bind(this); + this.handleTouchTap = this.handleTouchTap.bind(this); + + this.state = { + open: false, + } as MainState; + } + + handleRequestClose() { + this.setState({ + open: false, + } as MainState); + } + + handleTouchTap() { + this.setState({ + open: true, + } ); + } + + render() { + const standardActions = ( + + ) as any; + + return ( + +
+ + 1-2-3-4-5 + +

Material-UI

+

example project

+ +
+ + ); + } +} \ No newline at end of file diff --git a/src/ts/containers/member/emailConfirm.tsx b/src/ts/containers/member/emailConfirm.tsx new file mode 100644 index 0000000..bc690ec --- /dev/null +++ b/src/ts/containers/member/emailConfirm.tsx @@ -0,0 +1,44 @@ + + +import * as React from "react"; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import { deepOrange500 } from 'material-ui/styles/colors'; +import RaisedButton from 'material-ui/RaisedButton'; + +const styles = { + container: { + textAlign: 'center', + } +} + +const muiTheme = getMuiTheme({ + palette: { + accent1Color: deepOrange500, + }, +}); + + +export class MemberEmailConfirm extends React.Component { + constructor(props: any, context: any) { + super(props, context); + + + } + + + render() { + + return ( + +
+

Email Conform!

+

You Can Do it

+ + + +
+ + ); + } +} \ No newline at end of file diff --git a/src/ts/containers/member/regist.tsx b/src/ts/containers/member/regist.tsx new file mode 100644 index 0000000..b175942 --- /dev/null +++ b/src/ts/containers/member/regist.tsx @@ -0,0 +1,212 @@ +/** + * In this file, we create a React component + * which incorporates components provided by Material-UI. + */ +import * as React from 'react'; +import RaisedButton from 'material-ui/RaisedButton'; +import Dialog from 'material-ui/Dialog'; +import { deepOrange500 } from 'material-ui/styles/colors'; +import FlatButton from 'material-ui/FlatButton'; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; + +import * as ReactDOM from 'react-dom'; + +import Divider from 'material-ui/Divider'; +import Paper from 'material-ui/Paper'; +import TextField from 'material-ui/TextField'; + +import SelectField from 'material-ui/SelectField'; +import MenuItem from 'material-ui/MenuItem'; + +import Slider from 'material-ui/Slider'; + +import * as http from "http" + +import { MemberRegistResult } from './registResult'; + + +const styles = { + body: { + textAlign: 'center', + }, + container: { + textAlign: 'center', + + }, + + textfield: { + width: 300, + marginLeft: 3 + }, + + customWidth: { + width: 150, + }, + button: { + margin: 12, + } +}; + +const muiTheme = getMuiTheme({ + palette: { + accent1Color: deepOrange500, + }, +}); + +export class MemberRegist extends React.Component { + constructor(props: any, context: any) { + super(props, context); + + this.handleSignUp = this.handleSignUp.bind(this); + + this.state = { + open: false, + value: 1, + + email:"", + name:"", + company:"", + phone:"", + pw:"", + }; + } + + handleChange = () => this.setState({ }); + + private emailInput: any; + + handleRequestClose = () => { + this.setState({ + open: false, + }); + } + + handleTouchTap = () => { + this.setState({ + open: true, + }); + } + + handleSignUp = () => { + + let output: string; + let obj: any; //new object declaration + obj = {"email":this.state.email, + "pwSalt":this.state.pw, + "name":this.state.name, + "company":this.state.company, + "phone":this.state.phone}; + + +output = JSON.stringify(obj); + +obj = {"value":output}; + +fetch('http://192.168.1.209:8080/v1/example/echo', { + method: 'POST', + headers: { + 'Accept': 'application/json', + // mode: 'no-cors' + }, + body: JSON.stringify(obj) +}).then(function (response) { + return response.json(); +}).then(function (json) { + console.log(json); +}).catch((err) => { + console.log(err); +}); + + + + + + } + + +handleResultContainer = () => { + ReactDOM.render( + , + document.getElementById('example') +); +} + + + btnTouchTap = () => { + alert(event) + }; + + render() { + + return ( + + +
+ Get started with Overflow +
+ this.setState({ email: newValue})} + /> +
+ this.setState({ name: newValue})} + + /> +
+ + this.setState({ company: newValue})} + /> +
+ + this.setState({ phone: newValue})} + /> +
+ + this.setState({ pw: newValue})} + /> +
+ + + + +
+ + + ); + } +} + diff --git a/src/ts/containers/member/registResult.tsx b/src/ts/containers/member/registResult.tsx new file mode 100644 index 0000000..6f93369 --- /dev/null +++ b/src/ts/containers/member/registResult.tsx @@ -0,0 +1,44 @@ + + +import * as React from "react"; +import getMuiTheme from 'material-ui/styles/getMuiTheme'; +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; +import { deepOrange500 } from 'material-ui/styles/colors'; +import RaisedButton from 'material-ui/RaisedButton'; + +const styles = { + container: { + textAlign: 'center', + } +} + +const muiTheme = getMuiTheme({ + palette: { + accent1Color: deepOrange500, + }, +}); + + +export class MemberRegistResult extends React.Component { + constructor(props: any, context: any) { + super(props, context); + + + } + + + render() { + + return ( + +
+

Starting Overflow!

+

Please Check Email

+ + + +
+ + ); + } +} \ No newline at end of file diff --git a/src/ts/index.tsx b/src/ts/index.tsx new file mode 100644 index 0000000..5011661 --- /dev/null +++ b/src/ts/index.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import * as injectTapEventPlugin from 'react-tap-event-plugin'; +import { MemberRegist } from './containers/member/regist'; +import { MemberRegistResult } from './containers/member/registResult'; +import { MemberEmailConfirm } from './containers/member/emailConfirm'; + + +import '../scss/index.scss'; + +injectTapEventPlugin(); + +ReactDOM.render( + , + document.getElementById('example') +); \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..9db5da2 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "allowSyntheticDefaultImports": true, + "declaration": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "jsx": "react", + "module": "commonjs", + "moduleResolution": "node", + "newLine": "LF", + "noImplicitAny": true, + "noImplicitThis": true, + "outDir": "./dist/src/", + "preserveConstEnums": true, + "sourceMap": true, + "target": "es5" + }, + "include": [ + "./src/ts/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/tslint.json b/tslint.json new file mode 100644 index 0000000..bd1e076 --- /dev/null +++ b/tslint.json @@ -0,0 +1,23 @@ +{ + "rules": { + "indent": [ + true, + 4, + "spaces" + ], + "quotemark": [ + "single" + ], + "no-unused-expression": true, + "no-duplicate-variable": true, + "curly": true, + "class-name": true, + "triple-equals": [ + true + ], + "semicolon": [ + true, + "always" + ] + } +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..798c72b --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,93 @@ +const webpack = require('webpack'); +const ExtractTextPlugin = require('extract-text-webpack-plugin'); + +module.exports = { + entry: { + ts: [ + './src/ts/index.tsx' + ], + vendor: [ + 'react', + 'react-dom', + 'react-router', + 'react-router-dom' + ] + }, + output: { + filename: 'bundle.js', + path: __dirname + '/dist', + }, + + devtool: 'source-map', + + devServer: { + hot: true, // enable HMR on the server + inline: true, + historyApiFallback: true, + contentBase: [__dirname + '/public', __dirname + '/dist', __dirname + '/node_modules'], // match the output path + publicPath: '/' ,// match the output `publicPath` + host: '192.168.1.209', + port: 9091, + stats: { + colors: true + }, + }, + + resolve: { + // Add '.ts' and '.tsx' as resolvable extensions. + extensions: ['.ts', '.tsx', '.js', '.json'] + }, + + module: { + rules: [ + { + enforce: 'pre', + test: /\.js$/, + loader: 'source-map-loader' + }, + { + test: /\.scss$/, + use: ExtractTextPlugin.extract({ + fallback: 'style-loader', + use: ['css-loader', 'postcss-loader', 'sass-loader'] + }) + }, + { + test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/, + // loader: 'url?limit=10000' + loaders: [ + 'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', + 'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false' + ] + }, + + { + test: /\.tsx?$/, + loader: 'awesome-typescript-loader' + } + + ] + }, + plugins: [ + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + minChunks: Infinity, + filename: 'vendor.bundle.js' + }), + new ExtractTextPlugin({ + filename: __dirname + '/dist/css/[name].bundle.css', + disable: false, + allChunks: true + }), + new webpack.HotModuleReplacementPlugin(), // enable HMR globally + + ], + // When importing a module whose path matches one of the following, just + // assume a corresponding global variable exists and use that instead. + // This is important because it allows us to avoid bundling all of our + // dependencies, which allows browsers to cache those libraries between builds. + // externals: { + // 'react': 'React', + // 'react-dom': 'ReactDOM' + // }, +}; \ No newline at end of file