Merge pull request #11 from designbycode/theme-uploader

add theme installer

Author: claudemyburgh

app/Concerns/HasTheme.php

@@ -41,7 +41,7 @@ trait HasTheme
     public static function fromCss(
         string $css,
         string $name,
-        string $type = 'registry:app'
+        string $type = 'registry:theme'
     ): static {
         static::assertValidType($type);
 
@@ -82,7 +82,7 @@ public static function fromRegistry(array $data): static
         $instance = new static;
 
         $instance->name = $data['name'];
-        $instance->type = 'registry:app';
+        $instance->type = $data['type'] ?? 'registry:theme';
         $instance->title = $data['title'] ?? null;
         $instance->description = $data['description'] ?? null;
         $instance->author = $data['author'] ?? null;
@@ -141,7 +141,7 @@ public function toRegistry(): array
         $registry = [
             '$schema' => 'https://ui.shadcn.com/schema/registry-item.json',
             'name' => $this->name,
-            'type' => 'registry:app',
+            'type' => 'registry:theme',
             'title' => $this->title,
             'description' => $this->description,
             'author' => $this->author,
@@ -273,9 +273,9 @@ public function toCss(): string
 
     public static function assertValidType(string $type): void
     {
-        if (! in_array($type, ['registry:app'], true)) {
+        if (! in_array($type, ['registry:theme'], true)) {
             throw new InvalidArgumentException(
-                "Invalid registry type \"{$type}\". Allowed: registry:app"
+                "Invalid registry type \"{$type}\". Allowed: registry:theme"
             );
         }
     }
@@ -342,7 +342,7 @@ public function isStyle(): bool
 
     public function isTheme(): bool
     {
-        return $this->type === 'registry:app';
+        return $this->type === 'registry:theme';
     }
 
     public function isComponent(): bool

app/Http/Controllers/RegistriesController.php

@@ -15,7 +15,7 @@ public function show(string $type, string $name): JsonResponse
         $model = match ($type) {
             'fonts' => Font::class,
             'animate-css' => Animate::class,
-            'themes', 'app' => Theme::class,
+            'themes', 'theme' => Theme::class,
             default => Registry::class,
         };
 

app/Http/Controllers/ThemesController.php

@@ -6,6 +6,7 @@
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Cache;
 use Illuminate\Support\Facades\Http;
+use Illuminate\Support\Str;
 use Inertia\Inertia;
 
 class ThemesController extends Controller
@@ -29,11 +30,88 @@ public function store(Request $request)
 
         $data = $response->json();
 
-        if (empty($data) || ! isset($data['name'])) {
+        if (empty($data) || ! is_array($data)) {
             return back()->withErrors(['url' => 'Invalid registry JSON format.']);
         }
 
-        // Check if theme already exists
+        $errors = [];
+
+        if (! is_string($data['name'] ?? null) || $data['name'] === '') {
+            $errors[] = 'The registry must contain a non-empty "name" field.';
+        } elseif (! preg_match('/^[a-z0-9\-]+$/i', $data['name'])) {
+            $errors[] = 'The theme name must only contain letters, numbers, and hyphens.';
+        }
+
+        if (isset($data['cssVars'])) {
+            if (! is_array($data['cssVars'])) {
+                $errors[] = '"cssVars" must be an object.';
+            } else {
+                if (isset($data['cssVars']['light']) && ! is_array($data['cssVars']['light'])) {
+                    $errors[] = '"cssVars.light" must be an object.';
+                }
+
+                if (isset($data['cssVars']['dark']) && ! is_array($data['cssVars']['dark'])) {
+                    $errors[] = '"cssVars.dark" must be an object.';
+                }
+            }
+        }
+
+        if (isset($data['files'])) {
+            if (! is_array($data['files'])) {
+                $errors[] = '"files" must be an array.';
+            } else {
+                $fileErrors = Theme::validateFiles($data['files']);
+                foreach ($fileErrors as $error) {
+                    $errors[] = $error;
+                }
+            }
+        }
+
+        if (isset($data['font'])) {
+            if (! is_array($data['font'])) {
+                $errors[] = '"font" must be an object.';
+            } else {
+                foreach (['family', 'provider', 'import', 'variable', 'selector', 'dependency'] as $field) {
+                    if (isset($data['font'][$field]) && ! is_string($data['font'][$field])) {
+                        $errors[] = "\"font.{$field}\" must be a string.";
+                    }
+                }
+
+                foreach (['weight', 'subsets'] as $field) {
+                    if (isset($data['font'][$field]) && ! is_array($data['font'][$field])) {
+                        $errors[] = "\"font.{$field}\" must be an array.";
+                    }
+                }
+            }
+        }
+
+        if (isset($data['categories'])) {
+            if (! is_array($data['categories'])) {
+                $errors[] = '"categories" must be an array.';
+            } else {
+                foreach ($data['categories'] as $i => $category) {
+                    if (! is_string($category)) {
+                        $errors[] = "\"categories.{$i}\" must be a string.";
+                    }
+                }
+            }
+        }
+
+        if (! empty($errors)) {
+            return back()->withErrors(['url' => implode(' ', $errors)]);
+        }
+
+        $data['name'] = Str::kebab($data['name']);
+        $data['type'] = 'registry:theme';
+
+        if (! ($data['author'] ?? null)) {
+            $host = Str::of(parse_url($request->url, PHP_URL_HOST))
+                ->replaceFirst('www.', '')
+                ->before('.')
+                ->toString();
+            $data['author'] = $host;
+        }
+
         if (Theme::where('name', $data['name'])->exists()) {
             return back()->withErrors(['url' => "A theme named [{$data['name']}] already exists."]);
         }

app/Models/Theme.php

@@ -3,13 +3,15 @@
 namespace App\Models;
 
 use App\Concerns\HasTheme;
+use App\Observers\ThemeObserver;
 use Illuminate\Database\Eloquent\Attributes\Fillable;
+use Illuminate\Database\Eloquent\Attributes\ObservedBy;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\SoftDeletes;
 
 #[Fillable([
-    'name', 'title', 'description', 'author',
+    'name', 'type', 'title', 'description', 'author',
     'dependencies', 'devDependencies', 'registryDependencies',
     'files',
     'css', 'css_base', 'tailwind',
@@ -21,6 +23,7 @@
     'extends',
     'style', 'icon_library', 'base_color', 'theme',
 ])]
+#[ObservedBy(ThemeObserver::class)]
 class Theme extends Model
 {
     use HasTheme, SoftDeletes;

app/Observers/ThemeObserver.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Observers;
+
+use App\Models\Theme;
+use Illuminate\Support\Str;
+
+class ThemeObserver
+{
+    public function creating(Theme $theme): void
+    {
+        if (! $theme->title) {
+            $theme->title = Str::headline($theme->name);
+        }
+    }
+}

database/migrations/2026_05_08_174618_create_themes_table.php

@@ -17,8 +17,8 @@ public function up(): void
             $table->string('name')->unique();
             $table->string('title')->nullable();
             $table->text('description')->nullable();
-            $table->string('author')->nullable();
-
+            $table->string('author')->default('designbycode')->nullable();
+            $table->string('type')->nullable()->default('registry:theme');
             $table->json('dependencies')->nullable();
             $table->json('devDependencies')->nullable();
             $table->json('registryDependencies')->nullable();
@@ -50,43 +50,14 @@ public function up(): void
             $table->string('style')->nullable();
             $table->string('icon_library')->nullable();
             $table->string('base_color')->nullable();
-            $table->json('app')->nullable();
+            $table->json('theme')->nullable();
 
             $table->timestamps();
             $table->softDeletes();
 
             $table->index('created_at');
         });
 
