Added more stories

Author: aeagle

react-spaces/.prettierignore

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

react-spaces/.prettierrc

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

react-spaces/.storybook/main.js

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

react-spaces/.storybook/manager.js

@@ -1,7 +1,31 @@
+<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: 20px 0 0 0 !important;
+	}
+	.sbdocs-wrapper h2 {
+		font-weight: 300 !important;
+		border-bottom: none !important;
+		margin-bottom: 20px !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>

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

@@ -37,6 +37,7 @@
 		"@storybook/addon-knobs": "^5.3.14",
 		"@storybook/addon-links": "^5.3.14",
 		"@storybook/addons": "^5.3.14",
+		"@storybook/preset-typescript": "^2.1.0",
 		"@storybook/react": "^5.3.14",
 		"@types/jest": "^24.0.15",
 		"@types/node": "^12.6.8",
@@ -61,6 +62,7 @@
 		"rollup-plugin-typescript2": "^0.22.1",
 		"rollup-watch": "^4.3.1",
 		"sass-loader": "^8.0.2",
+		"ts-loader": "^6.2.1",
 		"tslib": "^1.10.0",
 		"typescript": "^3.5.3"
 	},

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

@@ -0,0 +1,23 @@
+import { Meta, Story, Preview, Props } from "@storybook/addon-docs/blocks";
+import { CommonHeader } from "../Utils";
+
+<CommonHeader />
+
+<Meta title="React Spaces|Introduction" />
+
+## Introduction
+
+**An easy to understand and nestable layout system, React Spaces allow you to divide a page
+or container into anchored, scrollable and resizable spaces enabling you to build desktop
+type user interfaces in the browser.**
+
+React Spaces allow you to divide a page or container HTML element into spaces. These
+spaces know how to behave in relation to each other and can also be divided into further
+nested spaces.
+
+The library contains a small number of components which can be used to build more complex
+desktop type user interfaces.
+
+<div style={{ paddingTop: 15, textAlign: "center" }}>
+	<img style={{ border: "1px solid black" }} src="https://www.allaneagle.com/react-spaces/react-spaces-demo.gif" width="100%" />
+</div>