Merge pull request #4 from dcwither/dcwither/migrate-to-typescript

Dcwither/migrate to typescript

.storybook/config.js

@@ -1,9 +1,9 @@
-import './styles.scss';
+import "./styles.css";
 
-import {configure} from '@storybook/react';
+import { configure } from "@storybook/react";
 
 function loadStories() {
-  require('../stories');
+  require("../stories");
 }
 
 configure(loadStories, module);

.storybook/preview-head.html

@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

.storybook/styles.css

@@ -0,0 +1,24 @@
+.fields > div,
+.fields > h1,
+.fields > h2 {
+  margin-bottom: 1rem;
+}
+
+.fields {
+  margin-bottom: 1rem;
+}
+
+.asked-questions {
+  margin-top: 3rem;
+}
+
+.buttons button {
+  margin-right: 1rem;
+}
+
+.question > div,
+.question > h2,
+.question > h3,
+.question > p {
+  margin-bottom: 1rem;
+}

.storybook/webpack.config.js

@@ -1,17 +1,21 @@
-const path = require('path');
+const path = require("path");
 
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.scss$/,
-        loaders: ['style-loader', 'css-loader', 'sass-loader'],
-        include: path.resolve(__dirname, '../'),
-      },
-      {
-        test: /\.md$/,
-        use: 'raw-loader',
-      },
-    ],
-  },
+module.exports = (baseConfig, env) => {
+  baseConfig.module.rules.push(
+    {
+      test: /\.(ts|tsx)$/,
+      loader: require.resolve("ts-loader")
+    },
+    {
+      test: /\.css$/,
+      loaders: ["style-loader", "css-loader"],
+      include: path.resolve(__dirname, "../")
+    },
+    {
+      test: /\.svg$/,
+      use: "file-loader"
+    }
+  );
+  baseConfig.resolve.extensions.push(".ts", ".tsx");
+  return baseConfig;
 };

.travis.yml

@@ -2,9 +2,8 @@ language: node_js
 node_js:
   - node
 script:
-  - npm test
-after_success:
-  - npm run test:coverage
+  - npm run lint
+  - npm run test:ci
 before_deploy:
   - npm run build-storybook
 deploy:

README.md

@@ -1,77 +1,102 @@
-# React Editable [![Build Status](https://travis-ci.org/dcwither/react-editable-decorator.svg?branch=master)](https://travis-ci.org/dcwither/react-editable-decorator) [![Coverage Status](https://coveralls.io/repos/github/dcwither/react-editable-decorator/badge.svg?branch=master)](https://coveralls.io/github/dcwither/react-editable-decorator?branch=master) [![dependencies Status](https://david-dm.org/dcwither/react-editable-decorator/status.svg)](https://david-dm.org/dcwither/react-editable-decorator) 
+# React Editable [![Build Status](https://travis-ci.org/dcwither/react-editable-decorator.svg?branch=master)](https://travis-ci.org/dcwither/react-editable-decorator) [![Coverage Status](https://coveralls.io/repos/github/dcwither/react-editable-decorator/badge.svg?branch=master)](https://coveralls.io/github/dcwither/react-editable-decorator?branch=master) [![dependencies Status](https://david-dm.org/dcwither/react-editable-decorator/status.svg)](https://david-dm.org/dcwither/react-editable-decorator)
 
-An HOC that wraps around a form component to provide an editing state that it maintains. Works with promises returned by the Editable methods.
+A component that wraps around a form component to provide an editing state that it maintains. Works with promises returned by the Editable methods.
 
