AP-714 Use storybook docs

.eslintrc.js

@@ -24,6 +24,7 @@ module.exports = {
     "prettier/flowtype",
     "prettier/react",
     "prettier/standard",
+    "plugin:mdx/recommended",
   ],
   plugins: ["prettier", "react", "react-hooks"],
   rules: {
@@ -76,6 +77,13 @@ module.exports = {
         node: true,
       },
     },
+    {
+      files: ["*.mdx"],
+      extends: ["plugin:mdx/overrides"],
+      env: {
+        commonjs: true,
+      },
+    },
   ],
   settings: {
     react: {

.storybook/config.js

@@ -1,20 +1,16 @@
-import { configure } from "@storybook/react";
-
-function importAll(r) {
-  r.keys().forEach(r);
-}
-
-function loadStories() {
-  importAll(
-    require.context("../src", true, /\.(?:stories|story)\.(jsx?|tsx?)$/)
-  );
+import "../reset.css";
+import "../font.css";
 
-  importAll(
-    require.context("../stories", true, /\.(?:stories|story)\.(jsx?|tsx?)$/)
-  );
-
-  require("../reset.css");
-  require("../font.css");
-}
+import { configure } from "@storybook/react";
 
-configure(loadStories, module);
+configure(
+  [
+    require.context("../src", true, /\.(?:stories|story)\.(jsx?|tsx?|mdx)$/),
+    require.context(
+      "../stories",
+      true,
+      /\.(?:stories|story)\.(jsx?|tsx?|mdx)$/
+    ),
+  ],
+  module
+);

.storybook/presets.js

@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require("path");
+
+module.exports = [
+  {
+    name: "@storybook/preset-typescript",
+    options: {
+      tsLoaderOptions: {
+        transpileOnly: true,
+      },
+      tsDocgenLoaderOptions: {
+        // Specify this manually or the loader won't find the config. See
+        // https://github.com/strothj/react-docgen-typescript-loader/issues/10
+        tsconfigPath: path.resolve(__dirname, "../tsconfig.json"),
+      },
+    },
+  },
+  "@storybook/addon-docs/react/preset",
+];