Initial commit.

Author: rootsher

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+dist/
+.git/
+.idea/
+*~
+*.log
+*.tmp
+*.swp

.prettierignore

@@ -0,0 +1,11 @@
+node_modules/
+dist/
+.git/
+.idea/
+*~
+*.log
+*.tmp
+*.swp
+yarn.lock
+.gitignore
+.prettierignore

README.md

@@ -0,0 +1,128 @@
+# react-webpack-starter
+
+## 1. Requirements
+
+*   node (v8.9.4)
+*   yarn (v1.3.2)
+
+## 2. Installation
+
+```sh
+yarn # [enter] or yarn install
+```
+
+## 3. Scripts
+
+### \* webpack-dev-server (watch mode)
+
+```sh
+$ yarn start
+```
+
+```sh
+$ yarn start -- --host=0.0.0.0 # default: localhost
+```
+
+```sh
+$ yarn start -- --port=8081 # default: 8080
+```
+
+### \* production build (output in `./dist`)
+
+```sh
+$ yarn build
+```
+
+## 4. Features
+
+*   ES5, ES6 (ES2015), ES2016, ESNext
+*   webpack
+    *   webpack-dev-server + HMR
+    *   HMR
+    *   dynamic imports
+*   typescript
+*   babel + polyfills
+*   jsx + react + react-router v4
+*   material design (material-ui)
+*   css + scss + postcss (CSS modules + cssnext)
+*   prettier + linters
+
+## 5. Capabilities
+
+### _ importing image files i.e. `_.jpg`,`_.png`,`_.gif`,`\*.svg`
+
+before:
+
+```jsx
+import image from "./example/path/image.png";
+
+<img src={image} />;
+```
+
+after:
+
+```jsx
+<img src="./assets/image/23tr82r3278r28332.png" />
+```
+
+### _ using fonts (without import) in `_.scss` file
+
+before:
+
+```css
+@font-face {
+    font-family: Font;
+    src: url("./fonts/font.woff") format("woff");
+}
+```
+
+after:
+
+```css
+@font-face {
+    font-family: Font;
+    src: url("./assets/fonts/1387r122f3273.woff") format("woff");
+}
+```
+
+### _ importing `_.json` files
+
+```jsx
+import file from "./path/image.json"; // { key: 'value' }
+```
+
+### \* using CSS modules - :local (default) and :global scope
+
+before:
+
+```scss
+.myBox {
+    color: red;
+}
+:global {
+    .globalBox {
+        color: blue;
+    }
+}
+```
+
+after:
+
+```scss
+._37f65 {
+    color: red;
+}
+.globalBox {
+    color: blue;
+}
+```
+
+...and in JS:
+
+```jsx
+import { myBox, globalBox } from "./box-styles.scss"; // myBox -> "_37f65", globalBox -> "globalBox"
+
+<div className={myBox}>
+    <div className={globalBox} />
+</div>;
+```

package.json

@@ -0,0 +1,76 @@
+{
+  "name": "react-webpack-starter",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --config webpack.dev.js --history-api-fallback",
+    "build": "webpack --config webpack.prod.js",
+    "test": "lint-staged",
+    "prettier": "prettier -l --write src/**/*.*",
+    "precommit": "lint-staged"
+  },
+  "author": "Konrad Kowalski <[email protected]>",
+  "license": "ISC",
+  "lint-staged": {
+    "src/*.*": ["yarn prettier", "git add"]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-beta.47",
+    "@babel/preset-env": "^7.0.0-beta.47",
+    "awesome-typescript-loader": "^5.0.0",
+    "babel-eslint": "^8.2.1",
+    "babel-loader": "8.0.0-beta.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "clean-webpack-plugin": "^0.1.18",
+    "css-loader": "^0.28.9",
+    "cssnano": "^3.10.0",
+    "eslint": "^4.17.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-prettier": "^2.6.0",
+    "file-loader": "^1.1.6",
+    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-root-plugin": "^0.10.0",
+    "husky": "^0.14.3",
+    "lint-staged": "^7.1.0",
+    "node-sass": "^4.7.2",
+    "postcss-cssnext": "^3.1.0",
+    "postcss-flexbugs-fixes": "^3.3.0",
+    "postcss-import": "^11.0.0",
+    "postcss-loader": "^2.1.0",
+    "postcss-scss": "^1.0.3",
+    "prettier": "^1.12.1",
+    "prettier-webpack-plugin": "^1.0.0",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.20.1",
+    "stylelint": "^9.2.0",
+    "sugarss": "^1.0.1",
+    "ts-loader": "^3.4.0",
+    "tslint": "^5.10.0",
+    "tslint-config-prettier": "^1.12.0",
+    "tslint-eslint-rules": "^5.3.1",
+    "typescript": "^2.8.3",
+    "uglifyjs-webpack-plugin": "^1.1.8",
+    "webpack": "^4.8.3",
+    "webpack-cli": "^2.1.3",
+    "webpack-dev-server": "^3.1.4",
+    "webpack-merge": "^4.1.1"
+  },
+  "dependencies": {
+    "@types/react": "^16.0.36",
+    "@types/react-dom": "^16.0.3",
+    "@types/react-router-dom": "^4.2.3",
+    "classnames": "^2.2.5",
+    "lodash": "^4.17.5",
+    "@material-ui/core": "^1.0.0-rc.1",
+    "@material-ui/icons": "^1.0.0-rc.0",
+    "prop-types": "^15.6.0",
+    "react": "^16.3.2",
+    "react-dom": "^16.3.2",
+    "react-hot-loader": "^3.1.3",
+    "react-router": "^4.3.0-rc.3",
+    "react-router-dom": "^4.2.2",
+    "rxjs": "^5.5.6"
+  }
+}

