@linzjs/windows 1.0.0 → 1.1.0

package/src/panel/handleStyleSheetsChanges.ts

@@ -0,0 +1,71 @@
+import { throttle } from "lodash-es";
+
+// Copy the app's styles into the new window
+export const copyStyleSheets = (newHeadMountElement: HTMLDivElement) => {
+  const stylesheets = Array.from(document.styleSheets);
+
+  stylesheets.forEach((stylesheet) => {
+    if (stylesheet.href) {
+      const newStyleElement = document.createElement("link");
+      newStyleElement.rel = "stylesheet";
+      newStyleElement.href = stylesheet.href;
+      newHeadMountElement.appendChild(newStyleElement);
+    } else {
+      const css = stylesheet as CSSStyleSheet;
+      if (css && css.cssRules && css.cssRules.length > 0) {
+        const newStyleElement = document.createElement("style");
+        Array.from(css.cssRules).forEach((rule) => {
+          newStyleElement.appendChild(document.createTextNode(rule.cssText));
+        });
+        newHeadMountElement.appendChild(newStyleElement);
+      }
+    }
+  });
+};
+/**
+ * Add listener for dynamic style changes
+ * This works by listening to any changes to the head element
+ * If there are any changes it replaces all the styles in the floating window
+ * at most every 100ms
+ * @param newHeadMountElement
+ */
+export const observeStyleSheetChanges = (newHeadMountElement: HTMLDivElement) => {
+  const targetNode = document.querySelector("head");
+
+  if (!targetNode) {
+    return null;
+  }
+  // Options for the observer (which mutations to observe)
+  const config = { /*attributes: true,*/ childList: true /*, subtree: true */ };
+
+  //throttle the copying of the all the styles at most 100ms
+  const throttleCopyStyleSheets = throttle(() => {
+    copyStyleSheets(newHeadMountElement);
+  }, 100);
+
+  // Callback function to execute when mutations are observed
+  const callback: MutationCallback = function (mutationList) {
+    for (const mutation of mutationList) {
+      if (mutation.type === "childList") {
+        // console.log("A child node has been added or removed.", mutation);
+        //naive way up updating style sheets
+        //the observer tells us what has been added and removed, but syncing the changes with the
+        //floating window is complicated, so the easiest way is to just wait for modifications for finish
+        //updating, then replace them all
+        //we could probably just copy all style on every modification, by that might have a performance hit
+        throttleCopyStyleSheets();
+      } /*else if (mutation.type === "attributes") {
+              //Do we need to handle attribute modifications?
+              // console.log("The " + mutation.attributeName + " attribute was modified.");
+            }*/
+    }
+  };
+
+  // Create an observer instance linked to the callback function
+  const observer = new MutationObserver(callback);
+
+  // Start observing the target node for configured mutations
+  observer.observe(targetNode, config);
+
+  return observer;
+};

package/src/stories/Introduction.mdx

