Setup storybook

Author: aeagle

react-spaces/.babelrc

@@ -1,16 +1,3 @@
 {
-	"presets": [
-	  "stage-1",
-	  "react",
-	  [
-		"latest", {
-		  "es2015": {
-			"modules": false
-		  }
-		}
-	  ]
-	],
-	"plugins": [
-		"external-helpers"
-	]
-  }
+	"presets": ["@babel/preset-react"]
+}

react-spaces/.storybook/main.js

@@ -0,0 +1,4 @@
+module.exports = {
+	stories: ["../src/**/*.stories.(mdx|tsx)"],
+	addons: ["@storybook/addon-actions", "@storybook/addon-links", "@storybook/addon-docs/register"],
+};

react-spaces/.storybook/manager.js

@@ -0,0 +1,9 @@
+import { addParameters } from "@storybook/react";
+import { DocsPage, DocsContainer } from "@storybook/addon-docs/blocks";
+
+addParameters({
+	docs: {
+		container: DocsContainer,
+		page: DocsPage,
+	},
+});

react-spaces/.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
+<style>
+	body {
+		font-family: "Ubuntu", sans-serif;
+		font-size: 12px;
+	}
+</style>

react-spaces/.storybook/webpack.config.js

@@ -0,0 +1,57 @@
+const createCompiler = require("@storybook/addon-docs/mdx-compiler-plugin");
+
+module.exports = ({ config }) => {
+	config.module.rules.push({
+		test: /(stories|story)\.mdx$/,
+		use: [
+			{
+				loader: "babel-loader",
+				// may or may not need this line depending on your app's setup
+				options: {
+					plugins: ["@babel/plugin-transform-react-jsx"],
+				},
+			},
+			{
+				loader: "@mdx-js/loader",
+				options: {
+					compilers: [createCompiler({})],
+				},
+			},
+		],
+	});
+
+	config.module.rules.push({
+		test: /\.(stories|story)\.[tj]sx?$/,
+		loader: require.resolve("@storybook/source-loader"),
+		exclude: [/node_modules/],
+		enforce: "pre",
+	});
+
+	config.module.rules.push({
+		test: /\.(ts|tsx)$/,
+		use: [{ loader: require.resolve("awesome-typescript-loader") }, { loader: require.resolve("react-docgen-typescript-loader") }],
+		exclude: [/node_modules/],
+	});
+
+	const cssModuleLoader = {
+		loader: require.resolve("css-loader"),
+		options: {
+			modules: true,
+			sourceMap: true,
+			importLoaders: 2,
+			modules: {
+				localIdentName: "[name]__[local]__[hash:base64:5]",
+			},
+		},
+	};
+
+	config.module.rules.push({
+		test: /\.scss$/,
+		exclude: /node_modules/,
+		loaders: [require.resolve("style-loader"), cssModuleLoader, require.resolve("sass-loader")],
+	});
+
+	config.resolve.extensions.push(".ts", ".tsx", ".scss", ".mdx");
+
+	return config;
+};