Feat: vite

.github/dependabot.yml

@@ -0,0 +1,19 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    groups:
+      npm:
+        patterns:
+          - "*"
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      # Check for updates to GitHub Actions every week
+      interval: "weekly"
+    groups:
+      github-actions:
+        patterns:
+          - "*"

.github/workflows/lint.yaml

@@ -0,0 +1,29 @@
+name: Linting
+
+on:
+  # Triggers the workflow on push or pull request events but only for the "master" branch
+  push:
+    branches: [ "main", "develop" ] # Until we wa are on master
+  pull_request:
+    branches: [ "main" ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  lint:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v4
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Run lint script
+        run: npm run lint

.gitignore

@@ -26,5 +26,13 @@ yarn-debug.log*
 yarn-error.log*
 localhost-key.pem
 localhost.pem
+mkcert.exe
 src/setupProxy.js
 public/img_unknown.png
+
+/.idea/.gitignore
+/.idea/misc.xml
+/.idea/modules.xml
+/.idea/teddycloud_web.iml
+/.idea/vcs.xml
+/package-lock.json

README.md

@@ -44,8 +44,7 @@ If you don't need the ESP32 Box flashing section working, you can adapt the `pac
         "start-https": "cross-env HTTPS=true PORT=3443 vite",
         "start": "concurrently \"npm run start-http\" \"npm run start-https\"",
         "build": "tsc && vite build",
-        "preview": "vite preview",
-        "api:generate": "rm -rf ./src/api && openapi-generator-cli generate -i ./api/swagger.yaml -g typescript-fetch -o ./src/api --additional-properties=typescriptThreePlus=true"
+        "preview": "vite preview"
     },
 ```
 
@@ -55,8 +54,7 @@ to
 "scripts": {
         "start": "npm run start",
         "build": "tsc && vite build",
-        "preview": "vite preview",
-        "api:generate": "rm -rf ./src/api && openapi-generator-cli generate -i ./api/swagger.yaml -g typescript-fetch -o ./src/api --additional-properties=typescriptThreePlus=true"
+        "preview": "vite preview"
      },
 ```
 
@@ -110,7 +108,7 @@ token.*
 
 ### Usage of translations
 
-Please use always `t("...")` instead of hard coded text. Please add the strings in the English, German and French translation Json.
+Please use always `t("...")` instead of hard coded text. Please add the strings in the English, German, French and Spanish translation Json.
 
 ### Adding new API request method
 
@@ -123,6 +121,18 @@ If you need to add a new API request to the TeddyCloud API, please use one of th
 
 If none of the existing methods meet your needs, add the new request to `src/api/apis/TeddyCloudApi.ts`. We prefer to have all API requests centralized in this file. One reason is the upcoming authentication for accessing the API.
 
+### Linking to other sites
+
+If you need to link to another source, element, or URL, please check if it is already defined in `constants.tsx`. If it is, use the existing variable instead of hardcoding the URL. If it isn’t, consider adding it as a variable in `constants.tsx` - you may need this URL more than once. Defining it as a variable ensures you only need to update it in one place if the URL changes in the future.
+
+The following URLs have already been defined (partial list):
+
+-   tonieboxDefaultImageUrl = "https://cdn.tonies.de/thumbnails/03-0009-i.png"
+-   telegramGroupUrl = "https://t.me/toniebox_reverse_engineering"
+-   forumUrl = "https://forum.revvox.de/"
+-   gitHubUrl = "https://github.com/toniebox-reverse-engineering"
+-   wikiUrl = "https://tonies-wiki.revvox.de/docs/tools/teddycloud/"
+
 ## Tips and Tricks
 
 ### Missing img_unknown.png
@@ -143,7 +153,17 @@ Sometimes it happens, that the dev environment unexpected crashes. Even after a
 
 ### API Definitions
 
-Ideally, the TeddyCloudApi.ts should be generated with swagger.yaml. However, it was actually changed manually and new API functions were added directly. This should be revised in the future. Until then, you should NOT generate the API with the openapitools, as this will break the frontend.
+Ideally, the TeddyCloudApi.ts should be generated using OpenApiTools with the `swagger.yaml`. However, it was actually changed manually and new API functions were added directly. This should be revised in the future. Until then, you should NOT generate the API with the OpenApiTools, as this will break the frontend.
+
+Due to security reasons we removed "@openapitools/openapi-generator-cli" from the devDependencies completely. If you want to refactor the manually changed api functions and bring back support for OpenApiTools, add it and the following in the package.json:
+
+```json
+"scripts": {
+    ...
+    "api:generate": "rm -rf ./src/api && openapi-generator-cli generate -i ./api/swagger.yaml -g typescript-fetch -o ./src/api --additional-properties=typescriptThreePlus=true"
+    ...
+}
+```
 
 ## General React App information
 
@@ -153,11 +173,23 @@ This project was bootstrapped with [Vite](https://vitejs.dev/).
 
 ## Typicale development workflow:
 
+### Preconditions
+
+You have `node.js` and `python` installed.
+
 ### Install dotenv
 
-Debian: `sudo apt install python3-dotenv-cli`
+#### Debian
 
-### additional packages
+`sudo apt install python3-dotenv-cli`
+
+#### Windows
+
+`pip install python-dotenv` \
+followed by \
+`pip install "python-dotenv[cli]"`
+
+### Install additional packages
 
 You need to install cross-env:
 
@@ -193,3 +225,20 @@ See the section about [deployment](https://vitejs.dev/guide/static-deploy.html)
 You can learn more in the [Vite documentation](https://vitejs.dev/guide/).
 
 To learn React, check out the [React documentation](https://reactjs.org/).
+
+# Attribution
+
+The **Open Toniebox Guide** (`src\components\tonieboxes\boxSetup\OpenBoxGuide.tsx`) is based on the following two excellent guides from iFixIt.com:
+
+-   [iFixIt[1]] [Toniebox Opening Procedure](https://www.ifixit.com/Guide/Toniebox+Opening+Procedure/124139)
+-   [iFixIt[2]] [Toniebox Teardown](https://www.ifixit.com/Teardown/Toniebox+Teardown/106148)
+
+Both guides were originally written and illustrated by [Tobias Isakeit](https://www.ifixit.com/User/828031/Tobias+Isakeit), who also created all the images used here.
+
+Special thanks to Tobias for providing such clear and detailed instructions!
+
+The icons used are from here:
+
+-   logo.png: https://www.flaticon.com/free-icon/dog_2829818
+
+Thanks for the original authors for these great icons.