@typespec/playground 0.14.0-dev.7 → 0.14.0-dev.8

package/dist/react/index.js

@@ -4,7 +4,7 @@ import { getSourceLocation } from "@typespec/compiler";
 import { KeyCode, KeyMod, MarkerSeverity, Uri, editor } from "monaco-editor";
 import { CompletionItemTag } from "vscode-languageserver";
 import { Fragment, createContext, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
-import { Button, Card, Checkbox, DrawerBody, DrawerHeader, DrawerHeaderTitle, FluentProvider, Input, Label, Menu, MenuDivider, MenuItem, MenuList, MenuPopover, MenuTrigger, OverlayDrawer, Popover, PopoverSurface, PopoverTrigger, Radio, RadioGroup, Select, Subtitle2, Switch, Tab, TabList, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow, Text, Title3, Toast, ToastBody, ToastTitle, Toaster, Toolbar, ToolbarButton, Tooltip, mergeClasses, tokens, useId as useId$1, useToastController, webLightTheme } from "@fluentui/react-components";
+import { Button, Card, Checkbox, DrawerBody, DrawerHeader, DrawerHeaderTitle, FluentProvider, Input, Label, Menu, MenuDivider, MenuItem, MenuList, MenuPopover, MenuTrigger, OverlayDrawer, Popover, PopoverSurface, PopoverTrigger, Radio, RadioGroup, SearchBox, Select, Subtitle2, Switch, Tab, TabList, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableRow, Text, Title3, Toast, ToastBody, ToastTitle, Toaster, Toolbar, ToolbarButton, Tooltip, mergeClasses, tokens, useId as useId$1, useToastController, webLightTheme } from "@fluentui/react-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { $ } from "@typespec/compiler/typekit";
 import { Broom16Filled, Bug16Regular, Checkmark16Regular, ChevronDown16Regular, ChevronDownRegular, ChevronRightRegular, DataLineRegular, Dismiss24Regular, DocumentBulletList24Regular, DocumentRegular, ErrorCircle16Filled, FolderListRegular, FolderRegular, MoreHorizontal24Filled, Save16Regular, SettingsRegular, Warning16Filled } from "@fluentui/react-icons";
@@ -850,15 +850,20 @@ var MenuItemRenderer = ({ item }) => {
 //#endregion
 //#region src/react/samples-drawer/samples-drawer.module.css
 var samples_drawer_module_default = {
-	"samples-grid": "_samples-grid_1dkte_1",
-	"sample-card": "_sample-card_1dkte_8",
-	"sample-card-content": "_sample-card-content_1dkte_26",
-	"sample-card-text": "_sample-card-text_1dkte_32",
-	"sample-icon": "_sample-icon_1dkte_40",
-	"sample-icon-pattern": "_sample-icon-pattern_1dkte_53",
-	"sample-icon-initials": "_sample-icon-initials_1dkte_59",
-	"sample-title": "_sample-title_1dkte_66",
-	"sample-description": "_sample-description_1dkte_71"
+	"samples-search": "_samples-search_103tj_1",
+	"search-input": "_search-input_103tj_9",
+	"samples-category": "_samples-category_103tj_13",
+	"category-title": "_category-title_103tj_17",
+	"samples-empty": "_samples-empty_103tj_23",
+	"samples-grid": "_samples-grid_103tj_30",
+	"sample-card": "_sample-card_103tj_37",
+	"sample-card-content": "_sample-card-content_103tj_55",
+	"sample-card-text": "_sample-card-text_103tj_61",
+	"sample-icon": "_sample-icon_103tj_69",
+	"sample-icon-pattern": "_sample-icon-pattern_103tj_82",
+	"sample-icon-initials": "_sample-icon-initials_103tj_88",
+	"sample-title": "_sample-title_103tj_95",
+	"sample-description": "_sample-description_103tj_100"
 };
 //#endregion
 //#region src/react/samples-drawer/sample-icon.tsx
@@ -1029,15 +1034,45 @@ var SampleCard = ({ name, sample, onSelect }) => {
 };
 //#endregion
 //#region src/react/samples-drawer/samples-drawer-trigger.tsx
+function groupAndFilterSamples(samples, searchQuery) {
+	const query = searchQuery.toLowerCase().trim();
+	const categoryMap = /* @__PURE__ */ new Map();
+	for (const [name, sample] of Object.entries(samples)) {
+		if (query) {
+			const matchesName = name.toLowerCase().includes(query);
+			const matchesDescription = sample.description?.toLowerCase().includes(query);
+			const matchesCategory = sample.category?.toLowerCase().includes(query);
+			if (!matchesName && !matchesDescription && !matchesCategory) continue;
+		}
+		const category = sample.category ?? "Other";
+		let entries = categoryMap.get(category);
+		if (!entries) {
+			entries = [];
+			categoryMap.set(category, entries);
+		}
+		entries.push([name, sample]);
+	}
+	return Array.from(categoryMap.entries()).map(([name, entries]) => ({
+		name,
+		entries
+	})).sort((a, b) => a.name.localeCompare(b.name));
+}
 /** The overlay drawer showing the sample gallery. Controlled via open/onOpenChange. */
 var SamplesDrawerOverlay = ({ samples, onSelectedSampleNameChange, open, onOpenChange }) => {
+	const [searchQuery, setSearchQuery] = useState("");
 	const handleSampleSelect = useCallback((sampleName) => {
 		onSelectedSampleNameChange(sampleName);
 		onOpenChange(false);
 	}, [onSelectedSampleNameChange, onOpenChange]);
+	const categories = useMemo(() => groupAndFilterSamples(samples, searchQuery), [samples, searchQuery]);
+	const hasCategories = useMemo(() => Object.values(samples).some((s) => s.category), [samples]);
+	const totalFiltered = useMemo(() => categories.reduce((sum, c) => sum + c.entries.length, 0), [categories]);
 	return /* @__PURE__ */ jsxs(OverlayDrawer, {
 		open,
-		onOpenChange: (_, data) => onOpenChange(data.open),
+		onOpenChange: (_, data) => {
+			onOpenChange(data.open);
+			if (!data.open) setSearchQuery("");
+		},
 		position: "end",
 		size: "large",
 		children: [/* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerHeaderTitle, {
@@ -1048,14 +1083,40 @@ var SamplesDrawerOverlay = ({ samples, onSelectedSampleNameChange, open, onOpenC
 				onClick: () => onOpenChange(false)
 			}),
 			children: "Sample Gallery"
-		}) }), /* @__PURE__ */ jsx(DrawerBody, { children: /* @__PURE__ */ jsx("div", {
+		}) }), /* @__PURE__ */ jsxs(DrawerBody, { children: [/* @__PURE__ */ jsx("div", {
+			className: samples_drawer_module_default["samples-search"],
+			children: /* @__PURE__ */ jsx(SearchBox, {
+				placeholder: "Search samples...",
+				value: searchQuery,
+				onChange: (_, data) => setSearchQuery(data.value),
+				className: samples_drawer_module_default["search-input"]
+			})
+		}), totalFiltered === 0 ? /* @__PURE__ */ jsx("div", {
+			className: samples_drawer_module_default["samples-empty"],
+			children: /* @__PURE__ */ jsx(Text, { children: "No samples match your search." })
+		}) : hasCategories ? categories.map((category) => /* @__PURE__ */ jsxs("div", {
+			className: samples_drawer_module_default["samples-category"],
+			children: [/* @__PURE__ */ jsx(Text, {
+				as: "h3",
+				weight: "semibold",
+				className: samples_drawer_module_default["category-title"],
+				children: category.name
+			}), /* @__PURE__ */ jsx("div", {
+				className: samples_drawer_module_default["samples-grid"],
+				children: category.entries.map(([name, sample]) => /* @__PURE__ */ jsx(SampleCard, {
+					name,
+					sample,
+					onSelect: handleSampleSelect
+				}, name))
+			})]
+		}, category.name)) : /* @__PURE__ */ jsx("div", {
 			className: samples_drawer_module_default["samples-grid"],
-			children: Object.entries(samples).map(([name, sample]) => /* @__PURE__ */ jsx(SampleCard, {
+			children: categories.flatMap((c) => c.entries.map(([name, sample]) => /* @__PURE__ */ jsx(SampleCard, {
 				name,
 				sample,
 				onSelect: handleSampleSelect
-			}, name))
-		}) })]
+			}, name)))
+		})] })]
 	});
 };
 /** Toolbar button trigger + overlay drawer for samples. */

