docs: enhance component-preview

adrian-ub · Nov 9, 2024 · 228bf01 · 228bf01
1 parent b63116f
commit 228bf01
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 93 deletions.
diff --git a/docs/src/__registry__/examples.ts b/docs/src/__registry__/examples.ts
diff --git a/docs/src/components/component-preview/ComponentPreview.astro b/docs/src/components/component-preview/ComponentPreview.astro
@@ -1,7 +1,4 @@
 ---
-import { existsSync, readFileSync } from 'node:fs'
-import path from 'node:path'
-import process from 'node:process'
 import { cn } from '@/lib/utils'
 import { styles } from '@/registry/registry-styles'
 
@@ -17,35 +14,10 @@ export interface Props {
   name: string
   class?: string
   align?: string
+  codeNewYork: string
+  codeDefault: string
 }
-const { name, class: className, align = 'center', ...rest } = Astro.props
-
-const sortedStyleByNewYork = styles.toSorted((a, b) => (a.name === 'new-york' ? -1 : b.name === 'new-york' ? 1 : 0))
-
-const components = await Promise.all(
-  [...sortedStyleByNewYork].map(async (style) => {
-    const filename = path.join(process.cwd(), 'src', 'registry', style.name, 'example', `${name}.ts`)
-    let pathCode: string
-    let code: string | null
-
-    if (existsSync(filename)) {
-      pathCode = `../registry/${style.name}/example/${name}.ts`
-      code = readFileSync(`${filename}`)
-        .toString()
-        .replace(/@\/registry\/.*\/ui/g, '@/components/ui')
-        .replace(/export\s+default\s+(?:\S.*)?\s*/, '')
-    } else {
-      pathCode = ''
-      code = null
-    }
-
-    return {
-      style,
-      code,
-      pathCode,
-    }
-  }),
-)
+const { name, class: className, align = 'center', codeDefault, codeNewYork, ...rest } = Astro.props
 ---
 
 <div x-data class={cn('group relative my-4 flex flex-col space-y-2', className)} {...rest}>
