feat: release the Kraken! 🐙

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "shippedProposals": true, "useBuiltIns": "usage", "corejs": "3" }],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    ["@babel/plugin-proposal-class-properties", { "loose": true }]
+  ]
+}

.eslintrc

@@ -0,0 +1,42 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "airbnb"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2018,
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "@typescript-eslint"
+  ],
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "import/extensions": ["error", "ignorePackages", { "tsx": "never" }],
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["example/**/*.js"]}],
+    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".tsx"] }],
+    "react/prop-types": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".tsx"]
+      }
+    }
+  }
+}

.github/workflows/main.yml

@@ -0,0 +1,36 @@
+name: Main
+on: push
+
+jobs:
+  test-build-and-release:
+    name: Test, build and release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12
+
+      - name: Install
+        run: npm ci
+
+      - name: Install example
+        run: npm ci --prefix example
+
+      - name: Build
+        run: npm run build
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Type-check
+        run: npm run type-check
+
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

.gitignore

@@ -0,0 +1,4 @@
+.vscode
+dist
+node_modules
+storybook-static

.huskyrc

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged"
+  }
+}

.lintstagedrc

@@ -0,0 +1,3 @@
+{
+  "*.{js,tsx}": "eslint --fix"
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Rafael Bardini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,84 @@
+# Storybook Playroom Addon
+
+[![npm package version](https://img.shields.io/npm/v/storybook-addon-playroom)](https://www.npmjs.com/package/storybook-addon-playroom)
+[![Build status](https://img.shields.io/github/workflow/status/rbardini/storybook-addon-playroom/Main)](https://github.com/rbardini/storybook-addon-playroom/actions)
+[![Dependencies status](https://img.shields.io/david/rbardini/storybook-addon-playroom)](https://david-dm.org/rbardini/storybook-addon-playroom)
+[![devDependencies status](https://img.shields.io/david/dev/rbardini/storybook-addon-playroom)](https://david-dm.org/rbardini/storybook-addon-playroom?type=dev)
+
+Design with [Playroom](https://github.com/seek-oss/playroom) inside [Storybook](https://storybook.js.org), using each story source as a starting point.
+
+[Live demo](https://storybook-addon-playroom.netlify.com)
+
+![Demo](demo.gif)
+
+## Installation
+
+```console
+npm install --save-dev storybook-addon-playroom
+```
+
+within `.storybook/main.js`:
+
+```js
+module.exports = {
+  addons: ['storybook-addon-playroom']
+}
+```
+
+within `.storybook/preview.js`:
+
+```js
+import { addDecorator } from '@storybook/react';
+import { withPlayroom } from 'storybook-addon-playroom';
+
+addDecorator(withPlayroom);
+```
+
+See [`example`](example) for a minimal working setup.
+
+## Configuration
+
+The addon can be configured globally and per story with the `playroom` parameter. The following options are available:
+
+| Option     | Description                          | Default                 |
+|:-----------|:-------------------------------------|:------------------------|
+| `url`      | the Playroom URL                     | `http://localhost:9000` |
+| `disabled` | whether to disable the addon         | `false`                 |
+
+### Global configuration
+
+To add Playroom to all stories, call `addParameters` in `.storybook/preview.js`:
+
+```js
+import { addParameters } from '@storybook/react';
+
+addParameters({
+  playroom: {
+    url: 'http://localhost:9000', // your Playroom URL (default)
+  },
+});
+```
+
+### Per-story configuration
+
+To configure Playroom for a single story or a set of stories, add the `playroom` parameter:
+
+```js
+export default {
+  title: 'Stories',
+  parameters: {
+    playroom: {
+      url: 'http://localhost:9000',
+    },
+  },
+};
+
+export const myStory = () => '<h1>Hello World</h1>';
+myStory.story = {
+  parameters: {
+    playroom: {
+      url: 'http://localhost:9000',
+    },
+  },
+};
+```

example/.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-links',
+    'storybook-addon-playroom',
+  ],
+  stories: ['../stories/**/*.stories.js'],
+};

example/.storybook/preview.js

@@ -0,0 +1,13 @@
+import { addDecorator, addParameters } from '@storybook/react';
+import { withPlayroom } from 'storybook-addon-playroom';
+
+addDecorator(withPlayroom);
+
+addParameters({
+  playroom: {
+    // Because Playroom is built inside Storybook on this example's deploy,
+    // we must define the absolute path to it when NODE_ENV is production,
+    // otherwise set undefined to use the default Playroom URL (localhost)
+    url: process.env.NODE_ENV === 'production' ? '/playroom/' : undefined,
+  },
+});

example/components/index.js

@@ -0,0 +1 @@
+export { Button, Welcome } from '@storybook/react/demo';