Merge pull request #38 from pvdthings/dev

v0.12

src/app.css

@@ -19,6 +19,7 @@
         -webkit-box-shadow: 2px 2px 0px 0px #000000;
     }
 
+    .hovers-above,
     .hovers:focus,
     .hovers:hover {
         box-shadow: 3px 3px 0 #000000;

src/lib/foundation/Button.svelte → src/lib/components/Button/Button.svelte

@@ -37,9 +37,9 @@
         <slot />
 </button>
 
-<style lang="postcss">
+<style>
     button.default {
-        @apply bg-indigo-100;
+        @apply bg-indigo-100 hover:bg-indigo-50;
     }
 
     button.defaultToggled {

src/lib/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from "./Button.svelte";
+export * from "./button";

src/lib/components/Chooser/Chooser.css

@@ -0,0 +1,3 @@
+button.chooser-button {
+  @apply px-3 py-1 font-bold font-display text-left outline-none;
+}

src/lib/components/Chooser/Chooser.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import "./Chooser.css";
+	import { createEventDispatcher } from 'svelte';
+	import { t, locale } from '$lib/language/translate';
+	import ChevronIcon from "$lib/icons/chevron.svg";
+	import ChooserBody from './ChooserBody.svelte';
+
+	export let options = [];
+
+	let chosenOption = options[0];
+	let dropdownHidden = true;
+	let innerWidth: number;
+
+	$: isEnglish = $locale === 'en';
+
+	const dispatch = createEventDispatcher();
+
+	const toggleDropdown = () => {
+		dropdownHidden = !dropdownHidden;
+
+		if (innerWidth < 768) {
+			document.body.classList.toggle('overflow-hidden');
+		} else {
+			document.body.classList.remove('overflow-hidden');
+		}
+	};
+
+	const optionChosen = (option) => {
+		chosenOption = option;
+		toggleDropdown();
+		dispatch('chosen', option);
+	};
+</script>
+
+<svelte:window bind:innerWidth on:click={() => (dropdownHidden = true)} />
+
+<div class="relative h-11" on:click|stopPropagation={() => {}} on:keypress={() => {}}>
+	<button
+		on:click={toggleDropdown}
+		class="chooser-button bg-indigo-100 hover:bg-indigo-50 h-full w-48 brutal hovers"
+	>
+		<img
+			class="inline mr-1"
+			src={ChevronIcon}
+			alt="Dropdown"
+		/>
+		<span>{isEnglish ? chosenOption : $t(chosenOption)}</span>
+	</button>
+	<ChooserBody
+		hidden={dropdownHidden}
+		title={$t('Category')}
+		{chosenOption}
+		{options}
+		onOptionClick={optionChosen}
+		onClose={toggleDropdown}
+	/>
+</div>

src/lib/components/Chooser/ChooserBody.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import "./Chooser.css";
+  import ChevronIcon from "$lib/icons/chevron.svg";
+  import CloseIcon from '$lib/icons/x-mark.svg';
+	import ChooserItem from './ChooserItem.svelte';
+	import { t } from "$lib/language/translate";
+
+  export let title: string;
+  export let chosenOption: string;
+  export let options: string[];
+  export let hidden: boolean;
+  export let onOptionClick: (option: string) => void;
+  export let onClose: () => void;
+</script>
+
+<div
+  class:body-hidden={hidden}
+  class="fixed top-0 left-0 w-full h-full overflow-hidden md:h-fit md:absolute bg-indigo-50 md:brutal md:hovers-above md:rounded-md flex flex-col z-50"
+>
+  <div class="md:hidden">
+    <div class="p-4 bg-primary text-2xl font-bold text-left sticky top-0">
+      {title}
+      <button class="float-right" on:click={onClose}>
+        <img class="w-[30px] h-[30px]" src={CloseIcon} alt="close" />
+      </button>
+    </div>
+    <hr class="border-black border-opacity-20" />
+  </div>
+  <button
+		on:click={onClose}
+		class="chooser-button hidden md:block bg-primary h-11 w-full border-b-2 border-black"
+	>
+    <img
+      class="inline rotate-180 mr-1"
+      src={ChevronIcon}
+      alt="Dropdown"
+    />
+		<span>{$t(chosenOption)}</span>
+	</button>
+  <div class="flex flex-col overflow-y-scroll">
+    {#each options as option}
+      <hr />
+      <ChooserItem
+        on:click={() => onOptionClick(option)}
+        selected={chosenOption == option}
+      >
+        {$t(option)}
+      </ChooserItem>
+    {/each}
+  </div>
+</div>
+
+<style lang="postcss">
+	.body-hidden {
+		@apply hidden;
+	}
+</style>

src/lib/components/Chooser/ChooserItem.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import CheckIcon from "$lib/icons/check.svg";
+
+  export let selected: boolean;
+</script>
+
+<button
+  on:click
+  class:selected
+  class="text-2xl md:text-lg p-4 md:py-2 text-left hover:bg-gray-300 align-middle"
+  >
+    <slot />
+    {#if selected}
+      <img class="inline-block float-right mt-1 w-[20px] h-[20px]" src={CheckIcon} alt="Selected" />
+    {/if}
+  </button
+>

src/lib/components/Chooser/index.ts

@@ -0,0 +1 @@
+export { default as Chooser } from "./Chooser.svelte";

src/lib/LoadingIndicator.svelte → src/lib/components/LoadingIndicator.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { Row } from "$lib/Foundation.svelte";
+    import Row from "./Row.svelte";
 </script>
 
 <div class="fixed z-50 h-screen w-screen inset-0 bg-black flex flex-col gap-4 justify-center">

src/lib/foundation/TextInput.svelte → src/lib/components/TextInput.svelte

@@ -20,7 +20,7 @@
     on:change
     on:keyup={keyReleased}
     class:invalid
-    class="px-4 py-2 brutal hovers outline-none {customClass}"
+    class="w-full px-4 py-2 pl-10 brutal hovers outline-none {customClass}"
 />
 
 <style lang="postcss">

src/lib/components/index.ts

@@ -0,0 +1,8 @@
+export { default as Button } from "./Button/Button.svelte";
+export { Chooser } from "./Chooser";
+export { default as Column } from "./Column.svelte";
+export { default as Head } from "./Head.svelte";
+export { default as LoadingIndicator } from "./LoadingIndicator.svelte";
+export { default as Row } from "./Row.svelte";
+export { default as TextInput } from "./TextInput.svelte";
+export { default as Title } from "./Title.svelte";

src/lib/layout/Footer.svelte → src/lib/components/layout/Footer.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Column, Row } from "$lib/Foundation.svelte";
+	import { Column, Row } from "$lib/components";
 </script>
 
 <footer class="bg-bg py-10 relative z-40">

src/lib/things/BorrowModal.svelte → src/lib/components/things/BorrowModal/BorrowModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import Button from "$lib/foundation/Button.svelte";
-	import { ButtonTheme } from "$lib/foundation/button";
-  import { showBorrowModal } from "./borrowModalStore";
+  import { Button } from "$lib/components";
+	import { ButtonTheme } from "$lib/components/Button/button";
+  import { showBorrowModal } from "./stores";
   import CloseIcon from "$lib/icons/x-mark.svg";
 	import { onDestroy } from "svelte";
 	import { t } from "$lib/language/translate";

src/lib/components/things/BorrowModal/index.ts

@@ -0,0 +1,2 @@
+export { default as BorrowModal } from './BorrowModal.svelte';
+export * from './stores';

src/lib/things/Thing.svelte → src/lib/components/things/Thing.svelte

@@ -1,7 +1,7 @@
 <script>
 	import BoxIcon from '$lib/icons/box.svg';
 	import { t, locale } from '$lib/language/translate';
-	import { showBorrowModal } from './borrowModalStore';
+	import { showBorrowModal } from './BorrowModal';
 
 	export let thing;
 

src/lib/things/Things.svelte → src/lib/components/things/Things.svelte

@@ -1,6 +1,6 @@
 <script>
     import Scroller from "./Scroller.svelte";
-    import { filterByCategory } from "$lib/filters";
+    import { filterByCategory } from "$lib/utils/filters";
 
     export let things;
     export let categories;

src/lib/language/translations.ts

@@ -2,13 +2,27 @@ export default {
     en: {
         "Button.Home": "Home",
         "Button.WishList": "Wish List",
-        "Chooser.CategoryPrompt": "Choose a category:",
+        "Category": "Category",
         "Input.Search": "Search...",
         "No Results": "No Results",
         "Donate": "Donate",
         "Click to Donate": "Click to Donate",
         "Available": "Available",
         "Unavailable": "Unavailable",
+        "All": "All",
+        "DIY": "DIY",
+        "Media": "Media",
+        "Games": "Games",
+        "Outdoors": "Outdoors",
+        "Sports": "Sports",
+        "Entertainment": "Entertainment",
+        "Yard": "Yard",
+        "Cleaning": "Cleaning",
+        "Cooking": "Cooking",
+        "Crafts": "Crafts",
+        "Pet": "Pet",
+        "Automotive": "Automotive",
+        "Health": "Health",
         "How to Borrow": "How to Borrow",
         "How to Borrow.Step1": "Purchase a PVD Things membership and pay annual dues.",
         "How to Borrow.Step2": "Visit us at 12 Library Court in Providence.",
@@ -22,7 +36,7 @@ export default {
         "Button.Home": "Inicio",
         "Button.Donate": "Donar",
         "Button.WishList": "Donaciones",
-        "Chooser.CategoryPrompt": "Elija una categoría:",
+        "Category": "Categoría",
         "Input.Search": "Buscar...",
         "No Results": "No hay resultados",
         "Donate": "Donar",

src/lib/stores/catalog.ts

@@ -0,0 +1,23 @@
+import { defaultFilterCategory, filter } from "$lib/utils/filters";
+import { derived, writable } from "svelte/store";
+
+export const categoryFilter = writable<string>(defaultFilterCategory);
+
+export const searchFilter = writable<string>('');
+
+export const wishListFilter = writable<boolean>(false);
+
+export const things = writable<[]>(undefined);
+
+export const filteredThings = derived(
+  [things, categoryFilter, searchFilter, wishListFilter],
+  ([$things, $categoryFilter, $searchFilter, $wishListFilter]) => {
+    return filter($things, {
+			keyword: $searchFilter,
+			onlyWishList: $wishListFilter,
+			category: $categoryFilter
+		});
+  }
+);
+
+export const categories = writable<[]>(undefined);

src/lib/filters.ts → src/lib/utils/filters.ts

@@ -2,7 +2,7 @@
 export const defaultFilterCategory = "All";
 
 export const filter = (things, { keyword, onlyWishList, category }) => {
-    let filtered = things;
+    let filtered = things ?? [];
 
     if (category && category.toLowerCase() !== "all")
         filtered = filtered.filter(thing => thing.categories.includes(category));

src/lib/views/CategoryChooserView.svelte

@@ -0,0 +1,10 @@
+<script>
+	import { Chooser } from "$lib/components";
+	import { categories, categoryFilter } from "$lib/stores/catalog";
+
+  const filterThingsByCategory = (event) => {
+    $categoryFilter = event.detail;
+	};
+</script>
+
+<Chooser on:chosen={filterThingsByCategory} options={$categories} />