aeagle · aeagle · Jul 28, 2019 · Jul 27, 2019 · Jul 27, 2019 · Jul 27, 2019
diff --git a/demo/src/App.scss b/demo/src/App.scss
@@ -59,6 +59,12 @@ pre {
 	display: none;
 }
 
+.ant-menu {
+	.ant-menu-item {
+		font-size: 16px !important;
+	}
+}
+
 .ant-anchor-link {
 	line-height: 1.5;
 }

diff --git a/demo/src/App.tsx b/demo/src/App.tsx
diff --git a/demo/src/docs/Anchored.tsx b/demo/src/docs/Anchored.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import * as Space from 'react-spaces';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { Tabs } from 'antd';
+import { Description } from './Docs';
+
+export const Anchored = () => {
+	return (
+		<>
+			<h2 id="non-resizable">Anchored spaces</h2>
+
+			<p>
+			Anchored spaces provide spaces which can be anchored to the side of a container space. For example,
+			a <strong>&lt;Left /&gt;</strong> space might be used for a left sidebar and a <strong>&lt;Top /&gt;</strong>
+			{" "}space might be used for a fixed heading or toolbar.
+			</p>
+
+			<Tabs defaultActiveKey="1">
+			<Tabs.TabPane tab="Left and right" key="1">
+
+				<SyntaxHighlighter language="html">
+				{
+					"const App = () => (\r\n" +
+					"  <Space.Fixed height={400}>\r\n" +
+					"    <Space.Left size=\"20%\" />\r\n" +
+					"    <Space.Fill />\r\n" +
+					"    <Space.Right size=\"20%\" />\r\n" +
+					"  </Space.Fixed>\r\n" +
+					")"
+				}
+				</SyntaxHighlighter>
+
+				<Space.Fixed height={400}>
+				<Space.Left size="20%" style={{ backgroundColor: '#e0eae0' }}>
+					{Description("Left", "L")}
+				</Space.Left>
+				<Space.Fill style={{ backgroundColor: '#eee0e0' }}>
+					{Description("Fill", "F")}
+				</Space.Fill>
+				<Space.Right size="20%" style={{ backgroundColor: '#e0eee0' }}>
+					{Description("Right", "R")}
+				</Space.Right>
+				</Space.Fixed>
+
+			</Tabs.TabPane>
+			<Tabs.TabPane tab="Top and bottom" key="2">
+
+				<SyntaxHighlighter language="html">
+				{
+					"const App = () => (\r\n" +
+					"  <Space.Fixed height={400}>\r\n" +
+					"    <Space.Top size=\"20%\" />\r\n" +
+					"    <Space.Fill />\r\n" +
+					"    <Space.Bottom size=\"20%\" />\r\n" +
+					"  </Space.Fixed>\r\n" +
+					")"
+				}
+				</SyntaxHighlighter>
+
+				<Space.Fixed height={400}>
+				<Space.Top size="20%" style={{ backgroundColor: '#e0eee0' }}>
+					{Description("Top", "T")}
+				</Space.Top>t5 cf
+				<Space.Fill style={{ backgroundColor: '#eee0e0' }}>
+					{Description("Fill", "F")}
+				</Space.Fill>
+				<Space.Bottom size="20%" style={{ backgroundColor: '#e0eee0' }}>
+					{Description("Bottom", "B")}
+				</Space.Bottom>
+				</Space.Fixed>
+
+			</Tabs.TabPane>
+			</Tabs>		
+		</>
+	)
+}
diff --git a/demo/src/docs/Docs.tsx b/demo/src/docs/Docs.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import * as Space from 'react-spaces';
+import { Button, Icon, Menu } from 'antd';
+import 'antd/dist/antd.css';
+import { GettingStarted } from './GettingStarted';
+import { Types } from './Types';
+import { Anchored } from '../ui-demo/Anchored';
+import { Resizable } from './Resizable';
+import { Nested } from './Nested';
+import { Scrollable } from './Scrollable';
+import { Stacked } from './Stacked';
+import { SizingInfo } from './SizingInfo';
+import { VersionHistory } from './VersionHistory';
+import { Intro } from './Intro';
+import { Try } from './Try';
+
+export const Docs = () => {
+	return (
+		<Space.ViewPort>
+        <Space.Top size={80} style={{ backgroundColor: 'black', color: 'white', padding: 15 }}>
+          <Space.CenteredVertically>
+            <h1 style={{ color: 'white' }}>React Spaces</h1>
+          </Space.CenteredVertically>
+        </Space.Top>
+        <Space.Fill className="all-content">
+          <Space.Left className="sidebar" scrollable={true} size={250} style={{ paddingTop: 15, borderRight: '2px solid #ddd' }}>
+
+            <Menu>
+              <Menu.Item><a href="#getting-started">Getting started</a></Menu.Item>
+              <Menu.Item><a href="#types">Types</a></Menu.Item>
+              <Menu.Item><a href="#non-resizable">Anchored</a></Menu.Item>
+              <Menu.Item><a href="#resizable">Resizable</a></Menu.Item>
+              <Menu.Item><a href="#nested">Nested</a></Menu.Item>
+              <Menu.Item><a href="#scrollable">Scrollable</a></Menu.Item>
+              <Menu.Item><a href="#stacked">Stacked</a></Menu.Item>
+              <Menu.Item><a href="#sizeinfo">Sizing information</a></Menu.Item>
+              <Menu.Item><a href="#try">Try</a></Menu.Item>
+              <Menu.Item><a href="#changes">Version history</a></Menu.Item>
+            </Menu>
+
+            <div style={{ padding: 15}}>
+              <h3 className="sidebar-header">GitHub</h3>
+              <div style={{ marginBottom: 15 }}>
+                <Button type="primary" onClick={() => window.location.href = 'https://github.com/aeagle/react-spaces'}><Icon type="github" /> View on GitHub</Button>
+              </div>
+
+              <h3 className="sidebar-header">NPM <img style={{ position: 'relative', top: -2 }} alt="NPM version" src="https://img.shields.io/npm/v/react-spaces.svg" /></h3>
+
+              <h2 className="sidebar-header"><a style={{ color: 'black', fontSize: 18 }} href="https://twitter.com/allaneagle">@allaneagle</a></h2>
+            </div>
+
+          </Space.Left>
+          <Space.Fill className="main" scrollable={true} style={{ padding: 30, paddingTop: 0 }}>
+
+            <Intro />
+            <GettingStarted />
+            <Types />
+            <Anchored />
+            <Resizable />
+            <Nested />
+            <Scrollable />
+            <Stacked />
+            <SizingInfo />
+            <Try />
+            <VersionHistory />
+
+          </Space.Fill>
+
+        </Space.Fill>
+      </Space.ViewPort>
+	)
+}
+
+export const Description = (desc: string, mobileDesc: string) => (
+	<Space.Centered>
+	  <span className="description">
+		<strong className="desc">{desc}</strong>
+		<strong className="mobileDesc">{mobileDesc}</strong>
+		<Space.Info>{info => <div>{info.width.toFixed()} x {info.height.toFixed()}</div> }</Space.Info>
+	  </span>
+	</Space.Centered>
+)
diff --git a/demo/src/docs/GettingStarted.tsx b/demo/src/docs/GettingStarted.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+
+export const GettingStarted = () => {
+	return (
+		<>
+			<h2 id="getting-started">Getting started</h2>
+
+			<p>
+			Spaces can be used by importing the spaces using the following:
+			</p>
+
+			<SyntaxHighlighter language="html">
+			{
+				"npm install react-spaces --save"
+			}
+			</SyntaxHighlighter>
+
+			<SyntaxHighlighter language="html">
+			{
+				"import * as Space from 'react-spaces';"
+			}
+			</SyntaxHighlighter>
+		</>
+	)
+}
diff --git a/demo/src/docs/Intro.tsx b/demo/src/docs/Intro.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+
+export const Intro = () => {
+	return (
+		<>
+  			<p id="intro" style={{ fontWeight: 400, paddingTop: 30, paddingBottom: 0, fontSize: 28, color: '#777' }}>
+              React Spaces allow you to divide a page or container into nestable, anchored, scrollable and resizable spaces.
+            </p>
+
+            <p>
+              <h2>Features</h2>
+
+              <ul>
+                <li>
+                  No styling to achieve simple or complex layouts.
+                </li>
+                <li>
+                  Spaces know how to behave in relation to each other and resize accordingly.
+                </li>
+                <li>
+                  Spaces don't have any visual element to them (even padding or margins). You can fill them with whatever you want.
+                </li>
+              </ul>
+            </p>
+
+            <p>
+              <img src="http://www.allaneagle.com/react-spaces/react-spaces-demo.gif" alt="Screen demo" width="100%" style={{ maxWidth: 1000 }} />
+            </p>
+		</>
+	)
+}
diff --git a/demo/src/docs/Nested.tsx b/demo/src/docs/Nested.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import * as Space from 'react-spaces';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { Tabs } from 'antd';
+import { Description } from './Docs';
+
+export const Nested = () => {
+	return (
+		<>
+            <h2 id="nested">Nested spaces</h2>
+
+			<p>
+			Spaces can be nested within other spaces to create complex layouts.
+			</p>
+
+			<Tabs defaultActiveKey="1">
+			<Tabs.TabPane tab="Left/right nested within top/fill/bottom" key="1">
+
+				<SyntaxHighlighter language="html">
+				{
+					"const App = () => (\r\n" +
+					"  <Space.Fixed height={400}>\r\n" +
+					"    <Space.TopResizable size=\"20%\" />\r\n" +
+					"    <Space.Fill>\r\n" +
+					"      <Space.LeftResizable size=\"20%\" />\r\n" +
+					"       <Space.Fill />\r\n" +
+					"      <Space.RightResizable size=\"20%\" />\r\n" +
+					"    </Space.Fill>\r\n" +
+					"    <Space.BottomResizable size=\"20%\" />\r\n" +
+					"  </Space.Fixed>\r\n" +
+					")"
+				}
+				</SyntaxHighlighter>
+
+				<Space.Fixed height={400}>
+				<Space.TopResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eee0' }}>
+					{Description("Top", "T")}
+				</Space.TopResizable>
+				<Space.Fill>
+					<Space.LeftResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eeee' }}>
+					{Description("Left", "L")}
+					</Space.LeftResizable>
+					<Space.Fill trackSize={true} style={{ backgroundColor: '#eee0e0' }}>
+					{Description("Fill", "F")}
+					</Space.Fill>
+					<Space.RightResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eeee' }}>
+					{Description("Right", "R")}
+					</Space.RightResizable>
+				</Space.Fill>
+				<Space.BottomResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eee0' }}>
+					{Description("Bottom", "B")}
+				</Space.BottomResizable>
+				</Space.Fixed>
+
+			</Tabs.TabPane>
+			<Tabs.TabPane tab="Top/bottom nested within left/fill/right" key="2">
+
+				<SyntaxHighlighter language="html">
+				{
+					"const App = () => (\r\n" +
+					"  <Space.Fixed height={400}>\r\n" +
+					"    <Space.LeftResizable size=\"25%\" />\r\n" +
+					"    <Space.Fill>\r\n" +
+					"      <Space.TopResizable size=\"25%\" />\r\n" +
+					"       <Space.Fill />\r\n" +
+					"      <Space.BottomResizable size=\"25%\" />\r\n" +
+					"    </Space.Fill>\r\n" +
+					"    <Space.RightResizable size=\"25%\" />\r\n" +
+					"  </Space.Fixed>\r\n" +
+					")"
+				}
+				</SyntaxHighlighter>
+
+				<Space.Fixed height={400}>
+				<Space.LeftResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eeee' }}>
+					{Description("Left", "L")}
+				</Space.LeftResizable>
+				<Space.Fill>
+					<Space.TopResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eee0' }}>
+					{Description("Top", "T")}
+					</Space.TopResizable>
+					<Space.Fill trackSize={true} style={{ backgroundColor: '#eee0e0' }}>
+					{Description("Fill", "F")}
+					</Space.Fill>
+					<Space.BottomResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eee0' }}>
+					{Description("Bottom", "B")}
+					</Space.BottomResizable>
+				</Space.Fill>
+				<Space.RightResizable trackSize={true} size="25%" style={{ backgroundColor: '#e0eeee' }}>
+					{Description("Right", "R")}
+				</Space.RightResizable>
+				</Space.Fixed>
+
+			</Tabs.TabPane>
+			</Tabs>
+		</>
+	)
+}