Merge branch 'master' into fix-rn-webpack-prod-config

README.md

@@ -19,6 +19,8 @@ It allows you to browse a component library, view the different states of each c
 
 Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.
 
+Here are some featured examples that you can reference to see how Storybook works: https://storybook.js.org/examples/
+
 Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduction/) for component design, documentation, testing, interactivity, and so on. Storybook's easy-to-use API makes it easy to configure and extend in various ways. It has even been extended to support React Native development for mobile.
 
 ## Table of contents
@@ -45,6 +47,14 @@ getstorybook
 
 Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories.
 
+**Storybook v2.x migration note**: If you're using Storybook v2.x and want to shift to 3.x version the easiest way is:
+```sh
+npm i -g @storybook/cli
+cd my-storybook-v2-app
+getstorybook
+```
+It runs a codemod to update all package names. Read all migration details in our [Migration Guide](MIGRATION.md)
+
 For full documentation on using Storybook visit: [storybook.js.org](https://storybook.js.org)
 
 ## Projects
@@ -63,6 +73,7 @@ For full documentation on using Storybook visit: [storybook.js.org](https://stor
 
 -   [storyshots](addons/storyshots) - Easy snapshot testing for storybook
 -   [actions](addons/actions/) - Log actions as users interact with components in storybook
+-   [links](addons/links/) - Create links between stories
 -   [comments](addons/comments/) - Comment on storybook stories
 -   [graphql](addons/graphql/) - Query a GraphQL server within Storybook stories
 -   [info](addons/info/) - Annotate stories with extra component usage information

docs/pages/basics/faq/index.md

@@ -19,3 +19,7 @@ Next automatically defines `React` for all of your files via a babel plugin. You
 
 1.  Adding `import React from 'react'` to your component files.
 2.  Adding a `.babelrc` that includes [`babel-plugin-react-require`](https://www.npmjs.com/package/babel-plugin-react-require)
+
+### How do I setup Storybook to share Webpack configuration with Next.js?
+
+You can generally reuse webpack rules fairly easily by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/webpack.config.js` files. For example, [this gist](https://gist.github.com/metasean/cadd2becd60cc3b295bf49895a56f9b4) sets both next.js and storybook up with global stylesheets.

docs/pages/configurations/custom-webpack-config/index.md

@@ -105,6 +105,14 @@ module.exports = (baseConfig, env) => {
 
   // Extend it as you need.
 
+  // For example, add typescript loader:
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    include: path.resolve(__dirname, '../src'),
+    loader: require.resolve('ts-loader')
+  });
+  config.resolve.extensions.push('.ts', '.tsx');
+
   return config;
 };
 ```