Merge 9a0ea58 into e234986

sandboxes/react/App.js

@@ -0,0 +1,112 @@
+import React from "react";
+import classnames from "classnames";
+
+import { map } from "microstates";
+import State from "@microstates/react";
+import TodoMVC from "@microstates/todomvc";
+
+import TodoTextInput from "./TodoTextInput";
+
+const pluralize = (word, count) => (count === 1 ? word : `${word}s`);
+
+export default function App({ value, onChange }) {
+  return (
+    <State type={TodoMVC} value={value} onChange={onChange}>
+      {app => (
+        <div class="todoapp">
+          <header className="header">
+            <h1>todos</h1>
+            <TodoTextInput
+              text={app.newTodo.state}
+              classes="new-todo"
+              onSave={app.insertNewTodo}
+              onBlur={app.insertNewTodo}
+              onInputChange={app.newTodo.set}
+              placeholder="What needs to be done?"
+            />
+          </header>
+          <section className="main">
+            {app.hasTodos && (
+              <span>
+                <input
+                  id="toggle-all"
+                  className="toggle-all"
+                  type="checkbox"
+                  checked={app.isAllComplete}
+                  onChange={app.toggleAll}
+                />
+                <label htmlFor="toggle-all" />
+              </span>
+            )}
+            <ul className="todo-list">
+              {map(app.filtered, todo => (
+                <li
+                  className={classnames({
+                    completed: todo.completed.state,
+                    editing: todo.editing.state
+                  })}
+                  key={todo.id.state}
+                >
+                  {todo.editing.state ? (
+                    <TodoTextInput
+                      text={todo.text.state}
+                      classes="edit"
+                      onSave={todo.save}
+                      onBlur={todo.save}
+                      onInputChange={todo.text.set}
+                    />
+                  ) : (
+                      <div className="view">
+                        <input
+                          className="toggle"
+                          type="checkbox"
+                          checked={todo.completed.state}
+                          onChange={todo.completed.toggle}
+                        />
+                        <label onDoubleClick={todo.edit}>{todo.text.state}</label>
+                        <button
+                          className="destroy"
+                          onClick={() =>
+                            app.todos.filter(item => todo.state !== item.state)
+                          }
+                        />
+                      </div>
+                    )}
+                </li>
+              ))}
+            </ul>
+            {app.hasTodos && (
+              <footer className="footer">
+                <span className="todo-count">
+                  <strong>{app.active.length || "No"}</strong>{" "}
+                  {pluralize("item", app.active.length)}
+                </span>
+                <ul className="filters">
+                  {app.filters.map(filter => (
+                    <li key={filter.key}>
+                      <button
+                        className={classnames({ selected: filter.selected })}
+                        style={{ cursor: "pointer" }}
+                        onClick={filter.select}
+                      >
+                        {filter.label}
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+                {app.hasCompleted && (
+                  <button
+                    className="clear-completed"
+                    onClick={app.clearCompleted}
+                  >
+                    Clear completed
+                  </button>
+                )}
+              </footer>
+            )}
+          </section>
+        </div>
+      )}
+    </State>
+  );
+}

sandboxes/react/TodoTextInput.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class TodoTextInput extends Component {
+  static propTypes = {
+    onSave: PropTypes.func.isRequired,
+    onInputChange: PropTypes.func.isRequired,
+    onBlur: PropTypes.func,
+    text: PropTypes.string,
+    placeholder: PropTypes.string
+  }
+
+  handleSubmit = e => {
+    if (e.which === 13) {
+      this.props.onSave(e.target.value)
+    }
+  }
+
+  handleChange = e => {
+    this.props.onInputChange(e.target.value)
+  }
+
+  handleBlur = e => {
+    if (this.props.onBlur) {
+      this.props.onBlur(e.target.value)
+    }
+  }
+
+  render() {
+    return (
+      <input
+        className={this.props.classes}
+        type="text"
+        placeholder={this.props.placeholder}
+        autoFocus="true"
+        value={this.props.text}
+        onBlur={this.handleBlur}
+        onChange={this.handleChange}
+        onKeyDown={this.handleSubmit}
+      />
+    )
+  }
+}

sandboxes/react/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import './styles.css';
+
+let key = 'microstates-todomvc';
+
+let restore = () => JSON.parse(localStorage.getItem(key) || "null");
+let save = value => localStorage.setItem(key, JSON.stringify(value));
+
+let initial = restore() || {
+  todos: [{ id: 0, text: 'Write Microstates Docs', completed: false }]
+};
+
+ReactDOM.render(<App value={initial} onChange={save} />, document.getElementById('root'))

sandboxes/react/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "microstates-todomvc-react",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "keywords": [],
+  "main": "index.js",
+  "dependencies": {
+    "@microstates/react": "0.9.0",
+    "@microstates/todomvc": "1.0.0-beta.0",
+    "classnames": "latest",
+    "microstates": "0.10.1",
+    "prop-types": "15.6.2",
+    "react": "16.4.2",
+    "react-dom": "16.4.2",
+    "react-scripts": "1.1.4"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject"
+  }
+}