Release (#846)

* build(deps-dev): bump @types/react from 18.3.3 to 18.3.11 Bumps [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react) from 18.3.3 to 18.3.11. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) --- updated-dependencies: - dependency-name: "@types/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * build(deps-dev): bump eslint-config-next from 14.2.5 to 14.2.14 Bumps [eslint-config-next](https://github.com/vercel/next.js/tree/HEAD/packages/eslint-config-next) from 14.2.5 to 14.2.14. - [Release notes](https://github.com/vercel/next.js/releases) - [Changelog](https://github.com/vercel/next.js/blob/canary/release.js) - [Commits](https://github.com/vercel/next.js/commits/v14.2.14/packages/eslint-config-next) --- updated-dependencies: - dependency-name: eslint-config-next dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * build(deps): bump next-intl from 3.17.2 to 3.20.0 Bumps [next-intl](https://github.com/amannn/next-intl) from 3.17.2 to 3.20.0. - [Release notes](https://github.com/amannn/next-intl/releases) - [Changelog](https://github.com/amannn/next-intl/blob/main/CHANGELOG.md) - [Commits](amannn/next-intl@v3.17.2...v3.20.0) --- updated-dependencies: - dependency-name: next-intl dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * build(deps-dev): bump @playwright/test from 1.46.1 to 1.47.2 Bumps [@playwright/test](https://github.com/microsoft/playwright) from 1.46.1 to 1.47.2. - [Release notes](https://github.com/microsoft/playwright/releases) - [Commits](microsoft/playwright@v1.46.1...v1.47.2) --- updated-dependencies: - dependency-name: "@playwright/test" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * build(deps-dev): bump eslint-config-next from 14.2.14 to 14.2.15 Bumps [eslint-config-next](https://github.com/vercel/next.js/tree/HEAD/packages/eslint-config-next) from 14.2.14 to 14.2.15. - [Release notes](https://github.com/vercel/next.js/releases) - [Changelog](https://github.com/vercel/next.js/blob/canary/release.js) - [Commits](https://github.com/vercel/next.js/commits/v14.2.15/packages/eslint-config-next) --- updated-dependencies: - dependency-name: eslint-config-next dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * build(deps): bump typescript from 5.5.4 to 5.6.3 Bumps [typescript](https://github.com/microsoft/TypeScript) from 5.5.4 to 5.6.3. - [Release notes](https://github.com/microsoft/TypeScript/releases) - [Changelog](https://github.com/microsoft/TypeScript/blob/main/azure-pipelines.release.yml) - [Commits](microsoft/TypeScript@v5.5.4...v5.6.3) --- updated-dependencies: - dependency-name: typescript dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * build(deps): bump next from 14.2.14 to 14.2.15 Bumps [next](https://github.com/vercel/next.js) from 14.2.14 to 14.2.15. - [Release notes](https://github.com/vercel/next.js/releases) - [Changelog](https://github.com/vercel/next.js/blob/canary/release.js) - [Commits](vercel/next.js@v14.2.14...v14.2.15) --- updated-dependencies: - dependency-name: next dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * build(deps-dev): bump @playwright/test from 1.47.2 to 1.48.0 Bumps [@playwright/test](https://github.com/microsoft/playwright) from 1.47.2 to 1.48.0. - [Release notes](https://github.com/microsoft/playwright/releases) - [Commits](microsoft/playwright@v1.47.2...v1.48.0) --- updated-dependencies: - dependency-name: "@playwright/test" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * feat: Init Change to UseAppRouter * feat: Change Package manager to pnpm * fix: Use pnpm action * ci: Cache dependencies * fix: Remove package-lock.json * build(deps): bump next-intl from 3.20.0 to 3.21.1 Bumps [next-intl](https://github.com/amannn/next-intl) from 3.20.0 to 3.21.1. - [Release notes](https://github.com/amannn/next-intl/releases) - [Changelog](https://github.com/amannn/next-intl/blob/main/CHANGELOG.md) - [Commits](amannn/next-intl@v3.20.0...v3.21.1) --- updated-dependencies: - dependency-name: next-intl dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * build(deps): bump pnpm/action-setup from 2 to 4 Bumps [pnpm/action-setup](https://github.com/pnpm/action-setup) from 2 to 4. - [Release notes](https://github.com/pnpm/action-setup/releases) - [Commits](pnpm/action-setup@v2...v4) --- updated-dependencies: - dependency-name: pnpm/action-setup dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <support@github.com> * feat: Refactor code * fix: Memoize shareOptions * feat: Upgrade to Next.js 15 / React 19 * docs: Remove seperate documents as they're not needed anymore Will be included later on in the README * chore: Use Interface on memo * fix: Use of math in sass files * feat: Major refactor for performance improvements * fix: Minor issues (CC: Sonar) * fix: Remove type any * fix: Union type overwrite * feat: Upgrade to next.config.ts * chore(deps): Upgrade ESLint v9 * ci: Update pnpm version * feat: Improve React. imports as direct imports * feat: Add preprocessor to ingredients form * fix(a11y): Change color on source links for AAA contrast ratio * fix: Linting error import/order * test: Add unit tests for utils * build(deps): bump sass from 1.79.4 to 1.80.4 Bumps [sass](https://github.com/sass/dart-sass) from 1.79.4 to 1.80.4. - [Release notes](https://github.com/sass/dart-sass/releases) - [Changelog](https://github.com/sass/dart-sass/blob/main/CHANGELOG.md) - [Commits](sass/dart-sass@1.79.4...1.80.4) --- updated-dependencies: - dependency-name: sass dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * build(deps): bump @types/node from 22.5.4 to 22.8.1 Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 22.5.4 to 22.8.1. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com> * build(deps): bump @frontendnetwork/veganify from 1.2.5 to 1.2.9 Bumps [@frontendnetwork/veganify](https://github.com/JokeNetwork/veganify-api-wrapper) from 1.2.5 to 1.2.9. - [Commits](https://github.com/JokeNetwork/veganify-api-wrapper/commits) --- updated-dependencies: - dependency-name: "@frontendnetwork/veganify" dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> * ci: Run e2e tests after deploying * chore: Setup Playwright * feat: Reuse License modal * test: Change E2E to staging url * fix: Product Hunt Badge size * docs: Added improved dev guide * docs: Formatting --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
frontendnetwork · Oct 26, 2024 · eb75ccc · eb75ccc
1 parent c166e98
commit eb75ccc
Show file tree

