Added extra docs for useCurrentSpace() hook

Author: aeagle

src/components/stories/00-docs/03-UsefulEvents.stories.mdx

@@ -20,7 +20,7 @@ const Example = () => {
 	const shouldResize = // logic to determine if resizing should be possible
 
 	return (
-		<LeftResizable onResizeStart={() => shouldResize}>
+		<LeftResizable onResizeStart={(resizeType: "resize-left" | "resize-top" | "resize-right" | "resize-bottom") => shouldResize}>
 		...
 		</LeftResizable>
 	)
@@ -42,7 +42,7 @@ const Example = () => {
 
 	return (
 		<ViewPort>
-			<LeftResizable onResizeEnd={(newSize) => setSize(newSize)}>
+			<LeftResizable onResizeEnd={(newSize: number, domRect: DOMRect, resizeType: "resize-left" | "resize-top" | "resize-right" | "resize-bottom") => setSize(newSize)}>
 			  ...
 			</LeftResizable>
 		</ViewPort>

src/components/stories/02-components/Positioned.Resizable.stories.mdx

@@ -16,12 +16,13 @@ import { CommonHeader, PropsTable, PropsHeader, Prop, StandardProps } from "../U
 <Story name="Properties">
 	<PropsTable>
 		<PropsHeader>Positioned properties</PropsHeader>
-		<Prop name="bottom" type="number | string" description="Bottom offset from edge of parent space." />
+		<Prop name="bottom" type="number | string" description="Bottom offset from edge of parent space. (optional)" />
 		<Prop name="left" type="number | string" description="Left offset from edge of parent space." />
-		<Prop name="right" type="number | string" description="Right offset from edge of parent space." />
+		<Prop name="right" type="number | string" description="Right offset from edge of parent space. (optional)" />
 		<Prop name="top" type="number | string" description="Top offset from edge of parent space." />
-		<Prop name="width" type="number | string" description="Width of space" />
-		<Prop name="height" type="number | string" description="Height of space" />
+		<Prop name="width" type="number | string" description="Width of space (optional)" />
+		<Prop name="height" type="number | string" description="Height of space (optional)" />
+		<Prop name="resizable" type="(ResizeType | 'resize-left' | 'resize-top' | 'resize-right' | 'resize-bottom')[]" description="Array of sides that are resizable" />
 		<StandardProps />
 	</PropsTable>
 </Story>

src/components/stories/03-hooks/useCurrentSpace.stories.mdx

@@ -0,0 +1,40 @@
+import { Meta, Story, Canvas, Props } from "@storybook/addon-docs/blocks";
+import { withKnobs } from "@storybook/addon-knobs";
+import { ViewPort, Bottom } from "../../";
+import { green, description, lorem } from "../Utils";
+import { CommonHeader, PropsTable, StandardProps, AnchoredProps } from "../Utils";
+
+<CommonHeader />
+
+<Meta title="Hooks/useCurrentSpace" />
+
+## useCurrentSpace()
+
+Hook that gives information / events on closest parent space. For example:
+
+```jsx
+const InnerComponent = () => {
+	const space = useCurrentSpace(); // information on <Space.LeftResizable />
+
+	return <div>{$`width: ${space.size.width}, height: ${space.size.height}`}</div>
+}
+
+<Space.ViewPort>
+	<Space.LeftResizable size="20%">
+		<InnerComponent />
+	</Space.LeftResizable>
+</Space.ViewPort>
+
+```
+
+The hook returns the following information:
+
+- **size** - sizing information of the space from the DOM
+- **layer** - current layer of the space
+- **startMouseDrag** / **startTouchDrag** - a handler which can be attached to inner components to start drag behaviour on <Positioned /> spaces. i.e. could be used to implement a title bar in a dialog which can be used to drag the dialog.
+
+```jsx
+<button onMouseDown={space.startMouseDrag} onTouchStart={space.startTouchDrag}>
+	Drag handle
+</button>
+```

…tories/02-components/Testing.stories.mdx …s/stories/04-testing/Testing.stories.mdxsrc/components/stories/02-components/Testing.stories.mdx renamed to src/components/stories/04-testing/Testing.stories.mdx src/components/stories/02-components/Testing.stories.mdx renamed to src/components/stories/04-testing/Testing.stories.mdx

@@ -74,7 +74,7 @@ export const StandardProps = () => (
 		/>
 		<Prop
 			name="centerContent"
-			type="CenterType.Vertical ('vertical'), CenterType.HorizontalVertical ('horizontalVertical')"
+			type="CenterType.Vertical | CenterType.HorizontalVertical | 'vertical' | 'horizontalVertical'"
 			description="Apply centering to children."
 		/>
 		<Prop name="className" type="string" description="A class name to apply to the space element." />
@@ -143,7 +143,7 @@ export const ResizableProps = () => (
 		/>
 		<Prop
 			name="handlePlacement"
-			type="ResizeHandlePlacement.OverlayInside ('overlay-inside'), ResizeHandlePlacement.Inside ('inside'), ResizeHandlePlacement.OverlayBoundary ('overlay-boundary')"
+			type="ResizeHandlePlacement.OverlayInside | 'overlay-inside' | ResizeHandlePlacement.Inside | 'inside' | ResizeHandlePlacement.OverlayBoundary | 'overlay-boundary'"
 			default="overlay-inside"
 			description="Determines method of placement of the resize handle. By default the handle is placed overlays content inside the space ('overlay'). Other options are to take up space within the space ('inside') or to be overlayed in the middle of the boundary of the space and neighbouring spaces ('overlay-boundary')"
 		/>
@@ -156,7 +156,7 @@ export const ResizableProps = () => (
 		/>
 		<Prop
 			name="onResizeEnd"
-			type="(newSize: number, newRect: DOMRect) => void"
+			type="(newSize: number, newRect: DOMRect, resizeType: ResizeType | 'resize-left' | 'resize-top' | 'resize-right' | 'resize-bottom') => void"
 			description="Triggered when a resize ends. The final size in pixels of the space in after the resize is passed as the first parameter."
 		/>
 	</>