GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 09:21:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

removed edit-page addon to be external addon

Browse Source
This commit is contained in:
atanasster 2019-10-29 06:17:16 +02:00
parent e548e791d8
commit 136f5b0c94
15 changed files with 0 additions and 283 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.github/CODEOWNERS vendored
View File

@ -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

1
.github/autolabeler.yml vendored
View File

@ -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/**"]

1
README.md
View File

@ -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 |

84
addons/edit-page/README.md
View File

@ -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 }) => (
<div>
{filePath && (
<div>
<h3>{shortName}</h3>
<a target="_blank" href={filePath}>
here
</a>
</div>
)}
</div>
),
});
```
## 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
<Meta
title="Test mdx|Add edit on Doc tab?"
parameters={{
edit:{
fileName: 'https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md'
}
}}/>
```
## Options
**fileNameResolve**: function to resolve the file name, by default returns the supplied fileName<br/>
**editPageLabel**: label for the Edit this page link - by default `Edit this page`<br/>
**render**: function to custom render the `Edit this page` panel <br/>
```js
parameters : {
filePath: string, //full file path
shortName: string, //short name of the story file (component name)
parameters: any, //parameters of the current story
}
```

39
addons/edit-page/package.json
View File

@ -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"
}
}

1
addons/edit-page/register.js
View File

@ -1 +0,0 @@
require('./dist/register');

77
addons/edit-page/src/components/PreviewPanel.tsx
View File

@ -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) => (
<React.Fragment>
{filePath && (
<StyledContainer>
<H3>{shortName}</H3>
<Link target="_blank" href={filePath}>
{config.editPageLabel}
</Link>
</StyledContainer>
)}
</React.Fragment>
);
const mapper = ({ state }: Combo): { story: any } => {
const story = state.storiesHash[state.storyId];
return { story };
};
export const PreviewPanel = (props: EditStoriesProps) => {
return (
<React.Fragment>
<Consumer filter={mapper}>
{({ story }: ReturnType<typeof mapper>) => {
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 <EditInject filePath={filePath} shortName={shortName} config={props} />;
}
}
return null;
}}
</Consumer>
</React.Fragment>
);
};

29
addons/edit-page/src/index.tsx
View File

@ -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: () => <PreviewPanel key={ADDON_ID} {...{ ...defaultCMSProps, ...config }} />,
});
});
};
if (module && (module as any).hot && (module as any).hot.decline) {
(module as any).hot.decline();
}

1
addons/edit-page/src/register.tsx
View File

@ -1 +0,0 @@
export * from './index';

22
addons/edit-page/src/types.ts
View File

@ -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;
}

13
addons/edit-page/tsconfig.json
View File

@ -1,13 +0,0 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"types": ["webpack-env"]
},
"include": [
"src/**/*"
],
"exclude": [
"src/__tests__/**/*"
]
}

1
docs/src/new-components/basics/shared/site.js
View File

@ -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`,
},
};

8
examples/official-storybook/addons.js
View File

@ -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');

1
examples/official-storybook/package.json
View File

@ -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",

4
examples/official-storybook/stories/addon-a11y/base-button.stories.js
View File

@ -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',
},
},
};