reorganize code, install prettier for tailwind and format files

.prettierrc

@@ -3,6 +3,6 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

package.json

@@ -28,8 +28,9 @@
 		"jest-dom": "^4.0.0",
 		"jsdom": "^24.1.0",
 		"postcss": "^8.4.38",
-		"prettier": "^3.1.1",
+		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.1.2",
+		"prettier-plugin-tailwindcss": "^0.6.5",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"tailwindcss": "^3.4.4",

src/lib/ItemWrappedInTree.svelte

@@ -0,0 +1,17 @@
+<!-- 
+    This Svelte component is for the purpose of avoiding errors
+    when running unit tests of the Item component, since elements 
+    with a "treeitem" role must have a parent with a "tree" role.
+-->
+
+<script lang="ts">
+	import Item from '../routes/Item.svelte';
+	import { type StoredItem } from './types';
+	export let item: StoredItem;
+	export let deleteItem: (itemId: string) => void;
+	export let isSelected: boolean;
+</script>
+
+<div role="tree">
+	<Item {item} {deleteItem} {isSelected} />
+</div>

src/lib/itemGenerator.ts

@@ -1,179 +1,174 @@
 import { v7 as uuid } from 'uuid';
 import dayjs, { Dayjs } from 'dayjs';
 import { randomIntFromInterval } from './utils';
