updated all docs with new code gen arc

Author: ariflogs

components/ComponentShowcase.tsx

@@ -7,7 +7,7 @@ interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
 }
 
 export function ComponentShowcase({ name, children }: IComponentShowcase) {
-  const { preview: Preview, codeHtml } = componentConfig.registry[name];
+  const { preview: Preview } = componentConfig.registry[name];
   const Code = React.Children.toArray(children)[0];
 
   return (

config/components.ts

@@ -88,9 +88,6 @@ export const componentConfig = {
       name: "button-style-default",
       filePath: "preview/components/button-style-default.tsx",
       preview: lazy(() => import("@/preview/components/button-style-default")),
-      codeHtml: `<button className="bg-primary-400 text-black px-6 py-2 text-base font-head border-2 border-black shadow-md hover:shadow-xs hover:bg-primary-500 transition-all">
-    Click Me!
-</button>`,
     },
     "card-style-default": {
       name: "card-style-default",

content/docs/components/accordion.mdx

@@ -1,7 +1,7 @@
 ---
 title: Default Accordion
 description: This collapsible component let's your users read only the content they care about. 😌
-lastUpdated: 30 Sep, 2024
+lastUpdated: 7 Oct, 2024
 ---
 
 <ComponentShowcase name="accordion-style-default" />

content/docs/components/avatar.mdx

@@ -1,7 +1,7 @@
 ---
 title: Default Avatar
 description: Default rounded avatar that can show your users profile picture. ✨
-lastUpdated: 30 Sep, 2024
+lastUpdated: 7 Oct, 2024
 ---
 
 <ComponentShowcase name="avatar-style-circle" />

content/docs/components/badge.mdx

@@ -1,31 +1,35 @@
 ---
 title: Badge
 description: The component that looks like a button but isn't clickable!
-lastUpdated: 4 Oct, 2024
+lastUpdated: 7 Oct, 2024
 ---
 
 ## Default
-<hr/>
-<br/>
+
+<hr />
+<br />
 <ComponentShowcase name="badge-style-default" />
-<br/>
-<br/>
+<br />
+<br />
 
 ## Success
-<hr/>
-<br/>
+
+<hr />
+<br />
 <ComponentShowcase name="badge-style-success" />
-<br/>
-<br/>
+<br />
+<br />
 
 ## Error
-<hr/>
-<br/>
+
+<hr />
+<br />
 <ComponentShowcase name="badge-style-error" />
-<br/>
-<br/>
+<br />
+<br />
 
 ## Filled
+
 <hr />
 <br />
 <ComponentShowcase name="badge-style-filled" />

content/docs/components/card.mdx

@@ -1,7 +1,7 @@
 ---
 title: Default Card
 description: A customizable card component to visualize your content. 📝
-lastUpdated: 30 Sep, 2024
+lastUpdated: 7 Oct, 2024
 ---
 
-<ComponentShowcase name="card-style-default" />
+<ComponentShowcase name="card-style-default" />

content/docs/components/input.mdx

@@ -1,7 +1,7 @@
 ---
 title: Default Input
 description: This pretty input makes your users want to type stuff! ⌨️
-lastUpdated: 30 Sep, 2024
+lastUpdated: 07 Oct, 2024
 ---
 
 <ComponentShowcase name="input-style-default" />

content/docs/components/textarea.mdx

@@ -1,7 +1,7 @@
 ---
 title: Default Textarea
 description: This pretty input makes your users want to type lots of stuff! ⌨️ ⌨️
-lastUpdated: 30 Sep, 2024
+lastUpdated: 07 Oct, 2024
 ---
 
 <ComponentShowcase name="textarea-style-default" />

content/docs/components/typography.mdx

@@ -1,7 +1,7 @@
 ---
 title: Typography
 description: Show your texts in different styles. 💅
-lastUpdated: 30 Sep, 2024
+lastUpdated: 7 Oct, 2024
 ---
 
 ## Headings

contentlayer.config.ts

@@ -2,7 +2,7 @@ import path from "path";
 import fs from "fs";
 import { defineDocumentType, makeSource } from "contentlayer/source-files";
 import { visit } from "unist-util-visit";
-import { u } from "unist-builder"
+import { u } from "unist-builder";
 import { UnistNode } from "./types/unist";
 import { componentConfig } from "./config";
 
@@ -29,7 +29,6 @@ export default makeSource({
       () => (tree) => {
         visit(tree, (node: UnistNode) => {
           if (node.name === "ComponentShowcase" && node.attributes) {
-            console.log(JSON.stringify(node));
             const name = getNodeAttributeByName(node, "name")
               ?.value as keyof typeof componentConfig.registry;
 
@@ -40,6 +39,15 @@ export default makeSource({
             const component = componentConfig.registry[name];
             const filePath = path.join(process.cwd(), component.filePath);
             const source = fs.readFileSync(filePath, "utf8");
+            const cleanedJSX = source
+              .replace(/export default function \w+\(\) \{\n?/g, "") // removes function wrapper
+              .replace(/return\s*\(\s*/g, "") // removes return statement
+              .replace(/\n\s*\);?\s*\}\s*$/g, "") // Removes closing parenthesis, semicolon, and closing brace at the end of the function
+              .replace(/\n\s*\n/g, "\n") // removes extra new lines
+              .trim()
+              .split("\n")
+              .map((line) => line.replace(/^ {4}/gm, ""))
+              .join("\n");
 
             node.children?.push(
               u("element", {
@@ -56,15 +64,13 @@ export default makeSource({
                     children: [
                       {
                         type: "text",
-                        value: source,
+                        value: cleanedJSX,
                       },
                     ],
                   }),
                 ],
               })
             );
-
-            console.log(JSON.stringify(node));
           }
         });
         return null;