First iteration of a file manager

package.json

@@ -6,6 +6,8 @@
         "@fortawesome/react-fontawesome": "^0.1.4",
         "@hot-loader/react-dom": "^16.8.6",
         "axios": "^0.18.0",
+        "ayu-ace": "^2.0.4",
+        "brace": "^0.11.1",
         "chart.js": "^2.8.0",
         "classnames": "^2.2.6",
         "date-fns": "^1.29.0",
@@ -70,6 +72,7 @@
         "eslint-plugin-import": "^2.17.3",
         "eslint-plugin-node": "^9.1.0",
         "eslint-plugin-promise": "^4.1.1",
+        "eslint-plugin-react-hooks": "^2.1.2",
         "eslint-plugin-standard": "^4.0.0",
         "fork-ts-checker-webpack-plugin": "^1.5.0",
         "glob-all": "^3.1.0",

resources/scripts/.eslintrc.yml

@@ -8,6 +8,7 @@ env:
   es6: true
 plugins:
   - "@typescript-eslint"
+  - "react-hooks"
 extends:
   - "standard"
   - "plugin:@typescript-eslint/recommended"
@@ -20,6 +21,10 @@ rules:
   comma-dangle:
     - error
     - always-multiline
+  "react-hooks/rules-of-hooks":
+    - error
+  "react-hooks/exhaustive-deps":
+    - warn
   "@typescript-eslint/explicit-function-return-type": 0
   "@typescript-eslint/explicit-member-accessibility": 0
   "@typescript-eslint/no-unused-vars": 0

resources/scripts/components/dashboard/DesignElementsContainer.tsx

