Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(island-ui): Polyfill for PDF viewer #16249

Closed
wants to merge 11 commits into from

Conversation

thordurhhh
Copy link
Member

@thordurhhh thordurhhh commented Oct 2, 2024

What

Polyfill for pdf-viewer ✨
Remove types package, no longer needed. It depends on an older version of pdfjs-dist, which causes an error.
We need the new version to depend on legacy for browser support.

Why

Proper browser support.

Checklist:

  • I have performed a self-review of my own code
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • Formatting passes locally with my changes
  • I have rebased against main before asking for a review

Summary by CodeRabbit

  • New Features

    • Enhanced the PdfViewer component for improved clarity and efficiency.
    • Streamlined rendering logic for displaying PDF documents.
  • Bug Fixes

    • Adjusted error handling for the Document component.
  • Chores

    • Updated dependencies in package.json to ensure compatibility and resolve potential issues.
    • Modified jest.preset.js for better handling of specific modules during testing.
    • Introduced a new module declaration for PDF.js worker to facilitate TypeScript usage.

Copy link
Contributor

coderabbitai bot commented Oct 2, 2024

Walkthrough

The changes in this pull request primarily focus on the PdfViewer component, simplifying its implementation by modifying how the react-pdf library is utilized. The import method for react-pdf components has been updated, and the dynamic loading of the pdfjs worker has been replaced with a direct URL assignment. Additionally, the state management for pdfLib has been removed, streamlining the rendering logic and error handling. The package.json file has also been updated to reflect changes in dependencies and devDependencies.

Changes

File Path Change Summary
libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx - Updated import statements for react-pdf components.
- Replaced dynamic import of pdfjs with a direct URL.
- Removed pdfLib state management.
- Streamlined rendering logic and error handling.
package.json - Removed dependency @types/react-pdf.
- Updated @types/react-table from 7.0.24 to 7.7.0.
- Updated @nestjs/testing from 10.0.5 to 10.0.6.
- Modified resolutions section for compatibility patches.
libs/shared/types/src/lib/pdfjs-dist.d.ts - Introduced new module declaration for pdfjs-dist/legacy/build/pdf.worker.min.mjs.
- Exported workerSrc as a default string.
jest.preset.js - Added transformIgnorePatterns property.
- Updated moduleNameMapper for react-pdf.
- Defined collectCoverageFrom for coverage reports.

Possibly related PRs

  • chore: update PDF package #15760: This PR updates the PdfViewer component's worker source URL from .min.js to .min.mjs, which is directly related to the changes made in the main PR regarding the integration with the react-pdf library.
  • chore(documents-v2): Catch error and log warning #16207: This PR modifies the DocumentServiceV2 class to include error handling and default values, which may relate to the overall error handling improvements made in the PdfViewer component in the main PR.

Suggested labels

automerge

Suggested reviewers

  • disaerna
  • stjanilofts

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

codecov bot commented Oct 2, 2024

Codecov Report

Attention: Patch coverage is 0% with 16 lines in your changes missing coverage. Please review.

Project coverage is 36.92%. Comparing base (4706157) to head (24f48bc).
Report is 26 commits behind head on main.

Files with missing lines Patch % Lines
...ibs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx 0.00% 16 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main   #16249   +/-   ##
=======================================
  Coverage   36.92%   36.92%           
=======================================
  Files        6781     6781           
  Lines      140009   139996   -13     
  Branches    39810    39803    -7     
