Skip to content

Commit 7ef7664

Browse files
rubenhensenrubenhensen
authored
feat: upgrade Yivi packages to 1.0.0-beta.1, switch to @deltablot/dropzone (#46)
- Upgrade @privacybydesign/yivi-* from 0.2.1 to 1.0.0-beta.1; update imports to named exports as required by the new package API - Upgrade @e4a/pg-wasm from 0.5.1 to 0.5.5 - Replace dropzone with @deltablot/dropzone and remove @types/dropzone; inline the Dropzone preview template to remove the SSR dependency on UploadedFileTemplate
1 parent f05bbe7 commit 7ef7664

5 files changed

Lines changed: 1290 additions & 756 deletions

File tree

‎package.json‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,16 +54,15 @@
5454
"singleQuote": true
5555
},
5656
"dependencies": {
57-
"@e4a/pg-wasm": "^0.5.1",
57+
"@deltablot/dropzone": "^7.4.3",
58+
"@e4a/pg-wasm": "^0.5.5",
5859
"@iconify/svelte": "^4.0.2",
59-
"@privacybydesign/yivi-client": "^0.2.1",
60-
"@privacybydesign/yivi-core": "^0.2.1",
61-
"@privacybydesign/yivi-css": "^0.2.1",
62-
"@privacybydesign/yivi-web": "^0.2.1",
60+
"@privacybydesign/yivi-client": "^1.0.0-beta.1",
61+
"@privacybydesign/yivi-core": "^1.0.0-beta.1",
62+
"@privacybydesign/yivi-css": "^1.0.0-beta.1",
63+
"@privacybydesign/yivi-web": "^1.0.0-beta.1",
6364
"@transcend-io/conflux": "^6.1.1",
64-
"@types/dropzone": "^5.7.9",
6565
"country-flag-icons": "^1.6.4",
66-
"dropzone": "^6.0.0-beta.2",
6766
"jwt-decode": "^3.1.2",
6867
"libphonenumber-js": "^1.12.31",
6968
"postal-mime": "^1.0.16",

‎src/lib/components/fallback/Decrypt.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
import { tick, onMount } from 'svelte'
55
66
// Yivi
7-
import YiviCore from '@privacybydesign/yivi-core'
8-
import YiviClient from '@privacybydesign/yivi-client'
9-
import YiviWeb from '@privacybydesign/yivi-web'
7+
import { YiviCore } from '@privacybydesign/yivi-core'
8+
import { YiviClient } from '@privacybydesign/yivi-client'
9+
import { YiviWeb } from '@privacybydesign/yivi-web'
1010
import '@privacybydesign/yivi-css'
1111
1212
import jwt_decode from 'jwt-decode'

‎src/lib/components/filesharing/inputs/FileInput.svelte‎

Lines changed: 113 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<script lang="ts">
22
import { _ } from 'svelte-i18n'
33
import { onMount } from 'svelte'
4-
import Dropzone from 'dropzone'
5-
import 'dropzone/dist/dropzone.css'
4+
import Dropzone from '@deltablot/dropzone'
5+
import '@deltablot/dropzone/dist/dropzone.css'
66
import BasketDrawing from '$lib/assets/images/basket_no_plane.svg'
7-
import UploadedFileTemplate from '$lib/components/filesharing/inputs/UploadedFileTemplate.svelte'
7+
import closeIcon from '$lib/assets/images/google-icons/close.svg'
88
import Chip from '$lib/components/Chip.svelte'
99
import { EncryptionState } from '$lib/types/filesharing/attributes'
1010
@@ -37,11 +37,22 @@
3737
let remainingSize = $derived(MAX_UPLOAD_SIZE - totalSize)
3838
let remainingSizeGB = $derived((remainingSize / (1024 * 1024 * 1024)).toFixed(2))
3939
40+
const previewTemplate = `
41+
<div class="dz-preview dz-file-preview files">
42+
<div>
43+
<div><p class="file-title" data-dz-name></p></div>
44+
</div>
45+
<div>
46+
<p data-dz-size></p>
47+
<button class="remove-button" data-dz-remove type="button">
48+
<img class="invert" src="${closeIcon}" alt="remove button" />
49+
</button>
50+
<div class="dz-error-message"><span data-dz-errormessage></span></div>
51+
</div>
52+
</div>`
53+
4054
// handle all the Dropzone setup in onMount to ensure it only runs in the browser
4155
onMount(() => {
42-
// @ts-ignore, it's always set if UploadedFileTemplate is set because it's SSR'd
43-
let previewTemplate = document.querySelector('#template-container').innerHTML
44-
4556
myDropzone = new Dropzone('#my-form', {
4657
url: '#', // Dummy URL, can't be empty
4758
autoProcessQueue: false, // Prevent automatic upload
@@ -83,10 +94,6 @@
8394
class:dropzone-with-files={files.length > 0}
8495
class:hidden={stage === EncryptionState.Done || stage === EncryptionState.Error}
8596
>
86-
<!-- so dropzone can get the template but its invisible -->
87-
<div class="hidden" id="template-container">
88-
<UploadedFileTemplate />
89-
</div>
9097
<div class="dz-message">
9198
<h1 class="file-tagline">
9299
{$_('filesharing.encryptPanel.fileBox.tagline')}
@@ -343,6 +350,102 @@
343350
display: none !important;
344351
}
345352
353+
/* Override Dropzone's default .dz-preview styles */
354+
.dz-previews :global(.dz-preview) {
355+
display: block;
356+
margin: 0;
357+
min-height: 0;
358+
position: relative;
359+
}
360+
361+
/* Preview template styles (injected by Dropzone, so must be :global) */
362+
.dz-previews :global(.files) {
363+
display: flex;
364+
flex-direction: row;
365+
align-items: center;
366+
justify-content: space-between;
367+
gap: 0.5rem;
368+
width: 100%;
369+
margin-bottom: 0;
370+
padding: 8px 0;
371+
border-bottom: 2px solid var(--pg-input-normal-light);
372+
}
373+
374+
.dz-previews :global(.files > div:first-child) {
375+
display: flex;
376+
align-items: center;
377+
gap: 0.5rem;
378+
flex: 1;
379+
min-width: 0;
380+
}
381+
382+
.dz-previews :global(.files > div:first-child > div) {
383+
min-width: 0;
384+
flex: 1;
385+
}
386+
387+
.dz-previews :global(.files > div:last-child) {
388+
display: flex;
389+
align-items: center;
390+
gap: 0.5rem;
391+
flex-shrink: 0;
392+
}
393+
394+
.dz-previews :global(.file-title) {
395+
overflow: hidden;
396+
white-space: nowrap;
397+
font-family: var(--pg-font-family);
398+
font-weight: var(--pg-font-weight-regular);
399+
margin: 0;
400+
color: var(--pg-text);
401+
min-width: 0;
402+
font-size: var(--pg-font-size-sm);
403+
direction: rtl;
404+
text-align: left;
405+
text-overflow: ellipsis;
406+
}
407+
408+
.dz-previews :global(.files > div:last-child p) {
409+
font-family: var(--pg-font-family);
410+
font-weight: var(--pg-font-weight-regular);
411+
margin: 0;
412+
color: var(--pg-text-secondary);
413+
font-size: var(--pg-font-size-sm);
414+
}
415+
416+
.dz-previews :global(.remove-button) {
417+
cursor: pointer;
418+
height: 100%;
419+
padding: 4px 0 4px 4px;
420+
border-radius: var(--pg-border-radius-md);
421+
transition: all 0.2s ease;
422+
display: flex;
423+
align-items: center;
424+
justify-content: center;
425+
pointer-events: auto;
426+
}
427+
428+
.dz-previews :global(.remove-button:hover) {
429+
background-color: var(--pg-soft-background);
430+
}
431+
432+
.dz-previews :global(.remove-button *) {
433+
cursor: pointer;
434+
}
435+
436+
.dz-previews :global(.remove-button img) {
437+
width: 18px;
438+
height: 18px;
439+
}
440+
441+
.dz-previews :global(.dz-error-message) {
442+
display: none;
443+
}
444+
445+
.dz-previews :global(.dz-error .dz-error-message) {
446+
display: block;
447+
}
448+
346449
.add-more-chip-container {
347450
display: flex;
348451
justify-content: center;

‎src/lib/yivi-tools.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { AttributeCon } from '@e4a/pg-wasm'
2-
import YiviCore from '@privacybydesign/yivi-core'
3-
import YiviWeb from '@privacybydesign/yivi-web'
4-
import YiviClient from '@privacybydesign/yivi-client'
2+
import { YiviCore } from '@privacybydesign/yivi-core'
3+
import { YiviWeb } from '@privacybydesign/yivi-web'
4+
import { YiviClient } from '@privacybydesign/yivi-client'
55
import { browser } from '$app/environment'
66

77
async function RetrieveSignKeys(pub: AttributeCon, priv?: AttributeCon): Promise<any> {
@@ -85,4 +85,4 @@ async function RetrieveSignKeys(pub: AttributeCon, priv?: AttributeCon): Promise
8585
.catch((e: Error) => console.error('failed IRMA session: ', e))
8686
}
8787

88-
export { RetrieveSignKeys }
88+
export { RetrieveSignKeys }

0 commit comments

Comments
 (0)