Packaging an addon

I made a nice addon that shows you the QR code of the current story you are on (for mobile web testing) and I can’t figure out how to package it.

This works fine when I import it in my project, in addons.js:

import React from 'react'
import addons from '@storybook/addons'

const externalUrl = process.env.STORYBOOK_URL || window.location.origin

addons.register('local_qr', api => {
  class QRPanel extends React.Component {
    constructor (props) {
      super(props)
      this.state = {url: ''}
      this.handleUrl = this.handleUrl.bind(this)
    }

    componentDidMount () {
      api.onStory(this.handleUrl)
    }

    handleUrl (kind, story) {
      const url = `${externalUr}/iframe.html?selectedKind=${encodeURIComponent(kind)}&selectedStory=${encodeURIComponent(story)}`
      this.setState({url})
    }

    render () {
      return (
        <div>
          <img
            height={200}
            width={200}
            src={'https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl=' + encodeURIComponent(this.state.url)}
          />
          <div>{this.state.url}</div>
        </div>
      )
    }
  }

  addons.addPanel('local_qr/panel', {
    title: 'QR Code',
    render: () => <QRPanel />
  })
})

But when I put it in it’s own project and link to it via file:/// url in package.json in another project, it doesn’t seem to be registering (the QR panel isn’t created, and things inside addons.register aren’t called. A console.log in the top of my register file is called, however, so I know it’s loading.

[usulpro]

@konsumer I tried your addon on my machine locally and everything worked fine (except the gitignore issue)

Maybe it will be useful to left the steps I did to run it (and maybe you can follow them from scratch as well):

git clone https://github.com/konsumer/storybook-qr.git
cd storybook-qr
npm i
cd ..
create-react-app test
cd test
getstorybook
npm i ../storybook-qr --save-dev
# add to addons.js line: import 'storybook-qr/register'; 
npm run storybook

[konsumer]

I just published it on npm, and it works fine, so my point is the instructions for local development need a change, as they don’t work as-is.