update

.gitignore

@@ -14,3 +14,4 @@ eslint-config*
 .nyc_output
 .parcel-cache
 coverage
+test-project-dirs

.prettierrc.js

@@ -0,0 +1,6 @@
+var sharedPrettierConfig = require("eslint-config-turbocharge/prettier");
+
+module.exports = {
+  ...sharedPrettierConfig,
+  plugins: ["prettier-plugin-gherkin"],
+};

.vscode/extensions.json

@@ -3,6 +3,7 @@
     "dbaeumer.vscode-eslint",
     "orta.vscode-jest",
     "esbenp.prettier-vscode",
-    "styled-components.vscode-styled-components"
+    "styled-components.vscode-styled-components",
+    "alexkrechik.cucumberautocomplete"
   ]
 }

.vscode/settings.json

@@ -5,5 +5,9 @@
   "editor.codeActionsOnSave": {
     "source.fixAll": true
   },
-  "jest.autoRun": { "watch": false, "onSave": "test-file" }
+  "jest.autoRun": { "watch": false, "onSave": "test-file" },
+  "cucumberautocomplete.steps": ["./feature/**/*.steps.ts"],
+  "cucumberautocomplete.strictGherkinCompletion": true,
+  "cucumberautocomplete.smartSnippets": true,
+  "prettier.documentSelectors": ["*.{feature,features}"]
 }

client/app/ContextStore.tsx

@@ -21,7 +21,7 @@ export const ContextStore = createContext<Context>({
   dispatch() {},
 });
 
