@dyrected/admin 2.0.0 → 2.4.0

package/src/pages/setup/setup-prompt.tsx

@@ -9,7 +9,7 @@ import {
 } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Button } from "../../components/ui/button";
-import { generateAIPrompt, type SetupPromptConfig } from "@dyrected/core";
+import { generateAIPrompt, generateFreshSetupPrompt, type SetupPromptConfig } from "@dyrected/sdk";
 
 export type { SetupPromptConfig };
 
@@ -19,9 +19,12 @@ export interface SetupPromptProps {
 
 export function SetupPromptUI({ config }: SetupPromptProps) {
   const [copied, setCopied] = useState<string | null>(null);
+  const [isFresh, setIsFresh] = useState(false);
   const [activeTab, setActiveTab] = useState<"next" | "nuxt" | "react" | "vue">("next");
 
-  const promptText = generateAIPrompt(activeTab, config);
+  const promptText = isFresh 
+    ? generateFreshSetupPrompt(activeTab, config)
+    : generateAIPrompt(activeTab, config);
 
   const copyToClipboard = (text: string, id: string) => {
     navigator.clipboard.writeText(text);
@@ -30,52 +33,54 @@ export function SetupPromptUI({ config }: SetupPromptProps) {
   };
 
   return (
-    <div className="max-w-4xl mx-auto space-y-8 py-8 animate-in slide-in-from-bottom-4 duration-700">
-      <div className="text-center space-y-4">
-        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-xs font-bold uppercase tracking-wider mb-2">
-          <Sparkles className="h-3 w-3" />
+    <div className="dy-max-w-4xl dy-mx-auto dy-space-y-8 dy-py-8 dy-animate-in dy-slide-in-from-bottom-4 dy-duration-700">
+      <div className="dy-text-center dy-space-y-4">
+        <div className="dy-inline-flex dy-items-center dy-gap-2 dy-px-3 dy-py-1 dy-rounded-full dy-bg-primary/10 dy-text-primary dy-text-xs dy-font-bold dy-uppercase dy-tracking-wider dy-mb-2">
+          <Sparkles className="dy-h-3 dy-w-3" />
           Integration Guide
         </div>
-        <h1 className="text-2xl font-semibold tracking-tight lg:text-5xl text-foreground">
+        <h1 className="dy-text-2xl dy-font-semibold dy-tracking-tight lg:dy-text-5xl dy-text-foreground">
           Connect Your Application
         </h1>
-        <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
-          Use the AI prompt below to set up your frontend automatically, or follow the steps manually.
+        <p className="dy-text-lg dy-text-muted-foreground dy-max-w-2xl dy-mx-auto">
+          {isFresh 
+            ? "Get a conversational walkthrough to set up Dyrected from scratch."
+            : "Use the AI prompt below to set up your frontend automatically, or follow the steps manually."}
         </p>
       </div>
 
-      <div className="grid gap-6">
+      <div className="dy-grid dy-gap-6">
         {/* Site Credentials */}
-        <section className="rounded-2xl border bg-card overflow-hidden shadow-xl">
-          <div className="p-4 border-b bg-muted/30">
-            <h3 className="text-lg font-semibold flex items-center gap-2">
-              <ShieldCheck className="h-5 w-5 text-primary" />
+        <section className="dy-rounded-2xl dy-border dy-bg-card dy-overflow-hidden dy-shadow-xl">
+          <div className="dy-p-4 dy-border-b dy-bg-muted/30">
+            <h3 className="dy-text-lg dy-font-semibold dy-flex dy-items-center dy-gap-2">
+              <ShieldCheck className="dy-h-5 dy-w-5 dy-text-primary" />
               Site Credentials
             </h3>
           </div>
-          <div className="p-4">
-            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="dy-p-4">
+            <div className="dy-grid dy-gap-4 sm:dy-grid-cols-2 lg:dy-grid-cols-3">
               {[
                 { label: "Site ID", value: config.siteId, id: "siteId" },
                 { label: "API Key", value: config.apiKey, id: "apiKey" },
                 { label: "Base URL", value: config.baseUrl, id: "baseUrl" },
               ].map((item) => (
-                <div key={item.id} className="space-y-2">
-                  <label className="text-xs font-bold text-muted-foreground uppercase">
+                <div key={item.id} className="dy-space-y-2">
+                  <label className="dy-text-xs dy-font-bold dy-text-muted-foreground dy-uppercase">
                     {item.label}
                   </label>
-                  <div className="relative group">
-                    <div className="p-3 pr-10 rounded-lg bg-muted text-sm font-mono truncate border border-transparent group-hover:border-primary/20 transition-all">
+                  <div className="dy-relative dy-group">
+                    <div className="dy-p-3 dy-pr-10 dy-rounded-lg dy-bg-muted dy-text-sm dy-font-mono dy-truncate dy-border dy-border-transparent dy-group-hover:dy-border-primary/20 dy-transition-all">
                       {item.value}
                     </div>
                     <button
                       onClick={() => copyToClipboard(item.value || "", item.id)}
-                      className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-md hover:bg-background transition-colors text-muted-foreground"
+                      className="dy-absolute dy-right-2 dy-top-1/2 dy--translate-y-1/2 dy-p-1.5 dy-rounded-md hover:dy-bg-background dy-transition-colors dy-text-muted-foreground"
                     >
                       {copied === item.id ? (
-                        <Check className="h-4 w-4 text-green-500" />
+                        <Check className="dy-h-4 dy-w-4 dy-text-green-500" />
                       ) : (
-                        <Copy className="h-4 w-4" />
+                        <Copy className="dy-h-4 dy-w-4" />
                       )}
                     </button>
                   </div>
@@ -86,64 +91,88 @@ export function SetupPromptUI({ config }: SetupPromptProps) {
         </section>
 
         {/* AI Prompt */}
-        <section className="rounded-2xl border bg-white overflow-hidden shadow-xl ring-1 ring-primary/20">
-          <div className="p-6 border-b bg-primary/5 flex items-center justify-between gap-4 flex-wrap">
-            <div className="space-y-3">
-              <h3 className="text-lg font-semibold flex items-center gap-2">
-                <Sparkles className="h-5 w-5 text-primary animate-pulse" />
+        <section className="dy-rounded-2xl dy-border dy-bg-white dy-overflow-hidden dy-shadow-xl dy-ring-1 dy-ring-primary/20">
+          <div className="dy-p-6 dy-border-b dy-bg-primary/5 dy-flex dy-items-center dy-justify-between dy-gap-4 dy-flex-wrap">
+            <div className="dy-space-y-3">
+              <h3 className="dy-text-lg dy-font-semibold dy-flex dy-items-center dy-gap-2">
+                <Sparkles className="dy-h-5 dy-w-5 dy-text-primary dy-animate-pulse" />
                 AI Integration Prompt
               </h3>
-              <div className="flex gap-2 bg-muted/50 p-1 rounded-lg w-fit">
+              <div className="dy-flex dy-gap-2 dy-bg-muted/50 dy-p-1 dy-rounded-lg dy-w-fit">
                 {(["next", "nuxt", "react", "vue"] as const).map((tab) => (
                   <button
                     key={tab}
                     onClick={() => setActiveTab(tab)}
                     className={cn(
-                      "px-4 py-1.5 rounded-md text-xs font-medium transition-all capitalize",
+                      "dy-px-4 dy-py-1.5 dy-rounded-md dy-text-xs dy-font-medium dy-transition-all dy-capitalize",
                       activeTab === tab
-                        ? "bg-background text-foreground shadow-sm"
-                        : "text-muted-foreground hover:text-foreground"
+                        ? "dy-bg-background dy-text-foreground dy-shadow-sm"
+                        : "dy-text-muted-foreground hover:dy-text-foreground"
                     )}
                   >
-                    {tab === "next" ? "Next.js" : tab === "nuxt" ? "Nuxt" : tab}
+                    {tab === "next" ? "Next.js" : tab === "nuxt" ? "Nuxt.js" : tab}
                   </button>
                 ))}
               </div>
-              <p className="text-sm text-muted-foreground">
+              <div className="dy-flex dy-gap-2 dy-bg-muted/50 dy-p-1 dy-rounded-lg dy-w-fit">
+                <button
+                  onClick={() => setIsFresh(false)}
+                  className={cn(
+                    "dy-px-4 dy-py-1.5 dy-rounded-md dy-text-xs dy-font-medium dy-transition-all",
+                    !isFresh
+                      ? "dy-bg-background dy-text-foreground dy-shadow-sm"
+                      : "dy-text-muted-foreground hover:dy-text-foreground"
+                  )}
+                >
+                  Existing Project
+                </button>
+                <button
+                  onClick={() => setIsFresh(true)}
+                  className={cn(
+                    "dy-px-4 dy-py-1.5 dy-rounded-md dy-text-xs dy-font-medium dy-transition-all",
+                    isFresh
+                      ? "dy-bg-background dy-text-foreground dy-shadow-sm"
+                      : "dy-text-muted-foreground hover:dy-text-foreground"
+                  )}
+                >
+                  Fresh Installation
+                </button>
+              </div>
+              <p className="dy-text-sm dy-text-muted-foreground">
                 Copy and paste this into your AI developer to handle everything automatically
               </p>
             </div>
             <Button
               onClick={() => copyToClipboard(promptText, "ai-developer")}
-              className="relative overflow-hidden group shrink-0"
+              className="dy-relative dy-overflow-hidden dy-group dy-shrink-0"
             >
-              <div className="flex items-center gap-2">
+              <div className="dy-flex dy-items-center dy-gap-2">
                 {copied === "ai-developer" ? (
-                  <Check className="h-4 w-4" />
+                  <Check className="dy-h-4 dy-w-4" />
                 ) : (
-                  <Copy className="h-4 w-4" />
+                  <Copy className="dy-h-4 dy-w-4" />
                 )}
                 {copied === "ai-developer" ? "Copied!" : "Copy Full Prompt"}
               </div>
             </Button>
           </div>
-          <div className="p-6 bg-slate-950 text-slate-300 font-mono text-xs leading-relaxed max-h-[400px] overflow-y-auto scrollbar-thin scrollbar-thumb-white/10">
-            <pre className="whitespace-pre-wrap">{promptText}</pre>
+          <div className="dy-p-6 dy-bg-slate-950 dy-text-slate-300 dy-font-mono dy-text-xs dy-leading-relaxed dy-max-h-[400px] dy-overflow-y-auto dy-scrollbar-thin dy-scrollbar-thumb-white/10">
+            <pre className="dy-whitespace-pre-wrap">{promptText}</pre>
           </div>
         </section>
       </div>
 
-      <div className="flex justify-center gap-4 pt-4">
+      <div className="dy-flex dy-justify-center dy-gap-4 dy-pt-4">
         <Button variant="outline" asChild>
           <a
             href={`${config.baseUrl}/api/docs`}
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center gap-2"
+            className="dy-flex dy-items-center dy-gap-2"
           >
-            <Terminal className="h-4 w-4" />
+            <Terminal className="dy-h-4 dy-w-4" />
             API Documentation
-            <ExternalLink className="h-3 w-3" />
+            <ExternalLink className="dy-h-3 dy-w-3" />
           </a>
         </Button>
       </div>

package/tailwind.config.ts

@@ -2,6 +2,7 @@ import type { Config } from "tailwindcss"
 import tailwindAnimate from "tailwindcss-animate"
 
 const config: Config = {
+  prefix: 'dy-',
   darkMode: ["class"],
   content: [
     './pages/**/*.{ts,tsx}',

package/vite.config.ts

@@ -34,7 +34,6 @@ export default defineConfig({
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),
-      "@dyrected/core": path.resolve(__dirname, "../core/src"),
     },
   },
 });