Add support for resizing panes in the playground (#2581)

fix #2422 


![Kapture 2023-10-17 at 15 12
37](https://github.com/microsoft/typespec/assets/1031227/e2eea00b-3d2f-454a-9c89-76c678c6dedb)

common/changes/@typespec/playground/feature-split-pane_2023-10-18-15-43.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@typespec/playground",
+      "comment": "Add resizable panes for the editor and output",
+      "type": "none"
+    }
+  ],
+  "packageName": "@typespec/playground"
+}

packages/playground/definitions/index.d.ts

@@ -0,0 +1 @@
+declare module "*.module.css";

packages/playground/package.json

@@ -30,8 +30,9 @@
   },
   "scripts": {
     "clean": "rimraf ./dist ./dist-dev ./temp ./typespecContents.json",
-    "build": "tsc -p .",
-    "watch": "tsc -p . --watch",
+    "build": "tsc -p . && npm run copy-css",
+    "watch": "npm run copy-css && tsc -p . --watch",
+    "copy-css": "copyfiles -u 1 src/**/*.module.css dist/src",
     "preview": "npm run build && vite preview",
     "start": "vite",
     "e2e": "cross-env PW_EXPERIMENTAL_TS_ESM=1 playwright test -c e2e ",
@@ -89,6 +90,7 @@
     "rimraf": "~5.0.1",
     "rollup-plugin-visualizer": "~5.9.2",
     "typescript": "~5.2.2",
-    "vite": "^4.4.9"
+    "vite": "^4.4.9",
+    "copyfiles": "~2.4.1"
   }
 }

packages/playground/src/index.ts

@@ -2,5 +2,5 @@ export { createBrowserHost } from "./browser-host.js";
 export { registerMonacoDefaultWorkers } from "./monaco-worker.js";
 export { registerMonacoLanguage } from "./services.js";
 export { createUrlStateStorage } from "./state-storage.js";
-export { PlaygroundSample } from "./types.js";
+export type { PlaygroundSample } from "./types.js";
 export { resolveLibraries as filterEmitters } from "./utils.js";

packages/playground/src/react/index.ts

@@ -1,3 +1,4 @@
-export { Playground, PlaygroundProps } from "./playground.js";
+export { Playground } from "./playground.js";
+export type { PlaygroundProps } from "./playground.js";
 export { createReactPlayground, renderReactPlayground } from "./standalone.js";
 export * from "./types.js";

packages/playground/src/react/playground.tsx

@@ -14,6 +14,8 @@ import { useMonacoModel } from "./editor.js";
 import { Footer } from "./footer.js";
 import { useAsyncMemo, useControllableValue } from "./hooks.js";
 import { OutputView } from "./output-view.js";
+import Pane from "./split-pane/pane.js";
+import { SplitPane } from "./split-pane/split-pane.js";
 import { CompilationState, FileOutputViewer } from "./types.js";
 import { TypeSpecEditor } from "./typespec-editor.js";
 
@@ -208,45 +210,42 @@ export const Playground: FunctionComponent<PlaygroundProps> = (props) => {
     <div
       css={{
         display: "grid",
-        gridTemplateColumns: "repeat(2, 1fr)",
+        gridTemplateColumns: "1",
         gridTemplateRows: "1fr auto",
-        gridTemplateAreas: '"typespeceditor output"\n    "footer footer"',
+        gridTemplateAreas: '"typespeceditor"\n    "footer"',
         width: "100%",
         height: "100%",
         overflow: "hidden",
         fontFamily: `"Segoe UI", Tahoma, Geneva, Verdana, sans-serif`,
       }}
     >
-      <div css={{ gridArea: "typespeceditor", width: "100%", height: "100%", overflow: "hidden" }}>
-        <EditorCommandBar
-          libraries={libraries}
-          selectedEmitter={selectedEmitter}
-          onSelectedEmitterChange={onSelectedEmitterChange}
-          compilerOptions={compilerOptions}
-          onCompilerOptionsChange={onCompilerOptionsChange}
-          samples={props.samples}
-          selectedSampleName={selectedSampleName}
-          onSelectedSampleNameChange={onSelectedSampleNameChange}
-          saveCode={saveCode}
-          newIssue={props?.links?.githubIssueUrl ? newIssue : undefined}
-          documentationUrl={props.links?.documentationUrl}
-        />
-        <TypeSpecEditor model={typespecModel} actions={typespecEditorActions} />
-      </div>
-      <div
-        css={{
-          gridArea: "output",
-          overflow: "hidden",
-          display: "flex",
-          flexDirection: "column",
-          borderLeft: "1px solid #c5c5c5",
-        }}
+      <SplitPane
+        initialSizes={["50%", "50%"]}
+        css={{ gridArea: "typespeceditor", width: "100%", height: "100%", overflow: "hidden" }}
       >
-        <OutputView
-          compilationState={compilationState}
-          viewers={props.emitterViewers?.[selectedEmitter]}
-        />
-      </div>
+        <Pane>
+          <EditorCommandBar
+            libraries={libraries}
+            selectedEmitter={selectedEmitter}
+            onSelectedEmitterChange={onSelectedEmitterChange}
+            compilerOptions={compilerOptions}
+            onCompilerOptionsChange={onCompilerOptionsChange}
+            samples={props.samples}
+            selectedSampleName={selectedSampleName}
+            onSelectedSampleNameChange={onSelectedSampleNameChange}
+            saveCode={saveCode}
+            newIssue={props?.links?.githubIssueUrl ? newIssue : undefined}
+            documentationUrl={props.links?.documentationUrl}
+          />
+          <TypeSpecEditor model={typespecModel} actions={typespecEditorActions} />
+        </Pane>
+        <Pane>
+          <OutputView
+            compilationState={compilationState}
+            viewers={props.emitterViewers?.[selectedEmitter]}
+          />
+        </Pane>
+      </SplitPane>
       <Footer />
     </div>
   );

