diff --git a/addons/centered/README.md b/addons/centered/README.md deleted file mode 100644 index 8eddd66bbe1..00000000000 --- a/addons/centered/README.md +++ /dev/null @@ -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', () => ()) - .add('with some props', () => ()); -``` - -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: '' - })) - .add('with some props', () => ({ - components: { MyComponent }, - template: '' - })); -``` - -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', () => ()) - .add('with some props', () => ()); -``` - -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: () => - })) - .add('with some props', () => ({ - view: () => - })); -``` - -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: ` - `, - 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', () => , { - centered: { disable: true }, - }); -``` diff --git a/addons/centered/angular.d.ts b/addons/centered/angular.d.ts deleted file mode 100644 index 9864b1d2b81..00000000000 --- a/addons/centered/angular.d.ts +++ /dev/null @@ -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; -} diff --git a/addons/centered/angular.js b/addons/centered/angular.js deleted file mode 100644 index 186e1ad93b2..00000000000 --- a/addons/centered/angular.js +++ /dev/null @@ -1,3 +0,0 @@ -import fromCentered from './dist/angular'; - -export const centered = fromCentered; diff --git a/addons/centered/ember.d.ts b/addons/centered/ember.d.ts deleted file mode 100644 index 21aa4cc429d..00000000000 --- a/addons/centered/ember.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -import centered from './dist/ember'; -export default centered; diff --git a/addons/centered/ember.js b/addons/centered/ember.js deleted file mode 100644 index 84275eb46b4..00000000000 --- a/addons/centered/ember.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/ember'); diff --git a/addons/centered/html.d.ts b/addons/centered/html.d.ts deleted file mode 100644 index d77b06e2f51..00000000000 --- a/addons/centered/html.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -import centered from './dist/html'; -export default centered; diff --git a/addons/centered/html.js b/addons/centered/html.js deleted file mode 100644 index 4f7edc6bedb..00000000000 --- a/addons/centered/html.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/html'); diff --git a/addons/centered/mithril.d.ts b/addons/centered/mithril.d.ts deleted file mode 100644 index 1b002518919..00000000000 --- a/addons/centered/mithril.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -import centered from './dist/mithril'; -export default centered; diff --git a/addons/centered/mithril.js b/addons/centered/mithril.js deleted file mode 100644 index 884a541476e..00000000000 --- a/addons/centered/mithril.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/mithril'); diff --git a/addons/centered/package.json b/addons/centered/package.json deleted file mode 100644 index 97051eaacf0..00000000000 --- a/addons/centered/package.json +++ /dev/null @@ -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 ", - "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" -} diff --git a/addons/centered/preact.d.ts b/addons/centered/preact.d.ts deleted file mode 100644 index cae1370b300..00000000000 --- a/addons/centered/preact.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -import centered from './dist/preact'; -export default centered; diff --git a/addons/centered/preact.js b/addons/centered/preact.js deleted file mode 100644 index 818efe1776d..00000000000 --- a/addons/centered/preact.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preact'); diff --git a/addons/centered/rax.js b/addons/centered/rax.js deleted file mode 100644 index 232893d57a2..00000000000 --- a/addons/centered/rax.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/rax'); diff --git a/addons/centered/react.d.ts b/addons/centered/react.d.ts deleted file mode 100644 index e41e86729f2..00000000000 --- a/addons/centered/react.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -import centered from './dist/react'; -export default centered; diff --git a/addons/centered/react.js b/addons/centered/react.js deleted file mode 100644 index 70e1111ae07..00000000000 --- a/addons/centered/react.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/react'); diff --git a/addons/centered/src/angular.ts b/addons/centered/src/angular.ts deleted file mode 100644 index 860870c0a11..00000000000 --- a/addons/centered/src/angular.ts +++ /dev/null @@ -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}>`; - } - - if (metadata.template) { - tpl = metadata.template; - } - - return ` -
-
- ${tpl} -
-
`; -} - -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) { - 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(); -} diff --git a/addons/centered/src/components/Centered.svelte b/addons/centered/src/components/Centered.svelte deleted file mode 100644 index 287c83ecff3..00000000000 --- a/addons/centered/src/components/Centered.svelte +++ /dev/null @@ -1,10 +0,0 @@ -
-
- -
-
- - diff --git a/addons/centered/src/ember.ts b/addons/centered/src/ember.ts deleted file mode 100644 index f6d32c20edb..00000000000 --- a/addons/centered/src/ember.ts +++ /dev/null @@ -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(); -} diff --git a/addons/centered/src/helpers/json2CSS.ts b/addons/centered/src/helpers/json2CSS.ts deleted file mode 100644 index 9cf096b5285..00000000000 --- a/addons/centered/src/helpers/json2CSS.ts +++ /dev/null @@ -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) { - 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'); -} diff --git a/addons/centered/src/html.ts b/addons/centered/src/html.ts deleted file mode 100644 index 541a4ee0f03..00000000000 --- a/addons/centered/src/html.ts +++ /dev/null @@ -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): 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(); -} diff --git a/addons/centered/src/index.ts b/addons/centered/src/index.ts deleted file mode 100644 index b9ba57b9181..00000000000 --- a/addons/centered/src/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} diff --git a/addons/centered/src/mithril.tsx b/addons/centered/src/mithril.tsx deleted file mode 100644 index 5e20f840032..00000000000 --- a/addons/centered/src/mithril.tsx +++ /dev/null @@ -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: () => ( -
-
{m(storyFn())}
-
- ), - }; -} - -export default makeDecorator({ - ...parameters, - wrapper: (getStory) => centered(getStory as any), -}); - -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} diff --git a/addons/centered/src/parameters.ts b/addons/centered/src/parameters.ts deleted file mode 100644 index 8baf4066664..00000000000 --- a/addons/centered/src/parameters.ts +++ /dev/null @@ -1,6 +0,0 @@ -const parameters = { - name: 'centered', - parameterName: 'centered', -} as const; - -export default parameters; diff --git a/addons/centered/src/preact.tsx b/addons/centered/src/preact.tsx deleted file mode 100644 index 9fc00643808..00000000000 --- a/addons/centered/src/preact.tsx +++ /dev/null @@ -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 ( -
-
{storyFn()}
-
- ); -} - -export default makeDecorator({ - ...parameters, - wrapper: (getStory) => centered(getStory as any), -}); diff --git a/addons/centered/src/rax.js b/addons/centered/src/rax.js deleted file mode 100644 index a7b4a305518..00000000000 --- a/addons/centered/src/rax.js +++ /dev/null @@ -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 ( - - {storyFn()} - - ); -} - -export default makeDecorator({ - ...parameters, - wrapper: centered, -}); - -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} diff --git a/addons/centered/src/react.tsx b/addons/centered/src/react.tsx deleted file mode 100644 index 687b026b719..00000000000 --- a/addons/centered/src/react.tsx +++ /dev/null @@ -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 ( -
-
{storyFn()}
-
- ); -} - -export default makeDecorator({ - ...parameters, - wrapper: (getStory) => centered(getStory as StoryFn), -}); - -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} diff --git a/addons/centered/src/styles.ts b/addons/centered/src/styles.ts deleted file mode 100644 index 9a8dcf291da..00000000000 --- a/addons/centered/src/styles.ts +++ /dev/null @@ -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; diff --git a/addons/centered/src/svelte.ts b/addons/centered/src/svelte.ts deleted file mode 100644 index 07cb884f8fa..00000000000 --- a/addons/centered/src/svelte.ts +++ /dev/null @@ -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 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(); -} diff --git a/addons/centered/src/typings.d.ts b/addons/centered/src/typings.d.ts deleted file mode 100644 index ad116294c0f..00000000000 --- a/addons/centered/src/typings.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -declare module 'global'; -declare module '*.svelte'; diff --git a/addons/centered/src/vue.ts b/addons/centered/src/vue.ts deleted file mode 100644 index 180a270ca7a..00000000000 --- a/addons/centered/src/vue.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { makeDecorator } from '@storybook/addons'; -import parameters from './parameters'; -import styles from './styles'; - -function centered() { - return { - template: ` -
-
- -
-
- `, - data() { - return styles; - }, - }; -} - -export default makeDecorator({ - ...parameters, - wrapper: centered, -}); - -if (module && module.hot && module.hot.decline) { - module.hot.decline(); -} diff --git a/addons/centered/svelte.d.ts b/addons/centered/svelte.d.ts deleted file mode 100644 index d87cbef37cb..00000000000 --- a/addons/centered/svelte.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -import centered from './dist/svelte'; -export default centered; diff --git a/addons/centered/svelte.js b/addons/centered/svelte.js deleted file mode 100644 index a7f426b42da..00000000000 --- a/addons/centered/svelte.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/svelte'); diff --git a/addons/centered/tsconfig.json b/addons/centered/tsconfig.json deleted file mode 100644 index 8876bb6737a..00000000000 --- a/addons/centered/tsconfig.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": { - "rootDir": "./src", - "types": ["webpack-env"] - }, - "include": [ - "src/**/*" - ], - "exclude": [ - "src/__tests__/**/*" - ] -} diff --git a/addons/centered/vue.d.ts b/addons/centered/vue.d.ts deleted file mode 100644 index a54367f70b4..00000000000 --- a/addons/centered/vue.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -import centered from './dist/vue'; -export default centered; diff --git a/addons/centered/vue.js b/addons/centered/vue.js deleted file mode 100644 index 42311b17563..00000000000 --- a/addons/centered/vue.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/vue');