Merge pull request #1 from TaylorS15/taylor-working

taylor-working

frontend/.eslintrc.cjs

@@ -34,4 +34,10 @@ module.exports = {
       },
     },
   },
+  'prettier/prettier': [
+    'error',
+    {
+      endOfLine: 'auto',
+    },
+  ],
 }

frontend/package.json

@@ -20,7 +20,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",
@@ -41,6 +42,7 @@
     "lint-staged": "^13.1.1",
     "postcss": "^8.4.21",
     "prettier": "^2.8.4",
+    "prettier-plugin-tailwindcss": "^0.2.2",
     "tailwindcss": "^3.2.4",
     "typescript": "^4.9.5",
     "vite": "^4.1.0"

frontend/prettier.config.cjs

@@ -1,7 +1,7 @@
 module.exports = {
   trailingComma: 'all',
   tabWidth: 2,
-  semi: false,
+  semi: true,
   singleQuote: true,
   printWidth: 80,
 }

frontend/src/App.tsx

@@ -1,11 +1,55 @@
-import './App.css'
+import { useEffect, useState } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import Navigation from './components/Navigation/Navigation';
+import DocsGPT from './components/DocsGPT';
+import APIKeyModal from './components/APIKeyModal';
+import './App.css';
+
+export default function App() {
+  //Currently using primitive state management. Will most likely be replaced with Redux.
+  const [isMobile, setIsMobile] = useState(true);
+  const [isMenuOpen, setIsMenuOpen] = useState(true);
+  const [isApiModalOpen, setIsApiModalOpen] = useState(true);
+  const [apiKey, setApiKey] = useState('');
+
+  const handleResize = () => {
+    if (window.innerWidth > 768 && isMobile) {
+      setIsMobile(false);
+    } else {
+      setIsMobile(true);
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
 
-function App() {
   return (
-    <div className="flex justify-center h-screen items-center">
-      <p className="text-6xl">DocsGPT 🦖</p>
+    <div
+      className={`${
+        isMobile ? 'flex-col' : 'flex-row'
+      } relative flex transition-all`}
+    >
+      <APIKeyModal
+        apiKey={apiKey}
+        setApiKey={setApiKey}
+        isApiModalOpen={isApiModalOpen}
+        setIsApiModalOpen={setIsApiModalOpen}
+      />
+      <Navigation
+        isMobile={isMobile}
+        isMenuOpen={isMenuOpen}
+        setIsMenuOpen={setIsMenuOpen}
+        setIsApiModalOpen={setIsApiModalOpen}
+      />
+      <Routes>
+        <Route path="/" element={<DocsGPT isMenuOpen={isMenuOpen} />} />
+      </Routes>
     </div>
-  )
+  );
 }
-
-export default App

frontend/src/components/APIKeyModal.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+
+export default function APIKeyModal({
+  isApiModalOpen,
+  setIsApiModalOpen,
+  apiKey,
+  setApiKey,
+}: {
+  isApiModalOpen: boolean;
+  setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  apiKey: string;
+  setApiKey: React.Dispatch<React.SetStateAction<string>>;
+}) {
+  const [formError, setFormError] = useState(false);
+
+  const handleResetKey = () => {
+    if (!apiKey) {
+      setFormError(true);
+    } else {
+      setFormError(false);
+      setIsApiModalOpen(false);
+    }
+  };
+
+  return (
+    <div
+      className={`${
+        isApiModalOpen ? 'visible' : 'hidden'
+      } absolute z-30  h-screen w-screen  bg-gray-alpha`}
+    >
+      <div className="mx-auto mt-24 flex w-128 flex-col gap-4 rounded-lg bg-white p-6 shadow-lg">
+        <p className="text-xl text-jet">OpenAI API Key</p>
+        <p className="text-lg leading-5 text-gray-500">
+          Before you can start using DocsGPT we need you to provide an API key
+          for llm. Currently, we support only OpenAI but soon many more. You can
+          find it here.
+        </p>
+        <input
+          type="text"
+          className="h-10 w-full border-b-2 border-jet focus:outline-none"
+          value={apiKey}
+          maxLength={100}
+          placeholder="API Key"
+          onChange={(e) => setApiKey(e.target.value)}
+        />
+        <div className="flex justify-between">
+          {formError && (
+            <p className="text-sm text-red-500">Please enter a valid API key</p>
+          )}
+          <button
+            onClick={handleResetKey}
+            className="ml-auto h-10 w-20 rounded-lg bg-violet-800 text-white transition-all hover:bg-violet-700"
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/DocsGPT.tsx

@@ -0,0 +1,7 @@
+export default function DocsGPT({ isMenuOpen }: { isMenuOpen: boolean }) {
+  return (
+    <div className={`${isMenuOpen ? 'md:ml-72 lg:ml-96' : 'ml-16'}`}>
+      Docs GPT Chat Placeholder
+    </div>
+  );
+}

frontend/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import Arrow1 from './imgs/arrow.svg';
+import Key from './imgs/key.svg';
+import Info from './imgs/info.svg';
+import Link from './imgs/link.svg';
+
+function MobileNavigation() {
+  return <div>Mobile Navigation</div>;
+}
+
+function DesktopNavigation({
+  isMenuOpen,
+  setIsMenuOpen,
+  setIsApiModalOpen,
+}: {
+  isMenuOpen: boolean;
+  setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  return (
+    <div
+      className={`${
+        isMenuOpen ? 'w-72 lg:w-96' : 'w-16'
+      } fixed flex h-screen flex-col border-r-2 border-gray-100 bg-gray-50 transition-all`}
+    >
+      <div
+        className={`${
+          isMenuOpen ? 'w-full' : 'w-16'
+        } ml-auto h-16 border-b-2 border-gray-100`}
+      >
+        <button
+          className="float-right mr-5 mt-5 h-5 w-5"
+          onClick={() => setIsMenuOpen(!isMenuOpen)}
+        >
+          <img
+            src={Arrow1}
+            alt="menu toggle"
+            className={`${
+              isMenuOpen ? 'rotate-0' : 'rotate-180'
+            } m-auto w-3 transition-all`}
+          />
+        </button>
+      </div>
+
+      {isMenuOpen && (
+        <>
+          <div className="flex-grow border-b-2 border-gray-100"></div>
+
+          <div className="flex h-16 flex-col border-b-2 border-gray-100">
+            <div
+              className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100"
+              onClick={() => setIsApiModalOpen(true)}
+            >
+              <img src={Key} alt="key" className="ml-2 w-6" />
+              <p className="my-auto text-eerie-black">Reset Key</p>
+            </div>
+          </div>
+
+          <div className="flex h-48 flex-col border-b-2 border-gray-100">
+            <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
+              <img src={Info} alt="info" className="ml-2 w-5" />
+              <p className="my-auto text-eerie-black">About</p>
+            </div>
+
+            <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
+              <img src={Link} alt="link" className="ml-2 w-5" />
+              <p className="my-auto text-eerie-black">Discord</p>
+            </div>
+
+            <div className="my-auto mx-4 flex h-12 cursor-pointer gap-4 rounded-md hover:bg-gray-100">
+              <img src={Link} alt="link" className="ml-2 w-5" />
+              <p className="my-auto text-eerie-black">Github</p>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+export default function Navigation({
+  isMobile,
+  isMenuOpen,
+  setIsMenuOpen,
+  setIsApiModalOpen,
+}: {
+  isMobile: boolean;
+  isMenuOpen: boolean;
+  setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsApiModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}) {
+  if (isMobile) {
+    return <MobileNavigation />;
+  } else {
+    return (
+      <DesktopNavigation
+        isMenuOpen={isMenuOpen}
+        setIsMenuOpen={setIsMenuOpen}
+        setIsApiModalOpen={setIsApiModalOpen}
+      />
+    );
+  }
+}

frontend/src/components/Navigation/PastChat.tsx

@@ -0,0 +1 @@
+export default function PastChat() {}

frontend/src/components/Navigation/imgs/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.41 10.59L2.83 6L7.41 1.41L6 0L0 6L6 12L7.41 10.59Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/src/components/Navigation/imgs/info.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM11 15H9V9H11V15ZM11 7H9V5H11V7Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/src/components/Navigation/imgs/key.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="12" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.65 4C10.83 1.67 8.61 0 6 0C2.69 0 0 2.69 0 6C0 9.31 2.69 12 6 12C8.61 12 10.83 10.33 11.65 8H16V12H20V8H22V4H11.65ZM6 8C4.9 8 4 7.1 4 6C4 4.9 4.9 4 6 4C7.1 4 8 4.9 8 6C8 7.1 7.1 8 6 8Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/src/components/Navigation/imgs/link.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 16H2V2H9V0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H16C17.1 18 18 17.1 18 16V9H16V16ZM11 0V2H14.59L4.76 11.83L6.17 13.24L16 3.41V7H18V0H11Z" fill="black" fill-opacity="0.54"/>
+</svg>

frontend/src/main.tsx

@@ -1,10 +1,13 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { BrowserRouter } from 'react-router-dom';
+import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>,
-)
+);

frontend/tailwind.config.cjs

@@ -1,11 +1,18 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
-    extend: {},
+    extend: {
+      spacing: {
+        112: '28rem',
+        128: '32rem',
+      },
+      colors: {
+        'eerie-black': '#212121',
+        jet: '#343541',
+        'gray-alpha': 'rgba(0,0,0, .1)',
+      },
+    },
   },
   plugins: [],
-}
+};