diff --git a/packages/typespec-azure-playground-website/package.json b/packages/typespec-azure-playground-website/package.json index d1c50b13a5..b444f05353 100644 --- a/packages/typespec-azure-playground-website/package.json +++ b/packages/typespec-azure-playground-website/package.json @@ -57,12 +57,15 @@ "@azure-tools/typespec-azure-rulesets": "workspace:^", "@azure-tools/typespec-client-generator-core": "workspace:^", "@emotion/react": "^11.14.0", + "@fluentui/react-components": "~9.72.3", + "@fluentui/react-icons": "^2.0.292", "@typespec/compiler": "workspace:^", "@typespec/events": "workspace:^", "@typespec/http": "workspace:^", "@typespec/json-schema": "workspace:^", "@typespec/openapi": "workspace:^", "@typespec/openapi3": "workspace:^", + "@typespec/pack": "workspace:^", "@typespec/protobuf": "workspace:^", "@typespec/rest": "workspace:^", "@typespec/sse": "workspace:^", @@ -78,6 +81,7 @@ "devDependencies": { "@playwright/test": "^1.51.1", "@types/node": "~24.10.1", + "@types/react": "~19.2.2", "@types/react-dom": "~19.2.2", "@typespec/bundler": "workspace:^", "@typespec/playground": "workspace:^", diff --git a/packages/typespec-azure-playground-website/src/import.module.css b/packages/typespec-azure-playground-website/src/import.module.css new file mode 100644 index 0000000000..d683e099a0 --- /dev/null +++ b/packages/typespec-azure-playground-website/src/import.module.css @@ -0,0 +1,9 @@ +.url-input { + width: 100%; + margin-bottom: 20px; +} + +.error { + color: var(--colorPaletteRedForeground1); + margin-bottom: 10px; +} diff --git a/packages/typespec-azure-playground-website/src/import.tsx b/packages/typespec-azure-playground-website/src/import.tsx new file mode 100644 index 0000000000..f73d1f152c --- /dev/null +++ b/packages/typespec-azure-playground-website/src/import.tsx @@ -0,0 +1,83 @@ +import { + Button, + Dialog, + DialogBody, + DialogContent, + DialogSurface, + DialogTitle, + Input, + Label, + ToolbarButton, + Tooltip, +} from "@fluentui/react-components"; +import { ArrowUploadFilled } from "@fluentui/react-icons"; +import { combineProjectIntoFile, createRemoteHost } from "@typespec/pack"; +import { DiagnosticList, usePlaygroundContext } from "@typespec/playground/react"; +import { ReactNode, useState } from "react"; +import style from "./import.module.css"; + +export const ImportToolbarButton = () => { + const [open, setOpen] = useState(false); + + return ( + <> + + } + onClick={() => setOpen(true)} + /> + + + setOpen(data.open)}> + + + Import Remote TypeSpec + + setOpen(false)} /> + + + + + + ); +}; + +const ImportTsp = ({ onImport }: { onImport: () => void }) => { + const [error, setError] = useState(null); + const [value, setValue] = useState(""); + const context = usePlaygroundContext(); + + const importSpec = async () => { + const content = value; + const result = await combineProjectIntoFile(createRemoteHost(), content); + if (result.diagnostics.length > 0) { + setError(); + return; + } else if (result.content) { + context.setContent(result.content); + onImport(); + } + }; + return ( +
+

Import Remote TypeSpec Document

+ +
+ +
+ setValue(data.value)} + className={style["url-input"]} + /> + {error &&
{error}
} +
+ +
+
+ ); +}; diff --git a/packages/typespec-azure-playground-website/src/main.tsx b/packages/typespec-azure-playground-website/src/main.tsx index 5db22f0264..d461bb5605 100644 --- a/packages/typespec-azure-playground-website/src/main.tsx +++ b/packages/typespec-azure-playground-website/src/main.tsx @@ -11,6 +11,7 @@ import samples from "../samples/dist/samples.js"; import { MANIFEST } from "@typespec/compiler"; import "@typespec/playground/style.css"; +import { ImportToolbarButton } from "./import.js"; import "./style.css"; registerMonacoDefaultWorkersForVite(); @@ -54,6 +55,7 @@ await renderReactPlayground({ useShim: true, }, footer: , + commandBarButtons: , onFileBug: () => { const bodyPayload = encodeURIComponent(`\n\n\n[Playground Link](${document.location.href})`); const url = `https://github.com/Azure/typespec-azure/issues/new?body=${bodyPayload}`; diff --git a/packages/typespec-azure-playground-website/tsconfig.json b/packages/typespec-azure-playground-website/tsconfig.json index fd48ab1a0d..58ea142e7d 100644 --- a/packages/typespec-azure-playground-website/tsconfig.json +++ b/packages/typespec-azure-playground-website/tsconfig.json @@ -10,7 +10,7 @@ "outDir": "dist-dev", "rootDir": ".", "tsBuildInfoFile": "temp/tsconfig.tsbuildinfo", - "types": ["node"], + "types": ["node", "vite/client"], "checkJs": true, "allowJs": true, "jsxImportSource": "@emotion/react", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 22eb64d14f..798b0d9d31 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1631,7 +1631,7 @@ importers: specifier: workspace:^ version: link:../openapi3 '@typespec/pack': - specifier: workspace:~ + specifier: workspace:^ version: link:../pack '@typespec/playground': specifier: workspace:^ @@ -2947,6 +2947,12 @@ importers: '@emotion/react': specifier: ^11.14.0 version: 11.14.0(@types/react@19.2.6)(react@18.3.1) + '@fluentui/react-components': + specifier: ~9.72.3 + version: 9.72.7(@types/react-dom@19.2.3(@types/react@19.2.6))(@types/react@19.2.6)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(scheduler@0.23.2) + '@fluentui/react-icons': + specifier: ^2.0.292 + version: 2.0.315(react@18.3.1) '@typespec/compiler': specifier: workspace:^ version: link:../../core/packages/compiler @@ -2965,6 +2971,9 @@ importers: '@typespec/openapi3': specifier: workspace:^ version: link:../../core/packages/openapi3 + '@typespec/pack': + specifier: workspace:^ + version: link:../../core/packages/pack '@typespec/protobuf': specifier: workspace:^ version: link:../../core/packages/protobuf @@ -3005,6 +3014,9 @@ importers: '@types/node': specifier: ~24.10.1 version: 24.10.1 + '@types/react': + specifier: ~19.2.2 + version: 19.2.6 '@types/react-dom': specifier: ~19.2.2 version: 19.2.3(@types/react@19.2.6)