=======================================
- Hits        51703    51699    -4     
+ Misses      88306    88297    -9     
Flag Coverage Δ
air-discount-scheme-backend 54.22% <ø> (ø)
air-discount-scheme-web 0.00% <ø> (ø)
api 3.37% <ø> (ø)
api-catalogue-services 77.85% <ø> (ø)
api-domains-air-discount-scheme 36.95% <ø> (ø)
api-domains-assets 26.71% <ø> (ø)
api-domains-auth-admin 48.77% <ø> (ø)
api-domains-communications 39.92% <ø> (ø)
api-domains-criminal-record 47.93% <ø> (ø)
api-domains-driving-license 44.48% <ø> (ø)
api-domains-education 31.74% <ø> (ø)
api-domains-health-insurance 34.78% <ø> (ø)
api-domains-mortgage-certificate 35.71% <ø> (ø)
api-domains-payment-schedule 41.22% <ø> (ø)
application-api-files 57.91% <ø> (ø)
application-core 71.62% <ø> (+0.32%) ⬆️
application-system-api 41.63% <ø> (-0.01%) ⬇️
application-template-api-modules 24.40% <ø> (ø)
application-templates-accident-notification 29.44% <ø> (ø)
application-templates-driving-license 18.63% <ø> (-0.08%) ⬇️
application-templates-example-payment 25.41% <ø> (ø)
application-templates-financial-aid 14.34% <ø> (ø)
application-templates-general-petition 23.68% <ø> (ø)
application-templates-health-insurance 26.62% <ø> (ø)
application-templates-inheritance-report 6.45% <ø> (ø)
application-templates-marriage-conditions 15.23% <ø> (ø)
application-templates-mortgage-certificate 43.96% <ø> (ø)
application-templates-parental-leave 30.22% <ø> (+0.07%) ⬆️
application-types 6.71% <ø> (ø)
application-ui-components 1.28% <ø> (ø)
auth-admin-web 2.43% <ø> (ø)
auth-shared 75.00% <ø> (ø)
clients-charge-fjs-v2 24.11% <ø> (ø)
clients-driving-license 40.73% <ø> (ø)
clients-driving-license-book 43.90% <ø> (ø)
clients-financial-statements-inao 49.25% <ø> (ø)
clients-license-client 1.83% <ø> (ø)
clients-middlewares 73.36% <ø> (+0.59%) ⬆️
clients-regulations 42.71% <ø> (ø)
clients-rsk-company-registry 29.76% <ø> (ø)
clients-rsk-personal-tax-return 38.00% <ø> (ø)
clients-smartsolutions 12.77% <ø> (ø)
clients-syslumenn 49.64% <ø> (ø)
clients-zendesk 54.61% <ø> (ø)
cms 0.43% <ø> (ø)
cms-translations 39.04% <ø> (ø)
content-search-index-manager 95.65% <ø> (ø)
content-search-toolkit 8.16% <ø> (ø)
contentful-apps 5.57% <ø> (ø)
dokobit-signing 63.20% <ø> (ø)
download-service 44.09% <ø> (ø)
email-service 60.97% <ø> (ø)
feature-flags 90.97% <ø> (ø)
file-storage 53.48% <ø> (ø)
financial-aid-backend 56.53% <ø> (ø)
financial-aid-shared 19.03% <ø> (ø)
icelandic-names-registry-backend 54.55% <ø> (ø)
infra-nest-server 48.75% <ø> (ø)
infra-tracing 43.24% <ø> (ø)
island-ui-core 28.49% <0.00%> (+0.01%) ⬆️
judicial-system-api 18.30% <ø> (ø)
judicial-system-audit-trail 69.10% <ø> (ø)
judicial-system-formatters 79.76% <ø> (ø)
judicial-system-scheduler 69.17% <ø> (ø)
license-api 42.62% <ø> (ø)
localization 10.15% <ø> (ø)
logging 48.43% <ø> (ø)
message-queue 67.71% <ø> (ø)
nest-audit 68.20% <ø> (ø)
nest-config 78.32% <ø> (ø)
nest-feature-flags 51.30% <ø> (-0.66%) ⬇️
nest-problem 46.34% <ø> (ø)
nest-sequelize 94.44% <ø> (ø)
nest-swagger 51.71% <ø> (ø)
nova-sms 62.56% <ø> (ø)
reference-backend 50.41% <ø> (ø)
regulations 16.78% <ø> (ø)
residence-history 85.00% <ø> (ø)
services-auth-admin-api 51.98% <ø> (ø)
services-auth-delegation-api 57.87% <ø> (-0.07%) ⬇️
services-auth-ids-api 51.87% <ø> (-0.01%) ⬇️
services-auth-personal-representative 45.55% <ø> (+0.02%) ⬆️
services-auth-personal-representative-public 41.64% <ø> (+0.05%) ⬆️
services-auth-public-api 49.37% <ø> (ø)
services-documents 61.17% <ø> (ø)
services-endorsements-api 55.22% <ø> (ø)
services-sessions 65.74% <ø> (-0.05%) ⬇️
services-university-gateway 48.41% <ø> (-0.12%) ⬇️
services-user-notification 47.07% <ø> (ø)
services-user-profile 62.36% <ø> (+0.07%) ⬆️
shared-problem 87.50% <ø> (ø)
shared-utils 28.01% <ø> (ø)
skilavottord-ws 24.24% <ø> (ø)
web 1.83% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines Coverage Δ
...ibs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx 6.45% <0.00%> (+0.56%) ⬆️

