feat: extract various components #868
Conversation
…e into fix/components
Codecov Report
@@ Coverage Diff @@
## main #868 +/- ##
==========================================
+ Coverage 66.09% 66.15% +0.06%
==========================================
Files 86 86
Lines 3120 3122 +2
Branches 611 613 +2
==========================================
+ Hits 2062 2065 +3
+ Misses 1026 1025 -1
Partials 32 32
Continue to review full report at Codecov.
|
size-limit report 📦
|
|
/create-server |
| onChange={handleChange} | ||
| /> | ||
| <InputField | ||
| label="Conform new password" |
There was a problem hiding this comment.
| label="Conform new password" | |
| label="Confirm new password" |
| [styles.success]: type === 'success', | ||
| })} | ||
| > | ||
| {children} |
There was a problem hiding this comment.
Can we call it message? Children to me conveys any arbitrary component tree.
| [styles.error]: type === 'error', | ||
| [styles.success]: type === 'success', |
There was a problem hiding this comment.
This kinda implies it's possible to have both styles.error and styles.success, which is obviously untrue.
Can we rewrite as a pure function?
const getClassnameForType = () => {
switch (type) {
case 'error': return styles.error;
case 'success': return styles.success;
}
}| function confirmDelete(object: string, onConfirm) { | ||
| Swal.fire({ | ||
| title: `Are you sure you want to delete ${object}?`, | ||
| showCancelButton: true, | ||
| confirmButtonText: 'Delete', | ||
| backdrop: true, | ||
| allowOutsideClick: true, | ||
| confirmButtonColor: '#dc3545', | ||
| }).then((result) => { | ||
| if (result.isConfirmed) { | ||
| onConfirm(); | ||
| } | ||
| }); | ||
| } |
There was a problem hiding this comment.
Feels like we are missing one more abstraction: a wrapper around sweetalert2.
That way people don't have to interact with sweetalert2 directly, and if necessary we can replace for something else later.
It would be something more or less like this
https://github.com/pyroscope-io/pyroscope/blob/main/webapp/javascript/ui/Notifications.tsx#L20-L52
Feat/components stories
…e into fix/components
…e into fix/components
ref(frontend) add sweetalert wrapper
…e into fix/components
No description provided.