@storybook/addon-viewport - npm Package Compare versions

Comparing version 3.4.0-rc.4 to 4.0.0-alpha.0

package.json

 {
   "name": "@storybook/addon-viewport",
-  "version": "3.4.0-rc.4",
+  "version": "4.0.0-alpha.0",
   "description": "Storybook addon to change the viewport size to mobile",
@@ -9,3 +9,3 @@ "keywords": [
   "license": "MIT",
-  "main": "register.js",
+  "main": "preview.js",
   "scripts": {
@@ -15,5 +15,6 @@ "prepare": "node ../../scripts/prepare.js"
   "dependencies": {
-    "@storybook/components": "3.4.0-rc.4",
+    "@storybook/components": "4.0.0-alpha.0",
     "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
+    "lodash.debounce": "^4.0.8",
     "prop-types": "^15.6.1"
@@ -20,0 +21,0 @@ },

README.md

@@ -19,4 +19,69 @@ # Storybook Viewport Addon
 
-## Basic Usage
 
+## Configuration
+
+Import and use the `configure` function in your `config.js` file.
+
+```js
+import { configure } from '@storybook/addon-viewport';
+```
+
+### defaultViewport : String
+----
+Setting this property to, let say `iphone6`, will make `iPhone 6` the default device/viewport for all stories. Default is `'responsive'` which fills 100% of the preview area.
+
+### viewports : Object
+----
+A key-value pair of viewport's key and properties (see `Viewport` definition below) for all viewports to be displayed. Default is [`INITIAL_VIEWPORTS`](src/shared/index.js)
+
+#### Viewport Model
+```js
+{
+  /**
+   * name to display in the dropdown
+   * @type {String}
+   */
+  name: 'Responsive',
+
+  /**
+   * Inline styles to be applied to the story (iframe).
+   * styles is an object whose key is the camelCased version of the style name, and whose
+   * value is the style’s value, usually a string
+   * @type {Object}
+   */
+  styles: {
+    width: '100%',
+    height: '100%',
+  },
+
+  /**
+   * type of the device (e.g. desktop, mobile, or tablet)
+   * @type {String}
+   */
+  type: 'desktop',
+}
+```
+
+## Decorators
+
+Sometimes you want to show collection of mobile stories, and you know those stories look horible on desktop (`responsive`), so you think you need to change the default viewport only for those?
+
+Here is the answer, with `withViewport` decorator, you can change the default viewport of single, multiple, or all stories.
+
+`withViewport` accepts either
+* A `String`, which represents the default viewport, or
+* An `Object`, which looks like
+```js
+{
+  name: 'iphone6', // default viewport
+  onViewportChange({ viewport }) { // called whenever different viewport is selected from the dropdown
+
+  }
+}
+```
+
+## Examples
+
+### Basic Usage
+
 Simply import the Storybook Viewport Addon in the `addons.js` file in your `.storybook` directory.
@@ -30,10 +95,129 @@
 
-## FAQ
 
-#### How do I add a new device?
+### Use Custom Set of Devices
 
-Unfortunately, this is currently not supported.
+This will replace all previous devices with `Kindle Fire 2` and `Kindle Fire HD` by simply calling `configure` with the two devices as `viewports` in `config.js` file in your `.storybook` directory.
 
-#### How can I make a custom screen size?
+```js
+import { configure } from '@storybook/addon-viewport';
 
-Unfortunately, this is currently not supported.
+const newViewports = {
+  kindleFire2: {
+    name: 'Kindle Fire 2',
+    styles: {
+      width: '600px',
+      height: '963px'
+    }
+  },
+  kindleFireHD: {
+    name: 'Kindle Fire HD',
+    styles: {
+      width: '533px',
+      height: '801px'
+    }
+  }
+};
+
+configure({
+  viewports: newViewports
+});
+```
+
+
+### Add New Device
+
+This will add both `Kindle Fire 2` and `Kindle Fire HD` to the list of devices. This is acheived by making use of the exported [`INITIAL_VIEWPORTS`](src/shared/index.js) property, by merging it with the new viewports and pass the result as `viewports` to `configure` function
+
+```js
+import { configure, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+const newViewports = {
+  kindleFire2: {
+    name: 'Kindle Fire 2',
+    styles: {
+      width: '600px',
+      height: '963px'
+    }
+  },
+  kindleFireHD: {
+    name: 'Kindle Fire HD',
+    styles: {
+      width: '533px',
+      height: '801px'
+    }
+  }
+};
+
+configure({
+  viewports: {
+    ...INITIAL_VIEWPORTS,
+    ...newViewports
+  }
+});
+```
+
+
+### Change The Default Viewport
+
+This will make `iPhone 6` the default viewport for all stories.
+
+```js
+import { configure } from '@storybook/addon-viewport';
+
+configure({
+  defaultViewport: 'iphone6'
+});
+```
+
+## withViewport Decorator
+
+Change the default viewport for single/multiple/global stories, or listen to viewport selection changes
+
+```js
+import React from 'react';
+import { storiesOf, addDecorator } from '@storybook/react';
+import { withViewport } from '@storybook/addon-viewport';
+
+// Globablly
+addDecorator(withViewport('iphone5'));
+
+// Collection
+storiesOf('Decorator with string', module)
+  .addDecorator(withViewport('iphone6'))
+  .add('iPhone 6', () => (
+    <h1>
+      Do I look good on <b>iPhone 6</b>?
+    </h1>
+  ));
+
+storiesOf('Decorator with object', module)
+  .addDecorator(
+    withViewport({
+      onViewportChange({ viewport }) {
+        console.log(`Viewport changed: ${viewport.name} (${viewport.type})`); // e.g. Viewport changed: iphone6 (mobile)
+      },
+    })
+  )
+  .add('onViewportChange', () => <MobileFirstComponent />);
+
+```
+
+## Viewport Component
+
+You can also change the default viewport for a single story using `Viewport` component
+
+```js
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Viewport } from '@storybook/addon-viewport';
+
+// Collection
+storiesOf('Custom Default', module)
+  .add('iphone6p', () => (
+    <Viewport name="iphone6p">
+      <h1>
+        Do I look good on <b>iPhone 6 Plus</b>?
+      </h1>
+    </Viewport>
+  ));
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

263344

increased by13.32%

Number of package files

34

increased by47.83%

Lines of code

1754

increased by76.64%

Number of lines in readme file

222

increased by484.21%

Worsened metrics

Dependency count

7

increased by16.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedlodash.debounce@^4.0.8

• + Added@storybook/components@4.0.0-alpha.0(transitive)

• + Addedlodash.debounce@4.0.8(transitive)

• - Removed@storybook/components@3.4.0-rc.4(transitive)

• Updated@storybook/components@4.0.0-alpha.0