From fdbd4a529de79d3da8842c94661e01db4ef9e6a0 Mon Sep 17 00:00:00 2001 From: atanasster Date: Fri, 30 Aug 2019 19:50:25 -0400 Subject: [PATCH 1/6] initial checkin --- .github/CODEOWNERS | 1 + .github/autolabeler.yml | 1 + README.md | 1 + addons/edit-page/README.md | 84 +++++++++++++++++++ addons/edit-page/package.json | 39 +++++++++ addons/edit-page/register.js | 1 + .../edit-page/src/components/PreviewPanel.tsx | 77 +++++++++++++++++ addons/edit-page/src/index.tsx | 29 +++++++ addons/edit-page/src/register.tsx | 1 + addons/edit-page/src/types.ts | 22 +++++ addons/edit-page/tsconfig.json | 13 +++ docs/src/new-components/basics/shared/site.js | 1 + examples/official-storybook/addons.js | 9 +- examples/official-storybook/package.json | 1 + .../stories/addon-a11y/base-button.stories.js | 4 + lib/addons/src/types.ts | 2 + lib/ui/src/components/preview/preview.js | 17 +++- 17 files changed, 299 insertions(+), 4 deletions(-) create mode 100644 addons/edit-page/README.md create mode 100644 addons/edit-page/package.json create mode 100644 addons/edit-page/register.js create mode 100644 addons/edit-page/src/components/PreviewPanel.tsx create mode 100644 addons/edit-page/src/index.tsx create mode 100644 addons/edit-page/src/register.tsx create mode 100644 addons/edit-page/src/types.ts create mode 100644 addons/edit-page/tsconfig.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index c23f1075713..6bcddd666d1 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -5,6 +5,7 @@ /addons/actions/ @rhalff /addons/backgrounds/ @ndelangen /addons/centered/ @kazupon +/addons/edit-page/ @atanasster /addons/events/ @z4o4z @ndelangen /addons/graphql/ @mnmtanish /addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael diff --git a/.github/autolabeler.yml b/.github/autolabeler.yml index 4a4e5cf9721..b648a169e5e 100644 --- a/.github/autolabeler.yml +++ b/.github/autolabeler.yml @@ -2,6 +2,7 @@ 'addon: actions': ["addons/actions/**"] 'addon: backgrounds': ["addons/backgrounds/**"] 'addon: centered': ["addons/centered/**"] +'addon: edit-page': ["addons/edit-page/**"] 'addon: events ': ["addons/events/**"] 'addon: graphql ': ["addons/graphql/**"] 'addon: info': ["addons/info/**"] diff --git a/README.md b/README.md index f80eb15121a..61f8d0989ce 100644 --- a/README.md +++ b/README.md @@ -139,6 +139,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl | [contexts](addons/contexts/) | Interactively inject component contexts for stories in the Storybook UI | | [cssresources](addons/cssresources/) | Dynamically add/remove css resources to the component iframe | | [design assets](addons/design-assets/) | View images, videos, weblinks alongside your story | +| [edit-page](addons/edit-page/) | Can add 'edit this page' links to your preview and docs pages | | [events](addons/events/) | Interactively fire events to components that respond to EventEmitter | | [graphql](addons/graphql/) | Query a GraphQL server within Storybook stories | | [google-analytics](addons/google-analytics) | Reports google analytics on stories | diff --git a/addons/edit-page/README.md b/addons/edit-page/README.md new file mode 100644 index 00000000000..b6fbe55902e --- /dev/null +++ b/addons/edit-page/README.md @@ -0,0 +1,84 @@ +# Storybook Addon Edit Page + +Storybook Edit Page Addon can add 'edit this page' links in [Storybook](https://storybook.js.org). + +[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md) + +![React Storybook Screenshot](https://storybook.js.org/img/addon-backgrounds.gif) + +## Installation + +```sh +npm i -D @storybook/addon-edit-page +``` + +## Configuration + +Then create a file called `addons.js` in your storybook config. + +Add following content to it (the configuration settings are optional): + +```js +import { editPage } from '@storybook/addon-edit-page'; + +const gitPageResolver = ({ fileName } ) => { + return fileName; +} +editPage({ + fileNameResolve: gitPageResolver, + editPageLabel: 'edit this page...', + render: ({ filePath, shortName, ...rest }) => ( +
+ {filePath && ( +
+

{shortName}

+ + here + +
+ )} +
+ ), +}); + +``` + +## Usage + +You can add the source file name to the stories metadata in CSF: + +```js +export default { + title: 'Stories|With edit', + component: Link, + parameters: { + edit: { + fileName: 'https://github.com/storybookjs/design-system/blob/master/src/components/Link.js' + }, + } +}; +``` + +Or to mdx files: +```md + + +``` +## Options + +**fileNameResolve**: function to resolve the file name, by default returns the supplied fileName
+**editPageLabel**: label for the Edit this page link - by default `Edit this page`
+**render**: function to custom render the `Edit this page` panel
+```js +parameters : { + filePath: string, //full file path + shortName: string, //short name of the story file (component name) + parameters: any, //parameters of the current story +} +``` diff --git a/addons/edit-page/package.json b/addons/edit-page/package.json new file mode 100644 index 00000000000..c12a213cf26 --- /dev/null +++ b/addons/edit-page/package.json @@ -0,0 +1,39 @@ +{ + "name": "@storybook/addon-edit-page", + "version": "5.2.0-rc.0", + "description": "A storybook addon that can insert 'edit this page' links", + "keywords": [ + "addon", + "edit", + "react", + "storybook" + ], + "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/edit-page", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "https://github.com/storybookjs/storybook.git", + "directory": "addons/edit-page" + }, + "license": "MIT", + "author": "@atanasster", + "main": "dist/index.js", + "types": "dist/index.d.ts", + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@storybook/addons": "5.2.0-rc.0", + "@storybook/api": "5.2.0-rc.0", + "@storybook/components": "5.2.0-rc.0", + "@storybook/theming": "5.2.0-rc.0", + "core-js": "^3.0.1", + "memoizerific": "^1.11.3", + "react": "^16.8.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/addons/edit-page/register.js b/addons/edit-page/register.js new file mode 100644 index 00000000000..cc38cb06f1f --- /dev/null +++ b/addons/edit-page/register.js @@ -0,0 +1 @@ +require('./dist/register'); diff --git a/addons/edit-page/src/components/PreviewPanel.tsx b/addons/edit-page/src/components/PreviewPanel.tsx new file mode 100644 index 00000000000..e2b85183cd4 --- /dev/null +++ b/addons/edit-page/src/components/PreviewPanel.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import { Combo, Consumer } from '@storybook/api'; +import { styled } from '@storybook/theming'; +import { Link } from '@storybook/components'; +import { H3 } from '@storybook/components/html'; +import { EditStoriesProps } from '../types'; + +const StyledContainer = styled.div<{}>(({ theme }) => ({ + padding: '10px', + background: theme.background.bar, + borderBottom: `1px solid ${theme.color.border}`, +})); + +interface PanelProps { + filePath?: string; + shortName?: string; + config?: EditStoriesProps; +} + +const EditInject = ({ filePath, shortName, config }: PanelProps) => ( + + {filePath && ( + +

{shortName}

+ + {config.editPageLabel} + + + )} + +); + +const mapper = ({ state }: Combo): { story: any } => { + const story = state.storiesHash[state.storyId]; + return { story }; +}; + +export const PreviewPanel = (props: EditStoriesProps) => { + return ( + + + {({ story }: ReturnType) => { + if ( + story && + story.parameters && + story.parameters.edit && + story.parameters.edit.fileName + ) { + const rootSplit = story.kind.split(story.parameters.options.hierarchyRootSeparator); + const path = rootSplit[rootSplit.length - 1]; + const pathSplit = path.split(story.parameters.options.hierarchySeparator); + const shortName = pathSplit[pathSplit.length - 1]; + const filePath = props.fileNameResolve({ + id: story.id, + kind: story.kind, + name: story.name, + displayName: story.parameters.displayName, + fileName: story.parameters.edit.fileName, + shortName, + }); + if (filePath) { + if (typeof props.render === 'function') { + return props.render({ + filePath, + shortName, + parameters: story.parameters, + }); + } + return ; + } + } + return null; + }} + + + ); +}; diff --git a/addons/edit-page/src/index.tsx b/addons/edit-page/src/index.tsx new file mode 100644 index 00000000000..32832bddb2c --- /dev/null +++ b/addons/edit-page/src/index.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { addons, types } from '@storybook/addons'; +import { fileNameResolveType, EditStoriesProps } from './types'; +import { PreviewPanel } from './components/PreviewPanel'; + +const ADDON_ID = 'EDIT_PAGE_SOURCES'; + +const defaultFileNameResolve: fileNameResolveType = info => { + return info.fileName; +}; + +const defaultCMSProps: EditStoriesProps = { + fileNameResolve: defaultFileNameResolve, + editPageLabel: 'Edit this page', +}; + +export const editPage = (config: EditStoriesProps) => { + addons.register(ADDON_ID, () => { + addons.add(ADDON_ID, { + title: 'Edit source', + type: types.IFRAME_START, + render: () => , + }); + }); +}; + +if (module && (module as any).hot && (module as any).hot.decline) { + (module as any).hot.decline(); +} diff --git a/addons/edit-page/src/register.tsx b/addons/edit-page/src/register.tsx new file mode 100644 index 00000000000..ea465c2a34a --- /dev/null +++ b/addons/edit-page/src/register.tsx @@ -0,0 +1 @@ +export * from './index'; diff --git a/addons/edit-page/src/types.ts b/addons/edit-page/src/types.ts new file mode 100644 index 00000000000..26d43911b40 --- /dev/null +++ b/addons/edit-page/src/types.ts @@ -0,0 +1,22 @@ +export interface IFileInfo { + id?: string; + kind?: string; + name?: string; + displayName?: string; + fileName?: string; + shortName?: string; +} + +export type fileNameResolveType = (info: IFileInfo) => string; + +interface EditPageProps { + filePath?: string; + shortName?: string; + parameters?: any; +} + +export interface EditStoriesProps { + fileNameResolve?: fileNameResolveType; + editPageLabel?: string; + render?: (config: EditPageProps) => JSX.Element; +} diff --git a/addons/edit-page/tsconfig.json b/addons/edit-page/tsconfig.json new file mode 100644 index 00000000000..8876bb6737a --- /dev/null +++ b/addons/edit-page/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": ["webpack-env"] + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/__tests__/**/*" + ] +} diff --git a/docs/src/new-components/basics/shared/site.js b/docs/src/new-components/basics/shared/site.js index 3ab939a7cc3..fab3da2f458 100644 --- a/docs/src/new-components/basics/shared/site.js +++ b/docs/src/new-components/basics/shared/site.js @@ -93,5 +93,6 @@ export const url = { accessibility: `${gitHubOrg}/storybook/tree/master/addons/a11y`, console: `${gitHubOrg}/storybook-addon-console`, links: `${gitHubOrg}/storybook/tree/master/addons/links`, + 'edit-page': `${gitHubOrg}/storybook/tree/master/addons/edit-page`, }, }; diff --git a/examples/official-storybook/addons.js b/examples/official-storybook/addons.js index 00d972b2185..5c36303a45e 100644 --- a/examples/official-storybook/addons.js +++ b/examples/official-storybook/addons.js @@ -14,7 +14,14 @@ import '@storybook/addon-jest/register'; import '@storybook/addon-viewport/register'; import '@storybook/addon-graphql/register'; import '@storybook/addon-contexts/register'; - +import { editPage } from '@storybook/addon-edit-page'; import addHeadWarning from './head-warning'; +const gitPageResolver = ({ fileName }) => { + return fileName; +}; +editPage({ + fileNameResolve: gitPageResolver, +}); + addHeadWarning('manager-head-not-loaded', 'Manager head not loaded'); diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 80b3fb13a6e..040d81c303a 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -23,6 +23,7 @@ "@storybook/addon-cssresources": "5.2.0-rc.0", "@storybook/addon-design-assets": "5.2.0-rc.0", "@storybook/addon-docs": "5.2.0-rc.0", + "@storybook/addon-edit-page": "5.2.0-rc.0", "@storybook/addon-events": "5.2.0-rc.0", "@storybook/addon-graphql": "5.2.0-rc.0", "@storybook/addon-info": "5.2.0-rc.0", diff --git a/examples/official-storybook/stories/addon-a11y/base-button.stories.js b/examples/official-storybook/stories/addon-a11y/base-button.stories.js index a882bf92a4e..92bede8d780 100644 --- a/examples/official-storybook/stories/addon-a11y/base-button.stories.js +++ b/examples/official-storybook/stories/addon-a11y/base-button.stories.js @@ -9,6 +9,10 @@ export default { component: BaseButton, parameters: { options: { selectedPanel: 'storybook/a11y/panel' }, + edit: { + fileName: + 'https://github.com/storybookjs/storybook/blob/next/lib/components/src/Button/Button.tsx', + }, }, }; diff --git a/lib/addons/src/types.ts b/lib/addons/src/types.ts index 35b7b2ba698..a780b562075 100644 --- a/lib/addons/src/types.ts +++ b/lib/addons/src/types.ts @@ -7,6 +7,8 @@ export enum types { TOOL = 'tool', PREVIEW = 'preview', NOTES_ELEMENT = 'notes-element', + IFRAME_START = 'iframe_start', + IFRAME_END = 'iframe_end', } export type Types = types | string; diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js index dbbf46926d7..deaa4d2cdf5 100644 --- a/lib/ui/src/components/preview/preview.js +++ b/lib/ui/src/components/preview/preview.js @@ -53,13 +53,21 @@ const ActualPreview = ({ scale, queryParams, customCanvas, + iframeStart, + iframeEnd, }) => { const data = [storyId, viewMode, id, baseUrl, scale, queryParams]; const base = customCanvas ? customCanvas(...data) : renderIframe(...data); - + const iFrame = ( + + {iframeStart.map(({ render }) => render())} + {base} + {iframeEnd.map(({ render }) => render())} + + ); return wrappers.reduceRight( (acc, wrapper, index) => wrapper.render({ index, children: acc, id, storyId, active }), - base + iFrame ); }; @@ -233,7 +241,8 @@ class Preview extends Component { } = this.props; const toolbarHeight = options.isToolshown ? 40 : 0; - + const iframeStart = getElementList(getElements, types.IFRAME_START, []); + const iframeEnd = getElementList(getElements, types.IFRAME_END, []); const wrappers = getElementList(getElements, types.PREVIEW, defaultWrappers); const panels = getElementList(getElements, types.TAB, [ { @@ -252,6 +261,8 @@ class Preview extends Component { queryParams, scale: value, customCanvas, + iframeStart, + iframeEnd, }; return ; From e548e791d879307868b42a4c5ebccf3ba27ddbaa Mon Sep 17 00:00:00 2001 From: atanasster Date: Fri, 30 Aug 2019 20:09:01 -0400 Subject: [PATCH 2/6] empty commit From 136f5b0c94464c782501e8eec656b5a60c35582a Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 29 Oct 2019 06:17:16 +0200 Subject: [PATCH 3/6] removed edit-page addon to be external addon --- .github/CODEOWNERS | 1 - .github/autolabeler.yml | 1 - README.md | 1 - addons/edit-page/README.md | 84 ------------------- addons/edit-page/package.json | 39 --------- addons/edit-page/register.js | 1 - .../edit-page/src/components/PreviewPanel.tsx | 77 ----------------- addons/edit-page/src/index.tsx | 29 ------- addons/edit-page/src/register.tsx | 1 - addons/edit-page/src/types.ts | 22 ----- addons/edit-page/tsconfig.json | 13 --- docs/src/new-components/basics/shared/site.js | 1 - examples/official-storybook/addons.js | 8 -- examples/official-storybook/package.json | 1 - .../stories/addon-a11y/base-button.stories.js | 4 - 15 files changed, 283 deletions(-) delete mode 100644 addons/edit-page/README.md delete mode 100644 addons/edit-page/package.json delete mode 100644 addons/edit-page/register.js delete mode 100644 addons/edit-page/src/components/PreviewPanel.tsx delete mode 100644 addons/edit-page/src/index.tsx delete mode 100644 addons/edit-page/src/register.tsx delete mode 100644 addons/edit-page/src/types.ts delete mode 100644 addons/edit-page/tsconfig.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 6bcddd666d1..c23f1075713 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -5,7 +5,6 @@ /addons/actions/ @rhalff /addons/backgrounds/ @ndelangen /addons/centered/ @kazupon -/addons/edit-page/ @atanasster /addons/events/ @z4o4z @ndelangen /addons/graphql/ @mnmtanish /addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael diff --git a/.github/autolabeler.yml b/.github/autolabeler.yml index b648a169e5e..4a4e5cf9721 100644 --- a/.github/autolabeler.yml +++ b/.github/autolabeler.yml @@ -2,7 +2,6 @@ 'addon: actions': ["addons/actions/**"] 'addon: backgrounds': ["addons/backgrounds/**"] 'addon: centered': ["addons/centered/**"] -'addon: edit-page': ["addons/edit-page/**"] 'addon: events ': ["addons/events/**"] 'addon: graphql ': ["addons/graphql/**"] 'addon: info': ["addons/info/**"] diff --git a/README.md b/README.md index 61f8d0989ce..f80eb15121a 100644 --- a/README.md +++ b/README.md @@ -139,7 +139,6 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl | [contexts](addons/contexts/) | Interactively inject component contexts for stories in the Storybook UI | | [cssresources](addons/cssresources/) | Dynamically add/remove css resources to the component iframe | | [design assets](addons/design-assets/) | View images, videos, weblinks alongside your story | -| [edit-page](addons/edit-page/) | Can add 'edit this page' links to your preview and docs pages | | [events](addons/events/) | Interactively fire events to components that respond to EventEmitter | | [graphql](addons/graphql/) | Query a GraphQL server within Storybook stories | | [google-analytics](addons/google-analytics) | Reports google analytics on stories | diff --git a/addons/edit-page/README.md b/addons/edit-page/README.md deleted file mode 100644 index b6fbe55902e..00000000000 --- a/addons/edit-page/README.md +++ /dev/null @@ -1,84 +0,0 @@ -# Storybook Addon Edit Page - -Storybook Edit Page Addon can add 'edit this page' links in [Storybook](https://storybook.js.org). - -[Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md) - -![React Storybook Screenshot](https://storybook.js.org/img/addon-backgrounds.gif) - -## Installation - -```sh -npm i -D @storybook/addon-edit-page -``` - -## Configuration - -Then create a file called `addons.js` in your storybook config. - -Add following content to it (the configuration settings are optional): - -```js -import { editPage } from '@storybook/addon-edit-page'; - -const gitPageResolver = ({ fileName } ) => { - return fileName; -} -editPage({ - fileNameResolve: gitPageResolver, - editPageLabel: 'edit this page...', - render: ({ filePath, shortName, ...rest }) => ( -
- {filePath && ( -
-

{shortName}

- - here - -
- )} -
- ), -}); - -``` - -## Usage - -You can add the source file name to the stories metadata in CSF: - -```js -export default { - title: 'Stories|With edit', - component: Link, - parameters: { - edit: { - fileName: 'https://github.com/storybookjs/design-system/blob/master/src/components/Link.js' - }, - } -}; -``` - -Or to mdx files: -```md - - -``` -## Options - -**fileNameResolve**: function to resolve the file name, by default returns the supplied fileName
-**editPageLabel**: label for the Edit this page link - by default `Edit this page`
-**render**: function to custom render the `Edit this page` panel
-```js -parameters : { - filePath: string, //full file path - shortName: string, //short name of the story file (component name) - parameters: any, //parameters of the current story -} -``` diff --git a/addons/edit-page/package.json b/addons/edit-page/package.json deleted file mode 100644 index c12a213cf26..00000000000 --- a/addons/edit-page/package.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "name": "@storybook/addon-edit-page", - "version": "5.2.0-rc.0", - "description": "A storybook addon that can insert 'edit this page' links", - "keywords": [ - "addon", - "edit", - "react", - "storybook" - ], - "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/edit-page", - "bugs": { - "url": "https://github.com/storybookjs/storybook/issues" - }, - "repository": { - "type": "git", - "url": "https://github.com/storybookjs/storybook.git", - "directory": "addons/edit-page" - }, - "license": "MIT", - "author": "@atanasster", - "main": "dist/index.js", - "types": "dist/index.d.ts", - "scripts": { - "prepare": "node ../../scripts/prepare.js" - }, - "dependencies": { - "@storybook/addons": "5.2.0-rc.0", - "@storybook/api": "5.2.0-rc.0", - "@storybook/components": "5.2.0-rc.0", - "@storybook/theming": "5.2.0-rc.0", - "core-js": "^3.0.1", - "memoizerific": "^1.11.3", - "react": "^16.8.3" - }, - "publishConfig": { - "access": "public" - } -} diff --git a/addons/edit-page/register.js b/addons/edit-page/register.js deleted file mode 100644 index cc38cb06f1f..00000000000 --- a/addons/edit-page/register.js +++ /dev/null @@ -1 +0,0 @@ -require('./dist/register'); diff --git a/addons/edit-page/src/components/PreviewPanel.tsx b/addons/edit-page/src/components/PreviewPanel.tsx deleted file mode 100644 index e2b85183cd4..00000000000 --- a/addons/edit-page/src/components/PreviewPanel.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from 'react'; -import { Combo, Consumer } from '@storybook/api'; -import { styled } from '@storybook/theming'; -import { Link } from '@storybook/components'; -import { H3 } from '@storybook/components/html'; -import { EditStoriesProps } from '../types'; - -const StyledContainer = styled.div<{}>(({ theme }) => ({ - padding: '10px', - background: theme.background.bar, - borderBottom: `1px solid ${theme.color.border}`, -})); - -interface PanelProps { - filePath?: string; - shortName?: string; - config?: EditStoriesProps; -} - -const EditInject = ({ filePath, shortName, config }: PanelProps) => ( - - {filePath && ( - -

{shortName}

- - {config.editPageLabel} - - - )} - -); - -const mapper = ({ state }: Combo): { story: any } => { - const story = state.storiesHash[state.storyId]; - return { story }; -}; - -export const PreviewPanel = (props: EditStoriesProps) => { - return ( - - - {({ story }: ReturnType) => { - if ( - story && - story.parameters && - story.parameters.edit && - story.parameters.edit.fileName - ) { - const rootSplit = story.kind.split(story.parameters.options.hierarchyRootSeparator); - const path = rootSplit[rootSplit.length - 1]; - const pathSplit = path.split(story.parameters.options.hierarchySeparator); - const shortName = pathSplit[pathSplit.length - 1]; - const filePath = props.fileNameResolve({ - id: story.id, - kind: story.kind, - name: story.name, - displayName: story.parameters.displayName, - fileName: story.parameters.edit.fileName, - shortName, - }); - if (filePath) { - if (typeof props.render === 'function') { - return props.render({ - filePath, - shortName, - parameters: story.parameters, - }); - } - return ; - } - } - return null; - }} - - - ); -}; diff --git a/addons/edit-page/src/index.tsx b/addons/edit-page/src/index.tsx deleted file mode 100644 index 32832bddb2c..00000000000 --- a/addons/edit-page/src/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { addons, types } from '@storybook/addons'; -import { fileNameResolveType, EditStoriesProps } from './types'; -import { PreviewPanel } from './components/PreviewPanel'; - -const ADDON_ID = 'EDIT_PAGE_SOURCES'; - -const defaultFileNameResolve: fileNameResolveType = info => { - return info.fileName; -}; - -const defaultCMSProps: EditStoriesProps = { - fileNameResolve: defaultFileNameResolve, - editPageLabel: 'Edit this page', -}; - -export const editPage = (config: EditStoriesProps) => { - addons.register(ADDON_ID, () => { - addons.add(ADDON_ID, { - title: 'Edit source', - type: types.IFRAME_START, - render: () => , - }); - }); -}; - -if (module && (module as any).hot && (module as any).hot.decline) { - (module as any).hot.decline(); -} diff --git a/addons/edit-page/src/register.tsx b/addons/edit-page/src/register.tsx deleted file mode 100644 index ea465c2a34a..00000000000 --- a/addons/edit-page/src/register.tsx +++ /dev/null @@ -1 +0,0 @@ -export * from './index'; diff --git a/addons/edit-page/src/types.ts b/addons/edit-page/src/types.ts deleted file mode 100644 index 26d43911b40..00000000000 --- a/addons/edit-page/src/types.ts +++ /dev/null @@ -1,22 +0,0 @@ -export interface IFileInfo { - id?: string; - kind?: string; - name?: string; - displayName?: string; - fileName?: string; - shortName?: string; -} - -export type fileNameResolveType = (info: IFileInfo) => string; - -interface EditPageProps { - filePath?: string; - shortName?: string; - parameters?: any; -} - -export interface EditStoriesProps { - fileNameResolve?: fileNameResolveType; - editPageLabel?: string; - render?: (config: EditPageProps) => JSX.Element; -} diff --git a/addons/edit-page/tsconfig.json b/addons/edit-page/tsconfig.json deleted file mode 100644 index 8876bb6737a..00000000000 --- a/addons/edit-page/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/docs/src/new-components/basics/shared/site.js b/docs/src/new-components/basics/shared/site.js index fab3da2f458..3ab939a7cc3 100644 --- a/docs/src/new-components/basics/shared/site.js +++ b/docs/src/new-components/basics/shared/site.js @@ -93,6 +93,5 @@ export const url = { accessibility: `${gitHubOrg}/storybook/tree/master/addons/a11y`, console: `${gitHubOrg}/storybook-addon-console`, links: `${gitHubOrg}/storybook/tree/master/addons/links`, - 'edit-page': `${gitHubOrg}/storybook/tree/master/addons/edit-page`, }, }; diff --git a/examples/official-storybook/addons.js b/examples/official-storybook/addons.js index 5c36303a45e..194bfd14865 100644 --- a/examples/official-storybook/addons.js +++ b/examples/official-storybook/addons.js @@ -14,14 +14,6 @@ import '@storybook/addon-jest/register'; import '@storybook/addon-viewport/register'; import '@storybook/addon-graphql/register'; import '@storybook/addon-contexts/register'; -import { editPage } from '@storybook/addon-edit-page'; import addHeadWarning from './head-warning'; -const gitPageResolver = ({ fileName }) => { - return fileName; -}; -editPage({ - fileNameResolve: gitPageResolver, -}); - addHeadWarning('manager-head-not-loaded', 'Manager head not loaded'); diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 040d81c303a..80b3fb13a6e 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -23,7 +23,6 @@ "@storybook/addon-cssresources": "5.2.0-rc.0", "@storybook/addon-design-assets": "5.2.0-rc.0", "@storybook/addon-docs": "5.2.0-rc.0", - "@storybook/addon-edit-page": "5.2.0-rc.0", "@storybook/addon-events": "5.2.0-rc.0", "@storybook/addon-graphql": "5.2.0-rc.0", "@storybook/addon-info": "5.2.0-rc.0", diff --git a/examples/official-storybook/stories/addon-a11y/base-button.stories.js b/examples/official-storybook/stories/addon-a11y/base-button.stories.js index 92bede8d780..a882bf92a4e 100644 --- a/examples/official-storybook/stories/addon-a11y/base-button.stories.js +++ b/examples/official-storybook/stories/addon-a11y/base-button.stories.js @@ -9,10 +9,6 @@ export default { component: BaseButton, parameters: { options: { selectedPanel: 'storybook/a11y/panel' }, - edit: { - fileName: - 'https://github.com/storybookjs/storybook/blob/next/lib/components/src/Button/Button.tsx', - }, }, }; From 40d522d644f3fffee33d029f9e19f87705316e49 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 29 Oct 2019 06:20:14 +0200 Subject: [PATCH 4/6] re-add empty line --- examples/official-storybook/addons.js | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/official-storybook/addons.js b/examples/official-storybook/addons.js index 194bfd14865..00d972b2185 100644 --- a/examples/official-storybook/addons.js +++ b/examples/official-storybook/addons.js @@ -14,6 +14,7 @@ import '@storybook/addon-jest/register'; import '@storybook/addon-viewport/register'; import '@storybook/addon-graphql/register'; import '@storybook/addon-contexts/register'; + import addHeadWarning from './head-warning'; addHeadWarning('manager-head-not-loaded', 'Manager head not loaded'); From 0e0a66370ba6ca4f071e0d7b5877816a509b89c9 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 29 Oct 2019 16:02:38 +0200 Subject: [PATCH 5/6] using types.PREVIEW wrapper to enclose the iframe --- dev-kits/addon-preview-wrapper/README.md | 8 +++++ dev-kits/addon-preview-wrapper/package.json | 33 +++++++++++++++++++ dev-kits/addon-preview-wrapper/register.js | 1 + .../addon-preview-wrapper/src/constants.ts | 1 + .../addon-preview-wrapper/src/register.tsx | 20 +++++++++++ dev-kits/addon-preview-wrapper/tsconfig.json | 13 ++++++++ examples/dev-kits/addons.js | 1 + examples/dev-kits/package.json | 1 + lib/ui/src/components/preview/preview.js | 15 +-------- 9 files changed, 79 insertions(+), 14 deletions(-) create mode 100644 dev-kits/addon-preview-wrapper/README.md create mode 100644 dev-kits/addon-preview-wrapper/package.json create mode 100644 dev-kits/addon-preview-wrapper/register.js create mode 100755 dev-kits/addon-preview-wrapper/src/constants.ts create mode 100644 dev-kits/addon-preview-wrapper/src/register.tsx create mode 100644 dev-kits/addon-preview-wrapper/tsconfig.json diff --git a/dev-kits/addon-preview-wrapper/README.md b/dev-kits/addon-preview-wrapper/README.md new file mode 100644 index 00000000000..212ad2a49ca --- /dev/null +++ b/dev-kits/addon-preview-wrapper/README.md @@ -0,0 +1,8 @@ +# example addon: preview wrapper + +This addon adds a wrapper around the preview iframe + +This can be useful to display some information around the story preview + +Uses include: +- showing a edit this page link to the story diff --git a/dev-kits/addon-preview-wrapper/package.json b/dev-kits/addon-preview-wrapper/package.json new file mode 100644 index 00000000000..cdeac404348 --- /dev/null +++ b/dev-kits/addon-preview-wrapper/package.json @@ -0,0 +1,33 @@ +{ + "name": "@storybook/addon-preview-wrapper", + "version": "5.2.0-rc.0", + "description": "preview wrapper addon for storybook", + "keywords": [ + "devkit", + "addon", + "storybook", + "types" + ], + "homepage": "https://github.com/storybookjs/storybook#readme", + "bugs": { + "url": "https://github.com/storybookjs/storybook/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/storybookjs/storybook.git", + "directory": "dev-kit/addon-preview-wrappe" + }, + "license": "MIT", + "main": "dist/index.js", + "types": "dist/index.d.ts", + "scripts": { + "prepare": "node ../../scripts/prepare.js" + }, + "dependencies": { + "@storybook/addons": "5.2.0-rc.0", + "react": "^16.8.3" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/dev-kits/addon-preview-wrapper/register.js b/dev-kits/addon-preview-wrapper/register.js new file mode 100644 index 00000000000..cc38cb06f1f --- /dev/null +++ b/dev-kits/addon-preview-wrapper/register.js @@ -0,0 +1 @@ +require('./dist/register'); diff --git a/dev-kits/addon-preview-wrapper/src/constants.ts b/dev-kits/addon-preview-wrapper/src/constants.ts new file mode 100755 index 00000000000..6120231ce3e --- /dev/null +++ b/dev-kits/addon-preview-wrapper/src/constants.ts @@ -0,0 +1 @@ +export const ADDON_ID = 'storybook/preview-wrapper'; diff --git a/dev-kits/addon-preview-wrapper/src/register.tsx b/dev-kits/addon-preview-wrapper/src/register.tsx new file mode 100644 index 00000000000..6fe81015ff1 --- /dev/null +++ b/dev-kits/addon-preview-wrapper/src/register.tsx @@ -0,0 +1,20 @@ +import React, { FunctionComponent } from 'react'; +import { addons, types } from '@storybook/addons'; +import { ADDON_ID } from './constants'; + +const PreviewWrapper: FunctionComponent<{}> = p => ( +
+ + {p.children} +
+); + +addons.register(ADDON_ID, () => { + addons.add(ADDON_ID, { + title: 'edit page', + type: types.PREVIEW, + render: PreviewWrapper as any, + }); +}); diff --git a/dev-kits/addon-preview-wrapper/tsconfig.json b/dev-kits/addon-preview-wrapper/tsconfig.json new file mode 100644 index 00000000000..8876bb6737a --- /dev/null +++ b/dev-kits/addon-preview-wrapper/tsconfig.json @@ -0,0 +1,13 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./src", + "types": ["webpack-env"] + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "src/__tests__/**/*" + ] +} diff --git a/examples/dev-kits/addons.js b/examples/dev-kits/addons.js index 67087bd7bb9..746c97ecd21 100644 --- a/examples/dev-kits/addons.js +++ b/examples/dev-kits/addons.js @@ -1,2 +1,3 @@ import '@storybook/addon-roundtrip/register'; import '@storybook/addon-parameter/register'; +import '@storybook/addon-preview-wrapper/register'; diff --git a/examples/dev-kits/package.json b/examples/dev-kits/package.json index 9cf8a2b7982..96603b49eb6 100644 --- a/examples/dev-kits/package.json +++ b/examples/dev-kits/package.json @@ -10,6 +10,7 @@ "devDependencies": { "@storybook/addon-decorator": "5.2.0-rc.0", "@storybook/addon-parameter": "5.2.0-rc.0", + "@storybook/addon-preview-wrapper": "5.2.0-rc.0", "@storybook/addon-roundtrip": "5.2.0-rc.0", "@storybook/addons": "5.2.0-rc.0", "@storybook/components": "5.2.0-rc.0", diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js index deaa4d2cdf5..ea99fa19eb3 100644 --- a/lib/ui/src/components/preview/preview.js +++ b/lib/ui/src/components/preview/preview.js @@ -53,21 +53,12 @@ const ActualPreview = ({ scale, queryParams, customCanvas, - iframeStart, - iframeEnd, }) => { const data = [storyId, viewMode, id, baseUrl, scale, queryParams]; const base = customCanvas ? customCanvas(...data) : renderIframe(...data); - const iFrame = ( - - {iframeStart.map(({ render }) => render())} - {base} - {iframeEnd.map(({ render }) => render())} - - ); return wrappers.reduceRight( (acc, wrapper, index) => wrapper.render({ index, children: acc, id, storyId, active }), - iFrame + base ); }; @@ -241,8 +232,6 @@ class Preview extends Component { } = this.props; const toolbarHeight = options.isToolshown ? 40 : 0; - const iframeStart = getElementList(getElements, types.IFRAME_START, []); - const iframeEnd = getElementList(getElements, types.IFRAME_END, []); const wrappers = getElementList(getElements, types.PREVIEW, defaultWrappers); const panels = getElementList(getElements, types.TAB, [ { @@ -261,8 +250,6 @@ class Preview extends Component { queryParams, scale: value, customCanvas, - iframeStart, - iframeEnd, }; return ; From c526932f298f0b6ce18dc4fdb6dcf9f39bc475ab Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 29 Oct 2019 16:04:05 +0200 Subject: [PATCH 6/6] removed start/end tool --- lib/addons/src/types.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/lib/addons/src/types.ts b/lib/addons/src/types.ts index a780b562075..35b7b2ba698 100644 --- a/lib/addons/src/types.ts +++ b/lib/addons/src/types.ts @@ -7,8 +7,6 @@ export enum types { TOOL = 'tool', PREVIEW = 'preview', NOTES_ELEMENT = 'notes-element', - IFRAME_START = 'iframe_start', - IFRAME_END = 'iframe_end', } export type Types = types | string;