1
+ import React from "react" ;
2
+
1
3
import type { Meta , StoryObj } from "@storybook/react" ;
2
- import { Article , IArticle } 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" ;
4
7
5
8
const meta : Meta < typeof Article > = {
6
9
title : "Article" ,
7
10
component : Article ,
8
- render : ( { articles } , { loaded : { thumbnails } } ) => {
11
+ render : ( { articles, document } , { loaded : { thumbnails } } ) => {
9
12
articles = articles . map ( ( article , key ) => ( {
10
13
...article ,
11
14
thumbnail : thumbnails [ key ] ,
12
15
} ) ) ;
13
16
14
- return < Article articles = { articles } /> ;
17
+ return < Article articles = { articles } document = { document } /> ;
15
18
} ,
16
19
} ;
17
20
export default meta ;
@@ -20,6 +23,181 @@ type Story = StoryObj<IArticle>;
20
23
21
24
export const Base : Story = {
22
25
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
+ } ,
23
201
articles : [
24
202
{
25
203
meta : {
@@ -97,3 +275,7 @@ export const Base: Story = {
97
275
} ,
98
276
] ,
99
277
} ;
278
+
279
+ export const WithGrid = ( ) => {
280
+ return < Grid component = { Article } stories = { [ Base , Compact , WithoutImage ] } /> ;
281
+ } ;
0 commit comments