@linzjs/windows 1.4.5 → 1.4.6

package/src/stories/modal/PrefabModal.mdx

@@ -1,26 +0,0 @@
-import {getBlocks, blockToString} from "../support";
-import {Meta, Source, Story} from "@storybook/blocks";
-import * as PrefabModalStories from "./PrefabModal.stories"
-
-import myModule from './PrefabModal?raw';
-
-<Meta name="Show Prefab" of={PrefabModalStories}/>
-# Show Preset Modal
-## Example
-Click to show the modal:
-<Story of={PrefabModalStories.ShowPrefabModal}/>
-
-## 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/PrefabModal.stories.tsx

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

package/src/stories/modal/PrefabModal.tsx

@@ -1,63 +0,0 @@
-import "@linzjs/lui/dist/scss/base.scss";
-
-import { ModalContextProvider, usePrefabModal } from "../../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: 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/modal/TestModal.scss

@@ -1,16 +0,0 @@
-dialog.testModal {
-  display: flex;
-  flex-direction: column;
-  padding: 20px;
-  gap: 16px;
-  border-radius: 5px;
-
-  div {
-    display: flex;
-    gap: 10px;
-  }
-
-  button {
-    flex: 1;
-  }
-}

package/src/stories/modal/TestModal.tsx

@@ -1,55 +0,0 @@
-import "./TestModal.scss";
-
-import { Modal } from "../../modal";
-import { ModalCallback } from "../../modal";
-import { ModalContextProvider } from "../../modal";
-import { useShowModal } from "../../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 className={"testModal"}>
-    <div>This is the modal text: '{text}'</div>
-    <div>
-      <button onClick={close}>Close</button>
-      <button onClick={() => resolve(1)}>Return 1</button>
-    </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>
-  );
-};

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

@@ -1,21 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,88 +0,0 @@
-import "../story.scss";
-import "@linzjs/lui/dist/scss/base.scss";
-
-import {
-  ButtonIconHorizontalGroup,
-  ButtonIconSeparator,
-  ButtonIconVerticalGroup,
-  OpenPanelButton,
-  OpenPanelIcon,
-  Panel,
-  PanelContent,
-  PanelHeader,
-} from "../../../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 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>
-
-    <ButtonIconHorizontalGroup>
-      <OpenPanelIcon iconTitle={"Marks"} icon={"ic_marks"} component={() => <ShowPanel data={1} />} />
-      <ButtonIconSeparator />
-      <OpenPanelIcon iconTitle={"Vectors"} icon={"ic_line_irregular"} component={() => <ShowPanel data={2} />} />
-    </ButtonIconHorizontalGroup>
-
-    <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>
-  </div>
-);

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

@@ -1,20 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,68 +0,0 @@
-import "../story.scss";
-import "@linzjs/lui/dist/scss/base.scss";
-
-import { OpenPanelButton, Panel, PanelContent, PanelHeader, PanelsContextProvider } from "../../../panel/";
-
-// #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 icon={"ic_add_adopt"} />
-    <PanelContent>
-      <PanelContents />
-    </PanelContent>
-  </Panel>
-);
-
-/* exclude */
-export const PanelContents = () => (
-  <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/ShowPanelDocking/ShowPanel.mdx

@@ -1,20 +0,0 @@
-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="Docking Panel" of={ShowPanelStories}/>
-# Panel Docking
-## Example
-Click to show the panel:
-<Story of={ShowPanelStories.ShowPanelDocking}/>
-
-## Code
-<br/>
-{getBlocks(myModule).map(block => (
-<>
-    <h3>{block.split("\n")[0]}</h3>
-    <Source code={blockToString(block)} language='typescript'/>
-</>
-))}

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

@@ -1,27 +0,0 @@
-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 ShowPanelDocking: Story = {
-  args: {},
-};

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

@@ -1,61 +0,0 @@
-import "../story.scss";
-import "@linzjs/lui/dist/scss/base.scss";
-
-import { OpenPanelButton, Panel, PanelContent, PanelDock, PanelHeader } from "../../../panel/";
-
-// #Example: Panel Component
-export interface ShowPanelComponentProps {
-  data: number;
-}
-
-export const ShowPanelComponent = ({ data }: ShowPanelComponentProps) => (
-  <Panel title={`Panel demo ${data}`} size={{ width: 640, height: 400 }}>
-    <PanelHeader dockTo={"leftSide"} />
-    <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"} component={() => <ShowPanelComponent data={1} />} />
-      <PanelDock id={"leftSide"}>The Panel will dock in here</PanelDock>
-    </>
-  );
-};

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

@@ -1,21 +0,0 @@
-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="Resizing Panel 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

@@ -1,27 +0,0 @@
-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: {},
-};