Update Vite example configuration and add new components

- Modified Playwright configuration to change the server command and URL for end-to-end testing.
- Added a new `start:e2e` script in the Angular package.json for running the application on port 3000.
- Introduced a new Vite example with a complete setup including package.json, README.md, and Vite configuration.
- Created a PDF viewer component using PSPDFKit integrated with React.
- Added CSS styles for the application layout and components.
- Included sample PDF documents and SVG assets for demonstration.
- Updated load tests to reflect the new server URL for testing the viewer functionality.

Author: ritz078

examples/angular/package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "start:e2e": "ng serve --port 3000"
   },
   "private": true,
   "dependencies": {

examples/vite/.gitignore

@@ -0,0 +1,25 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+public/pspdfkit-lib

examples/vite/LICENSE

@@ -0,0 +1,42 @@
+The PSPDFKit Sample applications are licensed with a modified BSD
+license. In plain language: you're allowed to do whatever you wish
+with the code, modify, redistribute, embed in your products (free or
+commercial), but you must include copyright, terms of usage and
+disclaimer as stated in the license.
+
+You will require a commercial PSPDFKit License to run these examples
+in non-demo mode. Please refer to [email protected] for details.
+
+Copyright © 2017-present PSPDFKit GmbH.
+All rights reserved.
+
+Redistribution and use in source or binary forms,
+with or without modification, are permitted provided
+that the following conditions are met:
+
+- Redistributions of source code must retain the above copyright
+  notice, this list of conditions and the following disclaimer.
+
+- Redistributions in binary form must reproduce the above copyright
+  notice, this list of conditions and the following disclaimer in the
+  documentation and/or other materials provided with the
+  distribution.
+
+- Redistributions of PSPDFKit Samples must include attribution to
+  PSPDFKit, either in documentation or other appropriate media.
+
+- Neither the name of the PSPDFKit, PSPDFKit GmbH, nor its developers
+  may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

examples/vite/README.md

@@ -0,0 +1,64 @@
+# Nutrient Web SDK Example – Vite.js
+
+This example shows how to integrate [PSPDFKit for Web](https://www.nutrient.io/web/) into a [Vite.js](https://vitejs.dev/) with React app.
+
+## Prerequisites
+
+- [Node.js](http://nodejs.org/)
+
+## Support, Issues and License Questions
+
+PSPDFKit offers support for customers with an active SDK license via https://www.nutrient.io/support/request/
+
+Are you [evaluating our SDK](https://www.nutrient.io/try/)? That's great, we're happy to help out! To make sure this is fast, please use a work email and have someone from your company fill out our sales form: https://www.nutrient.io/sales/
+
+## Getting Started
+
+Clone the repo:
+
+```bash
+git clone https://github.com/PSPDFKit/pspdfkit-web-example-vite.git
+cd pspdfkit-web-example-vite
+```
+
+Install the project dependencies:
+
+```shell script
+npm install
+```
+
+## Running the Example
+
+We are ready to launch the app! 🎉
+
+```shell script
+npm run dev
+```
+
+You can now open http://localhost:5173 in your browser and enjoy!
+
+To create a production build of the app and serve it:
+
+```shell script
+npm run build
+npm run preview
+```
+
+You can now preview your build http://localhost:4173 in your browser.
+
+Enjoy 🍕
+
+## React Component
+
+The React component which implements the PSPDFKit for Web integration can be found at `src/components/PdfViewerComponent.jsx`.
+
+In order to make the PSPDFKit SDK assets available they have to be copied from the `node_modules/pspdfkit/dist` folder to `public/pspdfkit-lib` folder. For that purpose this example uses a copy plugin which you can find at `vite.config.js`.
+
+## License
+
+This software is licensed under a [modified BSD license](LICENSE).
+
+## Contributing
+
+Please ensure
+[you have signed our CLA](https://www.nutrient.io/guides/web/current/miscellaneous/contributing/) so that we can accept your contributions.

examples/vite/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nutrient Web SDK Example – Vite.js</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>