[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.
Robert Zhang committed
Oct 23, 2022 at 18:33 UTC
2c37aa78d3ff00d25d7ce919482fdf7a02c06e5a
5 files changed
+54
-50
compiler/forget/packages/playground/components/Editor/CompilerFlagsEditor.tsx
+34
-25
@@ -1,37 +1,46 @@
1
/*
2
* Copyright (c) Facebook, Inc. and its affiliates.
3
*/
4
-import { type ForgetCompilerFlags } from "../../lib/compilerDriver";
4
+import clsx from "clsx";
5
+import type { ForgetCompilerFlags } from "../../lib/compilerDriver";
6
import { useStore, useStoreDispatch } from "../StoreContext";
7
8
+// TODO: Allow collapsing the compiler options editor
9
export default function CompilerFlagsEditor() {
10
const store = useStore();
11
const dispatch = useStoreDispatch();
12
+
13
return (
11
- <div
12
- style={{
13
- display: "grid",
14
- gridTemplateColumns: "repeat(2, 1fr)",
15
- }}
16
- >
17
- {Object.keys(store.compilerFlags).map((f: string) => {
18
- const flag = f as keyof ForgetCompilerFlags;
19
- return (
20
- <label key={flag} style={{ display: "block" }}>
21
- <input
22
- type="checkbox"
23
- checked={store.compilerFlags[flag]}
24
- onChange={(e) =>
25
- dispatch({
26
- type: "setCompilerFlag",
27
- payload: { flag, value: e.target.checked },
28
- })
29
- }
30
- />
31
- {flag}
32
- </label>
33
- );
34
- })}
14
+ <div className="flex flex-col gap-2 px-5 py-4 border-t border-gray-200">
15
+ <div>
16
+ <h3 className="font-medium">Compiler Options</h3>
17
+ </div>
18
+ <div className="flex flex-col">
19
+ {Object.keys(store.compilerFlags).map((f) => {
20
+ const flag = f as keyof ForgetCompilerFlags;
21
+ const isChecked = store.compilerFlags[flag];
22
+
23
+ return (
24
+ <label key={flag} className="flex gap-1.5 text-base">
25
+ <input
26
+ type="checkbox"
27
+ checked={isChecked}
28
+ onChange={(e) =>
29
+ dispatch({
30
+ type: "setCompilerFlag",
31
+ payload: { flag, value: e.target.checked },
32
+ })
33
+ }
34
+ />
35
+ <span
36
+ className={clsx("text-gray-500", { "text-black": isChecked })}
37
+ >
38
+ {flag}
39
+ </span>
40
+ </label>
41
+ );
42
+ })}
43
+ </div>
44
</div>
45
);
46
}
compiler/forget/packages/playground/components/Editor/index.tsx
+8
-15
@@ -18,9 +18,9 @@ import {
18
type Store,
19
} from "../../lib/stores";
20
import { useStore, useStoreDispatch } from "../StoreContext";
21
+import CompilerFlagsEditor from "./CompilerFlagsEditor";
22
import Input from "./Input";
23
import Output from "./Output";
23
-import CompilerFlagsEditor from "./CompilerFlagsEditor";
24
25
export default function Editor() {
26
const store = useStore();
@@ -89,22 +89,15 @@ export default function Editor() {
89
})}
90
>
91
<Output store={deferredStore} updateDiagnostics={updateDiagnostics} />
92
- <div
93
- className={clsx("sm:block sm:min-h-[150px] border border-gray-200")}
94
- >
95
- <h3>Compiler Options</h3>
96
- <CompilerFlagsEditor />
97
- </div>
92
+ <CompilerFlagsEditor />
93
</div>
94
</div>
100
- <div className="bottom-4 left-4 sm:hidden">
101
- <button
102
- className="px-3 py-2 font-mono text-sm rounded-lg shadow-md bg-highlight text-link"
103
- onClick={() => setShowOutputOnMobile(!showOutputOnMobile)}
104
- >
105
- {showOutputOnMobile ? "< Code" : "Output >"}
106
- </button>
107
- </div>
95
+ <button
96
+ className="w-full px-3 py-2 font-mono text-sm bg-highlight text-link sm:hidden"
97
+ onClick={() => setShowOutputOnMobile(!showOutputOnMobile)}
98
+ >
99
+ {showOutputOnMobile ? "< Code" : "Output >"}
100
+ </button>
101
</>
102
);
103
}
compiler/forget/packages/playground/components/Editor/monacoOptions.ts
+2
@@ -21,4 +21,6 @@ export const monacoOptions: Partial<EditorProps["options"]> = {
21
autoClosingBrackets: "languageDefined",
22
autoClosingDelete: "always",
23
autoClosingOvertype: "always",
24
+
25
+ automaticLayout: true,
26
};
compiler/forget/packages/playground/package.json
+1
-1
@@ -17,7 +17,7 @@
17
"@hpcc-js/wasm": "^1.15.0",
18
"@monaco-editor/react": "^4.4.5",
19
"@mui/material": "^5.9.1",
20
- "@use-gesture/react": "^10.2.17",
20
+ "@use-gesture/react": "^10.2.20",
21
"fflate": "^0.7.3",
22
"hermes-eslint": "^0.9.0",
23
"invariant": "^2.2.4",
compiler/forget/packages/playground/yarn.lock
+9
-9
@@ -697,17 +697,17 @@
697
"@typescript-eslint/types" "5.28.0"
698
eslint-visitor-keys "^3.3.0"
699
700
-"@use-gesture/core@10.2.17":
701
- version "10.2.17"
702
- resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.17.tgz#dc78913cd5d105217c3f1d1c16a32ad6426a00ba"
703
- integrity sha512-62hCybe4x6oGZ1/JA9gSYIdghV1FqxCdvYWt9SqCEAAikwT1OmVl2Q/Uu8CP636L57D+DfXtw6PWM+fdhr4oJQ==
700
+"@use-gesture/core@10.2.20":
701
+ version "10.2.20"
702
+ resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.2.20.tgz#b29e0aadd5e90336e599d849e50eef0e06aa28bf"
703
+ integrity sha512-4lFhHc8so4yIHkBEs641DnEsBxPyhJ5GEjB4PURFDH4p/FcZriH6w99knZgI63zN/MBFfylMyb8+PDuj6RIXKQ==
704
705
-"@use-gesture/react@^10.2.17":
706
- version "10.2.17"
707
- resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.17.tgz#00bc413da42a358dd3f9173c0631b54522e76614"
708
- integrity sha512-Vfrp1KgdYn/kOEUAYNXtGBCl2dr38s3G6rru1TOPs+cVUjfNyNxvJK56grUyJ336N3rQLK8F9G7+FfrHuc3g/Q==
705
+"@use-gesture/react@^10.2.20":
706
+ version "10.2.20"
707
+ resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.2.20.tgz#2d556a62c22200507b9d478ce7159057004acb8d"
708
+ integrity sha512-KnJq9ZSqprWA6uNhWTUHZqTCh+rfa0j8ehTzqeBhktUPrmTj7yVOBvEQ/vSFU/7d72cGgWSsJ0f5T6GQCHXnvg==
709
dependencies:
710
- "@use-gesture/core" "10.2.17"
710
+ "@use-gesture/core" "10.2.20"
711
712
acorn-jsx@^5.3.2:
713
version "5.3.2"