upgrade to skeleton v2 (#49)

cmintey · Oct 10, 2023 · 41fe1e6 · 41fe1e6
1 parent a019e61
commit 41fe1e6
Show file tree

Hide file tree

Showing 23 changed files with 346 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,8 @@
 	},
 	"devDependencies": {
 		"@floating-ui/dom": "^1.5.3",
-		"@skeletonlabs/skeleton": "^1.12.0",
+		"@skeletonlabs/skeleton": "^2.3.0",
+		"@skeletonlabs/tw-plugin": "^0.2.2",
 		"@sveltejs/adapter-node": "^1.3.1",
 		"@sveltejs/kit": "^1.25.2",
 		"@tailwindcss/forms": "^0.5.6",
@@ -45,7 +46,8 @@
 		"tslib": "^2.6.2",
 		"typescript": "^5.2.2",
 		"vite": "^4.4.11",
-		"vite-plugin-pwa": "^0.16.5"
+		"vite-plugin-pwa": "^0.16.5",
+		"vite-plugin-tailwind-purgecss": "^0.1.3"
 	},
 	"type": "module",
 	"dependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -22,12 +22,26 @@
 			sizes="16x16"
 			href="%sveltekit.assets%/favicon-16x16.png?v=2"
 		/>
+		<link
+			rel="preload"
+			href="%sveltekit.assets%/fonts/Lato-Regular.woff"
+			as="font"
+			type="font/woff"
+			crossorigin
+		/>
+		<link
+			rel="preload"
+			href="%sveltekit.assets%/fonts/Lato-Regular.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin
+		/>
 		<link rel="mask-icon" href="%sveltekit.assets%/safari-pinned-tab.svg?v=2" color="#423654" />
 		<meta name="theme-color" content="#423654" />
 		<link rel="manifest" href="%sveltekit.assets%/manifest.webmanifest" />
 		%sveltekit.head%
 	</head>
-	<body>
+	<body data-theme="theme">
 		<div class="h-full overflow-hidden">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/app.postcss b/src/app.postcss
