@linzjs/windows 1.1.1 → 1.2.0

package/package.json

@@ -12,7 +12,7 @@
     "panel",
     "popout"
   ],
-  "version": "1.1.1",
+  "version": "1.2.0",
   "peerDependencies": {
     "@linzjs/lui": "^17",
     "lodash-es": ">=4",

package/src/modal/PrefabModal.tsx

@@ -0,0 +1,103 @@
+import { Modal } from "./Modal";
+import { ModalCallback } from "./ModalContext";
+import { useShowModal } from "./useShowModal";
+import { isEmpty } from "lodash-es";
+import { ReactElement } from "react";
+
+import { LuiAlertModalButtons, LuiButton, LuiIcon } from "@linzjs/lui";
+import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
+import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
+
+export type WarningLevel = "success" | "info" | "warning" | "error";
+
+export interface PrefabButton<RT> {
+  default?: boolean;
+  level?: LuiButtonProps["level"];
+  title: string;
+  value: RT;
+}
+
+export interface PrefabModalProps extends ModalCallback<string | null> {
+  level?: WarningLevel;
+  children: ReactElement;
+  buttons?: PrefabButton<any>[];
+}
+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 PrefabModal = ({ level = "warning", children, resolve, ...props }: PrefabModalProps) => {
+  const icon = getIconForLevel(level);
+  const buttons: PrefabButton<any>[] = props.buttons ?? [];
+  if (isEmpty(buttons)) {
+    if (level === "warning") {
+      buttons.push({
+        title: "Cancel",
+        value: null,
+      });
+    }
+    buttons.push({
+      title: "Continue",
+      value: true,
+    });
+  }
+
+  buttons.forEach((b, i) => {
+    if (!b.level) {
+      b.level = i === buttons.length - 1 ? "primary" : "secondary";
+    }
+  });
+
+  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>
+          {buttons.map((pf, i) => (
+            <LuiButton
+              key={i}
+              level={pf.level}
+              onClick={() => resolve(pf.value === undefined ? pf.title : pf.value)}
+              buttonProps={pf.default ? { "data-autofocus": true } : undefined}
+            >
+              {pf.title}
+            </LuiButton>
+          ))}
+        </LuiAlertModalButtons>
+      </div>
+    </Modal>
+  );
+};
+
+export const usePrefabModal = () => {
+  const { showModal, modalOwnerRef } = useShowModal();
+  return {
+    modalOwnerRef,
+    showPrefabModal: <RT extends any = boolean>(
+      level: WarningLevel,
+      title: ReactElement | string,
+      content: ReactElement | string,
+      buttons?: PrefabButton<RT>[],
+    ) =>
+      showModal(PrefabModal, {
+        level,
+        children: (
+          <>
+            {typeof title === "string" ? <h2>{title}</h2> : title}
+            {typeof content === "string" ? <p>{content}</p> : content}
+          </>
+        ),
+        buttons,
+      }) as Promise<RT>,
+  };
+};

package/src/panel/OpenPanelIcon.tsx

@@ -9,11 +9,15 @@ 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>
+  <div>
+    <div className={"OpenPanelIcon-horizontalGroup"}>{children}</div>
+  </div>
 );
 
 export const ButtonIconVerticalGroup = ({ children }: { children: ReactNode }) => (
-  <div className={"OpenPanelIcon-verticalGroup"}>{children}</div>
+  <div>
+    <div className={"OpenPanelIcon-verticalGroup"}>{children}</div>
+  </div>
 );
 
 export const ButtonIconSeparator = () => <div className="OpenPanelIcon-separator">&#160;</div>;
