Merge pull request #38 from aeternity/feature/vue-and-react-versions

Add React and Vue components, examples, and docs

.travis.yml

@@ -1,7 +1,14 @@
 language: node_js
 node_js: 12
 
-script: npm run build
+install:
+  - npm i
+  - npm i --prefix examples/react-webpack
+  - npm i --prefix examples/vue-webpack
+
+script:
+  - npm run build
+  - npm run build:examples
 
 deploy:
   - provider: script

README.md

@@ -20,12 +20,19 @@ You can import and process styles manually by importing `dist/index.css` and
 `dist/index-without-styles.js` separately. Or even you can don't import styles at
 all, and write your own instead.
 
+### React and Vue versions
+By default `dist/index.js` is imported, instead of it, you can import a specific
+version for React or Vue by importing `dist/react-without-styles.js` or
+`dist/vue-without-styles.js` accordingly. The framework-specific version contains
+all features available in the default one plus specific for particular framework wrappers.
+
 ## Usage
 
-### Button (`superheroUtils.createButton`)
+### 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
-  (this option simplifies integration into Frontend frameworks like Vue/React)
 - options object
 
 Option | Description
@@ -47,7 +54,7 @@ Option | Description
 </script>
 ```
 Select the button style you like the most and adopt this code to your website's HTML.
-Additional examples can be found [here](./index.html).
+Additional examples can be found [here](examples/index.html).
 
 #### Screenshots
 
@@ -58,6 +65,24 @@ Size value | Screenshot
 `medium` | <img width="216" alt="medium" src="https://user-images.githubusercontent.com/9007851/100574755-c2b0c480-32eb-11eb-9c1e-258d9282112e.png">
 `large` | <img width="148" alt="large" src="https://user-images.githubusercontent.com/9007851/100574754-c2182e00-32eb-11eb-8fb0-281d73d9a75a.png">
 
+#### `superheroUtils.createButtonByDiv`
+
+The same function as the previous one except that the first argument should be an
+instance of `HTMLDivElement`. The button content will be added to that node instead of
+the DOM node replacing. The function with this interface simplifies integration into
+Frontend frameworks like Vue and React.
+
+#### `superheroUtils.Button` (only in React and Vue versions)
+
+The component that is compatible with the corresponding framework. Accepts the same
+properties as [`superheroUtils.createButton`](#superheroutilscreatebutton)'s options. 
+
+#### Example
+
+```html
+<Button size="large" account="example.chain" url="https://example.com" />
+```
+
 ### Paywall (`superheroUtils.ensurePaid`)
 This function asks the user to send a tip to the specified page. It won't ask to send a
 tip if it was sent before using the current browser. The function accepts options object.
@@ -73,7 +98,7 @@ Option | Description
   superheroUtils.ensurePaid({ url: 'https://example.com' });
 </script>
 ```
-Additional examples can be found [here](./index.html).
+Additional examples can be found [here](examples/index.html).
 
 #### Screenshots
 
