starting impleemntation with the commands and such

2022-02-13 20:32:42 -08:00
parent d2a807248d
commit 61ae7b2b4b
5 changed files with 65 additions and 3 deletions
@@ -0,0 +1,13 @@
+import Command, { CommandType } from "../models/command";
+
+export function getCommand(commandType: CommandType) {}
+
+export function parser(command: string) {
+  // if it's just a command, then don't do anything
+  // return command object based on currently entered string
+  // then can use that command object to see if it's complete or not
+  // build some sort of tree for finding out the options for a user while they are typing
+  // go through each token,
+  // check if the currToken is a command
+  // if not, then mark it as an argument or option depending on if it has "--" flag or not
+}
@@ -0,0 +1,7 @@
+export default class Arg {
+  name?: string;
+  description?: string;
+
+  isOptional?: boolean;
+  isVariadic?: boolean;
+}
@@ -0,0 +1,17 @@
+import Arg from "./arg";
+import Option from "./option";
+
+export enum CommandType {
+  git = "git",
+  npm = "npm",
+  commit = "git commit",
+}
+
+export default class Command {
+  constructor(
+    type: CommandType,
+    subcommands?: Command[],
+    args?: Arg | Arg[],
+    options?: Option[]
+  ) {}
+}
@@ -0,0 +1,13 @@
+import Arg from "./arg";
+
+export default class Option {
+  name: string | string[];
+  description?: string;
+  args: Arg | Arg[];
+
+  constructor(_name: string | string[], _desc: string, _args: Arg | Arg[]) {
+    this.args = _args;
+    this.name = _name;
+    this.description = _desc;
+  }
+}
@@ -1,15 +1,25 @@
 import Head from "next/head";
-import { useEffect, useRef } from "react";
+import { SyntheticEvent, useEffect, useRef, useState } from "react";

 import { FaTh } from "react-icons/fa";

 export default function Fig() {
  const inputRef = useRef<HTMLInputElement>();
+  const [inputVal, setInputVal] = useState<string>("");

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

+  const onChangeInput = (e: SyntheticEvent) => {
+    const target = e.target as HTMLInputElement;
+    setInputVal(target.value);
+
+    // logic for parsing and changing autocomplete options
+
+    // logic for showing correct command icon
+  };
+
  return (
    <>
      <Head>
@@ -42,7 +52,7 @@ export default function Fig() {

      <main className="container mx-auto flex flex-col justify-center h-screen">
        <div
-          className="flex flex-row my-auto mx-auto w-[25rem] 
+          className="flex flex-row my-auto mx-auto w-[50rem] 
        items-center justify-start space-x-5 border bg-slate-50 p-3 px-5 rounded-full"
        >
          <img
@@ -51,10 +61,12 @@ export default function Fig() {
            height={30}
            width={30}
            src="https://api.statvoo.com/favicon/?url=https://fig.io/"
+            onChange={onChangeInput}
          />

          <input
-            className="placeholder:text-slate-300 text-slate-600 text-md font-bold outline-none  bg-slate-50"
+            autoFocus
+            className="flex-1 placeholder:text-slate-300 text-slate-600 text-md font-bold outline-none  bg-slate-50"
            placeholder="power to do"
          />
        </div>