feat: add component preview and source

apps/www/src/components/ComponentPreview.astro

@@ -20,7 +20,9 @@ const components = await Promise.all(
       "example",
       `${name}.ts`
     );
-    const Component = (await import(/* @vite-ignore */ `${filename}`)).default;
+    const Component = (
+      await import(`../registry/${style.name}/example/${name}.ts`)
+    ).default;
     const code = readFileSync(`${filename}`)
       .toString()
       .replace(/export\s+default\s+.*;\s*/, "")
@@ -44,10 +46,11 @@ const components = await Promise.all(
         <div class="flex items-center justify-between p-4">
           <select
             class="flex items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>option]:line-clamp-1 h-7 w-[145px] text-xs [&_svg]:h-4 [&_svg]:w-4"
+            id="change-style"
             data-target={$("change-theme")}
           >
             {
-              styles.map(({ name, label }, index) => (
+              styles.map(({ name, label }) => (
                 <option value={name}>{label}</option>
               ))
             }
@@ -91,6 +94,7 @@ const components = await Promise.all(
 
   $.ready(async () => {
     $("change-theme").addEventListener("change", (event) => {
+      // @ts-expect-error
       const value = event.target.value;
       hiddeComponents();
       $(`preview-${value}`).hidden = false;

apps/www/src/components/ComponentSource.astro

@@ -0,0 +1,69 @@
+---
+import path from "path";
+import { styles } from "@/registry/styles";
+import { ui } from "@/registry/ui";
+import { readFileSync } from "fs";
+import { Code } from "@astrojs/starlight/components";
+
+export interface Props {
+  name: string;
+}
+
+const { name } = Astro.props;
+
+const componentUi = ui.find((value) => value.name === name);
+
+const allComponents = componentUi?.files.flatMap((file) => {
+  return styles.map((style) => {
+    const filename = path.join(
+      process.cwd(),
+      "src",
+      "registry",
+      style.name,
+      file
+    );
+
+    const code = readFileSync(`${filename}`)
+      .toString()
+      .replace(/export\s+default\s+.*;\s*/, "")
+      .replace(/@\/registry\/.*\/ui/g, "@/components/ui");
+
+    return {
+      style,
+      code,
+    };
+  });
+});
+---
+
+{
+  allComponents?.map(({ code, style }, index) => (
+    <div
+      data-target={$("source-" + style.name)}
+      class="w-[38rem]"
+      hidden={index !== 0}
+    >
+      <Code code={code} class="w-[38rem]" wrap={true} />
+    </div>
+  ))
+}
+<script>
+  import { styles } from "@/registry/styles";
+
+  $.ready(async () => {
+    document
+      .getElementById("change-style")
+      ?.addEventListener("change", (event) => {
+        // @ts-expect-error
+        const value = event.target.value;
+        hiddeComponents();
+        $(`source-${value}`).hidden = false;
+      });
+
+    function hiddeComponents() {
+      styles.forEach(({ name }) => {
+        $(`source-${name}`).hidden = true;
+      });
+    }
+  });
+</script>

apps/www/src/content/docs/docs/components/alert.mdx

@@ -6,21 +6,23 @@ description: Displays a callout for user attention.
 import { Tabs, TabItem, Code } from "@astrojs/starlight/components";
 import { Steps } from "@astrojs/starlight/components";
 import ComponentPreview from "@/components/ComponentPreview.astro";
+import ComponentSource from "@/components/ComponentSource.astro";
 
 <ComponentPreview name="alert-demo" />
 
 ## Installation
 
 <Tabs>
   <TabItem label="CLI">
-    ```bash
+    ```bash frame="code"
     npx shadcn-ng@latest add alert
     ```
   </TabItem>
 
   <TabItem label="Manual">
     <Steps>
         1. Copy and paste the following code into your project.
+            <ComponentSource name="alert" />
 
         2. Update the import paths to match your project setup.
     </Steps>
@@ -46,3 +48,13 @@ import {
     </div>
 </div>
 ```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="alert-demo" />
+
+### Destructive
+
+<ComponentPreview name="alert-destructive" />

apps/www/src/registry/default/example/alert-destructive.ts

@@ -0,0 +1,32 @@
+import { Component } from "@angular/core";
+import { NgIconComponent, provideIcons } from "@ng-icons/core";
+import { lucideTerminal } from "@ng-icons/lucide";
+
+import {
+  UbAlertDirective,
+  UbAlertTitleDirective,
+  UbAlertDescriptionDirective,
+} from "@/registry/default/ui/alert.directive";
+
+@Component({
+  standalone: true,
+  imports: [
+    NgIconComponent,
+    UbAlertDirective,
+    UbAlertTitleDirective,
+    UbAlertDescriptionDirective,
+  ],
+  viewProviders: [provideIcons({ lucideTerminal })],
+  template: `
+    <div ubAlert variant="destructive">
+      <ng-icon name="lucideTerminal" class="h-4 w-4" />
+      <h5 ubAlertTitle>Heads up!</h5>
+      <div ubAlertDescription>
+        You can add components and dependencies to your app using the cli.
+      </div>
+    </div>
+  `,
+})
+export class AlertDemoComponent {}
+
+export default AlertDemoComponent;

apps/www/src/registry/default/ui/alert.directive.ts

@@ -21,7 +21,7 @@ const alertVariants = cva(
 );
 
 type AlertProps = VariantProps<typeof alertVariants>;
-export type UbAlertVariant = NonNullable<AlertProps["variant"]>;
+type UbAlertVariant = NonNullable<AlertProps["variant"]>;
 
 @Directive({
   selector: "div[ubAlert]",
@@ -40,7 +40,6 @@ export class UbAlertDirective {
   );
 }
 
-const alertTitleVariants = cva("mb-1 font-medium leading-none tracking-tight");
 @Directive({
   selector: "h5[ubAlertTitle]",
   standalone: true,
@@ -52,11 +51,10 @@ export class UbAlertTitleDirective {
   readonly class = input<string>();
 
   protected computedClass = computed(() =>
-    cn(alertTitleVariants({ class: this.class() }))
+    cn("mb-1 font-medium leading-none tracking-tight", this.class())
   );
 }
 
-const alertDescriptionVariants = cva("text-sm [&_p]:leading-relaxed");
 @Directive({
   selector: "div[ubAlertDescription]",
   standalone: true,
@@ -68,6 +66,6 @@ export class UbAlertDescriptionDirective {
   readonly class = input<string>();
 
   protected computedClass = computed(() =>
-    cn(alertDescriptionVariants({ class: this.class() }))
+    cn("text-sm [&_p]:leading-relaxed", this.class())
   );
 }

apps/www/src/registry/new-york/example/alert-demo.ts

@@ -1,6 +1,6 @@
 import { Component } from "@angular/core";
 import { NgIconComponent, provideIcons } from "@ng-icons/core";
-import { lucideTerminal } from "@ng-icons/lucide";
+import { lucideRocket } from "@ng-icons/lucide";
 
 import {
   UbAlertDirective,
@@ -16,10 +16,10 @@ import {
     UbAlertTitleDirective,
     UbAlertDescriptionDirective,
   ],
-  viewProviders: [provideIcons({ lucideTerminal })],
+  viewProviders: [provideIcons({ lucideRocket })],
   template: `
     <div ubAlert>
-      <ng-icon name="lucideTerminal" class="h-4 w-4" />
+      <ng-icon name="lucideRocket" class="h-4 w-4" />
       <h5 ubAlertTitle>Heads up!</h5>
       <div ubAlertDescription>
         You can add components and dependencies to your app using the cli.

apps/www/src/registry/new-york/example/alert-destructive.ts

@@ -0,0 +1,32 @@
+import { Component } from "@angular/core";
+import { NgIconComponent, provideIcons } from "@ng-icons/core";
+import { lucideTerminal } from "@ng-icons/lucide";
+
+import {
+  UbAlertDirective,
+  UbAlertTitleDirective,
+  UbAlertDescriptionDirective,
+} from "@/registry/new-york/ui/alert.directive";
+
+@Component({
+  standalone: true,
+  imports: [
+    NgIconComponent,
+    UbAlertDirective,
+    UbAlertTitleDirective,
+    UbAlertDescriptionDirective,
+  ],
+  viewProviders: [provideIcons({ lucideTerminal })],
+  template: `
+    <div ubAlert variant="destructive">
+      <ng-icon name="lucideTerminal" class="h-4 w-4" />
+      <h5 ubAlertTitle>Heads up!</h5>
+      <div ubAlertDescription>
+        You can add components and dependencies to your app using the cli.
+      </div>
+    </div>
+  `,
+})
+export class AlertDemoComponent {}
+
+export default AlertDemoComponent;

apps/www/src/registry/new-york/ui/alert.directive.ts

@@ -21,7 +21,7 @@ const alertVariants = cva(
 );
 
 type AlertProps = VariantProps<typeof alertVariants>;
-export type UbAlertVariant = NonNullable<AlertProps["variant"]>;
+type UbAlertVariant = NonNullable<AlertProps["variant"]>;
 
 @Directive({
   selector: "div[ubAlert]",
@@ -40,7 +40,6 @@ export class UbAlertDirective {
   );
 }
 
-const alertTitleVariants = cva("mb-1 font-medium leading-none tracking-tight");
 @Directive({
   selector: "h5[ubAlertTitle]",
   standalone: true,
@@ -52,11 +51,10 @@ export class UbAlertTitleDirective {
   readonly class = input<string>();
 
   protected computedClass = computed(() =>
-    cn(alertTitleVariants({ class: this.class() }))
+    cn("mb-1 font-medium leading-none tracking-tight", this.class())
   );
 }
 
-const alertDescriptionVariants = cva("text-sm [&_p]:leading-relaxed");
 @Directive({
   selector: "div[ubAlertDescription]",
   standalone: true,
@@ -68,6 +66,6 @@ export class UbAlertDescriptionDirective {
   readonly class = input<string>();
 
   protected computedClass = computed(() =>
-    cn(alertDescriptionVariants({ class: this.class() }))
+    cn("text-sm [&_p]:leading-relaxed", this.class())
   );
 }