Initial commit

paulrosenzweig · Jan 22, 2018 · f494e67 · f494e67
commit f494e67
Show file tree

Hide file tree

Showing 10 changed files with 4,423 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,18 @@
+{
+ "presets": [
+ "react"
+ ],
+ "env": {
+ "es5": {
+ "presets": [
+ "es2015"
+ ]
+ }
+ },
+ "plugins": [
+ "syntax-dynamic-import",
+ ["transform-react-remove-prop-types", {
+ "mode": "wrap"
+ }]
+ ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,29 @@
+# System generated files
+.DS_Store
+
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules/
+
+# Development/Environment
+.env
+.env.*
+dist
+.next
+json
+public
+.cache
+envdotjs-key
+env.js
+.serverless
+dist-es6/
+dist-es5/
+dist-modules/
+
+# Temporary
+temp
+temp-*
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+8.4.0
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+# React Component Boilerplate
+
+A simple React boilerplate that outputs to ES5 and ES6.
+
+## Getting started
+
+```bash
+git clone [email protected]:escaladesports/react-component-boilerplate.git --depth=1 your-component
+cd your-component
+rm -rf .git
+```
+
+Also make sure to edit the `package.json` file with a new name, version number, author, and anything else you might need.
+
+## Usage
+
+- `yarn dev`: Runs a local dev server from the `dev` directory
+- `yarn analyze`: View bundle sizes
diff --git a/dev/dev.js b/dev/dev.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import { render } from 'react-dom'
+import Img from '../src/index'
+
+const containerEl = document.createElement('div')
+document.body.appendChild(containerEl)
+
+render(
+ <Img
+ src='http:https://via.placeholder.com/500x1000'
+ width={500}
+ height={1000}
+ />,
+ containerEl
+)
diff --git a/dev/index.html b/dev/index.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html>
+ <body>
+ <script src="index.js"></script>
diff --git a/package.json b/package.json
@@ -0,0 +1,48 @@
+{
+ "name": "react-hubspot-form",
+ "version": "0.0.0",
+ "keywords": [
+ "react",
+ "hubspot",
+ "form",
+ "integration"
+ ],
+ "main": "dist-es5/index.js",
+ "browser": "dist-es5/index.js",
+ "module": "dist-es6/index.js",
+ "jsnext:main": "dist-es6/index.js",
+ "author": "Kennedy Rose <[email protected]>",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/escaladesports/react-hubspot-form.git"
+ },
+ "license": "MIT",
+ "scripts": {
+ "dev": "webpack-dev-server --hot --open --open-page \"/dev\"",
+ "analyze": "cross-env ANALYZE=1 webpack -p",
+ "build": "run-p build:es5 build:es6",
+ "build:es6": "cross-env BABEL_ENV=es6 babel ./src --out-dir ./dist-es6",
+ "build:es5": "cross-env BABEL_ENV=es5 babel ./src --out-dir ./dist-es5",
+ "prepublishOnly": "npm run build"
+ },
+ "devDependencies": {
+ "babel-cli": "^6.26.0",
+ "babel-core": "^6.26.0",
+ "babel-loader": "^7.1.2",
+ "babel-minify-webpack-plugin": "^0.2.0",
+ "babel-plugin-syntax-dynamic-import": "^6.18.0",
+ "babel-plugin-transform-react-remove-prop-types": "^0.4.10",
+ "babel-preset-es2015": "^6.24.1",
+ "babel-preset-react": "^6.24.1",
+ "cross-env": "^5.1.1",
+ "npm-run-all": "^4.1.2",
+ "react": "^16.1.1",
+ "react-dom": "^16.1.1",
+ "webpack": "^3.8.1",
+ "webpack-bundle-analyzer": "^2.9.1",
+ "webpack-dev-server": "^2.9.4"
+ },
+ "dependencies": {
+ "isomorphic-fetch": "^2.2.1"
+ }
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,79 @@
+import React from 'react'
+
+export default class extends React.Component {
+ constructor(props){
+ super(props)
+ this.state = { loading: false }
+ this.hideLoader = this.hideLoader.bind(this)
+ this.showLoader = this.showLoader.bind(this)
+ this.startTimeout = this.startTimeout.bind(this)
+ }
+ componentWillReceiveProps() {
+ this.startTimeout()
+ }
+ componentDidMount() {
+ if (this.img.complete) {
+ this.hideLoader()
+ }
+ else {
+ this.startTimeout()
+ }
+ }
+ startTimeout() {
+ clearTimeout(this.timeout)
+ this.timeout = setTimeout(this.showLoader, 100)
+ }
+ showLoader() {
+ if (!this.img.complete) {
+ this.setState({ loading: true })
+ }
+ }
+ hideLoader() {
+ clearTimeout(this.timeout)
+ this.setState({ loading: false })
+ }
+ render(){
+ const TagName = this.props.tagName || 'img'
+ return (
+ <div style={{
+ maxWidth: this.props.width,
+ maxHeight: this.props.height,
+ margin: this.props.center ? 'auto' : ''
+ }}>
+ <div style={{
+ position: 'relative',
+ paddingBottom: `${(this.props.height / this.props.width) * 100}%`
+ }}>
+ <TagName
+ type={this.props.type}
+ srcSet={this.props.srcSet}
+ sizes={this.props.sizes}
+ src={this.props.src}
+ ref={img => this.img = img}
+ onLoad={this.hideLoader}
+ onError={this.hideLoader}
+ alt={this.props.alt}
+ style={{
+ position: 'absolute',
+ width: '100%',
+ maxWidth: '100%',
+ top: 0,
+ left: 0,
+ display: this.state.loading ? 'none' : 'block'
+ }}
+ />
+ {this.state.loading && this.props.loading &&
+ <div style={{
+ position: 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)'
+ }}>
+ {this.props.loading}
+ </div>
+ }
+ </div>
+ </div>
+ )
+ }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,39 @@
+const path = require('path')
+const webpack = require('webpack')
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+
+const plugins = []
+if (process.env.ANALYZE) {
+ plugins.push(new BundleAnalyzerPlugin({
+ analyzerMode: 'server',
+ openAnalyzer: true
+ }))
+}
+else{
+ plugins.push(new webpack.HotModuleReplacementPlugin())
+}
+
+module.exports = {
+ devtool: 'eval',
+ entry: [
+ './dev/dev.js'
+ ],
+ output: {
+ path: path.join(__dirname, 'dist'),
+ filename: 'index.js',
+ publicPath: '/dev/'
+ },
+ plugins: plugins,
+ resolve: {
+ extensions: ['.js', '.jsx']
+ },
+ module: {
+ rules: [{
+ test: /\.js?$/,
+ use: [{
+ loader: 'babel-loader'
+ }],
+ include: path.join(__dirname, '/')
+ }]
+ }
+}