talksik/fig
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

starting impleemntation with the commands and such

Browse Source
This commit is contained in:
Arjun Patel
2022-02-13 20:32:42 -08:00
parent d2a807248d
commit 61ae7b2b4b
5 changed files with 65 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
helpers/parseHelper.ts
+13
View File
@@ -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
}
models/arg.ts
+7
View File
@@ -0,0 +1,7 @@
export default class Arg {
name?: string;
description?: string;
isOptional?: boolean;
isVariadic?: boolean;
}
models/command.ts
+17
View File
@@ -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[]
) {}
}
models/option.ts
+13
View File
@@ -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;
}
}
pages/index.tsx
+15 -3
View File
@@ -1,15 +1,25 @@
import Head from "next/head"; import Head from "next/head";
import { useEffect, useRef } from "react"; import { SyntheticEvent, useEffect, useRef, useState } from "react";
import { FaTh } from "react-icons/fa"; import { FaTh } from "react-icons/fa";
export default function Fig() { export default function Fig() {
const inputRef = useRef<HTMLInputElement>(); const inputRef = useRef<HTMLInputElement>();
const [inputVal, setInputVal] = useState<string>("");
useEffect(() => { useEffect(() => {
inputRef.current?.focus(); 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 ( return (
<> <>
<Head> <Head>
@@ -42,7 +52,7 @@ export default function Fig() {
<main className="container mx-auto flex flex-col justify-center h-screen"> <main className="container mx-auto flex flex-col justify-center h-screen">
<div <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" items-center justify-start space-x-5 border bg-slate-50 p-3 px-5 rounded-full"
> >
<img <img
@@ -51,10 +61,12 @@ export default function Fig() {
height={30} height={30}
width={30} width={30}
src="https://api.statvoo.com/favicon/?url=https://fig.io/" src="https://api.statvoo.com/favicon/?url=https://fig.io/"
onChange={onChangeInput}
/> />
<input <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" placeholder="power to do"
/> />
</div> </div>