Compile code before publishing the package

Author: Couto

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "react",
+    ["env", { "targets": { "node": "8.0.0" } }]
+  ],
+}

decorator.js

@@ -2,15 +2,24 @@
   "name": "storybook-styled-components",
   "version": "1.0.1",
   "description": "",
-  "main": "index.js",
+  "main": "dist/decorator.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "babel src --out-dir dist/",
+    "prepublish": "npm run build"
   },
   "author": "Nicolo Taddei <[email protected]>",
   "license": "ISC",
   "dependencies": {
     "@storybook/addons": "^3.2.14",
     "react": "^16.0.0",
     "styled-components": "^2.2.3"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1"
   }
 }

package.json

@@ -1,64 +1 @@
-import React from 'react'
-import addonAPI from '@storybook/addons'
-
-class PanelContainer extends React.Component {
-  state = {
-    theme: null,
-    themes: {},
-    initialised: false,
-  }
-
-  constructor(props) {
-    super()
-
-    props.channel.on('storybook-styled-components/init', this.onInit)
-  }
-
-  onInit = themes => {
-    const queryTheme = this.props.api.getQueryParam('currentTheme')
-
-    const theme = queryTheme
-      ? queryTheme
-      : this.state.theme ? this.state.theme : Object.keys(themes)[0]
-
-    this.setTheme(themes, theme)
-  }
-
-  updateTheme = e => {
-    const newTheme = e.target.value
-    this.setTheme(this.state.themes, newTheme)
-  }
-
-  setTheme(themes, theme) {
-    this.setState({ themes, theme })
-    this.props.channel.emit('storybook-styled-components/update', theme)
-    this.props.api.setQueryParams({ currentTheme: theme })
-  }
-
-  render() {
-    const { theme, themes } = this.state
-
-    if (!theme) return <div>Addon is initialising</div>
-
-    return (
-      <div>
-        <select value={this.state.theme} onChange={this.updateTheme}>
-          {Object.keys(themes).map(theme => (
-            <option key={theme} value={theme}>
-              {theme}
-            </option>
-          ))}
-        </select>
-      </div>
-    )
-  }
-}
-
-addonAPI.register('storybook-styled-components', storybookAPI => {
-  addonAPI.addPanel('storybook-styled-components/panel', {
-    title: 'Theme Picker',
-    render: () => (
-      <PanelContainer channel={addonAPI.getChannel()} api={storybookAPI} />
-    ),
-  })
-})
+require('./dist/register');