vzcode 0.1.1 → 0.2.1

package/src/main.jsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

package/src/ot.js

@@ -0,0 +1,5 @@
+// This file is the central point where the OT types are imported.
+// Localized to one file so it's easy to change it in future.
+import OTJSON1Presence from 'sharedb-client-browser/dist/ot-json1-presence-umd.cjs';
+const { json1Presence, textUnicode } = OTJSON1Presence;
+export { json1Presence, textUnicode };

package/src/randomId.js

@@ -0,0 +1,2 @@
+// Generate a random ID string consisting of digits.
+export const randomId = () => Math.floor(Math.random() * 10000000000) + '';

package/src/settings.jsx

@@ -0,0 +1,107 @@
+import { useState, useCallback } from 'react';
+import Modal from 'react-bootstrap/Modal';
+import Form from 'react-bootstrap/Form';
+import Button from 'react-bootstrap/Button';
+import Select from 'react-select';
+
+// TODO document where this list came from
+// TODO research which themes are available for CodeMirror 6
+const themes = [
+  { value: 'default', label: 'default' },
+  { value: '3024-day', label: '3024-day' },
+  { value: '3024-night', label: '3024-night' },
+  { value: 'abbott', label: 'abbott' },
+  { value: 'abcdef', label: 'abcdef' },
+  { value: 'ambiance', label: 'ambiance' },
+  { value: 'ayu-dark', label: 'ayu-dark' },
+  { value: 'ayu-mirage', label: 'ayu-mirage' },
+  { value: 'base16-dark', label: 'base16-dark' },
+  { value: 'base16-light', label: 'base16-light' },
+  { value: 'bespin', label: 'bespin' },
+  { value: 'blackboard', label: 'blackboard' },
+  { value: 'cobalt', label: 'cobalt' },
+  { value: 'colorforth', label: 'colorforth' },
+  { value: 'darcula', label: 'darcula' },
+  { value: 'duotone-dark', label: 'duotone-dark' },
+  { value: 'duotone-light', label: 'duotone-light' },
+  { value: 'eclipse', label: 'eclipse' },
+  { value: 'elegant', label: 'elegant' },
+  { value: 'erlang-dark', label: 'erlang-dark' },
+  { value: 'gruvbox-dark', label: 'gruvbox-dark' },
+  { value: 'hopscotch', label: 'hopscotch' },
+  { value: 'icecoder', label: 'icecoder' },
+  { value: 'idea', label: 'idea' },
+  { value: 'isotope', label: 'isotope' },
+  { value: 'juejin', label: 'juejin' },
+  { value: 'lesser-dark', label: 'lesser-dark' },
+  { value: 'liquibyte', label: 'liquibyte' },
+  { value: 'lucario', label: 'lucario' },
+  { value: 'material', label: 'material' },
+  { value: 'material-darker', label: 'material-darker' },
+  { value: 'material-palenight', label: 'material-palenight' },
+  { value: 'material-ocean', label: 'material-ocean' },
+  { value: 'mbo', label: 'mbo' },
+  { value: 'mdn-like', label: 'mdn-like' },
+  { value: 'midnight', label: 'midnight' },
+  { value: 'monokai', label: 'monokai' },
+  { value: 'moxer', label: 'moxer' },
+  { value: 'neat', label: 'neat' },
+  { value: 'neo', label: 'neo' },
+  { value: 'night', label: 'night' },
+  { value: 'nord', label: 'nord' },
+  { value: 'oceanic-next', label: 'oceanic-next' },
+  { value: 'OneDark', label: 'One Dark' },
+  { value: 'panda-syntax', label: 'panda-syntax' },
+  { value: 'paraiso-dark', label: 'paraiso-dark' },
+  { value: 'paraiso-light', label: 'paraiso-light' },
+  { value: 'pastel-on-dark', label: 'pastel-on-dark' },
+  { value: 'railscasts', label: 'railscasts' },
+  { value: 'rubyblue', label: 'rubyblue' },
+  { value: 'seti', label: 'seti' },
+  { value: 'shadowfox', label: 'shadowfox' },
+  { value: 'solarized', label: 'solarized' },
+  { value: 'ssms', label: 'ssms' },
+  { value: 'the-matrix', label: 'the-matrix' },
+  { value: 'tomorrow-night-bright', label: 'tomorrow-night-bright' },
+  { value: 'tomorrow-night-eighties', label: 'tomorrow-night-eighties' },
+  { value: 'ttcn', label: 'ttcn' },
+  { value: 'twilight', label: 'twilight' },
+  { value: 'vibrant-ink', label: 'vibrant-ink' },
+  { value: 'xq-dark', label: 'xq-dark' },
+  { value: 'xq-light', label: 'xq-light' },
+  { value: 'yeti', label: 'yeti' },
+  { value: 'yonce', label: 'yonce' },
+  { value: 'zenburn', label: 'zenburn' },
+];
+
+export const Settings = ({ show, onClose, setTheme }) => {
+  const handleChange = useCallback((selectedOption) => {
+    setTheme(selectedOption.value);
+  }, []);
+
+  return show ? (
+    <Modal show={show} onHide={onClose} animation={false}>
+      <Modal.Header closeButton>
+        <Modal.Title>Settings</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Form.Group className="mb-3" controlId="formFork">
+          <Form.Label>Theme</Form.Label>
+          <Select
+            classvalue="themes"
+            options={themes}
+            onChange={handleChange}
+          />
+          <Form.Text className="text-muted">
+            Select a color theme for the editor
+          </Form.Text>
+        </Form.Group>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="primary" onClick={onClose}>
+          Done
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  ) : null;
+};

