Updated branch

package.json

@@ -23,22 +23,21 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@rgossiaux/svelte-headlessui": "^2.0.0",
-    "@storybook/addon-a11y": "^7.0.26",
+    "@storybook/addon-a11y": "^7.2.2",
     "@storybook/addon-coverage": "^0.0.8",
-    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
-    "@storybook/addon-links": "^7.0.18",
-    "@storybook/blocks": "^7.0.18",
+    "@storybook/addon-essentials": "^7.2.2",
+    "@storybook/addon-interactions": "^7.2.2",
+    "@storybook/addon-links": "^7.2.2",
+    "@storybook/blocks": "^7.2.2",
     "@storybook/jest": "^0.1.0",
-    "@storybook/svelte": "^7.0.18",
-    "@storybook/sveltekit": "^7.0.18",
+    "@storybook/svelte": "^7.2.2",
+    "@storybook/sveltekit": "^7.2.2",
     "@storybook/test-runner": "^0.10.0",
     "@storybook/testing-library": "^0.1.0",
     "@sveltejs/adapter-auto": "^2.0.1",
-    "@sveltejs/kit": "next",
+    "@sveltejs/kit": "^1.22.4",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "@vitest/coverage-c8": "^0.31.4",
     "autoprefixer": "^10.4.13",
     "axe-playwright": "^1.2.3",
@@ -54,19 +53,17 @@
     "prettier-plugin-tailwindcss": "^0.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^7.0.18",
+    "storybook": "^7.2.2",
     "svelte": "^3.55.1",
     "svelte-check": "^2.9.2",
     "svelte-icons-pack": "^2.1.0",
     "svelte-preprocess": "^5.0.0",
     "tailwindcss": "^3.2.4",
     "tslib": "^2.4.1",
     "typescript": "^4.9.3",
-    "vite": "^4.0.0",
-    "vitest": "^0.31.4"
+    "vite": "^4.4.9",
+    "vitest": "^0.31.4",
+    "svelte-select": "^5.6.0"
   },
-  "type": "module",
-  "dependencies": {
-    "svelte-select": "^5.6.1"
-  }
+  "type": "module"
 }

src/lib/component/input/Select.svelte

@@ -5,32 +5,42 @@
     ListboxOption,
     ListboxOptions
   } from '@rgossiaux/svelte-headlessui';
-  import type { SupportedAs } from '@rgossiaux/svelte-headlessui/internal/elements';
-  import { onMount } from 'svelte';
 
-  const items = [
-    { value: 1, label: 'Ola' },
-    { value: 2, label: 'Deus' },
-    { value: 3, label: 'Siuuuyuuuuu' }
-  ];
-
-  let selectedItem: { label: any } | null = null;
+  export let value: string | number;
+  export let name: string;
+  export let options: { value: string | number; label: string }[] = [];
 
   let _class = '';
   export { _class as class };
 </script>
 
-<Listbox bind:value={selectedItem} class={_class}>
+<Listbox bind:value class={_class}>
+  <input hidden {name} bind:value />
   <ListboxButton
     class="relative flex h-10 w-full rounded-lg border-0 bg-stone-400/25 px-5 text-xl text-white outline-none aria-expanded:rounded-none aria-expanded:rounded-t-lg"
   >
-    <div class={`flex h-full flex-col justify-center ${selectedItem ? '' : 'text-gray-400'}`}>
-      {selectedItem?.label || 'Placeholder'}
+    <div
+      class={`flex h-full flex-col justify-center overflow-hidden text-ellipsis whitespace-nowrap ${
+        value ? '' : 'text-gray-400'
+      }`}
+    >
+      {options.find((v) => v.value == value)?.label || 'Placeholder'}
     </div>
   </ListboxButton>
