Better addon apis & devkits for addons

.circleci/config.yml

@@ -38,6 +38,7 @@ jobs:
             - node_modules
             - examples
             - addons
+            - dev-kits
             - app
             - lib
   chromatic:

.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt

@@ -0,0 +1,81 @@
+package OpenSourceProjects_Storybook.buildTypes
+
+import jetbrains.buildServer.configs.kotlin.v2017_2.*
+import jetbrains.buildServer.configs.kotlin.v2017_2.buildFeatures.commitStatusPublisher
+import jetbrains.buildServer.configs.kotlin.v2017_2.buildSteps.script
+import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.vcs
+import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.retryBuild
+import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.VcsTrigger
+
+object OpenSourceProjects_Storybook_Bootstrap : BuildType({
+    uuid = "9f9177e7-9ec9-4e2e-aabb-d304fd667712"
+    id = "OpenSourceProjects_Storybook_Bootstrap"
+    name = "Bootstrap"
+
+    artifactRules = """
+        addons/*/dist/** => dist.zip/addons
+        addons/storyshots/*/dist/** => dist.zip/addons/storyshots
+        app/*/dist/** => dist.zip/app
+        dev-kits/*/dist/** => dist.zip/dev-kits
+        lib/*/dist/** => dist.zip/lib
+        lib/core/dll/** => dist.zip/lib/core/dll
+    """.trimIndent()
+
+    vcs {
+        root(OpenSourceProjects_Storybook.vcsRoots.OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster)
+    }
+
+    steps {
+        script {
+            name = "Bootstrap"
+            scriptContent = """
+                #!/bin/sh
+
+                set -e -x
+
+                yarn
+                yarn bootstrap --core
+            """.trimIndent()
+            dockerImage = "node:%docker.node.version%"
+        }
+    }
+
+    triggers {
+        vcs {
+            quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
+            triggerRules = "-:comment=^TeamCity change:**"
+            branchFilter = """
+                +:pull/*
+                +:release/*
+                +:master
+                +:next
+                +:snyk-fix-*
+            """.trimIndent()
+            enabled = false
+        }
+        retryBuild {
+            delaySeconds = 60
+            enabled = false
+        }
+    }
+
+    features {
+        commitStatusPublisher {
+            publisher = github {
+                githubUrl = "https://api.github.com"
+                authType = personalToken {
+                    token = "credentialsJSON:5ffe2d7e-531e-4f6f-b1fc-a41bfea26eaa"
+                }
+            }
+            param("github_oauth_user", "Hypnosphi")
+        }
+    }
+
+    requirements {
+        doesNotContain("env.OS", "Windows")
+    }
+
+    cleanup {
+        artifacts(days = 1)
+    }
+})

ADDONS_SUPPORT.md

@@ -8,6 +8,7 @@
 |[centered](addons/centered)                 |+| |+|+| |+|+| |+| |+|+|
 |[contexts](addons/contexts)                 |+| |+| | | | | | | | |+|
 |[events](addons/events)                     |+| |+|+|+|+|+|+| | |+|+|
+|[design assets](addons/design-assets)       |+| |+|+|+|+|+|+|+|+|+|+|
 |[graphql](addons/graphql)                   |+| | | | | | | | | | | |
 |[google-analytics](addons/google-analytics) |+|+|+|+|+|+|+|+|+|+|+|+|
 |[info](addons/info)                         |+| | | | | | | | | | | |

README.md

