diconium · fgmadeira · Feb 27, 2024 · Feb 27, 2024 · Feb 27, 2024 · Feb 27, 2024
diff --git a/ethereal-nexus-dashboard/package-lock.json b/ethereal-nexus-dashboard/package-lock.json
diff --git a/ethereal-nexus-dashboard/package.json b/ethereal-nexus-dashboard/package.json
@@ -48,6 +48,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.46.1",
+    "react-markdown": "^9.0.1",
     "readable-stream": "^4.5.2",
     "swagger-ui-react": "^5.1.3",
     "tailwind-merge": "^1.14.0",

diff --git a/...shboard/src/app/(iframe)/components/[id]/versions/[versionId]/preview-new-window/page.tsx b/...shboard/src/app/(iframe)/components/[id]/versions/[versionId]/preview-new-window/page.tsx
@@ -0,0 +1,24 @@
+import {getComponentAssets, getComponentById, getComponentVersions} from "@/data/components/actions";
+import PreviewContainer from "@/components/components/component/version/preview-container";
+import {notFound} from "next/navigation";
+
+export const revalidate = 0;
+export default async function PreviewVersion({params: {id, versionId}}: any) {
+
+
+    const component = await getComponentById(id);
+    const versions = await getComponentVersions(id);
+    const componentAssets = await getComponentAssets(id, versionId);
+    if (!versions.success || !component.success || !componentAssets.success) {
+        notFound();
+    }
+    const selectedVersion = versions.data.filter((version: any) => version.id === versionId)[0];
+
+
+    return (<PreviewContainer
+        component={component}
+        selectedVersion={selectedVersion}
+        key={versionId}
+        componentSlug={component.data.slug}
+        componentAssets={componentAssets.data}/>);
+}
diff --git a/ethereal-nexus-dashboard/src/app/(iframe)/layout.tsx b/ethereal-nexus-dashboard/src/app/(iframe)/layout.tsx
@@ -0,0 +1,16 @@
+export const metadata = {
+  title: 'Next.js',
+  description: 'Generated by Next.js',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/...oard/src/app/(session)/(admin)/layout.tsx → ...app/(layout)/(session)/(admin)/layout.tsx b/...oard/src/app/(session)/(admin)/layout.tsx → ...app/(layout)/(session)/(admin)/layout.tsx
diff --git a/...n)/(admin)/users/(modal)/(.)new/modal.tsx → ...n)/(admin)/users/(modal)/(.)new/modal.tsx b/...n)/(admin)/users/(modal)/(.)new/modal.tsx → ...n)/(admin)/users/(modal)/(.)new/modal.tsx
diff --git a/...on)/(admin)/users/(modal)/(.)new/page.tsx → ...on)/(admin)/users/(modal)/(.)new/page.tsx b/...on)/(admin)/users/(modal)/(.)new/page.tsx → ...on)/(admin)/users/(modal)/(.)new/page.tsx
diff --git a/.../app/(session)/(admin)/users/new/page.tsx → ...out)/(session)/(admin)/users/new/page.tsx b/.../app/(session)/(admin)/users/new/page.tsx → ...out)/(session)/(admin)/users/new/page.tsx
diff --git a/.../src/app/(session)/(admin)/users/page.tsx → ...(layout)/(session)/(admin)/users/page.tsx b/.../src/app/(session)/(admin)/users/page.tsx → ...(layout)/(session)/(admin)/users/page.tsx
diff --git a/ethereal-nexus-dashboard/src/app/(layout)/(session)/components/[id]/page.tsx b/ethereal-nexus-dashboard/src/app/(layout)/(session)/components/[id]/page.tsx
@@ -0,0 +1,12 @@
+import {notFound, redirect} from 'next/navigation';
+import {getComponentVersions} from "@/data/components/actions";
+
+
+export default async function EditComponent({params: {id}}: any) {
+
+    const versions = await getComponentVersions(id);
+    if (!versions.success) {
+        notFound();
+    }
+    redirect(`/components/${id}/versions/${versions.data[0].id}`);
+}
diff --git a/...-dashboard/src/app/(layout)/(session)/components/[id]/versions/[versionId]/[tab]/page.tsx b/...-dashboard/src/app/(layout)/(session)/components/[id]/versions/[versionId]/[tab]/page.tsx
@@ -0,0 +1,27 @@
+import {Separator} from '@/components/ui/separator';
+import {notFound} from 'next/navigation';
+import {getComponentAssets, getComponentById, getComponentVersions} from "@/data/components/actions";
+import React from "react";
+import ComponentVersionHeader from "@/components/components/component/version/header";
+import ComponentVersionTabs from "@/components/components/component/version/tabs";
+
+
+export default async function EditComponentVersion({params: {id, versionId, tab}}: any) {
+
+    const component = await getComponentById(id);
+    const versions = await getComponentVersions(id);
+
+    if (!versions.success || !component.success) {
+        notFound();
+    }
+    const selectedVersion = versions.data.filter((version: any) => version.id === versionId)[0];
+    return (
+        <div className="container space-y-6">
+            <ComponentVersionHeader versions={versions} component={component}
+                                    selectedVersion={selectedVersion} activeTab={tab}/>
+            <Separator/>
+            <ComponentVersionTabs activeTab={tab} versions={versions} selectedVersion={selectedVersion}
+                                  component={component}/>
+        </div>
+    );
+}
diff --git a/...-nexus-dashboard/src/app/(layout)/(session)/components/[id]/versions/[versionId]/page.tsx b/...-nexus-dashboard/src/app/(layout)/(session)/components/[id]/versions/[versionId]/page.tsx
@@ -0,0 +1,6 @@
+import {redirect} from 'next/navigation';
+
+
+export default async function EditComponentVersion({params: {id, versionId}}: any) {
+    redirect(`/components/${id}/versions/${versionId}/readme`);
+}
diff --git a/...ard/src/app/(session)/components/page.tsx → ...pp/(layout)/(session)/components/page.tsx b/...ard/src/app/(session)/components/page.tsx → ...pp/(layout)/(session)/components/page.tsx
diff --git a/...us-dashboard/src/app/(session)/layout.tsx → ...ard/src/app/(layout)/(session)/layout.tsx b/...us-dashboard/src/app/(session)/layout.tsx → ...ard/src/app/(layout)/(session)/layout.tsx
diff --git a/...ession)/projects/(modal)/(.)new/modal.tsx → ...ession)/projects/(modal)/(.)new/modal.tsx b/...ession)/projects/(modal)/(.)new/modal.tsx → ...ession)/projects/(modal)/(.)new/modal.tsx
diff --git a/...session)/projects/(modal)/(.)new/page.tsx → ...session)/projects/(modal)/(.)new/page.tsx b/...session)/projects/(modal)/(.)new/page.tsx → ...session)/projects/(modal)/(.)new/page.tsx
diff --git a/.../src/app/(session)/projects/[id]/page.tsx → ...(layout)/(session)/projects/[id]/page.tsx b/.../src/app/(session)/projects/[id]/page.tsx → ...(layout)/(session)/projects/[id]/page.tsx
diff --git a/...d/src/app/(session)/projects/new/page.tsx → .../(layout)/(session)/projects/new/page.tsx b/...d/src/app/(session)/projects/new/page.tsx → .../(layout)/(session)/projects/new/page.tsx
diff --git a/...board/src/app/(session)/projects/page.tsx → .../app/(layout)/(session)/projects/page.tsx b/...board/src/app/(session)/projects/page.tsx → .../app/(layout)/(session)/projects/page.tsx
diff --git a/...sers/[id]/(modal)/(.)keys/[key]/modal.tsx → ...sers/[id]/(modal)/(.)keys/[key]/modal.tsx b/...sers/[id]/(modal)/(.)keys/[key]/modal.tsx → ...sers/[id]/(modal)/(.)keys/[key]/modal.tsx
diff --git a/...users/[id]/(modal)/(.)keys/[key]/page.tsx → ...users/[id]/(modal)/(.)keys/[key]/page.tsx b/...users/[id]/(modal)/(.)keys/[key]/page.tsx → ...users/[id]/(modal)/(.)keys/[key]/page.tsx
diff --git a/.../(session)/users/[id]/keys/[key]/page.tsx → .../(session)/users/[id]/keys/[key]/page.tsx b/.../(session)/users/[id]/keys/[key]/page.tsx → .../(session)/users/[id]/keys/[key]/page.tsx
diff --git a/...ard/src/app/(session)/users/[id]/page.tsx → ...pp/(layout)/(session)/users/[id]/page.tsx b/...ard/src/app/(session)/users/[id]/page.tsx → ...pp/(layout)/(session)/users/[id]/page.tsx
diff --git a/...-nexus-dashboard/src/app/api-doc/page.tsx → ...shboard/src/app/(layout)/api-doc/page.tsx b/...-nexus-dashboard/src/app/api-doc/page.tsx → ...shboard/src/app/(layout)/api-doc/page.tsx
@@ -1,6 +1,6 @@
 import "swagger-ui-react/swagger-ui.css";
 import { getSwaggerSpec } from "@/lib/api-doc/api-doc.service";
