Merge branch 'mgr8/about' into mgr8/error

.eslintrc.cjs

@@ -16,6 +16,8 @@ module.exports = {
     indent: ['error', 2, { SwitchCase: 1 }],
     'func-style': ['error', 'declaration', { allowArrowFunctions: false }],
     'prefer-arrow-callback': 'error',
+    'comma-dangle': 'off',
+    '@typescript-eslint/comma-dangle': ['error', 'only-multiline'],
     '@typescript-eslint/no-unused-vars': 'error',
     '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
   },

.github/workflows/check_website.yaml

@@ -46,6 +46,9 @@ jobs:
       - name: Check
         run: npm run check
 
+      - name: npx playwright install
+        run: npx playwright install
+
       - name: Test
         run: npm run test
 

.github/workflows/update_officer.yaml

@@ -44,7 +44,7 @@ jobs:
 
       - name: Create Pull Request
         id: pull_request
-        uses: peter-evans/create-pull-request@v3
+        uses: peter-evans/create-pull-request@v4.1.1
         with:
           commit-message: Updated officer data
           title: 'Add/Update officer ${{ steps.officer-name.outputs.result }}'

package.json

@@ -11,19 +11,20 @@
     "url": "https://github.com/EthanThatOneKid/acmcsuf.com.git/"
   },
   "scripts": {
+    "start": "npm run dev",
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
-    "test": "vitest --run",
+    "test": "vitest --run && npm run test:browser",
     "test:watch": "vitest",
     "test:size": "npm i && size-limit",
     "test:coverage": "vitest run --coverage",
-    "test:browser": "playwright test",
+    "test:browser": "playwright test /tests",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --compiler-warnings \"css-unused-selector:ignore,unused-export-let:error\"",
-    "lint": "prettier --check . && eslint .",
+    "lint": "eslint . --fix",
     "format": "prettier --write .",
     "host": "npm run all && npm run preview",
-    "all": "npm run format && npm run lint && npm run check && npm t && npm run build"
+    "all": "npm run lint && npm run format && npm run check && npm run build && npm t"
   },
   "devDependencies": {
     "@playwright/test": "^1.25.0",

src/lib/components/nav/bar.svelte

@@ -4,7 +4,7 @@
   import Toggle from '$lib/components/toggle/toggle.svelte';
   import ThemeLight from '$lib/components/svg/theme-light.svelte';
   import ThemeDark from '$lib/components/svg/theme-dark.svelte';
-  import { AcmTheme, theme } from '$lib/legacy/theme';
+  import { AcmTheme, theme } from '$lib/public/legacy/theme';
 
   let jsEnabled = false;
   onMount(() => (jsEnabled = true));

src/lib/components/select/select.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  export let defaultValue = '';
+  export let options: string[] = [];
+
+  let currentValue: string = defaultValue;
+  let active = false;
+
+  function toggleDropdown() {
+    active = !active;
+  }
+
+  function handleOption(term: string) {
+    currentValue = term;
+    defaultValue = currentValue;
+    active = false;
+  }
+</script>
+
+<div class="term" name="school-year">
+  <div class="option-box" class:active>
+    <div class="selected" on:click={toggleDropdown}>{currentValue}</div>
+
+    <div class="option">
+      {#each options as optionValue (optionValue)}
+        <div class="option-choice" on:click={() => handleOption(optionValue)}>
+          {optionValue}
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style lang="scss">
+  .term {
+    font-weight: 600;
+    .option-box {
+      flex-direction: column;
+      display: flex;
+      justify-content: center;
+      font-size: var(--size-sm);
+      user-select: none;
+      text-align: center;
+      width: 9em;
+
+      .option-choice,
+      .selected {
+        color: var(--perma-light);
+      }
+
+      .selected {
+        background-color: var(--button-bg);
+        padding: 8px 24px;
+        cursor: pointer;
+        border-radius: 8px;
+        transition: 0.25s ease-in-out;
+
+        &:hover {
+          background-color: var(--button-hover);
+        }
+      }
+      .option {
+        cursor: pointer;
+        opacity: 0;
+        transition: 0.25s ease-in-out;
+
+        .option-choice {
+          text-align: center;
+          cursor: pointer;
+          transition: 0.25s ease-in-out;
+
+          &:hover {
+            color: var(--acm-blue);
+          }
+        }
+      }
+    }
+
+    .active {
+      & > .selected {
+        border-radius: 8px 8px 0 0;
+      }
+
+      & > .option {
+        opacity: 100%;
+        background-color: var(--button-bg);
+        padding: 8px 24px;
+        margin-top: 0.2rem;
+        border-radius: 0 0 8px 8px;
+        transition: 0.25s ease-in-out;
+      }
+    }
+  }
+</style>

src/lib/components/toaster/toasts.ts

@@ -1,4 +1,4 @@
-import { acmGeneral } from '$lib/legacy/acm-paths';
+import { acmGeneral } from '$lib/public/legacy/acm-paths';
 import { writable } from 'svelte/store';
 
 const MAX_TOASTS = 4;

src/lib/public/board/data/index.ts

@@ -0,0 +1,10 @@
+import type { Officer } from '$lib/public/board/types';
+import { Term } from '$lib/public/board/types';
+import OFFICERS_JSON from './officers.json';
+import TIERS_JSON from './tiers.json';
+
+export const VISIBLE_TERMS = [Term.Fall22, Term.Spring22, Term.Fall21, Term.Spring21];
+
+export const OFFICERS: Officer[] = [...OFFICERS_JSON];
+
+export const TIERS: string[] = [...TIERS_JSON];