From 5b47fd7b53976b756d78f75212de5bfef48b7c38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com> Date: Sun, 17 Sep 2023 23:03:19 +0200 Subject: [PATCH] feat: lib ui --- package.json | 11 ++- pnpm-lock.yaml | 126 ++++++++++++++++++++++++------ src/lib/components/Toaster.svelte | 55 +++++++++++++ svelte.config.js | 9 +-- 4 files changed, 169 insertions(+), 32 deletions(-) create mode 100644 src/lib/components/Toaster.svelte diff --git a/package.json b/package.json index 1b4b1f8..2367b69 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,14 @@ "dependencies": { "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", + "lucide-svelte": "^0.279.0", "marked": "^7.0.1", "svelte-boring-avatars": "^1.2.4", - "tailwind-merge": "^1.14.0", - "zod": "^3.21.4" + "tailwind-merge": "^1.14.0" }, "devDependencies": { + "@melt-ui/pp": "^0.1.2", + "@melt-ui/svelte": "^0.50.0", "@playwright/test": "^1.28.1", "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/adapter-node": "^1.3.1", @@ -41,10 +43,13 @@ "prettier-plugin-tailwindcss": "^0.4.1", "svelte": "^4.0.5", "svelte-check": "^3.4.3", + "svelte-sequential-preprocessor": "^2.0.1", + "sveltekit-superforms": "^1.7.0", "tailwindcss": "^3.3.3", "tslib": "^2.4.1", "typescript": "^5.0.0", "vite": "^4.4.2", - "vitest": "^0.32.2" + "vitest": "^0.32.2", + "zod": "^3.21.4" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8b3cc81..1c8f4df 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ dependencies: clsx: specifier: ^2.0.0 version: 2.0.0 + lucide-svelte: + specifier: ^0.279.0 + version: 0.279.0(svelte@4.1.1) marked: specifier: ^7.0.1 version: 7.0.1 @@ -20,11 +23,14 @@ dependencies: tailwind-merge: specifier: ^1.14.0 version: 1.14.0 - zod: - specifier: ^3.21.4 - version: 3.21.4 devDependencies: + '@melt-ui/pp': + specifier: ^0.1.2 + version: 0.1.2(@melt-ui/svelte@0.50.0)(svelte@4.1.1) + '@melt-ui/svelte': + specifier: ^0.50.0 + version: 0.50.0(svelte@4.1.1) '@playwright/test': specifier: ^1.28.1 version: 1.36.2 @@ -76,6 +82,12 @@ devDependencies: svelte-check: specifier: ^3.4.3 version: 3.4.6(postcss@8.4.27)(svelte@4.1.1) + svelte-sequential-preprocessor: + specifier: ^2.0.1 + version: 2.0.1 + sveltekit-superforms: + specifier: ^1.7.0 + version: 1.7.0(@sveltejs/kit@1.22.3)(svelte@4.1.1)(zod@3.21.4) tailwindcss: specifier: ^3.3.3 version: 3.3.3 @@ -91,6 +103,9 @@ devDependencies: vitest: specifier: ^0.32.2 version: 0.32.4 + zod: + specifier: ^3.21.4 + version: 3.21.4 packages: @@ -110,7 +125,6 @@ packages: dependencies: '@jridgewell/gen-mapping': 0.3.3 '@jridgewell/trace-mapping': 0.3.18 - dev: true /@esbuild/android-arm64@0.18.17: resolution: {integrity: sha512-9np+YYdNDed5+Jgr1TdWBsozZ85U1Oa3xW0c7TWqH0y2aGghXtZsuT8nYRbzOMcl0bXZXjOGbksoTtVOlWrRZg==} @@ -347,6 +361,23 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true + /@floating-ui/core@1.5.0: + resolution: {integrity: sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==} + dependencies: + '@floating-ui/utils': 0.1.3 + dev: true + + /@floating-ui/dom@1.5.3: + resolution: {integrity: sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==} + dependencies: + '@floating-ui/core': 1.5.0 + '@floating-ui/utils': 0.1.3 + dev: true + + /@floating-ui/utils@0.1.3: + resolution: {integrity: sha512-uvnFKtPgzLnpzzTRfhDlvXX0kLYi9lDRQbcDmT8iXl71Rx+uwSuaUIQl3DNC7w5OweAQ7XQMDObML+KaYDQfng==} + dev: true + /@humanwhocodes/config-array@0.11.10: resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==} engines: {node: '>=10.10.0'} @@ -381,31 +412,49 @@ packages: '@jridgewell/set-array': 1.1.2 '@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/trace-mapping': 0.3.18 - dev: true /@jridgewell/resolve-uri@3.1.0: resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==} engines: {node: '>=6.0.0'} - dev: true /@jridgewell/set-array@1.1.2: resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==} engines: {node: '>=6.0.0'} - dev: true /@jridgewell/sourcemap-codec@1.4.14: resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==} - dev: true /@jridgewell/sourcemap-codec@1.4.15: resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} - dev: true /@jridgewell/trace-mapping@0.3.18: resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==} dependencies: '@jridgewell/resolve-uri': 3.1.0 '@jridgewell/sourcemap-codec': 1.4.14 + + /@melt-ui/pp@0.1.2(@melt-ui/svelte@0.50.0)(svelte@4.1.1): + resolution: {integrity: sha512-GZeqp7UWLNZUC2dJpREnZrWMR88vy27WO7C3cIBz4KW3/CFD19FjNkd3VbSRfcRryrMkdnEs9nu2VUa8/0u58w==} + engines: {pnpm: '>=8.6.3'} + peerDependencies: + '@melt-ui/svelte': '>= 0.29.0' + svelte: ^3.55.0 || ^4.0.0 + dependencies: + '@melt-ui/svelte': 0.50.0(svelte@4.1.1) + svelte: 4.1.1 + dev: true + + /@melt-ui/svelte@0.50.0(svelte@4.1.1): + resolution: {integrity: sha512-NcWwxwStXq77/yOuBfnGkuJdUta3M4SwqZECdaRpAQ61BHI3qz7WW2ZM42JmDvGSs9W6ww2kZFNF8XNTO92CdA==} + peerDependencies: + svelte: '>=3 <5' + dependencies: + '@floating-ui/core': 1.5.0 + '@floating-ui/dom': 1.5.3 + dequal: 2.0.3 + focus-trap: 7.5.2 + nanoid: 4.0.2 + svelte: 4.1.1 dev: true /@nodelib/fs.scandir@2.1.5: @@ -612,7 +661,6 @@ packages: /@types/estree@1.0.1: resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==} - dev: true /@types/json-schema@7.0.12: resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==} @@ -823,7 +871,6 @@ packages: resolution: {integrity: sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==} engines: {node: '>=0.4.0'} hasBin: true - dev: true /ajv@6.12.6: resolution: {integrity: sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==} @@ -875,7 +922,6 @@ packages: resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==} dependencies: dequal: 2.0.3 - dev: true /array-union@2.1.0: resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==} @@ -906,7 +952,6 @@ packages: resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==} dependencies: dequal: 2.0.3 - dev: true /balanced-match@1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -1042,7 +1087,6 @@ packages: acorn: 8.10.0 estree-walker: 3.0.3 periscopic: 3.1.0 - dev: true /color-convert@2.0.1: resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} @@ -1088,7 +1132,6 @@ packages: dependencies: mdn-data: 2.0.30 source-map-js: 1.0.2 - dev: true /cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} @@ -1127,7 +1170,6 @@ packages: /dequal@2.0.3: resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} engines: {node: '>=6'} - dev: true /detect-indent@6.1.0: resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==} @@ -1362,7 +1404,6 @@ packages: resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} dependencies: '@types/estree': 1.0.1 - dev: true /esutils@2.0.3: resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} @@ -1432,6 +1473,12 @@ packages: resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==} dev: true + /focus-trap@7.5.2: + resolution: {integrity: sha512-p6vGNNWLDGwJCiEjkSK6oERj/hEyI9ITsSwIUICBoKLlWiTWXJRfQibCwcoi50rTZdbi87qDtUlMCmQwsGSgPw==} + dependencies: + tabbable: 6.2.0 + dev: true + /fraction.js@4.2.0: resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==} dev: true @@ -1631,7 +1678,6 @@ packages: resolution: {integrity: sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==} dependencies: '@types/estree': 1.0.1 - dev: true /isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} @@ -1694,7 +1740,6 @@ packages: /locate-character@3.0.0: resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==} - dev: true /locate-path@6.0.0: resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} @@ -1720,6 +1765,14 @@ packages: yallist: 4.0.0 dev: true + /lucide-svelte@0.279.0(svelte@4.1.1): + resolution: {integrity: sha512-u9j8tMPxWsv5iXJvrUU/jpyML/k49flr7440UE8QM9V3u0OZt5+qaY5TMiPDTVRMdEELBg4d4ueW1+3Mo3VT4A==} + peerDependencies: + svelte: '>=3 <5' + dependencies: + svelte: 4.1.1 + dev: false + /magic-string@0.27.0: resolution: {integrity: sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==} engines: {node: '>=12'} @@ -1732,7 +1785,6 @@ packages: engines: {node: '>=12'} dependencies: '@jridgewell/sourcemap-codec': 1.4.15 - dev: true /marked@7.0.1: resolution: {integrity: sha512-m8Aze620Ts62yaciz2DghZGUkUfdgvSNRicS2/XtQkStMNoce3NWjOD2b/jWF32+XXK6udM6pRhv2dKNlneAFA==} @@ -1742,7 +1794,6 @@ packages: /mdn-data@2.0.30: resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} - dev: true /merge2@1.4.1: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} @@ -1829,6 +1880,12 @@ packages: hasBin: true dev: true + /nanoid@4.0.2: + resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==} + engines: {node: ^14 || ^16 || >=18} + hasBin: true + dev: true + /natural-compare-lite@1.4.0: resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==} dev: true @@ -1945,7 +2002,6 @@ packages: '@types/estree': 1.0.1 estree-walker: 3.0.3 is-reference: 3.0.1 - dev: true /picocolors@1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} @@ -2315,7 +2371,6 @@ packages: /source-map-js@1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} - dev: true /stackback@0.0.2: resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} @@ -2486,6 +2541,14 @@ packages: typescript: 5.1.6 dev: true + /svelte-sequential-preprocessor@2.0.1: + resolution: {integrity: sha512-N5JqlBni6BzElxmuFrOPxOJnjsxh1cFDACLEVKs8OHBcx8ZNRO1p5SxuQex1m3qbLzAC8G99EHeWcxGkjyKjLQ==} + engines: {node: '>=16'} + dependencies: + svelte: 4.1.1 + tslib: 2.6.1 + dev: true + /svelte@4.1.1: resolution: {integrity: sha512-Enick5fPFISLoVy0MFK45cG+YlQt6upw8skEK9zzTpJnH1DqEv8xOZwizCGSo3Q6HZ7KrZTM0J18poF7aQg5zw==} engines: {node: '>=16'} @@ -2503,6 +2566,21 @@ packages: locate-character: 3.0.0 magic-string: 0.30.1 periscopic: 3.1.0 + + /sveltekit-superforms@1.7.0(@sveltejs/kit@1.22.3)(svelte@4.1.1)(zod@3.21.4): + resolution: {integrity: sha512-mHfQp2sps2K55zsf3GdowgdokYDl5N4IOanHL/Ydi7F+YL5I9Ry2CrZoCIB4uPaX0/hUKW5DbAcHPLGq+sAAaQ==} + peerDependencies: + '@sveltejs/kit': 1.x + svelte: 3.x || 4.x + zod: 3.x + dependencies: + '@sveltejs/kit': 1.22.3(svelte@4.1.1)(vite@4.4.7) + svelte: 4.1.1 + zod: 3.21.4 + dev: true + + /tabbable@6.2.0: + resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==} dev: true /tailwind-merge@1.14.0: @@ -2841,4 +2919,4 @@ packages: /zod@3.21.4: resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==} - dev: false + dev: true diff --git a/src/lib/components/Toaster.svelte b/src/lib/components/Toaster.svelte new file mode 100644 index 0000000..8df806e --- /dev/null +++ b/src/lib/components/Toaster.svelte @@ -0,0 +1,55 @@ + + + + +
+ {#each $toasts as { id, data } (id)} +
+
+
+

+ {data.title} + +

+
+ {data.description} +
+
+ +
+
+ {/each} +
diff --git a/svelte.config.js b/svelte.config.js index 2214c60..293ab29 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,12 +1,12 @@ +import { preprocessMeltUI } from '@melt-ui/pp'; +import sequence from 'svelte-sequential-preprocessor'; import adapter from '@sveltejs/adapter-node'; import { vitePreprocess } from '@sveltejs/kit/vite'; - -/** @type {import('@sveltejs/kit').Config} */ +/** @type {import('@sveltejs/kit').Config}*/ const config = { // Consult https://kit.svelte.dev/docs/integrations#preprocessors // for more information about preprocessors - preprocess: vitePreprocess(), - + preprocess: sequence([vitePreprocess(), preprocessMeltUI()]), kit: { // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. // If your environment is not supported or you settled on a specific environment, switch out the adapter. @@ -14,5 +14,4 @@ const config = { adapter: adapter() } }; - export default config;