adding widget output

This commit is contained in:
Benjamin Boudreau 2018-05-28 22:49:38 -04:00
parent 5de1643800
commit 10cad70262
8 changed files with 87 additions and 87 deletions

View File

@ -6,8 +6,8 @@
"parser": "babel-eslint",
"extends": "airbnb",
"rules": {
"semi": [2, "never"],
"no-underscore-dangle": 0
"no-underscore-dangle": 0,
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
},
"plugins": ["react"],
"settings": {

View File

@ -32,6 +32,9 @@ The create-react-app of embeddable widgets.
- [x] Widget as react app - index.html works (webpack, babel, react)
- [ ] React widget (widget builder)
- [ ] Webpack changed to output a library
- [ ] Add tests
- [ ] Add greenkeeper
- [ ] Integrate eslint with webpack
- [ ] Theming support
- [ ] Obfuscation
- [ ] Storyboard and docs

91
package-lock.json generated
View File

@ -546,9 +546,9 @@
"dev": true
},
"are-we-there-yet": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
"integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
"integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
"dev": true,
"requires": {
"delegates": "1.0.0",
@ -5040,15 +5040,6 @@
"dev": true,
"optional": true
},
"string_decoder": {
"version": "1.1.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"string-width": {
"version": "1.0.2",
"bundled": true,
@ -5059,6 +5050,15 @@
"strip-ansi": "3.0.1"
}
},
"string_decoder": {
"version": "1.1.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "5.1.1"
}
},
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
@ -5152,7 +5152,7 @@
"signal-exit": "3.0.2",
"string-width": "1.0.2",
"strip-ansi": "3.0.1",
"wide-align": "1.1.2"
"wide-align": "1.1.3"
},
"dependencies": {
"ansi-regex": {
@ -8222,7 +8222,7 @@
"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
"dev": true,
"requires": {
"are-we-there-yet": "1.1.4",
"are-we-there-yet": "1.1.5",
"console-control-strings": "1.1.0",
"gauge": "2.7.4",
"set-blocking": "2.0.0"
@ -10838,15 +10838,6 @@
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
"dev": true
},
"string_decoder": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
"safe-buffer": "5.1.2"
}
},
"string-template": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/string-template/-/string-template-0.2.1.tgz",
@ -10863,6 +10854,15 @@
"strip-ansi": "4.0.0"
}
},
"string_decoder": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"requires": {
"safe-buffer": "5.1.2"
}
},
"stringstream": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.6.tgz",
@ -12059,49 +12059,12 @@
"dev": true
},
"wide-align": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
"integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
"integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
"dev": true,
"requires": {
"string-width": "1.0.2"
},
"dependencies": {
"ansi-regex": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true
},
"is-fullwidth-code-point": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"requires": {
"number-is-nan": "1.0.1"
}
},
"string-width": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"requires": {
"code-point-at": "1.1.0",
"is-fullwidth-code-point": "1.0.0",
"strip-ansi": "3.0.1"
}
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
"ansi-regex": "2.1.1"
}
}
"string-width": "2.1.1"
}
},
"widest-line": {

12
public/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html>
<head>
<title>Embeddable Widget</title>
</head>
<body>
<script src="/embeddable-widget.js"></script>
<script>
EmbeddableWidget.render();
</script>
</body>
</html>

1
src/.tern-port Normal file
View File

@ -0,0 +1 @@
58305

View File

@ -2,7 +2,24 @@ import React from 'react';
import ReactDOM from 'react-dom';
import Widget from './widget';
ReactDOM.render(
<Widget/>,
document.getElementById('app')
);
export default class EmbeddableWidget {
static render() {
const component = <Widget />;
function doRender() {
const containerEl = document.createElement('div');
document.body.appendChild(containerEl);
ReactDOM.render(
component,
containerEl,
);
}
if (document.readyState === 'complete') {
doRender();
} else {
window.addEventListener('load', () => {
doRender();
});
}
}
}

View File

@ -1,9 +1,9 @@
import React from 'react';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Transition } from 'react-transition-group';
import './widget.scss';
class Widget extends React.Component {
class Widget extends Component {
state = {
opened: false,
showDock: true,
@ -11,7 +11,7 @@ class Widget extends React.Component {
handleToggleOpen = () => {
this.setState((prev) => {
let showDock = prev.showDock;
let { showDock } = prev;
if (!prev.opened) {
showDock = false;
}
@ -36,16 +36,17 @@ class Widget extends React.Component {
</a>
);
}
return "";
return '';
}
render() {
let body = this.renderBody();
const body = this.renderBody();
return (
<div className="docked-widget">
<Transition in={this.state.opened} timeout={250} onExited={this.handleWidgetExit}>
{(status) => (
{status => (
<div className={`widget widget-${status}`}>
<div className="widget-header">
<div className="widget-header-title">

View File

@ -10,14 +10,14 @@ module.exports = {
// both options are optional
filename: devMode ? '[name].css' : '[name].[hash].css',
chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
})
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
use: ['babel-loader'],
},
{
test: /\.scss$/,
@ -25,23 +25,26 @@ module.exports = {
// fallback to style-loader in development
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
'sass-loader',
],
},
],
},
resolve: {
extensions: ['*', '.js', '.jsx']
extensions: ['*', '.js', '.jsx'],
},
entry: [
'./src/index.js'
'./src/index.js',
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
filename: 'embeddable-widget.js',
library: 'EmbeddableWidget',
libraryExport: 'default',
libraryTarget: 'window',
},
serve: {
content: './dist'
}
content: ['./dist', './public'],
},
};