... and 11 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4706157...24f48bc. Read the comment docs.

@datadog-island-is
Copy link

datadog-island-is bot commented Oct 2, 2024

Datadog Report

All test runs 954ce04 🔗

101 Total Test Services: 0 Failed, 97 Passed
🔻 Test Sessions change in coverage: 6 decreased, 4 increased, 189 no change

Test Services
This report shows up to 10 services
Service Name Failed Known Flaky New Flaky Passed Skipped Total Time Code Coverage Change Test Service View
air-discount-scheme-backend 0 0 0 81 0 31.44s N/A Link
air-discount-scheme-web 0 0 0 2 0 8.65s N/A Link
api 0 0 0 4 0 2.93s N/A Link
api-catalogue-services 0 0 0 23 0 12.57s N/A Link
api-domains-air-discount-scheme 0 0 0 6 0 19.6s N/A Link
api-domains-assets 0 0 0 3 0 13.55s N/A Link
api-domains-auth-admin 0 0 0 18 0 18.79s N/A Link
api-domains-communications 0 0 0 5 0 34.59s N/A Link
api-domains-criminal-record 0 0 0 5 0 9.95s N/A Link
api-domains-driving-license 0 0 0 23 0 35.14s N/A Link

🔻 Code Coverage Decreases vs Default Branch (6)

This report shows up to 5 code coverage decreases.

  • shared-form-fields - jest 0% (-39.93%) - Details
  • shared-components - jest 0% (-34.82%) - Details
  • judicial-system-web - jest 7.97% (-24.38%) - Details
  • portals-core - jest 10.72% (-14.01%) - Details
  • nest-feature-flags - jest 57.38% (-0.48%) - Details

@thordurhhh thordurhhh added the deploy-feature Deploys features to dev label Oct 2, 2024
Copy link
Contributor

github-actions bot commented Oct 2, 2024

