Docs site

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.

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[] } }) {
       <div>
         <MDX code={doc.body.code} />
       </div>
-      <p className="text-right">Last Updated: {format(doc.lastUpdated, "dd MMM, YYY")}</p>
+      <p className="text-right">
+        Last Updated: {format(doc.lastUpdated, "dd MMM, yyy")}
+      </p>
     </div>
   );
 }

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<HTMLDivElement> {
+  name: keyof typeof componentConfig.registry;
+}
+
+export function ComponentShowcase({ name }: IComponentShowcase) {
+  const { preview: Preview, codeHtml } = componentConfig.registry[name];
+  return (
+    <div className="space-y-6">
+      <div>
+        <H5>Preview</H5>
+        <div className="mt-2 border rounded p-6">
+          <Preview />
+        </div>
+      </div>
+
+      <div>
+        <H5>Code</H5>
+        <div className="mt-2 border relative rounded p-6 bg-[#222222] text-zinc-200 overflow-auto">
+          <code>
+            <pre>{codeHtml}</pre>
+          </code>
+        </div>
+      </div>
+    </div>
+  );
+}

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<HTMLHeadingElement>) => (
+    <H2 className="mb-2" {...props} />
+  ),
   h3: H3,
   h4: H4,
   h5: H5,

components/index.ts

@@ -0,0 +1 @@
+export * from "./ComponentShowcase"

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: `<div class="space-y-4 mx-auto">
+    <details class="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
+    <summary class="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
+        Accordion Item 1
+    </summary>
+    <div class="px-4 py-2 font-body bg-white text-gray-700">
+        This is the content of the first accordion item. It is styled with
+        Tailwind CSS.
+    </div>
+    </details>
+
+    <details class="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
+    <summary class="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
+        Accordion Item 2
+    </summary>
+    <div class="px-4 py-2 font-body bg-white text-gray-700">
+        This is the content of the second accordion item. It has a similar
+        style to maintain consistency.
+    </div>
+    </details>
+
+    <details class="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
+    <summary class="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
+        Accordion Item 3
+    </summary>
+    <div class="px-4 py-2 font-body bg-white text-gray-700">
+        This is the content of the third accordion item. The details element
+        handles the toggle behavior.
+    </div>
+    </details>
+</div>`,
+    },
+    "avatar-style-circle": {
+      name: "avatar-style-circle",
+      preview: lazy(() => import("@/preview/components/avatar-style-circle")),
+      codeHtml: `<div className="inline-block w-14 h-14 border-2 border-black rounded-full overflow-hidden">
+    <img
+        className="w-full h-full"
+        src="https://pagedone.io/asset/uploads/1704275541.png"
+        alt="Rounded Avatar"
+    />
+</div>`,
+    },
+    "badge-style-default": {
+      name: "badge-style-default",
+      preview: lazy(() => import("@/preview/components/badge-style-default")),
+      codeHtml: `<span className="border-black text-black border-2 px-2 py-1 text-sm">
+    Badge
+</span>`,
+    },
+    "button-style-default": {
+      name: "button-style-default",
+      preview: lazy(() => import("@/preview/components/button-style-default")),
+      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">
+    Click Me!
+</button>`,
+    },
+    "card-style-default": {
+      name: "card-style-default",
+      preview: lazy(() => import("@/preview/components/card-style-default")),
+      codeHtml: `<div className="inline-block border-2 border-black p-4 shadow-md cursor-pointer transition-all hover:shadow-xs">
+    <h4 className="font-head text-2xl font-medium mb-1">This is card Title</h4>
+    <p>This is card description.</p>
+</div>`,
+    },
+    "input-style-default": {
+      name: "input-style-default",
+      preview: lazy(() => import("@/preview/components/input-style-default")),
+      codeHtml: `<input
+    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"
+/>`,
+    },
+    "typography-headings": {
+      name: "typography-headings",
+      preview: lazy(() => import("@/preview/components/typography-headings")),
+      codeHtml: `<div className="space-y-4">
+  <h1 className="font-head text-5xl lg:text-6xl font-bold">This is H1</h1>
+  <h2 className="font-head text-4xl font-semibold">This is H2</h2>
+  <h3 className="font-head text-2xl font-semibold">This is H3</h3>
+  <h4 className="font-head text-xl font-medium">This is H4</h4>
+  <h5 className="font-head text-lg font-medium">This is H5</h5>
+  <h6 className="font-head font-medium">This is H6</h6>
+</div>`,
+    },
+    "typography-p": {
+      name: "typography-p",
+      preview: lazy(() => import("@/preview/components/typography-p")),
+      codeHtml: `<p className="font-sans">
+  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?
+</p>`,
+    },
+  },
+};

config/index.ts

@@ -0,0 +1,2 @@
+export * from "./components";
+export * from "./navigation";

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"
+
+<ComponentShowcase name="accordion-style-default" />

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"
+
+<ComponentShowcase name="avatar-style-circle" />

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"
+
+<ComponentShowcase name="badge-style-default" />

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"
+
+<ComponentShowcase name="button-style-default" />

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"
+
+<ComponentShowcase name="card-style-default" />

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"
+
+<ComponentShowcase name="input-style-default" />

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"
+
+<ComponentShowcase name="textarea-style-default" />

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
+<hr/>
+<br/>
+
+<ComponentShowcase name="typography-headings" />
+
+<br/>
+<br/>
+<br/>
+
+## Paragraph
+<hr/>
+<br/>
+
+<ComponentShowcase name="typography-p" />

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",