@@ -112,6 +112,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
 | [centered](addons/centered/)                | Center the alignment of your components within the Storybook UI            |
 | [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                         |
 | [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                                        |

addons/a11y/src/components/__snapshots__/A11YPanel.test.js.snap

@@ -120,6 +120,7 @@ exports[`A11YPanel should render report 1`] = `
   display: -ms-flexbox;
   display: flex;
   background: #FFFFFF;
+  z-index: 1;
 }
 
 .emotion-3 {
@@ -215,14 +216,14 @@ exports[`A11YPanel should render report 1`] = `
               "inserted": Object {
                 "0": true,
                 "110qmus": true,
+                "11xgcgt": true,
                 "1551xjo": true,
                 "15paq49": true,
                 "1977chw": true,
                 "19mcg9j": true,
                 "1ez3l8h": true,
                 "1kbt4a0": true,
                 "1l7fvsg": true,
-                "1myfomu": true,
                 "1vwgrhn": true,
                 "4ryd4s": true,
                 "6hqipu": true,
@@ -490,7 +491,7 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
 
-                    .emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;}
+                    .emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
                   </style>
                   <style
                     data-emotion="css"
@@ -716,7 +717,7 @@ exports[`A11YPanel should render report 1`] = `
                     data-emotion="css"
                   >
 
-                    .emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;}
+                    .emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
                   </style>,
                   <style
                     data-emotion="css"

addons/backgrounds/src/containers/BackgroundSelector.tsx

@@ -63,14 +63,15 @@ const getSelectedBackgroundColor = (list: Input[], currentSelectedValue: string)
   return 'transparent';
 };
 
-const mapper = ({ api, state }: Combo): { items: Input[] } => {
+const mapper = ({ api, state }: Combo): { items: Input[]; selected: string | null } => {
   const story = state.storiesHash[state.storyId];
   const list = story ? api.getParameters(story.id, PARAM_KEY) : [];
+  const selected = state.addons[PARAM_KEY] || null;
 
-  return { items: list || [] };
+  return { items: list || [], selected };
 };
 
-const getDisplayedItems = memoize(10)((list: Input[], selected: State['selected'], change) => {
+const getDisplayedItems = memoize(10)((list: Input[], selected: string | null, change) => {
   let availableBackgroundSelectorItems: Item[] = [];
 
   if (selected !== 'transparent') {
@@ -91,21 +92,34 @@ const getDisplayedItems = memoize(10)((list: Input[], selected: State['selected'
   return availableBackgroundSelectorItems;
 });
 
+interface GlobalState {
+  name: string | undefined;
+  selected: string | undefined;
+}
+
 interface State {
-  selected: string;
   expanded: boolean;
 }
 
-export class BackgroundSelector extends Component<{ api: API }, State> {
+interface Props {
+  api: API;
+}
+
+export class BackgroundSelector extends Component<Props, State> {
   state: State = {
-    selected: null,
     expanded: false,
   };
 
-  change = ({ selected, name }: { selected: string; name: string }) => {
+  change = ({ selected, name }: GlobalState) => {
     const { api } = this.props;
+    const { expanded } = this.state;
+    if (expanded) {
+      this.setState({ expanded: false });
+    }
+    if (typeof selected === 'string') {
+      api.setAddonState<string>(PARAM_KEY, selected);
+    }
     api.emit(EVENTS.UPDATE, { selected, name });
-    this.setState({ selected, expanded: false });
   };
 
   onVisibilityChange = (s: boolean) => {
@@ -116,11 +130,11 @@ export class BackgroundSelector extends Component<{ api: API }, State> {
   };
 
   render() {
-    const { expanded, selected } = this.state;
+    const { expanded } = this.state;
 
     return (
       <Consumer filter={mapper}>
-        {({ items }: { items: Input[] }) => {
+        {({ items, selected }: ReturnType<typeof mapper>) => {
           const selectedBackgroundColor = getSelectedBackgroundColor(items, selected);
           const links = getDisplayedItems(items, selectedBackgroundColor, this.change);
 

addons/design-assets/README.md

@@ -0,0 +1,55 @@
+# 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 `addons.js`:
+
+```js
+import '@storybook/addon-design-assets/register';
+```
+
+within your stories:
+```js
+import { storiesOf } from '@storybook/react';
+
+import imageUrl from './images/my-image.jpg'; 
+
+storiesOf('root|group/component', module)
+  .addParameters({
+    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
+    ],
+  })
+  .add('variant', () => <div>your story here</div>);
+```
+
+If you have a set of different assets on 1 story, you might want to name then:
+```js
+import { storiesOf } from '@storybook/react';
+
+import imageUrl from './images/my-image.jpg'; 
+
+storiesOf('root|group/component', module)
+  .addParameters({
+    assets: [{
+      url: 'https://via.placeholder.com/300/09f/fff.png', // link to an external image
+      name: 'blue',
+    }, {
+      url: 'https://via.placeholder.com/300/f90/fff.png', // link to an external image
+      name: 'orange',
+    }],
+  })
+  .add('variant', () => <div>your story here</div>);
+```

addons/design-assets/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@storybook/addon-design-assets",
+  "version": "5.1.0-rc.5",
+  "description": "Design asset preview for storybook",
+  "keywords": [
+    "addon",
+    "storybook",
+    "parameter",
+    "design",
+    "assets",
+    "files",
+    "viewer"
+  ],
+  "homepage": "https://github.com/storybooks/storybook#readme",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/storybooks/storybook.git",
+    "directory": "addons/design-assets"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.1.0-rc.5",
+    "@storybook/api": "5.1.0-rc.5",
+    "@storybook/client-logger": "5.1.0-rc.5",
+    "@storybook/components": "5.1.0-rc.5",
+    "@storybook/core-events": "5.1.0-rc.5",
+    "@storybook/theming": "5.1.0-rc.5",
+    "common-tags": "^1.8.0",
+    "core-js": "^2.6.5",
+    "global": "^4.3.2",
+    "react": "^16.8.4",
+    "use-image": "^1.0.3"
+  },
+  "devDependencies": {
+    "@types/common-tags": "^1.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

addons/design-assets/register.js

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

addons/design-assets/src/constants.ts

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