Framework: Add Component Storybook. (#17475)

* Framework: Add Component Storybook.

* Framework: Add storybook to Netlify deploy.

* Framework: Add Storybook Docs.

* Framework: Add a stand-alone Storybook documentation page example.

* Components: Add custom Babel config for storybook.

* Framework: Update lockfile and playground script name.

* Framework: Update lockfile and ignore Storybook files for publishing.

* Travis: Only deploy once per build, not per job.

* Framework: Update lockfile.

.eslintrc.js

@@ -122,6 +122,7 @@ module.exports = {
 			excludedFiles: [
 				'**/*.@(android|ios|native).js',
 				'**/@(benchmark|test|__tests__)/**/*.js',
+				'**/{storybook,stories}\/*\.js',
 			],
 		},
 		{

.travis.yml

@@ -195,18 +195,21 @@ jobs:
         - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --listTests > ~/.jest-e2e-tests
         - $( npm bin )/wp-scripts test-e2e --config=./packages/e2e-tests/jest.config.js --cacheDirectory="$HOME/.jest-cache" --runTestsByPath $( awk 'NR % 4 == 3' < ~/.jest-e2e-tests )
 
+    - stage: deploy
+      name: Deploy Playground
+      env: INSTALL_WORDPRESS=false
+      before_deploy:
+        - npm install
+        - npm run playground:build -- --public-url '/gutenberg'
+        - npm run design-system:build
+      deploy:
+        provider: pages
+        skip_cleanup: true
+        github_token: $GITHUB_TOKEN
+        keep_history: true
+        local_dir: playground/dist
+        on:
+          branch: master
+
   allow_failures:
     - name: JavaScript native mobile tests
-
-before_deploy:
-  - npm install
-  - npm run playground:build -- --public-url '/gutenberg'
-
-deploy:
-  provider: pages
-  skip_cleanup: true
-  github_token: $GITHUB_TOKEN
-  keep_history: true
-  local_dir: playground/dist
-  on:
-    branch: master

docs/contributors/getting-started.md

@@ -65,6 +65,6 @@ You can also type `npm run package-plugin` which will run the two commands above
 
 The Gutenberg repository also includes a static Gutenberg playground that allows testing and developing in a WordPress-agnostic context. This is very helpful for developing reusable components and trying generic JavaScript modules without any backend dependency.
 
-You can launch the playground by running `npm run playground:start` locally. The playground should be available on [http://localhost:1234](http://localhost:1234).
+You can launch the playground by running `npm run playground:dev` locally. The playground should be available on [http://localhost:1234](http://localhost:1234).
 
 You can also test the playground version of the current master branch on GitHub Pages: [https://wordpress.github.io/gutenberg/](https://wordpress.github.io/gutenberg/)

lerna.json

@@ -7,7 +7,8 @@
 	"ignoreChanges": [
 		"**/benchmark/*.js",
 		"**/CHANGELOG.md",
-		"**/test/**"
+		"**/test/**",
+		"**/{storybook,stories}/**"
 	],
 	"packages": [
 		"packages/*"