-        DB::statement('
-            INSERT INTO themes (
-                name, title, description, author,
-                dependencies, devDependencies, registryDependencies,
-                files, css, css_base,
-                vars_theme, vars_light, vars_dark,
-                font_family, font_mono, font_serif,
-                font_provider, font_import, font_variable,
-                font_weight, font_subsets, font_selector, font_dependency,
-                tailwind, meta, docs, categories,
-                extends, style, icon_library, base_color, app,
-                created_at, updated_at
-            )
-            SELECT
-                name, title, description, author,
-                dependencies, devDependencies, registryDependencies,
-                files, css, css_base,
-                vars_theme, vars_light, vars_dark,
-                font_family, font_mono, font_serif,
-                font_provider, font_import, font_variable,
-                font_weight, font_subsets, font_selector, font_dependency,
-                tailwind, meta, docs, categories,
-                extends, style, icon_library, base_color, app,
-                created_at, updated_at
-            FROM registries
-            WHERE type = \'registry:app\'
-        ');
-
-        DB::table('registries')->where('type', 'registry:app')->delete();
     }
 
     public function down(): void

resources/js/pages/themes/create.tsx

@@ -34,7 +34,6 @@ export default function ThemeCreate() {
                 <Heading
                     title="Create New Theme"
                     description="Import a shadcn/ui theme registry JSON to create a new theme in the database."
-                    className="mb-8"
                 />
 
                 <Card>
@@ -48,7 +47,9 @@ export default function ThemeCreate() {
                         </CardHeader>
                         <CardContent className="space-y-4">
                             <div className="space-y-2">
-                                <Label htmlFor="url">Registry URL</Label>
+                                <Label className={`inline-flex`} htmlFor="url">
+                                    Registry URL
+                                </Label>
                                 <Input
                                     id="url"
                                     type="url"
@@ -67,7 +68,7 @@ export default function ThemeCreate() {
                                 )}
                             </div>
                         </CardContent>
-                        <CardFooter>
+                        <CardFooter className={`pt-4`}>
                             <Button type="submit" disabled={processing}>
                                 {processing && (
                                     <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -79,7 +80,9 @@ export default function ThemeCreate() {
                 </Card>
 
                 <div className="mt-8 rounded-lg bg-muted p-4">
-                    <h3 className="mb-2 text-sm font-semibold">Example URLs:</h3>
+                    <h3 className="mb-2 text-sm font-semibold">
+                        Example URLs:
+                    </h3>
                     <ul className="list-inside list-disc space-y-1 text-sm text-muted-foreground">
                         <li>https://tweakcn.com/r/themes/neo-brutalism.json</li>
                         <li>https://tweakcn.com/r/themes/modern-dark.json</li>

resources/js/pages/themes/show.tsx

@@ -28,6 +28,7 @@ import MainEditorBlock from '@/layouts/main/theme/main-editor-block';
 
 import MainLayout from '@/layouts/main-layout';
 import type { Registry } from '@/types/registry';
+import ThemeLayout from '@/layouts/theme-layout';
 
 interface ThemesShowProps {
     theme: Registry;
@@ -256,10 +257,7 @@ function ThemesShow({ theme }: ThemesShowProps) {
                         </div>
                         <div className="flex flex-wrap items-center gap-2">
                             {theme.author && (
-                                <Badge
-                                    variant="outline"
-                                    className="text-[10px]"
-                                >
+                                <Badge variant="outline" className="text-sm">
                                     by {theme.author}
                                 </Badge>
                             )}
@@ -310,7 +308,7 @@ function ThemesShow({ theme }: ThemesShowProps) {
                         className="space-y-12 outline-none"
                     >
                         <div className={appearance === 'dark' ? 'dark' : ''}>
-                            <div className="rounded-xl transition-colors duration-300">
+                            <div className="-mx-6 rounded-xl bg-black/5 p-6 transition-colors duration-300 dark:bg-white/5">
                                 <section className="space-y-12">
                                     <div>
                                         <h2 className="text-2xl font-bold tracking-tight">
@@ -626,6 +624,6 @@ ${Object.entries(theme.vars_dark || {})
     );
 }
 
-ThemesShow.layout = MainLayout;
+ThemesShow.layout = ThemeLayout;
 
 export default ThemesShow;