Hide file tree

Showing 91 changed files with 12,297 additions and 12,361 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,14 +1,45 @@
 {
-  "extends": ["next/core-web-vitals", "plugin:@typescript-eslint/recommended", "plugin:import/errors", "plugin:import/warnings", "plugin:import/typescript"],
+  "root": true,
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/strict",
+    "plugin:@typescript-eslint/stylistic",
+    "plugin:import/recommended",
+    "plugin:import/typescript"
+  ],
   "plugins": ["@typescript-eslint", "import"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "ecmaVersion": 2022,
+    "sourceType": "module"
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "project": "./tsconfig.json"
+      },
+      "node": true
+    }
+  },
   "rules": {
-    "import/order": ["error", {
-      "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
-      "newlines-between": "always",
-      "alphabetize": {
-        "order": "asc",
-        "caseInsensitive": true
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
       }
-    }]
+    ]
   }
 }
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -143,3 +143,35 @@ jobs:
       - name: Restart Kubernetes Pod
         run: |
           kubectl rollout restart deployment/veganify -n veganify-staging
+
+  e2e-tests:
+    needs: deploy-staging
+    if: github.ref == 'refs/heads/staging'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 9.12.1
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Wait for deployment to be ready
+        run: |
+          # Wait for 30 seconds to allow deployment to stabilize
+          sleep 30
+
+      - name: Run Playwright tests
+        run: npx playwright test
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -1,36 +1,38 @@
 name: Build and Lint PRs
-
 on: [pull_request]
-
 jobs:
   regular_build:
     runs-on: ubuntu-latest
-
     steps:
       - uses: actions/checkout@v4
-
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.1
       - uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
-          cache: 'npm'
-
-      - run: npm ci
-      - run: npm run build
-      - run: npm run lint
-
+          node-version: "20.x"
+          cache: "pnpm"
+          cache-dependency-path: "**/pnpm-lock.yaml"
+      - run: pnpm install
+      - run: pnpm run lint
+      - run: pnpm run type-check
+      - run: pnpm run test
+      - run: pnpm run build
   legacy_peer_deps_build:
     runs-on: ubuntu-latest
     needs: regular_build
     if: ${{ always() && needs.regular_build.result == 'failure' }}
-
     steps:
       - uses: actions/checkout@v4
-
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.12.1
       - uses: actions/setup-node@v4
         with:
