@linzjs/windows 1.0.0 → 1.1.1

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: {},
+};

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

@@ -0,0 +1,164 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/step-ag-grid/dist/GridTheme.scss";
+import "@linzjs/step-ag-grid/dist/index.css";
+
+import { OpenPanelButton } from "../../../panel/OpenPanelButton";
+import { Panel, PanelContent, PanelHeader } from "../../../panel/Panel";
+import { PanelContext } from "../../../panel/PanelContext";
+import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
+import { useContext, useMemo, useState } from "react";
+
+import {
+  ColDefT,
+  Grid,
+  GridCell,
+  GridContextProvider,
+  GridIcon,
+  GridPopoverMenu,
+  GridPopoverMessage,
+  GridUpdatingContextProvider,
+  GridWrapper,
+} from "@linzjs/step-ag-grid";
+
+// #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 TestPanelProps {
+  data: number;
+}
+
+export const TestPanelResizing = ({ data }: TestPanelProps) => {
+  return (
+    <Panel title={`Panel resizing demo ${data}`} size={{ width: 320, height: 400 }}>
+      <PanelHeader />
+      <PanelContent>
+        <PanelContentsWithResize />
+      </PanelContent>
+    </Panel>
+  );
+};
+
+// #Example: Panel Invocation
+export const TestShowPanelResizingAgGrid = () => (
+  <>
+    <OpenPanelButton buttonText={"TestPanel resizing 1"} component={() => <TestPanelResizing data={1} />} />{" "}
+    <OpenPanelButton buttonText={"TestPanel resizing 2"} component={() => <TestPanelResizing data={2} />} />
+  </>
+);
+
+/* exclude */
+interface ITestRow {
+  id: number;
+  position: string;
+  age: number;
+  desc: string;
+  dd: string;
+}
+
+/* exclude */
+
+// #Example: Resizing panel to content after load
+// Note: Resize can only be used from within the panel content.
+export const PanelContentsWithResize = () => {
+  // This is the first important bit
+  const { resizePanel } = useContext(PanelContext);
+
+  const columnDefs: ColDefT<ITestRow>[] = useMemo(
+    () => [
+      /* Your grid ColDefs */
+      /* exclude */
+      GridCell({
+        field: "id",
+        headerName: "Id",
+        lockVisible: true,
+      }),
+      GridCell({
+        field: "position",
+        headerName: "Position",
+        cellRendererParams: {
+          warning: (props) => props.value === "Tester" && "Testers are testing",
+          info: (props) => props.value === "Developer" && "Developers are awesome",
+        },
+      }),
+      GridCell({
+        field: "age",
+        headerName: "Age",
+      }),
+      GridCell({
+        field: "desc",
+        headerName: "Description",
+        flex: 1,
+      }),
+      GridPopoverMessage(
+        {
+          headerName: "Popout message",
+          cellRenderer: () => <>Single Click me!</>,
+          exportable: false,
+        },
+        {
+          multiEdit: true,
+          editorParams: {
+            message: async (selectedRows): Promise<string> => {
+              return `There are ${selectedRows.length} row(s) selected`;
+            },
+          },
+        },
+      ),
+      GridCell({
+        headerName: "Custom edit",
+        editable: true,
+        valueFormatter: () => "Press E",
+        cellRendererParams: {
+          rightHoverElement: (
+            <GridIcon icon={"ic_launch_modal"} title={"Title text"} className={"GridCell-editableIcon"} />
+          ),
+          editAction: (selectedRows) => {
+            alert(`Custom edit ${selectedRows.map((r) => r.id)} rowId(s) selected`);
+          },
+          shortcutKeys: {
+            e: () => {
+              alert("Hi");
+            },
+          },
+        },
+      }),
+      GridPopoverMenu(
+        {},
+        {
+          multiEdit: true,
+          editorParams: {
+            options: async () => [],
+          },
+        },
+      ),
+      /* exclude */
+    ],
+    [],
+  );
+
+  const [rowData] = useState([
+    /* Your grid row data */
+    /* exclude */
+    { id: 1000, position: "Tester", age: 30, desc: "Tests application", dd: "1" },
+    { id: 1001, position: "Developer", age: 12, desc: "Develops application", dd: "2" },
+    { id: 1002, position: "Manager", age: 65, desc: "Manages", dd: "3" },
+    /* exclude */
+  ]);
+
+  return (
+    <GridUpdatingContextProvider>
+      <GridContextProvider>
+        <GridWrapper>
+          {/* onContentSize={resizePanel} does the resize on a callback */}
+          <Grid columnDefs={columnDefs} rowData={rowData} onContentSize={resizePanel} />
+        </GridWrapper>
+      </GridContextProvider>
+    </GridUpdatingContextProvider>
+  );
+};

package/src/stories/support.js

@@ -0,0 +1,16 @@
+export const getBlocks = (obj) => obj.toString().split("// #").splice(1);
+
+export const blockToString = (block) => {
+  const result = block.split("\n").splice(1);
+  let inComment = false;
+  return result
+    .map((line) => {
+      if (line.includes("// exclude") || line.includes("/* exclude */") || line.includes("/*exclude*/")) {
+        inComment = !inComment;
+        return undefined;
+      }
+      return inComment ? undefined : line;
+    })
+    .filter((l) => l)
+    .join("\n");
+};

package/src/util/useInterval.ts

@@ -2,25 +2,17 @@ import { useEffect, useRef } from "react";
 
 type Callback = () => void | Promise<void>;
 
-export const useInterval = (callback: Callback, delay: number | null) => {
-  const savedCallback = useRef(callback);
-  const callbackInProgress = useRef(false);
-  savedCallback.current = callback;
+export const useInterval = (callback: Callback, timeoutMs: number | null) => {
+  const callbackRef = useRef(callback);
+  callbackRef.current = callback;
 
   useEffect(() => {
-    if (delay == null) return;
-
-    const id = setInterval(async () => {
-      // Since this is an interval, then next tick could occur before the previous has finished
-      if (!callbackInProgress.current && savedCallback.current) {
-        callbackInProgress.current = true;
-        try {
-          await savedCallback.current();
-        } finally {
-          callbackInProgress.current = false;
-        }
-      }
-    }, delay);
-    return () => clearInterval(id);
-  }, [delay]);
+    if (!timeoutMs) return;
+    const interval = setInterval(() => {
+      callbackRef.current && callbackRef.current();
+    }, timeoutMs);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [timeoutMs]);
 };