Addon-centered: Ability to disable for specific story (#7709)

Addon-centered: ability to disable on specific story

addons/centered/README.md

@@ -195,3 +195,15 @@ configure(function () {
   //...
 }, module);
 ```
+
+If you don't want to use centered for a story, you can disable it by using `{ disable: true }` to skip the addon:
+
+```js
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Button', module)
+  .add('example', () => <button>Click me</button>, {
+    centered: { disable: true },
+  });
+```

addons/centered/src/angular.ts

@@ -1,5 +1,6 @@
-import { StoryFn } from '@storybook/addons';
+import { makeDecorator, StoryFn } from '@storybook/addons';
 import { IStory } from '../angular.d';
+import parameters from './parameters';
 import styles from './styles';
 
 function getComponentSelector(component: any) {
@@ -45,7 +46,7 @@ function getModuleMetadata(metadata: any) {
   return moduleMetadata;
 }
 
-export default function(metadataFn: StoryFn<IStory>) {
+function centered(metadataFn: StoryFn<IStory>) {
   const metadata = metadataFn();
 
   return {
@@ -59,6 +60,11 @@ export default function(metadataFn: StoryFn<IStory>) {
   };
 }
 
+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as StoryFn),
+});
+
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }

addons/centered/src/ember.ts

@@ -1,7 +1,9 @@
 import { document } from 'global';
+import { makeDecorator } from '@storybook/addons';
+import parameters from './parameters';
 import styles from './styles';
 
-export default function(storyFn: () => { template: any; context: any }) {
+function centered(storyFn: () => { template: any; context: any }) {
   const { template, context } = storyFn();
 
   const element = document.createElement('div');
@@ -24,6 +26,11 @@ export default function(storyFn: () => { template: any; context: any }) {
   };
 }
 
+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as any),
+});
+
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }

addons/centered/src/html.ts

@@ -1,4 +1,6 @@
 import { document, Node } from 'global';
+import { makeDecorator } from '@storybook/addons';
+import parameters from './parameters';
 import styles from './styles';
 
 const INNER_ID = 'sb-addon-centered-inner';
@@ -26,7 +28,7 @@ function getWrapperDiv() {
   return getOrCreate(WRAPPER_ID, styles.style);
 }
 
-export default function(storyFn: () => any) {
+function centered(storyFn: () => any) {
   const inner = getInnerDiv();
   const wrapper = getWrapperDiv();
   wrapper.appendChild(inner);
@@ -45,6 +47,11 @@ export default function(storyFn: () => any) {
   return wrapper;
 }
 
+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as any),
+});
+
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }

addons/centered/src/mithril.tsx

@@ -1,8 +1,10 @@
 /** @jsx m */
 import m, { ComponentTypes } from 'mithril';
+import { makeDecorator } from '@storybook/addons';
+import parameters from './parameters';
 import styles from './styles';
 
-export default function(storyFn: () => ComponentTypes) {
+function centered(storyFn: () => ComponentTypes) {
   return {
     view: () => (
       <div style={styles.style}>
@@ -12,6 +14,11 @@ export default function(storyFn: () => ComponentTypes) {
   };
 }
 
+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as any),
+});
+
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }

addons/centered/src/parameters.ts

@@ -0,0 +1,6 @@
+const parameters = {
+  name: 'centered',
+  parameterName: 'centered',
+} as const;
+
+export default parameters;

addons/centered/src/preact.tsx

@@ -1,11 +1,18 @@
 /** @jsx h */
 import { Component, h } from 'preact';
+import { makeDecorator } from '@storybook/addons';
+import parameters from './parameters';
 import styles from './styles';
 
-export default function(storyFn: () => Component) {
+function centered(storyFn: () => Component) {
   return (
     <div style={styles.style}>
       <div style={styles.innerStyle}>{storyFn()}</div>
     </div>
   );
 }
+
+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as any),
+});

addons/centered/src/rax.js

@@ -3,16 +3,23 @@
 import { createElement } from 'rax';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import View from 'rax-view';
+import { makeDecorator } from '@storybook/addons/src/make-decorator';
+import parameters from './parameters';
 import styles from './styles';
 
-export default function(storyFn) {
+function centered(storyFn) {
   return (
     <View style={styles.style}>
       <View style={styles.innerStyle}>{storyFn()}</View>
     </View>
   );
 }
 
+export default makeDecorator({
+  ...parameters,
+  wrapper: centered,
+});
+
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }

addons/centered/src/react.tsx

@@ -1,14 +1,21 @@
 import React, { ReactNode } from 'react';
+import { makeDecorator, StoryFn } from '@storybook/addons';
+import parameters from './parameters';
 import styles from './styles';
 
-export default function(storyFn: () => ReactNode) {
+function centered(storyFn: () => ReactNode) {
   return (
     <div style={styles.style}>
       <div style={styles.innerStyle}>{storyFn()}</div>
     </div>
   );
 }
 
+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as StoryFn),
+});
+
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }

addons/centered/src/svelte.ts

@@ -1,6 +1,8 @@
+import { makeDecorator } from '@storybook/addons';
 import Centered from './components/Centered.svelte';
 import styles from './styles';
 import json2CSS from './helpers/json2CSS';
+import parameters from './parameters';
 
 const centeredStyles = {
   /** @type {string} */
@@ -18,7 +20,7 @@ const centeredStyles = {
  *
  * @see https://svelte.technology/guide#svelte-component
  */
-export default function(storyFn: () => any) {
+function centered(storyFn: () => any) {
   const { Component: OriginalComponent, props, on } = storyFn();
 
   return {
@@ -30,6 +32,11 @@ export default function(storyFn: () => any) {
   };
 }
 
+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as any),
+});
+
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }

addons/centered/src/vue.ts

@@ -1,6 +1,8 @@
+import { makeDecorator } from '@storybook/addons';
+import parameters from './parameters';
 import styles from './styles';
 
-export default function() {
+function centered() {
   return {
     template: `
       <div :style="style">
@@ -15,6 +17,11 @@ export default function() {
   };
 }
 
+export default makeDecorator({
+  ...parameters,
+  wrapper: centered,
+});
+
 if (module && module.hot && module.hot.decline) {
   module.hot.decline();
 }

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

@@ -13,3 +13,13 @@ export const story1 = () => <BaseButton label="This story should be centered" />
 story1.story = {
   name: 'story 1',
 };
+
+export const story2 = () => <BaseButton label="This story should not be centered" />;
+
+story2.story = {
+  name: 'story 2 not centered',
+
+  parameters: {
+    centered: { disable: true },
+  },
+};