-          node-version: '18.x'
-          cache: 'npm'
-
-      - run: npm ci --legacy-peer-deps
-      - run: npm run build
-      - run: npm run lint
+          node-version: "20.x"
+          cache: "pnpm"
+      - run: pnpm install --no-strict-peer-dependencies
+      - run: pnpm run lint
+      - run: pnpm run type-check
+      - run: pnpm run test
+      - run: pnpm run build
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+test-results/.last-run.json
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,5 +1,7 @@
 {
   "recommendations": [
-    "inlang.vs-code-extension"
+    "inlang.vs-code-extension",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
   ]
-}
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,22 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always"
+  },
+  "editor.formatOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "eslint.workingDirectories": [
+    {
+      "mode": "location"
+    }
+  ],
+  "eslint.options": {
+    "overrideConfigFile": ".eslintrc.json"
+  },
+  "typescript.tsdk": "node_modules/typescript",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:18-alpine AS base
+FROM node:20-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps

diff --git a/README.md b/README.md
@@ -13,44 +13,170 @@ Check if a product is vegan or not with <a href="https://veganify.app"><strong>
 </div>
 
 ## Overview
+
 Veganify checks the barcode (EAN or UPC) of a food- or non-food-product and tells you if it is vegan or not. It is an useful tool for vegans and vegetarians - Developed with usability and simplicity in mind, so without distracting irrelevant facts or advertising.
-	
-Veganify combines the Databases of OpenFoodFacts, OpenBeautyFacts and Open EAN Database, as well as our very own ingredient checker in one tool. 
+Veganify combines the Databases of OpenFoodFacts, OpenBeautyFacts and Open EAN Database, as well as our very own ingredient checker in one tool.
+
 <details>
   <summary>See an example of how it works!</summary>
   <img src="https://user-images.githubusercontent.com/4144601/198900839-8dc58d58-fdb8-48b6-93e4-a4662ae64954.mov" width="300">
   <img src="https://user-images.githubusercontent.com/4144601/198900861-49ef1a5f-0663-4d73-b72d-d147cddaabd3.MP4" width="300">
-</details>	
+</details>
 