package/dist/src/react/samples-drawer/samples-drawer-trigger.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"samples-drawer-trigger.d.ts","sourceRoot":"","sources":["../../../../src/react/samples-drawer/samples-drawer-trigger.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAyB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC1C,0BAA0B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED,uFAAuF;AACvF,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,CA4C7E,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,kBAAkB,CA0BtE,CAAC"}
+{"version":3,"file":"samples-drawer-trigger.d.ts","sourceRoot":"","sources":["../../../../src/react/samples-drawer/samples-drawer-trigger.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAkC,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAIvD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC1C,0BAA0B,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1D;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAoCD,uFAAuF;AACvF,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,CA8F7E,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,kBAAkB,CA0BtE,CAAC"}

package/dist/src/types.d.ts

@@ -7,6 +7,10 @@ export interface PlaygroundSample {
      * A short description of what this sample demonstrates.
      */
     description?: string;
+    /**
+     * Category for grouping samples in the sample gallery.
+     */
+    category?: string;
     /**
      * Compiler options for the sample.
      */

package/dist/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,WAAW,EACX,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,QAAQ,EAAE,cAAc,oBAAoB,CAAC,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;CACjD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,eAAe,EACf,gBAAgB,EAChB,WAAW,EACX,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;CACnC;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B;AAED,MAAM,WAAW,WAAY,SAAQ,YAAY;IAC/C,QAAQ,EAAE,cAAc,oBAAoB,CAAC,CAAC;IAC9C,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAC;CACjD"}

package/dist/style.css

@@ -182,14 +182,43 @@
 ._divider_1gurd_5 {
   flex: 1;
 }
-._samples-grid_1dkte_1 {
+._samples-search_103tj_1 {
+  padding: 0 0 16px 0;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--colorNeutralBackground1);
+}
+
+._search-input_103tj_9 {
+  width: 100%;
+}
+
+._samples-category_103tj_13 {
+  margin-bottom: 24px;
+}
+
+._category-title_103tj_17 {
+  font-size: var(--fontSizeBase400);
+  margin: 0 0 12px 0;
+  color: var(--colorNeutralForeground1);
+}
+
+._samples-empty_103tj_23 {
+  display: flex;
+  justify-content: center;
+  padding: 48px 16px;
+  color: var(--colorNeutralForeground3);
+}
+
+._samples-grid_103tj_30 {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: 16px;
   padding: 8px 0;
 }
 
-._sample-card_1dkte_8 {
+._sample-card_103tj_37 {
   cursor: pointer;
   padding: 16px;
   transition:
@@ -198,22 +227,22 @@
   min-height: 100px;
 }
 
-._sample-card_1dkte_8:hover {
+._sample-card_103tj_37:hover {
   box-shadow: var(--shadow8);
 }
 
-._sample-card_1dkte_8:focus-visible {
+._sample-card_103tj_37:focus-visible {
   outline: 2px solid var(--colorBrandStroke1);
   outline-offset: 2px;
 }
 
-._sample-card-content_1dkte_26 {
+._sample-card-content_103tj_55 {
   display: flex;
   gap: 16px;
   align-items: flex-start;
 }
 
-._sample-card-text_1dkte_32 {
+._sample-card-text_103tj_61 {
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -221,7 +250,7 @@
   min-width: 0;
 }
 
-._sample-icon_1dkte_40 {
+._sample-icon_103tj_69 {
   width: 48px;
   height: 48px;
   border-radius: 8px;
@@ -234,25 +263,25 @@
   user-select: none;
 }
 
-._sample-icon-pattern_1dkte_53 {
+._sample-icon-pattern_103tj_82 {
   position: absolute;
   top: 0;
   left: 0;
 }
 
-._sample-icon-initials_1dkte_59 {
+._sample-icon-initials_103tj_88 {
   position: relative;
   font-size: 16px;
   font-weight: 600;
   z-index: 1;
 }
 
-._sample-title_1dkte_66 {
+._sample-title_103tj_95 {
   font-size: var(--fontSizeBase400);
   margin: 0;
 }
 
-._sample-description_1dkte_71 {
+._sample-description_103tj_100 {
   font-size: var(--fontSizeBase200);
   color: var(--colorNeutralForeground2);
   margin: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typespec/playground",
-  "version": "0.14.0-dev.7",
+  "version": "0.14.0-dev.8",
   "author": "Microsoft Corporation",
   "description": "TypeSpec playground UI components.",
   "homepage": "https://typespec.io",
@@ -61,8 +61,8 @@
   "dependencies": {
     "@fluentui/react-components": "~9.73.3",
     "@fluentui/react-icons": "^2.0.323",
-    "@typespec/bundler": "^0.5.1 || >= 0.5.2-dev.5",
-    "@typespec/compiler": "^1.10.0 || >= 1.11.0-dev.8",
+    "@typespec/bundler": "^0.5.1 || >= 0.5.2-dev.6",
+    "@typespec/compiler": "^1.10.0 || >= 1.11.0-dev.9",
     "@typespec/html-program-viewer": "^0.80.0 || >= 0.81.0-dev.3",
     "@typespec/http": "^1.10.0 || >= 1.11.0-dev.3",
     "@typespec/openapi": "^1.10.0 || >= 1.11.0-dev.2",
@@ -95,7 +95,7 @@
     "@types/react": "~19.2.14",
     "@types/react-dom": "~19.2.3",
     "@types/swagger-ui-dist": "~3.30.6",
-    "@typespec/bundler": "^0.5.1 || >= 0.5.2-dev.5",
+    "@typespec/bundler": "^0.5.1 || >= 0.5.2-dev.6",
     "@vitejs/plugin-react": "~6.0.1",
     "c8": "^11.0.0",
     "cross-env": "~10.1.0",