+import type { StoredItem } from './types';
 
 export const possibleItems = [
 	{
 		id: uuid(),
 		name: 'milk',
 		quantity: 1,
 		dateAdded: dayjs().subtract(100, 'day'),
-		daysToSpoil: 7
+		shelfLife: 7
 	},
 	{
 		id: uuid(),
 		name: 'eggs',
 		quantity: 12,
 		dateAdded: dayjs().subtract(16, 'day'),
-		daysToSpoil: 35
+		shelfLife: 35
 	},
 	{
 		id: uuid(),
 		name: 'choy sum',
 		quantity: 2,
 		dateAdded: dayjs().subtract(12, 'day'),
-		daysToSpoil: 5
+		shelfLife: 5
 	},
 	{
 		id: uuid(),
 		name: 'bananas',
 		quantity: 6,
 		dateAdded: dayjs().subtract(2, 'day'),
-		daysToSpoil: 7
+		shelfLife: 7
 	},
 	{
 		id: uuid(),
 		name: 'apples',
 		quantity: 4,
 		dateAdded: dayjs().subtract(7, 'day'),
-		daysToSpoil: 14
+		shelfLife: 14
 	},
 	{
 		id: uuid(),
 		name: 'tomatoes',
 		quantity: 5,
 		dateAdded: dayjs().subtract(2, 'day'),
-		daysToSpoil: 7
+		shelfLife: 7
 	},
 	{
 		id: uuid(),
 		name: 'lettuce',
 		quantity: 1,
 		dateAdded: dayjs().subtract(4, 'day'),
-		daysToSpoil: 7
+		shelfLife: 7
 	},
 	{
 		id: uuid(),
 		name: 'carrots',
 		quantity: 8,
 		dateAdded: dayjs().subtract(10, 'day'),
-		daysToSpoil: 21
+		shelfLife: 21
 	},
 	{
 		id: uuid(),
 		name: 'broccoli',
 		quantity: 2,
 		dateAdded: dayjs().subtract(3, 'day'),
-		daysToSpoil: 7
+		shelfLife: 7
 	},
 	{
 		id: uuid(),
 		name: 'cucumber',
 		quantity: 3,
 		dateAdded: dayjs().subtract(5, 'day'),
-		daysToSpoil: 7
+		shelfLife: 7
 	},
 	{
 		id: uuid(),
 		name: 'strawberries',
 		quantity: 1,
 		dateAdded: dayjs().subtract(1, 'day'),
-		daysToSpoil: 5
+		shelfLife: 5
 	},
 	{
 		id: uuid(),
 		name: 'potatoes',
 		quantity: 6,
 		dateAdded: dayjs().subtract(14, 'day'),
-		daysToSpoil: 28
+		shelfLife: 28
 	},
 	{
 		id: uuid(),
 		name: 'onions',
 		quantity: 4,
 		dateAdded: dayjs().subtract(20, 'day'),
-		daysToSpoil: 30
+		shelfLife: 30
 	},
 	{
 		id: uuid(),
 		name: 'bell peppers',
 		quantity: 3,
 		dateAdded: dayjs().subtract(4, 'day'),
-		daysToSpoil: 7
+		shelfLife: 7
 	},
 	{
 		id: uuid(),
 		name: 'grapes',
 		quantity: 1,
 		dateAdded: dayjs().subtract(2, 'day'),
-		daysToSpoil: 7
+		shelfLife: 7
 	},
 	{
 		id: uuid(),
 		name: 'avocados',
 		quantity: 2,
 		dateAdded: dayjs().subtract(1, 'day'),
-		daysToSpoil: 5
+		shelfLife: 5
 	},
 	{
 		id: uuid(),
 		name: 'mushrooms',
 		quantity: 8,
 		dateAdded: dayjs().subtract(10, 'day'),
-		daysToSpoil: 7
+		shelfLife: 7
 	},
 	{
 		id: uuid(),
 		name: 'zucchini',
 		quantity: 2,
 		dateAdded: dayjs().subtract(5, 'day'),
-		daysToSpoil: 7
+		shelfLife: 7
 	},
 	{
 		id: uuid(),
 		name: 'oranges',
 		quantity: 6,
 		dateAdded: dayjs().subtract(8, 'day'),
-		daysToSpoil: 14
+		shelfLife: 14
 	},
 	{
 		id: uuid(),
 		name: 'spinach',
 		quantity: 1,
 		dateAdded: dayjs().subtract(2, 'day'),
-		daysToSpoil: 5
+		shelfLife: 5
 	},
 	{
 		id: uuid(),
 		name: 'lemons',
 		quantity: 4,
 		dateAdded: dayjs().subtract(10, 'day'),
-		daysToSpoil: 21
+		shelfLife: 21
 	},
 	{
 		id: uuid(),
 		name: 'green beans',
 		quantity: 1,
 		dateAdded: dayjs().subtract(3, 'day'),
-		daysToSpoil: 7
+		shelfLife: 7
 	},
 	{
 		id: uuid(),
 		name: 'cauliflower',
 		quantity: 1,
 		dateAdded: dayjs().subtract(4, 'day'),
-		daysToSpoil: 7
+		shelfLife: 7
 	}
 ];
 
 export function getRandomItems(
-	itemList: {
-		id: string;
-		name: string;
-		quantity: number;
-		dateAdded: Dayjs;
-		daysToSpoil: number;
-	}[] = possibleItems,
+	itemList: StoredItem[] = possibleItems,
 	minItems = 3,
 	maxItems = 10
 ) {

src/lib/types.ts

@@ -0,0 +1,9 @@
+import { type Dayjs } from 'dayjs';
+
+export type StoredItem = {
+	id: string;
+	name: string;
+	quantity: number;
+	dateAdded: Dayjs;
+	shelfLife: number;
+};

src/routes/+page.svelte

@@ -15,13 +15,13 @@
 
 <div class="m-2">
 	<div class="flex w-full">
-		<StoragePlace name="fridge" />
+		<StoragePlace storagePlaceName="fridge" />
 	</div>
 
 	<div class="m-2 mt-12 max-w-sm">
 		<h1>
 			<b>Tips for users:</b>
-			<span class="text-stone-400 hover:text-stone-500 transition">
+			<span class="text-stone-400 transition hover:text-stone-500">
 				(<button
 					aria-label="{showTips ? 'Hide' : 'Show'} tips"
 					class="underline decoration-1 underline-offset-2"