feat: normalize style and update docs

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "react-click-to-edit"
+  }
+}

.gitignore

@@ -1,11 +1,13 @@
 .DS_Store
 
 *.log
+*.swp
 
 node_modules/
 dist/
+.docz/
+.firebase/
+
 
-*.css.json/
 
-*.swp
 

CHANGELOG.md

@@ -4,8 +4,6 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### [1.1.2](https://github.com/chungchiehlun/react-click-to-edit/compare/v1.1.1...v1.1.2) (2020-06-01)
 
-### [1.1.1](https://github.com/chungchiehlun/react-click-to-edit/compare/v1.1.0...v1.1.1) (2020-06-01)
-
 ## [1.1.0](https://github.com/chungchiehlun/react-click-to-edit/compare/v1.0.0...v1.1.0) (2020-05-28)
 
 ### Features

Makefile

@@ -5,7 +5,7 @@ install:
 	yarn
 
 test:
-	./node_modules/.bin/jest
+	yarn run test
 
 build: test
 	./node_modules/.bin/rollup -c
@@ -14,3 +14,12 @@ publish: build
 	npx standard-version
 	npm publish
 
+docz-dev:
+	yarn run docz:dev
+
+docz-build:
+	yarn run docz:build
+
+docz-deploy: docz-build
+	firebase deploy
+

README.md

@@ -1,5 +1,6 @@
-## React Click-To-Edit
-A simple component make the text editable.
+# React-Click-To-Edit
+
+Add it to your component including text such as label, article and table and make the text editable.
 
 ## Installation
 
@@ -9,37 +10,32 @@ or
 $ yarn add react-click-to-edit
 ```
 
-## General Usage
+## Usage
 
 ```jsx
