125 move shadcn components to seperate folder with name shadcn config…

…ure componentsjson (#286)

* refactor(frontend): ♻️ move shadcn components to shadcn directory

* fix build errors

frontend/components.json

@@ -12,6 +12,7 @@
     },
     "aliases": {
         "components": "@/components",
-        "utils": "@/lib/utils"
+        "utils": "@/lib/utils",
+        "ui": "@/components/shadcn"
     }
 }

frontend/src/app/blog/[articleSlug]/loading.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@/components/ui/skeleton";
+import { Skeleton } from "@shadcn/skeleton";
 import React from "react";
 
 export default function Loading() {

frontend/src/app/blog/[articleSlug]/page.tsx

@@ -1,4 +1,4 @@
-import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Avatar, AvatarFallback } from "@shadcn/avatar";
 
 import { BlocksContent } from "@strapi/blocks-react-renderer";
 import BlockRendererClient from "@/components/BlockRendererClient";

frontend/src/app/blog/loading.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@/components/ui/skeleton";
+import { Skeleton } from "@shadcn/skeleton";
 import React from "react";
 
 export default function Loading() {

frontend/src/app/loading.tsx

@@ -3,7 +3,7 @@ import {
     SkeletonHero,
     SkeletonSection,
     EmptySection,
-} from "@/components/ui/skeleton";
+} from "@shadcn/skeleton";
 import React from "react";
 
 export default function Loading() {

frontend/src/app/page.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { Button } from "@shadcn/button";
 import ColoredSection from "@/components/ui/coloredSection";
 
 import Image from "next/image";

frontend/src/app/projects/[projectSlug]/loading.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // Assuming the correct import path for the Skeleton component
-import { Skeleton } from "@/components/ui/skeleton";
+import { Skeleton } from "@shadcn/skeleton";
 
 export default function Loading() {
     return (

frontend/src/app/projects/loading.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // Assuming the correct import path for the Skeleton component
-import { Skeleton } from "@/components/ui/skeleton";
+import { Skeleton } from "@shadcn/skeleton";
 
 export default function Loading() {
     // Create an array with the specified number of satellites

frontend/src/app/projects/page.tsx

@@ -1,5 +1,10 @@
 import { gql } from "@/__generated__/gql";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from "@/components/shadcn/card";
 import { getClient } from "@/lib/ApolloClient";
 import Link from "next/link";
 import Image from "next/image";

frontend/src/app/satellites/loading.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from "@/components/ui/skeleton";
+import { Skeleton } from "@shadcn/skeleton";
 import React from "react";
 
 export default function Loading() {

frontend/src/components/BlogPaginator.tsx

@@ -7,7 +7,7 @@ import {
     PaginationLink,
     PaginationNext,
     PaginationPrevious,
-} from "./ui/pagination";
+} from "./shadcn/pagination";
 import { useRouter, useSearchParams } from "next/navigation";
 
 export default function BlogPaginator({

frontend/src/components/BlogpageButtons.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { useState } from "react";
-import { Button } from "./ui/button";
+import { Button } from "./shadcn/button";
 import { useRouter, useSearchParams } from "next/navigation";
 import { cn } from "@/lib/utils";
 

frontend/src/components/HeroWrapper.tsx

@@ -1,6 +1,6 @@
 import { gql } from "@/__generated__/gql";
 import { getClient } from "@/lib/ApolloClient";
-import Hero from "@/components/ui/hero";
+import Hero from "@components/ui/hero";
 
 const STRAPI_URL = process.env.STRAPI_URL;
 

frontend/src/components/Navbar.tsx

@@ -1,8 +1,12 @@
 "use client";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Button } from "@/components/ui/button";
-import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
+import { Button } from "@shadcn/button";
+import {
+    Drawer,
+    DrawerContent,
+    DrawerTrigger,
+} from "@/components/shadcn/drawer";
 import Image from "next/image";
 
 import type { SVGProps } from "react";

frontend/src/components/RelatedProjectsAndSatellites.tsx

@@ -2,7 +2,12 @@ import { ProjectOrSatellite } from "@/app/satellites/[satelliteSlug]/page";
 import Link from "next/link";
 import Image from "next/image";
 const STRAPI_URL = process.env.STRAPI_URL;
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from "@/components/shadcn/card";
 
 export default function RelatedProjectsAndSatellites({
     project,

frontend/src/components/satelliteData/SatelliteStatsTable.tsx

@@ -2,7 +2,7 @@
 import { useState, useEffect } from "react";
 import { convertSatrec, SatelliteInfo } from "@/lib/convertSatrec";
 import { useSatelliteStore } from "@/lib/store";
-import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+import { Table, TableBody, TableCell, TableRow } from "@shadcn/table";
 
 const updateInterval = 50;
 

frontend/src/components/ui/command.tsx → frontend/src/components/shadcn/command.tsx

@@ -6,7 +6,7 @@ import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 
 import { cn } from "@/lib/utils";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Dialog, DialogContent } from "@/components/shadcn/dialog";
 
 const Command = React.forwardRef<
     React.ElementRef<typeof CommandPrimitive>,

frontend/src/components/ui/pagination.tsx → frontend/src/components/shadcn/pagination.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 
 import { cn } from "@/lib/utils";
-import { ButtonProps, buttonVariants } from "@/components/ui/button";
+import { ButtonProps, buttonVariants } from "@/components/shadcn/button";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
     <nav

frontend/src/components/ui/satelliteCard.tsx

@@ -2,7 +2,12 @@
 import React from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from "@/components/shadcn/card";
 import SatelliteStatsTable from "@/components/satelliteData/SatelliteStatsTable";
 // Import OuiImage or your placeholder image component here
 import { OuiImage } from "@/components/fullBlogCard";

frontend/tsconfig.json

@@ -21,6 +21,7 @@
             "@/*": ["./src/*"],
             "@components/*": ["./src/components/*"],
             "@customTypes/*": ["./src/types/*"],
+            "@shadcn/*": ["./src/components/shadcn/*"],
         },
     },
     "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],