datastake-daf 0.6.459 → 0.6.461

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/index.js +2 -2
  2. package/package.json +4 -1
  3. package/src/@daf/core/components/Dashboard/PdfView/index.jsx +1 -1
  4. package/src/@daf/core/components/Document/WordDocument/Preview/WordDocument.stories.js +491 -0
  5. package/src/@daf/core/components/Document/WordDocument/Preview/index.js +104 -0
  6. package/src/@daf/core/components/Document/WordDocument/createDocument.js +364 -0
  7. package/src/@daf/core/components/Document/WordDocument/index.js +9 -0
  8. package/src/@daf/core/components/EditForm/storyConfig.js +1 -1
  9. package/src/@daf/core/components/EditForm/storyConfig1.js +9932 -131
  10. package/src/@daf/core/components/ViewForm/components/DataLink/flat.js +1 -1
package/src/@daf/core/components/Document/WordDocument/createDocument.js ADDED
@@ -0,0 +1,364 @@
1
+ import * as docx from 'docx';
2
+
3
+ /**
4
+ * Renders different types of document elements based on type
5
+ * @param {Object} item - Configuration item
6
+ * @param {string} item.type - Type of element (paragraph, heading, table, image, etc.)
7
+ * @param {any} item.data - Data for the element
8
+ * @param {Object} item.meta - Metadata/styling for text runs
9
+ * @param {Object} item.style - Style properties for the element
10
+ * @returns {docx element} The rendered document element
11
+ */
12
+ const renderElement = (item) => {
13
+ const { type = 'paragraph', data, meta = {}, style = {} } = item;
14
+
15
+ switch (type) {
16
+ case 'paragraph':
17
+ return new docx.Paragraph({
18
+ children: [
19
+ new docx.TextRun({ text: data, ...meta }),
20
+ ],
21
+ ...style
22
+ });
23
+
24
+ case 'heading':
25
+ return new docx.Paragraph({
26
+ text: data,
27
+ heading: style.heading || docx.HeadingLevel.HEADING_1,
28
+ ...style
29
+ });
30
+
31
+ case 'table':
32
+ return new docx.Table({
33
+ rows: data.map(row =>
34
+ new docx.TableRow({
35
+ children: row.map(cell =>
36
+ new docx.TableCell({
37
+ children: [new docx.Paragraph(cell)]
38
+ })
39
+ )
40
+ })
41
+ ),
42
+ ...style
43
+ });
44
+
45
+ case 'image':
46
+ return new docx.Paragraph({
47
+ children: [
48
+ new docx.ImageRun({
49
+ data: data,
50
+ transformation: {
51
+ width: style.width || 100,
52
+ height: style.height || 100,
53
+ },
54
+ ...meta
55
+ })
56
+ ],
57
+ ...style
58
+ });
59
+
60
+ case 'imageWithText': {
61
+ // Creates a table with image and text side by side
62
+ // imagePosition: 'left' (default) or 'right'
63
+ const imagePosition = data.imagePosition || 'left';
64
+
65
+ // Create image cell
66
+ const imageCell = new docx.TableCell({
67
+ children: [
68
+ ...(data.image ? [
69
+ new docx.Paragraph({
70
+ children: [
71
+ new docx.ImageRun({
72
+ data: data.image,
73
+ transformation: {
74
+ width: data.imageWidth || 250,
75
+ height: data.imageHeight || 200,
76
+ }
77
+ })
78
+ ]
79
+ })
80
+ ] : [
81
+ new docx.Paragraph({
82
+ text: '[Image placeholder]',
83
+ shading: {
84
+ fill: 'F0F0F0',
85
+ }
86
+ })
87
+ ])
88
+ ],
89
+ width: {
90
+ size: 50,
91
+ type: docx.WidthType.PERCENTAGE
92
+ },
93
+ borders: {
94
+ top: { style: docx.BorderStyle.SINGLE, size: 1, color: 'CCCCCC' },
95
+ bottom: { style: docx.BorderStyle.SINGLE, size: 1, color: 'CCCCCC' },
96
+ left: { style: docx.BorderStyle.SINGLE, size: 1, color: 'CCCCCC' },
97
+ right: { style: docx.BorderStyle.SINGLE, size: 1, color: 'CCCCCC' }
98
+ }
99
+ });
100
+
101
+ // Create text cell
102
+ const textCell = new docx.TableCell({
103
+ children: [
104
+ new docx.Paragraph({
105
+ children: [
106
+ new docx.TextRun({
107
+ text: data.text || '',
108
+ size: 22
109
+ })
110
+ ]
111
+ })
112
+ ],
113
+ width: {
114
+ size: 50,
115
+ type: docx.WidthType.PERCENTAGE
116
+ },
117
+ borders: {
118
+ top: { style: docx.BorderStyle.SINGLE, size: 1, color: 'CCCCCC' },
119
+ bottom: { style: docx.BorderStyle.SINGLE, size: 1, color: 'CCCCCC' },
120
+ left: { style: docx.BorderStyle.SINGLE, size: 1, color: 'CCCCCC' },
121
+ right: { style: docx.BorderStyle.SINGLE, size: 1, color: 'CCCCCC' }
122
+ }
123
+ });
124
+
125
+ // Arrange cells based on image position
126
+ const cells = imagePosition === 'right' ? [textCell, imageCell] : [imageCell, textCell];
127
+
128
+ const table = new docx.Table({
129
+ rows: [
130
+ new docx.TableRow({
131
+ children: cells
132
+ })
133
+ ],
134
+ width: {
135
+ size: 100,
136
+ type: docx.WidthType.PERCENTAGE
137
+ },
138
+ ...style
139
+ });
140
+
141
+ // Add spacing paragraph after the table
142
+ return [table, ...([])];
143
+ }
144
+
145
+ case 'borderedSection': {
146
+ // Creates a bordered section (like the editable areas)
147
+ const table = new docx.Table({
148
+ rows: [
149
+ new docx.TableRow({
150
+ children: [
151
+ new docx.TableCell({
152
+ children: [
153
+ new docx.Paragraph({
154
+ children: [
155
+ new docx.TextRun({
156
+ text: data.title || '',
157
+ bold: true,
158
+ size: 24
159
+ })
160
+ ],
161
+ spacing: { after: 200 }
162
+ }),
163
+ new docx.Paragraph({
164
+ children: [
165
+ new docx.TextRun({
166
+ text: data.content || 'Editable - to be filled by the user',
167
+ italic: true,
168
+ size: 22,
169
+ color: '666666'
170
+ })
171
+ ]
172
+ })
173
+ ],
174
+ borders: {
175
+ top: { style: docx.BorderStyle.SINGLE, size: 6, color: 'CCCCCC' },
176
+ bottom: { style: docx.BorderStyle.SINGLE, size: 6, color: 'CCCCCC' },
177
+ left: { style: docx.BorderStyle.SINGLE, size: 6, color: 'CCCCCC' },
178
+ right: { style: docx.BorderStyle.SINGLE, size: 6, color: 'CCCCCC' }
179
+ },
180
+ shading: {
181
+ fill: 'F9F9F9'
182
+ }
183
+ })
184
+ ]
185
+ })
186
+ ],
187
+ width: {
188
+ size: 100,
189
+ type: docx.WidthType.PERCENTAGE
190
+ },
191
+ ...style
192
+ });
193
+
194
+ // Add spacing paragraph after the table
195
+ return [table, new docx.Paragraph({ spacing: { after: 400 } })];
196
+ }
197
+
198
+ case 'commentSection': {
199
+ // Creates a bordered section with heading and auto-filled comments
200
+ const sectionChildren = [];
201
+
202
+ // Create title paragraph with percentage if provided
203
+ if (data.percentage !== undefined) {
204
+ sectionChildren.push(
205
+ new docx.Paragraph({
206
+ children: [
207
+ new docx.TextRun({
208
+ text: data.title + ' ',
209
+ bold: true,
210
+ size: 24
211
+ }),
212
+ new docx.TextRun({
213
+ text: `○ ${data.percentage}%`,
214
+ color: 'FFA500',
215
+ size: 20,
216
+ bold: false
217
+ })
218
+ ],
219
+ spacing: { after: 100 }
220
+ })
221
+ );
222
+ } else {
223
+ sectionChildren.push(
224
+ new docx.Paragraph({
225
+ text: data.title,
226
+ bold: true,
227
+ size: 24,
228
+ spacing: { after: 100 }
229
+ })
230
+ );
231
+ }
232
+
233
+ // Add description with bottom border
234
+ sectionChildren.push(
235
+ new docx.Paragraph({
236
+ children: [
237
+ new docx.TextRun({
238
+ text: data.description,
239
+ size: 20
240
+ })
241
+ ],
242
+ spacing: { after: 150 },
243
+ border: {
244
+ bottom: { style: docx.BorderStyle.SINGLE, size: 6, color: 'CCCCCC' }
245
+ }
246
+ })
247
+ );
248
+
249
+ // Add bullet points
250
+ if (data.comments && Array.isArray(data.comments)) {
251
+ data.comments.forEach((comment, index) => {
252
+ sectionChildren.push(
253
+ new docx.Paragraph({
254
+ text: comment,
255
+ bullet: { level: 0 },
256
+ spacing: {
257
+ before: index === 0 ? 100 : 0,
258
+ after: index === data.comments.length - 1 ? 100 : 50
259
+ }
260
+ })
261
+ );
262
+ });
263
+ }
264
+
265
+ // Wrap everything in a bordered table
266
+ const table = new docx.Table({
267
+ rows: [
268
+ new docx.TableRow({
269
+ children: [
270
+ new docx.TableCell({
271
+ children: sectionChildren,
272
+ borders: {
273
+ top: { style: docx.BorderStyle.SINGLE, size: 6, color: '000000' },
274
+ bottom: { style: docx.BorderStyle.SINGLE, size: 6, color: '000000' },
275
+ left: { style: docx.BorderStyle.SINGLE, size: 6, color: '000000' },
276
+ right: { style: docx.BorderStyle.SINGLE, size: 6, color: '000000' }
277
+ },
278
+ margins: {
279
+ top: 100,
280
+ bottom: 100,
281
+ left: 100,
282
+ right: 100
283
+ }
284
+ })
285
+ ]
286
+ })
287
+ ],
288
+ width: {
289
+ size: 100,
290
+ type: docx.WidthType.PERCENTAGE
291
+ },
292
+ ...style
293
+ });
294
+
295
+ // Add minimal spacing after comment sections (they look good close together)
296
+ return table;
297
+ }
298
+
299
+ case 'bulletList':
300
+ return new docx.Paragraph({
301
+ text: data,
302
+ bullet: {
303
+ level: style.level || 0,
304
+ },
305
+ ...style
306
+ });
307
+
308
+ case 'numberedList':
309
+ return new docx.Paragraph({
310
+ text: data,
311
+ numbering: {
312
+ reference: style.reference || "default-numbering",
313
+ level: style.level || 0,
314
+ },
315
+ ...style
316
+ });
317
+
318
+ case 'pageBreak':
319
+ return new docx.Paragraph({
320
+ children: [new docx.PageBreak()],
321
+ });
322
+
323
+ case 'textRun':
324
+ return new docx.Paragraph({
325
+ children: [
326
+ new docx.TextRun({ text: data, ...meta }),
327
+ ],
328
+ ...style
329
+ });
330
+
331
+ default:
332
+ // Default to paragraph if type is unknown
333
+ return new docx.Paragraph({
334
+ children: [
335
+ new docx.TextRun({ text: data, ...meta }),
336
+ ],
337
+ ...style
338
+ });
339
+ }
340
+ };
341
+
342
+ /**
343
+ * Creates a Word document with the provided content
344
+ * @param {Object} options - Configuration options for the document
345
+ * @param {string} options.title - The main title of the document
346
+ * @param {string} options.content - Additional content to include
347
+ * @param {Array} options.config - Array of configuration items with type, data, meta, and style
348
+ * @returns {docx.Document} The created Word document
349
+ */
350
+ export const createDocument = ({ title = "React Word Document Example", content = "This is a sample Word document created with docx library.", config = [] }) => {
351
+ // Flatten the children array since some elements return arrays
352
+ const children = config.map((item) => renderElement(item)).flat();
353
+
354
+ return new docx.Document({
355
+ sections: [
356
+ {
357
+ children: children
358
+ }
359
+ ],
360
+ });
361
+ };
362
+
363
+ export default createDocument;
364
+
package/src/@daf/core/components/Document/WordDocument/index.js ADDED
@@ -0,0 +1,9 @@
1
+ import createDocument from './createDocument';
2
+
3
+ const WordDocument = ({ title, content, config } = {}) => {
4
+ const doc = createDocument({ title, content, config });
5
+ return doc;
6
+ };
7
+
8
+ export default WordDocument;
9
+ export { createDocument };
package/src/@daf/core/components/EditForm/storyConfig.js CHANGED
@@ -1,3 +1,3 @@
1
- import { getApiBaseUrl, getAppHeader, storyData } from "./storyConfig2";
1
+ import { getApiBaseUrl, getAppHeader, storyData } from "./storyConfig1";
2
2
 
3
3
  export { getApiBaseUrl, getAppHeader, storyData };