package/src/style.css

@@ -0,0 +1,178 @@
+/* Inspired by: https://www.codinglabweb.com/2021/06/dropdown-sidebar-menu-html-css.html */
+/* Google Fonts Import Link */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+@import url('https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css');
+@import url('https://unpkg.com/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --main-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
+    Liberation Mono, monospace;
+}
+
+body {
+  background: rgb(41, 44, 52);
+  font-family: 'Poppins', sans-serif;
+}
+
+.tab {
+  width: max-content;
+  height: 30px;
+  background: rgb(45, 45, 45);
+  text-align: center;
+  color: #fff;
+  font-family: var(--main-font-family);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  padding-left: 10px;
+  padding-right: 10px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  margin-top: 5px;
+  margin-left: 2px;
+  margin-right: 2px;
+  cursor: pointer;
+}
+
+.tab.active {
+  background-color: rgb(41, 44, 52);
+}
+
+.tab-close {
+  display: flex;
+  cursor: pointer;
+  margin-left: 5px;
+  justify-content: center;
+  align-items: center;
+}
+
+.tab-close:hover {
+  border-radius: 30%;
+  background-color: rgb(37, 37, 38);
+}
+
+.editor {
+  position: fixed;
+  margin-left: 200px;
+  width: 100%;
+  height: 100%;
+  top: 30px;
+  bottom: 0;
+  background-color: rgb(41, 44, 52);
+  color: #fff;
+  font-family: var(--main-font-family);
+}
+
+.tab-list {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  top: 0;
+  left: 200px;
+  height: 35px;
+  width: 100%;
+  background: rgb(37, 37, 38);
+  z-index: 100;
+  transition: all 0.5s ease;
+}
+
+.bottom-bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 20px;
+  width: 100%;
+  background: rgb(45, 45, 45);
+  z-index: 100;
+  transition: all 0.5s ease;
+}
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 200px;
+  background: rgb(54, 65, 89);
+  z-index: 100;
+  transition: all 0.5s ease;
+}
+
+.link-name {
+  margin-top: 30px;
+  margin-left: 10px;
+  color: rgb(154, 160, 172);
+  font-size: 12px;
+  text-decoration: none;
+}
+
+.file {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: left;
+  width: 180px;
+  cursor: pointer;
+  margin-left: 10px;
+  color: rgb(219, 221, 225);
+  border-radius: 5px;
+}
+
+.full-Box {
+  width: inherit;
+  height: inherit;
+  padding: 7px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.utilities {
+  justify-content: right;
+  margin-right: 3px;
+}
+
+/* TODO consistent naming "no-utils" */
+.noUtils {
+  display: none;
+}
+
+.settings {
+  position: absolute;
+  bottom: 0;
+  height: 30px;
+  /* TODO overhaul CSS to use Flexbox for entire sidebar */
+  width: 180px;
+  z-index: 100;
+  color: rgb(219, 221, 225);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 14px 0;
+  margin: 10px;
+  border-radius: 5px;
+}
+
+.file:hover,
+.settings:hover {
+  background-color: rgb(74, 84, 105);
+}
+
+/* TODO consistent naming new-btn */
+.newBTN {
+  justify-content: right;
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+.themes {
+  color: rgb(37, 37, 38);
+}