Skip to content

Commit 95fe018

Browse files
sametcodessametcodes
committed
feat(#194): implemented text util component and added opensans font
1 parent a6f59c8 commit 95fe018

23 files changed

+267
-245
lines changed

‎lib/@dsvgui/.gitignore

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
11
node_modules
2-
storybook-static
3-
document/fonts/*/index.ts
2+
storybook-static

‎lib/@dsvgui/components/article/index.tsx

+31-36
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Document } from "@/lib/@dsvgui";
1+
import { Document, Text } from "@/lib/@dsvgui";
22
import { wrapText } from "@/lib/@dsvgui/utils";
33
import { getTextWidth } from "@/lib/@dsvgui/utils/index";
44

@@ -54,9 +54,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
5454
article.meta.title,
5555
{ maxLineWidth: titleWidth, fontSize: 16, fontWeight: 700 },
5656
(line: string, index: number) => (
57-
<tspan key={index} x="0" dy={index === 0 ? 0 : 25}>
57+
<Text x={0} y={index * 25} option={{ size: 16, weight: 700 }}>
5858
{line}
59-
</tspan>
59+
</Text>
6060
)
6161
);
6262

@@ -74,29 +74,24 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
7474
)}
7575
<g transform={`translate(0 ${yOffset})`}>
7676
<g transform={`translate(${xOffset} 24)`}>
77-
<text
78-
xmlSpace="preserve"
79-
fontWeight="700"
80-
fill="#0c0c0c"
81-
fontSize="16"
82-
>
83-
{title}
84-
</text>
85-
<text fill="#999999" fontSize={12} y={5 + title.length * 15}>
86-
{wrapText(
87-
article.meta.description.replace(/\n/gm, " "),
88-
{
89-
maxLineWidth: titleWidth - 20,
90-
fontSize: 12,
91-
maxLines: 3,
92-
},
93-
(line: string, index) => (
94-
<tspan key={index} x="0" dy={index === 0 ? 0 : 13}>
95-
{line}
96-
</tspan>
97-
)
98-
)}
99-
</text>
77+
{title}
78+
{wrapText(
79+
article.meta.description.replace(/\n/gm, " "),
80+
{
81+
maxLineWidth: titleWidth - 20,
82+
fontSize: 12,
83+
maxLines: 3,
84+
},
85+
(line: string, index) => (
86+
<Text
87+
x={0}
88+
y={20 + title.length + index * 13}
89+
option={{ size: 12, weight: 400 }}
90+
>
91+
{line}
92+
</Text>
93+
)
94+
)}
10095
</g>
10196

10297
<g transform={`translate(${xOffset} 90)`}>
@@ -107,9 +102,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
107102
y={-11}
108103
fontSize="15px"
109104
/>
110-
<text fill="#555" fontSize="12" x="3" y="1">
105+
<Text x={3} y={1} option={{ size: 12, weight: 500 }}>
111106
{article.publish_date}
112-
</text>
107+
</Text>
113108
</g>
114109
<g transform={`translate(${15 + titleWidth / 4} 0)`}>
115110
<AiOutlineLike
@@ -118,9 +113,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
118113
y={-11}
119114
fontSize="15px"
120115
/>
121-
<text fill="#555" fontSize="12" x="3" y="1">
122-
{article.like_count} likes
123-
</text>
116+
<Text x={3} y={1} option={{ size: 12, weight: 500 }}>
117+
{article.like_count}
118+
</Text>
124119
</g>
125120
<g transform={`translate(${15 + titleWidth / 2} 0)`}>
126121
<BiTimeFive
@@ -129,9 +124,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
129124
y={-11}
130125
fontSize="15px"
131126
/>
132-
<text fill="#555" fontSize="12" x="3" y="1">
133-
{article.reading_time_minutes} mins
134-
</text>
127+
<Text x={3} y={1} option={{ size: 12, weight: 500 }}>
128+
{article.reading_time_minutes}
129+
</Text>
135130
</g>
136131
<g transform={`translate(${15 + (titleWidth / 4) * 3} 0)`}>
137132
<IoPersonCircleOutline
@@ -140,9 +135,9 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
140135
y={-11}
141136
fontSize="15px"
142137
/>
143-
<text fill="#555" fontSize="12" x="3" y="1">
138+
<Text x={3} y={1} option={{ size: 12, weight: 500 }}>
144139
{article.meta.author}
145-
</text>
140+
</Text>
146141
</g>
147142
</g>
148143

‎lib/@dsvgui/components/barstats/index.tsx

+17-20
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Document } from "@/lib/@dsvgui";
1+
import { Document, Text } from "@/lib/@dsvgui";
22
import { stringToColorCode } from "@/lib/@dsvgui/utils";
33
import { getTextWidth } from "../../utils/index";
44

@@ -33,18 +33,14 @@ export const BarStats: React.FC<IBarStats> = ({
3333
<g id="content">
3434
<g id="Frame 134">
3535
<g id="title">
36-
<text className="title" fontWeight="700">
37-
<tspan x="0" y="21.511">
38-
{title}
39-
</tspan>
40-
</text>
36+
<Text x={0} y={21.5} option="title">
37+
{title}
38+
</Text>
4139
</g>
4240
<g id="subtitle">
43-
<text className="subtitle">
44-
<tspan x="0" y="40">
45-
{subtitle}
46-
</tspan>
47-
</text>
41+
<Text x={0} y={40} option="subtitle">
42+
{subtitle}
43+
</Text>
4844
</g>
4945
<g id="bars" shapeRendering="crispEdges">
5046
{items.map((item, index, array) => {
@@ -83,18 +79,19 @@ export const BarStats: React.FC<IBarStats> = ({
8379
r={circleSize}
8480
fill={stringToColorCode(item.key)}
8581
/>
86-
<text
87-
xmlSpace="preserve"
88-
fontSize="14"
89-
fill="#7e7e7e"
82+
<Text
9083
x={x + 15}
9184
y={y + 5}
85+
option={{
86+
size: 14,
87+
weight: 500,
88+
}}
9289
>
93-
<tspan>{item.name} </tspan>
94-
<tspan fontWeight="bolder">
95-
%{((item.value / totalValue) * 100).toFixed(1)}{" "}
96-
</tspan>
97-
</text>
90+
{`${item.name} %${(
91+
(item.value / totalValue) *
92+
100
93+
).toFixed(1)}`}
94+
</Text>
9895
</g>
9996
);
10097
})}

‎lib/@dsvgui/components/calendar/index.tsx

+29-33
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
1-
import { Document } from "@/lib/@dsvgui";
1+
import { Document, Text } from "@/lib/@dsvgui";
22
import { generateColorVariations } from "@/lib/@dsvgui/utils";
3-
import { getTextWidth } from "../../utils/index";
43

54
export type ICalendar = {
65
title?: string;
@@ -146,11 +145,14 @@ export const Calendar: React.FC<ICalendar> = ({
146145
const monthString = month.toLocaleString("default", { month: "short" });
147146
const x = width - i * 4 * (boxSize + boxMargin + 1) - 25;
148147
return (
149-
<text key={monthString} id={monthString} className="clabel">
150-
<tspan x={x > 0 ? x : 0} y="165.864">
151-
{monthString}
152-
</tspan>
153-
</text>
148+
<Text
149+
key={monthString}
150+
x={x > 0 ? x : 0}
151+
y={166}
152+
option={{ size: 12, weight: 400 }}
153+
>
154+
{monthString}
155+
</Text>
154156
);
155157
}
156158
);
@@ -163,37 +165,31 @@ export const Calendar: React.FC<ICalendar> = ({
163165
{(title || subtitle || showStreak) && (
164166
<g id="Title">
165167
{title && (
166-
<text xmlSpace="preserve" className="title" fontWeight="700">
167-
<tspan x="0" y="18">
168-
{title}
169-
</tspan>
170-
</text>
168+
<Text x={0} y={18} option="title">
169+
{title}
170+
</Text>
171171
)}
172172
{title && subtitle && (
173-
<text xmlSpace="preserve" className="subtitle">
174-
<tspan x="0" y="38">
175-
{subtitle}
176-
</tspan>
177-
</text>
173+
<Text x={0} y={38} option="subtitle">
174+
{subtitle}
175+
</Text>
178176
)}
179177
{showStreak && (
180178
<>
181-
<text xmlSpace="preserve" className="title">
182-
<tspan
183-
x={width - getTextWidth(streak, { fontSize: 22 })}
184-
y="18"
185-
>
186-
{streak}
187-
</tspan>
188-
</text>
189-
<text xmlSpace="preserve" className="subtitle">
190-
<tspan
191-
x={width - getTextWidth("Streak", { fontSize: 16 })}
192-
y="38"
193-
>
194-
Streak
195-
</tspan>
196-
</text>
179+
<Text
180+
x={(textWidth) => width - textWidth}
181+
y={18}
182+
option="title"
183+
>
184+
{streak}
185+
</Text>
186+
<Text
187+
x={(textWidth) => width - textWidth}
188+
y={36}
189+
option="subtitle"
190+
>
191+
Streak
192+
</Text>
197193
</>
198194
)}
199195
</g>

‎lib/@dsvgui/components/fallback/index.tsx

+7-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { Document } from "@/lib/@dsvgui";
2+
import { Document, Text } from "@/lib/@dsvgui";
33
import { wrapText } from "@/lib/@dsvgui/utils/index";
44
import { IoWarningOutline } from "react-icons/io5";
55

@@ -15,9 +15,9 @@ export const Fallback: React.FC<IFallback> = ({ title, message }) => {
1515
message,
1616
{ maxLineWidth: width - 60, fontSize: 14, fontWeight: 400 },
1717
(line, index) => (
18-
<tspan key={index} x="67" y={index * 16 + 40}>
18+
<Text x={67} y={index * 16 + 40} option={{ size: 14, weight: 400 }}>
1919
{line}
20-
</tspan>
20+
</Text>
2121
)
2222
);
2323

@@ -31,20 +31,10 @@ export const Fallback: React.FC<IFallback> = ({ title, message }) => {
3131
className="icon"
3232
size="45px"
3333
/>
34-
<text
35-
fill="#3e3e3e"
36-
xmlSpace="preserve"
37-
fontSize="22"
38-
fontWeight="bold"
39-
letterSpacing="0.1px"
40-
>
41-
<tspan x="67" y="20">
42-
{title}
43-
</tspan>
44-
</text>
45-
<text fill="#6e6e6e" xmlSpace="preserve" fontSize="14" fontWeight="400">
46-
{subtitle}
47-
</text>
34+
<Text x={67} y={20} option="title">
35+
{title}
36+
</Text>
37+
{subtitle}
4838
</Document>
4939
);
5040
};

‎lib/@dsvgui/components/flock/index.tsx

+9-20
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Document } from "@/lib/@dsvgui";
1+
import { Document, Text } from "@/lib/@dsvgui";
22
import { getTextWidth } from "@/lib/@dsvgui/utils";
33

44
export type IFlock = {
@@ -35,11 +35,12 @@ export const Flock: React.FC<IFlock> = ({
3535
};
3636

3737
const titleWidth = title
38-
? getTextWidth(title.trim(), { fontSize: titleFontSize })
38+
? getTextWidth(title.trim(), { fontSize: titleFontSize, fontWeight: 700 })
3939
: 0;
4040
const subtitleWidth = subtitle
4141
? getTextWidth(subtitle.trim(), {
4242
fontSize: subtitleFontSize,
43+
fontWeight: 400,
4344
})
4445
: 0;
4546

@@ -59,26 +60,14 @@ export const Flock: React.FC<IFlock> = ({
5960
return (
6061
<Document w={documentWidth} h={documentHeight}>
6162
{title && (
62-
<text
63-
xmlns="http://www.w3.org/2000/svg"
64-
className="title"
65-
fontWeight="700"
66-
>
67-
<tspan x={headStart.x} y={headStart.y}>
68-
{title.trim()}
69-
</tspan>
70-
</text>
63+
<Text x={headStart.x} y={headStart.y} option="title">
64+
{title.trim()}
65+
</Text>
7166
)}
7267
{subtitle && (
73-
<text
74-
xmlns="http://www.w3.org/2000/svg"
75-
className="subtitle"
76-
fontWeight="400"
77-
>
78-
<tspan x={headStart.x} y={headStart.y + titleFontSize}>
79-
{subtitle.trim()}
80-
</tspan>
81-
</text>
68+
<Text x={headStart.x} y={headStart.y + 22} option="subtitle">
69+
{subtitle.trim()}
70+
</Text>
8271
)}
8372
{members.map((member, index) => {
8473
const row = Math.floor(index / items_per_row);

0 commit comments

Comments
 (0)