Viewport Addon

.gitignore

@@ -2,6 +2,7 @@ node_modules
 *.log
 .idea
 .vscode
+*.sw*
 npm-shrinkwrap.json
 dist
 .tern-port

addons/viewport/README.md

@@ -0,0 +1,37 @@
+# Storybook Viewport Addon
+
+Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybookjs.org).  This helps build responsive components inside of Storybook.
+
+This addon works with Storybook for: [React](https://github.com/storybooks/storybook/tree/master/app/react) and [Vue](https://github.com/storybooks/storybook/tree/master/app/vue).
+
+![Screenshot](https://github.com/storybooks/storybook/blob/master/docs/viewport.png)
+
+## Installation
+
+Install the following npm module:
+
+    npm i --save-dev @storybook/addon-viewport
+
+or with yarn:
+
+    yarn add -D @storybook/addon-viewport
+
+## Basic Usage
+
+Simply import the Storybook Viewport Addon in the `addon.js` file in your `.storybook` directory.
+
+```js
+import '@storybook/addon-viewport/register'
+```
+
+This will register the Viewport Addon to Storybook and will show up in the action area.
+
+## FAQ
+
+#### How do I add a new device?
+
+Unfortunately, this is currently not supported.
+
+#### How can I make a custom screen size?
+
+Unfortunately, this is currently not supported.

addons/viewport/manager.js

@@ -0,0 +1,3 @@
+const manager = require('./dist/manager');
+
+manager.init();

addons/viewport/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@storybook/addon-viewport",
+  "version": "3.2.0",
+  "description": "Storybook addon to change the viewport size to mobile",
+  "main": "dist/index.js",
+  "keywords": [
+    "storybook"
+  ],
+  "scripts": {
+    "prepublish": "node ../../scripts/prepublish.js"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@storybook/components": "^3.2.7",
+    "global": "^4.3.2",
+    "prop-types": "^15.5.10"
+  },
+  "peerDependencies": {
+    "@storybook/addons": "^3.2.0",
+    "react": "*"
+  }
+}

addons/viewport/register.js

@@ -0,0 +1,3 @@
+// NOTE: loading addons using this file is deprecated!
+// please use manager.js and preview.js files instead
+require('./manager');

addons/viewport/src/components/Panel.jsx

@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { baseFonts } from '@storybook/components';
+import { document } from 'global';
+
+import { viewports, defaultViewport, resetViewport } from './viewportInfo';
+import { SelectViewport } from './SelectViewport';
+import { RotateViewport } from './RotateViewport';
+
+import * as styles from './styles';
+
+const storybookIframe = 'storybook-preview-iframe';
+const containerStyles = {
+  padding: 15,
+  width: '100%',
+  boxSizing: 'border-box',
+  ...baseFonts,
+};
+
+export class Panel extends Component {
+  static propTypes = {
+    channel: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    this.state = {
+      viewport: defaultViewport,
+      isLandscape: false,
+    };
+
+    this.props.channel.on('addon:viewport:update', this.changeViewport);
+  }
+
+  componentDidMount() {
+    this.iframe = document.getElementById(storybookIframe);
+  }
+
+  componentWillUnmount() {
+    this.props.channel.removeListener('addon:viewport:update', this.changeViewport);
+  }
+
+  iframe = undefined;
+
+  changeViewport = viewport => {
+    const { viewport: previousViewport } = this.state;
+
+    if (previousViewport !== viewport) {
+      this.setState(
+        {
+          viewport,
+          isLandscape: false,
+        },
+        this.updateIframe
+      );
+    }
+  };
+
+  toggleLandscape = () => {
+    const { isLandscape } = this.state;
+
+    this.setState({ isLandscape: !isLandscape }, this.updateIframe);
+  };
+
+  updateIframe = () => {
+    const { viewport: viewportKey, isLandscape } = this.state;
+    const viewport = viewports[viewportKey] || resetViewport;
+
+    if (!this.iframe) {
+      throw new Error('Cannot find Storybook iframe');
+    }
+
+    Object.keys(viewport.styles).forEach(prop => {
+      this.iframe.style[prop] = viewport.styles[prop];
+    });
+
+    if (isLandscape) {
+      this.iframe.style.height = viewport.styles.width;
+      this.iframe.style.width = viewport.styles.height;
+    }
+  };
+
+  render() {
+    const { isLandscape, viewport } = this.state;
+
+    const disableDefault = viewport === defaultViewport;
+    const disabledStyles = disableDefault ? styles.disabled : {};
+
+    const buttonStyles = {
+      ...styles.button,
+      ...disabledStyles,
+      marginTop: 30,
+      padding: 20,
+    };
+
+    return (
+      <div style={containerStyles}>
+        <SelectViewport
+          activeViewport={viewport}
+          onChange={e => this.changeViewport(e.target.value)}
+        />
+
+        <RotateViewport
+          onClick={this.toggleLandscape}
+          disabled={disableDefault}
+          active={isLandscape}
+        />
+
+        <button
+          style={buttonStyles}
+          onClick={() => this.changeViewport(defaultViewport)}
+          disabled={disableDefault}
+        >
+          Reset Viewport
+        </button>
+      </div>
+    );
+  }
+}

addons/viewport/src/components/RotateViewport.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as styles from './styles';
+
+export function RotateViewport({ active, ...props }) {
+  const disabledStyles = props.disabled ? styles.disabled : {};
+  const actionStyles = {
+    ...styles.action,
+    ...disabledStyles,
+  };
+  return (
+    <div style={styles.row}>
+      <label style={styles.label}>Rotate</label>
+      <button {...props} style={actionStyles}>
+        {active ? 'Vertical' : 'Landscape'}
+      </button>
+    </div>
+  );
+}
+
+RotateViewport.propTypes = {
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  active: PropTypes.bool,
+};
+
+RotateViewport.defaultProps = {
+  disabled: true,
+  active: false,
+};

addons/viewport/src/components/SelectViewport.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { viewports, defaultViewport } from './viewportInfo';
+import * as styles from './styles';
+
+export function SelectViewport({ activeViewport, onChange }) {
+  return (
+    <div style={styles.row}>
+      <label style={styles.label}>Device</label>
+      <select style={styles.action} value={activeViewport} onChange={onChange}>
+        <option value={defaultViewport}>Default</option>
+        {Object.keys(viewports).map(key =>
+          <option value={key} key={key}>
+            {viewports[key].name}
+          </option>
+        )}
+      </select>
+    </div>
+  );
+}
+
+SelectViewport.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  activeViewport: PropTypes.string.isRequired,
+};

addons/viewport/src/components/styles.js

@@ -0,0 +1,30 @@
+export const row = {
+  width: '100%',
+  display: 'flex',
+  marginBottom: 15,
+};
+
+export const label = {
+  width: 80,
+  marginRight: 15,
+};
+
+const actionColor = 'rgb(247, 247, 247)';
+
+export const button = {
+  color: 'rgb(85, 85, 85)',
+  width: '100%',
+  border: `1px solid ${actionColor}`,
+  backgroundColor: actionColor,
+  borderRadius: 3,
+};
+
+export const disabled = {
+  opacity: '0.5',
+  cursor: 'not-allowed',
+};
+
+export const action = {
+  ...button,
+  height: 30,
+};