@linzjs/windows 1.0.0 → 1.1.0

package/.storybook/main.ts

@@ -1,11 +1,11 @@
+import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
+import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
 import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
+  stories: ["../src/**/Introduction.mdx", "../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions"],
   framework: {
     name: "@storybook/react-vite",
     options: {},
@@ -13,5 +13,25 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      optimizeDeps: {
+        esbuildOptions: {
+          // Node.js global to browser globalThis
+          define: {
+            global: "globalThis",
+          },
+          // Enable esbuild polyfill plugins
+          plugins: [
+            NodeGlobalsPolyfillPlugin({
+              buffer: true,
+              process: true,
+            }),
+            NodeModulesPolyfillPlugin(),
+          ],
+        },
+      },
+    });
+  },
 };
 export default config;

package/README.md

@@ -1,10 +1,133 @@
-# linz/windows
+# @linzjs/windows
 
-[![semantic-release](https://img.shields.io/badge/semantic--release-react-e10079?logo=semantic-release)](https://github.com/semantic-release/semantic-release)
+[![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.
 
-> Reusable windowing component for LINZ / Toitū te whenua.
-> 
 ## Features
-    - Async React Modal dialogs
+- Async HTML dialog based Modals.
+- Draggable and resizeable, pop-in/out Windows. 
+
+## Install
+```
+npm install @linzjs/windows
+```
+or with Yarn
+```
+yarn add @linzjs/windows
+```
+
+## Demo
+
+```bash
+npm run storybook
+```
+
+See [Chromatic storybook](https://64a2356b80885af35510b627-gsvwsgdsde.chromatic.com/) for the best documentation.
+
+## Examples
+
+### Modal
+#### 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: Modal Component
+```
+// Extend your props with ModalCallback<RESULT_TYPE> to add a return type, and enable close/resolve
+export interface TestModalProps extends ModalCallback<number> {
+  text: string; // A user property
+}
+
+// Close and resolve will be passed to your props magically!
+export const TestModal = ({ text, close, resolve }: TestModalProps) => (
+  <Modal>
+    <div>
+      <div>This is the modal text: '{text}'</div>
+      <div>
+        <button onClick={close}>Close</button>
+        <button onClick={() => resolve(1)}>Return 1</button>
+      </div>
+    </div>
+  </Modal>
+);
+```
+
+#### Example: Modal Invocation
+```
+export const TestModalUsage = () => {
+  // showModal to show modal, modalOwnerRef is only required if you have popout windows
+  const { showModal, modalOwnerRef } = useShowModal();
+
+  const showModalHandler = async () => {
+    // Show modal and await result
+    const result = await showModal(TestModal, { text: "Text text" });
+
+    // If result is undefined the modal was closed
+    if (!result) return alert("Modal closed");
+
+    // Otherwise we have a result
+    alert(`Modal result is: ${result}`);
+  };
+
+  // Remember to add the modalOwnerRef!
+  return (
+    <div ref={modalOwnerRef}>
+      <button onClick={showModalHandler}>Show modal</button>
+    </div>
+  );
+};
+```
+
+### Windows
+**Note:** *Windows are called Panels so as not to conflict with browser window types*
+
+##### Example: Panel Context Provider
+ Don't forget to add a PanelContextProvider at the root of your project.
+```
+export const App = () => (
+    <PanelsContextProvider baseZIndex={500}>
+        ...the rest of your app...
+    </PanelsContextProvider>
+);
+```
+
+##### Example: Panel Component
+```
+export const TestPanel = () => {
+    return (
+        <Panel name={"Panel demo"} size={{ width: 640, height: 400 }}>
+        <PanelHeader title={"Panel demo"} />
+        <PanelContent>
+            ...PanelContent...
+        </PanelContent>
+    </Panel>
+    );
+};
+```
+
+##### Example: Panel Invocation
+```
+export const TestPanelUsage = () => {
+    const { openPanel } = useContext(PanelsContext);
+    
+    return <button onClick={() => openPanel(TestPanel)}>Show panel</button>;
+};
+```
 
-See [Chromatic](https://64a2356b80885af35510b627-gsvwsgdsde.chromatic.com/) for usage.

package/package.json

@@ -2,8 +2,19 @@
   "name": "@linzjs/windows",
   "repository": "github:linz/windows.git",
   "license": "MIT",
-  "version": "1.0.0",
+  "keywords": [
+    "react",
+    "ts",
+    "typescript",
+    "modal",
+    "react-component",
+    "window",
+    "panel",
+    "popout"
+  ],
+  "version": "1.1.0",
   "peerDependencies": {
+    "@linzjs/lui": "^17",
     "lodash-es": ">=4",
     "react": ">=17",
     "react-dom": ">=17"
@@ -16,25 +27,33 @@
     "node": ">=16"
   },
   "dependencies": {
+    "@emotion/cache": "^11.11.0",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@linzjs/lui": "^17",
     "lodash-es": ">=4",
     "react": ">=17",
     "react-dom": ">=17",
+    "react-rnd": "^10.4.1",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+    "@linzjs/step-ag-grid": "^14.9.3",
     "@rollup/plugin-commonjs": "^25.0.2",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@storybook/addon-docs": "^7.0.24",
-    "@storybook/addon-essentials": "^7.0.24",
-    "@storybook/addon-interactions": "^7.0.24",
-    "@storybook/addon-links": "^7.0.24",
-    "@storybook/blocks": "^7.0.24",
-    "@storybook/builder-webpack5": "^7.0.24",
+    "@storybook/addon-docs": "^7.0.26",
+    "@storybook/addon-essentials": "^7.0.26",
+    "@storybook/addon-interactions": "^7.0.26",
+    "@storybook/addon-links": "^7.0.26",
+    "@storybook/blocks": "^7.0.26",
+    "@storybook/builder-webpack5": "^7.0.26",
     "@storybook/jest": "^0.1.0",
-    "@storybook/preset-create-react-app": "^7.0.24",
-    "@storybook/react": "^7.0.24",
-    "@storybook/react-vite": "^7.0.24",
+    "@storybook/preset-create-react-app": "^7.0.26",
+    "@storybook/react": "^7.0.26",
+    "@storybook/react-vite": "^7.0.26",
     "@storybook/test-runner": "^0.11.0",
     "@storybook/testing-library": "^0.2.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -47,6 +66,8 @@
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/uuid": "^9.0.2",
+    "ag-grid-community": "^27.3.0",
+    "ag-grid-react": "^27.3.0",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-config-react-app": "^7.0.1",
@@ -73,7 +94,7 @@
     "sass": "^1.63.6",
     "sass-loader": "^13.3.2",
     "semantic-release": "^19.0.5",
-    "storybook": "^7.0.24",
+    "storybook": "^7.0.26",
     "style-loader": "^3.3.3",
     "stylelint": "^14.16.1",
     "stylelint-config-prettier": "^9.0.5",
@@ -85,13 +106,14 @@
     "vite": "^4.3.9"
   },
   "scripts": {
-    "build": "run-s clean stylelint lint bundle",
+    "build": "run-s clean stylelint lint lint-circular-deps bundle",
     "yalc": "run-s clean css bundle && yalc publish",
     "clean": "rimraf dist && mkdirp ./dist",
     "bundle": "rollup -c",
     "test": "jest",
     "stylelint": "stylelint src/**/*.scss src/**/*.css --fix",
     "lint": "eslint ./src --ext .js,.ts,.tsx --fix --cache --ignore-path .gitignore",
+    "lint-circular-deps": "npx madge --circular --extensions ts,tsx ./",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "deploy-storybook": "npx --yes -p @storybook/storybook-deployer storybook-to-ghpages",

package/src/modal/Modal.tsx

@@ -1,13 +1,12 @@
 import { ModalInstanceContext } from "./ModalInstanceContext";
-import { defer } from "lodash-es";
+import { delay } from "lodash-es";
 import { ReactElement, useContext, useEffect, useRef } from "react";
 
 export interface ModalProps {
-  selectFirstInput?: boolean;
   children: ReactElement | ReactElement[];
 }
 
-export const Modal = ({ selectFirstInput = true, children }: ModalProps): ReactElement => {
+export const Modal = ({ children }: ModalProps): ReactElement => {
   const dialogRef = useRef<HTMLDialogElement>(null);
 
   const { close } = useContext(ModalInstanceContext);
@@ -21,8 +20,13 @@ export const Modal = ({ selectFirstInput = true, children }: ModalProps): ReactE
   }, []);
 
   useEffect(() => {
-    selectFirstInput && defer(() => dialogRef.current?.querySelector("input")?.select());
-  }, [selectFirstInput]);
+    // Dialogs auto select the first focusable element, this is in case you don't want that
+    delay(() => {
+      const input = dialogRef.current?.querySelectorAll("[data-autofocus]") as any;
+      input[0]?.focus?.();
+      input?.select?.();
+    }, 100);
+  }, []);
 
   return (
     <dialog ref={dialogRef} onClick={(e) => e.target === e.currentTarget && close()} style={{ padding: 0 }}>

package/src/modal/ModalContextProvider.tsx

@@ -1,7 +1,7 @@
 import { useInterval } from "../util/useInterval";
 import { ComponentType, ModalContext } from "./ModalContext";
 import { ModalInstanceContext } from "./ModalInstanceContext";
-import { Fragment, MutableRefObject, ReactElement, useState } from "react";
+import { Fragment, MutableRefObject, ReactElement, useCallback, useState } from "react";
 import * as ReactDOM from "react-dom";
 import { v4 as uuid } from "uuid";
 
@@ -67,49 +67,48 @@ export const ModalContextProvider = ({ children }: { children: ReactElement }):
    * @param Component React component.
    * @param args Arguments for react component.
    */
-  const showModal = async (
-    ownerRef: MutableRefObject<HTMLElement | null>,
-    Component: ComponentType,
-    args: any,
-  ): Promise<any> => {
-    let componentInstance: ReactElement | undefined;
-    const promise = new Promise((resolve) => {
-      try {
-        // If there are any exceptions the modal won't show
-        setModals([
-          ...modals,
-          {
-            uuid: uuid(),
-            ownerElement: ownerRef.current ?? document.body,
-            componentInstance: <Component {...args} resolve={resolve} close={() => resolve(undefined)} />,
-            resolve,
-          },
-        ]);
-      } catch (e) {
-        console.error(e);
-        return;
-      }
-    });
+  const showModal = useCallback(
+    async (ownerRef: MutableRefObject<HTMLElement | null>, Component: ComponentType, args: any): Promise<any> => {
+      let componentInstance: ReactElement | undefined;
+      const promise = new Promise((resolve) => {
+        try {
+          // If there are any exceptions the modal won't show
+          setModals([
+            ...modals,
+            {
+              uuid: uuid(),
+              ownerElement: ownerRef.current ?? document.body,
+              componentInstance: <Component {...args} resolve={resolve} close={() => resolve(undefined)} />,
+              resolve,
+            },
+          ]);
+        } catch (e) {
+          console.error(e);
+          return;
+        }
+      });
 
-    // Wait for modal to complete
-    const result = await promise;
+      // Wait for modal to complete
+      const result = await promise;
 
-    // Close modal
-    setModals(modals.filter((e) => e.componentInstance !== componentInstance));
+      // Close modal
+      setModals(modals.filter((e) => e.componentInstance !== componentInstance));
 
-    return result;
-  };
+      return result;
+    },
+    [modals],
+  );
 
-  const modalHasView = (modalInstance: ModalInstance): boolean =>
-    !!modalInstance.ownerElement?.ownerDocument?.defaultView;
+  const modalHasView = useCallback(
+    (modalInstance: ModalInstance): boolean => !!modalInstance.ownerElement?.ownerDocument?.defaultView,
+    [],
+  );
 
   // Tidy up modals that have closed because of an external window closing
   useInterval(() => {
     const newModals = modals.filter(modalHasView);
-    if (newModals.length !== modals.length) {
-      setModals(newModals);
-    }
-  }, 1000);
+    newModals.length !== modals.length && setModals(newModals);
+  }, 500);
 
   return (
     <ModalContext.Provider

package/src/modal/PreModal.tsx

@@ -0,0 +1,45 @@
+import { Modal } from "./Modal";
+import { ModalCallback } from "./ModalContext";
+import { ReactElement } from "react";
+
+import { LuiAlertModalButtons, LuiButton, LuiIcon } from "@linzjs/lui";
+import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+
+export type WarningLevel = "success" | "info" | "warning" | "error";
+
+export interface PreModalProps extends ModalCallback<boolean> {
+  level?: WarningLevel;
+  children: ReactElement;
+}
+export const getIconForLevel = (level: "success" | "info" | "warning" | "error"): IconName => {
+  switch (level) {
+    case "success":
+      return "ic_check_circle";
+    case "info":
+      return "ic_info";
+    case "warning":
+      return "ic_warning";
+    case "error":
+      return "ic_error";
+  }
+};
+
+export const PreModal = ({ level = "warning", children, resolve }: PreModalProps) => {
+  const icon = getIconForLevel(level);
+  return (
+    <Modal>
+      <div className={`lui-modal lui-box-shadow lui-modal-${level}`} style={{ minWidth: 400 }}>
+        <LuiIcon name={icon} alt={"warning"} size={"lg"} className={"lui-msg-status-icon"} />
+        {children}
+        <LuiAlertModalButtons>
+          {level === "warning" && (
+            <LuiButton level="secondary" onClick={() => resolve(false)} buttonProps={{ "data-autofocus": true }}>
+              Cancel
+            </LuiButton>
+          )}
+          <LuiButton onClick={() => resolve(true)}>Continue</LuiButton>
+        </LuiAlertModalButtons>
+      </div>
+    </Modal>
+  );
+};

package/src/panel/OpenPanelButton.tsx

@@ -0,0 +1,18 @@
+// Simple button to open panel and show panel state
+import { PanelsContext } from "./PanelsContext";
+import { ReactElement, useContext } from "react";
+
+interface OpenPanelButtonProps {
+  buttonText: string;
+  component: () => ReactElement;
+}
+
+export const OpenPanelButton = ({ buttonText, component }: OpenPanelButtonProps) => {
+  const { openPanel, openPanels } = useContext(PanelsContext);
+
+  return (
+    <button onClick={() => openPanel(buttonText, component)}>
+      Show {buttonText} {openPanels.has(buttonText) ? "(Open)" : ""}
+    </button>
+  );
+};

package/src/panel/OpenPanelIcon.scss

@@ -0,0 +1,73 @@
+@use "node_modules/@linzjs/lui/dist/scss/Core" as lui;
+@use "node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars.scss" as colours;
+
+.lui-button.lui-button-toolbar {
+  border-color: transparent;
+  padding: 4px;
+  line-height: 12px;
+  margin: 2px;
+}
+
+.OpenPanelIcon-selected {
+  cursor: pointer;
+  color: lui.$white !important;
+  background-color: lui.$blue-75 !important;
+  box-shadow: inset 0 2px 4px rgb(41 92 130);
+
+  fill: lui.$white !important;
+
+  svg * {
+    fill: lui.$white !important;
+  }
+
+  svg * {
+    color: lui.$white !important;
+    fill: lui.$white !important;
+  }
+}
+
+.OpenPanelIcon-disabled {
+  background-color: lui.$white !important;
+
+  fill: lui.$grey-20 !important;
+
+  svg * {
+    fill: lui.$grey-20 !important;
+  }
+}
+
+%OpenPanelIcon-Group {
+  background-color: white;
+  border-radius: 4px;
+  padding: 4px;
+  align-items: center;
+  box-shadow: 0 0 10px rgb(0 0 0 / 20%);
+  display: inline-flex;
+}
+
+.OpenPanelIcon-verticalGroup {
+  @extend %OpenPanelIcon-Group;
+  flex-direction: column;
+
+  .OpenPanelIcon-separator {
+    margin: 6px 0;
+    height: 2px;
+    width: 100%;
+    background-color: colours.$grey-10;
+  }
+}
+
+.OpenPanelIcon-horizontalGroup {
+  @extend %OpenPanelIcon-Group;
+  flex-direction: row;
+
+  .OpenPanelIcon-separator {
+    height: 100%;
+    margin-left: 6px;
+    margin-right: 6px;
+    margin-top: -3px;
+    padding-bottom: 8px;
+    width: 2px;
+    background-color: colours.$grey-10;
+  }
+}

package/src/panel/OpenPanelIcon.tsx

@@ -0,0 +1,50 @@
+import "./OpenPanelIcon.scss";
+
+import { PanelsContext } from "./PanelsContext";
+import clsx from "clsx";
+import { ReactElement, ReactNode, useContext, useRef } from "react";
+import { v4 as uuid } from "uuid";
+
+import { LuiIcon } from "@linzjs/lui";
+import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+
+export const ButtonIconHorizontalGroup = ({ children }: { children: ReactNode }) => (
+  <div className={"OpenPanelIcon-horizontalGroup"}>{children}</div>
+);
+
+export const ButtonIconVerticalGroup = ({ children }: { children: ReactNode }) => (
+  <div className={"OpenPanelIcon-verticalGroup"}>{children}</div>
+);
+
+export const ButtonIconSeparator = () => <div className="OpenPanelIcon-separator">&#160;</div>;
+
+interface OpenPanelIconProps {
+  uniqueId?: string;
+  iconTitle: string;
+  icon: IconName;
+  component: () => ReactElement;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const OpenPanelIcon = ({ iconTitle, uniqueId, icon, component, className, disabled }: OpenPanelIconProps) => {
+  const { openPanel, openPanels } = useContext(PanelsContext);
+  const id = useRef(uniqueId ?? uuid());
+
+  return (
+    <button
+      type="button"
+      className={clsx(
+        className,
+        "lui-button lui-button-secondary lui-button-toolbar panel-button",
+        openPanels.has(iconTitle) && "OpenPanelIcon-selected",
+        disabled && "OpenPanelIcon-disabled",
+      )}
+      title={iconTitle}
+      onClick={() => openPanel(id.current, component)}
+      disabled={disabled}
+    >
+      <LuiIcon name={icon} alt={iconTitle} size={"md"} />
+    </button>
+  );
+};

package/src/panel/Panel.scss

@@ -0,0 +1,34 @@
+.WindowPanel {
+  box-shadow: 0 1px 6px 0 #00000026, 0 6px 10px 0 #00000040;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  border-radius: 9px;
+}
+
+.WindowPanel-header {
+  height: 48px;
+  line-height: 48px;
+  color: #2a292c;
+  padding: 0 8px;
+  display: flex;
+  overflow: hidden;
+  justify-content: space-between;
+  border-bottom: 2px #eaeaea solid;
+  font-size: 1em;
+  font-weight: 600;
+  flex-direction: row;
+}
+
+.WindowPanel-header-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.WindowPanel-content {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+}