Merge pull request #68 from aeagle/storybook

Project refactors and added storybook

Author: aeagle

.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["@babel/preset-react"]
+}

.gitignore

@@ -22,3 +22,4 @@ yarn-debug.log*
 yarn-error.log*
 **/.rpt2_cache
 **/.next
+**/storybook-static

.prettierignore

@@ -0,0 +1 @@
+**/*.mdx

.prettierrc

@@ -0,0 +1,9 @@
+{
+	"tabWidth": 4,
+	"useTabs": true,
+	"printWidth": 150,
+	"semi": true,
+	"trailingComma": "all",
+	"jsxBracketSameLine": true,
+	"arrowParens": "always"
+}

.storybook/main.js

@@ -0,0 +1,19 @@
+const path = require("path");
+
+module.exports = {
+	stories: ["../src/**/*.stories.(mdx|tsx)"],
+	addons: ["@storybook/preset-typescript", "@storybook/addon-actions", "@storybook/addon-links", "@storybook/addon-docs/preset"],
+	webpackFinal: async (config, { configType }) => {
+		if (process.env.NODE === "production") {
+			config.output.publicPath = "/react-spaces/docs";
+		}
+
+		config.module.rules.push({
+			test: /\.scss$/,
+			use: ["style-loader", "css-loader", "sass-loader"],
+			include: path.resolve(__dirname, "../"),
+		});
+
+		return config;
+	},
+};

.storybook/preview-head.html

@@ -0,0 +1,35 @@
+<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" />
+<style>
+	body {
+		font-family: "Ubuntu", sans-serif;
+		font-size: 12px;
+	}
+	.sbdocs-wrapper {
+		padding: 15px !important;
+	}
+	.sbdocs-wrapper h2 {
+		font-weight: 300 !important;
+		border-bottom: none !important;
+		margin-bottom: 20px !important;
+	}
+	.sbdocs-wrapper h4 {
+		margin-top: 20px !important;
+		font-weight: 500 !important;
+	}
+	.sbdocs-wrapper p,
+	.sbdocs-wrapper li {
+		font-size: 16px !important;
+	}
+	.sbdocs-preview > div > div > div {
+		margin-bottom: 15px;
+	}
+	.sbdocs-preview > div > div > div > div > div {
+		position: relative;
+		height: 600px;
+		outline: 1px solid black;
+	}
+	.docblock-source {
+		margin: 25px 0 !important;
+	}
+</style>