From 2c37aa78d3ff00d25d7ce919482fdf7a02c06e5a Mon Sep 17 00:00:00 2001 From: Robert Zhang Date: Sun, 23 Oct 2022 18:33:39 -0400 Subject: [PATCH] [Playground] Style compiler options editor This diff adds styling to the compiler options editor. The floating input/output toggle button on small screens now spans the bottom of the screen, so that it doesn't block the compiler options. Height overflows when adjusting screen size are complicated by Monaco Editor and will be addressed in a later diff. Test plan: Start Playground and see the latest look of the compiler options editor beneath the output section. --- .../components/Editor/CompilerFlagsEditor.tsx | 59 +++++++++++-------- .../playground/components/Editor/index.tsx | 23 +++----- .../components/Editor/monacoOptions.ts | 2 + .../forget/packages/playground/package.json | 2 +- compiler/forget/packages/playground/yarn.lock | 18 +++--- 5 files changed, 54 insertions(+), 50 deletions(-) diff --git a/compiler/forget/packages/playground/components/Editor/CompilerFlagsEditor.tsx b/compiler/forget/packages/playground/components/Editor/CompilerFlagsEditor.tsx index 3260cadf5a..69f245ae66 100644 --- a/compiler/forget/packages/playground/components/Editor/CompilerFlagsEditor.tsx +++ b/compiler/forget/packages/playground/components/Editor/CompilerFlagsEditor.tsx @@ -1,37 +1,46 @@ /* * Copyright (c) Facebook, Inc. and its affiliates. */ -import { type ForgetCompilerFlags } from "../../lib/compilerDriver"; +import clsx from "clsx"; +import type { ForgetCompilerFlags } from "../../lib/compilerDriver"; import { useStore, useStoreDispatch } from "../StoreContext"; +// TODO: Allow collapsing the compiler options editor export default function CompilerFlagsEditor() { const store = useStore(); const dispatch = useStoreDispatch(); + return ( -
- {Object.keys(store.compilerFlags).map((f: string) => { - const flag = f as keyof ForgetCompilerFlags; - return ( - - ); - })} +
+
+

Compiler Options

+
+
+ {Object.keys(store.compilerFlags).map((f) => { + const flag = f as keyof ForgetCompilerFlags; + const isChecked = store.compilerFlags[flag]; + + return ( + + ); + })} +
); } diff --git a/compiler/forget/packages/playground/components/Editor/index.tsx b/compiler/forget/packages/playground/components/Editor/index.tsx index e127c7bef6..1e45c80a5d 100644 --- a/compiler/forget/packages/playground/components/Editor/index.tsx +++ b/compiler/forget/packages/playground/components/Editor/index.tsx @@ -18,9 +18,9 @@ import { type Store, } from "../../lib/stores"; import { useStore, useStoreDispatch } from "../StoreContext"; +import CompilerFlagsEditor from "./CompilerFlagsEditor"; import Input from "./Input"; import Output from "./Output"; -import CompilerFlagsEditor from "./CompilerFlagsEditor"; export default function Editor() { const store = useStore(); @@ -89,22 +89,15 @@ export default function Editor() { })} > -
-

Compiler Options

- -
+
-
- -
+ ); } diff --git a/compiler/forget/packages/playground/components/Editor/monacoOptions.ts b/compiler/forget/packages/playground/components/Editor/monacoOptions.ts index 3c38e027b9..06b342cfc3 100644 --- a/compiler/forget/packages/playground/components/Editor/monacoOptions.ts +++ b/compiler/forget/packages/playground/components/Editor/monacoOptions.ts @@ -21,4 +21,6 @@ export const monacoOptions: Partial = { autoClosingBrackets: "languageDefined", autoClosingDelete: "always", autoClosingOvertype: "always", + + automaticLayout: true, }; diff --git a/compiler/forget/packages/playground/package.json b/compiler/forget/packages/playground/package.json index 3000e97cbb..1060cc072e 100644 --- a/compiler/forget/packages/playground/package.json +++ b/compiler/forget/packages/playground/package.json @@ -17,7 +17,7 @@ "@hpcc-js/wasm": "^1.15.0", "@monaco-editor/react": "^4.4.5", "@mui/material": "^5.9.1", - "@use-gesture/react": "^10.2.17", + "@use-gesture/react": "^10.2.20", "fflate": "^0.7.3", "hermes-eslint": "^0.9.0", "invariant": "^2.2.4", diff --git a/compiler/forget/packages/playground/yarn.lock b/compiler/forget/packages/playground/yarn.lock index e328b566a9..00dbcd6c89 100644 --- a/compiler/forget/packages/playground/yarn.lock +++ b/compiler/forget/packages/playground/yarn.lock @@ -697,17 +697,17 @@ "@typescript-eslint/types" "5.28.0" eslint-visitor-keys "^3.3.0" -"@use-gesture/core@10.2.17": - version "10.2.17" - resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.17.tgz#dc78913cd5d105217c3f1d1c16a32ad6426a00ba" - integrity sha512-62hCybe4x6oGZ1/JA9gSYIdghV1FqxCdvYWt9SqCEAAikwT1OmVl2Q/Uu8CP636L57D+DfXtw6PWM+fdhr4oJQ== +"@use-gesture/core@10.2.20": + version "10.2.20" + resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.20.tgz#b29e0aadd5e90336e599d849e50eef0e06aa28bf" + integrity sha512-4lFhHc8so4yIHkBEs641DnEsBxPyhJ5GEjB4PURFDH4p/FcZriH6w99knZgI63zN/MBFfylMyb8+PDuj6RIXKQ== -"@use-gesture/react@^10.2.17": - version "10.2.17" - resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.17.tgz#00bc413da42a358dd3f9173c0631b54522e76614" - integrity sha512-Vfrp1KgdYn/kOEUAYNXtGBCl2dr38s3G6rru1TOPs+cVUjfNyNxvJK56grUyJ336N3rQLK8F9G7+FfrHuc3g/Q== +"@use-gesture/react@^10.2.20": + version "10.2.20" + resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.20.tgz#2d556a62c22200507b9d478ce7159057004acb8d" + integrity sha512-KnJq9ZSqprWA6uNhWTUHZqTCh+rfa0j8ehTzqeBhktUPrmTj7yVOBvEQ/vSFU/7d72cGgWSsJ0f5T6GQCHXnvg== dependencies: - "@use-gesture/core" "10.2.17" + "@use-gesture/core" "10.2.20" acorn-jsx@^5.3.2: version "5.3.2"