-export const ContextStoreProvider: FC<{ children: ReactNode }> = ({
+export const ContextStoreProvider: FC<{ readonly children: ReactNode }> = ({
   children,
 }) => {
   const [state, dispatch] = useReducer(storeReducer, {
@@ -64,7 +64,6 @@ export const useProjectStore = (projectPath: string) => {
 
 let id = 0;
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
 export const useProjectsJobs = (projectPath: string) => {
   const { dispatch } = useProjectStore(projectPath);
 

client/app/store.reducer.ts

@@ -256,7 +256,8 @@ export const storeReducer: Reducer<State, Action> = (state, action): State => {
       };
     }
 
-    default:
+    default: {
       return state;
+    }
   }
 };

client/base.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 16px;
@@ -54,10 +58,10 @@ th:last-child {
   border-right: 0;
 }
 
-.npm-gui {
+/* .npm-gui {
   display: flex;
   flex-direction: column;
   max-height: 100vh;
   min-height: 100vh;
   overflow: hidden;
-}
+} */

client/components/App.tsx

@@ -1,12 +1,12 @@
-import type { VFC } from 'react';
+import type { FC } from 'react';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 
 import { ContextStoreProvider } from '../app/ContextStore';
 import { Header } from './Header/Header';
 import { Info } from './Info';
 import { Project } from './Project/Project';
 
-export const App: VFC = () => {
+export const App: FC = () => {
   return (
     <ContextStoreProvider>
       <Router>

client/components/Header/Header.tsx

@@ -1,6 +1,5 @@
-import type { VFC } from 'react';
+import type { FC } from 'react';
 import React from 'react';
-import styled from 'styled-components';
 
 import { Button } from '../../ui/Button/Button';
 import { Explorer } from './components/Explorer';
@@ -12,45 +11,13 @@ export interface HeaderButton {
   icon: string;
 }
 
-const Nav = styled.nav`
-  background: #3e3f3a;
-  min-height: 35px;
-  max-height: 35px;
-  padding-left: 15px;
-  padding-right: 15px;
-  display: flex;
-  justify-content: space-between;
-`;
-
-const RightSection = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const LeftSection = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-const Title = styled.h1`
-  color: #fff;
-  font-size: 1em;
-  font-weight: 400;
-  margin: 0 15px 0 0;
-`;
-
-const CloseButton = styled(Button)`
-  margin-right: 15px;
-  margin-left: -3px;
-`;
-
-export const Header: VFC = () => {
+export const Header: FC = () => {
   const { projectPathEncoded, projects, handleRemoveProject } = useHeader();
 
   return (
-    <Nav>
-      <LeftSection>
-        <Title>npm-gui</Title>
+    <nav className="flex p-2 justify-between bg-neutral-700">
+      <div className="flex gap-2">
+        <h1 className="text-base text-white font-normal">npm-gui</h1>
 
         <Button
           icon="globe"
@@ -60,9 +27,9 @@ export const Header: VFC = () => {
         >
           Global
         </Button>
-      </LeftSection>
+      </div>
 
-      <RightSection>
+      <div className="flex gap-2">
         {projects
           .filter(({ path }) => path !== 'global')
           .map(({ path }) => (
@@ -75,7 +42,7 @@ export const Header: VFC = () => {
               >
                 {window.atob(path).split('/').reverse()[0]}
               </Button>
-              <CloseButton
+              <Button
                 icon="x"
                 onClick={(): void => handleRemoveProject(path)}
                 title="Remove"
@@ -85,7 +52,7 @@ export const Header: VFC = () => {
           ))}
 
         <Explorer />
-      </RightSection>
-    </Nav>
+      </div>
+    </nav>
   );
 };

client/components/Header/components/Explorer.tsx

@@ -1,4 +1,4 @@
-import type { VFC } from 'react';
+import type { FC } from 'react';
 
 import { Button } from '../../../ui/Button/Button';
 import {
@@ -11,7 +11,7 @@ import {
 } from './ExplorerUi';
 import { useExplorer } from './use-explorer';
 
-export const Explorer: VFC = () => {
+export const Explorer: FC = () => {
   const {
     ref,
     onToggleIsOpen,
@@ -63,7 +63,7 @@ export const Explorer: VFC = () => {
           ?.filter((folderOrFile) => folderOrFile.name.includes(filter))
           .map((folderOrFile) => (
             <li key={folderOrFile.name}>
-              {folderOrFile.isDirectory && !folderOrFile.isProject && (
+              {folderOrFile.isDirectory && !folderOrFile.isProject ? (
                 <ExplorerButton
                   disabled={folderOrFile.name === 'node_modules' || isFetching}
                   isDirectory
@@ -76,9 +76,9 @@ export const Explorer: VFC = () => {
                   &nbsp;
                   {folderOrFile.name}/
                 </ExplorerButton>
-              )}
+              ) : null}
 
-              {folderOrFile.isProject && (
+              {folderOrFile.isProject ? (
                 <ExplorerButton
                   disabled={isFetching}
                   isDirectory={false}
@@ -90,7 +90,7 @@ export const Explorer: VFC = () => {
                   &nbsp;
                   {folderOrFile.name}
                 </ExplorerButton>
-              )}
+              ) : null}
 
               {!folderOrFile.isDirectory && !folderOrFile.isProject && (
                 <ExplorerFile>

client/components/Header/components/use-explorer.ts

@@ -1,13 +1,13 @@
-import { useQuery } from '@tanstack/react-query';
+// import { useQuery } from '@tanstack/react-query';
 import { useCallback, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
-import type { ExplorerResponse } from '../../../../server/types/global.types';
-import { fetchJSON } from '../../../service/utils';
+import { trpc } from '../../../trpc';
+// import type { ExplorerResponse } from '../../../../server/types/global.types';
+// import { fetchJSON } from '../../../service/utils';
 import { useClickOutsideRef } from '../../../ui/hooks/use-click-outside';
 import { useToggle } from '../../../ui/hooks/use-toggle';
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
 export const useExplorer = () => {
   const { isOpen, onToggleIsOpen, onClose } = useToggle();
   const [filter, setFilter] = useState('');
@@ -16,16 +16,17 @@ export const useExplorer = () => {
 
   const ref = useClickOutsideRef(onClose);
 
-  const { data, isFetching } = useQuery(
-    [currentPath],
-    () => fetchJSON<ExplorerResponse>(`/api/explorer/${currentPath}`),
-    {
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      retry: false,
-      keepPreviousData: true,
-    },
-  );
+  const { data, isFetching } = trpc.explorer.useQuery(currentPath);
+  // const { data, isFetching } = useQuery(
+  //   [currentPath],
+  //   () => fetchJSON<ExplorerResponse>(`/api/explorer/${currentPath}`),
+  //   {
+  //     refetchOnWindowFocus: false,
+  //     refetchOnMount: false,
+  //     retry: false,
+  //     keepPreviousData: true,
+  //   },
+  // );
 
   const onClickProject = useCallback((): void => {
     onClose();

client/components/Header/use-header.ts

@@ -3,7 +3,6 @@ import { useHistory } from 'react-router-dom';
 import { useProjectsStore } from '../../app/ContextStore';
 import { useProjectPath } from '../../hooks/use-project-path';
 
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type, @typescript-eslint/explicit-module-boundary-types
 export const useHeader = () => {
   const projectPathEncoded = useProjectPath();
 

client/components/Info.tsx

@@ -1,49 +1,44 @@
-import type { VFC } from 'react';
-import { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import type { FC } from 'react';
+import { useEffect } from 'react';
 
-const InfoWrapper = styled.div`
-  min-height: 45px;
-  max-height: 45px;
-  background: #3e3f3a;
-  padding: 5px 15px;
-`;
+import { trpc } from '../trpc';
+// import styled from 'styled-components';
 
-export const Info: VFC = () => {
-  const [content, setContent] = useState('');
+// const InfoWrapper = styled.div`
+//   min-height: 45px;
+//   max-height: 45px;
+//   background: #3e3f3a;
+//   padding: 5px 15px;
+// `;
 
-  const load = async (): Promise<void> => {
-    const response = await fetch(
-      `/api/info/${window.localStorage.getItem('npm-gui-id')}`,
-    );
-    setContent(await response.text());
-    // Tricky one
-    setTimeout(() => {
+export const Info: FC = () => {
+  const { data: content } = trpc.info.useQuery(
+    window.localStorage.getItem('npm-gui-id') || 'unknown',
+    {
+      enabled: window.localStorage.getItem('npm-gui-id') !== 'developer',
+    },
+  );
+
+  useEffect(() => {
+    if (content) {
       const script = document.createElement('script');
       script.src = 'https://buttons.github.io/buttons.js';
       document.head.append(script);
-    });
-  };
-
-  useEffect(() => {
-    if (window.localStorage.getItem('npm-gui-id') !== 'developer') {
-      load();
     }
-  }, []);
+  }, [content]);
 
   if (!content) {
     return null;
   }
 
   return (
-    <InfoWrapper>
-      <div
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          // eslint-disable-next-line @typescript-eslint/naming-convention
-          __html: content,
-        }}
-      />
-    </InfoWrapper>
+    <div
+      className="min-h-[45px] max-h-[45px] bg-neutral-700"
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        __html: content,
+      }}
+    />
   );
 };