-import ReactSwagger from "@/app/api-doc/react-swagger";
+import ReactSwagger from "./react-swagger";
 
 export default async function ApiDoc() {
   const spec = await getSwaggerSpec();

diff --git a/...shboard/src/app/api-doc/react-swagger.tsx → ...rc/app/(layout)/api-doc/react-swagger.tsx b/...shboard/src/app/api-doc/react-swagger.tsx → ...rc/app/(layout)/api-doc/react-swagger.tsx
diff --git a/ethereal-nexus-dashboard/src/app/(layout)/layout.tsx b/ethereal-nexus-dashboard/src/app/(layout)/layout.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import DashboardLayout from "@/components/layout";
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+    const env = process.env.NODE_ENV
+
+    return <DashboardLayout>{children}</DashboardLayout>;
+}
diff --git a/ethereal-nexus-dashboard/src/app/page.tsx → ...nexus-dashboard/src/app/(layout)/page.tsx b/ethereal-nexus-dashboard/src/app/page.tsx → ...nexus-dashboard/src/app/(layout)/page.tsx
@@ -8,7 +8,7 @@ import { logger } from "@/logger"; // our logger import
 export default async function Home() {
     const session = await auth()
     const projects = await getProjects(session?.user?.id);
-    logger.info("Home Page called "); // calling our logger
+
 
     return <div className="container flex-col md:flex">
         <div className="flex-1 space-y-4 p-8 pt-6">

diff --git a/...-dashboard/src/app/api/v1/components/[name]/versions/[version]/assets/[fileName]/route.ts b/...-dashboard/src/app/api/v1/components/[name]/versions/[version]/assets/[fileName]/route.ts
@@ -128,7 +128,7 @@ export const POST = authenticatedWithKey(
       const { request: responseFromBlob = {} as any } = _response;
       const { url } = responseFromBlob;
 
-      console.log('POST assets', JSON.stringify(_response, undefined, 2))
+      // console.log('POST assets', JSON.stringify(_response, undefined, 2))
       if (!url) {
         return NextResponse.json('Failed to upload assets', {
           status: HttpStatus.BAD_REQUEST,

diff --git a/ethereal-nexus-dashboard/src/app/api/v1/components/route.ts b/ethereal-nexus-dashboard/src/app/api/v1/components/route.ts
@@ -2,13 +2,14 @@ import { NextRequest, NextResponse } from 'next/server';
 import { HttpStatus } from '@/app/api/utils';
 import { authenticatedWithKey } from '@/lib/route-wrappers';
 import { upsertComponent } from '@/data/components/actions';
+import {revalidatePath} from "next/cache";
 
 /**
  * @swagger
  * /api/v1/components:
  *   post:
- *     summary: Creates/Updates a project
- *     description: Creates/Updates a project
+ *     summary: Creates/Updates a component
+ *     description: Creates/Updates a component
  *     tags:
  *      - Components
  *     produces:

diff --git a/ethereal-nexus-dashboard/src/app/layout.tsx b/ethereal-nexus-dashboard/src/app/layout.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { Inter } from "next/font/google";
 import DashboardLayout from "@/components/layout";
 import { ThemeProvider } from '@/components/theme-provider';
-import NewRelicSnippet from '../components/newrelicSnippet'
+import NewRelicSnippet from '@/components/newrelicSnippet'
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -21,7 +21,7 @@ export default async function RootLayout({
     </head>): null}
     <body className={inter.className}>
     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-        <DashboardLayout>{children}</DashboardLayout>
+        {children}
     </ThemeProvider>
     </body>
     </html>;

diff --git a/ethereal-nexus-dashboard/src/components/components/component/version/header.tsx b/ethereal-nexus-dashboard/src/components/components/component/version/header.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import React from 'react';
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue
+} from "@/components/ui/select";
+import {useRouter} from "next/navigation";
+
+
+const ComponentVersionHeader = ({component,selectedVersion,versions,activeTab}) => {
+    const { push } = useRouter();
+
+    return (
+        <div className={"flex"}>
+            <div>
+                <h3 className="text-lg font-medium">{component.data.name}</h3>
+                <p className="text-sm text-muted-foreground">
+                    {selectedVersion.version} ~ {component.data.slug} - {selectedVersion.created_at.toLocaleString('en-US', { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' })}
+                </p>
+            </div>
+            <div className="ml-auto">
+                <Select value={selectedVersion.id} onValueChange={(newVersionId) => push(`/components/${component.data.id}/versions/${newVersionId}/${activeTab}`)}>
+                    <SelectTrigger className="w-[180px]">
+                        <SelectValue placeholder="Select a version"/>
+                    </SelectTrigger>
+                    <SelectContent>
+                        <SelectGroup>
+                            <SelectLabel>Version</SelectLabel>
+                            {versions.data.map((version) => (
+                                <SelectItem key={version.id} value={version.id}>{version.version}</SelectItem>))}
+                        </SelectGroup>
+                    </SelectContent>
+                </Select>
+            </div>
+        </div>
+    );
+};
+
+export default ComponentVersionHeader;
diff --git a/ethereal-nexus-dashboard/src/components/components/component/version/preview-container.tsx b/ethereal-nexus-dashboard/src/components/components/component/version/preview-container.tsx
@@ -0,0 +1,97 @@
+"use client"
+import React, {useState} from 'react';
+import Script from "next/script";
+import {useRouter} from "next/navigation";
+import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
+import {Input} from "@/components/ui/input";
+import Link from "next/link";
+import {ExternalLinkIcon} from "@radix-ui/react-icons";
+import {z} from "zod";
+import {componentAssetsSchema} from "@/data/components/dto";
+
+
+interface PreviewContainerProps {
+    componentSlug: string | null;
+    componentAssets: z.infer<typeof componentAssetsSchema>[];
+    selectedVersion: any;
+    component: any;
+}
+
+const PreviewContainer: React.FC<PreviewContainerProps> = ({
+                                                               component,
+                                                               componentAssets = [],
+                                                               componentSlug,
+                                                               selectedVersion
+                                                           }) => {
+    const [inputValues, setInputValues] = useState({});
+
+    const router = useRouter();
+    const mappedObjStr = Object.entries(inputValues)
+        .map(([key, value]) => `${key}="${value}"`)
+        .join(' ');
+
+    return (
+        <div>
+            <div
+                className={"mt-4 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 relative rounded-md border"}
+                style={{position: 'relative'}}>
+                <div style={{position: 'absolute', top: '2px', right: '2px'}}>
+                    <Link target={'_blank'}
+                          href={`/components/${component.data.id}/versions/${selectedVersion.id}/preview-new-window`}>
+                        <button className="m-4 p-2 border rounded">
+
+                            <ExternalLinkIcon/>
+                        </button>
+                    </Link>
+                </div>
+                <div className="flex items-center justify-between p-4 min-h-[300px]">
+                    {componentAssets.map(({url, type, id}, index) => {
+                        if (type === "js") {
+                            return <Script key={id} src={url} type={"module"}></Script>
+                        }
+
+                    })}
+                    <div key={selectedVersion}
+                         id={selectedVersion}
+                         dangerouslySetInnerHTML={{
+                             __html: `
+                    <${componentSlug} ${mappedObjStr}></${componentSlug}>`
+                         }}
+                    />
+                </div>
+            </div>
+            <Table className="mt-4">
+                <TableHeader>
+                    <TableRow>
+                        <TableHead className="w-[100px]">Name</TableHead>
+                        <TableHead>Description</TableHead>
+                        <TableHead>Default</TableHead>
+                        <TableHead>Type</TableHead>
+                        <TableHead>Controls</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {selectedVersion.dialog.map((item: any, index: number) => (
+                        <TableRow key={index}>
+                            <TableCell className="font-medium">{item.name}</TableCell>
+                            <TableCell>{item.placeholder}</TableCell>
+                            <TableCell>{item.type}</TableCell>
+                            <TableCell>
+                                <code
+                                    className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+                                    {item.default ? item.default : "undefined"}
+                                </code>
+                            </TableCell>
+                            <TableCell className="text-right">
+                                <Input onChange={(e) => setInputValues({...inputValues, [item.name]: e.target.value})}
+                                       placeholder="Value"/></TableCell>
+                        </TableRow>
+                    ))}
+
+                </TableBody>
+            </Table>
+        </div>
+    );
+};
+
+export default PreviewContainer;
diff --git a/ethereal-nexus-dashboard/src/components/components/component/version/tabs.tsx b/ethereal-nexus-dashboard/src/components/components/component/version/tabs.tsx
@@ -0,0 +1,65 @@
+"use client";
+import React from 'react';
+import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
+import Preview from "@/components/components/component/version/tabs/preview";
+import {useRouter} from "next/navigation";
+import Readme from "@/components/components/component/version/tabs/readme";
+import Dependents from "@/components/components/component/version/tabs/dependents";
+
+
+const ComponentVersionTabs = ({activeTab, component, versions, selectedVersion}) => {
+    const {push} = useRouter();
+
+    return (
+        <Tabs defaultValue={activeTab}
+              onValueChange={(tab) => push(`/components/${component.data.id}/versions/${selectedVersion.id}/${tab}`)}>
+            <TabsList className={"mb-6"}>
+                <TabsTrigger value="readme">Readme</TabsTrigger>
+                <TabsTrigger value="preview">Preview</TabsTrigger>
+                <TabsTrigger value="dependents">Dependents</TabsTrigger>
+                <TabsTrigger value="versions">Versions</TabsTrigger>
+            </TabsList>
+            <TabsContent value="readme">
+                <Readme selectedVersion={selectedVersion}/>
+            </TabsContent>
+            <TabsContent value="preview">
+                <Preview key={selectedVersion.id} componentId={component.data.id}
+                         selectedVersionId={selectedVersion.id}/>
+            </TabsContent>
+            <TabsContent value="dependents">
+                <Dependents></Dependents>
+            </TabsContent>
+            <TabsContent value="versions">
+                <ul role="list" className="divide-y divide-gray-100">
+                    {versions.data.map((version: any, index) => (
+                        <li key={index} className="flex justify-between gap-x-6 py-5">
+                            <div className="flex min-w-0 gap-x-4">
+                                <div className="min-w-0 flex-auto">
+                                    <p className="text-sm font-semibold leading-6 text-gray-900">
+                                        {version.version}</p>
+                                    <p className="mt-1 truncate text-xs leading-5 text-gray-500">60,000
+                                        Downloads</p>
+                                </div>
+                            </div>
+                            <div className="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
+                                <p className="text-sm leading-6 text-gray-900">Published</p>
+                                <p className="mt-1 text-xs leading-5 text-gray-500">
+                                    <time
+                                        dateTime={version.created_at}>{version.created_at.toLocaleString('en-US', {
+                                        weekday: 'short',
+                                        year: 'numeric',
+                                        month: 'long',
+                                        day: 'numeric',
+                                        hour: '2-digit',
+                                        minute: '2-digit'
+                                    })}</time>
+                                </p>
+                            </div>
+                        </li>))}
+                </ul>
+            </TabsContent>
+        </Tabs>
+    );
+};
+
+export default ComponentVersionTabs;