resizable

bau-ui/examples/bau-storybook/src/components/navBarMenu.js

@@ -141,6 +141,8 @@ export default function (context) {
               href: "/components/radioButtonGroup",
             },
           },
+          { data: { name: "Resizable", href: "/components/resizable" } },
+
           { data: { name: "Select", href: "/components/select" } },
           { data: { name: "Select Native", href: "/components/selectNative" } },
           { data: { name: "Skeleton", href: "/components/skeleton" } },

bau-ui/examples/bau-storybook/src/landingPage.js

@@ -60,7 +60,7 @@ export default function (context) {
       title: "UI components for the web",
       Content: () => [
         p(
-          "Over 45 components such as button, input, tabs, autocomplete etc ..."
+          "Over 50 components such as button, input, tabs, autocomplete etc ..."
         ),
         Button(
           {

bau-ui/examples/bau-storybook/src/pages/resizable/resizable-horizontal-1.ts

@@ -0,0 +1,49 @@
+import resizable from "@grucloud/bau-ui/resizable";
+import { Context } from "@grucloud/bau-ui/context";
+
+export default (context: Context) => {
+  const { bau, css } = context;
+  const { section, div } = bau.tags;
+
+  const { PanelGroup, Panel, Handle } = resizable(context, {
+    class: css`
+      display: inline-flex;
+      border: 1px var(--color-emphasis-100) solid;
+      width: 400px;
+    `,
+  });
+
+  const Panel1 = () =>
+    Panel(
+      {
+        class: css`
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-width: fit-content;
+          width: 100px;
+          height: 100px;
+        `,
+      },
+      div("Resize me")
+    );
+
+  const HandleIcon = () =>
+    div(
+      {
+        class: css`
+          background-color: var(--color-emphasis-100);
+          color: var(--color-emphasis-400);
+          border-radius: var(--global-radius);
+          font-size: large;
+          padding: 0.2rem;
+          z-index: 1;
+        `,
+      },
+      "\u22EE"
+    );
+
+  return () => {
+    return section(PanelGroup(Panel1(), Handle(HandleIcon())));
+  };
+};

bau-ui/examples/bau-storybook/src/pages/resizable/resizable-horizontal-2.ts

@@ -0,0 +1,49 @@
+import resizable from "@grucloud/bau-ui/resizable";
+import { Context } from "@grucloud/bau-ui/context";
+
+export default (context: Context) => {
+  const { bau, css } = context;
+  const { section, div } = bau.tags;
+
+  const { PanelGroup, Panel, Handle } = resizable(context, {
+    class: css`
+      display: inline-flex;
+      border: 1px var(--color-emphasis-100) solid;
+      width: 600px;
+    `,
+  });
+
+  const Panel1 = () =>
+    Panel(
+      {
+        class: css`
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-width: fit-content;
+          width: 100px;
+          height: 100px;
+        `,
+      },
+      div("Panel1")
+    );
+
+  const Panel2 = () =>
+    Panel(
+      {
+        class: css`
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-width: fit-content;
+          width: 100px;
+          height: 100px;
+        `,
+      },
+      div("Panel2")
+    );
+
+  return () => {
+    return section(PanelGroup(Panel1(), Handle(), Panel2()));
+  };
+};

bau-ui/examples/bau-storybook/src/pages/resizable/resizable-nested.ts

@@ -0,0 +1,90 @@
+import resizable from "@grucloud/bau-ui/resizable";
+import { Context } from "@grucloud/bau-ui/context";
+
+export default (context: Context) => {
+  const { bau, css } = context;
+  const { section, div } = bau.tags;
+
+  const { PanelGroup, Panel, Handle } = resizable(context, {
+    class: css`
+      display: inline-flex;
+      border: 1px var(--color-emphasis-500) solid;
+      width: 600px;
+      height: 300px;
+
+      & > div.handle {
+        width: 0.1rem;
+        &::after {
+          width: 0.1rem;
+        }
+      }
+    `,
+  });
+
+  const vertical = resizable(context, {
+    direction: "vertical",
+    class: css`
+      flex-grow: 1;
+      display: inline-flex;
+      flex-direction: column;
+      min-width: fit-content;
+      & > div.handle {
+        height: 0.1rem;
+        &::after {
+          height: 0.1rem;
+        }
+      }
+    `,
+  });
+
+  const NavBar = () =>
+    Panel(
+      {
+        class: css`
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-width: fit-content;
+          width: 100px;
+        `,
+      },
+      div("NavBar")
+    );
+
+  const Main = () =>
+    Panel(
+      {
+        class: css`
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-height: 2rem;
+          height: 70%;
+        `,
+      },
+      div("Main")
+    );
+
+  const Footer = () =>
+    Panel(
+      {
+        class: css`
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-height: 2rem;
+        `,
+      },
+      div("Footer")
+    );
+
+  return () => {
+    return section(
+      PanelGroup(
+        NavBar(),
+        Handle(),
+        vertical.PanelGroup(Main(), vertical.Handle(), Footer())
+      )
+    );
+  };
+};

bau-ui/examples/bau-storybook/src/pages/resizable/resizable-vertical-2.ts

@@ -0,0 +1,66 @@
+import resizable from "@grucloud/bau-ui/resizable";
+import { Context } from "@grucloud/bau-ui/context";
+
+export default (context: Context) => {
+  const { bau, css } = context;
+  const { section, div } = bau.tags;
+
+  const { PanelGroup, Panel, Handle } = resizable(context, {
+    direction: "vertical",
+    class: css`
+      display: inline-flex;
+      flex-direction: column;
+      border: 1px grey dotted;
+      height: 300px;
+    `,
+  });
+
+  const Panel1 = () =>
+    Panel(
+      {
+        class: css`
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-height: 50px;
+          width: 100px;
+          height: 100px;
+        `,
+      },
+      div("Panel1")
+    );
+
+  const Panel2 = () =>
+    Panel(
+      {
+        class: css`
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          min-height: 50px;
+          width: 100px;
+          height: 100px;
+        `,
+      },
+      div("Panel2")
+    );
+
+  const HandleIcon = () =>
+    div(
+      {
+        class: css`
+          background-color: var(--color-emphasis-100);
+          color: var(--color-emphasis-400);
+          border-radius: var(--global-radius);
+          font-size: large;
+          z-index: 1;
+          line-height: 0.5;
+        `,
+      },
+      "\u22EF"
+    );
+
+  return () => {
+    return section(PanelGroup(Panel1(), Handle(HandleIcon()), Panel2()));
+  };
+};

bau-ui/examples/bau-storybook/src/pages/resizable/resizable.examples.ts

@@ -0,0 +1,59 @@
+import { Context } from "@grucloud/bau-ui/context";
+
+import pageExample from "../pageExample.ts";
+
+import resizableHorizontal1 from "./resizable-horizontal-1.ts";
+// @ts-ignore
+import codeHorizontal1 from "./resizable-horizontal-1.ts?raw";
+
+import resizableHorizontal2 from "./resizable-horizontal-2.ts";
+// @ts-ignore
+import codeHorizontal2 from "./resizable-horizontal-2.ts?raw";
+
+import resizableVertical2 from "./resizable-vertical-2.ts";
+// @ts-ignore
+import codeVertical2 from "./resizable-vertical-2.ts?raw";
+
+import resizableNested from "./resizable-nested.ts";
+// @ts-ignore
+import codeNested from "./resizable-nested.ts?raw";
+
+export const resizableSpec = {
+  title: "Resizable",
+  package: "resizable",
+  description: "The resizable component allows to resize panels",
+  sourceCodeUrl:
+    "https://github.com/grucloud/bau/blob/main/bau-ui/resizable/resizable.js",
+  importStatement: `import resizable from "@grucloud/bau-ui/resizable";`,
+  examples: [
+    {
+      title: "Horizontal 1 Panel",
+      description: "A resizable horizontal panel.",
+      code: codeHorizontal1,
+      createComponent: resizableHorizontal1,
+    },
+    {
+      title: "Horizontal 2 Panels",
+      description: "A resizable 2 side horizontal panel.",
+      code: codeHorizontal2,
+      createComponent: resizableHorizontal2,
+    },
+    {
+      title: "Vertical 2 Panels",
+      description: "A resizable 2 side vertical panel.",
+      code: codeVertical2,
+      createComponent: resizableVertical2,
+    },
+    {
+      title: "Nested",
+      description: "Nested panels.",
+      code: codeNested,
+      createComponent: resizableNested,
+    },
+  ],
+};
+
+export default (context: Context) => {
+  const PageExample = pageExample(context);
+  return () => PageExample(resizableSpec);
+};

bau-ui/examples/bau-storybook/src/routes.js

@@ -38,6 +38,7 @@ import paginationNavigationExamples from "./pages/paginationNavigation/paginatio
 import paperExamples from "./pages/paper/paper.examples";
 import radioButtonExamples from "./pages/radioButton/radioButton.examples";
 import radioButtonGroupExamples from "./pages/radioButtonGroup/radioButtonGroup.examples";
+import resizableExamples from "./pages/resizable/resizable.examples";
 import selectExamples from "./pages/select/select.examples";
 import selectNativeExamples from "./pages/selectNative/select-native.examples";
 import skeletonExamples from "./pages/skeleton/skeleton.examples";
@@ -336,6 +337,13 @@ export const createRoutes = ({ context }) => {
             component: selectExamples(context),
           }),
         },
+        {
+          path: "resizable",
+          action: () => ({
+            title: "Resizable",
+            component: resizableExamples(context),
+          }),
+        },
         {
           path: "selectNative",
           action: () => ({

bau-ui/resizable/index.d.ts

@@ -0,0 +1,15 @@
+declare module "@grucloud/bau-ui/resizable" {
+  type DefaultDesignProps = import("../constants").DefaultDesignProps;
+  type ComponentOption = import("../bau-ui").ComponentOption;
+
+  export type ResizableProps = {
+    direction?: "vertical" | "horizontal";
+  } & DefaultDesignProps;
+
+  type Component = import("../bau-ui").Component<ResizableProps>;
+
+  export default function (
+    context: any,
+    option?: ComponentOption & ResizableProps
+  ): { Panel: Component; PanelGroup: Component; Handle: Component };
+}

bau-ui/resizable/index.js

@@ -0,0 +1 @@
+export { default } from "./resizable";