Skip to content

Commit d38c945

Browse files
sametcodessametcodes
committed
refactor(#225): implemented new size units to the components
1 parent bae2dcb commit d38c945

39 files changed

+1228
-317
lines changed

‎app/build/list/page.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { Platform, PlatformCode, PlatformQuery } from "@prisma/client";
33
import { templates, samples } from "@/platforms";
44
import Link from "next/link";
55

6+
export const dynamic = "force-static";
7+
68
export default async function QueryList() {
79
const platforms = await prisma.platform.findMany({
810
include: {

‎lib/@dsvgui/.storybook/main.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
import webpack from "webpack";
44

55
const defaultConfig = {
6-
stories: ["../components/**/*.stories.@(js|jsx|ts|tsx)"],
6+
stories: ["../(components|grid)/**/*.stories.@(js|jsx|ts|tsx)"],
77
addons: [
88
"@storybook/addon-links",
99
"@storybook/addon-essentials",

‎lib/@dsvgui/.storybook/preview.ts

+3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
/** @type { import('@storybook/react').Preview } */
2+
3+
import "react-grid-layout/css/styles.css";
4+
25
const preview = {
36
parameters: {
47
actions: { argTypesRegex: "^on[A-Z].*" },

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

+187-5
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,203 @@
1+
import React from "react";
2+
13
import type { Meta, StoryObj } from "@storybook/react";
2-
import { Article } from "./index";
3-
import { readImageURL } from "@/lib/@dsvgui/utils";
4+
import { Article, articleDocumentPreferences, IArticle } from "./index";
5+
import { readImageURL } from "../../utils";
6+
import { Grid } from "../../utils/grid";
47

58
const meta: Meta<typeof Article> = {
69
title: "Article",
710
component: Article,
8-
render: ({ articles }, { loaded: { thumbnails } }) => {
11+
render: ({ articles, document }, { loaded: { thumbnails } }) => {
912
articles = articles.map((article, key) => ({
1013
...article,
1114
thumbnail: thumbnails[key],
1215
}));
1316

14-
return <Article articles={articles} />;
17+
return <Article articles={articles} document={document} />;
1518
},
1619
};
1720
export default meta;
1821

19-
type Story = StoryObj<typeof Article>;
22+
type Story = StoryObj<IArticle>;
2023

2124
export const Base: Story = {
2225
args: {
26+
document: {
27+
w: 5,
28+
h: 4,
29+
...articleDocumentPreferences,
30+
},
31+
articles: [
32+
{
33+
meta: {
34+
title: "Why JS?",
35+
description: "I can't imagine a word without Javascript.",
36+
author: "sametcodes",
37+
},
38+
thumbnail: {
39+
value:
40+
"https://res.cloudinary.com/practicaldev/image/fetch/s--uJ_UDNhq--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2q16fucjwb4cla0ho05.png",
41+
width: 150,
42+
height: 150,
43+
},
44+
publish_date: "20.03.2023",
45+
like_count: 3,
46+
reading_time_minutes: 4,
47+
},
48+
{
49+
meta: {
50+
title: "Why not PHP?",
51+
description: "I can't imagine a word with PHP.",
52+
author: "eminkokdemir",
53+
},
54+
thumbnail: {
55+
value:
56+
"https://res.cloudinary.com/practicaldev/image/fetch/s--r3He9vYK--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuc2yb3yi1680dgmfj25.png",
57+
width: 150,
58+
height: 150,
59+
},
60+
publish_date: "20.03.2023",
61+
like_count: 3,
62+
reading_time_minutes: 4,
63+
},
64+
{
65+
meta: {
66+
title: "Go is the best",
67+
description: "What do and what do not do with Go.",
68+
author: "ekurt",
69+
},
70+
thumbnail: {
71+
value:
72+
"https://res.cloudinary.com/practicaldev/image/fetch/s--Wzj_6u7j--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53d24e36pofszh6shj6t.png",
73+
width: 150,
74+
height: 150,
75+
},
76+
publish_date: "20.03.2023",
77+
like_count: 3,
78+
reading_time_minutes: 4,
79+
},
80+
{
81+
meta: {
82+
title: "Launching my TodoList App",
83+
description:
84+
"You can find the source code on my Github. I will be happy if you contribute to the project.",
85+
author: "aydinfz",
86+
},
87+
thumbnail: {
88+
value:
89+
"https://res.cloudinary.com/practicaldev/image/fetch/s--_hLjVEgA--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewoetr6z83in1o5iu5uc.png",
90+
width: 150,
91+
height: 150,
92+
},
93+
publish_date: "20.03.2023",
94+
like_count: 3,
95+
reading_time_minutes: 4,
96+
},
97+
],
98+
},
99+
loaders: [
100+
async ({ args: { articles } }) => {
101+
const thumbnails = await Promise.all(
102+
articles.map((article) => readImageURL(article.thumbnail.value))
103+
);
104+
return { thumbnails };
105+
},
106+
],
107+
};
108+
109+
export const Compact: Story = {
110+
args: {
111+
document: {
112+
w: 3,
113+
h: 3,
114+
...articleDocumentPreferences,
115+
},
116+
articles: [
117+
{
118+
meta: {
119+
title: "Why JS?",
120+
description: "I can't imagine a word without Javascript.",
121+
author: "sametcodes",
122+
},
123+
thumbnail: {
124+
value:
125+
"https://res.cloudinary.com/practicaldev/image/fetch/s--uJ_UDNhq--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2q16fucjwb4cla0ho05.png",
126+
width: 150,
127+
height: 150,
128+
},
129+
publish_date: "20.03.2023",
130+
like_count: 3,
131+
reading_time_minutes: 4,
132+
},
133+
{
134+
meta: {
135+
title: "Why not PHP?",
136+
description: "I can't imagine a word with PHP.",
137+
author: "eminkokdemir",
138+
},
139+
thumbnail: {
140+
value:
141+
"https://res.cloudinary.com/practicaldev/image/fetch/s--r3He9vYK--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuc2yb3yi1680dgmfj25.png",
142+
width: 150,
143+
height: 150,
144+
},
145+
publish_date: "20.03.2023",
146+
like_count: 3,
147+
reading_time_minutes: 4,
148+
},
149+
{
150+
meta: {
151+
title: "Go is the best",
152+
description: "What do and what do not do with Go.",
153+
author: "ekurt",
154+
},
155+
thumbnail: {
156+
value:
157+
"https://res.cloudinary.com/practicaldev/image/fetch/s--Wzj_6u7j--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53d24e36pofszh6shj6t.png",
158+
width: 150,
159+
height: 150,
160+
},
161+
publish_date: "20.03.2023",
162+
like_count: 3,
163+
reading_time_minutes: 4,
164+
},
165+
{
166+
meta: {
167+
title: "Launching my TodoList App",
168+
description:
169+
"You can find the source code on my Github. I will be happy if you contribute to the project.",
170+
author: "aydinfz",
171+
},
172+
thumbnail: {
173+
value:
174+
"https://res.cloudinary.com/practicaldev/image/fetch/s--_hLjVEgA--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewoetr6z83in1o5iu5uc.png",
175+
width: 150,
176+
height: 150,
177+
},
178+
publish_date: "20.03.2023",
179+
like_count: 3,
180+
reading_time_minutes: 4,
181+
},
182+
],
183+
},
184+
loaders: [
185+
async ({ args: { articles } }) => {
186+
const thumbnails = await Promise.all(
187+
articles.map((article) => readImageURL(article.thumbnail.value))
188+
);
189+
return { thumbnails };
190+
},
191+
],
192+
};
193+
194+
export const WithoutImage: Story = {
195+
args: {
196+
document: {
197+
w: 4,
198+
h: 3,
199+
...articleDocumentPreferences,
200+
},
23201
articles: [
24202
{
25203
meta: {
@@ -97,3 +275,7 @@ export const Base: Story = {
97275
},
98276
],
99277
};
278+
279+
export const WithGrid = () => {
280+
return <Grid component={Article} stories={[Base, Compact, WithoutImage]} />;
281+
};

0 commit comments

Comments
 (0)