ci - run storybook and add to build-artifacts (#10360)

* ci - run storybook and add to build-artifacts

* ci/storybook - rename storybook build path and fix artifact upload

* ci/storybook - rename link text

* clean - remove accidently committed storybook build dir

* storybook - fix image path to relative (#10364)

.circleci/config.yml

@@ -90,6 +90,7 @@ workflows:
           requires:
             - prep-deps
             - prep-build
+            - prep-build-storybook
             - benchmark
             - all-tests-pass
       - job-publish-release:
@@ -214,7 +215,7 @@ jobs:
       - persist_to_workspace:
           root: .
           paths:
-            - .out
+            - storybook-build
 
   test-lint:
     executor: node-browsers
@@ -416,6 +417,9 @@ jobs:
       - store_artifacts:
           path: build-artifacts
           destination: build-artifacts
+      - store_artifacts:
+          path: storybook-build
+          destination: storybook
       - run:
           name: build:announce
           command: ./development/metamaskbot-build-announce.js

.gitignore

@@ -26,7 +26,7 @@ temp
 .DS_Store
 app/.DS_Store
 
-.out/
+storybook-build/
 coverage/
 dist
 builds/

development/metamaskbot-build-announce.js

@@ -58,6 +58,9 @@ async function start() {
   const coverageUrl = `${BUILD_LINK_BASE}/coverage/index.html`
   const coverageLink = `<a href="${coverageUrl}">Report</a>`
 
+  const storybookUrl = `${BUILD_LINK_BASE}/storybook/index.html`
+  const storybookLink = `<a href="${storybookUrl}">Storybook</a>`
+
   // link to artifacts
   const allArtifactsUrl = `https://circleci.com/gh/MetaMask/metamask-extension/${CIRCLE_BUILD_NUM}#artifacts/containers/0`
 
@@ -65,6 +68,7 @@ async function start() {
     `builds: ${buildLinks}`,
     `bundle viz: ${bundleLinks}`,
     `code coverage: ${coverageLink}`,
+    `storybook: ${storybookLink}`,
     `<a href="${allArtifactsUrl}">all artifacts</a>`,
   ]
   const hiddenContent = `<ul>${contentRows

package.json

@@ -48,8 +48,8 @@
     "start:dev": "concurrently -k -n build,react,redux yarn:start yarn:devtools:react yarn:devtools:redux",
     "announce": "node development/announcer.js",
     "storybook": "start-storybook -p 6006 -c .storybook --static-dir ./app ./storybook/images",
-    "storybook:build": "build-storybook -c .storybook -o .out --static-dir ./app ./storybook/images",
-    "storybook:deploy": "storybook-to-ghpages --existing-output-dir .out --remote storybook --branch master",
+    "storybook:build": "build-storybook -c .storybook -o storybook-build --static-dir ./app ./storybook/images",
+    "storybook:deploy": "storybook-to-ghpages --existing-output-dir storybook-build --remote storybook --branch master",
     "update-changelog": "./development/auto-changelog.sh",
     "generate:migration": "./development/generate-migration.sh"
   },

ui/app/components/ui/box/box.stories.js

@@ -25,7 +25,7 @@ export const box = () => {
     'children',
   )
   for (let $i = 0; $i < number('items', 1, {}, 'children'); $i++) {
-    items.push(<img width={size} height={size} src="/images/eth_logo.svg" />)
+    items.push(<img width={size} height={size} src="./images/eth_logo.svg" />)
   }
   return (
     <Box