@@ -36,6 +36,13 @@ export default class DesignElementsContainer extends React.PureComponent {
                                 <label className={'uppercase text-neutral-200'}>Disabled Field</label>
                                 <input type={'text'} className={'input-dark'} disabled={true}/>
                                 <div className={'mt-6'}/>
+                                <label className={'uppercase text-neutral-200'}>Select</label>
+                                <select className={'input-dark'}>
+                                    <option>Option 1</option>
+                                    <option>Option 2</option>
+                                    <option>Option 3</option>
+                                </select>
+                                <div className={'mt-6'}/>
                                 <label className={'uppercase text-neutral-200'}>Textarea</label>
                                 <textarea className={'input-dark h-32'}></textarea>
                                 <div className={'mt-6'}/>

resources/scripts/components/server/ServerConsole.tsx

@@ -12,8 +12,8 @@ import TitledGreyBox from '@/components/elements/TitledGreyBox';
 
 type PowerAction = 'start' | 'stop' | 'restart' | 'kill';
 
-const ChunkedConsole = lazy(() => import('@/components/server/Console'));
+const ChunkedConsole = lazy(() => import(/* webpackChunkName: "console" */'@/components/server/Console'));
-const ChunkedStatGraphs = lazy(() => import('@/components/server/StatGraphs'));
+const ChunkedStatGraphs = lazy(() => import(/* webpackChunkName: "graphs" */'@/components/server/StatGraphs'));
 
 const StopOrKillButton = ({ onPress }: { onPress: (action: PowerAction) => void }) => {
     const [ clicked, setClicked ] = useState(false);

resources/scripts/components/server/files/FileEditContainer.tsx

@@ -1,25 +1,115 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import useRouter from 'use-react-router';
 import { ServerContext } from '@/state/server';
 import getFileContents from '@/api/server/files/getFileContents';
+import ace, { Editor } from 'brace';
+import styled from 'styled-components';
+
+const EditorContainer = styled.div`
+    height: calc(100vh - 16rem);
+    ${tw`relative`};
+    
+    #editor {
+        ${tw`rounded h-full`};
+    }
+`;
+
+const modes: { [k: string]: string } = {
+    // eslint-disable-next-line @typescript-eslint/camelcase
+    assembly_x86: 'Assembly (x86)',
+    // eslint-disable-next-line @typescript-eslint/camelcase
+    c_cpp: 'C++',
+    coffee: 'Coffeescript',
+    css: 'CSS',
+    dockerfile: 'Dockerfile',
+    golang: 'Go',
+    html: 'HTML',
+    ini: 'Ini',
+    java: 'Java',
+    javascript: 'Javascript',
+    json: 'JSON',
+    kotlin: 'Kotlin',
+    lua: 'Luascript',
+    perl: 'Perl',
+    php: 'PHP',
+    properties: 'Properties',
+    python: 'Python',
+    ruby: 'Ruby',
+    text: 'Plaintext',
+    toml: 'TOML',
+    typescript: 'Typescript',
+    xml: 'XML',
+    yaml: 'YAML',
+};
 
 export default () => {
     const { location: { hash } } = useRouter();
     const [ content, setContent ] = useState('');
     const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
 
+    const [ editor, setEditor ] = useState<Editor>();
+    const ref = useCallback(node => {
+        if (node) {
+            setEditor(ace.edit('editor'));
+        }
+    }, []);
+
+    useEffect(() => {
+        Object.keys(modes).forEach(mode => {
+            import(/* webpackMode: "lazy-once", webpackChunkName: "ace_mode" */`brace/mode/${mode}`);
+        });
+    }, []);
+
     useEffect(() => {
         getFileContents(uuid, hash.replace(/^#/, ''))
             .then(setContent)
             .catch(error => console.error(error));
-    }, []);
+    }, [ uuid, hash ]);
+
+    useEffect(() => {
+        editor && editor.session.setValue(content);
+    }, [ editor, content ]);
+
+    useEffect(() => {
+        if (!editor) {
+            return;
+        }
+
+        require('ayu-ace/mirage');
+        editor.setTheme('ace/theme/ayu-mirage');
+
+        editor.$blockScrolling = Infinity;
+        editor.container.style.lineHeight = '1.375rem';
+        editor.container.style.fontWeight = '500';
+        editor.renderer.updateFontSize();
+        editor.renderer.setShowPrintMargin(false);
+        editor.session.setTabSize(4);
+        editor.session.setUseSoftTabs(true);
+    }, [ editor ]);
 
     return (
         <div className={'my-10'}>
-            <textarea
+            <EditorContainer>
-                value={content}
+                <div id={'editor'} ref={ref}/>
-                className={'rounded bg-black h-32 w-full text-neutral-100 text-sm font-mono'}
+                <div className={'absolute pin-r pin-t z-50'}>
-            />
+                    <div className={'m-3 rounded bg-neutral-900 border border-black'}>
+                        <select
+                            className={'input-dark'}
+                            onChange={e => {
+                                if (editor) {
+                                    editor.session.setMode(`ace/mode/${e.currentTarget.value}`);
+                                }
+                            }}
+                        >
+                            {
+                                Object.keys(modes).map(key => (
+                                    <option key={key} value={key}>{modes[key]}</option>
+                                ))
+                            }
+                        </select>
+                    </div>
+                </div>
+            </EditorContainer>
         </div>
     );
 };

resources/scripts/routers/ServerRouter.tsx

@@ -13,7 +13,7 @@ import { CSSTransition } from 'react-transition-group';
 import SuspenseSpinner from '@/components/elements/SuspenseSpinner';
 
 const LazyFileEditContainer = lazy<React.ComponentType<RouteComponentProps<any>>>(
-    () => import('@/components/server/files/FileEditContainer')
+    () => import(/* webpackChunkName: "editor" */'@/components/server/files/FileEditContainer')
 );
 
 const ServerRouter = ({ match, location }: RouteComponentProps<{ id: string }>) => {

resources/styles/components/forms.css

@@ -15,7 +15,7 @@ input[type=number] {
 /**
  * Styling for other forms throughout the Panel.
  */
-.input, .input-dark {
+.input:not(select), .input-dark:not(select) {
     @apply .appearance-none .w-full;
     min-width: 0;
 
@@ -24,7 +24,7 @@ input[type=number] {
     }
 }
 
-.input {
+.input:not(select) {
     @apply .p-3 .rounded .border .border-neutral-200 .text-neutral-800;
     transition: border 150ms linear;
 
@@ -35,21 +35,21 @@ input[type=number] {
     &.error {
         @apply .text-red-600 .border-red-500;
     }
-}
 
-.input:disabled {
+    &:disabled {
         @apply .bg-neutral-100 .border-neutral-200;
     }
 
-.input + .input-help {
+    & + .input-help {
         @apply .text-xs .text-neutral-400 .pt-2;
 
         &.error {
             @apply .text-red-600;
         }
     }
+}
 
-.input-dark {
+.input-dark:not(select) {
     @apply .p-3 .bg-neutral-600 .border .border-neutral-500 .text-sm .rounded .text-neutral-200 .shadow-none;
     transition: border 150ms linear, box-shaodw 150ms ease-in;
 
@@ -83,23 +83,47 @@ label {
 }
 
 select:not(.appearance-none) {
-    @apply .outline-none .appearance-none .block .bg-white .border .border-neutral-200 .text-neutral-400 .p-3 .pr-8 rounded;
+    @apply .shadow-none .block .p-3 .pr-8 .rounded .border .w-full .text-sm;
-    transition: border-color 150ms linear, color 150ms linear;
+    transition: border-color 150ms linear;
 
-    &:hover:not(:disabled), &:focus {
+    &, &:hover:not(:disabled), &:focus {
-        @apply .outline-none .border-primary-500 .text-neutral-700;
+        @apply .outline-none;
     }
 
     -webkit-appearance: none;
     -moz-appearance: none;
+    background-size: 1rem;
+    background-repeat: no-repeat;
+    background-position-x: calc(100% - 0.75rem);
+    background-position-y: center;
 
     &::-ms-expand {
         display: none;
     }
+}
 
-    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ") no-repeat center center;
+select.input:not(.appearance-none) {
-    background-size: 1rem;
+    @apply .bg-white .border-neutral-200 .text-neutral-400;
-    background-position-x: calc(100% - 0.75rem);
+    transition: color 150ms linear;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
+
+    &:hover:not(:disabled), &:focus {
+        @apply .border-primary-500 .text-neutral-700;
+    }
+}
+
+select.input-dark:not(.appearance-none) {
+    @apply .bg-neutral-600 .border-neutral-500 .text-neutral-200;
+    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
+
+    &:hover:not(:disabled), &:focus {
+        @apply .border-neutral-400;
+    }
+
+    /* fix for Firefox trying to be cool with dark colors */
+    &:focus {
+        @apply .bg-white .text-neutral-800;
+    }
 }
 
 .input-dark-label {

yarn.lock

@@ -1662,6 +1662,10 @@ axios@^0.18.0:
     follow-redirects "^1.3.0"
     is-buffer "^1.1.5"
 
+ayu-ace@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/ayu-ace/-/ayu-ace-2.0.4.tgz#3877d4cbf8668e639de6f67e34c2a88c1589b082"
+
 babel-code-frame@^6.22.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
@@ -1850,6 +1854,10 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace@^0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
+
 braces@^2.3.0, braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-2.3.2.tgz#5979fd3f14cd531565e5fa2df1abfff1dfaee729"
@@ -3283,6 +3291,10 @@ eslint-plugin-promise@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-4.1.1.tgz#1e08cb68b5b2cd8839f8d5864c796f56d82746db"
 
+eslint-plugin-react-hooks@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.1.2.tgz#1358d2acb2c5e02b7e90c37e611ac258a488e3a7"
+
 eslint-plugin-standard@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-4.0.0.tgz#f845b45109c99cd90e77796940a344546c8f6b5c"