ADD special entry-points for vue and react for addon-centered.

addons/centered/README.md

@@ -10,15 +10,13 @@ Storybook Centered Decorator can be used to center components inside the preview
 yarn add @storybook/addon-centered --dev
 ```
 
-#### As a decorator
-
 You can set the decorator locally.
 
 example for React:
 
 ```js
 import { storiesOf } from '@storybook/react';
-import centered from '@storybook/addon-centered';
+import centered from '@storybook/addon-centered/react';
 
 import MyComponent from '../Component';
 
@@ -32,7 +30,7 @@ example for Vue:
 
 ```js
 import { storiesOf } from '@storybook/vue';
-import centered from '@storybook/addon-centered';
+import centered from '@storybook/addon-centered/vue';
 
 import MyComponent from '../Component.vue';
 storiesOf('MyComponent', module)
@@ -101,8 +99,9 @@ storiesOf('MyComponent', module)
 example for Angular with component:
 
 ```ts
-import { centered } from '@storybook/addon-centered/angular';
 import { storiesOf } from '@storybook/angular';
+import { centered } from '@storybook/addon-centered/angular';
+
 import { AppComponent } from '../app/app.component';
 
 storiesOf('Addon|Centered', module)
@@ -117,8 +116,9 @@ storiesOf('Addon|Centered', module)
 example for Angular with template:
 
 ```ts
-import { centered } from '@storybook/addon-centered/angular';
 import { moduleMetadata, storiesOf } from '@storybook/angular';
+import { centered } from '@storybook/addon-centered/angular';
+
 import { AppComponent } from '../app/app.component';
 
 storiesOf('Addon|Centered', module)
@@ -148,7 +148,7 @@ example for React:
 
 ```js
 import { configure, addDecorator } from '@storybook/react';
-import centered from '@storybook/addon-centered';
+import centered from '@storybook/addon-centered/react';
 
 addDecorator(centered);
 
@@ -161,7 +161,7 @@ example for Vue:
 
 ```js
 import { configure, addDecorator } from '@storybook/vue';
-import centered from '@storybook/addon-centered';
+import centered from '@storybook/addon-centered/vue';
 
 addDecorator(centered);
 
@@ -195,35 +195,3 @@ configure(function () {
   //...
 }, module);
 ```
-
-#### As an extension
-
-##### 1 - Configure the extension
-
-```js
-import { configure, setAddon } from '@storybook/react';
-import centered from '@storybook/addon-centered';
-
-setAddon({
-  addCentered(storyName, storyFn) {
-    this.add(storyName, (context) => (
-      centered.call(context, storyFn)
-    ));
-  },
-});
-
-configure(function () {
-  //...
-}, module);
-```
-
-##### 2 - Use it in your story
-
-```js
-import { storiesOf } from '@storybook/react';
-
-import Component from '../Component';
-
-storiesOf('Component', module)
-  .addCentered('without props', () => (<Component />))
-```

addons/centered/package.json

@@ -23,7 +23,8 @@
   },
   "dependencies": {
     "core-js": "^2.6.2",
-    "global": "^4.3.2"
+    "global": "^4.3.2",
+    "util-deprecate": "^1.0.2"
   },
   "publishConfig": {
     "access": "public"

addons/centered/react.js

@@ -0,0 +1 @@
+module.exports = require('./dist/react');

addons/centered/src/index.js

@@ -1,8 +1,20 @@
 import { window } from 'global';
+import deprecate from 'util-deprecate';
+
 import ReactCentered from './react';
 import VueCentered from './vue';
 
-const Centered = window.STORYBOOK_ENV === 'vue' ? VueCentered : ReactCentered;
+const Centered = deprecate(
+  () => (window.STORYBOOK_ENV === 'vue' ? VueCentered : ReactCentered),
+  `
+  Using "import centered from '@storybook/addon-centered'" is deprecated.
+  Please use either:
+  "import centered from '@storybook/addon-centered/react'"
+  or
+  "import centered from '@storybook/addon-centered/vue'"
+`
+)();
+
 export default Centered;
 
 if (module && module.hot && module.hot.decline) {

addons/centered/vue.js

@@ -0,0 +1 @@
+module.exports = require('./dist/vue');

examples/cra-kitchen-sink/src/stories/long-description.stories.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import centered from '@storybook/addon-centered';
+import centered from '@storybook/addon-centered/react';
 import { Button } from '@storybook/react/demo';
 
 storiesOf('Some really long story kind description', module)

examples/official-storybook/stories/addon-centered.stories.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import centered from '@storybook/addon-centered';
+import centered from '@storybook/addon-centered/react';
 
 import BaseButton from '../components/BaseButton';
 

examples/vue-kitchen-sink/src/stories/addon-centered.stories.js

@@ -1,5 +1,5 @@
 import { storiesOf } from '@storybook/vue';
-import Centered from '@storybook/addon-centered';
+import Centered from '@storybook/addon-centered/vue';
 
 import MyButton from './Button.vue';