@@ -1,4 +1,108 @@
-/* Write your global styles here, in PostCSS syntax */
+@font-face {
+	font-family: "Lato";
+	src:
+		url("/fonts/Lato-Regular.woff2") format("woff2"),
+		url("/fonts/Lato-Regular.woff") format("woff");
+	font-weight: normal;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "Lato";
+	src:
+		url("/fonts/Lato-Light.woff2") format("woff2"),
+		url("/fonts/Lato-Light.woff") format("woff");
+	font-weight: 300;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "Lato";
+	src:
+		url("/fonts/Lato-LightItalic.woff2") format("woff2"),
+		url("/fonts/Lato-LightItalic.woff") format("woff");
+	font-weight: 300;
+	font-style: italic;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "Lato Hairline";
+	src:
+		url("/fonts/Lato-Hairline.woff2") format("woff2"),
+		url("/fonts/Lato-Hairline.woff") format("woff");
+	font-weight: 300;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "Lato";
+	src:
+		url("/fonts/Lato-Italic.woff2") format("woff2"),
+		url("/fonts/Lato-Italic.woff") format("woff");
+	font-weight: normal;
+	font-style: italic;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "Lato";
+	src:
+		url("/fonts/Lato-Bold.woff2") format("woff2"),
+		url("/fonts/Lato-Bold.woff") format("woff");
+	font-weight: bold;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "Lato Hairline";
+	src:
+		url("/fonts/Lato-HairlineItalic.woff2") format("woff2"),
+		url("/fonts/Lato-HairlineItalic.woff") format("woff");
+	font-weight: 300;
+	font-style: italic;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "Lato";
+	src:
+		url("/fonts/Lato-Black.woff2") format("woff2"),
+		url("/fonts/Lato-Black.woff") format("woff");
+	font-weight: 900;
+	font-style: normal;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "Lato";
+	src:
+		url("/fonts/Lato-BlackItalic.woff2") format("woff2"),
+		url("/fonts/Lato-BlackItalic.woff") format("woff");
+	font-weight: 900;
+	font-style: italic;
+	font-display: swap;
+}
+
+@font-face {
+	font-family: "Lato";
+	src:
+		url("/fonts/Lato-BoldItalic.woff2") format("woff2"),
+		url("/fonts/Lato-BoldItalic.woff") format("woff");
+	font-weight: bold;
+	font-style: italic;
+	font-display: swap;
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
 html,
 body {
 	@apply h-full overflow-hidden;

diff --git a/src/lib/components/account/ChangePassword.svelte b/src/lib/components/account/ChangePassword.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { enhance } from "$app/forms";
 	import { page } from "$app/stores";
-	import { toastStore } from "@skeletonlabs/skeleton";
+	import { getToastStore } from "@skeletonlabs/skeleton";
 	import PasswordInput from "../PasswordInput.svelte";
 
+    const toastStore = getToastStore();
+
 	let passwordReset = {
 		current: "",
 		new: "",

diff --git a/src/lib/components/admin/ActionsForm.svelte b/src/lib/components/admin/ActionsForm.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { invalidateAll } from "$app/navigation";
-	import { modalStore, toastStore, type ModalSettings } from "@skeletonlabs/skeleton";
+	import { getModalStore, getToastStore, type ModalSettings } from "@skeletonlabs/skeleton";
+
+    const modalStore = getModalStore();
+    const toastStore = getToastStore();
 
 	const handleDelete = async () => {
 		const settings: ModalSettings = {

diff --git a/src/lib/components/admin/Groups.svelte b/src/lib/components/admin/Groups.svelte
@@ -5,9 +5,9 @@
 		tableMapperValues,
 		tableSourceMapper,
 		type TableSource,
-		modalStore,
+		getModalStore,
 		type ModalSettings,
-		toastStore
+		getToastStore
 	} from "@skeletonlabs/skeleton";
 	import Search from "../Search.svelte";
 	import { GroupsAPI } from "$lib/api/groups";
@@ -20,6 +20,9 @@
 
 	export let groups: Group[];
 
+    const modalStore = getModalStore();
+    const toastStore = getToastStore();
+
 	let groupsFiltered: Group[];
 
 	let groupData: TableSource;

diff --git a/src/lib/components/admin/InviteUser.svelte b/src/lib/components/admin/InviteUser.svelte
@@ -1,13 +1,16 @@
 <script lang="ts">
 	import { enhance } from "$app/forms";
-	import { toastStore, type ToastSettings, modalStore } from "@skeletonlabs/skeleton";
+	import { getToastStore, type ToastSettings, getModalStore } from "@skeletonlabs/skeleton";
 	import TokenCopy from "$lib/components/TokenCopy.svelte";
 	import { page } from "$app/stores";
 	import type { Group } from "@prisma/client";
 
 	export let config: Config;
 	export let groups: Group[];
 
+    const modalStore = getModalStore();
+    const toastStore = getToastStore();
+
 	$: form = $page.form;
 
 	const triggerToast = () => {

diff --git a/src/lib/components/modals/AddUserModal.svelte b/src/lib/components/modals/AddUserModal.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { UsersAPI } from "$lib/api/users";
 	import type { User } from "@prisma/client";
-	import { ListBox, ListBoxItem, modalStore } from "@skeletonlabs/skeleton";
+	import { ListBox, ListBoxItem, getModalStore } from "@skeletonlabs/skeleton";
 
 	export let parent: any;
+
+    const modalStore = getModalStore();
 	let selectedUser: string;
 
 	function onFormSubmit(): void {

diff --git a/src/lib/components/modals/GroupSelectModal.svelte b/src/lib/components/modals/GroupSelectModal.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { ListBox, ListBoxItem, modalStore } from "@skeletonlabs/skeleton";
+	import { ListBox, ListBoxItem, getModalStore } from "@skeletonlabs/skeleton";
 
 	export let parent: any;
+    const modalStore = getModalStore();
 	let selectedGroup: string;
 	let groups: Record<string, string>[] = $modalStore[0] ? $modalStore[0].meta?.groups : [];
 

diff --git a/src/lib/components/modals/InviteUserModal.svelte b/src/lib/components/modals/InviteUserModal.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-	import { ListBox, ListBoxItem, modalStore } from "@skeletonlabs/skeleton";
+	import { ListBox, ListBoxItem, getModalStore } from "@skeletonlabs/skeleton";
 
 	export let parent: any;
+    const modalStore = getModalStore();
 	let userEmail: string;
 	let selectedGroup: string;
 

diff --git a/src/lib/components/navigation/NavBar.svelte b/src/lib/components/navigation/NavBar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AppBar, drawerStore } from "@skeletonlabs/skeleton";
+	import { AppBar, getDrawerStore } from "@skeletonlabs/skeleton";
 	import logo from "$lib/assets/logo.png";
 	import { page } from "$app/stores";
 	import NavMenu from "./NavMenu.svelte";
@@ -8,6 +8,8 @@
 
 	export let navItems: NavItem[];
 	export let user: User | undefined;
+
+    const drawerStore = getDrawerStore();
 </script>
 
 <AppBar background="bg-surface-200-700-token" padding="py-2 md:py-4 px-4">

diff --git a/src/lib/components/navigation/NavMenu.svelte b/src/lib/components/navigation/NavMenu.svelte
@@ -6,7 +6,7 @@
 	import type { Group } from "@prisma/client";
 	import {
 		LightSwitch,
-		modalStore,
+		getModalStore,
 		popup,
 		type ModalSettings,
 		type PopupSettings
@@ -15,6 +15,8 @@
 	import type { User } from "lucia";
 
 	export let user: User | undefined;
+    
+    const modalStore = getModalStore();
 
 	const menuSettings: PopupSettings = {
 		event: "click",