@@ -85,6 +110,8 @@ You need to install [Node.js](https://nodejs.org/) firstly.
 
 ```sh
 $ npm install
+$ npm install --prefix examples/react-webpack
+$ npm install --prefix examples/vue-webpack
 $ npm start
 ```
 

index.html → examples/index.html

@@ -1,3 +1,12 @@
+<h3>superhero-utils example using plain js</h3>
+
+Other examples:
+<a href="/react-unpkg.html">react unpkg</a>,
+<a href="/react-webpack/build">react webpack</a>,
+<a href="/vue-unpkg.html">vue unpkg</a>,
+<a href="/vue-webpack/dist">vue webpack</a>
+
+<hr>
 <div class="icon">Donate</div>
 <div class="small">Donate</div>
 <div class="medium">Donate</div>
@@ -22,7 +31,7 @@
 <p>Sed eu convallis nisi. Proin aliquam diam eget risus venenatis pharetra. Sed varius commodo mauris eu accumsan. Donec erat tellus, vestibulum in efficitur non, aliquet eu leo. Aenean bibendum risus leo, ac consequat urna gravida ut. Proin ut justo eget ligula tempor euismod. Sed nec dui at est tristique ultrices et eu massa.</p>
 <p>Suspendisse ut tempus nibh. Fusce placerat neque lacinia mi mattis hendrerit. Phasellus blandit sit amet nibh sed molestie. Praesent vulputate imperdiet mauris vitae lobortis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris in tellus lacinia, imperdiet diam sit amet, porta nisl. In vehicula in elit ac dignissim. Curabitur vehicula sollicitudin molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec convallis non odio a commodo.</p>
 
-<script src="dist/index.js"></script>
+<script src="./superhero-utils/index.js"></script>
 <script>
 /*
 * Create superhero button instance by pointing element with its selector

examples/react-unpkg.html

@@ -0,0 +1,22 @@
+<div id="app"></div>
+
+<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/prop-types@15/prop-types.min.js"></script>
+<script src="./superhero-utils/react-without-styles.js"></script>
+<link rel="stylesheet" href="./superhero-utils/index.css">
+<script>
+class App extends React.Component {
+  render() {
+    return React.createElement('div', {}, [
+      React.createElement('h3', {}, ['superhero-utils example using react, script tag']),
+      React.createElement(
+        superheroUtils.Button,
+        { size: 'medium', account: 'ak_... or .chain name' },
+      ),
+    ]);
+  }
+}
+
+ReactDOM.render(React.createElement(App), document.querySelector('#app'));
+</script>

examples/react-webpack/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

examples/react-webpack/.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.eslintcache
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/react-webpack/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-webpack",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.1",
+    "web-vitals": "^0.2.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "homepage": "/react-webpack/build/",
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/react-webpack/public/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

examples/react-webpack/src/App.js

@@ -0,0 +1,13 @@
+import './superhero-utils/index.css';
+import { Button as SuperheroButton } from './superhero-utils/react-without-styles.js';
+
+function App() {
+  return (
+    <div>
+      <h3>superhero-utils example using react, webpack</h3>
+      <SuperheroButton size="medium" account="ak_... or .chain name" />
+    </div>
+  );
+}
+
+export default App;

examples/react-webpack/src/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

examples/react-webpack/src/superhero-utils

@@ -0,0 +1 @@
+../../../dist

examples/superhero-utils

@@ -0,0 +1 @@
+../dist

examples/vue-unpkg.html

@@ -0,0 +1,22 @@
+<div id="app"></div>
+
+<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
+<script src="./superhero-utils/vue-without-styles.js"></script>
+<link rel="stylesheet" href="./superhero-utils/index.css">
+<script>
+const App = {
+  components: {
+    SuperheroButton: superheroUtils.Button,
+  },
+  template: `
+    <div>
+      <h3>superhero-utils example using vue, script tag</h3>
+      <SuperheroButton size="medium" account="ak_... or .chain name" />
+    </div>
+  `,
+};
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app');
+</script>

examples/vue-webpack/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/vue-webpack/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

examples/vue-webpack/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "vue-webpack",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

examples/vue-webpack/src/App.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <h3>superhero-utils example using vue, webpack</h3>
+    <SuperheroButton size="medium" account="ak_... or .chain name" />
+  </div>
+</template>
+
+<script>
+import '../../superhero-utils/index.css';
+import { Button } from '../../superhero-utils/vue-without-styles.js';
+
+export default {
+  components: {
+    SuperheroButton: Button,
+  },
+}
+</script>

examples/vue-webpack/src/main.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')

examples/vue-webpack/vue.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  publicPath: '/vue-webpack/dist/',
+};

package.json

@@ -27,10 +27,15 @@
     "webpack": "^5.9.0",
     "webpack-cli": "^4.2.0"
   },
+  "optionalDependencies": {
+    "prop-types": "^15.7.2",
+    "react": "^17.0.1"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "npm run build && serve",
+    "start": "npm run build && npm run build:examples && serve examples",
     "build": "webpack",
+    "build:examples": "npm run --prefix examples/react-webpack build && npm run --prefix examples/vue-webpack build",
     "watch": "webpack --watch"
   },
   "repository": {