Merge pull request #23 from AlSirang/fix/merge-typography-components

Consolidate Heading Components into a Single Typography Component

Author: ariflogs

app/(docs)/docs/[[...slug]]/page.tsx

@@ -3,7 +3,7 @@ import { allDocs } from "contentlayer/generated";
 import { notFound } from "next/navigation";
 import { format } from "date-fns";
 import MDX from "@/components/MDX";
-import { H2 } from "@/packages/ui";
+import { Text } from "@/packages/ui";
 import { Metadata } from "next";
 
 interface IProps {
@@ -46,7 +46,7 @@ export default function page({ params }: IProps) {
   return (
     <div className="space-y-12 py-8">
       <div className="border-b border-black pb-4">
-        <H2>{doc.title}</H2>
+        <Text as="h2">{doc.title}</Text>
         <p className="text-lg text-muted">{doc.description}</p>
       </div>
       <div>

app/(marketing)/page.tsx

@@ -3,10 +3,7 @@ import {
   Badge,
   BasicCard,
   Button,
-  H1,
-  H2,
-  H3,
-  H4,
+  Text,
   Input,
   Textarea,
 } from "@/packages/ui";
@@ -20,8 +17,10 @@ export default function Home() {
     <main className="space-y-36">
       <section className="container max-w-6xl mx-auto px-4 lg:px-0 mt-36 text-gray-900 flex justify-center items-center">
         <div className="text-center lg:text-left w-full lg:w-2/3">
-          <H1>Make your projects</H1>
-          <H1 className="text-outlined">stand out!</H1>
+          <Text as="h1">Make your projects</Text>
+          <Text as="h1" className="text-outlined">
+            stand out!
+          </Text>
 
           <p className="text-lg text-muted mb-8 mt-4">
             Retro styled component library for modern web apps. Comes with 20+
@@ -60,53 +59,53 @@ export default function Home() {
       </section>
 
       <section className="container max-w-6xl mx-auto px-4 lg:px-0">
-        <H2 className="mb-16 text-center">
+        <Text as="h2" className="mb-16 text-center">
           Our components look both old school and modern! ✨
-        </H2>
+        </Text>
 
         <div className="grid gap-4 grid-cols-2 lg:grid-cols-4 mb-8">
           <div className="space-y-4">
-            <H4>Button</H4>
+            <Text as="h4">Button</Text>
             <Button>Click Me</Button>
           </div>
           <div className="space-y-4">
-            <H4>Badge</H4>
+            <Text as="h4">Badge</Text>
             <div className="flex flex-wrap space-y-2 lg:space-y-0 space-x-2">
               <Badge>Default Badge</Badge>
               <Badge variant="error">Error Badge</Badge>
             </div>
           </div>
           <div className="space-y-4">
-            <H4>Avatar</H4>
+            <Text as="h4">Avatar</Text>
             <Avatar />
           </div>
           <div className="space-y-4">
-            <H4>Input</H4>
+            <Text as="h4">Input</Text>
             <Input />
           </div>
         </div>
         <div className="grid gap-8 grid-cols-1 lg:grid-cols-3">
           <div className="space-y-4">
-            <H4>Textarea</H4>
+            <Text as="h4">Textarea</Text>
             <Textarea />
           </div>
           <div className="space-y-4">
-            <H4>Basic Card</H4>
+            <Text as="h4">Basic Card</Text>
             <BasicCard />
           </div>
           <div className="space-y-4">
-            <H4>Accordion</H4>
+            <Text as="h4">Accordion</Text>
             <AccordionStyleDefault />
           </div>
         </div>
       </section>
 
       <section className="container max-w-6xl mx-auto px-4 lg:px-0">
-        <H2 className="mb-16 text-center">
+        <Text as="h2" className="mb-16 text-center">
           And NO! We didn&apos;t just copy Gumroad!
           <br />
           Inspired, if you will... 💅
-        </H2>
+        </Text>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 items-center">
           <Image
@@ -115,11 +114,17 @@ export default function Home() {
             width={300}
             height={500}
           />
-          <H3 className="lg:hidden mt-2 mb-12">👆 RetroUI Card</H3>
+          <Text as="h3" className="lg:hidden mt-2 mb-12">
+            👆 RetroUI Card
+          </Text>
 
           <div className="hidden lg:block space-y-4">
-            <H2 className="text-left">👈 RetroUI Card</H2>
-            <H2 className="text-right">Gumroad&apos;s Card 👉</H2>
+            <Text as="h2" className="text-left">
+              👈 RetroUI Card
+            </Text>
+            <Text as="h2" className="text-right">
+              Gumroad&apos;s Card 👉
+            </Text>
           </div>
           <Image
             src="/images/gumroad_product_card.png"
@@ -128,14 +133,16 @@ export default function Home() {
             width={300}
             height={600}
           />
-          <H3 className="lg:hidden mt-2">👆 Gumroad&apos;s Card</H3>
+          <Text as="h3" className="lg:hidden mt-2">
+            👆 Gumroad&apos;s Card
+          </Text>
         </div>
       </section>
 
       <section className="container max-w-6xl mx-auto border-2 bg-primary-400 border-black py-16 px-4 lg:p-16">
-        <H2 className="mb-8 text-center">
+        <Text as="h2" className="mb-8 text-center">
           And did I mention it&apos;s Free and Open Source?
-        </H2>
+        </Text>
         <div className="flex flex-col lg:flex-row items-center justify-center space-y-4 lg:space-y-0 lg:space-x-4">
           <Link
             href="https://github.com/Logging-Stuff/retroui"

components/JoinNewsletter.tsx

@@ -1,6 +1,6 @@
-"use client"
+"use client";
 
-import { Button, H2, Input } from "@/packages/ui";
+import { Button, Text, Input } from "@/packages/ui";
 import { useState } from "react";
 
 const INIT = "INIT";
@@ -150,7 +150,7 @@ export function JoinNewsletter() {
       return (
         <div className="w-full max-w-6xl mx-auto py-16 px-4 border-2 border-black">
           <div className="flex flex-col justify-center items-center text-center">
-            <H2>Join Our Newsletter</H2>
+            <Text as="h2">Join Our Newsletter</Text>
             <p className="text-lg text-muted mb-8">
               Get notified about latest updates and new launches.
             </p>

components/MDX.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { H1, H2, H3, H4, H5, H6 } from "@/packages/ui";
+import { Text } from "@/packages/ui";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import React, { HTMLAttributes } from "react";
 import { ComponentShowcase } from "./ComponentShowcase";
@@ -9,18 +9,20 @@ import { ComponentSource } from "./ComponentSource";
 import { CodeBlock } from "./CodeBlock";
 
 const components = {
-  h1: H1,
+  h1: (props: HTMLAttributes<HTMLHeadingElement>) => (
+    <Text as="h1" {...props} />
+  ),
   h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
-    <H2 className="border-b lg:text-3xl pb-1 mb-6" {...props} />
+    <Text as="h2" className="border-b lg:text-3xl pb-1 mb-6" {...props} />
   ),
   h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
-    <H3 className="mb-4" {...props} />
+    <Text as="h3" className="mb-4" {...props} />
   ),
   h4: (props: HTMLAttributes<HTMLHeadingElement>) => (
-    <H4 className="mb-2" {...props} />
+    <Text as="h4" className="mb-2" {...props} />
   ),
-  h5: H5,
-  h6: H6,
+  h5: (props: HTMLAttributes<HTMLHeadElement>) => <Text as="h5" {...props} />,
+  h6: (props: HTMLAttributes<HTMLHeadElement>) => <Text as="h6" {...props} />,
   pre: CodeBlock,
   code: ({
     className,

components/SideNav.tsx

@@ -1,5 +1,5 @@
 import { navConfig } from "@/config/navigation";
-import { H6 } from "@/packages/ui";
+import { Text } from "@/packages/ui";
 import Link from "next/link";
 
 export default function SideNav() {
@@ -10,7 +10,7 @@ export default function SideNav() {
       <nav className="flex flex-col items-start pr-6 space-y-4">
         {navConfig.sideNavItems.map((item) => (
           <div key={item.title}>
-            <H6>{item.title}</H6>
+            <Text as="h6">{item.title}</Text>
             <div className="flex flex-col space-y-2">
               {item.children.map((child) => (
                 <Link key={child.title} href={child.href}>

config/components.ts

@@ -18,6 +18,10 @@ export const componentConfig = {
       name: "card",
       filePath: "packages/ui/Cards/Card.tsx",
     },
+    text: {
+      name: "text",
+      filePath: "packages/ui/Text/Text.tsx",
+    },
   },
   examples: {
     "accordion-style-default": {
@@ -103,10 +107,10 @@ export const componentConfig = {
         () => import("@/preview/components/textarea-style-default")
       ),
     },
-    "typography-headings": {
-      name: "typography-headings",
-      filePath: "preview/components/typography-headings.tsx",
-      preview: lazy(() => import("@/preview/components/typography-headings")),
+    "text-headings": {
+      name: "text-headings",
+      filePath: "preview/components/text-headings.tsx",
+      preview: lazy(() => import("@/preview/components/text-headings")),
     },
     "typography-p": {
       name: "typography-p",

config/navigation.ts

@@ -24,7 +24,7 @@ export const navConfig: INavigationConfig = {
         { title: "Input", href: `${componentsRoute}/input` },
         { title: "Tab", href: `${componentsRoute}/tab` },
         { title: "Textarea", href: `${componentsRoute}/textarea` },
-        { title: "Typography", href: `${componentsRoute}/typography` },
+        { title: "Text", href: `${componentsRoute}/text` },
       ],
     },
     {

content/docs/components/text.mdx

@@ -0,0 +1,51 @@
+---
+title: Text
+description: Show your texts in different styles. 💅
+lastUpdated: 22 Oct, 2024
+---
+
+## Headings
+
+The `Text` component is a versatile React component that provides various heading styles. It leverages class-variance-authority for managing variants and allows for the customization of heading elements.
+
+<hr />
+<br />
+
+<ComponentShowcase name="text-headings" />
+<br />
+
+#### Props
+
+`className`: Additional CSS classes to customize the component's styling.
+
+<br />
+
+`as`: Determines the heading and text style. Default is `p`. Variants include:
+
+- `"h1", "h2", "h3", "h4", "h5", "h6", "p"`
+
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```bash
+npm install class-variance-authority
+```
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="text" />
+
+<br />
+<br />
+<br />
+
+## Paragraph
+
+<hr />
+<br />
+
+<ComponentShowcase name="typography-p" />

content/docs/components/typography.mdx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils";
 import { HTMLAttributes } from "react";
-import { H3 } from "../Typography";
+import { Text } from "../Text";
 import { Content } from "next/font/google";
 
 interface ICardProps extends HTMLAttributes<HTMLDivElement> {
@@ -29,7 +29,7 @@ const CardHeader = ({ className, ...props }: ICardProps) => {
 };
 
 const CardTitle = ({ className, ...props }: ICardProps) => {
-  return <H3 className={cn("mb-2", className)} {...props} />;
+  return <Text as="h3" className={cn("mb-2", className)} {...props} />;
 };
 
 const CardDescription = ({ className, ...props }: ICardProps) => (