@@ -37,7 +41,7 @@ export const OpenPanelIcon = ({ iconTitle, uniqueId, icon, component, className,
       className={clsx(
         className,
         "lui-button lui-button-secondary lui-button-toolbar panel-button",
-        openPanels.has(iconTitle) && "OpenPanelIcon-selected",
+        openPanels.has(id.current) && "OpenPanelIcon-selected",
         disabled && "OpenPanelIcon-disabled",
       )}
       title={iconTitle}

package/src/stories/modal/{PreModal.mdx → PrefabModal.mdx}

@@ -1,14 +1,14 @@
 import {getBlocks, blockToString} from "../support";
 import {Meta, Source, Story} from "@storybook/blocks";
-import * as PreModalStories from "./PreModal.stories"
+import * as PrefabModalStories from "./PrefabModal.stories"
 
-import myModule from './PreModal?raw';
+import myModule from './PrefabModal?raw';
 
-<Meta name="Show Preset Modal" of={PreModalStories}/>
+<Meta name="Show Prefab" of={PrefabModalStories}/>
 # Show Preset Modal
 ## Example
 Click to show the modal:
-<Story of={PreModalStories.ShowPreModal}/>
+<Story of={PrefabModalStories.ShowPrefabModal}/>
 
 ## Code
 <br/>

package/src/stories/modal/{PreModal.stories.tsx → PrefabModal.stories.tsx}

@@ -1,10 +1,10 @@
 import { ModalContextProvider } from "../../modal/ModalContextProvider";
-import { PreModalUsage } from "./PreModal";
+import { PrefabModalUsage } from "./PrefabModal";
 import type { Meta, StoryObj } from "@storybook/react";
 
-const meta: Meta<typeof PreModalUsage> = {
+const meta: Meta<typeof PrefabModalUsage> = {
   title: "Components/Modal",
-  component: PreModalUsage,
+  component: PrefabModalUsage,
   argTypes: {
     backgroundColor: { control: "color" },
   },
@@ -22,6 +22,6 @@ const meta: Meta<typeof PreModalUsage> = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const ShowPreModal: Story = {
+export const ShowPrefabModal: Story = {
   args: {},
 };

package/src/stories/modal/PrefabModal.tsx

@@ -0,0 +1,65 @@
+import "./TestModal.scss";
+import "@linzjs/lui/dist/scss/base.scss";
+
+import { ModalContextProvider } from "../../modal/ModalContextProvider";
+import { usePrefabModal } from "../../modal/PrefabModal";
+
+// #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: PrefabModal Invocation
+export const PrefabModalUsage = () => {
+  // showModal to show modal, modalOwnerRef is only required if you have popout windows
+  const { modalOwnerRef, showPrefabModal } = usePrefabModal();
+
+  // Remember to add the modalOwnerRef!
+  return (
+    <div ref={modalOwnerRef} style={{ display: "flex", gap: 10 }}>
+      {/* Warning */}
+      <button
+        onClick={async () =>
+          alert(
+            "Warning result: " +
+              (await showPrefabModal(
+                "warning",
+                "You are about to make changes",
+                "Are you sure that you want to make these changes?",
+              )),
+          )
+        }
+      >
+        Warning Prefab-Modal
+      </button>
+      {/* Info */}
+      <button onClick={() => showPrefabModal("info", "You are a fantastic person", "Keep it up!")}>
+        Info Prefab-Modal
+      </button>
+      {/* Error */}
+      <button onClick={() => showPrefabModal("error", "Something is not right", "Maybe stop doing that")}>
+        Error Prefab-Modal
+      </button>
+      {/* Success */}
+      <button onClick={() => showPrefabModal("success", "You are a success", "Keep succeeding!")}>
+        Success Prefab-Modal
+      </button>
+      {/* Custom */}
+      <button
+        onClick={async () => {
+          const result = await showPrefabModal("success", "Custom buttons", <b>Custom buttons are customary!</b>, [
+            { value: null, title: "Nope" },
+            { value: "barple", title: "Barple" },
+            { value: "floople", title: "Floople", default: true },
+          ]);
+          alert(result);
+        }}
+      >
+        Custom buttons
+      </button>
+    </div>
+  );
+};

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

@@ -59,19 +59,18 @@ export const PanelContents = () => {
 
 // #Example: Show Panel Buttons
 export const TestShowPanelButtons = () => (
-  <>
+  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
     <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 />
@@ -82,5 +81,5 @@ export const TestShowPanelButtons = () => (
         component={() => <ShowPanel data={3} />}
       />
     </ButtonIconVerticalGroup>
-  </>
+  </div>
 );

package/src/modal/PreModal.tsx

@@ -1,45 +0,0 @@
-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/stories/modal/PreModal.tsx

@@ -1,79 +0,0 @@
-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>
-  );
-};