Release: 0.3.1 (#4)

* TypeScript Rewrite (#3)

* upgrade workspace

* migrate to vite

* configure biome toolchain

* add optional git hooks

* lint codebase

* fix tests

* update dependencies

* documentation fixes

* update readme

* organize types

* organize constants

* prefer enums over literals

* organize utils

* organize remaining logic

* organize assets

* organize store

* use modern redux conventions

* migrate features to toolkit

* migrate enhancers to toolkit

* add types for components

* clean up and type fixes

* unit test fixes

* more bugfixes

* fix media resolution for mdx files

* update documentation

* couple more hotfixes

* permit download of demo map in dev build

* minor schema fixes

* final round of fixes

* update dependencies

* apply changesets

* update workflows

* take 2

* take 3

* update docs for release

* add contributor guide & issue templates

.github/ISSUE_TEMPLATE/bug.md

@@ -0,0 +1,31 @@
+---
+name: Bug Report
+about: File a bug report.
+labels: bug
+---
+
+<!-- Please follow the template as closely as possible for effective issue tracking and resolution. -->
+<!-- Remember to search existing issues before creating a new one to avoid duplicates. -->
+
+## Description <!-- What happened? -->
+
+
+
+## Expected Behavior <!-- What did you expect to happen? -->
+
+
+
+## Steps to Reproduce <!-- What steps did you take to get this issue? Try to be as detailed as possible. -->
+
+1.
+2.
+3.
+
+## Environment <!-- Replace each comment with the relevant information about your environment. -->
+
+- App Version: <!--(e.g. 0.3.1)-->
+- Device: <!--(e.g. Desktop, iPhone)-->
+- OS: <!--(e.g. Windows, iOS)-->
+- Browser: <!--(e.g. Chrome, Firefox, Safari)-->
+
+## Additional Context <!-- Any other information that's relevant to your issue? -->

.github/ISSUE_TEMPLATE/enhancement.md

@@ -0,0 +1,22 @@
+---
+name: Feature Request
+about: Suggest an improvement for the editor.
+labels: enhancement
+---
+
+<!-- Please follow the template as closely as possible for effective issue tracking and resolution. -->
+<!-- Remember to search existing issues before creating a new one to avoid duplicates. -->
+
+## Description <!-- What is your request? -->
+
+
+
+## Why? <!-- Why is this worth implementing? How would this improve the experience for users? -->
+
+
+
+## Implementation Details <!-- How would you want this to be implemented? -->
+
+
+
+## Additional Context <!-- Any other information that's relevant to your issue? -->

.github/workflows/deploy.yml

@@ -1,40 +1,52 @@
-name: Deploy
+name: Deployment
+
 on:
-  push:
-    branches:
-      - master
+  workflow_dispatch:
+  workflow_run:
+    workflows: ["Code Quality"]
+    branches: [$default-branch]
+    types: [completed]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: production
+  cancel-in-progress: false
 
 env:
-  NODE_VERSION: 16.x
+  NODE_VERSION: 20.x
 
 jobs:
   deploy:
     name: Deploy
     runs-on: ubuntu-latest
-    permissions:
-      pages: write
-      id-token: write
+    if: ${{ (github.event.workflow_run.conclusion == 'success') && (github.repository_owner == 'bsmg') }}
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-      - name: Setup Node.js
+      - name: Setup Node
         uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
-      - name: Install packages
+      - name: Install dependencies
         run: yarn install --immutable
       - name: Build
-        run: yarn run build
-      - name: Configure GitHub Pages
-        uses: actions/configure-pages@v3
-      - name: Upload Pages Artifact
-        uses: actions/upload-pages-artifact@v2
+        run: |
+          yarn build
+          cp ./dist/index.html ./dist/404.html
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
         with:
-          path: build
-      - name: Deploy
+          path: ./dist
+      - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/quality.yml

@@ -0,0 +1,37 @@
+name: Code Quality
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [$default-branch]
+  pull_request:
+
+env:
+  NODE_VERSION: 20.x
+
+jobs:
+  check:
+    name: Run Quality Checks (Biome)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
+      - name: Run Biome
+        run: biome ci --config-path="./biome.json" --diagnostic-level=error .
+  test:
+    name: Run Unit Tests (Vitest)
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Run Vitest
+        run: yarn test run

.gitignore

@@ -1,5 +1,9 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# workspace
+*.local*
+*todo*
+
 # dependencies
 /node_modules
 .pnp.*
@@ -9,11 +13,12 @@
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
 # testing
 /coverage
 
 # production
-/build
+/dist
 
 # misc
 .DS_Store

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+	"recommendations": ["biomejs.biome", "unifiedjs.vscode-mdx", "vitest.explorer"]
+}

.vscode/settings.json

@@ -1,3 +1,25 @@
 {
-  "editor.formatOnSave": true
-}
+	"editor.defaultFormatter": "biomejs.biome",
+	"editor.formatOnSave": true,
+	"editor.formatOnSaveMode": "file",
+	"explorer.fileNesting.enabled": true,
+	"explorer.fileNesting.patterns": {
+		"*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts, ${capture}.test.js",
+		"*.ts": "${capture}.js, ${capture}.test.ts",
+		"*.jsx": "${capture}.js",
+		"*.tsx": "${capture}.ts",
+		".gitignore": "*ignore",
+		"package.json": "yarn.lock, .yarnrc.yml, biome.json, lefthook.yml",
+		"README.md": "*.md, AUTHORS*, BACKERS*, CHANGELOG*, CODEOWNERS*, CONTRIBUTING*, CONTRIBUTORS*, CODE_OF_CONDUCT*, GOVERNANCE*, HISTORY*, LICENSE*, MAINTAINERS*, SECURITY*, SPONSORS*, TODO*, *.todo",
+		"tsconfig.json": "tsconfig.*.json",
+		"vite.config.ts": "*.config.js, *.config.cjs, *.config.mjs, *.config.ts"
+	},
+	"files.exclude": {
+		"**/.git": true,
+		"**/.yarn/install-state.gz": true,
+		"**/.yarn/releases": true,
+		"**/node_modules": true,
+		"**/yarn.lock": true
+	},
+	"typescript.tsdk": "node_modules\\typescript\\lib"
+}

