@donotdev/ui 0.0.10 → 0.0.12
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.
- package/dist/components/layout/GameContainer.d.ts +3 -1
- package/dist/components/layout/GameContainer.d.ts.map +1 -1
- package/dist/components/layout/GameContainer.js +3 -2
- package/dist/components/layout/PageContainer.d.ts +1 -1
- package/dist/components/layout/PageContainer.d.ts.map +1 -1
- package/dist/crud/components/EntityCardList.d.ts +16 -0
- package/dist/crud/components/EntityCardList.d.ts.map +1 -0
- package/dist/crud/components/EntityCardList.js +175 -0
- package/dist/crud/components/EntityDisplayRenderer.d.ts +13 -21
- package/dist/crud/components/EntityDisplayRenderer.d.ts.map +1 -1
- package/dist/crud/components/EntityDisplayRenderer.js +138 -23
- package/dist/crud/components/EntityFormRenderer.d.ts +18 -0
- package/dist/crud/components/EntityFormRenderer.d.ts.map +1 -0
- package/dist/crud/components/EntityFormRenderer.js +286 -0
- package/dist/crud/components/EntityList.d.ts +14 -0
- package/dist/crud/components/EntityList.d.ts.map +1 -0
- package/dist/crud/components/EntityList.js +203 -0
- package/dist/crud/components/index.d.ts +7 -5
- package/dist/crud/components/index.d.ts.map +1 -1
- package/dist/crud/components/index.js +6 -5
- package/dist/dndev.css +287 -123
- package/dist/index.js +4 -64
- package/dist/internal/layout/components/AutoMetaTags.d.ts.map +1 -1
- package/dist/internal/layout/components/AutoMetaTags.js +36 -6
- package/dist/internal/layout/components/NextJsAutoMetaTags.d.ts.map +1 -1
- package/dist/internal/layout/components/NextJsAutoMetaTags.js +38 -10
- package/dist/internal/layout/components/footer/FooterBranding.js +2 -2
- package/dist/internal/layout/config/presets/game.d.ts.map +1 -1
- package/dist/internal/layout/config/presets/game.js +10 -5
- package/dist/styles/index.css +287 -123
- package/package.json +13 -13
- package/dist/crud/components/DisplayFieldRenderer.d.ts +0 -26
- package/dist/crud/components/DisplayFieldRenderer.d.ts.map +0 -1
- package/dist/crud/components/DisplayFieldRenderer.js +0 -107
- package/dist/crud/components/fields/display/AvatarFieldDisplay.d.ts +0 -23
- package/dist/crud/components/fields/display/AvatarFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/AvatarFieldDisplay.js +0 -38
- package/dist/crud/components/fields/display/BadgeFieldDisplay.d.ts +0 -21
- package/dist/crud/components/fields/display/BadgeFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/BadgeFieldDisplay.js +0 -31
- package/dist/crud/components/fields/display/ButtonFieldDisplay.d.ts +0 -29
- package/dist/crud/components/fields/display/ButtonFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/ButtonFieldDisplay.js +0 -12
- package/dist/crud/components/fields/display/CheckboxFieldDisplay.d.ts +0 -21
- package/dist/crud/components/fields/display/CheckboxFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/CheckboxFieldDisplay.js +0 -27
- package/dist/crud/components/fields/display/DateFieldDisplay.d.ts +0 -24
- package/dist/crud/components/fields/display/DateFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/DateFieldDisplay.js +0 -41
- package/dist/crud/components/fields/display/DropdownDisplay.d.ts +0 -21
- package/dist/crud/components/fields/display/DropdownDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/DropdownDisplay.js +0 -25
- package/dist/crud/components/fields/display/FileFieldDisplay.d.ts +0 -21
- package/dist/crud/components/fields/display/FileFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/FileFieldDisplay.js +0 -25
- package/dist/crud/components/fields/display/GeoPointFieldDisplay.d.ts +0 -25
- package/dist/crud/components/fields/display/GeoPointFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/GeoPointFieldDisplay.js +0 -25
- package/dist/crud/components/fields/display/HiddenFieldDisplay.d.ts +0 -30
- package/dist/crud/components/fields/display/HiddenFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/HiddenFieldDisplay.js +0 -12
- package/dist/crud/components/fields/display/ImageFieldDisplay.d.ts +0 -24
- package/dist/crud/components/fields/display/ImageFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/ImageFieldDisplay.js +0 -38
- package/dist/crud/components/fields/display/LinkFieldDisplay.d.ts +0 -22
- package/dist/crud/components/fields/display/LinkFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/LinkFieldDisplay.js +0 -48
- package/dist/crud/components/fields/display/MapFieldDisplay.d.ts +0 -25
- package/dist/crud/components/fields/display/MapFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/MapFieldDisplay.js +0 -25
- package/dist/crud/components/fields/display/MultiDropdownDisplay.d.ts +0 -22
- package/dist/crud/components/fields/display/MultiDropdownDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/MultiDropdownDisplay.js +0 -25
- package/dist/crud/components/fields/display/MultiInputTextFieldDisplay.d.ts +0 -22
- package/dist/crud/components/fields/display/MultiInputTextFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/MultiInputTextFieldDisplay.js +0 -25
- package/dist/crud/components/fields/display/NumberFieldDisplay.d.ts +0 -24
- package/dist/crud/components/fields/display/NumberFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/NumberFieldDisplay.js +0 -28
- package/dist/crud/components/fields/display/PasswordFieldDisplay.d.ts +0 -24
- package/dist/crud/components/fields/display/PasswordFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/PasswordFieldDisplay.js +0 -31
- package/dist/crud/components/fields/display/PhoneNumberDisplay.d.ts +0 -22
- package/dist/crud/components/fields/display/PhoneNumberDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/PhoneNumberDisplay.js +0 -25
- package/dist/crud/components/fields/display/RadioFieldDisplay.d.ts +0 -22
- package/dist/crud/components/fields/display/RadioFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/RadioFieldDisplay.js +0 -25
- package/dist/crud/components/fields/display/RangeFieldDisplay.d.ts +0 -22
- package/dist/crud/components/fields/display/RangeFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/RangeFieldDisplay.js +0 -25
- package/dist/crud/components/fields/display/ReferenceFieldDisplay.d.ts +0 -22
- package/dist/crud/components/fields/display/ReferenceFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/ReferenceFieldDisplay.js +0 -26
- package/dist/crud/components/fields/display/RichTextDisplay.d.ts +0 -25
- package/dist/crud/components/fields/display/RichTextDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/RichTextDisplay.js +0 -104
- package/dist/crud/components/fields/display/TextAreaDisplay.d.ts +0 -22
- package/dist/crud/components/fields/display/TextAreaDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/TextAreaDisplay.js +0 -25
- package/dist/crud/components/fields/display/TextFieldDisplay.d.ts +0 -42
- package/dist/crud/components/fields/display/TextFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/TextFieldDisplay.js +0 -97
- package/dist/crud/components/fields/display/TimestampFieldDisplay.d.ts +0 -22
- package/dist/crud/components/fields/display/TimestampFieldDisplay.d.ts.map +0 -1
- package/dist/crud/components/fields/display/TimestampFieldDisplay.js +0 -33
- package/dist/crud/components/fields/display/index.d.ts +0 -32
- package/dist/crud/components/fields/display/index.d.ts.map +0 -1
- package/dist/crud/components/fields/display/index.js +0 -32
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import type { EntityField } from '@donotdev/core';
|
|
2
|
-
import type { ComponentType } from 'react';
|
|
3
|
-
export interface RichTextDisplayProps {
|
|
4
|
-
/** Field configuration */
|
|
5
|
-
config: EntityField<'richtext'>;
|
|
6
|
-
/** HTML value to display */
|
|
7
|
-
value: string;
|
|
8
|
-
/** Translation function */
|
|
9
|
-
t: (key: string, options?: Record<string, any>) => string;
|
|
10
|
-
/** Additional CSS classes */
|
|
11
|
-
className?: string;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* RichTextDisplay - Displays rich text/HTML content in read-only mode
|
|
15
|
-
*
|
|
16
|
-
* Renders HTML with styling that matches Tiptap editor output.
|
|
17
|
-
* Safe to use with HTML from Tiptap (sanitized by Tiptap).
|
|
18
|
-
*
|
|
19
|
-
* @version 0.0.1
|
|
20
|
-
* @since 0.0.1
|
|
21
|
-
* @author AMBROISE PARK Consulting
|
|
22
|
-
*/
|
|
23
|
-
export declare const RichTextDisplay: ComponentType<RichTextDisplayProps>;
|
|
24
|
-
export default RichTextDisplay;
|
|
25
|
-
//# sourceMappingURL=RichTextDisplay.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"RichTextDisplay.d.ts","sourceRoot":"","sources":["../../../../../src/crud/components/fields/display/RichTextDisplay.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,oBAAoB;IACnC,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IAChC,4BAA4B;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC;IAC1D,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,oBAAoB,CAmG/D,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
// packages/ui/src/crud/components/fields/display/RichTextDisplay.tsx
|
|
3
|
-
/**
|
|
4
|
-
* @fileoverview RichTextDisplay component
|
|
5
|
-
* @description Displays rich text/HTML content in read-only mode
|
|
6
|
-
*
|
|
7
|
-
* Renders HTML content from Tiptap editor with proper styling.
|
|
8
|
-
* Uses dangerouslySetInnerHTML for lightweight rendering (no parser needed).
|
|
9
|
-
*
|
|
10
|
-
* @version 0.0.1
|
|
11
|
-
* @since 0.0.1
|
|
12
|
-
* @author AMBROISE PARK Consulting
|
|
13
|
-
*/
|
|
14
|
-
import { Text } from '@donotdev/components';
|
|
15
|
-
/**
|
|
16
|
-
* RichTextDisplay - Displays rich text/HTML content in read-only mode
|
|
17
|
-
*
|
|
18
|
-
* Renders HTML with styling that matches Tiptap editor output.
|
|
19
|
-
* Safe to use with HTML from Tiptap (sanitized by Tiptap).
|
|
20
|
-
*
|
|
21
|
-
* @version 0.0.1
|
|
22
|
-
* @since 0.0.1
|
|
23
|
-
* @author AMBROISE PARK Consulting
|
|
24
|
-
*/
|
|
25
|
-
export const RichTextDisplay = ({ config, value, t, className, }) => {
|
|
26
|
-
if (!value || value.trim() === '') {
|
|
27
|
-
return (_jsx(Text, { as: "span", variant: "muted", className: className, children: "-" }));
|
|
28
|
-
}
|
|
29
|
-
return (_jsxs("div", { className: className, style: {
|
|
30
|
-
padding: 'var(--gap-md)',
|
|
31
|
-
backgroundColor: 'var(--muted)',
|
|
32
|
-
borderRadius: 'var(--radius-md)',
|
|
33
|
-
border: '1px solid var(--border)',
|
|
34
|
-
minHeight: '38px',
|
|
35
|
-
}, children: [_jsx("div", {
|
|
36
|
-
// Safe to use: HTML comes from Tiptap which sanitizes content
|
|
37
|
-
dangerouslySetInnerHTML: { __html: value }, style: {
|
|
38
|
-
// Match Tiptap editor styling
|
|
39
|
-
outline: 'none',
|
|
40
|
-
fontSize: 'var(--font-size-base)',
|
|
41
|
-
lineHeight: '1.6',
|
|
42
|
-
}, className: "prose prose-sm max-w-none" }), _jsx("style", { children: `
|
|
43
|
-
/* Match Tiptap ProseMirror styling */
|
|
44
|
-
.prose p {
|
|
45
|
-
margin: 0.5em 0;
|
|
46
|
-
}
|
|
47
|
-
.prose p:first-child {
|
|
48
|
-
margin-top: 0;
|
|
49
|
-
}
|
|
50
|
-
.prose p:last-child {
|
|
51
|
-
margin-bottom: 0;
|
|
52
|
-
}
|
|
53
|
-
.prose h1 {
|
|
54
|
-
font-size: var(--font-size-2xl);
|
|
55
|
-
font-weight: 600;
|
|
56
|
-
margin: 0.5em 0;
|
|
57
|
-
}
|
|
58
|
-
.prose h2 {
|
|
59
|
-
font-size: var(--font-size-xl);
|
|
60
|
-
font-weight: 600;
|
|
61
|
-
margin: 0.5em 0;
|
|
62
|
-
}
|
|
63
|
-
.prose h3 {
|
|
64
|
-
font-size: var(--font-size-lg);
|
|
65
|
-
font-weight: 600;
|
|
66
|
-
margin: 0.5em 0;
|
|
67
|
-
}
|
|
68
|
-
.prose ul, .prose ol {
|
|
69
|
-
padding-left: 1.5em;
|
|
70
|
-
margin: 0.5em 0;
|
|
71
|
-
}
|
|
72
|
-
.prose li {
|
|
73
|
-
margin: 0.25em 0;
|
|
74
|
-
}
|
|
75
|
-
.prose strong {
|
|
76
|
-
font-weight: 600;
|
|
77
|
-
}
|
|
78
|
-
.prose em {
|
|
79
|
-
font-style: italic;
|
|
80
|
-
}
|
|
81
|
-
.prose code {
|
|
82
|
-
background: var(--muted);
|
|
83
|
-
padding: 0.2em 0.4em;
|
|
84
|
-
border-radius: var(--radius-sm);
|
|
85
|
-
font-family: monospace;
|
|
86
|
-
font-size: 0.9em;
|
|
87
|
-
}
|
|
88
|
-
.prose blockquote {
|
|
89
|
-
border-left: 3px solid var(--border);
|
|
90
|
-
padding-left: 1em;
|
|
91
|
-
margin: 0.5em 0;
|
|
92
|
-
color: var(--muted-foreground);
|
|
93
|
-
font-style: italic;
|
|
94
|
-
}
|
|
95
|
-
.prose a {
|
|
96
|
-
color: var(--primary);
|
|
97
|
-
text-decoration: underline;
|
|
98
|
-
}
|
|
99
|
-
.prose a:hover {
|
|
100
|
-
color: var(--primary-hover);
|
|
101
|
-
}
|
|
102
|
-
` })] }));
|
|
103
|
-
};
|
|
104
|
-
export default RichTextDisplay;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { EntityField } from '@donotdev/core';
|
|
2
|
-
import type { ComponentType } from 'react';
|
|
3
|
-
export interface TextAreaDisplayProps {
|
|
4
|
-
/** Field configuration */
|
|
5
|
-
config: EntityField<'textarea'>;
|
|
6
|
-
/** Value to display */
|
|
7
|
-
value: string;
|
|
8
|
-
/** Translation function */
|
|
9
|
-
t: (key: string, options?: Record<string, any>) => string;
|
|
10
|
-
/** Additional CSS classes */
|
|
11
|
-
className?: string;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* TextAreaDisplay - Displays textarea values in read-only mode
|
|
15
|
-
*
|
|
16
|
-
* @version 0.0.1
|
|
17
|
-
* @since 0.0.1
|
|
18
|
-
* @author AMBROISE PARK Consulting
|
|
19
|
-
*/
|
|
20
|
-
export declare const TextAreaDisplay: ComponentType<TextAreaDisplayProps>;
|
|
21
|
-
export default TextAreaDisplay;
|
|
22
|
-
//# sourceMappingURL=TextAreaDisplay.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextAreaDisplay.d.ts","sourceRoot":"","sources":["../../../../../src/crud/components/fields/display/TextAreaDisplay.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,oBAAoB;IACnC,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;IAChC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC;IAC1D,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,aAAa,CAAC,oBAAoB,CAuB/D,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
// packages/ui/src/crud/components/fields/display/TextAreaDisplay.tsx
|
|
3
|
-
/**
|
|
4
|
-
* @fileoverview TextAreaDisplay component
|
|
5
|
-
* @description Displays textarea values in read-only mode
|
|
6
|
-
*
|
|
7
|
-
* @version 0.0.1
|
|
8
|
-
* @since 0.0.1
|
|
9
|
-
* @author AMBROISE PARK Consulting
|
|
10
|
-
*/
|
|
11
|
-
import { Text } from '@donotdev/components';
|
|
12
|
-
/**
|
|
13
|
-
* TextAreaDisplay - Displays textarea values in read-only mode
|
|
14
|
-
*
|
|
15
|
-
* @version 0.0.1
|
|
16
|
-
* @since 0.0.1
|
|
17
|
-
* @author AMBROISE PARK Consulting
|
|
18
|
-
*/
|
|
19
|
-
export const TextAreaDisplay = ({ config, value, t, className, }) => {
|
|
20
|
-
if (!value) {
|
|
21
|
-
return (_jsx(Text, { as: "span", variant: "muted", className: className, children: "-" }));
|
|
22
|
-
}
|
|
23
|
-
return (_jsx(Text, { as: "div", level: "small", className: `whitespace-pre-wrap ${className || ''}`, children: value }));
|
|
24
|
-
};
|
|
25
|
-
export default TextAreaDisplay;
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import type { EntityField } from '@donotdev/core';
|
|
2
|
-
import type { ComponentType } from 'react';
|
|
3
|
-
export interface TextFieldDisplayProps {
|
|
4
|
-
/** Field configuration */
|
|
5
|
-
config: EntityField<'text' | 'email' | 'month' | 'week' | 'time'>;
|
|
6
|
-
/** Value to display */
|
|
7
|
-
value: string;
|
|
8
|
-
/** Translation function */
|
|
9
|
-
t: (key: string, options?: Record<string, any>) => string;
|
|
10
|
-
/** Additional CSS classes */
|
|
11
|
-
className?: string;
|
|
12
|
-
/** Whether the field is loading */
|
|
13
|
-
loading?: boolean;
|
|
14
|
-
/** Show copy button */
|
|
15
|
-
showCopy?: boolean;
|
|
16
|
-
/** Show as badge */
|
|
17
|
-
asBadge?: boolean;
|
|
18
|
-
/** Truncate long text */
|
|
19
|
-
truncate?: boolean;
|
|
20
|
-
/** Maximum length before truncation */
|
|
21
|
-
maxLength?: number;
|
|
22
|
-
/** Show field label */
|
|
23
|
-
showLabel?: boolean;
|
|
24
|
-
}
|
|
25
|
-
/**
|
|
26
|
-
* Enhanced TextFieldDisplay with modern UX features
|
|
27
|
-
*
|
|
28
|
-
* Features:
|
|
29
|
-
* - Smart formatting based on field type
|
|
30
|
-
* - Copy to clipboard functionality
|
|
31
|
-
* - Truncation with tooltips
|
|
32
|
-
* - Badge display option
|
|
33
|
-
* - Loading states
|
|
34
|
-
* - Responsive design
|
|
35
|
-
*
|
|
36
|
-
* @version 0.0.1
|
|
37
|
-
* @since 0.0.1
|
|
38
|
-
* @author AMBROISE PARK Consulting
|
|
39
|
-
*/
|
|
40
|
-
export declare const TextFieldDisplay: ComponentType<TextFieldDisplayProps>;
|
|
41
|
-
export default TextFieldDisplay;
|
|
42
|
-
//# sourceMappingURL=TextFieldDisplay.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TextFieldDisplay.d.ts","sourceRoot":"","sources":["../../../../../src/crud/components/fields/display/TextFieldDisplay.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,qBAAqB;IACpC,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;IAClE,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC;IAC1D,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,gBAAgB,EAAE,aAAa,CAAC,qBAAqB,CA8JjE,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
// packages/ui/src/crud/components/fields/display/TextFieldDisplay.tsx
|
|
3
|
-
/**
|
|
4
|
-
* @fileoverview TextFieldDisplay component
|
|
5
|
-
* @description Enhanced text field display with modern UX features
|
|
6
|
-
*
|
|
7
|
-
* @version 0.0.1
|
|
8
|
-
* @since 0.0.1
|
|
9
|
-
* @author AMBROISE PARK Consulting
|
|
10
|
-
*/
|
|
11
|
-
import { Copy, Mail, Calendar, Clock } from 'lucide-react';
|
|
12
|
-
import { useState } from 'react';
|
|
13
|
-
import { Skeleton, Badge, BADGE_VARIANT, Button, Text, cn, CopyToClipboard, Stack, } from '@donotdev/components';
|
|
14
|
-
import { getWeekFromISOString } from '@donotdev/core';
|
|
15
|
-
/**
|
|
16
|
-
* Enhanced TextFieldDisplay with modern UX features
|
|
17
|
-
*
|
|
18
|
-
* Features:
|
|
19
|
-
* - Smart formatting based on field type
|
|
20
|
-
* - Copy to clipboard functionality
|
|
21
|
-
* - Truncation with tooltips
|
|
22
|
-
* - Badge display option
|
|
23
|
-
* - Loading states
|
|
24
|
-
* - Responsive design
|
|
25
|
-
*
|
|
26
|
-
* @version 0.0.1
|
|
27
|
-
* @since 0.0.1
|
|
28
|
-
* @author AMBROISE PARK Consulting
|
|
29
|
-
*/
|
|
30
|
-
export const TextFieldDisplay = ({ config, value, t, className, loading = false, showCopy = false, asBadge = false, truncate = false, maxLength = 50, showLabel = false, }) => {
|
|
31
|
-
const [copied, setCopied] = useState(false);
|
|
32
|
-
const handleCopy = async () => {
|
|
33
|
-
try {
|
|
34
|
-
await navigator.clipboard.writeText(value);
|
|
35
|
-
setCopied(true);
|
|
36
|
-
setTimeout(() => setCopied(false), 2000);
|
|
37
|
-
}
|
|
38
|
-
catch (err) {
|
|
39
|
-
console.error('Failed to copy text:', err);
|
|
40
|
-
}
|
|
41
|
-
};
|
|
42
|
-
const getFieldIcon = () => {
|
|
43
|
-
switch (config.type) {
|
|
44
|
-
case 'email':
|
|
45
|
-
return _jsx(Mail, {});
|
|
46
|
-
case 'month':
|
|
47
|
-
case 'week':
|
|
48
|
-
return _jsx(Calendar, {});
|
|
49
|
-
case 'time':
|
|
50
|
-
return _jsx(Clock, {});
|
|
51
|
-
default:
|
|
52
|
-
return null;
|
|
53
|
-
}
|
|
54
|
-
};
|
|
55
|
-
const formatValue = (val) => {
|
|
56
|
-
if (!val)
|
|
57
|
-
return null;
|
|
58
|
-
switch (config.type) {
|
|
59
|
-
case 'email':
|
|
60
|
-
return (_jsxs("a", { href: `mailto:${val}`, style: {
|
|
61
|
-
display: 'flex',
|
|
62
|
-
alignItems: 'center',
|
|
63
|
-
gap: 'var(--gap-sm)',
|
|
64
|
-
}, onMouseEnter: (e) => (e.currentTarget.style.textDecoration = 'underline'), onMouseLeave: (e) => (e.currentTarget.style.textDecoration = 'none'), children: [getFieldIcon(), val] }));
|
|
65
|
-
case 'month':
|
|
66
|
-
return new Date(val).toLocaleDateString('en-US', {
|
|
67
|
-
year: 'numeric',
|
|
68
|
-
month: 'long',
|
|
69
|
-
});
|
|
70
|
-
case 'week':
|
|
71
|
-
// Use the centralized date utility for week calculation
|
|
72
|
-
return getWeekFromISOString(val);
|
|
73
|
-
case 'time':
|
|
74
|
-
return new Date(`2000-01-01T${val}`).toLocaleTimeString();
|
|
75
|
-
default:
|
|
76
|
-
return val;
|
|
77
|
-
}
|
|
78
|
-
};
|
|
79
|
-
const getTruncatedValue = (val) => {
|
|
80
|
-
if (!truncate || val.length <= maxLength)
|
|
81
|
-
return val;
|
|
82
|
-
return `${val.substring(0, maxLength)}...`;
|
|
83
|
-
};
|
|
84
|
-
if (loading) {
|
|
85
|
-
return (_jsxs(Stack, { gap: "tight", children: [showLabel && _jsx(Skeleton, { style: { height: '1rem', width: '6rem' } }), _jsx(Skeleton, { className: "dndev-w-full", style: { height: '1.5rem' } })] }));
|
|
86
|
-
}
|
|
87
|
-
if (!value) {
|
|
88
|
-
return (_jsxs(Stack, { gap: "tight", children: [showLabel && (_jsx(Text, { as: "span", variant: "muted", children: config.label || config.name })), _jsx(Text, { as: "span", variant: "muted", className: cn(className), style: { fontStyle: 'italic' }, children: t('common.noValue', { defaultValue: 'No value' }) })] }));
|
|
89
|
-
}
|
|
90
|
-
const displayValue = formatValue(value);
|
|
91
|
-
const truncatedValue = getTruncatedValue(String(displayValue));
|
|
92
|
-
if (asBadge) {
|
|
93
|
-
return (_jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [getFieldIcon(), _jsx(Badge, { variant: BADGE_VARIANT.SECONDARY, className: className, children: truncatedValue }), showCopy && (_jsx(CopyToClipboard, { text: value, tooltipText: t('copyToClipboard') || 'Copy to clipboard', copiedTooltipText: t('copied') || 'Copied!', ariaLabel: t('copyToClipboard') || 'Copy to clipboard' }))] }));
|
|
94
|
-
}
|
|
95
|
-
return (_jsxs(Stack, { gap: "tight", children: [showLabel && (_jsx(Text, { as: "span", variant: "muted", children: config.label || config.name })), _jsxs(Stack, { direction: "row", align: "center", gap: "tight", children: [_jsx("div", { className: cn('dndev-flex-1', truncate && 'truncate', className), title: truncate && value.length > maxLength ? value : undefined, children: _jsx(Text, { as: "span", children: truncatedValue }) }), showCopy && (_jsx(CopyToClipboard, { text: value, tooltipText: t('copyToClipboard') || 'Copy to clipboard', copiedTooltipText: t('copied') || 'Copied!', ariaLabel: t('copyToClipboard') || 'Copy to clipboard' }))] })] }));
|
|
96
|
-
};
|
|
97
|
-
export default TextFieldDisplay;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { EntityField } from '@donotdev/core';
|
|
2
|
-
import type { ComponentType } from 'react';
|
|
3
|
-
export interface TimestampFieldDisplayProps {
|
|
4
|
-
/** Field configuration */
|
|
5
|
-
config: EntityField<'timestamp'>;
|
|
6
|
-
/** Value to display */
|
|
7
|
-
value: string | number;
|
|
8
|
-
/** Translation function */
|
|
9
|
-
t: (key: string, options?: Record<string, any>) => string;
|
|
10
|
-
/** Additional CSS classes */
|
|
11
|
-
className?: string;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* TimestampFieldDisplay - Displays timestamp values in read-only mode
|
|
15
|
-
*
|
|
16
|
-
* @version 0.0.1
|
|
17
|
-
* @since 0.0.1
|
|
18
|
-
* @author AMBROISE PARK Consulting
|
|
19
|
-
*/
|
|
20
|
-
export declare const TimestampFieldDisplay: ComponentType<TimestampFieldDisplayProps>;
|
|
21
|
-
export default TimestampFieldDisplay;
|
|
22
|
-
//# sourceMappingURL=TimestampFieldDisplay.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TimestampFieldDisplay.d.ts","sourceRoot":"","sources":["../../../../../src/crud/components/fields/display/TimestampFieldDisplay.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,MAAM,WAAW,0BAA0B;IACzC,0BAA0B;IAC1B,MAAM,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IACjC,uBAAuB;IACvB,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,2BAA2B;IAC3B,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,MAAM,CAAC;IAC1D,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,aAAa,CAC/C,0BAA0B,CA8B3B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
// packages/ui/src/crud/components/fields/display/TimestampFieldDisplay.tsx
|
|
3
|
-
/**
|
|
4
|
-
* @fileoverview TimestampFieldDisplay component
|
|
5
|
-
* @description Displays timestamp values in read-only mode
|
|
6
|
-
*
|
|
7
|
-
* @version 0.0.1
|
|
8
|
-
* @since 0.0.1
|
|
9
|
-
* @author AMBROISE PARK Consulting
|
|
10
|
-
*/
|
|
11
|
-
import { Text } from '@donotdev/components';
|
|
12
|
-
/**
|
|
13
|
-
* TimestampFieldDisplay - Displays timestamp values in read-only mode
|
|
14
|
-
*
|
|
15
|
-
* @version 0.0.1
|
|
16
|
-
* @since 0.0.1
|
|
17
|
-
* @author AMBROISE PARK Consulting
|
|
18
|
-
*/
|
|
19
|
-
export const TimestampFieldDisplay = ({ config, value, t, className }) => {
|
|
20
|
-
if (!value) {
|
|
21
|
-
return (_jsx(Text, { as: "span", variant: "muted", className: className, children: "-" }));
|
|
22
|
-
}
|
|
23
|
-
try {
|
|
24
|
-
const date = new Date(value);
|
|
25
|
-
const formattedDate = date.toLocaleDateString();
|
|
26
|
-
const formattedTime = date.toLocaleTimeString();
|
|
27
|
-
return (_jsxs("div", { className: className, children: [_jsx(Text, { as: "span", children: formattedDate }), _jsx(Text, { as: "span", variant: "muted", level: "small", children: formattedTime })] }));
|
|
28
|
-
}
|
|
29
|
-
catch (error) {
|
|
30
|
-
return (_jsx(Text, { as: "span", variant: "muted", className: className, children: "-" }));
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
export default TimestampFieldDisplay;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @fileoverview Display field components
|
|
3
|
-
* @description Read-only display components for CRUD operations
|
|
4
|
-
*
|
|
5
|
-
* @version 0.0.1
|
|
6
|
-
* @since 0.0.1
|
|
7
|
-
* @author AMBROISE PARK Consulting
|
|
8
|
-
*/
|
|
9
|
-
export { default as TextFieldDisplay } from './TextFieldDisplay';
|
|
10
|
-
export { default as BadgeFieldDisplay } from './BadgeFieldDisplay';
|
|
11
|
-
export { default as AvatarFieldDisplay } from './AvatarFieldDisplay';
|
|
12
|
-
export { default as LinkFieldDisplay } from './LinkFieldDisplay';
|
|
13
|
-
export { default as DateFieldDisplay } from './DateFieldDisplay';
|
|
14
|
-
export { default as NumberFieldDisplay } from './NumberFieldDisplay';
|
|
15
|
-
export { default as PhoneNumberDisplay } from './PhoneNumberDisplay';
|
|
16
|
-
export { default as TextAreaDisplay } from './TextAreaDisplay';
|
|
17
|
-
export { default as RichTextDisplay } from './RichTextDisplay';
|
|
18
|
-
export { default as CheckboxFieldDisplay } from './CheckboxFieldDisplay';
|
|
19
|
-
export { default as DropdownDisplay } from './DropdownDisplay';
|
|
20
|
-
export { default as MultiDropdownDisplay } from './MultiDropdownDisplay';
|
|
21
|
-
export { default as MultiInputTextFieldDisplay } from './MultiInputTextFieldDisplay';
|
|
22
|
-
export { default as RadioFieldDisplay } from './RadioFieldDisplay';
|
|
23
|
-
export { default as RangeFieldDisplay } from './RangeFieldDisplay';
|
|
24
|
-
export { default as FileFieldDisplay } from './FileFieldDisplay';
|
|
25
|
-
export { default as ImageFieldDisplay } from './ImageFieldDisplay';
|
|
26
|
-
export { default as GeoPointFieldDisplay } from './GeoPointFieldDisplay';
|
|
27
|
-
export { default as MapFieldDisplay } from './MapFieldDisplay';
|
|
28
|
-
export { default as ReferenceFieldDisplay } from './ReferenceFieldDisplay';
|
|
29
|
-
export { default as TimestampFieldDisplay } from './TimestampFieldDisplay';
|
|
30
|
-
export { default as HiddenFieldDisplay } from './HiddenFieldDisplay';
|
|
31
|
-
export { default as ButtonFieldDisplay } from './ButtonFieldDisplay';
|
|
32
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/crud/components/fields/display/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,0BAA0B,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
// packages/ui/src/crud/components/fields/display/index.ts
|
|
2
|
-
/**
|
|
3
|
-
* @fileoverview Display field components
|
|
4
|
-
* @description Read-only display components for CRUD operations
|
|
5
|
-
*
|
|
6
|
-
* @version 0.0.1
|
|
7
|
-
* @since 0.0.1
|
|
8
|
-
* @author AMBROISE PARK Consulting
|
|
9
|
-
*/
|
|
10
|
-
export { default as TextFieldDisplay } from './TextFieldDisplay';
|
|
11
|
-
export { default as BadgeFieldDisplay } from './BadgeFieldDisplay';
|
|
12
|
-
export { default as AvatarFieldDisplay } from './AvatarFieldDisplay';
|
|
13
|
-
export { default as LinkFieldDisplay } from './LinkFieldDisplay';
|
|
14
|
-
export { default as DateFieldDisplay } from './DateFieldDisplay';
|
|
15
|
-
export { default as NumberFieldDisplay } from './NumberFieldDisplay';
|
|
16
|
-
export { default as PhoneNumberDisplay } from './PhoneNumberDisplay';
|
|
17
|
-
export { default as TextAreaDisplay } from './TextAreaDisplay';
|
|
18
|
-
export { default as RichTextDisplay } from './RichTextDisplay';
|
|
19
|
-
export { default as CheckboxFieldDisplay } from './CheckboxFieldDisplay';
|
|
20
|
-
export { default as DropdownDisplay } from './DropdownDisplay';
|
|
21
|
-
export { default as MultiDropdownDisplay } from './MultiDropdownDisplay';
|
|
22
|
-
export { default as MultiInputTextFieldDisplay } from './MultiInputTextFieldDisplay';
|
|
23
|
-
export { default as RadioFieldDisplay } from './RadioFieldDisplay';
|
|
24
|
-
export { default as RangeFieldDisplay } from './RangeFieldDisplay';
|
|
25
|
-
export { default as FileFieldDisplay } from './FileFieldDisplay';
|
|
26
|
-
export { default as ImageFieldDisplay } from './ImageFieldDisplay';
|
|
27
|
-
export { default as GeoPointFieldDisplay } from './GeoPointFieldDisplay';
|
|
28
|
-
export { default as MapFieldDisplay } from './MapFieldDisplay';
|
|
29
|
-
export { default as ReferenceFieldDisplay } from './ReferenceFieldDisplay';
|
|
30
|
-
export { default as TimestampFieldDisplay } from './TimestampFieldDisplay';
|
|
31
|
-
export { default as HiddenFieldDisplay } from './HiddenFieldDisplay';
|
|
32
|
-
export { default as ButtonFieldDisplay } from './ButtonFieldDisplay';
|