Affected services are: air-discount-scheme-api,air-discount-scheme-backend,api,application-system-api,download-service,financial-aid-api,financial-aid-backend,financial-aid-open-api,github-actions-cache,icelandic-names-registry-backend,judicial-system-api,judicial-system-digital-mailbox-api,judicial-system-backend,judicial-system-message-handler,judicial-system-robot-api,judicial-system-scheduler,judicial-system-xrd-api,license-api,reference-backend,regulations-admin-backend,services-auth-admin-api,services-auth-ids-api,services-auth-delegation-api,services-auth-personal-representative,services-auth-personal-representative-public,services-auth-public-api,services-contentful-entry-tagger,services-documents,services-endorsements-api,services-form-system,services-search-indexer,services-sessions,services-university-gateway,services-user-notification,services-user-profile,services-xroad-collector,skilavottord-ws,air-discount-scheme-web,auth-admin-web,consultation-portal,contentful-apps,financial-aid-web-osk,financial-aid-web-veita,judicial-system-web,skilavottord-web,web,application-system-form,island-ui-storybook,portals-admin,service-portal,system-e2e,external-contracts-tests,
Feature deployment of your services will begin shortly. Your feature will be accessible here:
https://service-portalpdf-viewer-polyfill-api-catalogue.dev01.devland.is/api
https://service-portalpdf-viewer-polyfill-api.dev01.devland.is/download
https://service-portalpdf-viewer-polyfill-application-callback-xrd.internal.dev01.devland.is/application-payment
https://service-portalpdf-viewer-polyfill-application-callback-xrd.internal.dev01.devland.is/applications
https://service-portalpdf-viewer-polyfill-application-payment-callback-xrd.internal.dev01.devland.is/application-payment
https://service-portalpdf-viewer-polyfill-application-payment-callback-xrd.internal.dev01.devland.is/applications
https://service-portalpdf-viewer-polyfill-beta.dev01.devland.is/
https://service-portalpdf-viewer-polyfill-beta.dev01.devland.is/api
https://service-portalpdf-viewer-polyfill-beta.dev01.devland.is/app/skilavottord/
https://service-portalpdf-viewer-polyfill-beta.dev01.devland.is/app/skilavottord/api/graphql
https://service-portalpdf-viewer-polyfill-beta.dev01.devland.is/minarsidur
https://service-portalpdf-viewer-polyfill-beta.dev01.devland.is/samradsgatt
https://service-portalpdf-viewer-polyfill-beta.dev01.devland.is/stjornbord
https://service-portalpdf-viewer-polyfill-beta.dev01.devland.is/umsoknir
https://service-portalpdf-viewer-polyfill-license-api-xrd.internal.dev01.devland.is/
https://service-portalpdf-viewer-polyfill-loftbru-cf.dev01.devland.is/
https://service-portalpdf-viewer-polyfill-loftbru-cf.dev01.devland.is/api/graphql
https://service-portalpdf-viewer-polyfill-loftbru-cf.dev01.devland.is/api/public
https://service-portalpdf-viewer-polyfill-loftbru-cf.dev01.devland.is/api/swagger
https://service-portalpdf-viewer-polyfill-loftbru.dev01.devland.is/
https://service-portalpdf-viewer-polyfill-loftbru.dev01.devland.is/api/graphql
https://service-portalpdf-viewer-polyfill-loftbru.dev01.devland.is/api/public
https://service-portalpdf-viewer-polyfill-loftbru.dev01.devland.is/api/swagger
https://service-portalpdf-viewer-polyfill-service-portal-api.internal.dev01.devland.is/
https://service-portalpdf-viewer-polyfill-services-university-gateway.internal.dev01.devland.is/api
https://service-portalpdf-viewer-polyfill-sessions-api.internal.dev01.devland.is/
https://service-portalpdf-viewer-polyfill-ui.dev01.devland.is/

Deployed services: application-system-api,application-system-form,service-portal,service-portal-api,portals-admin,consultation-portal,api,web,xroad-collector,skilavottord-web,skilavottord-ws,services-documents,island-ui-storybook,download-service,icelandic-names-registry-backend,endorsement-system-api,air-discount-scheme-web,air-discount-scheme-backend,air-discount-scheme-api,regulations-admin-backend,external-contracts-tests,application-system-api-worker,license-api,services-sessions,services-sessions-worker,services-sessions-cleanup,services-university-gateway,services-university-gateway-worker.
Excluded services: search-indexer-service,github-actions-cache,user-notification,user-notification-worker,user-notification-cleanup-worker,contentful-entry-tagger-service,contentful-apps

@thordurhhh thordurhhh marked this pull request as ready for review October 3, 2024 14:44
@thordurhhh thordurhhh requested review from a team as code owners October 3, 2024 14:44
@thordurhhh thordurhhh requested a review from Tryggvig October 3, 2024 14:44
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Outside diff range and nitpick comments (2)
libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (2)

Line range hint 24-30: Remove unused IPdfLib interface to improve maintainability

The IPdfLib interface is no longer needed since the dynamic import of react-pdf has been removed. Eliminating unused code enhances maintainability and supports effective tree-shaking.

Apply this diff to remove the unused interface:

-interface IPdfLib {
-  default: any
-  pdfjs: typeof pdfjs
-  Document: typeof Document
-  Page: typeof Page
-  Outline: typeof Outline
-}

71-71: Simplify loading prop by passing loadingView directly

Instead of wrapping loadingView in an anonymous function, you can pass it directly to the loading prop for clarity.

Apply this diff to simplify the code:

-        loading={() => loadingView()}
+        loading={loadingView}
📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 4706157 and aa94653.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (2)
  • libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (3 hunks)
  • package.json (0 hunks)
💤 Files with no reviewable changes (1)
  • package.json
🧰 Additional context used
📓 Path-based instructions (1)
libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (1)

Pattern libs/**/*: "Confirm that the code adheres to the following:

  • Reusability of components and hooks across different NextJS apps.
  • TypeScript usage for defining props and exporting types.
  • Effective tree-shaking and bundling practices."
