From b94c723f2d8a67c9880c399a50cb609a696dea3e Mon Sep 17 00:00:00 2001
From: Yury Shapkarin <yury@shapkarin.me>
Date: Mon, 26 Oct 2020 08:58:25 +0300
Subject: [PATCH 1/3] add react tip button

---
 README.md           | 16 ++++++++++++++++
 package.json        |  5 ++++-
 src/button-react.js | 22 ++++++++++++++++++++++
 webpack.config.js   | 12 ++++++++++--
 4 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 src/button-react.js

diff --git a/README.md b/README.md
index 32ec673a..8d83e82c 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,9 @@ all, and write your own instead.
 
 ## Usage
 
+- [Plain JavaScript](#.button-(%60superheroUtils.createButton%60))
+- [React.js](#.reactjs-component)
+
 ### Button (`superheroUtils.createButton`)
 This library exports a function that creates buttons. This function accepts arguments:
 - class name of nodes that should become buttons, or the DOM node itself
@@ -79,6 +82,19 @@ Additional examples can be found [here](./index.html).
 
 <img width="607" alt="Paywall" src="https://user-images.githubusercontent.com/9007851/95088220-58d0d000-072b-11eb-8cd6-57052d40765c.png">
 
+## React.js component
+
+### Usage with ES6
+
+Props the same with [plain js vesrion](#Button-(`superheroUtils.createButton`)).
+
+#### Example: 
+```js
+import Button from '@aeternity/superhero-utils/button-react';
+
+<Button size="icon" account="example.chain">
+```
+
 ## Start the project for development
 
 You need to install [Node.js](https://nodejs.org/) firstly.
diff --git a/package.json b/package.json
index 70091366..afab24f1 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,6 @@
   "description": "",
   "main": "dist/index.js",
   "browser": "dist/index.js",
-  "dependencies": {},
   "files": [
     "dist",
     "src"
@@ -27,6 +26,10 @@
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12"
   },
+  "optionalDependencies": {
+    "prop-types": "^15.7.2",
+    "react": "^17.0.0"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "npm run build && serve",
diff --git a/src/button-react.js b/src/button-react.js
new file mode 100644
index 00000000..3cf04e0a
--- /dev/null
+++ b/src/button-react.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import createButton from './button';
+
+export default class Button extends React.Component {
+  constructor(props) {
+    super(props);
+    this.button = React.createRef();
+    this.componentDidMount = this.componentDidUpdate = () =>
+      createButton(this.button.current, this.props);
+  }
+
+  render() {
+    return React.createElement('div', { ref: this.button });
+  }
+};
+
+Button.propTypes = {
+  size: PropTypes.oneOf(['icon', 'small', 'medium', 'large']),
+  url: PropTypes.string,
+  account: PropTypes.string,
+};
diff --git a/webpack.config.js b/webpack.config.js
index a8c7d5b2..f0049c0f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,14 +2,21 @@ const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
-const genConfig = (filename, { inlineCss } = {}) => ({
+const genConfig = (outputFilename, { inlineCss, inputName = 'index.js' } = {}) => ({
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename,
+    filename: outputFilename,
     library: 'superheroUtils',
     libraryTarget: 'umd'
   },
+  entry: {
+    entry: `./src/${inputName}`,
+  },
   target: 'web',
+  externals: {
+    'prop-types': 'prop-types',
+    'react': 'react'
+  },
   module: {
     rules: [
       {
@@ -40,4 +47,5 @@ const genConfig = (filename, { inlineCss } = {}) => ({
 module.exports = [
   genConfig('index-without-styles.js'),
   genConfig('index.js', { inlineCss: true }),
+  genConfig('button-react.js', { inputName: 'button-react.js'}),
 ];

From a5003c93e22035301978f144f4715e54362abb90 Mon Sep 17 00:00:00 2001
From: Yury Shapkarin <yury@shapkarin.me>
Date: Sat, 21 Nov 2020 07:45:19 +0300
Subject: [PATCH 2/3] fix README.md anchor links and genConfig option name

Update webpack.config.js

Co-authored-by: Denis Davidyuk <denis_davidyuk@hotmail.com>

again temporary commit just to track

fix README.md anchor links

fix genConfig option name
---
 README.md         | 6 +++---
 webpack.config.js | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 8d83e82c..3298d597 100644
--- a/README.md
+++ b/README.md
@@ -22,8 +22,8 @@ all, and write your own instead.
 
 ## Usage
 
-- [Plain JavaScript](#.button-(%60superheroUtils.createButton%60))
-- [React.js](#.reactjs-component)
+- [Plain JavaScript](#button-superheroutilscreatebutton)
+- [React.js](#reactjs-component)
 
 ### Button (`superheroUtils.createButton`)
 This library exports a function that creates buttons. This function accepts arguments:
@@ -86,7 +86,7 @@ Additional examples can be found [here](./index.html).
 
 ### Usage with ES6
 
-Props the same with [plain js vesrion](#Button-(`superheroUtils.createButton`)).
+Props the same with [plain js vesrion](##button-superheroutilscreatebutton).
 
 #### Example: 
 ```js
diff --git a/webpack.config.js b/webpack.config.js
index f0049c0f..43abaaab 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,7 +2,7 @@ const path = require('path');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
-const genConfig = (outputFilename, { inlineCss, inputName = 'index.js' } = {}) => ({
+const genConfig = (outputFilename, { inlineCss, inputFilename = 'index.js' } = {}) => ({
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: outputFilename,
@@ -10,7 +10,7 @@ const genConfig = (outputFilename, { inlineCss, inputName = 'index.js' } = {}) =
     libraryTarget: 'umd'
   },
   entry: {
-    entry: `./src/${inputName}`,
+    entry: `./src/${inputFilename}`,
   },
   target: 'web',
   externals: {
@@ -47,5 +47,5 @@ const genConfig = (outputFilename, { inlineCss, inputName = 'index.js' } = {}) =
 module.exports = [
   genConfig('index-without-styles.js'),
   genConfig('index.js', { inlineCss: true }),
-  genConfig('button-react.js', { inputName: 'button-react.js'}),
+  genConfig('button-react.js', { inputFilename: 'button-react.js'}),
 ];

From 8d69c79ce655302148f05cecbbf43a78f74fe221 Mon Sep 17 00:00:00 2001
From: Yury Shapkarin <yury@shapkarin.me>
Date: Wed, 25 Nov 2020 11:26:49 +0300
Subject: [PATCH 3/3] Update webpack.config.js

Co-authored-by: Denis Davidyuk <denis_davidyuk@hotmail.com>
---
 webpack.config.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/webpack.config.js b/webpack.config.js
index 43abaaab..13f8ce70 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,9 +9,7 @@ const genConfig = (outputFilename, { inlineCss, inputFilename = 'index.js' } = {
     library: 'superheroUtils',
     libraryTarget: 'umd'
   },
-  entry: {
-    entry: `./src/${inputFilename}`,
-  },
+  entry: `./src/${inputFilename}`,
   target: 'web',
   externals: {
     'prop-types': 'prop-types',