-React Editable can accept anything as its value, making it a generic wrapper for any form that needs a temporary editing state.
+React Editable can accept anything as its value, making it a generic wrapper for any controlled component that needs a temporary editing state.
+
+## Why Use It?
+
+React Editable factors out the concerns of temporary state and whether to maintain it in a global store like Redux, or in your own component. It passes through its current state so you can render your component differently depending on whether it's inactive, editing, or waiting on a promise.
 
 ## Demo & Examples
 
 Live demo: https://dcwither.github.io/react-editable-decorator/
 
 ```
 npm install
-npm run storybook
+npm start
 ```
 
 Then open [`localhost:6006`](http://localhost:6006) in a browser
 
 ## Usage
 
 ```js
-import withEditable, {EditableState, EditableStateType} from 'react-editable-decorator';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  withEditable
+  Editable
+  EditableStatus,
+  EditableStatusType
+} from "react-editable-decorator";
 
-@withEditable
 class Input extends React.Component {
   static propTypes = {
+    onCommit: PropTypes.func.isRequired
     onChange: PropTypes.func.isRequired,
-    status: EditableStateType.isRequired,
+    status: EditableStatusType.isRequired,
     value: PropTypes.string.isRequired
+  };
+
+  handleCommit = () => {
+    this.props.onCommit('SUBMIT');
   }
 
-  handleChange = (evt) => {
+  handleChange = evt => {
     this.props.onChange(evt.target.value);
-  }
+  };
 
   render() {
-    const {status, value} = this.props;
-    return <input
-      className='input'
-      disabled={status === EditableState.COMMITTING}
-      onChange={this.handleChange}
-      value={value}
-    />;
+    const { status, value } = this.props;
+    return (
+      <div>
+        <input
+          className="input"
+          disabled={status === EditableStatus.COMMITTING}
+          onChange={this.handleChange}
+          value={value}
+        />
+        <button onClick={this.handleCommit}>Submit</button>
+      </div>
+    );
   }
 }
-```
 
-## Properties
+// Either wrap in the Editable Component with render props
+<Editable onCommit={onCommit}>
+  {({onChange, onCommit}) => {
+    <Input onChange={onChange} onCommit={onCommit} />
+  }}
+</Editable>
 
+// Or compose with the HOC
+const EditableInput = withEditable(Input);
+```
 
-Property   | Type                  | Required | Description
------------|-----------------------|----------|--------------------------------------------------------------
-`onCancel` | func(value)           | No       | Callback for when editing is canceled
-`onDelete` | func(value)           | No       | Callback for deletion
-`onSubmit` | func(value)           | No       | Callback for submission
-`onUpdate` | func(value)           | No       | Callback for update
-`value`    | child.propTypes.value | No       | Unedited value to be passed through to child while presenting
+## State Transitions
 
-## Child Properties
+![State Transitions](docs/state-machine.svg)
 
-Property   | Type                                     | Description
------------|------------------------------------------|--------------------------------------------------------------
-`onStart`  | func                                     | Callback that triggers start of editing
-`onCancel` | func                                     | Callback that triggers cancel editing and clears edited value
-`onChange` | func(nextValue)                          | Callback that triggers change in edited value
-`onSubmit` | func                                     | Callback that triggers submission
-`onUpdate` | func                                     | Callback that triggers update
-`onDelete` | func                                     | Callback that triggers deletion
-`status`   | 'PRESENTING', 'EDITING', or 'COMMITTING' | Current status of ReactEditable
-`value`    | any                                      | Value of ReactEditable
+## Properties
 
-## Commit Event Handlers (`onSubmit`, `onUpdate`, `onDelete`)
+| Property   | Type                  | Required | Description                                                   |
+| ---------- | --------------------- | -------- | ------------------------------------------------------------- |
+| `onCancel` | func(value)           | No       | Callback for when editing is canceled                         |
+| `onCommit` | func(message, value)  | No       | Callback for commit changes                                   |
+| `value`    | child.propTypes.value | No       | Unedited value to be passed through to child while presenting |
+
+## Child Properties
 
-These will be called when the matching callbacks passed through to the child are called.
+| Property   | Type                                     | Description                                                                                    |
+| ---------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| `onStart`  | func                                     | Callback that triggers start of editing                                                        |
+| `onCancel` | func                                     | Callback that triggers cancel editing and clears edited value                                  |
+| `onChange` | func(nextValue)                          | Callback that triggers change in edited value                                                  |
+| `onCommit` | func(message)                            | Callback that triggers a commit                                                                |
+| `status`   | 'PRESENTING', 'EDITING', or 'COMMITTING' | Current status of ReactEditable                                                                |
+| `value`    | any                                      | The value passed into Editable if `PRESENTING` or the edited value if `EDITING` or `COMMITING` |
 
-If they return a promise, ReactEditable will remain in a `COMITTING` state until the promise resolves.
+## Commit Event Handler (`onCommit`)
 
-If ReactEditable unmounts before the promise resolves, it will cancel its promise, and avoid a setState.
+This will be called when the matching callback passed through to the render prop child is called. If it returns a promise, ReactEditable will remain in a `COMITTING` state until the promise resolves. If ReactEditable unmounts before the promise resolves, it will cancel its promise, and avoid a setState.

docs/state-machine.gv

@@ -0,0 +1,13 @@
+digraph finite_state_machine {
+  rankdir=LR;
+  node [shape = circle];
+  secret_node [style=invis, shape=point];
+  secret_node -> PRESENTING [style=bold];
+  PRESENTING -> EDITING [ label = "START,CHANGE"  ];
+  PRESENTING -> COMMITING [ label = "COMMIT"  ];
+  PRESENTING -> EDITING [ label = "CANCEL"  dir = back];
+  EDITING -> EDITING [ label = "CHANGE"  ];
+  EDITING -> COMMITING [ label = "COMMIT"  ];
+  PRESENTING -> COMMITING [ label = "SUCCESS"  dir = back];
+  COMMITING -> EDITING [ label = "FAILURE"  ];
+}