From f66e8d9ca67159f041eb1d79e34ea3a035ddefad Mon Sep 17 00:00:00 2001 From: ariflogs Date: Mon, 7 Oct 2024 21:21:55 +0600 Subject: [PATCH 1/3] =?UTF-8?q?code=20gen=20working=20=E2=9C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/ComponentShowcase.tsx | 15 ++--- config/components.ts | 12 ++++ contentlayer.config.ts | 63 ++++++++++++++++++++- package.json | 4 +- packages/ui/Buttons/Button.tsx | 2 + pnpm-lock.yaml | 42 ++++++++++++++ preview/components/button-style-default.tsx | 7 ++- types/unist.d.ts | 14 +++++ 8 files changed, 143 insertions(+), 16 deletions(-) create mode 100644 types/unist.d.ts diff --git a/components/ComponentShowcase.tsx b/components/ComponentShowcase.tsx index 50be1e5..2725587 100644 --- a/components/ComponentShowcase.tsx +++ b/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 { name: keyof typeof componentConfig.registry; } -export function ComponentShowcase({ name }: IComponentShowcase) { +export function ComponentShowcase({ name, children }: IComponentShowcase) { const { preview: Preview, codeHtml } = componentConfig.registry[name]; + const Code = React.Children.toArray(children)[0]; + return (
@@ -22,11 +21,7 @@ export function ComponentShowcase({ name }: IComponentShowcase) {
Code
-
- Loading...
}> - {codeHtml} - -
+
{Code}
); diff --git a/config/components.ts b/config/components.ts index 643e993..9bfc529 100644 --- a/config/components.ts +++ b/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: `
import("@/preview/components/badge-style-default")), codeHtml: ` Badge @@ -59,6 +62,7 @@ export const componentConfig = { }, "badge-style-success": { name: "badge-style-default", + filePath: "preview/components/badge-style-success.tsx", preview: lazy(() => import("@/preview/components/badge-style-success")), codeHtml: ` Badge @@ -66,6 +70,7 @@ export const componentConfig = { }, "badge-style-error": { name: "badge-style-default", + filePath: "preview/components/badge-style-error.tsx", preview: lazy(() => import("@/preview/components/badge-style-error")), codeHtml: ` Badge @@ -73,6 +78,7 @@ export const componentConfig = { }, "badge-style-filled": { name: "badge-style-default", + filePath: "preview/components/badge-style-filled.tsx", preview: lazy(() => import("@/preview/components/badge-style-filled")), codeHtml: ` Badge @@ -80,6 +86,7 @@ export const componentConfig = { }, "button-style-default": { name: "button-style-default", + filePath: "preview/components/button-style-default.tsx", preview: lazy(() => import("@/preview/components/button-style-default")), codeHtml: ` ); } + +Button.displayName = "Button"; \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a2f0775..d21f99c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,12 @@ importers: tailwind-merge: specifier: ^2.5.3 version: 2.5.3 + unist-builder: + specifier: ^4.0.0 + version: 4.0.0 + unist-util-visit: + specifier: ^5.0.0 + version: 5.0.0 devDependencies: '@types/node': specifier: ^20 @@ -628,6 +634,9 @@ packages: '@types/unist@2.0.11': resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==} + '@types/unist@3.0.3': + resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==} + '@typescript-eslint/parser@7.2.0': resolution: {integrity: sha512-5FKsVcHTk6TafQKQbuIVkXq58Fnbkd2wDL4LB7AURN7RUOu1utVP+G8+6u3ZhEroW3DF6hyo3ZEXxgKgp4KeCg==} engines: {node: ^16.0.0 || >=18.0.0} @@ -2460,12 +2469,18 @@ packages: unified@10.1.2: resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==} + unist-builder@4.0.0: + resolution: {integrity: sha512-wmRFnH+BLpZnTKpc5L7O67Kac89s9HMrtELpnNaE6TAobq5DTZZs5YaTQfAZBA9bFPECx2uVAPO31c+GVug8mg==} + unist-util-generated@2.0.1: resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==} unist-util-is@5.2.1: resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==} + unist-util-is@6.0.0: + resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} + unist-util-position-from-estree@1.1.2: resolution: {integrity: sha512-poZa0eXpS+/XpoQwGwl79UUdea4ol2ZuCYguVaJS4qzIOMDzbqz8a3erUCOmubSZkaOuGamb3tX790iwOIROww==} @@ -2481,9 +2496,15 @@ packages: unist-util-visit-parents@5.1.3: resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==} + unist-util-visit-parents@6.0.1: + resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} + unist-util-visit@4.1.2: resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==} + unist-util-visit@5.0.0: + resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} + uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} @@ -3139,6 +3160,8 @@ snapshots: '@types/unist@2.0.11': {} + '@types/unist@3.0.3': {} + '@typescript-eslint/parser@7.2.0(eslint@8.0.0)(typescript@5.0.2)': dependencies: '@typescript-eslint/scope-manager': 7.2.0 @@ -5533,12 +5556,20 @@ snapshots: trough: 2.2.0 vfile: 5.3.7 + unist-builder@4.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-generated@2.0.1: {} unist-util-is@5.2.1: dependencies: '@types/unist': 2.0.11 + unist-util-is@6.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-position-from-estree@1.1.2: dependencies: '@types/unist': 2.0.11 @@ -5561,12 +5592,23 @@ snapshots: '@types/unist': 2.0.11 unist-util-is: 5.2.1 + unist-util-visit-parents@6.0.1: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.0 + unist-util-visit@4.1.2: dependencies: '@types/unist': 2.0.11 unist-util-is: 5.2.1 unist-util-visit-parents: 5.1.3 + unist-util-visit@5.0.0: + dependencies: + '@types/unist': 3.0.3 + unist-util-is: 6.0.0 + unist-util-visit-parents: 6.0.1 + uri-js@4.4.1: dependencies: punycode: 2.3.1 diff --git a/preview/components/button-style-default.tsx b/preview/components/button-style-default.tsx index b427ee9..a6a8198 100644 --- a/preview/components/button-style-default.tsx +++ b/preview/components/button-style-default.tsx @@ -1,9 +1,10 @@ +import { Button } from "@/packages/ui"; import React from "react"; export default function ButtonStyleDefault() { return ( - + ); -} +} \ No newline at end of file diff --git a/types/unist.d.ts b/types/unist.d.ts new file mode 100644 index 0000000..92a79c8 --- /dev/null +++ b/types/unist.d.ts @@ -0,0 +1,14 @@ +import { Node } from "unist-builder" + +export interface UnistNode extends Node { + type: string + name?: string + tagName?: string + value?: string + attributes?: { + name: string + value: unknown + type?: string + }[] + children?: UnistNode[] +} \ No newline at end of file From 9f4641bc9c3d0a22c7f50779a9fe6340e9b51e8c Mon Sep 17 00:00:00 2001 From: ariflogs Date: Mon, 7 Oct 2024 23:12:16 +0600 Subject: [PATCH 2/3] updated all docs with new code gen arc --- components/ComponentShowcase.tsx | 2 +- config/components.ts | 3 -- content/docs/components/accordion.mdx | 2 +- content/docs/components/avatar.mdx | 2 +- content/docs/components/badge.mdx | 30 +++++++++++-------- content/docs/components/card.mdx | 4 +-- content/docs/components/input.mdx | 2 +- content/docs/components/textarea.mdx | 2 +- content/docs/components/typography.mdx | 2 +- contentlayer.config.ts | 16 ++++++---- packages/ui/Avatars/Avatar.tsx | 2 -- .../components/accordion-style-default.tsx | 6 +--- preview/components/avatar-style-circle.tsx | 2 -- preview/components/badge-style-default.tsx | 7 ++--- preview/components/badge-style-error.tsx | 7 ++--- preview/components/badge-style-filled.tsx | 9 +++--- preview/components/badge-style-success.tsx | 5 +--- preview/components/button-style-default.tsx | 7 ++--- preview/components/card-style-default.tsx | 2 -- preview/components/input-style-default.tsx | 4 +-- preview/components/textarea-style-default.tsx | 2 -- preview/components/typography-headings.tsx | 2 -- preview/components/typography-p.tsx | 4 +-- 23 files changed, 52 insertions(+), 72 deletions(-) diff --git a/components/ComponentShowcase.tsx b/components/ComponentShowcase.tsx index 2725587..924baa1 100644 --- a/components/ComponentShowcase.tsx +++ b/components/ComponentShowcase.tsx @@ -7,7 +7,7 @@ interface IComponentShowcase extends HTMLAttributes { } 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 index 9bfc529..39fb01a 100644 --- 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: ``, }, "card-style-default": { name: "card-style-default", diff --git a/content/docs/components/accordion.mdx b/content/docs/components/accordion.mdx index 84e3373..c2fb0ae 100644 --- 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 --- diff --git a/content/docs/components/avatar.mdx b/content/docs/components/avatar.mdx index 812eefe..2ea8dfd 100644 --- 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 --- \ No newline at end of file diff --git a/content/docs/components/badge.mdx b/content/docs/components/badge.mdx index 7c966d5..2f0605b 100644 --- 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 -
-
+ +
+
-
-
+
+
## Success -
-
+ +
+
-
-
+
+
## Error -
-
+ +
+
-
-
+
+
## Filled +

diff --git a/content/docs/components/card.mdx b/content/docs/components/card.mdx index 57213ae..d249d59 100644 --- 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 --- - + \ No newline at end of file diff --git a/content/docs/components/input.mdx b/content/docs/components/input.mdx index 57d93e9..d7393fd 100644 --- 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 --- diff --git a/content/docs/components/textarea.mdx b/content/docs/components/textarea.mdx index e7bec12..845cf1e 100644 --- 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 --- diff --git a/content/docs/components/typography.mdx b/content/docs/components/typography.mdx index 75dff9d..995461b 100644 --- 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 index 16b08dc..03f7e7c 100644 --- 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 index 839a9cd..e7591e5 100644 --- a/packages/ui/Avatars/Avatar.tsx +++ b/packages/ui/Avatars/Avatar.tsx @@ -1,5 +1,3 @@ -import React from "react"; - export function Avatar() { return (
diff --git a/preview/components/accordion-style-default.tsx b/preview/components/accordion-style-default.tsx index 6b2fa2a..f202bf8 100644 --- 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 (
@@ -34,6 +32,4 @@ export default function AccordionStyleDefault() {
); -} - -AccordionStyleDefault.displayName = "AccordionStyleDefault"; \ No newline at end of file +} \ No newline at end of file diff --git a/preview/components/avatar-style-circle.tsx b/preview/components/avatar-style-circle.tsx index 82126ef..ede9e0b 100644 --- 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 (
diff --git a/preview/components/badge-style-default.tsx b/preview/components/badge-style-default.tsx index e00b3da..92bb7cb 100644 --- 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 ( - Default Badge + + Default Badge + ); } diff --git a/preview/components/badge-style-error.tsx b/preview/components/badge-style-error.tsx index eadd1de..b657847 100644 --- 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 ( - Error + + Error + ); } diff --git a/preview/components/badge-style-filled.tsx b/preview/components/badge-style-filled.tsx index 48d20b3..3dca83c 100644 --- 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 ( - Filled + + Filled + ); } diff --git a/preview/components/badge-style-success.tsx b/preview/components/badge-style-success.tsx index 61b499e..9ecfb08 100644 --- 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 ( - Success + Success ); } diff --git a/preview/components/button-style-default.tsx b/preview/components/button-style-default.tsx index a6a8198..c025ce6 100644 --- 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 ( - + ); } \ No newline at end of file diff --git a/preview/components/card-style-default.tsx b/preview/components/card-style-default.tsx index 21d8e24..b233d17 100644 --- 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 (
diff --git a/preview/components/input-style-default.tsx b/preview/components/input-style-default.tsx index 867e439..143b228 100644 --- 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 ( ); -}; +} diff --git a/preview/components/textarea-style-default.tsx b/preview/components/textarea-style-default.tsx index ce90b9f..1cc2c2f 100644 --- 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 (