From c010ded876160510214417de8672e2bead09e598 Mon Sep 17 00:00:00 2001 From: ariflogs Date: Mon, 30 Sep 2024 06:57:26 +0600 Subject: [PATCH 1/4] code preview option --- app/(docs)/docs/[[...slug]]/page.tsx | 17 ++-- components/ComponentShowcase.tsx | 30 +++++++ components/index.ts | 1 + config/components.ts | 85 +++++++++++++++++++ config/index.ts | 2 + content/docs/components/accordion.mdx | 9 ++ package.json | 3 +- pnpm-lock.yaml | 33 +++++++ .../components/accordion-style-default.tsx | 39 +++++++++ preview/components/avatar-style-round.tsx | 13 +++ preview/components/badge-style-default.tsx | 9 ++ preview/components/button-style-default.tsx | 9 ++ preview/components/card-style-default.tsx | 12 +++ preview/components/input-style-default.tsx | 11 +++ 14 files changed, 265 insertions(+), 8 deletions(-) create mode 100644 components/ComponentShowcase.tsx create mode 100644 components/index.ts create mode 100644 config/components.ts create mode 100644 config/index.ts create mode 100644 content/docs/components/accordion.mdx create mode 100644 preview/components/accordion-style-default.tsx create mode 100644 preview/components/avatar-style-round.tsx create mode 100644 preview/components/badge-style-default.tsx create mode 100644 preview/components/button-style-default.tsx create mode 100644 preview/components/card-style-default.tsx create mode 100644 preview/components/input-style-default.tsx diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx index d5f80ca..300d98c 100644 --- a/app/(docs)/docs/[[...slug]]/page.tsx +++ b/app/(docs)/docs/[[...slug]]/page.tsx @@ -1,11 +1,12 @@ import React from "react"; import { allDocs } from "contentlayer/generated"; import { notFound } from "next/navigation"; -import {format} from "date-fns" +import { format } from "date-fns"; import MDX from "@/components/MDX"; -import { H1, H2, H3, H4 } from "@/packages/ui"; +import { H2 } from "@/packages/ui"; -async function getDocParams(slug: string) { +function getDocParams(slug: string) { + console.log(slug); const doc = allDocs.find((doc) => doc.url === slug); if (!doc) { @@ -15,9 +16,9 @@ async function getDocParams(slug: string) { return doc; } -export default async function page({ params }: { params: { slug: string[] } }) { - const slug = params.slug?.join("/") || "/docs"; - const doc = await getDocParams(slug); +export default function page({ params }: { params: { slug: string[] } }) { + const slug = `/docs${params.slug ? `/${params.slug.join("/")}` : ""}`; + const doc = getDocParams(slug); if (!doc) { return notFound(); @@ -32,7 +33,9 @@ export default async function page({ params }: { params: { slug: string[] } }) {
-

Last Updated: {format(doc.lastUpdated, "dd MMM, YYY")}

+

+ Last Updated: {format(doc.lastUpdated, "dd MMM, yyy")} +

); } diff --git a/components/ComponentShowcase.tsx b/components/ComponentShowcase.tsx new file mode 100644 index 0000000..1badce1 --- /dev/null +++ b/components/ComponentShowcase.tsx @@ -0,0 +1,30 @@ +import { componentConfig } from "@/config"; +import { H5 } from "@/packages/ui"; +import React, { HTMLAttributes } from "react"; + +interface IComponentShowcase extends HTMLAttributes { + name: keyof typeof componentConfig.registry; +} + +export function ComponentShowcase({ name }: IComponentShowcase) { + const { preview: Preview, codeHtml } = componentConfig.registry[name]; + return ( +
+
+
Preview
+
+ +
+
+ +
+
Code
+
+ + 
{codeHtml}
+ +
+
+
+ ); +} diff --git a/components/index.ts b/components/index.ts new file mode 100644 index 0000000..a4e0cc3 --- /dev/null +++ b/components/index.ts @@ -0,0 +1 @@ +export * from "./ComponentShowcase" \ No newline at end of file diff --git a/config/components.ts b/config/components.ts new file mode 100644 index 0000000..db137d3 --- /dev/null +++ b/config/components.ts @@ -0,0 +1,85 @@ +import { lazy } from "react"; + +export const componentConfig = { + registry: { + "accordion-style-default": { + name: "accordion-style-default", + preview: lazy( + () => import("@/preview/components/accordion-style-default") + ), + codeHtml: `
+
+ + Accordion Item 1 + +
+ This is the content of the first accordion item. It is styled with + Tailwind CSS. +
+
+ +
+ + Accordion Item 2 + +
+ This is the content of the second accordion item. It has a similar + style to maintain consistency. +
+
+ +
+ + Accordion Item 3 + +
+ This is the content of the third accordion item. The details element + handles the toggle behavior. +
+
+
`, + }, + "avatar-style-round": { + name: "avatar-style-round", + preview: lazy(() => import("@/preview/components/avatar-style-round")), + codeHtml: `
+ Rounded Avatar +
`, + }, + "badge-style-default": { + name: "badge-style-default", + preview: lazy(() => import("@/preview/components/badge-style-default")), + codeHtml: ` + Badge +`, + }, + "button-style-default": { + name: "button-style-default", + preview: lazy(() => import("@/preview/components/badge-style-default")), + codeHtml: ``, + }, + "card-style-default": { + name: "card-style-default", + preview: lazy(() => import("@/preview/components/card-style-default")), + codeHtml: `
+

This is card Title

+

This is card description.

+
`, + }, + "input-style-default": { + name: "input-style-default", + preview: lazy(() => import("@/preview/components/input-style-default")), + codeHtml: ``, + }, + }, +}; diff --git a/config/index.ts b/config/index.ts new file mode 100644 index 0000000..27f492a --- /dev/null +++ b/config/index.ts @@ -0,0 +1,2 @@ +export * from "./components"; +export * from "./navigation"; diff --git a/content/docs/components/accordion.mdx b/content/docs/components/accordion.mdx new file mode 100644 index 0000000..251b717 --- /dev/null +++ b/content/docs/components/accordion.mdx @@ -0,0 +1,9 @@ +--- +title: Default Accordion +description: This collapsible component let's your users read only the content they care about. 😌 +lastUpdated: 30 Sep, 2024 +--- + +import {ComponentShowcase} from "@/components" + + \ No newline at end of file diff --git a/package.json b/package.json index e328c56..43efa59 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "next": "14.2.7", "next-contentlayer": "^0.3.4", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-element-to-jsx-string": "^15.0.0" }, "devDependencies": { "@types/node": "^20", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8992b8d..87e7969 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: react-dom: specifier: ^18 version: 18.0.0(react@18.0.0) + react-element-to-jsx-string: + specifier: ^15.0.0 + version: 15.0.0(react-dom@18.0.0(react@18.0.0))(react@18.0.0) devDependencies: '@types/node': specifier: ^20 @@ -65,6 +68,9 @@ packages: resolution: {integrity: sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==} engines: {node: '>=6.9.0'} + '@base2/pretty-print-object@1.0.1': + resolution: {integrity: sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==} + '@contentlayer/cli@0.3.4': resolution: {integrity: sha512-vNDwgLuhYNu+m70NZ3XK9kexKNguuxPXg7Yvzj3B34cEilQjjzSrcTY/i+AIQm9V7uT5GGshx9ukzPf+SmoszQ==} @@ -1517,6 +1523,10 @@ packages: resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==} engines: {node: '>=12'} + is-plain-object@5.0.0: + resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==} + engines: {node: '>=0.10.0'} + is-reference@3.0.2: resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==} @@ -2082,9 +2092,18 @@ packages: peerDependencies: react: ^18.0.0 + react-element-to-jsx-string@15.0.0: + resolution: {integrity: sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==} + peerDependencies: + react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0 + react-dom: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0 + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + react-is@18.1.0: + resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==} + react@18.0.0: resolution: {integrity: sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A==} engines: {node: '>=0.10.0'} @@ -2547,6 +2566,8 @@ snapshots: dependencies: regenerator-runtime: 0.14.1 + '@base2/pretty-print-object@1.0.1': {} + '@contentlayer/cli@0.3.4(esbuild@0.18.20)': dependencies: '@contentlayer/core': 0.3.4(esbuild@0.18.20) @@ -4273,6 +4294,8 @@ snapshots: is-plain-obj@4.1.0: {} + is-plain-object@5.0.0: {} + is-reference@3.0.2: dependencies: '@types/estree': 1.0.6 @@ -5058,8 +5081,18 @@ snapshots: react: 18.0.0 scheduler: 0.21.0 + react-element-to-jsx-string@15.0.0(react-dom@18.0.0(react@18.0.0))(react@18.0.0): + dependencies: + '@base2/pretty-print-object': 1.0.1 + is-plain-object: 5.0.0 + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + react-is: 18.1.0 + react-is@16.13.1: {} + react-is@18.1.0: {} + react@18.0.0: dependencies: loose-envify: 1.4.0 diff --git a/preview/components/accordion-style-default.tsx b/preview/components/accordion-style-default.tsx new file mode 100644 index 0000000..6b2fa2a --- /dev/null +++ b/preview/components/accordion-style-default.tsx @@ -0,0 +1,39 @@ +import React from "react"; + +export default function AccordionStyleDefault() { + return ( +
+
+ + Accordion Item 1 + +
+ This is the content of the first accordion item. It is styled with + Tailwind CSS. +
+
+ +
+ + Accordion Item 2 + +
+ This is the content of the second accordion item. It has a similar + style to maintain consistency. +
+
+ +
+ + Accordion Item 3 + +
+ This is the content of the third accordion item. The details element + handles the toggle behavior. +
+
+
+ ); +} + +AccordionStyleDefault.displayName = "AccordionStyleDefault"; \ No newline at end of file diff --git a/preview/components/avatar-style-round.tsx b/preview/components/avatar-style-round.tsx new file mode 100644 index 0000000..acd16a4 --- /dev/null +++ b/preview/components/avatar-style-round.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +export default function AvatarStyleRounded() { + return ( +
+ Rounded Avatar +
+ ); +} diff --git a/preview/components/badge-style-default.tsx b/preview/components/badge-style-default.tsx new file mode 100644 index 0000000..2da7cc0 --- /dev/null +++ b/preview/components/badge-style-default.tsx @@ -0,0 +1,9 @@ +import React from "react"; + +export default function BadgeStyleDefault() { + return ( + + Badge + + ); +} diff --git a/preview/components/button-style-default.tsx b/preview/components/button-style-default.tsx new file mode 100644 index 0000000..b427ee9 --- /dev/null +++ b/preview/components/button-style-default.tsx @@ -0,0 +1,9 @@ +import React from "react"; + +export default function ButtonStyleDefault() { + return ( + + ); +} diff --git a/preview/components/card-style-default.tsx b/preview/components/card-style-default.tsx new file mode 100644 index 0000000..21d8e24 --- /dev/null +++ b/preview/components/card-style-default.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +export default function BasicCard() { + return ( +
+

+ This is card Title +

+

This is card description.

+
+ ); +} diff --git a/preview/components/input-style-default.tsx b/preview/components/input-style-default.tsx new file mode 100644 index 0000000..867e439 --- /dev/null +++ b/preview/components/input-style-default.tsx @@ -0,0 +1,11 @@ +import React from "react"; + +export default function InputStyleDefault() { + return ( + + ); +}; From 878ee11e9695480a20121e89c67c08ef70d67395 Mon Sep 17 00:00:00 2001 From: ariflogs Date: Mon, 30 Sep 2024 07:04:44 +0600 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=93=83=20Badge,=20avatar=20&=20accord?= =?UTF-8?q?ion=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config/components.ts | 6 +++--- content/docs/components/avatar.mdx | 9 +++++++++ content/docs/components/badge.mdx | 9 +++++++++ .../{avatar-style-round.tsx => avatar-style-circle.tsx} | 2 +- 4 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 content/docs/components/avatar.mdx create mode 100644 content/docs/components/badge.mdx rename preview/components/{avatar-style-round.tsx => avatar-style-circle.tsx} (86%) diff --git a/config/components.ts b/config/components.ts index db137d3..5e2c9bf 100644 --- a/config/components.ts +++ b/config/components.ts @@ -39,9 +39,9 @@ export const componentConfig = { `, }, - "avatar-style-round": { - name: "avatar-style-round", - preview: lazy(() => import("@/preview/components/avatar-style-round")), + "avatar-style-circle": { + name: "avatar-style-circle", + preview: lazy(() => import("@/preview/components/avatar-style-circle")), codeHtml: `
\ No newline at end of file diff --git a/content/docs/components/badge.mdx b/content/docs/components/badge.mdx new file mode 100644 index 0000000..6b48632 --- /dev/null +++ b/content/docs/components/badge.mdx @@ -0,0 +1,9 @@ +--- +title: Default Badge +description: The component that looks like a button that's not clickable! +lastUpdated: 30 Sep, 2024 +--- + +import {ComponentShowcase} from "@/components" + + \ No newline at end of file diff --git a/preview/components/avatar-style-round.tsx b/preview/components/avatar-style-circle.tsx similarity index 86% rename from preview/components/avatar-style-round.tsx rename to preview/components/avatar-style-circle.tsx index acd16a4..82126ef 100644 --- a/preview/components/avatar-style-round.tsx +++ b/preview/components/avatar-style-circle.tsx @@ -1,6 +1,6 @@ import React from "react"; -export default function AvatarStyleRounded() { +export default function AvatarStyleCircle() { return (
Date: Mon, 30 Sep 2024 16:38:11 +0600 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=93=83=20Card,=20Input=20&=20Textarea?= =?UTF-8?q?=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CONTRIBUTING.md | 2 ++ components/ComponentShowcase.tsx | 6 +++--- config/components.ts | 11 ++++++++++- content/docs/components/button.mdx | 9 +++++++++ content/docs/components/card.mdx | 9 +++++++++ content/docs/components/input.mdx | 9 +++++++++ content/docs/components/textarea.mdx | 9 +++++++++ content/docs/components/typography.mdx | 0 preview/components/textarea-style-default.tsx | 11 +++++++++++ 9 files changed, 62 insertions(+), 4 deletions(-) create mode 100644 content/docs/components/button.mdx create mode 100644 content/docs/components/card.mdx create mode 100644 content/docs/components/input.mdx create mode 100644 content/docs/components/textarea.mdx create mode 100644 content/docs/components/typography.mdx create mode 100644 preview/components/textarea-style-default.tsx diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 8cc1b8d..ab4bbe6 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,3 +1,5 @@ +> ⚠️ This guide is old and may not be still relevant! I'll update this soon. 🙏 + # Contributing to RetroUI Thank you for your interest in contributing to RetroUI 🙏. I hope this guide to help you get started. diff --git a/components/ComponentShowcase.tsx b/components/ComponentShowcase.tsx index 1badce1..db18342 100644 --- a/components/ComponentShowcase.tsx +++ b/components/ComponentShowcase.tsx @@ -9,17 +9,17 @@ interface IComponentShowcase extends HTMLAttributes { export function ComponentShowcase({ name }: IComponentShowcase) { const { preview: Preview, codeHtml } = componentConfig.registry[name]; return ( -
+
Preview
-
+
Code
-
+ 
{codeHtml}
 diff --git a/config/components.ts b/config/components.ts index 5e2c9bf..1806989 100644 --- a/config/components.ts +++ b/config/components.ts @@ -59,7 +59,7 @@ export const componentConfig = { }, "button-style-default": { name: "button-style-default", - preview: lazy(() => import("@/preview/components/badge-style-default")), + preview: lazy(() => import("@/preview/components/button-style-default")), codeHtml: ``, @@ -79,6 +79,15 @@ export const componentConfig = { type="text" placeholder="type something..." className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs" +/>`, + }, + "textarea-style-default": { + name: "textarea-style-default", + preview: lazy(() => import("@/preview/components/textarea-style-default")), + codeHtml: `