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

Merge pull request #14854 from storybookjs/14831-extract-design-assets

Browse Source 
Extract design-assets from monorepo
This commit is contained in:
Michael Shilman 2021-05-09 17:09:06 +08:00 committed by GitHub
commit ccd090a4ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 0 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
addons/design-assets/README.md
View File

@ -1,42 +0,0 @@
# Storybook addon for design assets
This addon for storybook allows you to link to image files, other files, and even url's for embedding in the storybook panel!
You can add as many assets to a single story as you want.
## Install
```sh
npm install @storybook/addon-design-assets
```
## Usage
within `.storybook/main.js`:
```js
module.exports = {
addons: ['@storybook/addon-design-assets']
}
```
within your stories:
```js
import React from 'react';
import imageUrl from './images/my-image.jpg';
export default {
title: 'Design Assets',
parameters: {
assets: [
imageUrl, // link to a file imported
'https://via.placeholder.com/300/09f/fff.png', // link to an external image
'https://www.example.com', // link to a webpage
'https://www.example.com?id={id}', // link to a webpage with the current story's id in the url
],
},
};
export const defaultView = () => (
<div>your story here</div>
);

82
addons/design-assets/package.json
View File

@ -1,82 +0,0 @@
{
"name": "@storybook/addon-design-assets",
"version": "6.3.0-alpha.21",
"description": "Design asset preview for storybook",
"keywords": [
"addon",
"assets",
"design",
"files",
"parameter",
"storybook",
"viewer"
],
"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": "addons/design-assets"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/storybook"
},
"license": "MIT",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/ts3.9/index.d.ts",
"typesVersions": {
"<3.8": {
"*": [
"dist/ts3.4/*"
]
}
},
"files": [
"dist/**/*",
"README.md",
"*.js",
"*.d.ts"
],
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "6.3.0-alpha.21",
"@storybook/api": "6.3.0-alpha.21",
"@storybook/client-logger": "6.3.0-alpha.21",
"@storybook/components": "6.3.0-alpha.21",
"@storybook/core-events": "6.3.0-alpha.21",
"@storybook/theming": "6.3.0-alpha.21",
"core-js": "^3.8.2",
"global": "^4.4.0",
"regenerator-runtime": "^0.13.7",
"ts-dedent": "^2.0.0",
"use-image": "^1.0.7"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0",
"react-dom": "^16.8.0 || ^17.0.0"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"react-dom": {
"optional": true
}
},
"publishConfig": {
"access": "public"
},
"gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
"storybook": {
"displayName": "Design assets",
"unsupportedFrameworks": [
"react-native"
]
}
}

5
addons/design-assets/preset.js
View File

@ -1,5 +0,0 @@
function managerEntries(entry = [], options) {
return [...entry, require.resolve('./dist/esm/register')];
}
module.exports = { managerEntries };

1
addons/design-assets/register.js
View File

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

3
addons/design-assets/src/constants.ts
View File

@ -1,3 +0,0 @@
export const ADDON_ID = 'storybook/design-assets';
export const PANEL_ID = `${ADDON_ID}/panel`;
export const PARAM_KEY = `assets`;

78
addons/design-assets/src/panel.tsx
View File

@ -1,78 +0,0 @@
import React, { Fragment, useMemo, ReactElement } from 'react';
import { useParameter, useAddonState, useStorybookState } from '@storybook/api';
import { styled } from '@storybook/theming';
import { ActionBar } from '@storybook/components';
import { PARAM_KEY, ADDON_ID } from './constants';
interface AssetDescription {
url: string;
name: string;
}
type Results = (string | AssetDescription)[];
type Selected = number;
const Iframe = styled.iframe({
width: '100%',
height: '100%',
border: '0 none',
});
const Img = styled.img({
width: '100%',
height: '100%',
border: '0 none',
objectFit: 'contain',
});
const Asset = ({ url }: { url: string | undefined }): ReactElement => {
if (!url) {
return null;
}
if (url.match(/\.(png|apng|gif|jpeg|tiff|svg|webp)/)) {
// do image viewer
return <Img alt="" src={url} />;
}
if (url.match(/\.(mp4|ogv|webm)/)) {
// do video viewer
return <div>not implemented yet, sorry</div>;
}
return <Iframe title={url} src={url} />;
};
const getUrl = (input: AssetDescription | string): string => {
return typeof input === 'string' ? input : input.url;
};
export const Panel = () => {
const results = useParameter<Results>(PARAM_KEY, []);
const [selected, setSelected] = useAddonState<Selected>(ADDON_ID, 0);
const { storyId } = useStorybookState();
return useMemo(() => {
if (results.length === 0) {
return null;
}
if (results.length && !results[selected]) {
setSelected(0);
return null;
}
const url = getUrl(results[selected]).replace('{id}', storyId);
return (
<Fragment>
<Asset url={url} />
{results.length > 1 ? (
<ActionBar
key="actionbar"
actionItems={results.map((i, index) => ({
title: typeof i === 'string' ? `asset #${index + 1}` : i.name,
onClick: () => setSelected(index),
}))}
/>
) : null}
</Fragment>
);
}, [results, selected, storyId]);
};

