chore: ui overview docs (#7124)

Add a dedicated page with an introduction to the `ui` module: <img width="1482" alt="Screenshot 2024-09-13 at 3 25 46 PM" src="https://github.com/user-attachments/assets/6c108b32-a91b-4007-acce-c3a0e2f967e0"> ## Checklist - [x] Title matches [Winglang's style guide](https://www.winglang.io/contributing/start-here/pull_requests#how-are-pull-request-titles-formatted) - [x] Description explains motivation and solution - [ ] Tests added (always) - [ ] Docs updated (only required for features) - [ ] Added `pr/e2e-full` label if this feature requires end-to-end testing *By submitting this pull request, I confirm that my contribution is made under the terms of the [Wing Cloud Contribution License](https://github.com/winglang/wing/blob/main/CONTRIBUTION_LICENSE.md)*.
winglang · Sep 16, 2024 · ae30eb6 · ae30eb6
1 parent 4486e09
commit ae30eb6
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 12 deletions.
diff --git a/docs/api/04-standard-library/aws/api-reference.md b/docs/api/04-standard-library/aws/api-reference.md
@@ -1,5 +1,5 @@
 ---
-title: API reference
+title: API Reference
 id: api-reference
 description: Wing standard library API reference for the aws module
 keywords: [Wing sdk, sdk, Wing API Reference]

diff --git a/docs/api/04-standard-library/expect/api-reference.md b/docs/api/04-standard-library/expect/api-reference.md
@@ -1,5 +1,5 @@
 ---
-title: API reference
+title: API Reference
 id: api-reference
 description: Wing standard library API reference for the expect module
 keywords: [Wing sdk, sdk, Wing API Reference]

diff --git a/docs/api/04-standard-library/fs/api-reference.md b/docs/api/04-standard-library/fs/api-reference.md
@@ -1,5 +1,5 @@
 ---
-title: API reference
+title: API Reference
 id: api-reference
 description: Wing standard library API reference for the fs module
 keywords: [Wing sdk, sdk, Wing API Reference]

diff --git a/docs/api/04-standard-library/http/api-reference.md b/docs/api/04-standard-library/http/api-reference.md
@@ -1,5 +1,5 @@
 ---
-title: API reference
+title: API Reference
 id: api-reference
 description: Wing standard library API reference for the http module
 keywords: [Wing sdk, sdk, Wing API Reference]

diff --git a/docs/api/04-standard-library/math/api-reference.md b/docs/api/04-standard-library/math/api-reference.md
@@ -1,5 +1,5 @@
 ---
-title: API reference
+title: API Reference
 id: api-reference
 description: Wing standard library API reference for the math module
 keywords: [Wing sdk, sdk, Wing API Reference]

diff --git a/docs/api/04-standard-library/sim/api-reference.md b/docs/api/04-standard-library/sim/api-reference.md
@@ -1,5 +1,5 @@
 ---
-title: API reference
+title: API Reference
 id: api-reference
 description: Wing standard library API reference for the sim module
 keywords: [Wing sdk, sdk, Wing API Reference]

diff --git a/docs/api/04-standard-library/ui/_category_.yml b/docs/api/04-standard-library/ui/_category_.yml
@@ -1,5 +1,3 @@
 label: ui
 collapsible: true
 collapsed: true
-link:
-  type: generated-index
diff --git a/docs/api/04-standard-library/ui/api-reference.md b/docs/api/04-standard-library/ui/api-reference.md
@@ -1,5 +1,5 @@
 ---
-title: API reference
+title: API Reference
 id: api-reference
 description: Wing standard library API reference for the ui module
 keywords: [Wing sdk, sdk, Wing API Reference]

diff --git a/docs/api/04-standard-library/ui/index.mdx b/docs/api/04-standard-library/ui/index.mdx
@@ -0,0 +1,57 @@
+---
+title: "ui module"
+id: ui
+---
+
+The `ui` module lets you create tools for interacting with resources in the Wing Console.
+
+Using components like `ui.Button`, `ui.Field`, or `ui.Table`, it's possible to trigger actions in Wing apps or display important information to the user.
+
+Here's an example of a class which has a button and field showing the internal state of the resource:
+
+```js playground example
+bring cloud;
+bring ui;
+
+class WidgetService {
+  data: cloud.Bucket;
+  counter: cloud.Counter;
+  new() {
+    this.data = new cloud.Bucket();
+    this.counter = new cloud.Counter();
+
+    // a button lets you invoke any inflight function
+    new ui.Button("Add widget", inflight () => { this.addWidget(); });
+
+    // a field displays a labeled value
+    new ui.Field(
+      "Total widgets",
+      inflight () => { return this.countWidgets(); },
+      refreshRate: 5s,
+    );
+  }
+
+  inflight addWidget() {
+    let id = this.counter.inc();
+    this.data.put("widget-{id}", "my data");
+  }
+
+  inflight countWidgets(): str {
+    return "{this.data.list().length}";
+  }
+}
+
+new WidgetService();
+```
+
+Here is what the UI looks like in the Wing Console:
+
+![](./widget-service-example.png)
+
+---
+
+```mdx-code-block
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />
+```
diff --git a/docs/api/04-standard-library/ui/widget-service-example.png b/docs/api/04-standard-library/ui/widget-service-example.png
diff --git a/docs/api/04-standard-library/util/api-reference.md b/docs/api/04-standard-library/util/api-reference.md
@@ -1,5 +1,5 @@
 ---
-title: API reference
+title: API Reference
 id: api-reference
 description: Wing standard library API reference for the util module
 keywords: [Wing sdk, sdk, Wing API Reference]

diff --git a/packages/@winglang/sdk/scripts/docgen.mts b/packages/@winglang/sdk/scripts/docgen.mts
@@ -21,7 +21,7 @@ const getStdlibDocsDir = (name: string) => {
 };
 
 const docsFrontMatter = (name: string) => `---
-title: API reference
+title: API Reference
 id: api-reference
 description: Wing standard library API reference for the ${name} module
 keywords: [Wing sdk, sdk, Wing API Reference]
@@ -33,7 +33,6 @@ sidebar_position: 100
 `;
 
 const UNDOCUMENTED_CLOUD_FILES = ["index", "test-runner"];
-const UNDOCUMENTED_EX_FILES = ["index"];
 const UNDOCUMENTED_STD_FILES = [
   "README",
   "index",