add schema editor component and hook up add

arlyon · May 18, 2024 · ae15113 · ae15113
1 parent 838674f
commit ae15113
Show file tree

Hide file tree

Showing 13 changed files with 392 additions and 192 deletions.
diff --git a/site/app/registry/[...slug]/page.tsx b/site/app/registry/[...slug]/page.tsx
@@ -1,4 +1,5 @@
 import { type Plugin, PluginPage } from "@/components/plugin-page";
+import { getPluginData, getPlugins } from "@/lib/registry";
 import type { Metadata } from "next";
 import { NextPage } from "next";
 import { notFound, useRouter } from "next/navigation";
@@ -20,51 +21,12 @@ const Page = async ({ params }: { params: { slug: string[] } }) => {
   return <PluginPage {...pluginData} versions={versions} />;
 };
 
-/**
- * Returns versions in descending order
- *
- * @param title The title of the plugin
- * @param version The version of the plugin. If not provided, the latest version is returned
- */
-const getPluginData = async (
-  title: string,
-  version?: string,
-): Promise<Plugin> => {
-  const versions = [
-    { version: "0.1.2", date: new Date() },
-    { version: "0.1.1", date: new Date() },
-    { version: "0.1.0", date: new Date() },
-  ];
-
-  return {
-    title,
-    version:
-      versions.find((v) => v.version === version)?.version ??
-      versions[0].version,
-    versions,
-    configSchema:
-      '{"properties": {  "config": {    "properties": {      "ip": {        "description": "The ip address of the device to connect to.",        "items": [          {            "format": "uint8",            "minimum": 0.0,            "type": "integer"          },          {            "format": "uint8",            "minimum": 0.0,            "type": "integer"          },          {            "format": "uint8",            "minimum": 0.0,            "type": "integer"          },          {            "format": "uint8",            "minimum": 0.0,            "type": "integer"          }        ],        "maxItems": 4,        "minItems": 4,        "type": "array"      }    },    "required": [      "ip"    ],    "type": "object"  },  "plugin": {    "const": "[email protected]"  }},"required": [  "plugin",  "config"],"type": "object"}',
-    author: "Alex Lyon",
-    source: "https://github.com/arlyon/litehouse",
-    capabilities: ["http-client"],
-    homepage: "https://github.com/arlyon/litehouse",
-    description: "A real cool plugin!",
-    size: 60345,
-  };
-};
-
-const getPlugins = async (): Promise<
-  { title: string; versions: string[] }[]
-> => {
-  return [{ title: "tasmota", versions: ["0.1.2", "0.1.1", "0.1.0"] }];
-};
-
 export default Page;
 
 export async function generateStaticParams() {
   const results = (await getPlugins()).flatMap((page) =>
     [undefined, ...page.versions].map((version) => ({
-      slug: [page.title, version].filter((x) => x !== undefined),
+      slug: [page.title, version?.version].filter((x) => x !== undefined),
     })),
   );
   return results;
@@ -82,8 +44,6 @@ export async function generateMetadata({
     pluginData.versions.find((v) => v.version === params.slug[1]) ??
     pluginData.versions[0];
 
-  console.log(params);
-
   // if (page == null) notFound();
 
   return {

diff --git a/site/app/registry/page.tsx b/site/app/registry/page.tsx
@@ -1,19 +1,15 @@
 import { RegistryPage } from "@/components/registry-page";
+import { getPluginData, getPlugins } from "@/lib/registry";
+
+export default async function HomePage() {
+  const packages = await getPlugins();
 
-export default function HomePage() {
   return (
     <main>
       <RegistryPage
-        packages={[
-          {
-            title: "tasmota",
-            description: "A plugin for managing your tasmota-powered devices.",
-            downloads: 0,
-            version: "0.1.2",
-          },
-        ]}
+        packages={packages}
         users={0}
-        pluginCount={4}
+        pluginCount={packages.length}
         totalDownloads={0}
       />
     </main>

diff --git a/site/bun.lockb b/site/bun.lockb
diff --git a/site/components/add-button.tsx b/site/components/add-button.tsx
@@ -29,7 +29,7 @@ export const AddButton = ({
       onClick={() => remove(id)}
     >
       <MinusIcon className="mr-2 h-4 w-4" />
-      Del
+      Remove
     </Button>
   ) : (
     <Button
@@ -40,7 +40,7 @@ export const AddButton = ({
       onClick={() => add({ id, name, version, downloads })}
     >
       <PlusIcon className="mr-2 h-4 w-4" />
-      Add
+      Import
     </Button>
   );
 };

diff --git a/site/components/copy-box.tsx b/site/components/copy-box.tsx
@@ -29,21 +29,27 @@ function classNames(...classes: (string | undefined)[]) {
 export function CopyBox({
   command,
   className,
+  beforeCopy,
 }: {
   command: string;
   className?: string;
+  beforeCopy?: () => boolean;
 }) {
   return (
     <div
       className={classNames(
-        "pl-4 group flex items-center border-accent bg-secondary border gap-4 font-mono",
+        "group flex items-center border-accent bg-secondary border font-mono",
         className,
       )}
     >
-      <span className="flex-1 text-sm">{command}</span>
+      <div className="flex-1 p-3 text-sm overflow-x-scroll text-nowrap">
+        {command}
+      </div>
       <CopyButton
         onCopy={() => {
-          console.log(command);
+          let accept = beforeCopy?.();
+          if (accept === false) return;
+          navigator.clipboard.writeText(command);
         }}
       />
     </div>

diff --git a/site/components/manifest-editor.tsx b/site/components/manifest-editor.tsx
@@ -28,8 +28,6 @@ import { ManifestButton } from "./manifest-button";
 export function ManifestEditor() {
   const { items } = useManifestStore();
 
-  console.log(items);
-
   return (
     <Sheet>
       <SheetTrigger asChild>

diff --git a/site/components/plugin-page.tsx b/site/components/plugin-page.tsx
@@ -1,50 +1,8 @@
-/**
- * This code was generated by v0 by Vercel.
- * @see https://v0.dev/t/IeZF9j1Xy5j
- * Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
- */
-
-/** Add fonts into your Next.js project:
-
-import { Archivo } from 'next/font/google'
-import { Rethink_Sans } from 'next/font/google'
-
-archivo({
-  subsets: ['latin'],
-  display: 'swap',
-})
-
-rethink_sans({
-  subsets: ['latin'],
-  display: 'swap',
-})
-
-To read more about using these font, please visit the Next.js documentation:
-- App Directory: https://nextjs.org/docs/app/building-your-application/optimizing/fonts
-- Pages Directory: https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
-**/
-
 import { GithubStars as GithubBanner } from "@/components/github-stars";
-/** Add border radius CSS variable to your global CSS:
-
-:root {
-  --radius: 0rem;
-}
-**/
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { StarIcon } from "lucide-react";
+import { SchemaEditor } from "./shema-editor";
+import { SVGProps } from "react";
 import Link from "next/link";
-import type { SVGProps } from "react";
-import { Suspense } from "react";
 import { AddButton } from "./add-button";
-import { CopyBox } from "./copy-box";
 
 export type Plugin = {
   title: string;
@@ -89,8 +47,6 @@ export function PluginPage(
   },
 ) {
   const format = new Intl.DateTimeFormat("en-US");
-  const addCommand = "litehouse::bGl0ZWhvdXNl";
-
   const id = `${props.title}@${props.version}`;
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 grid-flow-col grid-rows-[auto_auto_auto_auto] md:grid-rows-[auto_auto] gap-8 py-8">
@@ -172,67 +128,7 @@ export function PluginPage(
       <h3 className="text-lg font-medium flex items-end">
         <span>Configuration</span>
       </h3>
-      <div className="space-y-6">
-        <div className="space-y-2">
-          <div className="border p-4 border-accent bg-secondary">
-            <pre className="font-mono text-sm">
-              {JSON.stringify(
-                {
-                  $schema: "./schema.json",
-                  plugins: {
-                    instance: {
-                      lat: 24.0,
-                      lon: 25.0,
-                    },
-                  },
-                  imports: [id],
-                },
-                null,
-                2,
-              )}
-            </pre>
-          </div>
-        </div>
-        <div className="border border-accent bg-secondary p-4">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Key</TableHead>
-                <TableHead>Value</TableHead>
-                <TableHead>Type</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              <TableRow>
-                <TableCell className="font-mono">apiKey</TableCell>
-                <TableCell>abc123</TableCell>
-                <TableCell className="font-mono">string</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell className="font-mono">endpoint</TableCell>
-                <TableCell>https://api.example.com</TableCell>
-                <TableCell className="font-mono">string</TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell className="font-mono">debug</TableCell>
-                <TableCell>true</TableCell>
-                <TableCell className="font-mono">boolean</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        </div>
-        <div className="flex flex-col gap-2">
-          <h3 className="text-lg font-medium">Add To Manifest</h3>
-          <p className="text-sm">
-            Run the following command in your project directory to automatically
-            insert this plugin and config into your manifest.
-          </p>
-          <CopyBox
-            className="text-sm"
-            command={`litehouse add ${addCommand}`}
-          />
-        </div>
-      </div>
+      <SchemaEditor id={id} schema={props.configSchema} />
     </div>
   );
 }

diff --git a/site/components/registry-page.tsx b/site/components/registry-page.tsx
@@ -39,19 +39,17 @@ export function RegistryPage(props: {
   packages: {
     title: string;
     description: string;
-    version: string;
+    version: { version: string; date: Date };
     downloads?: number;
   }[];
 }) {
   return (
     <div>
       <div className="font-mono text-muted-foreground my-4">
-        4 out of 4 results
+        {props.pluginCount} out of {props.pluginCount} results
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-        {props.packages?.map((p) => (
-          <Package key={p.title} {...p} />
-        ))}
+        {props.packages?.map((p) => <Package key={p.title} {...p} />)}
       </div>
     </div>
   );
@@ -60,7 +58,7 @@ export function RegistryPage(props: {
 function Package(props: {
   title: string;
   description: string;
-  version: string;
+  version: { version: string; date: Date };
   downloads?: number;
 }) {
   const formatter = new Intl.NumberFormat("en-US");
@@ -69,15 +67,15 @@ function Package(props: {
       <div className="relative bg-background border border-accent hover:border-orange-300 z-[2] has-[[data-selected=true]]:!border-green-500 dark:hover:border-orange-600 ">
         <div className="p-4">
           <h3 className="text-lg font-semibold mb-2 flex items-center justify-between">
-            <Link href="/registry/tasmota" className="hover:underline">
+            <Link href={`/registry/${props.title}`} className="hover:underline">
               {props.title}
             </Link>
           </h3>
           <p className="text-muted-foreground mb-4">{props.description}</p>
           <div className="flex items-center justify-between">
             <div className="text-sm text-muted-foreground">
               {props.version ? (
-                <span className="font-medium">v{props.version}</span>
+                <span className="font-medium">v{props.version.version}</span>
               ) : null}
               {props.downloads !== undefined && props.version ? (
                 <span className="mx-2">•</span>