FIX: Cyclic Import

apps/web/app/admin/page.tsx

@@ -1,4 +1,4 @@
-import { Admin } from "@repo/ui/pages";
+import { Admin } from "../../components/pages";
 import { AppbarClient } from "../../components/AppbarClient";
 
 export default async function AdminPage() {

packages/ui/src/AddProblemCard.tsx → apps/web/components/AddProblemCard.tsx

@@ -1,15 +1,22 @@
 "use client";
 import { useState } from "react";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./shad/ui/card";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./shad/ui/select";
-import { Input } from "./shad/ui/input";
-import { Button } from "./shad/ui/button";
-import { useToast } from "./shad/ui/use-toast";
-import { createProblem } from "../../../apps/web/components/utils";
-import { useRouter } from "next/navigation";
-import { Problem,ProblemType } from "@prisma/client";
-import { createProblem, createProblemStatement } from "../../../apps/web/components/utils";
-import ProblemStatementForm from "./code/admin/ProblemStatementForm";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Input,
+  Button,
+  useToast,
+} from "@repo/ui/shad/ui";
+import { ProblemType } from "@prisma/client";
+import { createProblem, createProblemStatement } from "./utils";
 
 interface Problem {
   id: string;
@@ -24,7 +31,7 @@ const AddProblemCard = () => {
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [notionDocId, setNotionDocId] = useState("");
-  const [type, setType] = useState<ProblemType>(ProblemType.Blog);
+  const [type, setType] = useState<ProbleType>(ProblemType.Blog);
   const { toast } = useToast();
 
   const handleCreateProblem = async () => {

apps/web/components/AddProblemStatementForm.tsx

@@ -1,14 +1,10 @@
 "use client";
-import { Input } from "@repo/ui/input";
 import { useState } from "react";
 import { Problem, CodeLanguage } from "@prisma/client";
-import { Button } from "@repo/ui/button";
-import { Label } from "@repo/ui/label";
-import { Checkbox } from "@repo/ui/checkbox";
+import { Input, Button, Label, Checkbox, Card, CardContent } from "@repo/ui/shad/ui";
 import AddTestCase from "./AddTestCase";
 import { useRecoilValue } from "recoil";
 import { adminTestCasesState } from "@repo/store";
-import { Card, CardContent } from "@repo/ui/card";
 import { createProblemStatement } from "./utils";
 
 export const AddProblemStatementForm = ({ problem, languages }: { problem: Problem; languages: CodeLanguage[] }) => {

apps/web/components/AddTestCase.tsx

@@ -1,9 +1,15 @@
 "use client";
-import { Input } from "@repo/ui/input";
-import { Button } from "@repo/ui/button";
-import { Label } from "@repo/ui/label";
-
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@repo/ui/components";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Button,
+  Label,
+} from "@repo/ui/shad/ui";
 import { useState } from "react";
 import { useSetRecoilState } from "recoil";
 import { adminTestCasesState } from "@repo/store";

packages/ui/src/AddTrackCard.tsx → apps/web/components/AddTrackCard.tsx

@@ -1,10 +1,7 @@
 "use client";
 import { useState } from "react";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./shad/ui/card";
-import { Input } from "./shad/ui/input";
-import { Button } from "./shad/ui/button";
-import { useToast } from "./shad/ui/use-toast";
-import { createTrack } from "../../../apps/web/components/utils";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Button, useToast } from "@repo/ui/shad/ui";
+import { createTrack } from "web/components/utils";
 import { Categories } from "@prisma/client";
 import { Track } from "@prisma/client";
 

packages/ui/src/AdminAddMCQ.tsx → apps/web/components/AdminAddMCQ.tsx

@@ -1,8 +1,5 @@
 import { useEffect, useState } from "react";
-import { Sheet, SheetContent, SheetTrigger } from "./shad/ui/sheet";
-import { Button } from "./shad/ui/button";
-import { Input } from "./shad/ui/input";
-import { Card, CardDescription, CardTitle } from "./shad/ui/card";
+import { Card, CardDescription, CardTitle, Button, Input, Sheet, SheetContent, SheetTrigger } from "@repo/ui/shad/ui";
 import { MCQQuestion, Problem } from "@prisma/client";
 import { createMCQ, deleteMCQ, getAllMCQQuestion } from "web/components/utils";
 import EditMCQ from "./mcq/EditMCQ";
@@ -12,7 +9,7 @@ interface AdminAddMCQProps extends Problem {
 }
 
 const AdminAddMCQ = ({ problem }: { problem: AdminAddMCQProps }) => {
-  const [mcqs, setMcqs] = useState<Omit<MCQQuestion,"id">[]>([]);
+  const [mcqs, setMcqs] = useState<Omit<MCQQuestion, "id">[]>([]);
   const [ExistingMCQs, setExistingMCQs] = useState<MCQQuestion[]>(problem.mcqQuestions);
   const [question, setQuestion] = useState<string>("");
   const [options, setOptions] = useState<string[]>([]);
@@ -26,7 +23,7 @@ const AdminAddMCQ = ({ problem }: { problem: AdminAddMCQProps }) => {
       setExistingMCQs(mcqs);
     }
     fetchMCQs();
-  },[mcqs,isUpdate])
+  }, [mcqs, isUpdate]);
 
   function handleAddOption() {
     setOptions([...options, ...option.split(",")]);
@@ -51,7 +48,7 @@ const AdminAddMCQ = ({ problem }: { problem: AdminAddMCQProps }) => {
   function handleRemoveMCQ(question: string) {
     setMcqs(mcqs.filter((mcq) => mcq.question !== question));
   }
-  
+
   function handleSubmit() {
     mcqs.map(async (mcq) => {
       await createMCQ(mcq);
@@ -135,7 +132,7 @@ const AdminAddMCQ = ({ problem }: { problem: AdminAddMCQProps }) => {
               <CardDescription>Correct Option: {mcq.correctOption}</CardDescription>
             </div>
             <div className="space-x-3">
-              <EditMCQ mcq={mcq} setIsUpdate={setIsUpdate}/>
+              <EditMCQ mcq={mcq} setIsUpdate={setIsUpdate} />
               <Button variant={"outline"} onClick={() => handleRemoveExistingMCQs(mcq.id)}>
                 Remove
               </Button>

packages/ui/src/AdminButton.tsx → apps/web/components/AdminButton.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Button } from ".";
+import { Button } from "@repo/ui/shad/ui";
 import { useRouter } from "next/navigation";
 
 export const AdminButton = () => {
@@ -11,7 +11,7 @@ export const AdminButton = () => {
   //TODO: propagate to state
   async function fetchUserDetailsClient() {
     try {
-      return []
+      return [];
     } catch (e) {
       return [];
     }

packages/ui/src/AdminMCQ.tsx → apps/web/components/AdminMCQ.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useEffect, useState } from "react";
-import {  getAllMCQs } from "../../../apps/web/components/utils";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./shad/ui/card";
+import { getAllMCQs } from "web/components/utils";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@repo/ui/shad/ui";
 import { Problem, MCQQuestion } from "@prisma/client";
 import AdminAddMCQ from "./AdminAddMCQ";
 

packages/ui/src/Appbar.tsx → apps/web/components/Appbar.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Button } from ".";
+import { Button } from "@repo/ui/shad/ui";
 import { ModeToggle } from "./ModeToggle";
 import { signIn } from "next-auth/react";
 

apps/web/components/AppbarClient.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Appbar } from "@repo/ui/components";
+import { Appbar } from "../components/Appbar";
 import { Track, Problem } from "@prisma/client";
 
 export const AppbarClient = ({ tracks }: { tracks: (Track & { problems: Problem[] })[] }) => {

packages/ui/src/BlogAppbar.tsx → apps/web/components/BlogAppbar.tsx

@@ -1,15 +1,15 @@
 "use client";
 
-import { Button } from "./shad/ui/button";
+import { Button } from "@repo/ui/shad/ui";
 import { Problem, Track, CodeLanguage, ProblemStatement, TestCase } from "@prisma/client";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { ChevronLeftIcon, ChevronRightIcon, DownloadIcon } from "@radix-ui/react-icons";
 import { ModeToggle } from "./ModeToggle";
 import { PageToggle } from "./PageToggle";
 import { useRouter } from "next/navigation";
 import UserAccountDropDown from "./UserAccountDropDown";
-import { Codebar } from "./code/Codebar";
+import { Codebar } from "web/components/code/Codebar";
 
 export const BlogAppbar = ({
   problem,

packages/ui/src/Categories.tsx → apps/web/components/Categories.tsx

@@ -1,8 +1,8 @@
 "use client";
 import { useRecoilState } from "recoil";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./shad/ui/select";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@repo/ui/shad/ui";
 import { category } from "@repo/store";
-import { Button } from "./shad/ui/button";
+import { Button } from "@repo/ui/shad/ui";
 
 interface Category {
   category: string;

packages/ui/src/CodeBlock.tsx → apps/web/components/CodeBlock.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import hljs from "highlight.js";
 import javascript from "highlight.js/lib/languages/javascript";
-import styles from "../app/CodeBlock.module.css";
+import styles from "./CodeBlock.module.css";
 import "highlight.js/styles/github-dark.css";
 
 export default function CodeBlock({ block }: { block: any }) {

packages/ui/src/CompleteAddTracks.tsx → apps/web/components/CompleteAddTracks.tsx

@@ -1,9 +1,8 @@
 "use client";
 import { useEffect, useState } from "react";
-import { Input } from "./shad/ui/input";
-import { Track,Categories,TrackCategory } from "@prisma/client";
+import { Input, Button } from "@repo/ui/shad/ui";
+import { Categories } from "@prisma/client";
 import CompleteTrackCard from "./CompleteTrackCard";
-import { Button } from "./shad/ui/button";
 
 export interface CompleteTrack {
   trackId: string;

packages/ui/src/CompleteTrackCard.tsx → apps/web/components/CompleteTrackCard.tsx

@@ -1,9 +1,8 @@
 import { Prisma, ProblemType } from "@prisma/client";
 import { useEffect, useState } from "react";
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "./shad/ui/sheet";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, Button } from "@repo/ui/shad/ui";
 import EditProblem from "./EditProblem";
-import { Button } from "./shad/ui/button";
-import { createTrack } from "../../../apps/web/components/utils";
+import { createTrack } from "web/components/utils";
 
 interface CompleteProblemCard {
   id: string;

packages/ui/src/EditProblem.tsx → apps/web/components/EditProblem.tsx

@@ -1,9 +1,7 @@
 "use client";
 import { Prisma } from "@prisma/client";
 import { useState } from "react";
-import { Button } from "./shad/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./shad/ui/card";
-import { Input } from "./shad/ui/input";
+import { Card, CardContent, CardHeader, CardTitle, Button, Input } from "@repo/ui/shad/ui";
 
 const EditProblem = ({ problem }: { problem: Prisma.ProblemCreateManyInput }) => {
   const [isEditing, setIsEditing] = useState(false);

packages/ui/src/EditTrackCard.tsx → apps/web/components/EditTrackCard.tsx

@@ -1,10 +1,8 @@
 "use client";
 import { useState } from "react";
-import { Button } from "./shad/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./shad/ui/card";
-import { Track,Categories } from "@prisma/client";
-import { Input } from "./shad/ui/input";
-import { updateTrack } from "../../../apps/web/components/utils";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, Button, Input } from "@repo/ui/shad/ui";
+import { Track, Categories } from "@prisma/client";
+import { updateTrack } from "web/components/utils";
 
 interface TrackCardProps extends Track {
   categories: {
@@ -15,20 +13,17 @@ interface TrackCardProps extends Track {
   }[];
 }
 
-const EditTrackCard = ({ Track,categories }: { 
-  Track: TrackCardProps 
-  categories: Categories[] }) => {
+const EditTrackCard = ({ Track, categories }: { Track: TrackCardProps; categories: Categories[] }) => {
   const [isEditing, setIsEditing] = useState(false);
   const [title, setTitle] = useState(Track.title);
   const [description, setDescription] = useState(Track.description);
   const [image, setImage] = useState(Track.image);
   const [hidden, setHidden] = useState(Track.hidden);
   const [selectedCategory, setSelectedCategory] = useState<string[]>(Track.categories.map((item) => item.category.id));
 
-
   function handleEdit(id: string) {
     if (isEditing) {
-      updateTrack(id, { id, title, description, image, hidden, selectedCategory});
+      updateTrack(id, { id, title, description, image, hidden, selectedCategory });
       return setIsEditing(false);
     }
     setIsEditing(true);
@@ -64,10 +59,10 @@ const EditTrackCard = ({ Track,categories }: {
               </div>
               <CardDescription>{description}</CardDescription>
               <CardDescription>
-              {selectedCategory.map((item) => {
-                return <div key={item}>{item}</div>;
-              })}
-            </CardDescription>
+                {selectedCategory.map((item) => {
+                  return <div key={item}>{item}</div>;
+                })}
+              </CardDescription>
             </CardHeader>
             <CardContent>{`hidden: ${hidden}`}</CardContent>
           </div>
@@ -96,15 +91,15 @@ const EditTrackCard = ({ Track,categories }: {
               <Input onChange={(e) => setImage(e.target.value)} value={image} />
             </CardDescription>
             <CardDescription>
-              {categories.map((item,i) => (
+              {categories.map((item, i) => (
                 <Button
-                key={i}
-                variant="ghost"
-                onClick={() => handleFilterButton(item.id)}
-                className={selectedCategory.includes(item.id) ? "bg-gray-100 dark:bg-slate-700" : ""}
-              >
-                {item.category}
-              </Button>
+                  key={i}
+                  variant="ghost"
+                  onClick={() => handleFilterButton(item.id)}
+                  className={selectedCategory.includes(item.id) ? "bg-gray-100 dark:bg-slate-700" : ""}
+                >
+                  {item.category}
+                </Button>
               ))}
             </CardDescription>
           </CardHeader>

apps/web/components/LessonView.tsx

@@ -1,12 +1,12 @@
-import { Blog } from "@repo/ui/Blog";
-import { CodeProblemRenderer } from "@repo/ui/CodeProblemRenderer";
+import { Blog } from "./Blog";
 import { Problem, Track, ProblemStatement, CodeLanguage, TestCase } from "@prisma/client";
-import MCQRenderer from "@repo/ui/MCQRenderer";
-import RedirectToLoginCard from '@repo/ui/RedirectToLoginCard';
+import MCQRenderer from "./mcq/MCQRenderer";
+import RedirectToLoginCard from "./RedirectToLoginCard";
 
 import db from "@repo/db/client";
 import { getServerSession } from "next-auth";
 import { authOptions } from "../lib/auth";
+import { CodeProblemRenderer } from "./code/CodeProblemRenderer";
 
 const getSubmissions = async (problemStatementId: string) => {
   const session = await getServerSession(authOptions);
@@ -49,19 +49,16 @@ export const LessonView = async ({
   showAppBar?: Boolean;
   isPdfRequested?: Boolean;
 }) => {
-
   const session = await getServerSession(authOptions);
-  
+
   const problemIndex = track.problems.findIndex((p) => p.id === problem.id);
-  
-  if(problemIndex > 1 && (!session || !session.user)) {
-    return <RedirectToLoginCard/>
+
+  if (problemIndex > 1 && (!session || !session.user)) {
+    return <RedirectToLoginCard />;
   }
-   
+
   if (problem.type === "MCQ") {
-    return (
-      <MCQRenderer problem={problem} track={track} showAppBar={!!showAppBar} problemIndex={problemIndex} />
-    );
+    return <MCQRenderer problem={problem} track={track} showAppBar={!!showAppBar} problemIndex={problemIndex} />;
   }
   if (problem.type === "Code" && problem.problemStatement) {
     const submissions = await getSubmissions(problem.problemStatement.id);

packages/ui/src/LinkCard.tsx → apps/web/components/LinkCard.tsx

@@ -1,12 +1,12 @@
 "use client";
-import { Button } from "./shad/ui/button";
+import { Button } from "@repo/ui/shad/ui";
 import { TrackProblems, Track } from "@prisma/client";
-import { Input } from "./shad/ui/input";
-import { Sheet, SheetContent, SheetTrigger } from "./shad/ui/sheet";
+import { Input } from "@repo/ui/shad/ui";
+import { Sheet, SheetContent, SheetTrigger } from "@repo/ui/shad/ui";
 import ProblemCard from "./ProblemCard";
 import { useState } from "react";
-import { createTrackProblems } from "../../../apps/web/components/utils";
-import { Card, CardDescription, CardTitle } from "./shad/ui/card";
+import { createTrackProblems } from "web/components/utils";
+import { Card, CardDescription, CardTitle } from "@repo/ui/shad/ui";
 
 interface LinkCardProps extends Track {
   problems: {