updated all docs with new code gen arc

ariflogs · ariflogs · commit 9f4641bc9c3d · 2024-10-07T23:12:16.000+06:00
diff --git a/components/ComponentShowcase.tsx b/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 (
diff --git a/config/components.ts b/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",
diff --git a/content/docs/components/accordion.mdx b/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" />
diff --git a/content/docs/components/avatar.mdx b/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" />
diff --git a/content/docs/components/badge.mdx b/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" />
diff --git a/content/docs/components/card.mdx b/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" />
diff --git a/content/docs/components/input.mdx b/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" />
diff --git a/content/docs/components/textarea.mdx b/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" />
diff --git a/content/docs/components/typography.mdx b/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
diff --git a/contentlayer.config.ts b/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;
diff --git a/packages/ui/Avatars/Avatar.tsx b/packages/ui/Avatars/Avatar.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export function Avatar() {
   return (
     <div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
diff --git a/preview/components/accordion-style-default.tsx b/preview/components/accordion-style-default.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function AccordionStyleDefault() {
   return (
     <div className="space-y-4 mx-auto">
@@ -34,6 +32,4 @@ export default function AccordionStyleDefault() {
       </details>
     </div>
   );
-}
-
-AccordionStyleDefault.displayName = "AccordionStyleDefault";
+}
diff --git a/preview/components/avatar-style-circle.tsx b/preview/components/avatar-style-circle.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function AvatarStyleCircle() {
   return (
     <div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
diff --git a/preview/components/badge-style-default.tsx b/preview/components/badge-style-default.tsx
@@ -1,8 +1,7 @@
-import { Badge } from "@/packages/ui";
-import React from "react";
-
 export default function BadgeStyleDefault() {
   return (
-    <Badge>Default Badge</Badge>
+    <span className="px-2.5 py-1 text-sm font-semibold border-2 border-black text-black">
+      Default Badge
+    </span>
   );
 }
diff --git a/preview/components/badge-style-error.tsx b/preview/components/badge-style-error.tsx
@@ -1,8 +1,7 @@
-import { Badge } from "@/packages/ui";
-import React from "react";
-
 export default function BadgeStyleError() {
   return (
-    <Badge variant="error">Error</Badge>
+    <span className="px-2.5 py-1 text-sm font-semibold border-2 border-red-600 text-red-600">
+      Error
+    </span>
   );
 }
diff --git a/preview/components/badge-style-filled.tsx b/preview/components/badge-style-filled.tsx
@@ -1,8 +1,7 @@
-import { Badge } from "@/packages/ui";
-import React from "react";
-
-export default function BadgeStyleSuccess() {
+export default function BadgeStyleFilled() {
   return (
-    <Badge variant="filled">Filled</Badge>
+    <span className="px-2.5 py-1 text-sm font-semibold border-2 bg-primary-400 border-black text-black">
+      Filled
+    </span>
   );
 }
diff --git a/preview/components/badge-style-success.tsx b/preview/components/badge-style-success.tsx
@@ -1,8 +1,5 @@
-import { Badge } from "@/packages/ui";
-import React from "react";
-
 export default function BadgeStyleSuccess() {
   return (
-    <Badge variant="success">Success</Badge>
+    <span className="px-2.5 py-1 text-sm font-semibold border-2 border-green-600 text-green-600">Success</span>
   );
 }
diff --git a/preview/components/button-style-default.tsx b/preview/components/button-style-default.tsx
@@ -1,10 +1,7 @@
-import { Button } from "@/packages/ui";
-import React from "react";
-
 export default function ButtonStyleDefault() {
   return (
-    <Button>
+    <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>
+    </button>
   );
 }
diff --git a/preview/components/card-style-default.tsx b/preview/components/card-style-default.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function BasicCard() {
   return (
     <div className="inline-block border-2 border-black p-4 shadow-md cursor-pointer transition-all hover:shadow-xs">
diff --git a/preview/components/input-style-default.tsx b/preview/components/input-style-default.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function InputStyleDefault() {
   return (
     <input
@@ -8,4 +6,4 @@ export default function InputStyleDefault() {
       className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs"
     />
   );
-};
+}
diff --git a/preview/components/textarea-style-default.tsx b/preview/components/textarea-style-default.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function TextareaStyleDefault() {
   return (
     <textarea
diff --git a/preview/components/typography-headings.tsx b/preview/components/typography-headings.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function TypographyHeadings() {
   return (
     <div className="space-y-4">
diff --git a/preview/components/typography-p.tsx b/preview/components/typography-p.tsx
@@ -1,8 +1,6 @@
-import React from "react";
-
 export default function TypographyParagraph() {
   return (
-    <p className="font-sans">
+    <p className="font-sans text-base">
       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat eos,
       doloremque inventore nesciunt quo sequi veniam impedit alias libero
       dolorem tempore quia esse fugit fuga iste aliquam expedita molestias

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,7 @@ interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`export function ComponentShowcase({ name, children }: IComponentShowcase) {`
`10`		`- const { preview: Preview, codeHtml } = componentConfig.registry[name];`
	`10`	`+ const { preview: Preview } = componentConfig.registry[name];`
`11`	`11`	`const Code = React.Children.toArray(children)[0];`
`12`	`12`
`13`	`13`	`return (`