packages/playground/src/react/split-pane/index.ts

@@ -0,0 +1 @@
+export { SplitPane, SplitPaneProps } from "./split-pane.js";

packages/playground/src/react/split-pane/pane.tsx

@@ -0,0 +1,13 @@
+import { HTMLAttributes, PropsWithChildren } from "react";
+
+export interface PaneProps {
+  maxSize?: number | string;
+  minSize?: number | string;
+}
+
+export default function Pane({
+  children,
+  ...props
+}: PropsWithChildren<HTMLAttributes<HTMLDivElement> & PaneProps>) {
+  return <div {...props}>{children}</div>;
+}

packages/playground/src/react/split-pane/sash-content.tsx

@@ -0,0 +1,29 @@
+import { mergeClasses } from "@fluentui/react-components";
+import { ReactNode } from "react";
+import style from "./split-pane.module.css";
+
+export interface SashContentProps {
+  className?: string;
+  dragging?: boolean;
+  children?: ReactNode;
+}
+
+export const SashContent: React.FunctionComponent<SashContentProps> = ({
+  className,
+  children,
+  dragging,
+  ...others
+}: SashContentProps) => {
+  return (
+    <div
+      className={mergeClasses(
+        style["sash-content"],
+        dragging && style["sash-content-dragging"],
+        className
+      )}
+      {...others}
+    >
+      {children}
+    </div>
+  );
+};

packages/playground/src/react/split-pane/sash.tsx

@@ -0,0 +1,53 @@
+import { mergeClasses } from "@fluentui/react-components";
+import { ReactNode, useState } from "react";
+import style from "./split-pane.module.css";
+
+export interface SashProps {
+  className?: string;
+  style: React.CSSProperties;
+  render: (dragging: boolean) => ReactNode;
+  onReset: () => void;
+  onDragStart: React.MouseEventHandler<HTMLDivElement>;
+  onDragging: React.MouseEventHandler<HTMLDivElement>;
+  onDragEnd: React.MouseEventHandler<HTMLDivElement>;
+}
+
+export const Sash = ({
+  className,
+  render,
+  onDragStart,
+  onDragging,
+  onDragEnd,
+  onReset,
+  ...others
+}: SashProps) => {
+  const [draging, setDrag] = useState(false);
+
+  const handleMouseMove = (e: any) => {
+    onDragging(e);
+  };
+
+  const handleMouseUp = (e: any) => {
+    setDrag(false);
+    onDragEnd(e);
+    window.removeEventListener("mousemove", handleMouseMove);
+    window.removeEventListener("mouseup", handleMouseUp);
+  };
+
+  return (
+    <div
+      className={mergeClasses(style["sash"], className)}
+      onMouseDown={(e) => {
+        setDrag(true);
+        onDragStart(e);
+
+        window.addEventListener("mousemove", handleMouseMove);
+        window.addEventListener("mouseup", handleMouseUp);
+      }}
+      onDoubleClick={onReset}
+      {...others}
+    >
+      {render(draging)}
+    </div>
+  );
+};