Skip to content

Commit fa3f6ab

Browse files
AlSirangAlSirang
committed
rename Typography to Text and replace all occurrences
1 parent 2ba03d3 commit fa3f6ab

File tree

20 files changed

+192
-194
lines changed

20 files changed

+192
-194
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { allDocs } from "contentlayer/generated";
33
import { notFound } from "next/navigation";
44
import { format } from "date-fns";
55
import MDX from "@/components/MDX";
6-
import { Typography } from "@/packages/ui";
6+
import { Text } from "@/packages/ui";
77
import { Metadata } from "next";
88

99
interface IProps {
@@ -46,9 +46,9 @@ export default function page({ params }: IProps) {
4646
return (
4747
<div className="space-y-12 py-8">
4848
<div className="border-b border-black pb-4">
49-
<Typography variant="h2" component="h2">
49+
<Text variant="h2" tag="h2">
5050
{doc.title}
51-
</Typography>
51+
</Text>
5252
<p className="text-lg text-muted">{doc.description}</p>
5353
</div>
5454
<div>

‎app/(marketing)/page.tsx‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import {
33
Badge,
44
BasicCard,
55
Button,
6-
Typography,
6+
Text,
77
Input,
88
Textarea,
99
} from "@/packages/ui";
@@ -17,8 +17,12 @@ export default function Home() {
1717
<main className="space-y-36">
1818
<section className="container max-w-6xl mx-auto px-4 lg:px-0 mt-36 text-gray-900 flex justify-center items-center">
1919
<div className="text-center lg:text-left w-full lg:w-2/3">
20-
<Typography>Make your projects</Typography>
21-
<Typography className="text-outlined">stand out!</Typography>
20+
<Text tag="h1" variant="h1">
21+
Make your projects
22+
</Text>
23+
<Text tag="h1" variant="h1" className="text-outlined">
24+
stand out!
25+
</Text>
2226

2327
<p className="text-lg text-muted mb-8 mt-4">
2428
Retro styled component library for modern web apps. Comes with 20+
@@ -57,67 +61,67 @@ export default function Home() {
5761
</section>
5862

5963
<section className="container max-w-6xl mx-auto px-4 lg:px-0">
60-
<Typography variant="h2" component="h2" className="mb-16 text-center">
64+
<Text variant="h2" tag="h2" className="mb-16 text-center">
6165
Our components look both old school and modern! ✨
62-
</Typography>
66+
</Text>
6367

6468
<div className="grid gap-4 grid-cols-2 lg:grid-cols-4 mb-8">
6569
<div className="space-y-4">
66-
<Typography variant="h4" component="h3">
70+
<Text variant="h4" tag="h3">
6771
Button
68-
</Typography>
72+
</Text>
6973
<Button>Click Me</Button>
7074
</div>
7175
<div className="space-y-4">
72-
<Typography variant="h4" component="h3">
76+
<Text variant="h4" tag="h3">
7377
Badge
74-
</Typography>
78+
</Text>
7579
<div className="flex flex-wrap space-y-2 lg:space-y-0 space-x-2">
7680
<Badge>Default Badge</Badge>
7781
<Badge variant="error">Error Badge</Badge>
7882
</div>
7983
</div>
8084
<div className="space-y-4">
81-
<Typography variant="h4" component="h3">
85+
<Text variant="h4" tag="h3">
8286
Avatar
83-
</Typography>
87+
</Text>
8488
<Avatar />
8589
</div>
8690
<div className="space-y-4">
87-
<Typography variant="h4" component="h3">
91+
<Text variant="h4" tag="h3">
8892
Input
89-
</Typography>
93+
</Text>
9094
<Input />
9195
</div>
9296
</div>
9397
<div className="grid gap-8 grid-cols-1 lg:grid-cols-3">
9498
<div className="space-y-4">
95-
<Typography variant="h4" component="h3">
99+
<Text variant="h4" tag="h3">
96100
Textarea
97-
</Typography>
101+
</Text>
98102
<Textarea />
99103
</div>
100104
<div className="space-y-4">
101-
<Typography variant="h4" component="h3">
105+
<Text variant="h4" tag="h3">
102106
Basic Card
103-
</Typography>
107+
</Text>
104108
<BasicCard />
105109
</div>
106110
<div className="space-y-4">
107-
<Typography variant="h4" component="h3">
111+
<Text variant="h4" tag="h3">
108112
Accordion
109-
</Typography>
113+
</Text>
110114
<AccordionStyleDefault />
111115
</div>
112116
</div>
113117
</section>
114118

115119
<section className="container max-w-6xl mx-auto px-4 lg:px-0">
116-
<Typography variant="h2" component="h2" className="mb-16 text-center">
120+
<Text variant="h2" tag="h2" className="mb-16 text-center">
117121
And NO! We didn&apos;t just copy Gumroad!
118122
<br />
119123
Inspired, if you will... 💅
120-
</Typography>
124+
</Text>
121125

122126
<div className="grid grid-cols-1 lg:grid-cols-3 items-center">
123127
<Image
@@ -126,21 +130,17 @@ export default function Home() {
126130
width={300}
127131
height={500}
128132
/>
129-
<Typography
130-
variant="h3"
131-
component="h3"
132-
className="lg:hidden mt-2 mb-12"
133-
>
133+
<Text variant="h3" tag="h3" className="lg:hidden mt-2 mb-12">
134134
👆 RetroUI Card
135-
</Typography>
135+
</Text>
136136

137137
<div className="hidden lg:block space-y-4">
138-
<Typography variant="h2" component="h2" className="text-left">
138+
<Text variant="h2" tag="h2" className="text-left">
139139
👈 RetroUI Card
140-
</Typography>
141-
<Typography variant="h2" component="h2" className="text-right">
140+
</Text>
141+
<Text variant="h2" tag="h2" className="text-right">
142142
Gumroad&apos;s Card 👉
143-
</Typography>
143+
</Text>
144144
</div>
145145
<Image
146146
src="/images/gumroad_product_card.png"
@@ -149,16 +149,16 @@ export default function Home() {
149149
width={300}
150150
height={600}
151151
/>
152-
<Typography component="h3" variant="h3" className="lg:hidden mt-2">
152+
<Text tag="h3" variant="h3" className="lg:hidden mt-2">
153153
👆 Gumroad&apos;s Card
154-
</Typography>
154+
</Text>
155155
</div>
156156
</section>
157157

158158
<section className="container max-w-6xl mx-auto border-2 bg-primary-400 border-black py-16 px-4 lg:p-16">
159-
<Typography component="h2" variant="h2" className="mb-8 text-center">
159+
<Text tag="h2" variant="h2" className="mb-8 text-center">
160160
And did I mention it&apos;s Free and Open Source?
161-
</Typography>
161+
</Text>
162162
<div className="flex flex-col lg:flex-row items-center justify-center space-y-4 lg:space-y-0 lg:space-x-4">
163163
<Link
164164
href="https://github.com/Logging-Stuff/retroui"

‎components/JoinNewsletter.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { Button, Typography, Input } from "@/packages/ui";
3+
import { Button, Text, Input } from "@/packages/ui";
44
import { useState } from "react";
55

66
const INIT = "INIT";
@@ -150,9 +150,9 @@ export function JoinNewsletter() {
150150
return (
151151
<div className="w-full max-w-6xl mx-auto py-16 px-4 border-2 border-black">
152152
<div className="flex flex-col justify-center items-center text-center">
153-
<Typography variant="h2" component="h2">
153+
<Text variant="h2" tag="h2">
154154
Join Our Newsletter
155-
</Typography>
155+
</Text>
156156
<p className="text-lg text-muted mb-8">
157157
Get notified about latest updates and new launches.
158158
</p>

‎components/MDX.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import { Typography } from "@/packages/ui";
3+
import { Text } from "@/packages/ui";
44
import { useMDXComponent } from "next-contentlayer/hooks";
55
import React, { HTMLAttributes } from "react";
66
import { ComponentShowcase } from "./ComponentShowcase";
@@ -9,26 +9,28 @@ import { ComponentSource } from "./ComponentSource";
99
import { CodeBlock } from "./CodeBlock";
1010

1111
const components = {
12-
h1: Typography,
12+
h1: (props: HTMLAttributes<HTMLHeadingElement>) => (
13+
<Text tag="h1" variant="h1" {...props} />
14+
),
1315
h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
14-
<Typography
16+
<Text
1517
variant="h2"
16-
component="h2"
18+
tag="h2"
1719
className="border-b lg:text-3xl pb-1 mb-6"
1820
{...props}
1921
/>
2022
),
2123
h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
22-
<Typography variant="h3" component="h3" className="mb-4" {...props} />
24+
<Text variant="h3" tag="h3" className="mb-4" {...props} />
2325
),
2426
h4: (props: HTMLAttributes<HTMLHeadingElement>) => (
25-
<Typography variant="h4" component="h4" className="mb-2" {...props} />
27+
<Text variant="h4" tag="h4" className="mb-2" {...props} />
2628
),
2729
h5: (props: HTMLAttributes<HTMLHeadElement>) => (
28-
<Typography variant="h5" component="h5" {...props} />
30+
<Text variant="h5" tag="h5" {...props} />
2931
),
3032
h6: (props: HTMLAttributes<HTMLHeadElement>) => (
31-
<Typography variant="h6" component="h6" {...props} />
33+
<Text variant="h6" tag="h6" {...props} />
3234
),
3335
pre: CodeBlock,
3436
code: ({

‎components/SideNav.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { navConfig } from "@/config/navigation";
2-
import { Typography } from "@/packages/ui";
2+
import { Text } from "@/packages/ui";
33
import Link from "next/link";
44

55
export default function SideNav() {
@@ -10,9 +10,9 @@ export default function SideNav() {
1010
<nav className="flex flex-col items-start pr-6 space-y-4">
1111
{navConfig.sideNavItems.map((item) => (
1212
<div key={item.title}>
13-
<Typography variant="h6" component="h6">
13+
<Text variant="h6" tag="h6">
1414
{item.title}
15-
</Typography>
15+
</Text>
1616
<div className="flex flex-col space-y-2">
1717
{item.children.map((child) => (
1818
<Link key={child.title} href={child.href}>

‎config/components.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ export const componentConfig = {
1818
name: "card",
1919
filePath: "packages/ui/Cards/Card.tsx",
2020
},
21-
typography: {
22-
name: "typography",
23-
filePath: "packages/ui/Typography/Typography.tsx",
21+
text: {
22+
name: "text",
23+
filePath: "packages/ui/Text/Text.tsx",
2424
},
2525
},
2626
examples: {
@@ -107,15 +107,15 @@ export const componentConfig = {
107107
() => import("@/preview/components/textarea-style-default")
108108
),
109109
},
110-
"typography-examples": {
111-
name: "typography-examples",
112-
filePath: "preview/components/typography-examples.tsx",
113-
preview: lazy(() => import("@/preview/components/typography-examples")),
110+
"text-examples": {
111+
name: "text-examples",
112+
filePath: "preview/components/text-examples.tsx",
113+
preview: lazy(() => import("@/preview/components/text-examples")),
114114
},
115-
"typography-headings": {
116-
name: "typography-headings",
117-
filePath: "preview/components/typography-headings.tsx",
118-
preview: lazy(() => import("@/preview/components/typography-headings")),
115+
"text-headings": {
116+
name: "text-headings",
117+
filePath: "preview/components/text-headings.tsx",
118+
preview: lazy(() => import("@/preview/components/text-headings")),
119119
},
120120
"typography-p": {
121121
name: "typography-p",

‎config/navigation.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const navConfig: INavigationConfig = {
2424
{ title: "Input", href: `${componentsRoute}/input` },
2525
{ title: "Tab", href: `${componentsRoute}/tab` },
2626
{ title: "Textarea", href: `${componentsRoute}/textarea` },
27-
{ title: "Typography", href: `${componentsRoute}/typography` },
27+
{ title: "Text", href: `${componentsRoute}/text` },
2828
],
2929
},
3030
{

‎content/docs/components/text.mdx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
title: Text
3+
description: Show your texts in different styles. 💅
4+
lastUpdated: 22 Oct, 2024
5+
---
6+
7+
## Headings
8+
9+
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.
10+
11+
<hr />
12+
<br />
13+
14+
<ComponentShowcase name="text-headings" />
15+
<br />
16+
17+
#### Props
18+
19+
`className`: Additional CSS classes to customize the component's styling.
20+
21+
<br />
22+
23+
`tag`: Specifies which heading element to render (default is `p`).
24+
25+
<br />
26+
27+
`variant`: Determines the text style. Default is `p`. Variants include:
28+
29+
- `"h1", "h2", "h3", "h4", "h5", "h6", "p"`
30+
31+
<br />
32+
<br />
33+
34+
## Installation
35+
36+
#### 1. Install dependencies:
37+
38+
```bash
39+
npm install class-variance-authority
40+
```
41+
42+
#### 2. Copy the code 👇 into your project:
43+
44+
<ComponentSource name="text" />
45+
46+
<br />
47+
<br />
48+
## Examples
49+
50+
<ComponentShowcase name="text-examples" />
51+
52+
<br />
53+
<br />
54+
<br />
55+
56+
## Paragraph
57+
58+
<hr />
59+
<br />
60+
61+
<ComponentShowcase name="typography-p" />

0 commit comments

Comments
 (0)