Release

[philipbrembeck]

Summary by Sourcery

Implement new features for product search and ingredient checking, refactor components for better maintainability, and update the build and CI configurations to use pnpm. Enhance documentation with a detailed developer guide and introduce comprehensive testing with Jest and Playwright.

New Features:

• Introduce a new product search feature with barcode scanning capability using Quagga for live stream input.
• Add a new ingredients check feature that allows users to input ingredients and determine their vegan status.
• Implement a new layout for the application with improved navigation and metadata handling.

Enhancements:

• Refactor the share button component to use a more flexible and maintainable structure with useMemo for share options.
• Improve the footer component by introducing a reusable FooterLink component for external links.
• Enhance the modal components by consolidating logic and improving the user interface.

Build:

• Update the build configuration to use pnpm instead of npm, including changes to the GitHub Actions workflows.
• Add a new Jest configuration file for testing setup and coverage reporting.

CI:

• Modify the CI workflow to use pnpm for dependency management and add type-checking and testing steps.
• Introduce an end-to-end testing job in the CI pipeline using Playwright.

Documentation:

• Revise the README to include a comprehensive developer guide with project structure, development commands, and guidelines.

Tests:

• Add unit tests for the new product fetching logic and ingredient checking functionality.
• Introduce Playwright tests for end-to-end testing of the application.

Chores:

• Remove deprecated pages and components, including old scanner and translation components.
• Delete outdated documentation files and assets.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request implements a major refactoring and modernization of the codebase, migrating to Next.js App Router, improving type safety, and enhancing code organization. The changes include better component structure, improved error handling, and the adoption of modern React patterns.

Architecture diagram for CI/CD pipeline changes

graph TD;
    A[Pull Request] -->|Trigger| B[Build and Lint PRs]
    B --> C[Regular Build]
    C -->|Success| D[Deploy to Staging]
    C -->|Failure| E[Legacy Peer Deps Build]
    E -->|Success| D
    D --> F[E2E Tests]
    F -->|Run on| G[Staging Environment]

Loading

Class diagram for ShareButton component refactor

classDiagram
    class ShareButton {
        +string productName
        +string barcode
        +boolean showButton
        +useEffect()
        +handleShareClick(shareUrl: string)
        +shareOptions: ShareOption[]
    }
    class ShareOption {
        +string id
        +string text
        +string icon
        +string url
        +handler(): Promise<void>
    }

Loading

Class diagram for ModalWrapper component refactor

classDiagram
    class ModalWrapper {
        +string id
        +"sup" | "span" | "div" buttonType
        +string buttonClass
        +string buttonText
        +ReactNode children
        +boolean isOpen
        +boolean mounted
        +useEffect()
        +closeModal()
    }

Loading

Class diagram for ProductSearch component

classDiagram
    class ProductSearch {
        +ProductResult result
        +Sources sources
        +string barcode
        +boolean showFound
        +boolean showNotFound
        +boolean showInvalid
        +boolean showTimeout
        +boolean showTimeoutFinal
        +boolean loading
        +useEffect()
        +handleSubmit(barcode: string, event?: FormEvent)
    }
    class ProductResult {
        +string productname
        +boolean | "n/a" vegan
        +boolean | "n/a" vegetarian
        +boolean | "n/a" animaltestfree
        +boolean | "n/a" palmoil
        +string nutriscore
        +string grade
    }
    class Sources {
        +string api
        +string baseuri
    }

Loading

Class diagram for ViewportScanner component

classDiagram
    class ViewportScanner {
        +string facingMode
        +boolean isHidden
        +boolean isMirrored
        +initializeScanner(newFacingMode: string)
        +handleCameraSwitch()
        +handleClose()
    }

Loading

File-Level Changes

Change	Details	Files
Migration to Next.js App Router and improved internationalization	Replaced page-based routing with App Router directory structure Implemented new Next.js metadata API Enhanced internationalization setup with next-intl Added proper locale handling and middleware	src/app/[locale]/layout.tsx src/app/[locale]/page.tsx src/middleware.ts src/i18n/routing.ts src/i18n/request.ts
Component refactoring and code organization improvements	Split large components into smaller, more focused components Implemented proper TypeScript interfaces and types Added proper error boundaries and loading states Improved component reusability with better props typing	src/components/Check/index.tsx src/components/Check/ProductResult.tsx src/components/Check/SearchForm.tsx src/components/IngredientsCheck/IngredientsForm.tsx src/components/Scanner/ViewportScanner.tsx
Enhanced build and development setup	Added Jest configuration for unit testing Configured Playwright for end-to-end testing Updated ESLint configuration for stricter type checking Added Million.js for performance optimization	jest.config.ts playwright.config.ts .eslintrc.json next.config.ts
Improved share functionality and modal components	Refactored share button component with better type safety Improved modal wrapper with proper accessibility Added proper event handling for share actions Enhanced share options management with TypeScript	src/components/elements/share.tsx src/components/elements/modalwrapper.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.5% Duplication on New Code

See analysis details on SonarCloud

[sourcery-ai]

Hey @philipbrembeck - I've reviewed your changes and found some issues that need to be addressed.

Blocking issues:

• Potential hard-coded PayPal donation link found. (link)

Here's what I looked at during the review

• 🟡 General issues: 3 issues found
• 🔴 Security: 1 blocking issue, 1 other issue
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

suggestion: Add user-facing error handling for scanner initialization failures

Consider adding a proper error state and user feedback mechanism instead of just logging to console. This would improve the user experience when camera access fails or initialization errors occur.

          setError(`Scanner initialization failed: ${err.message}`);
          showErrorToast('Unable to start barcode scanner. Please check camera permissions.');

[sourcery-ai]

suggestion: Extract error handling logic into a separate function

Consider extracting the error handling logic into a separate function to reduce code duplication and improve maintainability.

    } catch (error) {
      handleFormError(error);

[sourcery-ai]

suggestion (bug_risk): Consider using stable versions of React and its type definitions instead of pre-release versions

Pre-release versions can introduce breaking changes and instability. Unless you specifically need features from React 19, consider using the latest stable version (React 18) and its corresponding type definitions.

  '@types/react': npm:types-react@18.2.48

[sourcery-ai]

🚨 suggestion (security): The uuid package version is significantly outdated

Version 3.4.0 is quite old - consider upgrading to the latest version (v9+) to get performance improvements and security updates.

Suggested change

	uuid: 3.4.0
	uuid: 9.0.1

[sourcery-ai]

🚨 issue (security): Potential hard-coded PayPal donation link found.

This line contains a hard-coded PayPal donation link. Ensure that this is intended and does not expose any sensitive information or credentials.

[sourcery-ai]

suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change

	if (!score || score === "n/a")
	return { score: "unknown icon-help", className: "" };
	if (!score || score === "n/a") {
	return { score: "unknown icon-help", className: "" };
	}

Explanation

It is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

[sourcery-ai]

suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change

	if (!input || typeof input !== "string") return [];
	if (!input || typeof input !== "string") {

Explanation

It is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

[sourcery-ai]

suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change

	if (isHidden) return null;
	if (isHidden) {

Explanation

It is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

[sourcery-ai]

suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change

	if (!isOpen) return;
	if (!isOpen) {

Explanation

It is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

[sourcery-ai]

suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change

	if (!mounted) return null;
	if (!mounted) {

Explanation

It is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).