Skip to content

Commit 0197e4c

Browse files
agjsagjs
committed
Typography and Tiptap classes
1 parent 4ccf4b6 commit 0197e4c

File tree

27 files changed

+343
-56
lines changed

27 files changed

+343
-56
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@programmer_network/yail",
3-
"version": "1.0.154",
3+
"version": "1.0.155",
44
"description": "Programmer Network's official UI library for React",
55
"author": "Aleksandar Grbic - (https://programmer.network)",
66
"publishConfig": {

‎src/Components/AuthorCard/__snapshots__/AuthorCard.test.tsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ exports[`AuthorCard component > renders correctly 1`] = `
2525
</div>
2626
<div>
2727
<h2
28-
class="text-lg md:text-3xl font-bold text-primary mb-4 !mb-0"
28+
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl my-4 text-primary wordbreak font-bold !my-0"
2929
>
3030
John Doe
3131
</h2>
3232
<p
33-
class="mb-2 text-primary-text-color !text-lg"
33+
class="my-4 text-primary-text-color !my-0"
3434
>
3535
An expert in the field.
3636
</p>

‎src/Components/AuthorCard/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ const AuthorCard: React.FC<IAuthorCardProps> = ({
2626
<Avatar src={avatar} size={75} />
2727
</div>
2828
<div>
29-
<H2 className='!mb-0'>{name}</H2>
30-
<Paragraph className='!text-lg'>{about}</Paragraph>
29+
<H2 margin='none'>{name}</H2>
30+
<Paragraph margin='none'>{about}</Paragraph>
3131
</div>
3232
</div>
3333
</div>

‎src/Components/CTA/__snapshots__/CTA.test.tsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@ exports[`CTA component > renders correctly - snapshot test 1`] = `
1515
class="flex flex-col gap-2"
1616
>
1717
<h2
18-
class="text-lg md:text-3xl font-bold text-primary mb-4 !mb-0 text-primary-text-color"
18+
class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl my-4 text-primary wordbreak font-bold text-primary-text-color"
1919
>
2020
Test Title
2121
</h2>
2222
<p
23-
class="mx-auto max-w-md text-primary-text-color"
23+
class="my-4 text-primary-text-color mx-auto max-w-md text-primary-text-color text-center !my-0"
2424
>
2525
Test Subtitle
2626
</p>

‎src/Components/CTA/index.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import classNames from "classnames";
22
import { FC } from "react";
33

44
import Button from "Components/Button";
5-
import { H2 } from "Components/Typography";
5+
import { H2, Paragraph } from "Components/Typography";
66

77
import { ICTAProps } from "./types";
88

@@ -29,10 +29,13 @@ const CTA: FC<ICTAProps> = ({
2929
/>
3030
)}
3131

32-
<H2 className='!mb-0 text-primary-text-color'>{title}</H2>
33-
<p className='mx-auto max-w-md text-primary-text-color'>
32+
<H2 className='text-primary-text-color'>{title}</H2>
33+
<Paragraph
34+
margin='none'
35+
className='mx-auto max-w-md text-primary-text-color text-center'
36+
>
3437
{subtitle}
35-
</p>
38+
</Paragraph>
3639
</div>
3740

3841
{buttonText && onClick && (

‎src/Components/Card/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,13 @@ const Card: FC<ICard> = ({ data, className, NavLink }) => {
3737

3838
{URLUtils.isExternalLink(titleUrl) ? (
3939
<Anchor href={titleUrl} target='_blank'>
40-
<H2 className='!mb-0 flex items-center justify-start gap-2'>
40+
<H2 margin='none' className='flex items-center justify-start gap-2'>
4141
{title}
4242
</H2>
4343
</Anchor>
4444
) : (
4545
<NavLink to={titleUrl}>
46-
<H2 className='!mb-0'>{title}</H2>
46+
<H2 margin='none'>{title}</H2>
4747
</NavLink>
4848
)}
4949
<Paragraph>{description}</Paragraph>

‎src/Components/HTMLRendering/HTMLRendering.stories.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { TiptapToHTML } from "Components/Inputs";
2+
import { TIPTAP_TOOLBAR_ITEMS } from "Components/Inputs/Tiptap/constants";
3+
import { TiptapControls } from "Components/Inputs/Tiptap/types";
4+
5+
import HTMLRendering from "./HTMLRendering";
6+
import { getDocument } from "./HTMLRendering.utils";
7+
8+
const toolbar = [
9+
TIPTAP_TOOLBAR_ITEMS.BOLD,
10+
TIPTAP_TOOLBAR_ITEMS.HEADING_1,
11+
TIPTAP_TOOLBAR_ITEMS.HEADING_2,
12+
TIPTAP_TOOLBAR_ITEMS.HEADING_3,
13+
TIPTAP_TOOLBAR_ITEMS.HEADING_3,
14+
TIPTAP_TOOLBAR_ITEMS.HEADING_4,
15+
TIPTAP_TOOLBAR_ITEMS.HEADING_5,
16+
TIPTAP_TOOLBAR_ITEMS.HEADING_6,
17+
TIPTAP_TOOLBAR_ITEMS.ITALIC,
18+
TIPTAP_TOOLBAR_ITEMS.LINK,
19+
TIPTAP_TOOLBAR_ITEMS.IMAGE,
20+
TIPTAP_TOOLBAR_ITEMS.YOUTUBE,
21+
TIPTAP_TOOLBAR_ITEMS.LIST_ITEM,
22+
TIPTAP_TOOLBAR_ITEMS.UNORDERED_LIST,
23+
TIPTAP_TOOLBAR_ITEMS.ORDERED_LIST,
24+
TIPTAP_TOOLBAR_ITEMS.CODE,
25+
TIPTAP_TOOLBAR_ITEMS.BLOCK_QUOTE,
26+
TIPTAP_TOOLBAR_ITEMS.STRIKE_THROUGH,
27+
TIPTAP_TOOLBAR_ITEMS.CODE_BLOCK
28+
] as TiptapControls;
29+
30+
export default {
31+
title: "HTML Rendering/HTMLRendering",
32+
component: HTMLRendering
33+
};
34+
35+
export const Default = () => {
36+
const converter = new TiptapToHTML(toolbar);
37+
38+
return (
39+
<div className='mx-auto my-6 w-full px-4 sm:max-w-5xl md:max-w-4xl lg:max-w-5xl pb-16 md:pb-0 lg:px-8 leading-loose text-lg'>
40+
<HTMLRendering html={converter.generateSanitizedHTML(getDocument())} />
41+
</div>
42+
);
43+
};

‎src/Components/HTMLRendering/HTMLRendering.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { FC } from "react";
2+
3+
const HTMLRendering: FC<{
4+
html: string;
5+
}> = ({ html }) => {
6+
return (
7+
<div
8+
className='mt-8 break-all text-indigo-500'
9+
dangerouslySetInnerHTML={{ __html: html }}
10+
></div>
11+
);
12+
};
13+
14+
export default HTMLRendering;

‎src/Components/HTMLRendering/HTMLRendering.utils.ts

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { faker } from "@faker-js/faker";
2+
3+
export function generateParagraph(words = 2) {
4+
return {
5+
type: "paragraph",
6+
content: [
7+
{ type: "text", text: faker.lorem.sentence() },
8+
{
9+
type: "text",
10+
marks: [{ type: "bold" }],
11+
text: faker.lorem.words(words)
12+
},
13+
{ type: "text", text: faker.lorem.sentence() },
14+
{
15+
type: "text",
16+
marks: [{ type: "italic" }],
17+
text: faker.lorem.words(words)
18+
},
19+
{ type: "text", text: faker.lorem.sentence() }
20+
]
21+
};
22+
}
23+
24+
export function generateHeading(level: number) {
25+
return {
26+
type: "heading",
27+
attrs: { level: level },
28+
content: [{ type: "text", text: `H${level} ${faker.lorem.words(2)}` }]
29+
};
30+
}
31+
32+
export function generateBulletList(length = 4) {
33+
return {
34+
type: "bulletList",
35+
content: Array.from({ length }, () => ({
36+
type: "listItem",
37+
content: [
38+
{
39+
type: "paragraph",
40+
content: [{ type: "text", text: faker.lorem.words(2) }]
41+
}
42+
]
43+
}))
44+
};
45+
}
46+
47+
export function generateOrderedList(length = 4) {
48+
return {
49+
type: "orderedList",
50+
attrs: { start: 1 },
51+
content: Array.from({ length }, (_, i) => ({
52+
type: "listItem",
53+
content: [
54+
{
55+
type: "paragraph",
56+
content: [{ type: "text", text: `number ${i + 1}` }]
57+
}
58+
]
59+
}))
60+
};
61+
}
62+
63+
export function generateBlockquote() {
64+
return {
65+
type: "blockquote",
66+
content: [
67+
{
68+
type: "paragraph",
69+
content: [{ type: "text", text: faker.lorem.sentence() }]
70+
}
71+
]
72+
};
73+
}
74+
75+
export function generateYouTube() {
76+
return {
77+
type: "youtube",
78+
attrs: {
79+
src: "https://youtu.be/jfxq6-tBUuI",
80+
start: 0,
81+
width: 640,
82+
height: 480
83+
}
84+
};
85+
}
86+
87+
const headingWithParagraph = (level: number, words: number) => [
88+
generateHeading(level),
89+
generateParagraph(words),
90+
generateParagraph(words),
91+
generateParagraph(words),
92+
generateParagraph(words)
93+
];
94+
95+
export const getDocument = () => {
96+
return JSON.stringify({
97+
type: "doc",
98+
content: [
99+
...headingWithParagraph(1, 5),
100+
...headingWithParagraph(2, 5),
101+
...headingWithParagraph(3, 5),
102+
...headingWithParagraph(4, 5),
103+
...headingWithParagraph(5, 5),
104+
...headingWithParagraph(6, 5),
105+
generateBulletList(11),
106+
...headingWithParagraph(6, 5),
107+
generateOrderedList(),
108+
generateBlockquote(),
109+
generateYouTube()
110+
]
111+
});
112+
};

‎src/Components/Inputs/Tiptap/constants.ts

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,35 +27,43 @@ export const TIPTAP_TOOLBAR_ITEMS = {
2727
export const toolbarItemToClassName = {
2828
[TIPTAP_TOOLBAR_ITEMS.HEADING_1]: {
2929
tagName: "h1",
30-
classes: "text-6xl my-4 text-primary wordbreak"
30+
classes:
31+
"text-3xl sm:text-4xl md:text-5xl lg:text-6xl my-4 text-primary wordbreak font-bold"
3132
},
3233
[TIPTAP_TOOLBAR_ITEMS.HEADING_2]: {
3334
tagName: "h2",
34-
classes: "text-5xl my-4 text-primary wordbreak"
35+
classes:
36+
"text-2xl sm:text-3xl md:text-4xl lg:text-5xl my-4 text-primary wordbreak font-bold"
3537
},
3638
[TIPTAP_TOOLBAR_ITEMS.HEADING_3]: {
3739
tagName: "h3",
38-
classes: "text-4xl my-4 text-primary wordbreak"
40+
classes:
41+
"text-xl sm:text-2xl md:text-3xl lg:text-4xl my-4 text-primary wordbreak font-bold"
3942
},
4043
[TIPTAP_TOOLBAR_ITEMS.HEADING_4]: {
4144
tagName: "h4",
42-
classes: "text-3xl my-4 text-primary wordbreak"
45+
classes:
46+
"text-lg sm:text-xl md:text-2xl lg:text-3xl my-4 text-primary wordbreak font-bold"
4347
},
4448
[TIPTAP_TOOLBAR_ITEMS.HEADING_5]: {
4549
tagName: "h5",
46-
classes: "text-2xl my-4 text-primary wordbreak"
50+
classes:
51+
"text-md sm:text-lg md:text-xl lg:text-2xl my-4 text-primary wordbreak font-bold"
4752
},
4853
[TIPTAP_TOOLBAR_ITEMS.HEADING_6]: {
4954
tagName: "h6",
50-
classes: "text-xl my-4 text-primary wordbreak"
55+
classes:
56+
"text-sm sm:text-md md:text-lg lg:text-xl my-4 text-primary wordbreak font-bold"
5157
},
5258
[TIPTAP_TOOLBAR_ITEMS.UNORDERED_LIST]: {
5359
tagName: "ul",
54-
classes: "list-disc my-4 text-primary-text-color"
60+
classes:
61+
"list-disc my-4 text-primary-text-color marker:text-primary marker:text-xl pl-4"
5562
},
5663
[TIPTAP_TOOLBAR_ITEMS.ORDERED_LIST]: {
5764
tagName: "ol",
58-
classes: "list-decimal my-4 text-primary-text-color"
65+
classes:
66+
"list-decimal my-4 text-primary-text-color marker:text-primary marker:text-xl pl-4"
5967
},
6068
[TIPTAP_TOOLBAR_ITEMS.YOUTUBE]: {
6169
tagName: null,

‎src/Components/Typography/H1/index.tsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
import classNames from "classnames";
22
import { FC } from "react";
33

4-
import { headingCommonStyles } from "../utils";
4+
import {
5+
TIPTAP_TOOLBAR_ITEMS,
6+
toolbarItemToClassName
7+
} from "Components/Inputs/Tiptap/constants";
8+
59
import { IH1Props } from "./types";
610

7-
const H1: FC<IH1Props> = ({ children, className, onClick }) => {
11+
const H1: FC<IH1Props> = ({ children, className, onClick, margin }) => {
812
return (
913
<h1
1014
className={classNames(
11-
"text-2xl md:text-4xl",
12-
headingCommonStyles,
13-
className
15+
toolbarItemToClassName[TIPTAP_TOOLBAR_ITEMS.HEADING_1].classes,
16+
className,
17+
{
18+
"!my-0": margin === "none",
19+
"mb-4 !mt-0": margin === "bottom",
20+
"mt-4 !mb-0": margin === "top",
21+
"!my-4": margin === "both"
22+
}
1423
)}
1524
onClick={onClick}
1625
>

‎src/Components/Typography/H1/types.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { MouseEvent, ReactNode } from "react";
22

3-
export interface IH1Props {
3+
import { ITypographyMargin } from "../common";
4+
5+
export interface IH1Props extends ITypographyMargin {
46
children: ReactNode;
57
className?: string;
68
onClick?: (e: MouseEvent<HTMLHeadingElement>) => void;

‎src/Components/Typography/H2/index.tsx

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
import classNames from "classnames";
22
import { FC } from "react";
33

4-
import { headingCommonStyles } from "../utils";
4+
import {
5+
TIPTAP_TOOLBAR_ITEMS,
6+
toolbarItemToClassName
7+
} from "Components/Inputs/Tiptap/constants";
8+
59
import { IH2Props } from "./types";
610

7-
const H2: FC<IH2Props> = ({ children, className, onClick }) => {
11+
const H2: FC<IH2Props> = ({ children, className, onClick, margin }) => {
812
return (
913
<h2
1014
className={classNames(
11-
"text-lg md:text-3xl",
12-
headingCommonStyles,
13-
className
15+
toolbarItemToClassName[TIPTAP_TOOLBAR_ITEMS.HEADING_2].classes,
16+
className,
17+
{
18+
"!my-0": margin === "none",
19+
"mb-4 !mt-0": margin === "bottom",
20+
"mt-4 !mb-0": margin === "top",
21+
"!my-4": margin === "both"
22+
}
1423
)}
1524
onClick={onClick}
1625
>

‎src/Components/Typography/H2/types.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { MouseEvent, ReactNode } from "react";
22

3-
export interface IH2Props {
3+
import { ITypographyMargin } from "../common";
4+
5+
export interface IH2Props extends ITypographyMargin {
46
children: ReactNode;
57
className?: string;
68
onClick?: (e: MouseEvent<HTMLHeadingElement>) => void;

0 commit comments

Comments
 (0)