Skip to content

Commit

Permalink
Revised
Browse files Browse the repository at this point in the history
  • Loading branch information
@aeagle
aeagle committed Apr 7, 2024
1 parent 9a42b19 commit b7ee4f5
Show file tree
Hide file tree
Showing 3 changed files with 88 additions and 58 deletions.
68 changes: 11 additions & 57 deletions src/components/stories/00-docs/01-GettingStarted.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Meta, Story, Canvas, Props } from "@storybook/blocks";
import { CommonHeader, DemoUI } from "../Utils";
import { CenterType, ViewPort, Fixed, Top, Right, LeftResizable, BottomResizable, Fill, Options } from "../../..";
import * as Stories from "./01-GettingStarted.stories";

<CommonHeader />

<Meta title="React Spaces/Getting started" />
<Meta of={Stories} />

## Getting started

Expand Down Expand Up @@ -47,17 +48,9 @@ lines and text alignment have been added specifically for this example. In pract
have any visual element, padding or margins leaving it up to you to fill them or style them however
you want.*

<React.StrictMode>
<Fixed style={{ outline: '1px solid black' }} className="container" height={400}>
<LeftResizable style={{ borderRight: '1px dashed black' }} size="25%" centerContent={CenterType.HorizontalVertical}>
Sidebar
</LeftResizable>

<Fill centerContent={CenterType.HorizontalVertical}>
Main content
</Fill>
</Fixed>
</React.StrictMode>
<Canvas>
<Story of={Stories.Demo1} />
</Canvas>

Notice how the fill space automatically adjusts it's size when the left resizable space is resized with
the mouse.
Expand Down Expand Up @@ -88,23 +81,9 @@ const App = () => (

Here we have added additional nested spaces inside the original `<Fill />` space to achieve this:

<React.StrictMode>
<Fixed style={{ outline: '1px solid black' }} className="container" height={400}>
<LeftResizable style={{ borderRight: '1px dashed black' }} size="25%" centerContent={CenterType.HorizontalVertical}>
Sidebar
</LeftResizable>

<Fill>
<Fill centerContent={CenterType.HorizontalVertical}>
Main content
</Fill>

<BottomResizable style={{ borderTop: '1px dashed black' }} size={100} centerContent={CenterType.HorizontalVertical}>
Bottom area
</BottomResizable>
</Fill>
</Fixed>
</React.StrictMode>
<Canvas>
<Story of={Stories.Demo2} />
</Canvas>

We can add further nested spaces to add elements like title bars into different areas.

Expand Down Expand Up @@ -143,34 +122,9 @@ const App = () => (

Now we have something like below:

<React.StrictMode>
<Fixed style={{ outline: '1px solid black' }} className="container" height={400}>
<Top style={{ borderBottom: '1px dashed black', padding: 5 }} order={1} size={25} centerContent={CenterType.Vertical}>
Title
</Top>

<Top style={{ borderBottom: '1px dashed black', padding: 5 }} order={2} size={25} centerContent={CenterType.Vertical}>
Menu bar
</Top>

<Fill>
<LeftResizable style={{ borderRight: '1px dashed black' }} size="25%">
<Top style={{ borderBottom: '1px dashed black', padding: 5 }} size={25} centerContent={CenterType.Vertical}>Sidebar title</Top>
<Fill centerContent={CenterType.HorizontalVertical}>Sidebar</Fill>
</LeftResizable>

<Fill>
<Fill centerContent={CenterType.HorizontalVertical}>
Main content
</Fill>

<BottomResizable style={{ borderTop: '1px dashed black' }} size={100} centerContent={CenterType.HorizontalVertical}>
Bottom area
</BottomResizable>
</Fill>
</Fill>
</Fixed>
</React.StrictMode>
<Canvas>
<Story of={Stories.Demo3} />
</Canvas>

### Introducing simple interactivity

Expand Down
76 changes: 76 additions & 0 deletions src/components/stories/00-docs/01-GettingStarted.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import * as React from "react";
import { LeftResizable, Fill, Fixed, BottomResizable, Top } from "../..";
import { CenterType } from "../../../core-types";

export default {
title: "React Spaces/Getting started",
};

export const Demo1 = {
render: () => (
<React.StrictMode>
<Fixed style={{ outline: "1px solid black" }} className="container" height={400}>
<LeftResizable style={{ borderRight: "1px dashed black" }} size="25%" centerContent={CenterType.HorizontalVertical}>
Sidebar
</LeftResizable>

<Fill centerContent={CenterType.HorizontalVertical}>Main content</Fill>
</Fixed>
</React.StrictMode>
),

name: "Non-resizable",
};

export const Demo2 = {
render: () => (
<React.StrictMode>
<Fixed style={{ outline: "1px solid black" }} className="container" height={400}>
<LeftResizable style={{ borderRight: "1px dashed black" }} size="25%" centerContent={CenterType.HorizontalVertical}>
Sidebar
</LeftResizable>

<Fill>
<Fill centerContent={CenterType.HorizontalVertical}>Main content</Fill>

<BottomResizable style={{ borderTop: "1px dashed black" }} size={100} centerContent={CenterType.HorizontalVertical}>
Bottom area
</BottomResizable>
</Fill>
</Fixed>
</React.StrictMode>
),
};

export const Demo3 = {
render: () => (
<React.StrictMode>
<Fixed style={{ outline: "1px solid black" }} className="container" height={400}>
<Top style={{ borderBottom: "1px dashed black", padding: 5 }} order={1} size={25} centerContent={CenterType.Vertical}>
Title
</Top>

<Top style={{ borderBottom: "1px dashed black", padding: 5 }} order={2} size={25} centerContent={CenterType.Vertical}>
Menu bar
</Top>

<Fill>
<LeftResizable style={{ borderRight: "1px dashed black" }} size="25%">
<Top style={{ borderBottom: "1px dashed black", padding: 5 }} size={25} centerContent={CenterType.Vertical}>
Sidebar title
</Top>
<Fill centerContent={CenterType.HorizontalVertical}>Sidebar</Fill>
</LeftResizable>

<Fill>
<Fill centerContent={CenterType.HorizontalVertical}>Main content</Fill>

<BottomResizable style={{ borderTop: "1px dashed black" }} size={100} centerContent={CenterType.HorizontalVertical}>
Bottom area
</BottomResizable>
</Fill>
</Fill>
</Fixed>
</React.StrictMode>
),
};
2 changes: 1 addition & 1 deletion src/components/stories/03-hooks/useCurrentSpace.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Meta, Story, Canvas, Props } from "@storybook/blocks";

import { ViewPort, Bottom } from "../../";
import { ViewPort, Positioned, Bottom } from "../../";
import { green, description, lorem } from "../Utils";
import { CommonHeader, PropsTable, StandardProps, AnchoredProps } from "../Utils";

Expand Down

0 comments on commit b7ee4f5

Please sign in to comment.