.yarnrc.yml

@@ -1,5 +1,7 @@
+compressionLevel: mixed
+
 enableGlobalCache: true
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.1.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.1.cjs

CONTRIBUTING.md

@@ -0,0 +1,56 @@
+# Contributor's Guide
+
+Thank you for taking the time to contribute!
+
+Any contributions to this project are welcome and encouraged, regardless of programming expertise.
+If you're not sure where to start or how contributing works, you can refer to [these articles](https://contributing.md/) which may give you some useful pointers and insights.
+
+## For Users
+
+Before you jump the gun, we ask that you first and foremost check the following feeds to see if your issue has already been addressed or resolved:
+
+- [**Issues**](https://github.com/bsmg/beatmapper/issues): bug reports, feature requests
+- [**Discussions**](https://github.com/bsmg/beatmapper/discussions): feedback, support, etc.
+
+If you issue has already been listed, you're welcome to add a comment if you have any additional context to contribute!
+
+When creating a new issue, please use the corresponding templates to better organize the context surrounding your issue and make it as easy as possible for maintainers to address your issue in a timely manner.
+
+## For Developers
+
+This project is bootstrapped with a modified [Vite](https://vitejs.dev/) + [React](https://react.dev/) + [Typescript](https://www.typescriptlang.org/) template.
+
+### Prerequisites
+
+- [Node.js](https://nodejs.dev/en/learn/) (LTS is recommended)
+- [Visual Studio Code](https://code.visualstudio.com/docs/sourcecontrol/overview#_branches-and-tags)
+
+### Project Setup
+
+1. Install [Node.js](https://nodejs.dev/en/learn/how-to-install-nodejs/) and [Visual Studio Code](https://code.visualstudio.com/Download) if you haven't already.
+2. [Create a new fork](https://guides.github.com/activities/forking/) of the repository and [clone it](https://code.visualstudio.com/docs/sourcecontrol/overview#_cloning-a-repository) to your local machine.
+3. [Create a new dedicated branch](https://help.github.com/en/github/collaborating-with-issues-and-pull-requests/creating-and-deleting-branches-within-your-repository#creating-a-branch) and sync it to your workspace.
+4. If you're using Visual Studio Code, install the recommended workspace extensions (the editor should prompt you to do so). This will enable useful integrations for your workspace.
+5. Open a new terminal in your cloned directory and run `yarn install`. This will install all necessary dependencies to bundle the application.
+6. Make your changes! You can run `yarn dev` to start a local development environment or `yarn build` + `yarn preview` for a production environment.
+7. Once the server is running, you can open the `localhost` link that appears in console to access the app on your local machine.
+
+#### Git Hooks
+
+Pre-commit hooks are configured via [lefthook](https://github.com/evilmartians/lefthook) to run linters/formatters automatically before making commits to the repository.
+
+**These hooks are not enabled by default**, but you can run `yarn lefthook install` to enable them for your workspace.
+
+### Submitting a Pull Request
+
+If you think you're ready to make a pull request, be sure to run through the following checklist to ensure your code is production-ready:
+
+- [ ] If you did not activate the available git hooks for your workspace, run the following command to manually run the linter/formatter on your changes: `yarn check --write {files}`.
+- [ ] Run `yarn test run` to ensure all unit tests are passing.
+- [ ] Make a production build for your application (`yarn build && yarn preview`) and ensure your changes are stable and no critical errors are present.
+- [ ] Review your changes, and run `yarn version <major|minor|patch> --deferred` to add a changeset. This will make it easier for maintainers to integrate your changes properly for a future release.
+  - Use `patch` if your changes are strictly stability or performance improvements.
+  - Use `minor` if new features are added and/or non-breaking changes are introduced.
+  - Use `major` for *any and all* breaking changes (i.e. localstorage, redux state, etc).
+
+Once submitted, a maintainer will review your pull request and, once approved, integrate your changes into a staging branch for future release.

README.md

@@ -1,39 +1,34 @@
 # Beatmapper
 
-## A 3D editor for creating Beat Saber maps
+![GitHub package.json version](https://img.shields.io/github/package-json/v/bsmg/beatmapper)
+[![Checked with Biome](https://img.shields.io/badge/Checked_with-Biome-60a5fa?logo=biome)](https://biomejs.dev)
+![Deployment workflow status](https://github.com/bsmg/beatmapper/actions/workflows/deploy.yml/badge.svg)
 
-![Beatmapper preview](https://github.com/bsmg/beatmapper/blob/master/preview.png?raw=true)
+Beatmapper is a web-based _level editor_ for Beat Saber.
 
-[![Docker Build](https://github.com/bsmg/beatmapper/actions/workflows/docker.yml/badge.svg)](https://github.com/bsmg/beatmapper/actions/workflows/docker.yml)
+![Beatmapper preview](preview.png?raw=true)
 
-Beatmapper is a _map editor_ for Beat Saber, a VR rhythm game. It allows you to create your own maps, for use in the game.
+## Getting Started
 
-### Status: On hold
+Beatmapper works entirely in the browser; there is nothing to download, nor is there a backend. You can get started now at https://beatmapper.app. On your first visit, you'll be able to play around with a demo map to get a feel for the editor.
 
-Unfortunately, I've had to put Beatmapper on the back burner. I do hope to resume work on this project in the future, but for now, you may wish to use an alternative editor.
+Documentation is available at https://beatmapper.app/docs.
 
-At the time of writing (February 2021), I was able to create, test, and publish a map, but I know some folks have had issues, and I don't have the bandwidth to explore them right now. So **please do test that your map works on your headset** before sinking a lot of time and effort into it!
+## Why?
 
-### Getting started
+There are many superior editors available for mapping nowadays, including the official editor. Here are some reasons why you may want to use this one:
 
-Beatmapper works entirely in-browser; there is nothing to download, nor is there a backend. You can get started now at https://beatmapper.app. On your first visit, you'll be able to play around with a demo song, to get a feel for the editor.
+- Works on any platform with a web browser (including Windows, Mac, and Linux).
+- Requires about 1 MB of total download including assets.
+- Comes with a demo track, so you can start playing around immediately.
 
-Documentation is available [at beatmapper.app/docs](https://beatmapper.app/docs/docs/manual.html).
+That said, there's many capabilities other editors have that Beatmapper can't and likely won't be able to support. If that's a dealbreaker for you, we recommend using a more feature-rich editor like [ChroMapper](https://github.com/Caeden117/ChroMapper) or the official editor for a better experience.
 
-### Donations
+## Credits
 
-Beatmapper is a single-person side-project. I've already invested many, many, many hours in it. If you derive value from it, I'd appreciate donations:
+Beatmapper is formally maintained by the [Beat Saber Modding Group](https://bsmg.wiki), with additional contributions from the following community members:
 
-- [One-time donation](https://ko-fi.com/joshwcomeau)
-- [Become a patron](https://www.patreon.com/joshwcomeau)
+- **[officialMECH](https://github.com/officialMECH)** | Current Maintainer
 
-### Why?
-
-There are several editors already in existence, including an official one. Why make another one?
-
-- Cross-platform support. This editor is the only editor that works on MacOS and Linux (some other editors don't even work in a Windows VM!)
-- Get started effortlessly. Requires <1mb of total download including assets. It even comes with a demo track, so you can start playing around immediately.
-- No "memes".
-- Full compatibility. Beatmapper exports both available Beat Saber file formats, which means you can transfer exported maps directly to your Beat Saber device, or import them into other editors. You can also import existing maps in both formats.
-
-I'm creating Beatmapper primarily for myself, for fun. Bug reports and feature requests are appreciated, but please understand, **I work on this when I want to**. If you don't like the editor, you do not have to use it.
+The original version of Beatmapper was a side-project made by **[Josh Comeau](https://joshwcomeau.com)**.
+If you derive value from it, feel free to [show your support](https://ko-fi.com/joshwcomeau) to the original creator!