19
addons/design-assets/src/register.tsx
View File

@ -1,19 +0,0 @@
import * as React from 'react';
import { addons, types } from '@storybook/addons';
import { AddonPanel } from '@storybook/components';
import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
import { Panel } from './panel';
addons.register(ADDON_ID, () => {
addons.add(PANEL_ID, {
title: 'Design Assets',
type: types.PANEL,
render: ({ active, key }) => (
<AddonPanel active={active} key={key}>
<Panel />
</AddonPanel>
),
paramKey: PARAM_KEY,
});
});

18
addons/design-assets/tsconfig.json
View File

@ -1,18 +0,0 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "./src",
"types": ["webpack-env"]
},
"include": [
"src/**/*"
],
"exclude": [
"src/**/*.test.*",
"src/**/tests/**/*",
"src/**/__tests__/**/*",
"src/**/*.stories.*",
"src/**/*.mockdata.*",
"src/**/__testfixtures__/**"
]
}

1
examples/official-storybook/main.ts
View File

@ -21,7 +21,6 @@ const config: StorybookConfig = {
},
{ name: '@storybook/addon-essentials' },
'@storybook/addon-storysource',
'@storybook/addon-design-assets',
'@storybook/addon-links',
'@storybook/addon-knobs',
'@storybook/addon-a11y',

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

@ -19,7 +19,6 @@
"@storybook/addon-actions": "6.3.0-alpha.21",
"@storybook/addon-backgrounds": "6.3.0-alpha.21",
"@storybook/addon-controls": "6.3.0-alpha.21",
"@storybook/addon-design-assets": "6.3.0-alpha.21",
"@storybook/addon-docs": "6.3.0-alpha.21",
"@storybook/addon-graphql": "6.3.0-alpha.21",
"@storybook/addon-jest": "6.3.0-alpha.21",

75
examples/official-storybook/stories/addon-design-assets.stories.js
View File

@ -1,75 +0,0 @@
import React from 'react';
export default {
title: 'Addons/Design assets',
parameters: {
options: {
selectedPanel: 'storybook/design-assets/panel',
},
},
};
export const SingleImage = () => <div>This story should a single image in the assets panel</div>;
SingleImage.storyName = 'single image';
SingleImage.parameters = {
assets: ['https://via.placeholder.com/300/09f/fff.png'],
};
export const SingleWebpage = () => <div>This story should a single image in the assets panel</div>;
SingleWebpage.storyName = 'single webpage';
SingleWebpage.parameters = {
assets: ['https://www.example.com'],
};
export const YoutubeVideo = () => <div>This story should a single image in the assets panel</div>;
YoutubeVideo.storyName = 'youtube video';
YoutubeVideo.parameters = {
assets: ['https://www.youtube.com/embed/p-LFh5Y89eM'],
};
export const MultipleImages = () => (
<div>This story should a multiple images in the assets panel</div>
);
MultipleImages.storyName = 'multiple images';
MultipleImages.parameters = {
assets: [
'https://via.placeholder.com/600/09f/fff.png',
'https://via.placeholder.com/600/f90/fff.png',
],
};
export const NamedAssets = () => <div>This story should a single image in the assets panel</div>;
NamedAssets.storyName = 'named assets';
NamedAssets.parameters = {
assets: [
{
name: 'blue',
url: 'https://via.placeholder.com/300/09f/fff.png',
},
{
name: 'orange',
url: 'https://via.placeholder.com/300/f90/fff.png',
},
],
};
export const UrlReplacement = () => (
<div>This story should have a webpage, with within it's url the storyId</div>
);
UrlReplacement.storyName = 'url replacement';
UrlReplacement.parameters = {
assets: ['https://via.placeholder.com/600.png?text={id}'],
};

1
lib/cli/src/versions.json
View File