-  <ListboxOptions class="bottom-full w-full rounded-b-lg bg-stone-400/25 last:rounded-b-lg">
-    {#each items as item (item.value)}
-      <ListboxOption class="cursor-pointer text-xl text-white hover:bg-stone-200/25" value={item}>
+  <ListboxOptions class="bottom-full w-full rounded-b-lg bg-stone-400/25 ">
+    {#if options.length === 0}
+      <div class="text-md cursor-pointer p-2 text-white">
+        {'No options to show'}
+      </div>
+    {/if}
+    {#each options as item, i}
+      {@const rounded = i === options.length - 1 ? 'rounded-b-lg' : ''}
+      {@const color = item.value === value ? 'bg-stone-200/25' : ''}
+
+      <ListboxOption
+        class={`cursor-pointer p-2 text-xl text-white hover:bg-stone-200/25 ${rounded} ${color}`}
+        value={item.value}
+      >
         {item.label}
       </ListboxOption>
     {/each}

src/lib/component/input/TextField.svelte

@@ -22,7 +22,7 @@
 </script>
 
 <div
-  class="mx-2 flex h-10 rounded-lg bg-stone-400/25 px-2 text-xl text-white focus-within:outline-none focus-within:ring focus-within:ring-tertiary {_class}"
+  class="focus-within:ring-tertiary mx-2 flex h-10 rounded-lg bg-stone-400/25 px-2 text-xl text-white focus-within:outline-none focus-within:ring {_class}"
 >
   {#if beforeIcon}
     <span class="flex items-center p-1">

src/lib/error-page/Button.svelte

@@ -5,8 +5,8 @@
     width: keyof typeof widthList,
     text: string;
   const colorList = {
-    primary: { main: 'bg-primary', hover: 'hover:bg-primary' },
-    secondary: { main: 'bg-secondary', hover: 'hover:bg-secondary' },
+    primary: { main: 'bg-muted-red-700', hover: 'hover:bg-muted-red-500' },
+    secondary: { main: 'bg-muted-red-500', hover: 'hover:bg-muted-red-500' },
     red: { main: 'bg-red-500', hover: 'hover:bg-red-500' },
     green: { main: 'bg-green-500', hover: 'hover:bg-green-500' },
     blue: { main: 'bg-blue-500', hover: 'hover:bg-blue-500' }

src/lib/layout/BackgroundHexagon.svelte

@@ -5,13 +5,13 @@
 {#if position === 'right'}
   <img
     alt="NIAEFEUP hexagon logo"
-    class="fixed -right-24 h-full overflow-hidden pt-20 pb-40 sm:right-0 sm:pb-32"
+    class="fixed -right-24 -z-10 h-full overflow-hidden pt-20 pb-40 sm:right-0 sm:pb-32"
     src="/images/outline_white.png"
   />
 {:else}
   <img
     alt="NIAEFEUP hexagon logo"
-    class="pointer-events-none fixed -left-24 h-full overflow-hidden pt-20 pb-40"
+    class="pointer-events-none fixed -left-24 -z-10 h-full overflow-hidden pt-20 pb-40"
     src="/images/outline_white_180.png"
   />
 {/if}

src/lib/layout/Footer.svelte

@@ -43,7 +43,7 @@
 </script>
 
 <div class="z-10 w-full bg-transparent p-3 max-sm:hidden">
-  <footer class="grid grid-cols-3 justify-between border-t-2 border-secondary p-2 text-white">
+  <footer class="grid grid-cols-3 justify-between border-t-2 border-muted-red-500 p-2 text-white">
     <div class="footer-icons grid w-fit grid-cols-6 gap-4 self-center p-3">
       <Icon
         src={Icons.Instagram}
@@ -104,7 +104,9 @@
 </div>
 
 <div class="hidden w-full bg-transparent p-3 max-sm:block">
-  <footer class="flex flex-col justify-between border-t-2 border-secondary p-2 text-sm text-white">
+  <footer
+    class="flex flex-col justify-between border-t-2 border-muted-red-500 p-2 text-sm text-white"
+  >
     <div class="flex w-full flex-row items-center justify-between self-center p-3">
       <span>NIAEFEUP</span>
       <img src="/images/ni_negative_logo.svg" alt="NIAFEUP logo" class="h-auto w-11" />

src/lib/layout/MemberButton.svelte

@@ -5,10 +5,10 @@
 
 <a
   href="/#"
-  class="grid grid-cols-[1fr_fit-content(100%)] items-center gap-3 rounded-md bg-tertiary60"
+  class="grid grid-cols-[1fr_fit-content(100%)] items-center gap-3 rounded-md bg-muted-red-400/60"
 >
   <p class="w-full whitespace-nowrap pl-2 font-source_code text-sm text-white">Área Membro</p>
-  <div class="rounded-md bg-tertiary px-1 pt-1">
+  <div class="rounded-md bg-muted-red-400 px-1 pt-1">
     <Icon src={Icons.User} color="#411315" size="32px" />
   </div>
 </a>

src/lib/layout/hexagons/EventHexagon.stories.ts

@@ -22,7 +22,7 @@ export const DateIntervalHexagon = {
       location: 'Cervejaria Diu',
       thumbnailPath: 'images/previews/bruno-rosendo.png'
     }
-  },
+  }
 };
 
 export const SingleDateHexagon = {

src/lib/layout/hexagons/EventHexagon.svelte

@@ -40,7 +40,7 @@
       {/if}
     </p>
     <p
-      class="xs:text-xs z-20 my-1.5 w-full px-8 text-center text-xs font-semibold text-gray-100 outline-2 outline-offset-2 outline-light transition-colors ease-in group-hover:bg-light group-hover:text-darkText group-hover:outline sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl"
+      class="xs:text-xs outline-light group-hover:bg-light group-hover:text-darkText z-20 my-1.5 w-full px-8 text-center text-xs font-semibold text-gray-100 outline-2 outline-offset-2 transition-colors ease-in group-hover:outline sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl"
     >
       {event.title}
     </p>
@@ -51,7 +51,7 @@
       {event.location}
     </p>
 
-    <div class="absolute inset-0 z-10 bg-quaternary60 text-lg" />
+    <div class="bg-quaternary60 absolute inset-0 z-10 text-lg" />
     <img
       src={event.thumbnailPath}
       alt="Event thumbnail"

src/lib/notifications/Snackbar.svelte

@@ -10,15 +10,15 @@
 <div
   out:slide
   in:fly={{ x: 100 }}
-  class="mb-4 flex h-auto w-80 rounded-lg bg-primary px-3 py-2"
+  class="mb-4 flex h-auto w-80 rounded-lg bg-muted-red-700 px-3 py-2"
   role="status"
 >
   <div class="m-auto ml-3 font-medium text-white">
     {notification.message}
   </div>
   <div class="ml-1 flex flex-col">
     <button
-      class="rounded-lg p-1.5 hover:bg-secondary"
+      class="rounded-lg p-1.5 hover:bg-muted-red-500"
       on:click={() => notification.close()}
       aria-label="Close"
     >

src/routes/api/[...endpoint]/+server.ts

@@ -3,11 +3,19 @@ import { fetchWithAuth } from './proxy';
 import { endpoint } from '$lib/api/proxy';
 
 const dispatchToBackend: RequestHandler = async (event) => {
-  const body = event.request.method === 'GET' ? undefined : await event.request.text();
+  const body =
+    event.request.method === 'GET' ||
+    event.request.method === 'OPTIONS' ||
+    event.request.method === 'HEAD'
+      ? undefined
+      : await event.request.text();
   return fetchWithAuth(event.cookies, endpoint(event.url), event.request.method, undefined, body);
 };
 
 export const GET: RequestHandler = dispatchToBackend;
 export const POST: RequestHandler = dispatchToBackend;
 export const PUT: RequestHandler = dispatchToBackend;
 export const DELETE: RequestHandler = dispatchToBackend;
+export const PATCH: RequestHandler = dispatchToBackend;
+export const OPTIONS: RequestHandler = dispatchToBackend;
+export const HEAD: RequestHandler = dispatchToBackend;

src/routes/api/[...endpoint]/proxy.ts

@@ -11,6 +11,10 @@ async function _fetchApi(
   const url = new URL(relativeUrl, PUBLIC_API_URL);
   headers ??= new Headers();
   headers.append('Content-Type', 'application/json');
+  headers.append('Accept', 'application/json');
+  if (window?.location?.origin) {
+    headers.append('Origin', window.location.origin);
+  }
   return fetch(url, { method: method, body, headers });
 }
 

src/routes/events/+page.svelte

@@ -7,6 +7,13 @@
   const searchEvents = (e: SubmitEvent) => {
     console.log(new FormData(e.target as HTMLFormElement));
   };
+
+  const filterOptions = [
+    { value: 'sinf', label: 'SINF' },
+    { value: 'workshop', label: 'Workshop' },
+    { value: 'dinner', label: 'Jantar de curso' }
+  ];
+  let filterValue = null;
 </script>
 
 <div class="my-20">
@@ -23,6 +30,6 @@
       value=""
     />
 
-    <Select />
+    <Select bind:value={filterValue} options={filterOptions} class="w-52" />
   </form>
 </div>

tailwind.config.cjs

@@ -1,24 +1,34 @@
-const primaryColor = '#872020FF';
-const secondaryColor = '#B33636FF';
-const tertiaryColor = '#C04343FF';
-const tertiary60Color = '#C0434399';
-const quaternary60Color = '#4D000099';
-const darkTextColor = '#411315';
-const lightColor = '#D7C0C0FF';
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{html,js,svelte,ts,stories.js,stories.ts}'],
   theme: {
     extend: {
       colors: {
-        primary: primaryColor,
-        secondary: secondaryColor,
-        tertiary: tertiaryColor,
-        tertiary60: tertiary60Color,
-        quaternary60: quaternary60Color,
-        light: lightColor,
-        darkText: darkTextColor
+        taupe: {
+          300: '#AB8586',
+          200: '#D7C0C0',
+          100: '#FFE9E9'
+        },
+        'vivid-red': {
+          950: '#4D0000',
+          900: '#570000',
+          700: '#A40202',
+          400: '#DC4F47'
+        },
+        'muted-red': {
+          800: '#740F0F',
+          700: '#872020',
+          600: '#9D2B2B',
+          500: '#B33636',
+          400: '#C04343',
+          300: '#DF6363'
+        },
+        rose: {
+          950: '#411315',
+          600: '#8D3739',
+          400: '#A46868',
+          200: '#DAB5B5'
+        }
       },
 
       fontFamily: {