-
 The [Veganify Ingredients API](https://github.com/frontendnetwork/Veganify-API) checks the products ingredients against a list of thousands of non-vegan items.
 
 <p align="center">
 <a href="https://veganify.app">Open PWA in browser</a> | <a href="https://frontendnet.work/#projects">Product page on FrontEndNetwork</a> | <a href="https://frontendnet.work/veganify-api">Use the API</a> | <a href="https://shareshortcuts.com/shortcuts/2224-vegancheck.html">iOS Shortcut</a> | <a href="https://stats.uptimerobot.com/LY1gRuP5j6">Uptime Status</a>
 </p>
 
-
-## Installation
-[Click here to see the installation guide!](https://frontendnetwork.github.io/veganify/)
+## Developer Guide
+
+> [!TIP]
+> We're using [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) for commit messages. Please follow this convention when making changes.
+
+### Prerequisites
+
+- Node.js 20 or later
+- pnpm (enabled via corepack)
+
+To enable pnpm using corepack:
+
+```bash
+corepack enable
+corepack prepare pnpm@latest --activate
+```
+
+### Getting Started
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/frontendnetwork/veganify.git
+   cd veganify
+   ```
+2. Install dependencies & start dev server:
+
+   ```bash
+   pnpm install
+   pnpm dev
+   ```
+
+### Project Structure
+
+```
+src/
+├── @components/
+│   ├── shared/
+│   ├── ComponentName/
+│   │   ├── hooks/      			# Component-specific hooks
+│   │   ├── utils/      			# Component-specific utilities
+│   │   │	├── util.ts
+│   │   │	└──	util.test.ts		# Utility specify tests
+│   │   ├── models/     			# Component-specific types/interfaces
+│   │   ├── componentPart.tsx		# Component files
+│   │   └── index.tsx				# Component files
+├── @models/        # Global type definitions
+├── styles/         # CSS styles
+├── tests/          # Only test setup files & Playwright tests
+└── locales/        # next-intl translation files
+```
+
+### Development Commands
+
+```bash
+# Start development server
+pnpm dev
+
+# Run linting
+pnpm lint
+
+# Run type checking
+pnpm check-types
+
+# Run unit tests
+pnpm test
+
+# Run end-to-end tests
+pnpm test:e2e
+
+# Build for production
+pnpm build
+```
+
+### Development Guidelines
 
-## Contribute & Support
-We're happy you want to help! Please read our [Code of Conduct](https://github.com/frontendnetwork/veganify/blob/main/CODE_OF_CONDUCT.md).
+> [!NOTE]  
+> We're aware not everything in this repo follows those standards. This is because of how the project was started and evolved. We're working on improving this.
+
+#### Component Structure
+
+- Break down components into smaller, reusable pieces
+- Each significant component should have its own directory with the following structure:
+  - `hooks/` for component-specific hooks
+  - `utils/` for component-specific utilities
+  - `models/` for component-specific types
+- Small, simple components can be single files
+
+#### Testing
+
+- All utility functions must have 100% test coverage
+- Tests are written using Jest for unit testing
+- Components currently don't require test coverage
+- Playwright is used for end-to-end testing but currently only coversa few basics use cases. More tests are needed.
+
+#### TypeScript
+
+- TypeScript is mandatory
+- The `any` type is not acceptable unless absolutely necessary
+- Always define proper interfaces and types in the appropriate `models` folder
+- Use type inference when possible
+
+#### Internationalization
+
+- Use `next-intl` for translations
+- Add new translations to all language files in `/locales`
+- Follow the existing translation key structure
+
+#### Code Style
+
+- Follow Node.js, React, and Next.js best practices
+- Use the App Router pattern for routing
+- Keep components pure and functional when possible
+- Use hooks for state management and side effects
+- Follow the DRY (Don't Repeat Yourself) principle
+- Use meaningful variable and function names
+- Write comments for complex logic
+- Keep functions small and focused
+
+#### Styling
+
+- Place all styles in the `styles` folder
+- Keep styles modular and scoped to components when possible
+- Be sure to use SCSS for styling
+- Use CSS variables for theming and repeated values
+
+When making a contribution, please follow these guidelines to ensure consistency and maintainability.
+
+Remember that every contribution, no matter how small, is valuable to the project. Thank you for helping make Veganify better!
+
+## Support
+
+Please refer to our issue trackers to see where you could help:
 
-Please refer to our issue trackers to see where you could help: 
 - [[Tasks] Code Improvements](https://github.com/frontendnetwork/veganify/issues/52)
-- [[Tasks] Localization](https://github.com/frontendnetwork/veganify/issues/59) - Learn how to localize Veganify [here](https://frontendnetwork.github.io/veganify/localization)
+- [[Tasks] Localization](https://github.com/frontendnetwork/veganify/issues/59)
 
 <a href="https://fink.inlang.com/github.com/frontendnetwork/veganify?ref=badge"><img src="https://badge.inlang.com/?url=github.com/frontendnetwork/veganify" alt="Veganify on Inlang" style="border-radius: 5%;"></a>
 
 or if you find something else you could improve, just open a new issue for it!
 
 ### Support us
+
 <a href="https://github.com/sponsors/philipbrembeck"><img src="https://img.shields.io/badge/Sponsor%20on%20GitHub-white.svg?logo=githubsponsors" alt="Consider Sponsoring"></a>
 <a href="https://ko-fi.com/vegancheck"><img src="https://img.shields.io/badge/Buy%20us%20a%20coffee-white.svg?logo=kofi" alt="Buy us a coffee"></a>
 <a href="https://www.paypal.com/donate/?hosted_button_id=J7TEA8GBPN536"><img src="https://shields.io/badge/Donate%20with%20PayPal-blue?style=flat&logo=Paypal" alt="Donate"></a>
 
-
 ### Premium Supporters
+
 <a href="https://veganism.social/@mvtracing">
 	<picture>
 	  <source srcset="https://user-images.githubusercontent.com/4144601/218593453-28333f8a-3e24-46d2-8bc9-856eb2e4a390.png" media="(prefers-color-scheme: dark)" width="120">
@@ -65,13 +191,14 @@ or if you find something else you could improve, just open a new issue for it!
 	</picture>
 </a>
 
-## Dependencies & Credits 
+## Dependencies & Credits
 
 This repo uses:
-* [Quagga.js](https://serratus.github.io/quaggaJS/)
-* [OpenFoodFacts API](https://openfoodfacts.org/) & [OpenBeautyFacts API](https://openbeautyfacts.org/) [@openfoodfacts](https://github.com/openfoodfacts)
-* [Open EAN Database](https://opengtindb.org)
+
+- [Quagga.js](https://serratus.github.io/quaggaJS/)
+- [OpenFoodFacts API](https://openfoodfacts.org/) & [OpenBeautyFacts API](https://openbeautyfacts.org/) [@openfoodfacts](https://github.com/openfoodfacts)
+- [Open EAN Database](https://opengtindb.org)
 
 ## License
 
-All text and code in this repository is licensed under [MIT](https://github.com/frontendnetwork/veganify/blob/main/LICENSE), © 2023 Philip Brembeck, © 2023 FrontEndNetwork.
+All text and code in this repository is licensed under [MIT](https://github.com/frontendnetwork/veganify/blob/main/LICENSE), © 2024 Philip Brembeck, © 2024 FrontEndNetwork.
diff --git a/docs/assets/prism.css b/docs/assets/prism.css