Code gen for docks

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
-  "cSpell.words": ["clsx"],
+  "cSpell.words": [
+    "clsx",
+    "rehype"
+  ],
   "tailwindCSS.experimental.classRegex": [
     ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]

components/ComponentShowcase.tsx

@@ -1,16 +1,15 @@
-// import { Code } from "bright";
 import { componentConfig } from "@/config";
-import dynamic from "next/dynamic";
 import { H5 } from "@/packages/ui";
-import React, { HTMLAttributes, Suspense } from "react";
-const Code = dynamic(() => import("bright").then(mod => mod.Code));
+import React, { HTMLAttributes } from "react";
 
 interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
   name: keyof typeof componentConfig.registry;
 }
 
-export function ComponentShowcase({ name }: IComponentShowcase) {
-  const { preview: Preview, codeHtml } = componentConfig.registry[name];
+export function ComponentShowcase({ name, children }: IComponentShowcase) {
+  const { preview: Preview } = componentConfig.registry[name];
+  const Code = React.Children.toArray(children)[0];
+
   return (
     <div className="space-y-6">
       <div>
@@ -22,11 +21,7 @@ export function ComponentShowcase({ name }: IComponentShowcase) {
 
       <div>
         <H5>Code</H5>
-        <div className="relative rounded  overflow-auto">
-          <Suspense fallback={<div>Loading...</div>}>
-            <Code lang="html" theme="dracula-soft">{codeHtml}</Code>
-          </Suspense>
-        </div>
+        <div className="relative rounded overflow-auto">{Code}</div>
       </div>
     </div>
   );

components/MDX.tsx

@@ -2,8 +2,7 @@ import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import React, { HTMLAttributes } from "react";
 import { ComponentShowcase } from "./ComponentShowcase";
-import dynamic from "next/dynamic";
-const Code = dynamic(() => import("bright").then(mod => mod.Code));
+import { cn } from "@/lib/utils";
 
 const components = {
   h1: H1,
@@ -14,8 +13,37 @@ const components = {
   h4: H4,
   h5: H5,
   h6: H6,
-  pre: Code,
-  ComponentShowcase
+  pre: ({
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLElement>) => (
+    <pre
+      className={cn(
+        "overflow-x-auto rounded bg-[#282A36] mt-3 mb-6 p-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </pre>
+  ),
+  code: ({
+    className,
+    children,
+    ...props
+  }: React.HTMLAttributes<HTMLElement>) => (
+    <code
+      className={cn(
+        "relative rounded bg-[#282A36] py-1 px-2 text-primary-500 text-sm",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </code>
+  ),
+  ComponentShowcase,
 };
 
 export default function MDX({ code }: { code: string }) {

config/components.ts

@@ -4,6 +4,7 @@ export const componentConfig = {
   registry: {
     "accordion-style-default": {
       name: "accordion-style-default",
+      filePath: "preview/components/accordion-style-default.tsx",
       preview: lazy(
         () => import("@/preview/components/accordion-style-default")
       ),
@@ -41,6 +42,7 @@ export const componentConfig = {
     },
     "avatar-style-circle": {
       name: "avatar-style-circle",
+      filePath: "preview/components/avatar-style-circle.tsx",
       preview: lazy(() => import("@/preview/components/avatar-style-circle")),
       codeHtml: `<div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
     <img
@@ -52,41 +54,44 @@ export const componentConfig = {
     },
     "badge-style-default": {
       name: "badge-style-default",
+      filePath: "preview/components/badge-style-default.tsx",
       preview: lazy(() => import("@/preview/components/badge-style-default")),
       codeHtml: `<span className="border-black text-black border-2 px-2 py-1 text-sm">
     Badge
 </span>`,
     },
     "badge-style-success": {
       name: "badge-style-default",
+      filePath: "preview/components/badge-style-success.tsx",
       preview: lazy(() => import("@/preview/components/badge-style-success")),
       codeHtml: `<span className="border-2 border-green-600 text-green-600 px-2.5 py-1 text-sm">
     Badge
 </span>`,
     },
     "badge-style-error": {
       name: "badge-style-default",
+      filePath: "preview/components/badge-style-error.tsx",
       preview: lazy(() => import("@/preview/components/badge-style-error")),
       codeHtml: `<span className="border-2 border-red-600 text-red-600 px-2.5 py-1 text-sm">
     Badge
 </span>`,
     },
     "badge-style-filled": {
       name: "badge-style-default",
+      filePath: "preview/components/badge-style-filled.tsx",
       preview: lazy(() => import("@/preview/components/badge-style-filled")),
       codeHtml: `<span className="border-2 bg-primary-400 border-black text-black px-2.5 py-1 text-sm">
     Badge
 </span>`,
     },
     "button-style-default": {
       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",
+      filePath: "preview/components/card-style-default.tsx",
       preview: lazy(() => import("@/preview/components/card-style-default")),
       codeHtml: `<div className="inline-block border-2 border-black p-4 shadow-md cursor-pointer transition-all hover:shadow-xs">
     <h4 className="font-head text-2xl font-medium mb-1">This is card Title</h4>
@@ -95,6 +100,7 @@ export const componentConfig = {
     },
     "input-style-default": {
       name: "input-style-default",
+      filePath: "preview/components/input-style-default.tsx",
       preview: lazy(() => import("@/preview/components/input-style-default")),
       codeHtml: `<input
     type="text"
@@ -104,6 +110,7 @@ export const componentConfig = {
     },
     "textarea-style-default": {
       name: "textarea-style-default",
+      filePath: "preview/components/textarea-style-default.tsx",
       preview: lazy(
         () => import("@/preview/components/textarea-style-default")
       ),
@@ -115,6 +122,7 @@ export const componentConfig = {
     },
     "typography-headings": {
       name: "typography-headings",
+      filePath: "preview/components/typography-headings.tsx",
       preview: lazy(() => import("@/preview/components/typography-headings")),
       codeHtml: `<div className="space-y-4">
   <h1 className="font-head text-5xl lg:text-6xl font-bold">This is H1</h1>
@@ -127,6 +135,7 @@ export const componentConfig = {
     },
     "typography-p": {
       name: "typography-p",
+      filePath: "preview/components/typography-p.tsx",
       preview: lazy(() => import("@/preview/components/typography-p")),
       codeHtml: `<p className="font-sans">
   Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat eos,

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

content/docs/index.mdx

@@ -1,22 +1,29 @@
 ---
 title: Getting Started
 description: This guide will help you get started with RetroUI, a retro styled UI library based on Tailwind CSS.
-lastUpdated: 29 Sep, 2024
+lastUpdated: 08 Oct, 2024
 ---
 
 ### 1. Add the fonts
-We are useing `Archivo Black` for headings and `Share Tech` for everything else.
+
+<br />
+
+We are using `Archivo Black` for headings and `Share Tech` for everything else.
 
 Installation form Google Fonts:
-```
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Share+Tech&display=swap" rel="stylesheet">    
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Share+Tech&display=swap"
+  rel="stylesheet"
+/>
 ```
 
 Save the fonts in `global.css`:
 
-```
+```css
 :root {
   --font-head: "Archivo Black", sans-serif;
   --font-sans: "Share Tech", sans-serif;
@@ -27,7 +34,7 @@ Save the fonts in `global.css`:
 
 ### 2. Add the theme to your tailwind.config.js file.
 
-```
+```ts
 import type { Config } from "tailwindcss";
 
 const config = {
@@ -38,8 +45,8 @@ const config = {
         sans: ["var(--font-sans)"],
       },
       boxShadow: {
-        "xs": "1px 1px 0 0 #000",
-        "md": "3px 3px 0 0 #000",
+        xs: "1px 1px 0 0 #000",
+        md: "3px 3px 0 0 #000",
         "3xl": "10px 10px 0 0 #000",
       },
       colors: {
@@ -63,5 +70,4 @@ export default config;
 ```
 
 <br />
-
-### 3. Now start copy-pasting the components!
+### 3. Now start copy-pasting the components!