Skip to content

Commit f66e8d9

Browse files
ariflogsariflogs
committed
code gen working ✅
1 parent 6c69712 commit f66e8d9

File tree

8 files changed

+143
-16
lines changed

8 files changed

+143
-16
lines changed

‎components/ComponentShowcase.tsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
// import { Code } from "bright";
21
import { componentConfig } from "@/config";
3-
import dynamic from "next/dynamic";
42
import { H5 } from "@/packages/ui";
5-
import React, { HTMLAttributes, Suspense } from "react";
6-
const Code = dynamic(() => import("bright").then(mod => mod.Code));
3+
import React, { HTMLAttributes } from "react";
74

85
interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
96
name: keyof typeof componentConfig.registry;
107
}
118

12-
export function ComponentShowcase({ name }: IComponentShowcase) {
9+
export function ComponentShowcase({ name, children }: IComponentShowcase) {
1310
const { preview: Preview, codeHtml } = componentConfig.registry[name];
11+
const Code = React.Children.toArray(children)[0];
12+
1413
return (
1514
<div className="space-y-6">
1615
<div>
@@ -22,11 +21,7 @@ export function ComponentShowcase({ name }: IComponentShowcase) {
2221

2322
<div>
2423
<H5>Code</H5>
25-
<div className="relative rounded overflow-auto">
26-
<Suspense fallback={<div>Loading...</div>}>
27-
<Code lang="html" theme="dracula-soft">{codeHtml}</Code>
28-
</Suspense>
29-
</div>
24+
<div className="relative rounded overflow-auto">{Code}</div>
3025
</div>
3126
</div>
3227
);

‎config/components.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export const componentConfig = {
44
registry: {
55
"accordion-style-default": {
66
name: "accordion-style-default",
7+
filePath: "preview/components/accordion-style-default.tsx",
78
preview: lazy(
89
() => import("@/preview/components/accordion-style-default")
910
),
@@ -41,6 +42,7 @@ export const componentConfig = {
4142
},
4243
"avatar-style-circle": {
4344
name: "avatar-style-circle",
45+
filePath: "preview/components/avatar-style-circle.tsx",
4446
preview: lazy(() => import("@/preview/components/avatar-style-circle")),
4547
codeHtml: `<div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
4648
<img
@@ -52,41 +54,47 @@ export const componentConfig = {
5254
},
5355
"badge-style-default": {
5456
name: "badge-style-default",
57+
filePath: "preview/components/badge-style-default.tsx",
5558
preview: lazy(() => import("@/preview/components/badge-style-default")),
5659
codeHtml: `<span className="border-black text-black border-2 px-2 py-1 text-sm">
5760
Badge
5861
</span>`,
5962
},
6063
"badge-style-success": {
6164
name: "badge-style-default",
65+
filePath: "preview/components/badge-style-success.tsx",
6266
preview: lazy(() => import("@/preview/components/badge-style-success")),
6367
codeHtml: `<span className="border-2 border-green-600 text-green-600 px-2.5 py-1 text-sm">
6468
Badge
6569
</span>`,
6670
},
6771
"badge-style-error": {
6872
name: "badge-style-default",
73+
filePath: "preview/components/badge-style-error.tsx",
6974
preview: lazy(() => import("@/preview/components/badge-style-error")),
7075
codeHtml: `<span className="border-2 border-red-600 text-red-600 px-2.5 py-1 text-sm">
7176
Badge
7277
</span>`,
7378
},
7479
"badge-style-filled": {
7580
name: "badge-style-default",
81+
filePath: "preview/components/badge-style-filled.tsx",
7682
preview: lazy(() => import("@/preview/components/badge-style-filled")),
7783
codeHtml: `<span className="border-2 bg-primary-400 border-black text-black px-2.5 py-1 text-sm">
7884
Badge
7985
</span>`,
8086
},
8187
"button-style-default": {
8288
name: "button-style-default",
89+
filePath: "preview/components/button-style-default.tsx",
8390
preview: lazy(() => import("@/preview/components/button-style-default")),
8491
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">
8592
Click Me!
8693
</button>`,
8794
},
8895
"card-style-default": {
8996
name: "card-style-default",
97+
filePath: "preview/components/card-style-default.tsx",
9098
preview: lazy(() => import("@/preview/components/card-style-default")),
9199
codeHtml: `<div className="inline-block border-2 border-black p-4 shadow-md cursor-pointer transition-all hover:shadow-xs">
92100
<h4 className="font-head text-2xl font-medium mb-1">This is card Title</h4>
@@ -95,6 +103,7 @@ export const componentConfig = {
95103
},
96104
"input-style-default": {
97105
name: "input-style-default",
106+
filePath: "preview/components/input-style-default.tsx",
98107
preview: lazy(() => import("@/preview/components/input-style-default")),
99108
codeHtml: `<input
100109
type="text"
@@ -104,6 +113,7 @@ export const componentConfig = {
104113
},
105114
"textarea-style-default": {
106115
name: "textarea-style-default",
116+
filePath: "preview/components/textarea-style-default.tsx",
107117
preview: lazy(
108118
() => import("@/preview/components/textarea-style-default")
109119
),
@@ -115,6 +125,7 @@ export const componentConfig = {
115125
},
116126
"typography-headings": {
117127
name: "typography-headings",
128+
filePath: "preview/components/typography-headings.tsx",
118129
preview: lazy(() => import("@/preview/components/typography-headings")),
119130
codeHtml: `<div className="space-y-4">
120131
<h1 className="font-head text-5xl lg:text-6xl font-bold">This is H1</h1>
@@ -127,6 +138,7 @@ export const componentConfig = {
127138
},
128139
"typography-p": {
129140
name: "typography-p",
141+
filePath: "preview/components/typography-p.tsx",
130142
preview: lazy(() => import("@/preview/components/typography-p")),
131143
codeHtml: `<p className="font-sans">
132144
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat eos,

‎contentlayer.config.ts

Lines changed: 61 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
// contentlayer.config.ts
1+
import path from "path";
2+
import fs from "fs";
23
import { defineDocumentType, makeSource } from "contentlayer/source-files";
4+
import { visit } from "unist-util-visit";
5+
import { u } from "unist-builder"
6+
import { UnistNode } from "./types/unist";
7+
import { componentConfig } from "./config";
38

49
export const Doc = defineDocumentType(() => ({
510
name: "Doc",
@@ -18,4 +23,58 @@ export const Doc = defineDocumentType(() => ({
1823
},
1924
}));
2025

21-
export default makeSource({ contentDirPath: "./content", documentTypes: [Doc] });
26+
export default makeSource({
27+
mdx: {
28+
rehypePlugins: [
29+
() => (tree) => {
30+
visit(tree, (node: UnistNode) => {
31+
if (node.name === "ComponentShowcase" && node.attributes) {
32+
console.log(JSON.stringify(node));
33+
const name = getNodeAttributeByName(node, "name")
34+
?.value as keyof typeof componentConfig.registry;
35+
36+
if (!name) {
37+
return null;
38+
}
39+
40+
const component = componentConfig.registry[name];
41+
const filePath = path.join(process.cwd(), component.filePath);
42+
const source = fs.readFileSync(filePath, "utf8");
43+
44+
node.children?.push(
45+
u("element", {
46+
tagName: "pre",
47+
properties: {
48+
__src__: component.filePath,
49+
},
50+
children: [
51+
u("element", {
52+
tagName: "code",
53+
properties: {
54+
className: ["language-tsx"],
55+
},
56+
children: [
57+
{
58+
type: "text",
59+
value: source,
60+
},
61+
],
62+
}),
63+
],
64+
})
65+
);
66+
67+
console.log(JSON.stringify(node));
68+
}
69+
});
70+
return null;
71+
},
72+
],
73+
},
74+
contentDirPath: "./content",
75+
documentTypes: [Doc],
76+
});
77+
78+
const getNodeAttributeByName = (node: UnistNode, name: string) => {
79+
return node.attributes?.find((attribute) => attribute.name === name);
80+
};

‎package.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@
1919
"next-contentlayer": "^0.3.4",
2020
"react": "^18",
2121
"react-dom": "^18",
22-
"tailwind-merge": "^2.5.3"
22+
"tailwind-merge": "^2.5.3",
23+
"unist-builder": "^4.0.0",
24+
"unist-util-visit": "^5.0.0"
2325
},
2426
"devDependencies": {
2527
"@types/node": "^20",

‎packages/ui/Buttons/Button.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,3 +42,5 @@ export function Button({
4242
</button>
4343
);
4444
}
45+
46+
Button.displayName = "Button";

‎pnpm-lock.yaml

Lines changed: 42 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎preview/components/button-style-default.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
import { Button } from "@/packages/ui";
12
import React from "react";
23

34
export default function ButtonStyleDefault() {
45
return (
5-
<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">
6+
<Button>
67
Click Me!
7-
</button>
8+
</Button>
89
);
9-
}
10+
}

‎types/unist.d.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Node } from "unist-builder"
2+
3+
export interface UnistNode extends Node {
4+
type: string
5+
name?: string
6+
tagName?: string
7+
value?: string
8+
attributes?: {
9+
name: string
10+
value: unknown
11+
type?: string
12+
}[]
13+
children?: UnistNode[]
14+
}

0 commit comments

Comments
 (0)