added component source for showing core uis

Author: ariflogs

components/ComponentShowcase.tsx

@@ -4,11 +4,11 @@ import { TabGroup, TabList, TabPanels, TabPanel, Tab } from "@headlessui/react";
 import React, { HTMLAttributes } from "react";
 
 interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
-  name: keyof typeof componentConfig.registry;
+  name: keyof typeof componentConfig.examples;
 }
 
 export function ComponentShowcase({ name, children }: IComponentShowcase) {
-  const { preview: Preview } = componentConfig.registry[name];
+  const { preview: Preview } = componentConfig.examples[name];
   const Code = React.Children.toArray(children)[0];
 
   return (

components/ComponentSource.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
+  src: string;
+}
+
+export function ComponentSource({ children, className }: ComponentSourceProps) {
+  return (
+    <div className={cn("overflow-hidden rounded-md", className)}>
+      {children}
+    </div>
+  );
+}

components/MDX.tsx

@@ -3,6 +3,7 @@ import { useMDXComponent } from "next-contentlayer/hooks";
 import React, { HTMLAttributes } from "react";
 import { ComponentShowcase } from "./ComponentShowcase";
 import { cn } from "@/lib/utils";
+import { ComponentSource } from "./ComponentSource";
 
 const components = {
   h1: H1,
@@ -48,6 +49,7 @@ const components = {
     </code>
   ),
   ComponentShowcase,
+  ComponentSource,
 };
 
 export default function MDX({ code }: { code: string }) {

config/components.ts

@@ -1,7 +1,13 @@
 import { lazy } from "react";
 
 export const componentConfig = {
-  registry: {
+  core: {
+    avatar: {
+      name: "avatar",
+      filePath: "packages/ui/Avatars/Avatar.tsx",
+    },
+  },
+  examples: {
     "accordion-style-default": {
       name: "accordion-style-default",
       filePath: "preview/components/accordion-style-default.tsx",

content/docs/components/avatar.mdx

@@ -12,8 +12,21 @@ lastUpdated: 12 Oct, 2024
 
 #### 1. Install depenencies:
 
-`npm install @radix-ui/react-avatar`
+```sh
+npm install @radix-ui/react-avatar
+```
 
 <br />
 
-#### 2. Add the Component:
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="avatar" />
+
+<br />
+<br />
+
+## Examples
+
+### Circle
+
+<ComponentShowcase name="avatar-style-circle" />

contentlayer.config.ts

@@ -31,15 +31,51 @@ export default makeSource({
     rehypePlugins: [
       () => (tree) => {
         visit(tree, (node: UnistNode) => {
+          if (node.name === "ComponentSource" && node.attributes) {
+            const name = getNodeAttributeByName(node, "name")
+              ?.value as keyof typeof componentConfig.core;
+
+            if (!name) {
+              return null;
+            }
+
+            const component = componentConfig.core[name];
+            const filePath = path.join(process.cwd(), component.filePath);
+            const source = fs.readFileSync(filePath, "utf8");
+
+            node.children?.push(
+              u("element", {
+                tagName: "pre",
+                properties: {
+                  __src__: source,
+                },
+                children: [
+                  u("element", {
+                    tagName: "code",
+                    properties: {
+                      className: ["language-tsx"],
+                    },
+                    children: [
+                      {
+                        type: "text",
+                        value: source,
+                      },
+                    ],
+                  }),
+                ],
+              })
+            );
+          }
+
           if (node.name === "ComponentShowcase" && node.attributes) {
             const name = getNodeAttributeByName(node, "name")
-              ?.value as keyof typeof componentConfig.registry;
+              ?.value as keyof typeof componentConfig.examples;
 
             if (!name) {
               return null;
             }
 
-            const component = componentConfig.registry[name];
+            const component = componentConfig.examples[name];
             const filePath = path.join(process.cwd(), component.filePath);
             const source = fs.readFileSync(filePath, "utf8");
             // const cleanedJSX = source

preview/components/avatar-style-circle.tsx

@@ -2,9 +2,23 @@ import { Avatar } from "@/packages/ui";
 
 export default function AvatarStyleCircle() {
   return (
-    <Avatar>
-      <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
-      <Avatar.Fallback>AH</Avatar.Fallback>
-    </Avatar>
+    <div className="flex items-center space-x-4">
+      <Avatar className="h-10 w-10">
+        <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+        <Avatar.Fallback>AH</Avatar.Fallback>
+      </Avatar>
+      <Avatar>
+        <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+        <Avatar.Fallback>AH</Avatar.Fallback>
+      </Avatar>
+      <Avatar className="h-16 w-16">
+        <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+        <Avatar.Fallback>AH</Avatar.Fallback>
+      </Avatar>
+      <Avatar className="h-20 w-20">
+        <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+        <Avatar.Fallback>AH</Avatar.Fallback>
+      </Avatar>
+    </div>
   );
 }