From f899683cf8058fa5ff6577559d8cee62768350a2 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Tue, 11 Aug 2020 04:41:37 +0100
Subject: [PATCH] adds faq to the documentation

---
 docs/toc.js           |  5 +++
 docs/workflows/faq.md | 74 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 79 insertions(+)
 create mode 100644 docs/workflows/faq.md

diff --git a/docs/toc.js b/docs/toc.js
index 0c403d114ee..ac69fb0c2fc 100644
--- a/docs/toc.js
+++ b/docs/toc.js
@@ -288,6 +288,11 @@ module.exports = {
           title: 'Package Composition',
           type: 'link',
         },
+        {
+          pathSegment: 'faq',
+          title: 'Frequently Asked Questions',
+          type: 'link',
+        },
       ],
     },
     {
diff --git a/docs/workflows/faq.md b/docs/workflows/faq.md
new file mode 100644
index 00000000000..9a0d04584d4
--- /dev/null
+++ b/docs/workflows/faq.md
@@ -0,0 +1,74 @@
+---
+title: 'Frequently Asked Questions'
+---
+
+Here are some answers to frequently asked questions. If you have a question, you can ask it by opening an issue on the [Storybook Repository](https://github.com/storybookjs/storybook/).
+
+### How can I run coverage tests with Create React App and leave out stories?
+
+Create React App does not allow providing options to Jest in your `package.json`, however you can run `jest` with commandline arguments:
+
+```sh
+npm test -- --coverage --collectCoverageFrom='["src/**/*.{js,jsx}","!src/**/stories/*"]'
+```
+
+### I see `ReferenceError: React is not defined` when using storybooks with Next.js
+
+Next automatically defines `React` for all of your files via a babel plugin. You must define `React` for JSX to work. You can solve this either by:
+
+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 by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/main.js` files. For example:
+
+```js
+module.exports = {
+  webpackFinal: async (baseConfig) => {
+    const nextConfig = require('/path/to/next.config.js');
+
+    // merge whatever from nextConfig into the webpack config storybook will use
+    return { ...baseConfig };
+  },
+};
+```
+
+### Why is there no addons channel?
+
+A common error is that an addon tries to access the "channel", but the channel is not set. This can happen in a few different cases:
+
+1.  You're trying to access addon channel (e.g. by calling `setOptions`) in a non-browser environment like Jest. You may need to add a channel mock:
+    ```js
+    import addons, { mockChannel } from '@storybook/addons';
+
+    addons.setChannel(mockChannel());
+    ```
+
+2.  In React Native, it's a special case that's documented in [#1192](https://github.com/storybookjs/storybook/issues/1192)
+
+### Can I modify React component state in stories?
+
+Not directly. If you control the component source, you can do something like this:
+
+```js
+import React, { Component } from 'react';
+
+export default {
+  title: 'MyComponent',
+};
+
+class MyComponent extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      someVar: 'defaultValue',
+      ...props.initialState,
+    };
+  }
+  // ...
+};
+
+export const defaultView = () => <MyComponent initialState={} />;
+```