Skip to content

Commit

Permalink
Add minimal css
Browse files Browse the repository at this point in the history
  • Loading branch information
@skryukov
skryukov committed Jan 28, 2024
1 parent 23d5736 commit 571d8dc
Show file tree
Hide file tree
Showing 3 changed files with 265 additions and 42 deletions.
143 changes: 101 additions & 42 deletions src/components/App/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,78 +2,137 @@ import { useState } from "react";
import Editor from "@monaco-editor/react";

import { runWASI } from "../../engines/wasi";
import cs from "./styles.module.css";

const initialRubyCode = `require "uri/idna"
const initialRubyCode = `require "uri-idna"
URI::IDNA.register(alabel: "xn--gdkl8fhk5egc.jp", ulabel: "ハロー・ワールド.jp")
`;

export default function App() {
const [gem, setGem] = useState("uri-idna");
const [gem, setGem] = useState("");
const [loading, setLoading] = useState(true);
const [code, setCode] = useState(initialRubyCode);
const [result, setResult] = useState("Press run...");
const [stdLog, setStdLog] = useState<string[]>([]);
const [errLog, setErrLog] = useState<string[]>([]);
const [log, setLog] = useState<string[]>([]);
const [editorValueSource, setEditorValueSource] = useState<"result" | "logs">("result");
const [installedGems, setInstalledGems] = useState<string[]>([]);

const runVM = (executeCode?: string) => {
const runVM = (executeCode?: string, onSuccess?: Function, onError?: Function ) => {
setLoading(true);
setStdLog([]);
setErrLog([]);
setLog([]);
setResult("");
const setStdout = (line: string) => {
console.log(line);
setStdLog((old) => [...old, line]);
setLog((old) => [...old, line]);
};
const setStderr = (line: string) => {
console.warn(line);
setErrLog((old) => [...old, line]);
setLog((old) => [...old, `[error] ${line}`]);
};
runWASI({code: (executeCode || code), setResult, setStdout, setStderr })
.catch(console.error)
runWASI({ code: (executeCode || code), setResult, setStdout, setStderr })
.catch((err) => {
setLog((old) => [...old, `[error] ${err}`]);
setEditorValueSource("logs");
onError && onError(err);
})
.then(() => {
setEditorValueSource("result");
onSuccess && onSuccess();
})
.finally(() => setLoading(false));
};

const installGem = () => {
runVM(`Gem::Commands::InstallCommand.new.install_gem("${gem}", nil)`)
}
if (!gem) {
return;
}
runVM(
`Gem::Commands::InstallCommand.new.install_gem("${gem}", nil)`,
() => setInstalledGems((old) => [...old, gem]),
);
setGem("");
};

const handleEditorChange = (value: string | undefined) => {
setCode(value || "");
};

return (
<div style={{ display: "flex", padding: "10px" }}>
<Editor
height="90vh"
width="50%"
defaultLanguage="ruby"
defaultValue={code}
onChange={handleEditorChange}
onMount={() => setLoading(false)}
options={{minimap: {enabled: false}}}
/>
<div className={cs.container}>
<div className={cs.header}>
<h1 className={cs.title}>Ruby WASI Playground</h1>
</div>
<div className={cs.menu}>
<label className={cs.menuLabel}>
Dependencies
</label>
<div className={cs.menuInputButton}>
<input
className={cs.menuInput}
onKeyDown={(event) => event.key === "Enter" && !loading && installGem()}
value={gem}
placeholder="Enter gem to install"
disabled={loading}
onChange={(event) => setGem(event.target.value)}
/>
<button className={cs.menuInstallButton} disabled={loading} onClick={() => !loading && installGem()}>
+
</button>
</div>
<div className={cs.menuDependencies}>
{installedGems.map((gem) => (
<div className={cs.menuDependency} key={gem}>
{gem}
</div>
))}
</div>
</div>

<div style={{ width: "50%", paddingLeft: "10px" }}>
<input
value={gem}
disabled={loading}
onChange={(event) => setGem(event.target.value)}
/>
<button disabled={loading} onClick={() => !loading && installGem()}>
Install gem
</button>{" "}
<div className={cs.editor}>
<div className={cs.editorText}>
<Editor
height="100%"
width="100%"
theme="vs-dark"
defaultLanguage="ruby"
defaultValue={code}
onChange={handleEditorChange}
onMount={() => setLoading(false)}
options={{ wordWrap: "on", minimap: { enabled: false }, overviewRulerBorder: false }}
/>
</div>
<div className={cs.editorFooter}>
<div className={cs.editorLoading}>
{loading && "loading..."}
</div>
<button className={cs.runButton} disabled={loading} onClick={() => !loading && runVM()}>
Run code
</button>
</div>
</div>

<button disabled={loading} onClick={() => !loading && runVM()}>
Run
</button>{" "}
{loading && "loading..."}
<h5>Result:</h5>
<code>{result}</code>
<h5>Stdout:</h5>
<code>{stdLog}</code>
<h5>Stderr:</h5>
<code>{errLog}</code>
<div className={cs.output}>
<div className={cs.switchButtons}>
<button className={`${cs.switchButton} ${editorValueSource === "result" ? cs.switchButtonActive : ""}`}
onClick={() => setEditorValueSource("result")}>
Result
</button>
<button className={`${cs.switchButton} ${editorValueSource === "logs" ? cs.switchButtonActive : ""}`}
onClick={() => setEditorValueSource("logs")}>
Logs
</button>
</div>
<div className={cs.editorText}>
<Editor
height="100%"
width="100%"
theme="vs-dark"
value={editorValueSource === "result" ? result : log.join("\n")}
language="shell"
options={{wordWrap: "on", lineNumbers: "off", readOnly: true, minimap: { enabled: false }, overviewRulerBorder: false, renderLineHighlight: "none" }}
/>
</div>
</div>
</div>
);
Expand Down
162 changes: 162 additions & 0 deletions src/components/App/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
.container {
display: grid;
grid-template-rows: 56px 1fr;
grid-template-columns: 0.75fr 1fr 1fr 1.5fr;
grid-template-areas:
"header header header header"
"menu editor editor output";
background-color: #1a1a1a;
height: 100vh;
width: 100%;
}

.header {
grid-area: header;
max-height: 60px;
}

.title {
font-size: 16px;
font-weight: bold;
color: #f1f1f1;
padding: 8px 16px;
}

.editorFooter {
padding: 16px 16px 0;
margin-top: 8px;
text-align: right;
border-top: 0.5px #ffffff14 solid;
}

.editorLoading {
padding: 0 16px;
display: inline-block;
}

.menu {
grid-area: menu;
padding: 16px 8px;
}

.menuLabel {
font-size: 14px;
font-weight: bold;
color: #f1f1f1;
padding: 8px 8px 16px;
display: block;
}

.menuInputButton {
white-space: nowrap;
}

.menuInput {
background-color: transparent;
color: #f1f1f1;
padding: 8px 50px 8px 16px;
text-align: left;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin-bottom: 8px;
border: 1px solid #ffffff14;
border-radius: 8px;
}

.menuInstallButton {
transform: translateX(-100%);
background-color: #388E3C;
border: none;
color: #f1f1f1;
font-weight: bold;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
margin-top: 8px;
}

.menuDependencies {
padding-left: 16px;
}

.menuDependency {
padding-bottom: 4px;
}

.editor {
grid-area: editor;
display: flex;
flex-direction: column;
border-radius: 16px;
background-color: #1e1e1e;
padding: 16px 0px;
margin: 0 4px;
}

.editorText {
padding: 0 8px;
flex: 1;
}

.output {
grid-area: output;
background-color: #1e1e1e;
border-radius: 16px;
padding: 16px 8px;
margin: 0 4px;
display: flex;
flex-direction: column;
}

.switchButtons {
display: flex;
flex-direction: row;
gap: 8px;
padding: 0 16px 8px;
}

.switchButton {
background-color: #1e1e1e;
color: #f1f1f1;
font-weight: bold;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
border: none;
border-radius: 8px;
}

.switchButton:hover {
background-color: #424242;
}

.switchButtonActive {
background-color: #424242;
}

.runButton {
background-color: #388E3C;
border: none;
color: #f1f1f1;
font-weight: bold;
padding: 8px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
cursor: pointer;
border-radius: 8px;
}

.runButton:hover {
background-color: #2E7D32;
}
2 changes: 2 additions & 0 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #1e1e1e;
color: #d4d4d4;
}

code {
Expand Down

0 comments on commit 571d8dc

Please sign in to comment.