Add Redux skeleton

b025dfad · Frank Sauerburger · e9a6186e · b025dfad · b025dfad · b025dfad
Verified Commit b025dfad authored 6 years ago by Frank Sauerburger
--- a/.csslintrc
+++ b/.csslintrc
+{
+  "adjoining-classes": false,
+  "box-model": false,
+  "box-sizing": false,
+  "bulletproof-font-face": false,
+  "compatible-vendor-prefixes": true,
+  "display-property-grouping": false,
+  "duplicate-background-images": false,
+  "duplicate-properties": false,
+  "empty-rules": true,
+  "fallback-colors": false,
+  "floats": false,
+  "font-faces": false,
+  "font-sizes": false,
+  "gradients": false,
+  "ids": false,
+  "import": false,
+  "important": false,
+  "known-properties": false,
+  "non-link-hover": false,
+  "outline-none": false,
+  "overqualified-elements": false,
+  "qualified-headings": false,
+  "regex-selectors": false,
+  "shorthand": false,
+  "star-property-hack": false,
+  "text-indent": false,
+  "underscore-property-hack": true,
+  "vendor-prefix": true,
+  "unique-headings": false,
+  "universal-selector": true,
+  "unqualified-attributes": false,
+  "zero-units": false
+}
--- a/.eslintrc.js
+++ b/.eslintrc.js
+module.exports = {
+  extends: [
+    'airbnb',
+  ],
+  plugins: [
+    'react'
+  ],
+  env: {
+    browser: true,
+    node: true
+  },
+  rules: {
+    'no-console': 'off',
+    'class-methods-use-this': 'off',
+    'jsx-a11y/no-autofocus': 'off',
+    'jsx-a11y/media-has-caption': 'off',
+    'semi': 2,
+    'comma-dangle': ['error', 'always-multiline', { functions: 'never' }],
+  },
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+    ecmaFeatures: {
+        jsx: true
+    }
+  }
+};
--- a/.gitignore
+++ b/.gitignore
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.orig
+*.log
+*.rej
+*.swo
+*.swp
+*.vi
+*~
+*.sass-cache
+# OS or Editor folders
+.DS_Store
+.cache
+.project
+.settings
+.tmproj
+nbproject
+Thumbs.db
+.vscode
+jsconfig.json
+# NPM packages folder.
+node_modules/
+# Brunch output folder.
+public/
--- a/README.md
+++ b/README.md
--- a/app/assets/index.html
+++ b/app/assets/index.html
+<!DOCTYPE html>
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>Brunch</title>
+  <link rel="stylesheet" href="/app.css" />
+  <script src="/app.js"></script>
+  <script>require('initialize');</script>
+</head>
+<body>
+  <div class="brunch">
+    <a href="http://brunch.io"><img src="http://brunch.io/images/logo.png" alt="Brunch"></a>
+    <p>Bon Appétit.</p>
+    <div id="app"></div>
+  </div>
+</body>
--- a/app/components/App.jsx
+++ b/app/components/App.jsx
+import React from 'react';
+import Counter from './Counter';
+export default class App extends React.Component {
+  render() {
+    const widget = (
+      <div id="content">
+        <Counter />
+      </div>
+    );
+    return widget;
+  }
+}
--- a/app/components/Counter.jsx
+++ b/app/components/Counter.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+const BaseCounter = ({ count, onPlusClick, onMinusClick }) => (
+  <div>
+    <h5><a href="https://redux.js.org/">Redux</a> &amp; <a href="https://facebook.github.io/react/">React</a> Counter</h5>
+    <p>
+      <button onClick={onMinusClick}>-</button>
+      {count}
+      <button onClick={onPlusClick}>+</button>
+    </p>
+  </div>
+);
+BaseCounter.propTypes = {
+  count: PropTypes.number.isRequired,
+  onPlusClick: PropTypes.func.isRequired,
+  onMinusClick: PropTypes.func.isRequired,
+};
+const mapStateToProps = state => ({ count: state });
+const mapDispatchToProps = dispatch => ({
+  onPlusClick: () => dispatch({ type: 'INCREMENT' }),
+  onMinusClick: () => dispatch({ type: 'DECREMENT' }),
+});
+export default connect(mapStateToProps, mapDispatchToProps)(BaseCounter);
--- a/app/initialize.jsx
+++ b/app/initialize.jsx
+import ReactDOM from 'react-dom';
+import React from 'react';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import counterApp from './reducers';
+import App from './components/App';
+const store = createStore(counterApp, module.hot && module.hot.data && (module.hot.data.counter || 0));
+if (module.hot) {
+  module.hot.accept('./reducers', () => {
+    store.replaceReducer(require('./reducers').default); // eslint-disable-line
+  });
+  module.hot.accept();
+  module.hot.dispose((data) => {
+    data.counter = store.getState(); // eslint-disable-line
+    [].slice.apply(document.querySelector('#app').children).forEach(c => c.remove());
+  });
+}
+const load = () => {
+  ReactDOM.render(
+    <Provider store={store}>
+      <App />
+    </Provider>,
+    document.querySelector('#app')
+  );
+};
+if (document.readyState !== 'complete') {
+  document.addEventListener('DOMContentLoaded', load);
+} else {
+  load();
+}
--- a/app/reducers.js
+++ b/app/reducers.js
+export default (state = 0, action) => {
+  switch (action.type) {
+    case 'INCREMENT':
+      return state + 1;
+    case 'DECREMENT':
+      return state - 1;
+    default:
+      return state;
+  }
+};
--- a/app/styles/application.css
+++ b/app/styles/application.css
+.brunch {
+  font-family: -apple-system, Sans-Serif;
+  text-align: center;
+  font-size: 24pt;
+  color: #3f894a;
+}
+a {
+  color: #3f894a;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(0, 0, 0, 0);
+}
+a:hover {
+  color: #27552e;
+}
+h5 > a {
+  text-decoration: underline;
+}
--- a/brunch-config.js
+++ b/brunch-config.js
+// See http://brunch.io for documentation.
+exports.files = {
+  javascripts: {
+    joinTo: 'app.js',
+  },
+  stylesheets: { joinTo: 'app.css' },
+};
+exports.plugins = {
+  babel: { presets: ['env', 'react'] },
+};
+exports.hot = true;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "brunch-app",
+  "description": "Brunch.io application",
+  "private": true,
+  "author": "Brunch",
+  "version": "0.0.1",
+  "repository": "",
+  "scripts": {
+    "start": "brunch watch --server",
+    "build": "brunch build --production"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.0",
+    "react": "^16.2",
+    "react-dom": "^16.2",
+    "react-redux": "~5.0.6",
+    "redux": "~3.7.2"
+  },
+  "devDependencies": {
+    "auto-reload-brunch": "^2",
+    "babel-brunch": "~6.1.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "~6.24",
+    "brunch": "^2",
+    "clean-css-brunch": "^2",
+    "eslint": "^4.16.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.3",
+    "eslint-plugin-react": "^7.6.1",
+    "hmr-brunch": "^0.1",
+    "uglify-js-brunch": "^2"
+  }
+}