More stuff

Author: mstijak

homedocs/src/examples/layout/WindowExample.tsx

@@ -30,12 +30,11 @@ export default () => (
       title="Contact"
       visible={m.contact.visible}
       center
-      style={{ width: "500px" }}
       modal
       draggable
       closeOnEscape
     >
-      <div style={{ padding: "20px" }}>
+      <div>
         <LabelsLeftLayout>
           <TextField value={m.contact.name} label="Name" />
           <TextField value={m.contact.email} label="Email" />

homedocs/src/examples/layout/WindowProgrammaticExample.tsx

@@ -0,0 +1,27 @@
+import { Store } from "cx/data";
+import { Button, Widget, Window } from "cx/widgets";
+
+// @index
+export default () => (
+  <Button
+    onClick={() => {
+      let window = Widget.create(
+        <Window title="Programmatic Window" center modal>
+          <div>
+            <p>This window was opened programmatically.</p>
+          </div>
+          <div
+            putInto="footer"
+            style={{ display: "flex", justifyContent: "flex-end" }}
+          >
+            <Button dismiss>Close</Button>
+          </div>
+        </Window>,
+      );
+      window.open(new Store());
+    }}
+  >
+    Open Programmatic Window
+  </Button>
+);
+// @index-end

homedocs/src/pages/docs/layout/window.mdx

@@ -9,6 +9,9 @@ import CodeExample from "../../../components/CodeExample.astro";
 import WindowExample from "../../../examples/layout/WindowExample.tsx";
 import WindowExampleCode from "../../../examples/layout/WindowExample.tsx?raw";
 
+import WindowProgrammaticExample from "../../../examples/layout/WindowProgrammaticExample.tsx";
+import WindowProgrammaticExampleCode from "../../../examples/layout/WindowProgrammaticExample.tsx?raw";
+
 # Window
 
 <ImportPath path="import { Window } from 'cx/widgets';" />
@@ -19,7 +22,47 @@ Windows are overlays with headers, footers, and special appearance. They provide
   <WindowExample client:load />
 </CodeExample>
 
-Use `putInto="footer"` to place content in the window footer. Add the `dismiss` prop to buttons that should close the window.
+Use `putInto="footer"` or `putInto="header"` to place content in the window footer or header. Add the `dismiss` prop to buttons that should close the window.
+
+## Programmatic Windows
+
+Windows can also be opened programmatically using `Widget.create` and the `open` method. This approach creates an independent window with its own store:
+
+<CodeExample code={WindowProgrammaticExampleCode}>
+  <WindowProgrammaticExample client:load />
+</CodeExample>
+
+### Hot Module Replacement (HMR)
+
+Programmatic windows have issues with HMR during development - changes to the window content won't reflect until you close and reopen the window. Use `createHotPromiseWindowFactory` or `createHotPromiseWindowFactoryWithProps` to solve this:
+
+```tsx
+import { createHotPromiseWindowFactoryWithProps, Window, Button } from "cx/widgets";
+
+const openUserDialog = createHotPromiseWindowFactoryWithProps(
+  module,
+  (userId: string) => (resolve, reject) => {
+    let result = null;
+    return Window.create({
+      title: `User ${userId}`,
+      onDestroy: () => resolve(result),
+      children: (
+        <div>
+          <p>Edit user details here...</p>
+          <Button onClick={() => { result = "saved"; }} dismiss>
+            Save
+          </Button>
+        </div>
+      ),
+    });
+  }
+);
+
+// Usage
+const result = await openUserDialog("123");
+```
+
+The factory returns a Promise that resolves when the window is closed, making it easy to get results back from dialog windows.
 
 ## Configuration
 

litmus/tsconfig.json

@@ -1,19 +1,19 @@
 {
-   "compilerOptions": {
-      "target": "es6",
-      "jsx": "preserve",
-      "allowJs": true,
-      "moduleResolution": "node",
-      "module": "es2015",
-      "sourceMap": false,
-      "jsxFactory": "cx",
-      "baseUrl": ".",
-      "paths": {
-         "cx": ["../packages/cx"],
-         "cx-react": ["../packages/cx-react"],
-         "cx-immer": ["../packages/cx-immer"]
-      },
-      "outDir": "./build/"
-   },
-   "exclude": ["node_modules", "./babel-config.js", "./webpack.config.js"]
+  "compilerOptions": {
+    "target": "es6",
+    "jsx": "preserve",
+    "allowJs": true,
+    "moduleResolution": "bundler",
+    "module": "es2015",
+    "sourceMap": false,
+    "jsxFactory": "cx",
+    "baseUrl": ".",
+    "paths": {
+      "cx": ["../packages/cx"],
+      "cx-react": ["../packages/cx-react"],
+      "cx-immer": ["../packages/cx-immer"]
+    },
+    "outDir": "./build/"
+  },
+  "exclude": ["node_modules", "./babel-config.js", "./webpack.config.js"]
 }