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/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..db18342 --- /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/MDX.tsx b/components/MDX.tsx index b390581..4defce0 100644 --- a/components/MDX.tsx +++ b/components/MDX.tsx @@ -1,10 +1,12 @@ import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui"; import { useMDXComponent } from "next-contentlayer/hooks"; -import React from "react"; +import React, { HTMLAttributes } from "react"; const components = { h1: H1, - h2: H2, + h2: (props: HTMLAttributes) => ( +

+ ), h3: H3, h4: H4, h5: H5, 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..37d6957 --- /dev/null +++ b/config/components.ts @@ -0,0 +1,107 @@ +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-circle": { + name: "avatar-style-circle", + preview: lazy(() => import("@/preview/components/avatar-style-circle")), + 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/button-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: ``, + }, + "typography-headings": { + name: "typography-headings", + preview: lazy(() => import("@/preview/components/typography-headings")), + codeHtml: `
+

This is H1

+

This is H2

+

This is H3

+

This is H4

+
This is H5
+
This is H6
+
`, + }, + "typography-p": { + name: "typography-p", + preview: lazy(() => import("@/preview/components/typography-p")), + codeHtml: `

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat eos, + doloremque inventore nesciunt quo sequi veniam impedit alias libero + dolorem tempore quia esse fugit fuga iste aliquam expedita molestias + iusto? +

`, + }, + }, +}; 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/content/docs/components/avatar.mdx b/content/docs/components/avatar.mdx new file mode 100644 index 0000000..bbc7727 --- /dev/null +++ b/content/docs/components/avatar.mdx @@ -0,0 +1,9 @@ +--- +title: Default Avatar +description: Default rounded avatar that can show your users profile picture. ✨ +lastUpdated: 30 Sep, 2024 +--- + +import {ComponentShowcase} from "@/components" + + \ 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/content/docs/components/button.mdx b/content/docs/components/button.mdx new file mode 100644 index 0000000..9d1db35 --- /dev/null +++ b/content/docs/components/button.mdx @@ -0,0 +1,9 @@ +--- +title: Default Button +description: This bold button makes sure your users click on it and perform the actions you want! 🚀 +lastUpdated: 30 Sep, 2024 +--- + +import {ComponentShowcase} from "@/components" + + diff --git a/content/docs/components/card.mdx b/content/docs/components/card.mdx new file mode 100644 index 0000000..2c923ea --- /dev/null +++ b/content/docs/components/card.mdx @@ -0,0 +1,9 @@ +--- +title: Default Button +description: This bold button makes sure your users click on it and perform the actions you want! 🚀 +lastUpdated: 30 Sep, 2024 +--- + +import {ComponentShowcase} from "@/components" + + diff --git a/content/docs/components/input.mdx b/content/docs/components/input.mdx new file mode 100644 index 0000000..9cf6e7b --- /dev/null +++ b/content/docs/components/input.mdx @@ -0,0 +1,9 @@ +--- +title: Default Button +description: This bold button makes sure your users click on it and perform the actions you want! 🚀 +lastUpdated: 30 Sep, 2024 +--- + +import {ComponentShowcase} from "@/components" + + diff --git a/content/docs/components/textarea.mdx b/content/docs/components/textarea.mdx new file mode 100644 index 0000000..c9db45f --- /dev/null +++ b/content/docs/components/textarea.mdx @@ -0,0 +1,9 @@ +--- +title: Default Button +description: This bold button makes sure your users click on it and perform the actions you want! 🚀 +lastUpdated: 30 Sep, 2024 +--- + +import {ComponentShowcase} from "@/components" + + diff --git a/content/docs/components/typography.mdx b/content/docs/components/typography.mdx new file mode 100644 index 0000000..827ad7a --- /dev/null +++ b/content/docs/components/typography.mdx @@ -0,0 +1,23 @@ +--- +title: Typography +description: Show your texts in different styles. 💅 +lastUpdated: 30 Sep, 2024 +--- + +import {ComponentShowcase} from "@/components" + +## Headings +
+
+ + + +
+
+
+ +## Paragraph +
+
+ + 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-circle.tsx b/preview/components/avatar-style-circle.tsx new file mode 100644 index 0000000..82126ef --- /dev/null +++ b/preview/components/avatar-style-circle.tsx @@ -0,0 +1,13 @@ +import React from "react"; + +export default function AvatarStyleCircle() { + 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 ( + + ); +}; diff --git a/preview/components/textarea-style-default.tsx b/preview/components/textarea-style-default.tsx new file mode 100644 index 0000000..ce90b9f --- /dev/null +++ b/preview/components/textarea-style-default.tsx @@ -0,0 +1,11 @@ +import React from "react"; + +export default function TextareaStyleDefault() { + return ( +