prettier.config.js

@@ -0,0 +1,54 @@
+module.exports = {
+    filepath: 'src',
+    tabWidth: 4,
+    useTabs: false,
+    printWidth: 100,
+    overrides: [
+        {
+            files: '*.{ts,tsx,scss}',
+            options: {
+                parser: 'typescript',
+                useTabs: true,
+            },
+        },
+        {
+            files: '*.{ts,tsx}',
+            options: {
+                parser: 'typescript',
+                singleQuote: true,
+                trailingComma: 'all',
+                semi: true,
+                bracketSpacing: true,
+                jsxBracketSameLine: false,
+                arrowParens: 'avoid',
+            },
+        },
+        {
+            files: '*.js',
+            options: {
+                parser: 'babylon',
+                singleQuote: true,
+                trailingComma: 'all',
+            },
+        },
+        {
+            files: '*.scss',
+            options: {
+                parser: 'css',
+            },
+        },
+        {
+            files: '*.md',
+            options: {
+                parser: 'markdown',
+            },
+        },
+        {
+            files: '*.json',
+            options: {
+                parser: 'json',
+                tabWidth: 2,
+            },
+        },
+    ],
+};

src/app/core/components/examples/dialogs/alert-dialog/alert-dialog.component.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+import Button from '@material-ui/core/Button';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+
+class AlertDialog extends React.Component {
+	state = {
+		open: false,
+	};
+
+	handleClickOpen = () => {
+		this.setState({ open: true });
+	};
+
+	handleClose = () => {
+		this.setState({ open: false });
+	};
+
+	render() {
+		return (
+			<div>
+				<Button onClick={this.handleClickOpen}>Open alert dialog</Button>
+				<Dialog
+					open={this.state.open}
+					onClose={this.handleClose}
+					aria-labelledby="alert-dialog-title"
+					aria-describedby="alert-dialog-description"
+				>
+					<DialogTitle id="alert-dialog-title">
+						{"Use Google's location service?"}
+					</DialogTitle>
+					<DialogContent>
+						<DialogContentText id="alert-dialog-description">
+							Let Google help apps determine location. This means sending anonymous
+							location data to Google, even when no apps are running.
+						</DialogContentText>
+					</DialogContent>
+					<DialogActions>
+						<Button onClick={this.handleClose} color="primary">
+							Disagree
+						</Button>
+						<Button onClick={this.handleClose} color="primary" autoFocus>
+							Agree
+						</Button>
+					</DialogActions>
+				</Dialog>
+			</div>
+		);
+	}
+}
+
+export default AlertDialog;

src/app/core/models/.gitkeep

@@ -0,0 +1,4 @@
+body {
+	margin: 0;
+	padding: 0;
+}

src/app/core/scss/style.scss

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+
+import './index.component.scss';
+
+import AlertDialog from '../../../core/components/examples/dialogs/alert-dialog/alert-dialog.component';
+
+class IndexComponent extends Component<any, any> {
+	render() {
+		return <AlertDialog />;
+	}
+}
+
+export const Index = IndexComponent;

src/app/core/services/.gitkeep

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Routing } from './routing.component';
+import './app/core/scss/style.scss';
+
+ReactDOM.render(<Routing />, document.getElementById('app'));

src/app/main/content/index/index.component.scss

@@ -0,0 +1,4 @@
+declare module '*.json';
+declare module '*.png';
+declare module '*.jpg';
+declare module '*.scss';

src/app/main/content/index/index.component.tsx

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+
+import { Index } from './app/main/content/index/index.component';
+
+const About = () => (
+	<div>
+		<h2>About</h2>
+	</div>
+);
+
+export class Routing extends Component {
+	render() {
+		return (
+			<Router>
+				<Switch>
+					<Route exact path="/" component={Index} />
+					<Route path="/about" component={About} />
+				</Switch>
+			</Router>
+		);
+	}
+}