-import ClickToEdit from "react-click-to-edit"
-
-<ClickToEdit
-  /*
-    String className to be applied to wrapper the input and text element.
-  */
-  wrapperClass="wrapperClase"
-  /*
-  	String className to be applied to the input element.
-  */
-  inputClass="inputClass"
-  /*
-  	String className to be applied to the text element.
-  */
-  textClass="textClass"
-  /*
-  	String value to be applied to the input and text element.
-  */
-  value={value}
-  /*
-  	Function that will be called after the input element lose focus or press carriage return.
-  */
-  endEditing={() => {}}
-/>
+// ESM
+import CTE from "react-click-to-edit";
+or;
+// Commonjs
+const CTE = require("react-click-to-edit");
 ```
 
-## Issues
-Feel free to submit issues and enhancement requests.
+| props        | type          | usage                                                                            |
+| :----------- | ------------- | -------------------------------------------------------------------------------- |
+| wrapperClass | string        | css class applied to the _wrapper_ (or container) consists of _input_ and _text_ |
+| inputClass   | string        | css class applied to the _input_                                                 |
+| textClass    | string        | css class applied to the _text_                                                  |
+| initialValue | string        | initial value of text                                                            |
+| endEditing   | (value) => {} | callback invoked when leaving edit mode by clicking ENTER or ESC                 |
+
+[See elaborate examples](/docs-examples)
+
+## Contributing
+
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+
+Please make sure to update tests as appropriate.
 
 ## License
-MIT 
+
+MIT

docs/examples.css

@@ -0,0 +1,9 @@
+.wrapper {
+  padding: 0 0.5ch;
+}
+
+.text {
+  color: #4682b4;
+  text-decoration: underline;
+}
+

docs/examples.mdx

@@ -0,0 +1,53 @@
+---
+name: Examples
+---
+import { Playground } from "docz"
+import "./examples.css"
+import CTE from "../dist/index.cjs.js"
+
+## Article
+
+### Give it a try
+
+<div>
+Lorem ipsum
+<CTE
+  wrapperClass="wrapper"
+  inputClass="input"
+  textClass="text"
+  initialValue={"click"} 
+/>
+dolor sit amet, consectetur adipiscing elit. Quisque vestibulum ultricies massa, vel pulvinar metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris eget malesuada nunc. Maecenas non ultricies neque, ut tempor ligula. Quisque non nisi quis nisl accumsan venenatis vitae vitae est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla dignissim nibh turpis, id sodales arcu accumsan luctus.
+<CTE
+  wrapperClass="wrapper"
+  inputClass="input"
+  textClass="text"
+  initialValue={"click"} 
+/>
+In pulvinar accumsan euismod. Curabitur sodales rhoncus auctor. Donec urna massa, luctus sed libero id, sollicitudin efficitur lectus. Sed ullamcorper, nulla eu aliquet venenatis, mauris tortor fermentum nunc, ac.
+</div>
+
+### Source Code
+
+```css
+/* styles.css */
+.wrapper {
+  padding: 0 0.5ch;
+}
+
+.text {
+  color: #4682b4;
+  text-decoration: underline;
+}
+```
+
+```js
+import CTE from "react-click-to-edit"
+
+<CTE
+  wrapperClass="wrapper"
+  textClass="text"
+  initialValue={"click"} 
+/>
+```
+

doczrc.js

@@ -0,0 +1,4 @@
+export default {
+  ignore: ["CHANGELOG.md"],
+  menu: [{ name: "Readme", menu: ["General Usage"] }, "Examples"]
+};

firebase.json

@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": ".docz/dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

jest.config.js

@@ -4,5 +4,6 @@ module.exports = {
   },
   setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],
   // https://jestjs.io/docs/en/configuration.html#snapshotserializers-array-string
-  snapshotSerializers: ["enzyme-to-json/serializer"]
+  snapshotSerializers: ["enzyme-to-json/serializer"],
+  roots: ["<rootDir>/src/"]
 };

package.json

@@ -6,6 +6,9 @@
   "module": "dist/index.esm.js",
   "browser": "dist/index.umd.js",
   "scripts": {
+    "docz:dev": "docz dev",
+    "docz:build": "docz build",
+    "docz:serve": "docz serve",
     "test": "jest"
   },
   "husky": {
@@ -61,6 +64,7 @@
     "react-dom": "^16.13.1",
     "react-test-renderer": "^16.13.1",
     "rollup": "^2.11.2",
+    "docz": "^2.3.1",
     "rollup-plugin-postcss": "^3.1.1"
   },
   "dependencies": {

src/__tests__/__snapshots__/index.js.snap

@@ -3,6 +3,7 @@
 exports[`snapshot - default 1`] = `
 <section
   className="CTE--wrapper"
+  data-value="foo"
   onClick={[Function]}
 >
   <span
@@ -16,6 +17,7 @@ exports[`snapshot - default 1`] = `
 exports[`snapshot - onEdit 1`] = `
 <section
   className="CTE--wrapper"
+  data-value="bar"
   onClick={[Function]}
 >
   <input
