mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 04:11:11 +08:00
REMOVE addon-centered, it's replaced by layout parameter
This commit is contained in:
Norbert de Langen
parent
d4027f01c6
commit
d29ca7e37f
@ -1,211 +0,0 @@
|
||||
# Storybook Centered Decorator
|
||||
|
||||
Storybook Centered Decorator can be used to center components inside the preview in [Storybook](https://storybook.js.org).
|
||||
|
||||
[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)
|
||||
|
||||
⚠️ This addon applies styling to the view in order to center the component. This may impact the look and feel of story.
|
||||
|
||||
### Usage
|
||||
|
||||
```sh
|
||||
yarn add @storybook/addon-centered --dev
|
||||
```
|
||||
|
||||
You can set the decorator locally.
|
||||
|
||||
example for React:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/react';
|
||||
import centered from '@storybook/addon-centered/react';
|
||||
|
||||
import MyComponent from '../Component';
|
||||
|
||||
storiesOf('MyComponent', module)
|
||||
.addDecorator(centered)
|
||||
.add('without props', () => (<MyComponent />))
|
||||
.add('with some props', () => (<MyComponent text="The Comp"/>));
|
||||
```
|
||||
|
||||
example for Vue:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/vue';
|
||||
import centered from '@storybook/addon-centered/vue';
|
||||
|
||||
import MyComponent from '../Component.vue';
|
||||
storiesOf('MyComponent', module)
|
||||
.addDecorator(centered)
|
||||
.add('without props', () => ({
|
||||
components: { MyComponent },
|
||||
template: '<my-component />'
|
||||
}))
|
||||
.add('with some props', () => ({
|
||||
components: { MyComponent },
|
||||
template: '<my-component text="The Comp"/>'
|
||||
}));
|
||||
```
|
||||
|
||||
example for Preact:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/preact';
|
||||
import centered from '@storybook/addon-centered/preact';
|
||||
|
||||
import MyComponent from '../Component';
|
||||
|
||||
storiesOf('MyComponent', module)
|
||||
.addDecorator(centered)
|
||||
.add('without props', () => (<MyComponent />))
|
||||
.add('with some props', () => (<MyComponent text="The Comp"/>));
|
||||
```
|
||||
|
||||
example for Svelte:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/svelte';
|
||||
import Centered from '@storybook/addon-centered/svelte';
|
||||
|
||||
import Component from '../Component.svelte';
|
||||
|
||||
storiesOf('Addon|Centered', module)
|
||||
.addDecorator(Centered)
|
||||
.add('rounded', () => ({
|
||||
Component,
|
||||
data: {
|
||||
rounded: true,
|
||||
text: "Look, I'm centered!",
|
||||
},
|
||||
}))
|
||||
```
|
||||
|
||||
example for Mithril:
|
||||
|
||||
```js
|
||||
import { storiesOf } from '@storybook/mithril';
|
||||
import centered from '@storybook/addon-centered/mithril';
|
||||
|
||||
import MyComponent from '../Component';
|
||||
|
||||
storiesOf('MyComponent', module)
|
||||
.addDecorator(centered)
|
||||
.add('without props', () => ({
|
||||
view: () => <MyComponent />
|
||||
}))
|
||||
.add('with some props', () => ({
|
||||
view: () => <MyComponent text="The Comp"/>
|
||||
}));
|
||||
```
|
||||
|
||||
example for Angular with component:
|
||||
|
||||
```ts
|
||||
import { storiesOf } from '@storybook/angular';
|
||||
import { centered } from '@storybook/addon-centered/angular';
|
||||
|
||||
import { AppComponent } from '../app/app.component';
|
||||
|
||||
storiesOf('Addon|Centered', module)
|
||||
.addDecorator(centered)
|
||||
.add('centered component', () => ({
|
||||
component: AppComponent,
|
||||
props: {},
|
||||
}));
|
||||
|
||||
```
|
||||
|
||||
example for Angular with template:
|
||||
|
||||
```ts
|
||||
import { moduleMetadata, storiesOf } from '@storybook/angular';
|
||||
import { centered } from '@storybook/addon-centered/angular';
|
||||
|
||||
import { AppComponent } from '../app/app.component';
|
||||
|
||||
storiesOf('Addon|Centered', module)
|
||||
.addDecorator(
|
||||
moduleMetadata({
|
||||
declarations: [Button],
|
||||
})
|
||||
)
|
||||
.addDecorator(centered)
|
||||
.add('centered template', () => ({
|
||||
template: `<storybook-button-component
|
||||
[text]="text" (onClick)="onClick($event)">
|
||||
</storybook-button-component>`,
|
||||
props: {
|
||||
text: 'Hello Button',
|
||||
onClick: event => {
|
||||
console.log('some bindings work');
|
||||
console.log(event);
|
||||
},
|
||||
},
|
||||
}));
|
||||
```
|
||||
|
||||
Also, you can also add this decorator globally
|
||||
|
||||
example for React:
|
||||
|
||||
```js
|
||||
import { configure, addDecorator } from '@storybook/react';
|
||||
import centered from '@storybook/addon-centered/react';
|
||||
|
||||
addDecorator(centered);
|
||||
|
||||
configure(function () {
|
||||
//...
|
||||
}, module);
|
||||
```
|
||||
|
||||
example for Vue:
|
||||
|
||||
```js
|
||||
import { configure, addDecorator } from '@storybook/vue';
|
||||
import centered from '@storybook/addon-centered/vue';
|
||||
|
||||
addDecorator(centered);
|
||||
|
||||
configure(function () {
|
||||
//...
|
||||
}, module);
|
||||
```
|
||||
|
||||
example for Svelte:
|
||||
|
||||
```js
|
||||
import { configure, addDecorator } from '@storybook/svelte';
|
||||
import Centered from '@storybook/addon-centered/svelte';
|
||||
|
||||
addDecorator(Centered);
|
||||
|
||||
configure(function () {
|
||||
//...
|
||||
}, module);
|
||||
```
|
||||
|
||||
example for Mithril:
|
||||
|
||||
```js
|
||||
import { configure, addDecorator } from '@storybook/mithril';
|
||||
import centered from '@storybook/addon-centered/mithril';
|
||||
|
||||
addDecorator(centered);
|
||||
|
||||
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 },
|
||||
});
|
||||
```
|
||||
25
addons/centered/angular.d.ts
vendored
25
addons/centered/angular.d.ts
vendored
@ -1,25 +0,0 @@
|
||||
import { StoryFn } from "@storybook/addons";
|
||||
|
||||
export interface ICollection {
|
||||
[p: string]: any;
|
||||
}
|
||||
|
||||
export interface NgModuleMetadata {
|
||||
declarations?: any[];
|
||||
entryComponents?: any[];
|
||||
imports?: any[];
|
||||
schemas?: any[];
|
||||
providers?: any[];
|
||||
}
|
||||
|
||||
export interface IStory {
|
||||
component?: any;
|
||||
props?: ICollection;
|
||||
propsMeta?: ICollection;
|
||||
moduleMetadata?: NgModuleMetadata;
|
||||
template?: string;
|
||||
styles?: string[];
|
||||
}
|
||||
declare module '@storybook/addon-centered/angular' {
|
||||
export function centered(story: StoryFn<IStory>): IStory;
|
||||
}
|
||||
3
addons/centered/angular.js
vendored
3
addons/centered/angular.js
vendored
@ -1,3 +0,0 @@
|
||||
import fromCentered from './dist/angular';
|
||||
|
||||
export const centered = fromCentered;
|
||||
2
addons/centered/ember.d.ts
vendored
2
addons/centered/ember.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
import centered from './dist/ember';
|
||||
export default centered;
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/ember');
|
||||
2
addons/centered/html.d.ts
vendored
2
addons/centered/html.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
import centered from './dist/html';
|
||||
export default centered;
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/html');
|
||||
2
addons/centered/mithril.d.ts
vendored
2
addons/centered/mithril.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
import centered from './dist/mithril';
|
||||
export default centered;
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/mithril');
|
||||
@ -1,73 +0,0 @@
|
||||
{
|
||||
"name": "@storybook/addon-centered",
|
||||
"version": "6.0.0-alpha.30",
|
||||
"description": "Storybook decorator to center components",
|
||||
"keywords": [
|
||||
"addon",
|
||||
"storybook"
|
||||
],
|
||||
"homepage": "https://github.com/storybookjs/storybook/tree/master/addons/centered",
|
||||
"bugs": {
|
||||
"url": "https://github.com/storybookjs/storybook/issues"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/storybookjs/storybook.git",
|
||||
"directory": "addons/centered"
|
||||
},
|
||||
"license": "MIT",
|
||||
"author": "Muhammed Thanish <mnmtanish@gmail.com>",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist/**/*",
|
||||
"README.md",
|
||||
"*.js",
|
||||
"*.d.ts",
|
||||
"ts3.5/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"prepare": "node ../../scripts/prepare.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@storybook/addons": "6.0.0-alpha.30",
|
||||
"core-js": "^3.0.1",
|
||||
"global": "^4.3.2",
|
||||
"regenerator-runtime": "^0.13.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/mithril": "^1.1.16",
|
||||
"@types/webpack-env": "^1.15.1",
|
||||
"mithril": "*",
|
||||
"preact": "*",
|
||||
"rax": "*",
|
||||
"rax-view": "*",
|
||||
"react": "*"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"mithril": "*",
|
||||
"preact": "*",
|
||||
"rax": "*",
|
||||
"rax-view": "*",
|
||||
"react": "*",
|
||||
"react-dom": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"mithril": {
|
||||
"optional": true
|
||||
},
|
||||
"preact": {
|
||||
"optional": true
|
||||
},
|
||||
"rax": {
|
||||
"optional": true
|
||||
},
|
||||
"rax-view": {
|
||||
"optional": true
|
||||
},
|
||||
"react": {
|
||||
"optional": true
|
||||
}
|
||||
},
|
||||
"gitHead": "4b9d901add9452525135caae98ae5f78dd8da9ff"
|
||||
}
|
||||
2
addons/centered/preact.d.ts
vendored
2
addons/centered/preact.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
import centered from './dist/preact';
|
||||
export default centered;
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/preact');
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/rax');
|
||||
2
addons/centered/react.d.ts
vendored
2
addons/centered/react.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
import centered from './dist/react';
|
||||
export default centered;
|
||||
1
addons/centered/react.js
vendored
1
addons/centered/react.js
vendored
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/react');
|
||||
@ -1,70 +0,0 @@
|
||||
import { makeDecorator, StoryFn } from '@storybook/addons';
|
||||
import { IStory } from '../angular.d';
|
||||
import parameters from './parameters';
|
||||
import styles from './styles';
|
||||
|
||||
function getComponentSelector(component: any) {
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
return component.__annotations__[0].selector;
|
||||
}
|
||||
|
||||
function getTemplate(metadata: any) {
|
||||
let tpl = '';
|
||||
if (metadata.component) {
|
||||
const selector = getComponentSelector(metadata.component);
|
||||
tpl = `<${selector}></${selector}>`;
|
||||
}
|
||||
|
||||
if (metadata.template) {
|
||||
tpl = metadata.template;
|
||||
}
|
||||
|
||||
return `
|
||||
<div [ngStyle]="styles.style">
|
||||
<div [ngStyle]="styles.innerStyle">
|
||||
${tpl}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function getModuleMetadata(metadata: any) {
|
||||
const { moduleMetadata, component } = metadata;
|
||||
|
||||
if (component && !moduleMetadata) {
|
||||
return {
|
||||
declarations: [metadata.component],
|
||||
};
|
||||
}
|
||||
|
||||
if (component && moduleMetadata) {
|
||||
return {
|
||||
...moduleMetadata,
|
||||
declarations: [...moduleMetadata.declarations, metadata.component],
|
||||
};
|
||||
}
|
||||
|
||||
return moduleMetadata;
|
||||
}
|
||||
|
||||
function centered(metadataFn: StoryFn<IStory>) {
|
||||
const metadata = metadataFn();
|
||||
|
||||
return {
|
||||
...metadata,
|
||||
template: getTemplate(metadata),
|
||||
moduleMetadata: getModuleMetadata(metadata),
|
||||
props: {
|
||||
...metadata.props,
|
||||
styles,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default makeDecorator({
|
||||
...parameters,
|
||||
wrapper: (getStory) => centered(getStory as StoryFn),
|
||||
});
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
<div class="svelte-centered-wrapper" style="{style}">
|
||||
<div class="svelte-centered-container" style="{innerStyle}">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
export let style = '';
|
||||
export let innerStyle = '';
|
||||
</script>
|
||||
@ -1,36 +0,0 @@
|
||||
import { document } from 'global';
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
import styles from './styles';
|
||||
|
||||
function centered(storyFn: () => { template: any; context: any }) {
|
||||
const { template, context } = storyFn();
|
||||
|
||||
const element = document.createElement('div');
|
||||
Object.assign(element.style, styles.style);
|
||||
|
||||
const innerElement = document.createElement('div');
|
||||
Object.assign(innerElement.style, styles.innerStyle);
|
||||
|
||||
element.appendChild(innerElement);
|
||||
|
||||
// the inner element should append the parent
|
||||
innerElement.appendTo = function appendTo(el: any) {
|
||||
el.appendChild(element);
|
||||
};
|
||||
|
||||
return {
|
||||
template,
|
||||
context,
|
||||
element: innerElement,
|
||||
};
|
||||
}
|
||||
|
||||
export default makeDecorator({
|
||||
...parameters,
|
||||
wrapper: (getStory) => centered(getStory as any),
|
||||
});
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
import { document } from 'global';
|
||||
|
||||
/**
|
||||
* Not all frameworks support an object for the style attribute but we want all to
|
||||
* consume `styles.json`. Since `styles.json` uses standard style properties for keys,
|
||||
* we can just set them on an element and then get the string result of that element's
|
||||
* `style` attribute. This also means that invalid styles are filtered out.
|
||||
*
|
||||
* @param {Object} jsonStyles
|
||||
* @returns {string}
|
||||
* @see https://stackoverflow.com/questions/38533544/jsx-css-to-inline-styles
|
||||
*/
|
||||
export default function jsonToCss(jsonStyles: Partial<CSSStyleDeclaration>) {
|
||||
const frag = document.createElement('div') as HTMLDivElement;
|
||||
|
||||
Object.keys(jsonStyles).forEach((key) => {
|
||||
(frag.style as any)[key] = (jsonStyles as any)[key];
|
||||
});
|
||||
|
||||
return frag.getAttribute('style');
|
||||
}
|
||||
@ -1,57 +0,0 @@
|
||||
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';
|
||||
const WRAPPER_ID = 'sb-addon-centered-wrapper';
|
||||
|
||||
function getOrCreate(id: string, style: Partial<CSSStyleDeclaration>): HTMLDivElement {
|
||||
const elementOnDom = document.getElementById(id);
|
||||
|
||||
if (elementOnDom) {
|
||||
return elementOnDom;
|
||||
}
|
||||
|
||||
const element = document.createElement('div') as HTMLDivElement;
|
||||
element.setAttribute('id', id);
|
||||
Object.assign(element.style, style);
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
function getInnerDiv() {
|
||||
return getOrCreate(INNER_ID, styles.innerStyle);
|
||||
}
|
||||
|
||||
function getWrapperDiv() {
|
||||
return getOrCreate(WRAPPER_ID, styles.style);
|
||||
}
|
||||
|
||||
function centered(storyFn: () => any) {
|
||||
const inner = getInnerDiv();
|
||||
const wrapper = getWrapperDiv();
|
||||
wrapper.appendChild(inner);
|
||||
|
||||
const element = storyFn();
|
||||
|
||||
if (typeof element === 'string') {
|
||||
inner.innerHTML = element;
|
||||
} else if (element instanceof Node) {
|
||||
inner.innerHTML = '';
|
||||
inner.appendChild(element);
|
||||
} else {
|
||||
return element;
|
||||
}
|
||||
|
||||
return wrapper;
|
||||
}
|
||||
|
||||
export default makeDecorator({
|
||||
...parameters,
|
||||
wrapper: (getStory) => centered(getStory as any),
|
||||
});
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
/** @jsx m */
|
||||
import m, { ComponentTypes } from 'mithril';
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
import styles from './styles';
|
||||
|
||||
function centered(storyFn: () => ComponentTypes) {
|
||||
return {
|
||||
view: () => (
|
||||
<div style={styles.style}>
|
||||
<div style={styles.innerStyle}>{m(storyFn())}</div>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
}
|
||||
|
||||
export default makeDecorator({
|
||||
...parameters,
|
||||
wrapper: (getStory) => centered(getStory as any),
|
||||
});
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
const parameters = {
|
||||
name: 'centered',
|
||||
parameterName: 'centered',
|
||||
} as const;
|
||||
|
||||
export default parameters;
|
||||
@ -1,18 +0,0 @@
|
||||
/** @jsx h */
|
||||
import { Component, h } from 'preact';
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
import styles from './styles';
|
||||
|
||||
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),
|
||||
});
|
||||
@ -1,23 +0,0 @@
|
||||
/** @jsx createElement */
|
||||
import { createElement } from 'rax';
|
||||
import View from 'rax-view';
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
import styles from './styles';
|
||||
|
||||
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();
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
import { makeDecorator, StoryFn } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
import styles from './styles';
|
||||
|
||||
function centered(storyFn: () => ReactNode) {
|
||||
/* eslint-disable no-undef */
|
||||
if (window) {
|
||||
const params = new URL(window.location.href).search;
|
||||
const isInDocsView = params.includes('viewMode=docs');
|
||||
|
||||
if (isInDocsView) {
|
||||
return storyFn();
|
||||
}
|
||||
}
|
||||
/* eslint-enable no-undef */
|
||||
|
||||
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();
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
const styles = {
|
||||
style: {
|
||||
position: 'fixed',
|
||||
top: '0',
|
||||
left: '0',
|
||||
bottom: '0',
|
||||
right: '0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
overflow: 'auto',
|
||||
},
|
||||
innerStyle: {
|
||||
margin: 'auto',
|
||||
maxHeight: '100%', // Hack for centering correctly in IE11
|
||||
},
|
||||
} as const;
|
||||
|
||||
export default styles;
|
||||
@ -1,42 +0,0 @@
|
||||
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} */
|
||||
style: json2CSS(styles.style),
|
||||
/** @type {string} */
|
||||
innerStyle: json2CSS(styles.innerStyle),
|
||||
};
|
||||
|
||||
/**
|
||||
* This functionality works by passing the svelte story component into another
|
||||
* svelte component that has the single purpose of centering the story component
|
||||
* using a wrapper and container.
|
||||
*
|
||||
* We use the special element <svelte:component /> to achieve this.
|
||||
*
|
||||
* @see https://svelte.technology/guide#svelte-component
|
||||
*/
|
||||
function centered(storyFn: () => any) {
|
||||
const { Component: OriginalComponent, props, on } = storyFn();
|
||||
|
||||
return {
|
||||
Component: OriginalComponent,
|
||||
props,
|
||||
on,
|
||||
Wrapper: Centered,
|
||||
WrapperData: centeredStyles,
|
||||
};
|
||||
}
|
||||
|
||||
export default makeDecorator({
|
||||
...parameters,
|
||||
wrapper: (getStory) => centered(getStory as any),
|
||||
});
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
2
addons/centered/src/typings.d.ts
vendored
2
addons/centered/src/typings.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
declare module 'global';
|
||||
declare module '*.svelte';
|
||||
@ -1,27 +0,0 @@
|
||||
import { makeDecorator } from '@storybook/addons';
|
||||
import parameters from './parameters';
|
||||
import styles from './styles';
|
||||
|
||||
function centered() {
|
||||
return {
|
||||
template: `
|
||||
<div :style="style">
|
||||
<div :style="innerStyle">
|
||||
<story/>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return styles;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default makeDecorator({
|
||||
...parameters,
|
||||
wrapper: centered,
|
||||
});
|
||||
|
||||
if (module && module.hot && module.hot.decline) {
|
||||
module.hot.decline();
|
||||
}
|
||||
2
addons/centered/svelte.d.ts
vendored
2
addons/centered/svelte.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
import centered from './dist/svelte';
|
||||
export default centered;
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/svelte');
|
||||
@ -1,13 +0,0 @@
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "./src",
|
||||
"types": ["webpack-env"]
|
||||
},
|
||||
"include": [
|
||||
"src/**/*"
|
||||
],
|
||||
"exclude": [
|
||||
"src/__tests__/**/*"
|
||||
]
|
||||
}
|
||||
2
addons/centered/vue.d.ts
vendored
2
addons/centered/vue.d.ts
vendored
@ -1,2 +0,0 @@
|
||||
import centered from './dist/vue';
|
||||
export default centered;
|
||||
@ -1 +0,0 @@
|
||||
module.exports = require('./dist/vue');
|
||||
Loading…
x
Reference in New Issue
Block a user