@linzjs/windows 1.1.0 → 1.1.2

package/README.md

@@ -33,101 +33,4 @@ yarn add @linzjs/windows
 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 storybook](https://master--64a2356b80885af35510b627.chromatic.com/) for documentation.

package/package.json

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

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

@@ -1,5 +1,6 @@
 import { Modal } from "./Modal";
 import { ModalCallback } from "./ModalContext";
+import { useShowModal } from "./useShowModal";
 import { ReactElement } from "react";
 
 import { LuiAlertModalButtons, LuiButton, LuiIcon } from "@linzjs/lui";
@@ -7,7 +8,7 @@ import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
 
 export type WarningLevel = "success" | "info" | "warning" | "error";
 
-export interface PreModalProps extends ModalCallback<boolean> {
+export interface PrefabModalProps extends ModalCallback<boolean> {
   level?: WarningLevel;
   children: ReactElement;
 }
@@ -24,7 +25,7 @@ export const getIconForLevel = (level: "success" | "info" | "warning" | "error")
   }
 };
 
-export const PreModal = ({ level = "warning", children, resolve }: PreModalProps) => {
+export const PrefabModal = ({ level = "warning", children, resolve }: PrefabModalProps) => {
   const icon = getIconForLevel(level);
   return (
     <Modal>
@@ -43,3 +44,22 @@ export const PreModal = ({ level = "warning", children, resolve }: PreModalProps
     </Modal>
   );
 };
+
+export const usePrefabModal = () => {
+  const { showModal, modalOwnerRef } = useShowModal();
+  return {
+    modalOwnerRef,
+    showPrefabModal: (level: WarningLevel, title: ReactElement | string, content: ReactElement | string) => {
+      const children = (
+        <>
+          {typeof title === "string" ? <h2>{title}</h2> : title}
+          {typeof content === "string" ? <p>{content}</p> : content}
+        </>
+      );
+      return showModal(PrefabModal, {
+        level,
+        children,
+      });
+    },
+  };
+};

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,48 @@
+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 }}>
+      <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>
+      <button onClick={() => showPrefabModal("info", "You are a fantastic person", "Keep it up!")}>
+        Info Prefab-Modal
+      </button>
+      <button onClick={() => showPrefabModal("error", "Something is not right", "Maybe stop doing that")}>
+        Error Prefab-Modal
+      </button>
+      <button onClick={() => showPrefabModal("success", "You are a success", "Keep succeeding!")}>
+        Success Prefab-Modal
+      </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/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>
-  );
-};