Skip to content

Commit

Permalink
refactor(#181): configured node-canvas package on getTextWidth function
Browse files Browse the repository at this point in the history
  • Loading branch information
sametcodes committed Apr 24, 2023
1 parent 89c0089 commit 010ac60
Show file tree
Hide file tree
Showing 12 changed files with 1,172 additions and 106 deletions.
13 changes: 6 additions & 7 deletions lib/@dsvgui/.storybook/main.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/** @type { import('@storybook/nextjs').StorybookConfig } */

import webpack from "webpack";

/** @type { import('@storybook/nextjs').StorybookConfig } */
const config = {
const defaultConfig = {
stories: ["../components/**/*.stories.@(js|jsx|ts|tsx)"],
addons: [
"@storybook/addon-links",
Expand All @@ -16,14 +17,12 @@ const config = {
docs: {
autodocs: "tag",
},
webpackFinal: (config) => {
webpackFinal: (config, { isServer }) => {
config.resolve.fallback.fs = false;
config.plugins.push(
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
})
new webpack.ProvidePlugin({ Buffer: ["buffer", "Buffer"] })
);
return config;
},
};
export default config;
export default defaultConfig;
10 changes: 7 additions & 3 deletions lib/@dsvgui/components/article/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
const titleWidth =
Math.max(
...articles.map((article) =>
getTextWidth(article.meta.title, { fontSize: 16 })
getTextWidth(article.meta.title, { fontSize: 16, fontWeight: "bold" })
),
400
) + 20;
Expand All @@ -52,7 +52,7 @@ export const Article: React.FC<IArticle> = ({ articles }) => {

const title = wrapText(
article.meta.title,
{ maxLineWidth: titleWidth, fontSize: 16 },
{ maxLineWidth: titleWidth, fontSize: 16, fontWeight: "bold" },
(line: string, index: number) => (
<tspan key={index} x="0" dy={index === 0 ? 0 : 25}>
{line}
Expand Down Expand Up @@ -92,7 +92,11 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
>
{wrapText(
article.meta.description.replace(/\n/gm, " "),
{ maxLineWidth: titleWidth, fontSize: 12, maxLines: 3 },
{
maxLineWidth: titleWidth - 20,
fontSize: 12,
maxLines: 3,
},
(line: string, index) => (
<tspan key={index} x="0" dy={index === 0 ? 0 : 13}>
{line}
Expand Down
29 changes: 17 additions & 12 deletions lib/@dsvgui/components/line/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,21 +64,21 @@ export const Line: React.FC<ILine> = ({ items }) => {
const widths = items.map((item) => {
const leftTitleWidth = getTextWidth(item.leftTitle || "", {
fontSize: 22,
ratio: 0.58,
fontWeight: 700,
});
const leftSubtitleWidth = getTextWidth(item.leftSubtitle || "", {
fontSize: 16,
ratio: 0.57,
fontWeight: 500,
});
const leftTitlesWidth = Math.max(leftTitleWidth, leftSubtitleWidth);

const rightTitleWidth = getTextWidth(item.rightTitle || "", {
fontSize: 22,
ratio: 0.58,
fontWeight: 700,
});
const rightSubtitleWidth = getTextWidth(item.rightSubtitle || "", {
fontSize: 16,
ratio: 0.527,
fontWeight: 500,
});
const rightTitlesWidth = Math.max(rightTitleWidth, rightSubtitleWidth);

Expand Down Expand Up @@ -118,9 +118,11 @@ export const Line: React.FC<ILine> = ({ items }) => {

const periodLabel = date.toLocaleDateString("en-US", dateOptions);
const xGap = width / (item.points.length - 1);
const x = i * xGap - getTextWidth(periodLabel, { fontSize: 8 }) / 2;
const x =
i * xGap -
getTextWidth(periodLabel, { fontSize: 8, fontWeight: 300 }) / 2;
return (
<text key={i} className="clabel">
<text key={i} className="clabel" fontWeight={300}>
<tspan x={x}>{periodLabel}</tspan>
</text>
);
Expand Down Expand Up @@ -167,11 +169,10 @@ export const Line: React.FC<ILine> = ({ items }) => {
<tspan
x={
width -
getTextWidth(item.rightTitle?.replace(/ /g, "") || "", {
getTextWidth(item.rightTitle || "", {
fontSize: 22,
ratio: 0.5,
}) -
documentPadding / 2
fontWeight: 700,
})
}
y="15"
>
Expand All @@ -180,14 +181,14 @@ export const Line: React.FC<ILine> = ({ items }) => {
</text>
<text
className={["subtitle", `lineText_${index}`].join(" ")}
fontWeight={300}
fontWeight={500}
>
<tspan
x={
width -
getTextWidth(item.rightSubtitle || "", {
fontSize: 16,
ratio: 0.5,
fontWeight: 300,
})
}
y="33"
Expand Down Expand Up @@ -217,6 +218,10 @@ export const Line: React.FC<ILine> = ({ items }) => {
<style>{`
.clabel{ fill: #999; font-size: 8px; }
.lineText_${index}{ fill: ${item.lineColor} !important; }
.subtitle.lineText_${index}{ fill: rgba(${hexToRgb(
item.lineColor || "#000000",
0.6
).join(", ")}) !important; }
`}</style>
<linearGradient
x1="0"
Expand Down
File renamed without changes.
Binary file added lib/@dsvgui/document/fonts/manrope/index.ttf
Binary file not shown.
Loading

0 comments on commit 010ac60

Please sign in to comment.