@linzjs/windows 1.4.5 → 1.4.6

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

@@ -1,162 +0,0 @@
-import "../story.scss";
-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, Panel, PanelContent, PanelContext, PanelHeader, PanelsContextProvider } from "../../../panel";
-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 }} className={"WindowPanel-blue"}>
-      <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/panel/ShowTabbedPanel/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="Tabbed Panel" of={ShowPanelStories}/>
-# Show Tabbed Panel
-## Example
-Click to show the tabbed panel:
-<Story of={ShowPanelStories.ShowTabbedPanel}/>
-
-## Code
-<br/>
-{getBlocks(myModule).map(block => (
-<>
-    <h3>{block.split("\n")[0]}</h3>
-    <Source code={blockToString(block)} language='typescript'/>
-</>
-))}

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

@@ -1,27 +0,0 @@
-import { PanelsContextProvider } from "../../../panel/PanelsContextProvider";
-import { TestShowTabbedPanel } from "./ShowPanel";
-import type { Meta, StoryObj } from "@storybook/react";
-
-const meta: Meta<typeof TestShowTabbedPanel> = {
-  title: "Components/Panel",
-  component: TestShowTabbedPanel,
-  argTypes: {
-    backgroundColor: { control: "color" },
-  },
-  decorators: [
-    (Story: any) => (
-      <div>
-        <PanelsContextProvider baseZIndex={500}>
-          <Story />
-        </PanelsContextProvider>
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const ShowTabbedPanel: Story = {
-  args: {},
-};

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

@@ -1,73 +0,0 @@
-import "../story.scss";
-import "@linzjs/lui/dist/scss/base.scss";
-
-import { OpenPanelButton, Panel, PanelContent, PanelHeader, PanelsContextProvider } from "../../../panel/";
-
-import { LuiTabs, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch } from "@linzjs/lui";
-
-// #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) => (
-  <LuiTabs defaultPanel="africa">
-    <Panel title={`Panel demo ${data}`} size={{ width: 640, height: 400 }} className={"WindowPanel-blue"}>
-      <PanelHeader
-        icon={"ic_send"}
-        onHelpClick={() => alert("Help!!!")}
-        extraLeft={
-          <LuiTabsGroup ariaLabel="Animals">
-            <LuiTabsPanelSwitch targetPanel="africa">Africa</LuiTabsPanelSwitch>
-            <LuiTabsPanelSwitch targetPanel="asia">Asia</LuiTabsPanelSwitch>
-          </LuiTabsGroup>
-        }
-      />
-      <PanelContent>
-        <PanelContents />
-      </PanelContent>
-    </Panel>
-  </LuiTabs>
-);
-
-/* exclude */
-export const PanelContents = () => (
-  <div style={{ margin: "10px 16px" }}>
-    <LuiTabsPanel panel="africa">
-      <h2>African Countries</h2>
-      <ul className={"lui-list-bullet"}>
-        <li>Gabon</li>
-        <li>Malawi</li>
-        <li>Mozambique</li>
-      </ul>
-    </LuiTabsPanel>
-    <LuiTabsPanel panel="asia">
-      <h2>Asian Countries</h2>
-      <ul className={"lui-list-bullet"}>
-        <li>Laos</li>
-        <li>Nepal</li>
-        <li>Philippines</li>
-      </ul>
-    </LuiTabsPanel>
-  </div>
-);
-
-/* exclude */
-
-// #Example: Panel Invocation
-export const TestShowTabbedPanel = () => {
-  return (
-    <>
-      <OpenPanelButton buttonText={"TestPanel 1"} component={() => <ShowPanelComponent data={1} />} />{" "}
-      <OpenPanelButton buttonText={"TestPanel 2"} component={() => <ShowPanelComponent data={2} />} />
-    </>
-  );
-};

package/src/stories/panel/story.scss

@@ -1,14 +0,0 @@
-.WindowPanel, .PopoutWindowContainer {
-  h1, h2, h3, h4, h5, h6, table {
-    margin-top: 0;
-  }
-}
-
-.panelDock {
-  margin-top: 16px;
-  border: 2px solid black;
-
-  .panelDock-empty {
-    padding: 16px;
-  }
-}

package/src/stories/support.js

@@ -1,16 +0,0 @@
-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.test.tsx

@@ -1,26 +0,0 @@
-import { useInterval } from "./useInterval";
-import { render } from "@testing-library/react";
-
-describe("useInterval", () => {
-  beforeEach(() => {
-    jest.useFakeTimers();
-  });
-
-  afterEach(async () => {
-    jest.useRealTimers();
-  });
-
-  const TestComponent = (props: { callback: () => void }) => {
-    useInterval(props.callback, 1000);
-    return <div />;
-  };
-
-  test("invokes on timeout", async () => {
-    const callback = jest.fn();
-
-    render(<TestComponent callback={callback} />);
-    expect(callback).toHaveBeenCalledTimes(0);
-    jest.runOnlyPendingTimers();
-    expect(callback).toHaveBeenCalledTimes(1);
-  });
-});

package/tsconfig.json

@@ -1,37 +0,0 @@
-{
-  // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
-  "include": ["src"],
-  "files": ["node_modules/jest-expect-message/types/index.d.ts"],
-  "compilerOptions": {
-    "baseUrl": "./src",
-    "module": "esnext",
-    "lib": ["dom", "esnext"],
-    "target": "ESNext",
-    "importHelpers": true,
-    // output .d.ts declaration files for consumers
-    "declaration": true,
-    // output .js.map sourcemap files for consumers
-    "sourceMap": true,
-    // match output dir to input dir. e.g. dist/index instead of dist/src/index
-    "rootDir": ".",
-    // stricter type-checking for stronger correctness. Recommended by TS
-    "strict": true,
-    // linter checks for common issues
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
-    "noUnusedLocals": false,
-    "noUnusedParameters": true,
-    // use Node's module resolution algorithm, instead of the legacy TS one
-    "moduleResolution": "node",
-    // transpile JSX to React.createElement
-    "jsx": "react-jsx",
-    // interop between ESM and CJS modules. Recommended by TS
-    "esModuleInterop": true,
-    // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
-    "skipLibCheck": true,
-    // error out if import and file system have a casing mismatch. Recommended by TS
-    "forceConsistentCasingInFileNames": true,
-    "declarationDir":"./declaration"
-  }
-}