@@ -0,0 +1,18 @@
+# @linzjs/windows
+
+[![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
+
+> Reusable promise based windowing component for LINZ / Toitū te whenua.
+
+Rect state based modals/windows are painful because they require:
+- shared states for open/closed.
+- callbacks/states for return values.
+- inline modal/window includes, which prevent you from closing the invoking component before the modal/window has
+completed.
+
+This module gives you promise based modals/windows which don't require all the state
+based boiler-plate / inline-components.
+
+## Features
+- Async HTML dialog based Modals.
+- Draggable and resizeable, pop-in/out Windows.

package/src/stories/Introduction.stories.tsx

@@ -0,0 +1,8 @@
+import { Meta } from "@storybook/react";
+
+// eslint-disable-next-line storybook/story-exports
+const meta: Meta<typeof Object> = {
+  title: "Introduction",
+};
+
+export default meta;

package/src/stories/modal/Modal.mdx

@@ -1,9 +1,10 @@
+import {getBlocks, blockToString} from "../support.js";
 import {Meta, Source, Story} from "@storybook/blocks";
 import * as ModalStories from "./Modal.stories"
 
 import myModule from './TestModal?raw';
 
-<Meta title="Modal/Primary" of={ModalStories}/>
+<Meta name="Show" of={ModalStories}/>
 # Show Modal
 ## Example
 Click to show the modal:
@@ -11,10 +12,15 @@ Click to show the modal:
 
 ## Code
 <br/>
-{myModule.toString().split("// #").splice(1).map(block => (
+{getBlocks(myModule).map((block) => (
 <>
     <h3>{block.split("\n")[0]}</h3>
-    <Source code={block.split("\n").splice(1).join("\n")} language='typescript'/>
+    <Source code={blockToString(block)} language="typescript"  />
 </>
 ))}
 
+### Example: Mocking Modal response
+
+<Source code={"{ /* Responds with the value 1 */ }\n<ModalContext.Provider value={showModal: async() => 1}>\n" +
+    "... Component under test ...\n" +
+    "</ModalContext.Provider>\n"} language="typescript"/>

package/src/stories/modal/Modal.stories.tsx

@@ -3,7 +3,7 @@ import { TestModalUsage } from "./TestModal";
 import type { Meta, StoryObj } from "@storybook/react";
 
 const meta: Meta<typeof TestModalUsage> = {
-  title: "Modal",
+  title: "Components/Modal",
   component: TestModalUsage,
   argTypes: {
     backgroundColor: { control: "color" },

package/src/stories/modal/PreModal.mdx

@@ -0,0 +1,26 @@
+import {getBlocks, blockToString} from "../support";
+import {Meta, Source, Story} from "@storybook/blocks";
+import * as PreModalStories from "./PreModal.stories"
+
+import myModule from './PreModal?raw';
+
+<Meta name="Show Preset Modal" of={PreModalStories}/>
+# Show Preset Modal
+## Example
+Click to show the modal:
+<Story of={PreModalStories.ShowPreModal}/>
+
+## Code
+<br/>
+{getBlocks(myModule).map((block) => (
+<>
+    <h3>{block.split("\n")[0]}</h3>
+    <Source code={blockToString(block)} language="typescript"  />
+</>
+))}
+
+### Example: Mocking Modal response
+
+<Source code={"{ /* Responds with the value 1 */ }\n<ModalContext.Provider value={showModal: async() => 1}>\n" +
+    "... Component under test ...\n" +
+    "</ModalContext.Provider>\n"} language="typescript"/>

package/src/stories/modal/PreModal.stories.tsx

@@ -0,0 +1,27 @@
+import { ModalContextProvider } from "../../modal/ModalContextProvider";
+import { PreModalUsage } from "./PreModal";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof PreModalUsage> = {
+  title: "Components/Modal",
+  component: PreModalUsage,
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  decorators: [
+    (Story: any) => (
+      <div>
+        <ModalContextProvider>
+          <Story />
+        </ModalContextProvider>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ShowPreModal: Story = {
+  args: {},
+};

package/src/stories/modal/PreModal.tsx

@@ -0,0 +1,79 @@
+import "./TestModal.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { ModalContextProvider } from "../../modal/ModalContextProvider";
+import { PreModal } from "../../modal/PreModal";
+import { useShowModal } from "../../modal/useShowModal";
+
+// #Example: Modal Context Provider
+// Don't forget to add a ModalContextProvider at the root of your project
+export const App = () => (
+  <ModalContextProvider>
+    <div>...the rest of your app...</div>
+  </ModalContextProvider>
+);
+
+// #Example: PreModal Invocation
+export const PreModalUsage = () => {
+  // showModal to show modal, modalOwnerRef is only required if you have popout windows
+  const { showModal, modalOwnerRef } = useShowModal();
+
+  const showWarningModal = async () => {
+    const result = await showModal(PreModal, {
+      level: "warning",
+      children: (
+        <>
+          <h2>You are about to make changes</h2>
+          <p>Are you sure that you want to make these changes?</p>
+        </>
+      ),
+    });
+    alert(`Modal result is: ${result}`);
+  };
+
+  const showInfoModal = async () => {
+    await showModal(PreModal, {
+      level: "info",
+      children: (
+        <>
+          <h2>You are a fantastic person</h2>
+          <p>Keep it up!</p>
+        </>
+      ),
+    });
+  };
+
+  const showErrorModal = async () => {
+    await showModal(PreModal, {
+      level: "error",
+      children: (
+        <>
+          <h2>Something is not right</h2>
+          <p>Maybe stop doing that</p>
+        </>
+      ),
+    });
+  };
+
+  const showSuccessModal = async () => {
+    await showModal(PreModal, {
+      level: "success",
+      children: (
+        <>
+          <h2>You are a success</h2>
+          <p>Keep succeeding!</p>
+        </>
+      ),
+    });
+  };
+
+  // Remember to add the modalOwnerRef!
+  return (
+    <div ref={modalOwnerRef}>
+      <button onClick={showWarningModal}>Show Warning Bi-Modal</button>{" "}
+      <button onClick={showInfoModal}>Show Info Bi-Modal</button>{" "}
+      <button onClick={showErrorModal}>Show Error Bi-Modal</button>{" "}
+      <button onClick={showSuccessModal}>Show Success Bi-Modal</button>
+    </div>
+  );
+};

package/src/stories/modal/TestModal.scss

@@ -1,3 +1,6 @@
+@use "node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use "node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars.scss" as colours;
+
 dialog > div {
   padding: 20px;
   display: flex;
@@ -12,4 +15,22 @@ dialog > div {
   button {
     flex: 1;
   }
+}
+
+.lui-modal {
+  margin: 0 !important;
+}
+
+button:focus {
+  outline: 2px solid colours.$brand-primary;
+  // make sure the button sits above the others so the outline is not cut off on focus
+  position: relative;
+}
+
+dialog::backdrop {
+  background: rgba(0,0,0,0.6);
+}
+
+dialog {
+  border: none;
 }

package/src/stories/panel/PanelButtons/ShowPanel.mdx

@@ -0,0 +1,21 @@
+import {getBlocks, blockToString} from "../../support.js";
+import {Meta, Source, Story} from "@storybook/blocks";
+import * as ShowPanelStories from "./ShowPanel.stories"
+
+import myModule from './ShowPanel.tsx?raw';
+
+<Meta name="Buttons" of={ShowPanelStories}/>
+# Show Panel
+## Example
+Click to show the panel:
+<Story of={ShowPanelStories.ShowPanel}/>
+
+## Code
+<br/>
+{getBlocks(myModule).map(block => (
+<>
+    <h3>{block.split("\n")[0]}</h3>
+    <Source code={blockToString(block)} language='typescript'/>
+</>
+))}
+

package/src/stories/panel/PanelButtons/ShowPanel.stories.tsx

@@ -0,0 +1,27 @@
+import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+import { TestShowPanelButtons } from "./ShowPanel";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof TestShowPanelButtons> = {
+  title: "Components/PanelButtons",
+  component: TestShowPanelButtons,
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  decorators: [
+    (Story: any) => (
+      <div>
+        <PanelsContextProvider baseZIndex={500}>
+          <Story />
+        </PanelsContextProvider>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ShowPanel: Story = {
+  args: {},
+};

package/src/stories/panel/PanelButtons/ShowPanel.tsx

@@ -0,0 +1,86 @@
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { OpenPanelButton } from "../../../panel/OpenPanelButton";
+import {
+  ButtonIconHorizontalGroup,
+  ButtonIconSeparator,
+  ButtonIconVerticalGroup,
+  OpenPanelIcon,
+} from "../../../panel/OpenPanelIcon";
+import { Panel, PanelContent, PanelHeader } from "../../../panel/Panel";
+
+/* exclude */
+export interface ShowPanelProps {
+  data: number;
+}
+
+export const ShowPanel = ({ data }: ShowPanelProps) => {
+  return (
+    <Panel title={`Panel demo ${data}`} size={{ width: 640, height: 400 }}>
+      <PanelHeader />
+      <PanelContent>
+        <PanelContents />
+      </PanelContent>
+    </Panel>
+  );
+};
+
+export const PanelContents = () => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Owner</th>
+          <th>Title</th>
+          <th>Address</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Roy</td>
+          <td>OT10A/1011</td>
+          <td>5 Grange St, Auckland</td>
+        </tr>
+        <tr>
+          <td>Ryan</td>
+          <td>OT10A/154</td>
+          <td>145 Garry St, Wellington</td>
+        </tr>
+        <tr>
+          <td>Suzy</td>
+          <td>OT10A/155</td>
+          <td>15 Aix St, Auckland</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+/* exclude */
+
+// #Example: Show Panel Buttons
+export const TestShowPanelButtons = () => (
+  <>
+    <div>
+      <OpenPanelButton buttonText={"Panel name 1"} component={() => <ShowPanel data={1} />} />{" "}
+      <OpenPanelButton buttonText={"Panel name 2"} component={() => <ShowPanel data={2} />} />
+    </div>
+    <br />
+    <ButtonIconHorizontalGroup>
+      <OpenPanelIcon iconTitle={"Marks"} icon={"ic_marks"} component={() => <ShowPanel data={1} />} />
+      <ButtonIconSeparator />
+      <OpenPanelIcon iconTitle={"Vectors"} icon={"ic_line_irregular"} component={() => <ShowPanel data={2} />} />
+    </ButtonIconHorizontalGroup>
+    <br />
+    <br />
+    <ButtonIconVerticalGroup>
+      <OpenPanelIcon iconTitle={"Marks"} icon={"ic_marks"} component={() => <ShowPanel data={1} />} />
+      <ButtonIconSeparator />
+      <OpenPanelIcon iconTitle={"Vectors"} icon={"ic_timeline"} component={() => <ShowPanel data={2} />} />
+      <OpenPanelIcon
+        iconTitle={"Irregular lines"}
+        icon={"ic_line_irregular"}
+        component={() => <ShowPanel data={3} />}
+      />
+    </ButtonIconVerticalGroup>
+  </>
+);

package/src/stories/panel/ShowPanel/ShowPanel.mdx

@@ -0,0 +1,20 @@
+import {getBlocks, blockToString} from "../../support.js";
+import {Meta, Source, Story} from "@storybook/blocks";
+import * as ShowPanelStories from "./ShowPanel.stories.tsx"
+
+import myModule from './ShowPanel.tsx?raw';
+
+<Meta name="Show" of={ShowPanelStories}/>
+# Show Panel
+## Example
+Click to show the panel:
+<Story of={ShowPanelStories.ShowPanel}/>
+
+## Code
+<br/>
+{getBlocks(myModule).map(block => (
+<>
+    <h3>{block.split("\n")[0]}</h3>
+    <Source code={blockToString(block)} language='typescript'/>
+</>
+))}

package/src/stories/panel/ShowPanel/ShowPanel.stories.tsx

@@ -0,0 +1,27 @@
+import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+import { TestShowPanel } from "./ShowPanel";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof TestShowPanel> = {
+  title: "Components/Panel",
+  component: TestShowPanel,
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  decorators: [
+    (Story: any) => (
+      <div>
+        <PanelsContextProvider baseZIndex={500}>
+          <Story />
+        </PanelsContextProvider>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ShowPanel: Story = {
+  args: {},
+};

package/src/stories/panel/ShowPanel/ShowPanel.tsx

@@ -0,0 +1,70 @@
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { OpenPanelButton } from "../../../panel/OpenPanelButton";
+import { Panel, PanelContent, PanelHeader } from "../../../panel/Panel";
+import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+
+// #Example: Panel Context Provider
+// Don't forget to add a PanelContextProvider at the root of your project
+export const App = () => (
+  <PanelsContextProvider baseZIndex={500}>
+    <div>...the rest of your app...</div>
+  </PanelsContextProvider>
+);
+
+// #Example: Panel Component
+export interface ShowPanelComponentProps {
+  data: number;
+}
+
+export const ShowPanelComponent = ({ data }: ShowPanelComponentProps) => (
+  <Panel title={`Panel demo ${data}`} size={{ width: 640, height: 400 }}>
+    <PanelHeader />
+    <PanelContent>
+      <PanelContents />
+    </PanelContent>
+  </Panel>
+);
+
+/* exclude */
+export const PanelContents = () => {
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Owner</th>
+          <th>Title</th>
+          <th>Address</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Roy</td>
+          <td>OT10A/1011</td>
+          <td>5 Grange St, Auckland</td>
+        </tr>
+        <tr>
+          <td>Ryan</td>
+          <td>OT10A/154</td>
+          <td>145 Garry St, Wellington</td>
+        </tr>
+        <tr>
+          <td>Suzy</td>
+          <td>OT10A/155</td>
+          <td>15 Aix St, Auckland</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+/* exclude */
+
+// #Example: Panel Invocation
+export const TestShowPanel = () => {
+  return (
+    <>
+      <OpenPanelButton buttonText={"TestPanel 1"} component={() => <ShowPanelComponent data={1} />} />{" "}
+      <OpenPanelButton buttonText={"TestPanel 2"} component={() => <ShowPanelComponent data={2} />} />
+    </>
+  );
+};

package/src/stories/panel/ShowPanelResizingAgGrid/ShowPanelResizingAgGrid.mdx

@@ -0,0 +1,21 @@
+import {getBlocks, blockToString} from "../../support.js";
+import {Meta, Source, Story} from "@storybook/blocks";
+import * as PanelStories from "./ShowPanelResizingAgGrid.stories.tsx"
+
+import myModule from './ShowPanelResizingStepAgGrid.tsx?raw';
+
+<Meta name="Show Resizing step-ag-grid" of={PanelStories}/>
+# Show Panel
+## Example
+Click to show the panel:
+<Story of={PanelStories.PanelResizing}/>
+
+## Code
+<br/>
+{getBlocks(myModule).map(block => (
+<>
+    <h3>{block.split("\n")[0]}</h3>
+    <Source code={blockToString(block)} language='typescript'/>
+</>
+))}
+

package/src/stories/panel/ShowPanelResizingAgGrid/ShowPanelResizingAgGrid.stories.tsx

@@ -0,0 +1,27 @@
+import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+import { TestShowPanelResizingAgGrid } from "./ShowPanelResizingStepAgGrid";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof TestShowPanelResizingAgGrid> = {
+  title: "Components/Panel",
+  component: TestShowPanelResizingAgGrid,
+  argTypes: {
+    backgroundColor: { control: "color" },
+  },
+  decorators: [
+    (Story: any) => (
+      <div>
+        <PanelsContextProvider baseZIndex={500}>
+          <Story />
+        </PanelsContextProvider>
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const PanelResizing: Story = {
+  args: {},
+};