feat(components): add Attribute, Card and EditableCard components

testgen/ui/components/frontend/css/shared.css

@@ -149,6 +149,9 @@ body {
     font-size: 12px;
     color: var(--caption-text-color);
 }
+.text-capitalize {
+    text-transform: capitalize;
+}
 /*  */
 
 /* Flex utilities */

testgen/ui/components/frontend/js/components/attribute.js

@@ -0,0 +1,39 @@
+/**
+ * @typedef Properties
+ * @type {object}
+ * @property {string} label
+ * @property {string | number} value
+ * @property {number?} width
+ */
+import { getValue, loadStylesheet } from '../utils.js';
+import van from '../van.min.js';
+
+const { div } = van.tags;
+
+const Attribute = (/** @type Properties */ props) => {
+    loadStylesheet('attribute', stylesheet);
+
+    return div(
+        { style: () => `width: ${props.width ? getValue(props.width) + 'px' : 'auto'}` },
+        div(
+            { class: 'text-caption text-capitalize mb-1' },
+            props.label,
+        ),
+        div(
+            { class: 'attribute-value' },
+            () => {
+                const value = getValue(props.value);
+                return (value || value === 0) ? value : '--';
+            },
+        ),
+    );
+};
+
+const stylesheet = new CSSStyleSheet();
+stylesheet.replace(`
+.attribute-value {
+    word-wrap: break-word;
+}
+`);
+
+export { Attribute };

testgen/ui/components/frontend/js/components/card.js

@@ -0,0 +1,47 @@
+/**
+ * @typedef Properties
+ * @type {object}
+ * @property {string} title
+ * @property {object} content
+ * @property {object?} actionContent
+ */
+import { loadStylesheet } from '../utils.js';
+import van from '../van.min.js';
+
+const { div, h3 } = van.tags;
+
+const Card = (/** @type Properties */ props) => {
+    loadStylesheet('card', stylesheet);
+
+    return div(
+        { class: 'tg-card mb-4' },
+        div(
+            { class: 'flex-row fx-justify-space-between fx-align-flex-start' },
+            h3(
+                { class: 'tg-card--title' },
+                props.title,
+            ),
+            props.actionContent,
+        ),
+        props.content,
+    );
+};
+
+const stylesheet = new CSSStyleSheet();
+stylesheet.replace(`
+.tg-card {
+    border-radius: 8px;
+    background-color: var(--dk-card-background);
+    padding: 16px;
+}
+
+.tg-card--title {
+    margin: 0 0 16px;
+    color: var(--secondary-text-color);
+    font-size: 16px;
+    font-weight: 500;
+    text-transform: capitalize;
+}
+`);
+
+export { Card };

testgen/ui/components/frontend/js/components/editable_card.js

@@ -0,0 +1,64 @@
+/**
+ * @typedef Properties
+ * @type {object}
+ * @property {string} title
+ * @property {object} content
+ * @property {object} editingContent
+ * @property {function} onSave
+ * @property {function?} onCancel
+ * @property {function?} hasChanges
+ */
+import { getValue } from '../utils.js';
+import van from '../van.min.js';
+import { Card } from './card.js';
+import { Button } from './button.js';
+
+const { div } = van.tags;
+
+const EditableCard = (/** @type Properties */ props) => {
+    const editing = van.state(false);
+    const onCancel = van.derive(() => {
+        const cancelFunction = props.onCancel?.val ?? props.onCancel;
+        return () => {
+            editing.val = false;
+            cancelFunction?.();
+        }
+    });
+    const saveDisabled = van.derive(() => {
+        const hasChanges = props.hasChanges?.val ?? props.hasChanges;
+        return !hasChanges?.();
+    });
+
+    return Card({
+        title: props.title,
+        content: [
+            () => editing.val ? getValue(props.editingContent) : getValue(props.content),
+            () => editing.val ? div(
+                { class: 'flex-row fx-justify-content-flex-end fx-gap-3 mt-4' },
+                Button({
+                    type: 'stroked',
+                    label: 'Cancel',
+                    width: 'auto',
+                    onclick: onCancel,
+                }),
+                Button({
+                    type: 'stroked',
+                    color: 'primary',
+                    label: 'Save',
+                    width: 'auto',
+                    disabled: saveDisabled,
+                    onclick: props.onSave,
+                }),
+            ) : '',
+        ],
+        actionContent: () => !editing.val ? Button({
+            type: 'stroked',
+            label: 'Edit',
+            icon: 'edit',
+            width: 'auto',
+            onclick: () => editing.val = true,
+        }) : '',
+    });
+};
+
+export { EditableCard };