Skip to content

Commit 6857122

Browse files
ariflogsariflogs
authored
Merge pull request #12 from ariflogs/code-gen
Code gen for docks
2 parents 6c69712 + 9faa187 commit 6857122

30 files changed

+593
-120
lines changed

‎.vscode/settings.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
{
2-
"cSpell.words": ["clsx"],
2+
"cSpell.words": [
3+
"clsx",
4+
"rehype"
5+
],
36
"tailwindCSS.experimental.classRegex": [
47
["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
58
["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]

‎components/ComponentShowcase.tsx‎

Lines changed: 6 additions & 11 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) {
13-
const { preview: Preview, codeHtml } = componentConfig.registry[name];
9+
export function ComponentShowcase({ name, children }: IComponentShowcase) {
10+
const { preview: Preview } = 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
);

‎components/MDX.tsx‎

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui";
22
import { useMDXComponent } from "next-contentlayer/hooks";
33
import React, { HTMLAttributes } from "react";
44
import { ComponentShowcase } from "./ComponentShowcase";
5-
import dynamic from "next/dynamic";
6-
const Code = dynamic(() => import("bright").then(mod => mod.Code));
5+
import { cn } from "@/lib/utils";
76

87
const components = {
98
h1: H1,
@@ -14,8 +13,37 @@ const components = {
1413
h4: H4,
1514
h5: H5,
1615
h6: H6,
17-
pre: Code,
18-
ComponentShowcase
16+
pre: ({
17+
className,
18+
children,
19+
...props
20+
}: React.HTMLAttributes<HTMLElement>) => (
21+
<pre
22+
className={cn(
23+
"overflow-x-auto rounded bg-[#282A36] mt-3 mb-6 p-4",
24+
className
25+
)}
26+
{...props}
27+
>
28+
{children}
29+
</pre>
30+
),
31+
code: ({
32+
className,
33+
children,
34+
...props
35+
}: React.HTMLAttributes<HTMLElement>) => (
36+
<code
37+
className={cn(
38+
"relative rounded bg-[#282A36] py-1 px-2 text-primary-500 text-sm",
39+
className
40+
)}
41+
{...props}
42+
>
43+
{children}
44+
</code>
45+
),
46+
ComponentShowcase,
1947
};
2048

2149
export default function MDX({ code }: { code: string }) {

‎config/components.ts‎

Lines changed: 12 additions & 3 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,44 @@ 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")),
84-
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">
85-
Click Me!
86-
</button>`,
8791
},
8892
"card-style-default": {
8993
name: "card-style-default",
94+
filePath: "preview/components/card-style-default.tsx",
9095
preview: lazy(() => import("@/preview/components/card-style-default")),
9196
codeHtml: `<div className="inline-block border-2 border-black p-4 shadow-md cursor-pointer transition-all hover:shadow-xs">
9297
<h4 className="font-head text-2xl font-medium mb-1">This is card Title</h4>
@@ -95,6 +100,7 @@ export const componentConfig = {
95100
},
96101
"input-style-default": {
97102
name: "input-style-default",
103+
filePath: "preview/components/input-style-default.tsx",
98104
preview: lazy(() => import("@/preview/components/input-style-default")),
99105
codeHtml: `<input
100106
type="text"
@@ -104,6 +110,7 @@ export const componentConfig = {
104110
},
105111
"textarea-style-default": {
106112
name: "textarea-style-default",
113+
filePath: "preview/components/textarea-style-default.tsx",
107114
preview: lazy(
108115
() => import("@/preview/components/textarea-style-default")
109116
),
@@ -115,6 +122,7 @@ export const componentConfig = {
115122
},
116123
"typography-headings": {
117124
name: "typography-headings",
125+
filePath: "preview/components/typography-headings.tsx",
118126
preview: lazy(() => import("@/preview/components/typography-headings")),
119127
codeHtml: `<div className="space-y-4">
120128
<h1 className="font-head text-5xl lg:text-6xl font-bold">This is H1</h1>
@@ -127,6 +135,7 @@ export const componentConfig = {
127135
},
128136
"typography-p": {
129137
name: "typography-p",
138+
filePath: "preview/components/typography-p.tsx",
130139
preview: lazy(() => import("@/preview/components/typography-p")),
131140
codeHtml: `<p className="font-sans">
132141
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat eos,

‎content/docs/components/accordion.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Default Accordion
33
description: This collapsible component let's your users read only the content they care about. 😌
4-
lastUpdated: 30 Sep, 2024
4+
lastUpdated: 7 Oct, 2024
55
---
66

77
<ComponentShowcase name="accordion-style-default" />

‎content/docs/components/avatar.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Default Avatar
33
description: Default rounded avatar that can show your users profile picture. ✨
4-
lastUpdated: 30 Sep, 2024
4+
lastUpdated: 7 Oct, 2024
55
---
66

77
<ComponentShowcase name="avatar-style-circle" />

‎content/docs/components/badge.mdx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,35 @@
11
---
22
title: Badge
33
description: The component that looks like a button but isn't clickable!
4-
lastUpdated: 4 Oct, 2024
4+
lastUpdated: 7 Oct, 2024
55
---
66

77
## Default
8-
<hr/>
9-
<br/>
8+
9+
<hr />
10+
<br />
1011
<ComponentShowcase name="badge-style-default" />
11-
<br/>
12-
<br/>
12+
<br />
13+
<br />
1314

1415
## Success
15-
<hr/>
16-
<br/>
16+
17+
<hr />
18+
<br />
1719
<ComponentShowcase name="badge-style-success" />
18-
<br/>
19-
<br/>
20+
<br />
21+
<br />
2022

2123
## Error
22-
<hr/>
23-
<br/>
24+
25+
<hr />
26+
<br />
2427
<ComponentShowcase name="badge-style-error" />
25-
<br/>
26-
<br/>
28+
<br />
29+
<br />
2730

2831
## Filled
32+
2933
<hr />
3034
<br />
3135
<ComponentShowcase name="badge-style-filled" />

‎content/docs/components/card.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Default Card
33
description: A customizable card component to visualize your content. 📝
4-
lastUpdated: 30 Sep, 2024
4+
lastUpdated: 7 Oct, 2024
55
---
66

7-
<ComponentShowcase name="card-style-default" />
7+
<ComponentShowcase name="card-style-default" />

‎content/docs/components/input.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Default Input
33
description: This pretty input makes your users want to type stuff! ⌨️
4-
lastUpdated: 30 Sep, 2024
4+
lastUpdated: 07 Oct, 2024
55
---
66

77
<ComponentShowcase name="input-style-default" />

‎content/docs/components/textarea.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Default Textarea
33
description: This pretty input makes your users want to type lots of stuff! ⌨️ ⌨️
4-
lastUpdated: 30 Sep, 2024
4+
lastUpdated: 07 Oct, 2024
55
---
66

77
<ComponentShowcase name="textarea-style-default" />

0 commit comments

Comments
 (0)