feat: add examples to the registry and update ComponentPreview

apps/www/src/__registry__/examples.ts

@@ -0,0 +1,30 @@
+import { styles } from "@/registry/styles"
+
+export const examples: Record<string, Record<string, any>> = {};
+
+const components = import.meta.glob(`../registry/**/example/*.ts`);
+
+for (const path in components) {
+    const component = components[path];
+    const name = path.split('/')[2];
+    const componentName = path.split('/').pop()?.replace('.ts', '');
+    if (!componentName || !name) {
+        continue;
+    }
+
+    if (!examples[name]) {
+        examples[name] = {};
+    }
+
+    examples[name][componentName] = {
+        name: componentName,
+        type: "components:example",
+        registryDependencies: [name],
+        component,
+        source: "",
+        files: [path],
+        category: "undefined",
+        subcategory: "undefined",
+        chunks: []
+    };
+}

apps/www/src/components/ComponentPreview.astro

@@ -45,9 +45,7 @@ const components = await Promise.all(
       <SelectStyle syncKey={syncKey}>
         {
           components.map(({ style, path }) => (
-            <SelectStyleItem label={style.label}>
-              { path ? <ComponentPeviewComponent {path} client:load /> : <p>Not found</p> }
-            </SelectStyleItem>
+            <SelectStyleItem label={style.label}>{path ? <ComponentPeviewComponent nameExample={name} styleName={style.name} client:load /> : <p>Not found</p>}</SelectStyleItem>
           ))
         }
       </SelectStyle>

apps/www/src/components/component-preview.ts

@@ -1,17 +1,29 @@
 import { Component, computed, input } from '@angular/core';
 import { AsyncPipe, NgComponentOutlet } from '@angular/common';
 
+import { examples } from '@/__registry__/examples'
+
 @Component({
     standalone: true,
     imports: [NgComponentOutlet, AsyncPipe],
     template: `
-    <ng-container *ngComponentOutlet="component() | async"  />
+    @let componentRender = this.component() | async;
+
+    @if(!componentRender || !componentRender.default) {
+        <div>Loading...</div>
+    } @else {
+        <ng-container *ngComponentOutlet="componentRender.default"  />
+    }
     `
 })
 export class ComponentPeviewComponent {
-    path = input.required<string>();
+    styleName = input<string>();
+    nameExample = input<string>();
+    examples = examples;
+
+    component = computed(async () => {
+        if (!this.styleName() || !this.nameExample()) return null;
 
-    protected component = computed(async () => {
-        return (await import(/* @vite-ignore */ this.path())).default;
+        return await examples[this.styleName()!][this.nameExample()!].component();
     });
 }