@ -3,7 +3,6 @@
"@storybook/addon-actions": "6.3.0-alpha.21",
"@storybook/addon-backgrounds": "6.3.0-alpha.21",
"@storybook/addon-controls": "6.3.0-alpha.21",
"@storybook/addon-design-assets": "6.3.0-alpha.21",
"@storybook/addon-docs": "6.3.0-alpha.21",
"@storybook/addon-essentials": "6.3.0-alpha.21",
"@storybook/addon-google-analytics": "6.3.0-alpha.21",

3
nx.json
View File

@ -31,9 +31,6 @@
"@storybook/addon-controls": {
"implicitDependencies": []
},
"@storybook/addon-design-assets": {
"implicitDependencies": []
},
"@storybook/addon-docs": {
"implicitDependencies": []
},

1
package.json
View File

@ -124,7 +124,6 @@
"@storybook/addon-actions": "workspace:*",
"@storybook/addon-backgrounds": "workspace:*",
"@storybook/addon-controls": "workspace:*",
"@storybook/addon-design-assets": "workspace:*",
"@storybook/addon-docs": "workspace:*",
"@storybook/addon-essentials": "workspace:*",
"@storybook/addon-google-analytics": "workspace:*",

4
workspace.json
View File

@ -17,10 +17,6 @@
"root": "addons/controls",
"type": "library"
},
"@storybook/addon-design-assets": {
"root": "addons/design-assets",
"type": "library"
},
"@storybook/addon-docs": {
"root": "addons/docs",
"type": "library"

38
yarn.lock
View File

@ -5569,32 +5569,6 @@ __metadata:
languageName: unknown
linkType: soft
"@storybook/addon-design-assets@6.3.0-alpha.21, @storybook/addon-design-assets@workspace:*, @storybook/addon-design-assets@workspace:addons/design-assets":
version: 0.0.0-use.local
resolution: "@storybook/addon-design-assets@workspace:addons/design-assets"
dependencies:
"@storybook/addons": 6.3.0-alpha.21
"@storybook/api": 6.3.0-alpha.21
"@storybook/client-logger": 6.3.0-alpha.21
"@storybook/components": 6.3.0-alpha.21
"@storybook/core-events": 6.3.0-alpha.21
"@storybook/theming": 6.3.0-alpha.21
core-js: ^3.8.2
global: ^4.4.0
regenerator-runtime: ^0.13.7
ts-dedent: ^2.0.0
use-image: ^1.0.7
peerDependencies:
react: ^16.8.0 || ^17.0.0
react-dom: ^16.8.0 || ^17.0.0
peerDependenciesMeta:
react:
optional: true
react-dom:
optional: true
languageName: unknown
linkType: soft
"@storybook/addon-docs@6.3.0-alpha.21, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
version: 0.0.0-use.local
resolution: "@storybook/addon-docs@workspace:addons/docs"
@ -7106,7 +7080,6 @@ __metadata:
"@storybook/addon-actions": "workspace:*"
"@storybook/addon-backgrounds": "workspace:*"
"@storybook/addon-controls": "workspace:*"
"@storybook/addon-design-assets": "workspace:*"
"@storybook/addon-docs": "workspace:*"
"@storybook/addon-essentials": "workspace:*"
"@storybook/addon-google-analytics": "workspace:*"
@ -31311,7 +31284,6 @@ fsevents@^1.2.7:
"@storybook/addon-actions": 6.3.0-alpha.21
"@storybook/addon-backgrounds": 6.3.0-alpha.21
"@storybook/addon-controls": 6.3.0-alpha.21
"@storybook/addon-design-assets": 6.3.0-alpha.21
"@storybook/addon-docs": 6.3.0-alpha.21
"@storybook/addon-graphql": 6.3.0-alpha.21
"@storybook/addon-jest": 6.3.0-alpha.21
@ -42202,16 +42174,6 @@ typescript@4.1.3:
languageName: node
linkType: hard
"use-image@npm:^1.0.7":
version: 1.0.7
resolution: "use-image@npm:1.0.7"
peerDependencies:
react: ^16.8.0 || ^17
react-dom: ^16.8.0 || ^17
checksum: 8ff31b134345c92df7ce3ec261ab255b67183a3856d3897c7cb3484d7049029392f5a577963b21aff70cb8e91b6650a5ee845d2958028405b752ba5903287e7d
languageName: node
linkType: hard
"use-isomorphic-layout-effect@npm:^1.0.0":
version: 1.1.1
resolution: "use-isomorphic-layout-effect@npm:1.1.1"