Merge pull request #18 from officialMECH/dev

Maintenance (2024-09-30)

Author: officialMECH

.eslintrc

@@ -2,7 +2,7 @@
 
 Thank you for taking the time to contribute!
 
-Any contributions to this project are always welcome and encouraged, regardless of programming expertise. If you're not sure where to start or how to contribute, you can refer to [these articles](https://contributing.md/) which may give you some useful pointers and insights.
+Any contributions to this project are welcome and encouraged, regardless of programming expertise. If you're not sure where to start or how to contribute, you can refer to [these articles](https://contributing.md/) which may give you some useful pointers and insights.
 
 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. That way, you'll have a greater possibility of finding a solution to your issue if it is already resolved or any further developments/context related to your issue from other maintainers or collaborators.
 
@@ -18,17 +18,35 @@ This project is bootstrapped with a modified [Vite](https://vitejs.dev/) + [Reac
 ### 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/) in your workspace if you haven't already.
-2. Open a new terminal and run `yarn install` and `yarn prepare`. This will install all necessary dependencies and run supplementary code generation processes.
-3. Make your changes! You can run `yarn dev` at anytime to start a local development server or `yarn build` and `yarn preview` to build a local production server and preview your changes.
-4. Before you commit your changes, make sure to run `yarn test` at least once to ensure all unit tests are passing, and check for any underlying errors or vulnerabilities that could make your code unsafe to run in production.
-5. Once you're ready, you can submit a new pull request and await feedback.
+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 (VSC should prompt you to do so). This will enable useful workspace integrations that are compatible with the codebase.
+5. Open a new terminal in your cloned directory and run `yarn install`. This will install all necessary dependencies and run any supplementary code generation processes.
+6. Make your changes! You can run `yarn dev` to start a local development environment or `yarn build` + `yarn preview` for a production environment.
+    - If you're running a local development environment, run `yarn prepare` once beforehand to run all necessary codegen workflows for the server.
+7. Once the server is running, you can open the `localhost` link that appears in console to preview your changes on your local machine.
 
-### Other Specifications
+#### Git Hooks
 
-- [PandaCSS](https://panda-css.com/) is used as the primary styling engine. After running `yarn prepare` or making changes to the `panda.config.ts` file at runtime, the engine will autogenerate the contents of `src/styles` for use throughout the project.
-- Similarly, routing is provided by [Generouted](https://github.com/oedotme/generouted), and will autogenerate the contents of the `src/router.ts` file at runtime.
-- ESLint and Prettier will automatically reformat your code when staging new commits to enforce a consistent coding style. If this does not work for some reason, you can run `yarn lint --fix` and `yarn format --write` respectively to manually run the linter/formatter on your code.
+Pre-commit hooks are configured via [lefthook](https://github.com/evilmartians/lefthook) to run workflows 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, you can run the following command to manually run the linter/formatter on select files: `yarn check --write {files}`.
+- [ ] Always run `yarn test` at least once to ensure all unit tests are passing.
+- [ ] Make a production build for your application (`yarn build && yarn preview`) and ensure no critical errors are present or noticeable.
+
+## Technologies
+
+- [Biome](https://biomejs.dev/) is used for all linting and formatting concerns. The configured git hooks should run the linting and formatting workflows automatically on pre-commit, but you can also run `yarn biome -h` to run any additional commands as needed.
+- [PandaCSS](https://panda-css.com/) is used as the primary styling engine. After running `yarn prepare` or making changes to the `panda.config.ts` file at runtime, the engine will autogenerate the contents of `./styled-system` for use throughout the project.
+- Similarly, routing is provided by [Generouted](https://github.com/oedotme/generouted) and will autogenerate the contents of the `src/router.ts` file at runtime.

.github/CONTRIBUTING.md

@@ -8,7 +8,7 @@ on:
     types: [completed]
 
 env:
-  NODE_VERSION: 18
+  NODE_VERSION: 20
 
 permissions:
   contents: read
@@ -29,9 +29,9 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn
@@ -44,11 +44,11 @@ jobs:
           yarn build --base="/${{ github.event.repository.name }}/"
           cp ./dist/index.html ./dist/404.html
       - name: Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v4
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
-          path: ./dist
+          path: './dist'
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.github/workflows/pages.yml

@@ -2,55 +2,32 @@ name: Code Quality
 
 on:
   push:
-  pull_request:
   workflow_dispatch:
 
 env:
-  NODE_VERSION: 18
+  NODE_VERSION: 20
 
 jobs:
-  lint:
-    name: Lint (ESLint)
+  check:
+    name: Check (Biome)
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
         with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: yarn
-      - name: Install dependencies
-        run: yarn install --immutable
-      - name: Prepare
-        run: yarn prepare
-      - name: Run ESLint
-        run: yarn lint --fix=false
-  format:
-    name: Format (Prettier)
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: yarn
-      - name: Install dependencies
-        run: yarn install --immutable
-      - name: Prepare
-        run: yarn prepare
-      - name: Run Prettier
-        run: yarn format --check
+          version: latest
+      - name: Run Biome
+        run: biome ci .
   test:
     name: Run Unit Tests (Vitest)
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/checkout@v4
+      - name: Set up Node
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
           cache: yarn

.github/workflows/quality.yml

@@ -1,18 +1,11 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-node_modules
-dist
-dist-ssr
+# workspace
 *.local*
+*todo*
 
-# Yarn
+# dependencies
+/node_modules
 .pnp.*
 .yarn/*
 !.yarn/patches
@@ -21,16 +14,22 @@ dist-ssr
 !.yarn/sdks
 !.yarn/versions
 
-# Autogenerated
-src/styles
+# testing
+/coverage
+
+# production
+/dist
+
+# autogenerated
+styled-system
 
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
+# misc
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.gitignore

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

.husky/pre-commit

@@ -0,0 +1,20 @@
+{
+	"editor.defaultFormatter": "biomejs.biome",
+	"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*",
+		"tsconfig.json": "tsconfig.*.json",
+		"vite.config.ts": "*.config.js, *.config.cjs, *.config.mjs, *.config.ts"
+	},
+	"files.exclude": {
+		"**/.git": true,
+		"**/.yarn": true,
+		"**/node_modules": true,
+		"**/yarn.lock": true
+	}
+}