@@ -69,35 +41,34 @@ const components = await Promise.all(
       <div class="flex items-center justify-between p-4">
         <StyleSwitcher />
         <div class="flex items-center gap-2">
-          {
-            components.map(({ style, code }) => (
-              <template x-if={`$store.style == '${style.name}'`}>
-                {code && (
-                  <CopyButton
-                    variant="outline"
-                    value={code}
-                    class="h-7 w-7 text-foreground opacity-100 hover:bg-muted hover:text-foreground [&_svg]:h-3.5 [&_svg]:w-3.5"
-                  />
-                )}
-              </template>
-            ))
-          }
+          <template x-if={`$store.style == 'new-york'`}>
+            {
+              codeNewYork && (
+                <CopyButton
+                  variant="outline"
+                  value={codeNewYork}
+                  class="h-7 w-7 text-foreground opacity-100 hover:bg-muted hover:text-foreground [&_svg]:h-3.5 [&_svg]:w-3.5"
+                />
+              )
+            }
+          </template>
+          <template x-if={`$store.style == 'default'`}>
+            {
+              codeDefault && (
+                <CopyButton
+                  variant="outline"
+                  value={codeDefault}
+                  class="h-7 w-7 text-foreground opacity-100 hover:bg-muted hover:text-foreground [&_svg]:h-3.5 [&_svg]:w-3.5"
+                />
+              )
+            }
+          </template>
         </div>
       </div>
       {
-        components.map(({ style, pathCode }) => (
-          <div x-show={`$store.style === '${style.name}'`}>
-            {pathCode ? (
-              <ComponentPeviewComponent client:visible {...{ nameExample: name, styleName: style.name, align }} />
-            ) : (
-              <div class="flex min-h-[350px] w-full justify-center p-10 items-center">
-                <p class="text-sm text-muted-foreground">
-                  Component{' '}
-                  <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">{name}</code>
-                  {' not found in registry.'}
-                </p>
-              </div>
-            )}
+        styles.map(({ name: styleName }) => (
+          <div x-show={`$store.style === '${styleName}'`}>
+            <ComponentPeviewComponent client:visible {...{ nameExample: name, styleName: styleName, align }} />
           </div>
         ))
       }

diff --git a/docs/src/components/component-preview/component-preview.ts b/docs/src/components/component-preview/component-preview.ts
@@ -1,28 +1,38 @@
-import { examples } from '@/__registry__/examples'
+import { Index } from '@/__registry__'
 import { cn } from '@/lib/utils'
 import { AsyncPipe, NgComponentOutlet } from '@angular/common'
-
 import { Component, computed, input } from '@angular/core'
 
+import type { Style } from '@/registry/registry-styles'
+
 @Component({
   standalone: true,
   selector: 'component-preview',
   imports: [NgComponentOutlet, AsyncPipe],
   template: `
   @let componentRender = this.component() | async;
     <div [class]="computedClass()">
-      @if(!componentRender || !componentRender.default) {
-        <div>Loading...</div>
-      } @else {
+      @if(this.existComponent && (!componentRender || !componentRender.default)) {
+          <div>Loading...</div>
+      }
+      @else if (!this.existComponent) {
+        <div>
+          <p class="text-sm text-muted-foreground">
+            Component <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">{{nameExample()}}</code> not found in registry.
+          </p>
+        </div>
+      }
+      @else {
         <ng-container *ngComponentOutlet="componentRender.default"  />
       }
     </div>
     `,
 })
 export class ComponentPeviewComponent {
-  styleName = input<string>()
+  styleName = input<Style['name']>()
   nameExample = input<string>()
   align = input<'center' | 'start' | 'end'>('center')
+  existComponent = true
 
   computedClass = computed(() => cn('preview [&>div]:flex [&>div]:min-h-[350px] [&>div]:w-full [&>div]:justify-center [&>div]:p-10', {
     '[&>div]:items-center': this.align() === 'center',
@@ -31,9 +41,16 @@ export class ComponentPeviewComponent {
   }))
 
   component = computed(async () => {
-    if (!this.styleName() || !this.nameExample())
+    if (!this.styleName() || !this.nameExample()) {
       return null
+    }
 
-    return await examples[this.styleName()!][this.nameExample()!].component()
+    try {
+      return await Index[this.styleName()!][this.nameExample()!].component()
+    }
+    catch {
+      this.existComponent = false
+      return null
+    }
   })
 }
diff --git a/docs/src/plugins/rehype-component.ts b/docs/src/plugins/rehype-component.ts
@@ -8,6 +8,21 @@ import { Index } from '../__registry__'
 import { styles } from '../registry/registry-styles'
 import type { UnistNode, UnistTree } from '../../types/unist'
 
+function toCamelCase(str: string): string {
+  return str
+    .split(/[-_]/)
+    .map((word, index) => {
+      if (index === 0) {
+        return word
+      }
+      return (
+        word.charAt(0).toUpperCase()
+        + word.slice(1)
+      )
+    })
+    .join('')
+}
+
 export function rehypeComponent() {
   return async (tree: UnistTree) => {
     visit(tree, (node: UnistNode) => {
@@ -55,6 +70,7 @@ export function rehypeComponent() {
               '@/components/',
             )
             source = source.replaceAll('export default', 'export')
+            source = source.replace(/selector: '\[([^\]]+)\]'/, 'selector: \'$1\'')
 
             // Add code as children so that rehype can take over at build time.
             node.children?.push(
@@ -117,6 +133,13 @@ export function rehypeComponent() {
               '@/components/',
             )
             source = source.replaceAll('export default', 'export')
+            source = source.replace(/selector: '\[([^\]]+)\]'/, 'selector: \'$1\'')
+
+            node.attributes?.push({
+              type: 'mdxJsxAttribute',
+              name: toCamelCase(`code-${style.name}`),
+              value: source,
+            })
 
             // Add code as children so that rehype can take over at build time.
             node.children?.push(