Merge pull request #3 from PhantomKnight287/dev

Add autocomplete for imports

Author: PhantomKnight287

apps/docs/content/faq.mdx

@@ -40,7 +40,7 @@ You can resize the preview window to check responsiveness of site. You can also
 
 ## Where can I see console logs that I add in my code?
 
-You can open dev tools in the site itself but we won't recommend it. You can open the preview in new tab by clicking on button in top right corner of preview window and then open dev tools in that tab.
+You can open dev tools in the site itself but we won't recommend it(you really don't want to see errors due to my skill issue, do you?). You can open the preview in new tab by clicking on button in top right corner of preview window and then open dev tools in that tab.
 
 ## I want to report a bug or suggest a feature
 

apps/docs/content/index.mdx

@@ -5,6 +5,10 @@ description: How to create Challenges for FrameGround
 
 Thank you for your interest in creating a Challenge for FrameGround! We are excited to see what you come up with. This guide will walk you through the process of creating a Challenge.
 
+<Callout title="Note" type="warn">
+  Please do not add any empty file in challenge. Add atleast 2-3 new lines.
+</Callout>
+
 ## Using CLI
 
 ### Creating a new project
@@ -34,19 +38,19 @@ describe("It Should Work", () => {
     Cli will only parse first test file in the project so make sure to add all tests in only 1 file.
     </Callout>
 
-
 ### Using Cli to parse the project
 
 Now, you can use the cli in `parser` folder to generate the json file.
 
-```bash 
+```bash
 cargo run generate --test-runner vitest --folder ../project --name test-challenge --slug react
 ```
 
 <TypeTable
   type={{
     "test-runner": {
-      description: "The test runner to use for the challenge. It can be jest or vitest.",
+      description:
+        "The test runner to use for the challenge. It can be jest or vitest.",
       type: "string",
       typeDescription: "jest, vitest",
     },
@@ -65,15 +69,13 @@ cargo run generate --test-runner vitest --folder ../project --name test-challeng
   }}
 />
 
-
 Running the above command will create a `challenges/react/test-challenge` folder in `parser` folder. You can copy the `test-challenge` or `react/test-challenge`(if track doesn't exist) folder to `challenges` folder.
 
-
-<Callout
-  title="Note"
-  type="info"
->
-  If you are creating a challenge using `jest`, you are adviced to create `jest.config.ts/jest.config.js` file in root of the challenge. Cli will parse the jest config file and use it for the challenge, if it doesn't exist, it will create an empty jest config file.
+<Callout title="Note" type="info">
+  If you are creating a challenge using `jest`, you are adviced to create
+  `jest.config.ts/jest.config.js` file in root of the challenge. Cli will parse
+  the jest config file and use it for the challenge, if it doesn't exist, it
+  will create an empty jest config file.
 </Callout>
 
 ### Marking Files as Editable
@@ -96,10 +98,6 @@ export default {
 } satisfies FrameGroundChallengeExport;
 ```
 
-
-
-
-
 ## Manually
 
 ### Creating a folder

apps/web/app/tracks/[track]/challenge/[challenge]/_page.client.tsx

@@ -22,7 +22,7 @@ import {
   useTransition,
 } from "react";
 import { usePathname, useRouter } from "next/navigation";
-import { useTerminal } from "@repo/terminal";
+import { useTerminal, TerminalProps } from "@repo/terminal";
 import {
   createWebContainerInstance,
   FileSystemTree,
@@ -42,7 +42,8 @@ import EnrollInTrack from "./_components/enroll";
 import { attemptChallenge, solveChallenge } from "./action";
 import { signIn, useSession } from "next-auth/react";
 import { languages } from "@/constants/languages";
-import SplitEditor, {CodeEditor} from "@repo/monaco/exports"
+import SplitEditor from "@repo/monaco/exports";
+import { fontMono } from "@/fonts";
 
 let timeout: NodeJS.Timeout;
 
@@ -56,6 +57,7 @@ export default function Editor({
   files,
   CommentsSection,
   SolutionsSection,
+  packages,
 }: {
   challenge: Challenge & {
     authors: User[];
@@ -72,17 +74,19 @@ export default function Editor({
   files: FrameGroundChallengeExport["files"];
   CommentsSection: ReactNode;
   SolutionsSection: ReactNode;
+  packages: string[];
 }) {
   const session = useSession();
   const [_, startTransition] = useTransition();
   const { replace } = useRouter();
   const { activeFile, setActiveFile } = useEditorFileState();
 
-  const terminalOptions = useMemo(() => {
-    const baseConfig = {
+  const terminalOptions = useMemo<TerminalProps["options"]>(() => {
+    const baseConfig: TerminalProps["options"] = {
       cursorBlink: false,
       convertEol: true,
       disableStdin: false,
+      fontFamily: fontMono.style.fontFamily,
     };
     if (
       Object.keys((challenge?.terminalConfig as unknown as Object) || {}).length
@@ -222,8 +226,11 @@ const command = ${
     }
   }, []);
   const [hiddenIframe, setHiddenIframe] = useState(false);
+  const path = useMemo(
+    () => generateFilePath(files, activeFile?.path || "0"),
+    [activeFile?.path, files]
+  );
   function handleInput(value: string) {
-    const path = generateFilePath(files, activeFile?.path || "0");
     if (path) containerRef?.current?.fs?.writeFile(path, value);
   }
   const debouncedHandleInput = (val: string) => {
@@ -256,7 +263,7 @@ const command = ${
           minSize={10}
           defaultSize={10}
           className={cn(
-            "flex flex-col h-full border-r border-l border-background bg-border rounded-md overflow-scroll custom-scrollable-element max-h-screen"
+            "flex flex-col h-full border-r border-l border-background bg-border rounded-md overflow-scroll custom-scrollable-element "
           )}
         >
           <div className="uppercase font-bold flex flex-row items-center justify-between text-sm p-2 border-b-[12px] border-background line-clamp-1">
@@ -353,21 +360,26 @@ const command = ${
                     </div>
 
                     <SplitEditor
-                        height={"100vh"}
-                        activeFile={"Challenge.md"}
+                      height={"100vh"}
+                      initialPackages={packages}
+                      activeFile={"Challenge.md"}
+                      activeFilePath={path}
                       value={content || ""}
                       onChange={(value) => {
                         debouncedHandleInput(value || "");
                       }}
                       theme={"vs-dark"}
-                      language={language}
+                      defaultLanguage={language}
+                      defaultValue={content || ""}
+                      path={`file://${path}`}
                       options={{
                         fontSize: 16,
                         readOnly:
                           activeFile?.editable === undefined
                             ? true
                             : !activeFile?.editable,
                         wordWrap: "on",
+                        fontFamily: fontMono.style.fontFamily,
                       }}
                     />
 
@@ -424,8 +436,8 @@ const command = ${
                           {testsPassed
                             ? "Tests Passed"
                             : !session?.data?.user?.id
-                            ? "Login to Test"
-                            : "Test"}
+                              ? "Login to Test"
+                              : "Test"}
                         </button>
                         <button
                           className="bg-green-500 hover:bg-green-600 text-white max-h-fit px-4 py-1 rounded-md "

apps/web/app/tracks/[track]/challenge/[challenge]/page.client.tsx

@@ -41,7 +41,6 @@ function ChallengeTabs({
 
   useEffect(() => {
     const value = localStorage.getItem("faq_modal_shown");
-    console.log(value);
     if (!value || value === "false") {
       setIsFAQModalOpened(true);
     }

apps/web/app/tracks/[track]/challenge/[challenge]/page.tsx

@@ -103,6 +103,19 @@ async function Challenge({
     },
     ...(challenge.initialFiles as unknown as FrameGroundChallengeExport["files"]),
   ];
+  const packages = [];
+  const packageJsonContent = JSON.parse(
+    (
+      challenge.initialFiles.filter(
+        (d: any) => d.name === "package.json"
+      )[0]! as unknown as FrameGroundChallengeExport["files"][0]
+    ).content as string
+  );
+
+  packages.push(
+    ...Object.keys(packageJsonContent.dependencies),
+    ...Object.keys(packageJsonContent.devDependencies)
+  );
   if (challenge.jestConfig) {
     // add at index 1
     files.splice(1, 0, {
@@ -157,7 +170,7 @@ async function Challenge({
     }
   });
   return (
-    <div className="px-4 sticky h-screen top-[40px]">
+    <div className="px-4 sticky h-full top-[40px]">
       <div className="flex flex-row h-screen">
         <Editor
           //@ts-expect-error
@@ -166,6 +179,7 @@ async function Challenge({
           fileSystem={fileSystem}
           queryParams={searchParams}
           files={files as any}
+          packages={packages}
           CommentsSection={
             <Comments
               sortBy={searchParams.sort_comments as "oldest" | "newest"}

apps/web/components/markdown/index.tsx

@@ -13,11 +13,13 @@ import { vscDarkPlus } from "./themes/vs-dark-plus";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { Button } from "../ui/button";
 import { Check, Copy } from "lucide-react";
-import { vsDark,vscDarkPlus  as vscDarkPlusPrisma} from "react-syntax-highlighter/dist/cjs/styles/prism";
+import {
+  vsDark,
+  vscDarkPlus as vscDarkPlusPrisma,
+} from "react-syntax-highlighter/dist/cjs/styles/prism";
 import raw from "rehype-raw";
 import { Callout } from "../callout";
 
-
 const HTML_COMMENT_REGEX = new RegExp("<!--([\\s\\S]*?)-->", "g");
 
 /**
@@ -52,9 +54,6 @@ export function Markdown({
   children: string;
   className?: string;
 }) {
-  const { theme } = useTheme();
-  const syntaxHighlighterTheme = theme === "light" ? vs : vscDarkPlus;
-
   return (
     <ReactMarkdown
       skipHtml

apps/web/package.json

@@ -28,6 +28,7 @@
     "@repo/monaco": "workspace:^",
     "@repo/terminal": "workspace:^",
     "@repo/utils": "workspace:^",
+    "@stefanprobst/remark-shiki": "^2.2.1",
     "@t3-oss/env-nextjs": "^0.7.1",
     "@vercel/analytics": "^1.1.2",
     "@vercel/og": "^0.6.2",
@@ -54,6 +55,7 @@
     "react-textarea-autosize": "^8.5.3",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
+    "shiki": "^1.4.0",
     "sonner": "^1.3.1",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",

challenges/react/class-components/index.ts

@@ -86,7 +86,7 @@ export default {
             {
               type: "file",
               name: "greet.jsx",
-              content: "",
+              content: "\n\n\n\n\n\n",
               editable: true,
             },
           ],

challenges/react/functional-components/index.ts

@@ -86,7 +86,7 @@ export default {
             {
               type: "file",
               name: "greet.jsx",
-              content: "",
+              content: "\n\n\n\n\n\n",
               editable: true,
             },
           ],