🔇 Additional comments (1)
libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (1)

65-118: Code changes improve clarity and remove unnecessary complexity

The refactored component simplifies the rendering logic by eliminating the dynamic import and state management for pdfLib. Directly using Document and Page components enhances readability and efficiency. The error handling and pagination logic are correctly maintained.

libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

🧹 Outside diff range and nitpick comments (1)
libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (1)

Line range hint 1-118: Improved overall component structure and TypeScript usage

The changes in this file have significantly improved the PdfViewer component:

  1. Consistent use of TypeScript for defining props and types aligns with our coding guidelines.
  2. The simplified structure enhances reusability and maintainability.
  3. The changes successfully address the PR objective of introducing a polyfill for the PDF viewer functionality.

These modifications contribute to better reusability across different NextJS apps and adhere to our TypeScript usage guidelines.

However, I suggest a minor improvement in TypeScript usage:

Consider using more specific types for the error state:

-  const [pdfLibError, setPdfLibError] = useState<any>()
+  const [pdfLibError, setPdfLibError] = useState<Error | null>(null)

This change provides more type safety and makes the error handling more explicit.

Overall, great job on improving this component!

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between aa94653 and f5e045d.

📒 Files selected for processing (1)
  • libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (3 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (1)

Pattern libs/**/*: "Confirm that the code adheres to the following:

  • Reusability of components and hooks across different NextJS apps.
  • TypeScript usage for defining props and exporting types.
  • Effective tree-shaking and bundling practices."
🔇 Additional comments (1)
libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (1)

Line range hint 1-16: Improved imports and PDF.js worker setup

The changes in this section enhance the code in several ways:

  1. Removal of unused useEffect import improves tree-shaking.
  2. Direct imports from 'react-pdf' simplify the code and improve readability.
  3. Static setup of the PDF.js worker source eliminates the need for dynamic import, potentially improving initial load time.

These modifications align well with our coding guidelines for effective tree-shaking and bundling practices.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (4)
jest.preset.js (1)

Line range hint 28-36: Consider updating Jest snapshot format

There's a TODO comment about updating to the latest Jest snapshot format. While not directly related to the current PR objectives, addressing this could improve the overall testing setup.

Consider updating the Jest snapshot format by removing the snapshotFormat property and running tests with the --update-snapshot flag. This will ensure you're using the latest Jest features and formats.

libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (3)

65-75: LGTM with a suggestion: Improved Document component rendering

The direct rendering of the Document component and streamlined error handling are good improvements. They enhance readability and maintainability, aligning with our guidelines for reusable components.

Consider implementing the suggestion from the previous review for consistent error handling:

-        error={errorComponent ?? pdfError}
+        error={<ErrorComponent message={pdfError} />}

This would allow for consistent error styling and easier maintenance of error messages.


76-93: LGTM with a suggestion: Simplified page rendering logic

The simplified conditional rendering for showing all pages or a single page is a good improvement. It enhances readability and maintainability, contributing to the component's reusability across different NextJS apps.

Consider implementing the suggestion from the previous review for a minor optimization:

-          [...Array(numPages)].map((x, page) => (
+          Array.from({ length: numPages }, (_, page) => (

This change is more idiomatic and slightly more efficient, especially for larger documents.


96-118: LGTM with a suggestion: Improved pagination structure

Moving the pagination outside the Document component and adding className logic for hiding pagination when not needed are excellent improvements. They enhance the component's structure and flexibility, aligning well with our guidelines for reusable and effective component design.

Consider implementing the suggestion from the previous review to optimize performance:

+  const handlePageChange = React.useCallback((page: number) => {
+    setPageNumber(page);
+  }, []);

   // ... in the Pagination component
-              onClick={() => setPageNumber(page)}
+              onClick={() => handlePageChange(page)}

This memoization can help prevent unnecessary re-renders, especially for larger documents with many pages.

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between cc1f34d and 6781dda.

📒 Files selected for processing (2)
  • jest.preset.js (1 hunks)
  • libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (3 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (1)

Pattern libs/**/*: "Confirm that the code adheres to the following:

  • Reusability of components and hooks across different NextJS apps.
  • TypeScript usage for defining props and exporting types.
  • Effective tree-shaking and bundling practices."
🔇 Additional comments (3)
jest.preset.js (1)

27-27: LGTM. Verify polyfill implementation.

The addition of transformIgnorePatterns to allow transformation of the 'pdfjs-dist' module aligns with the PR objective of introducing a polyfill for the PDF viewer. This change should enable proper handling of the PDF.js library during Jest tests.

To ensure the polyfill is working as expected, please verify:

  1. The PDF viewer functionality in the relevant components.
  2. Any tests related to PDF viewing pass successfully.

You can use the following script to check for PDF-related tests:

✅ Verification successful

LGTM. Verified the transformation of PDF-related modules and associated tests.

The addition of transformIgnorePatterns to include the 'pdfjs-dist' module ensures that Jest properly handles PDF functionalities. The extensive presence of PDF-related tests confirms that the polyfill implementation is comprehensive and aligns with the PR objectives.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Find and list PDF-related test files

echo "PDF-related test files:"
fd -e test.ts -e test.tsx -e spec.ts -e spec.tsx | rg -i "pdf"

echo "\nPDF-related code in test files:"
rg -i "pdf" -t ts -t tsx -g "*test*" -g "*spec*"

Length of output: 4712


Script:

#!/bin/bash
# Description: Find and list PDF-related test files excluding unsupported file types

echo "PDF-related test files:"
fd -e test.ts -e spec.ts | rg -i "pdf"

echo "\nPDF-related code in test files:"
rg -i "pdf" -t ts -g "*test*" -g "*spec*"

Length of output: 88651

libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (2)

1-3: LGTM: Improved imports for better tree-shaking

The direct import of react-pdf components (Document, Page, Outline, pdfjs) is a good practice. It enhances code clarity and potentially improves tree-shaking, aligning with our guidelines for effective bundling practices.


12-16: LGTM: Improved pdfjs worker configuration

Moving the pdfjs worker configuration to the top level is a good practice. It ensures the worker is set up once, potentially improving performance. The use of import.meta.url is a modern approach that works well with module bundlers.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)
libs/shared/types/src/lib/pdfjs-dist.d.ts (1)

1-5: Consider adding documentation for library consumers.

While the implementation is correct, it would be beneficial to add some documentation or examples for library consumers. This aligns with the coding guidelines for shared libraries, which emphasize the importance of documentation for reusable components.

You could add a comment block above the module declaration explaining its purpose and providing a brief example of how to use it. For instance:

/**
 * Declaration for the PDF.js worker module.
 * This module provides the worker source URL for PDF.js.
 *
 * Example usage:
 * import workerSrc from 'pdfjs-dist/legacy/build/pdf.worker.min.mjs';
 * 
 * // Use workerSrc when initializing PDF.js
 * pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
 */
declare module 'pdfjs-dist/legacy/build/pdf.worker.min.mjs' {
  // ... (existing code)
}
📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 6781dda and 24f48bc.

📒 Files selected for processing (2)
  • libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx (3 hunks)
  • libs/shared/types/src/lib/pdfjs-dist.d.ts (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • libs/island-ui/core/src/lib/PdfViewer/PdfViewer.tsx
🧰 Additional context used
📓 Path-based instructions (1)
libs/shared/types/src/lib/pdfjs-dist.d.ts (2)

Pattern libs/shared/**/*: "Confirm that the code adheres to the following:

  • Cross-application utility functions, types, and constants.
  • TypeScript best practices to ensure type safety and reusability.
  • Documentation and examples for library consumers."

Pattern libs/**/*: "Confirm that the code adheres to the following:

  • Reusability of components and hooks across different NextJS apps.
  • TypeScript usage for defining props and exporting types.
  • Effective tree-shaking and bundling practices."
🔇 Additional comments (1)
libs/shared/types/src/lib/pdfjs-dist.d.ts (1)

1-5: LGTM! The module declaration is correctly implemented.

The module declaration for 'pdfjs-dist/legacy/build/pdf.worker.min.mjs' is correctly implemented. It properly exports the workerSrc constant as a string, which aligns with the PR objectives of introducing a polyfill for the PDF viewer and ensuring legacy support.

@thordurhhh thordurhhh closed this Oct 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
deploy-feature Deploys features to dev
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant