feat: add new component detail and preview (#30)

diconium · Feb 27, 2024 · 18f0e5e · 18f0e5e
1 parent 3a89bdb
commit 18f0e5e
Show file tree

Hide file tree

Showing 58 changed files with 2,244 additions and 925 deletions.
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;