@@ -24,6 +26,7 @@ exports[`snapshot - onEdit 1`] = `
     onBlur={[Function]}
     onChange={[Function]}
     onKeyPress={[Function]}
+    size="1"
     type="text"
     value="bar"
   />

src/__tests__/index.js

@@ -5,37 +5,47 @@ import { shallow, mount } from "enzyme";
 import ClickToEdit from "../index";
 
 test("snapshot - default", () => {
-  const wrapper = shallow(<ClickToEdit value="foo" endEditing={jest.fn()} />);
+  const wrapper = shallow(
+    <ClickToEdit initialValue="foo" endEditing={jest.fn()} />
+  );
   expect(toJson(wrapper)).toMatchSnapshot();
 });
 
 test("snapshot - onEdit", () => {
-  const wrapper = shallow(<ClickToEdit value="bar" endEditing={jest.fn()} />);
+  const wrapper = shallow(
+    <ClickToEdit initialValue="bar" endEditing={jest.fn()} />
+  );
   wrapper.simulate("click");
   expect(toJson(wrapper)).toMatchSnapshot();
 });
 
 test("render initial value", () => {
-  const wrapper = shallow(<ClickToEdit value="HELLO" endEditing={jest.fn()} />);
+  const wrapper = shallow(
+    <ClickToEdit initialValue="HELLO" endEditing={jest.fn()} />
+  );
   expect(wrapper.text()).toBe("HELLO");
 });
 
 test("enter editing mode when clicking CTE", () => {
-  const wrapper = shallow(<ClickToEdit value="HELLO" endEditing={jest.fn()} />);
+  const wrapper = shallow(
+    <ClickToEdit initialValue="HELLO" endEditing={jest.fn()} />
+  );
   wrapper.simulate("click");
   expect(wrapper.find("input")).toHaveLength(1);
 });
 
 test("enter editing mode and change value", () => {
-  const wrapper = shallow(<ClickToEdit value="HELLO" endEditing={jest.fn()} />);
+  const wrapper = shallow(
+    <ClickToEdit initialValue="HELLO" endEditing={jest.fn()} />
+  );
   wrapper.simulate("click");
   wrapper.find("input").simulate("change", { target: { value: "WORLD" } });
   expect(wrapper.find("input").prop("value")).toBe("WORLD");
 });
 
 test("invoke endEditing function and leave editing mode after pressing the enter key", () => {
   const mock = jest.fn();
-  const wrapper = mount(<ClickToEdit value="HELLO" endEditing={mock} />);
+  const wrapper = mount(<ClickToEdit initialValue="HELLO" endEditing={mock} />);
   wrapper.simulate("click");
   const inputWrapper = wrapper.find("input");
   inputWrapper.simulate("keypress", {
@@ -47,7 +57,7 @@ test("invoke endEditing function and leave editing mode after pressing the enter
 
 test("invoke endEditing function and leave editing mode after blurring the input", () => {
   const mock = jest.fn();
-  const wrapper = mount(<ClickToEdit value="HELLO" endEditing={mock} />);
+  const wrapper = mount(<ClickToEdit initialValue="HELLO" endEditing={mock} />);
   wrapper.simulate("click");
   const inputWrapper = wrapper.find("input");
   inputWrapper.simulate("blur");
@@ -57,7 +67,7 @@ test("invoke endEditing function and leave editing mode after blurring the input
 
 test("stay on editing mode if press all keys except Enter key", () => {
   const mock = jest.fn();
-  const wrapper = mount(<ClickToEdit value="HELLO" endEditing={mock} />);
+  const wrapper = mount(<ClickToEdit initialValue="HELLO" endEditing={mock} />);
   wrapper.simulate("click");
   const inputWrapper = wrapper.find("input");
   inputWrapper.simulate("keypress", {
@@ -72,7 +82,7 @@ test("pass class props to customize component style", () => {
       wrapperClass="wrapperClass"
       inputClass="inputClass"
       textClass="textClass"
-      value="HELLO"
+      initialValue="HELLO"
       endEditing={jest.fn()}
     />
   );

src/index.js

@@ -1,11 +1,9 @@
 import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
 import classNames from "classnames";
-
 import "./styles.css";
 
 const ClickToEdit = props => {
-  const [value, setValue] = useState(props.value);
+  const [value, setValue] = useState(props.initialValue);
   const [isEditMode, setEditMode] = useState(false);
 
   const getIntoEditMode = () => {
@@ -36,6 +34,7 @@ const ClickToEdit = props => {
 
   return (
     <section
+      data-value={value}
       className={classNames("CTE--wrapper", props.wrapperClass)}
       onClick={getIntoEditMode}
     >
@@ -48,6 +47,7 @@ const ClickToEdit = props => {
           onChange={handleChange}
           onKeyPress={handleKeyPress}
           onBlur={getOffEditMode}
+          size="1"
         />
       ) : (
         <span className={classNames("CTE--text", props.textClass)}>