Merge pull request #80 from zextras/devel-to-release-20240628

Devel to release 20240628

.eslintrc.cjs

@@ -17,7 +17,9 @@ module.exports = {
 		],
 		'jsx-a11y/click-events-have-key-events': 'warn',
 		'jsx-a11y/no-static-element-interactions': 'warn',
-		'tsdoc/syntax': 'warn'
+		'tsdoc/syntax': 'warn',
+		"react/jsx-uses-react": "off",
+		"react/react-in-jsx-scope": "off"
 	},
 	ignorePatterns: ['notice.template.ts'],
 	parserOptions: {

.nvmrc

@@ -1 +1 @@
-v18
+v20

Jenkinsfile

@@ -402,13 +402,6 @@ pipeline {
                     label "nodejs-agent-v4"
                 }
             }
-            when {
-                beforeAgent(true)
-                allOf {
-                    expression { isReleaseBranch == false }
-                    expression { isMergeCommit == false }
-                }
-            }
             steps {
                 script {
                     unstash(name: '.npmrc')
@@ -423,89 +416,22 @@ pipeline {
         }
 
         // ============================================ Release Automation ==============================================
-        stage("Bump Version") {
-            agent {
-                node {
-                    label "nodejs-agent-v4"
-                }
-            }
+        stage('Release') {
             when {
-                beforeAgent(true)
-                expression { isBumpBuild == true }
-            }
-            steps {
-                gitSetup()
-                script {
-                    def commitVersion = getCommitVersion();
-                    if (commitVersion) {
-                        echo "Force bump to version ${commitVersion}"
-                        npxCmd(
-                            script: "standard-version --no-verify --release-as ${commitVersion}"
-                        )
-                    } else {
-                        npxCmd(
-                            script: "standard-version --no-verify"
-                        )
-                    }
-                    pkgVersionFull = getPackageVersion()
-                    echo("Package version: ${pkgVersionFull}")
-                    gitPush(
-                        branch: "${BRANCH_NAME}",
-                        followTags: true
-                    )
-                    def versionBumperBranch = "version-bumper/v${pkgVersionFull}"
-                    gitPush(
-                        branch: "refs/heads/${versionBumperBranch}"
-                    )
-
-                    stash(
-                        includes: 'CHANGELOG.md',
-                        name: 'release_updated_files_changelogmd'
-                    )
-                    stash(
-                        includes: 'package.json',
-                        name: 'release_updated_files_packagejson'
-                    )
-                    stash(
-                        includes: 'package-lock.json',
-                        name: 'release_updated_files_packagelockjson'
-                    )
-                }
-            }
-        }
-
-        stage("Release in NPM") {
-            agent {
-                node {
-                    label "nodejs-agent-v4"
-                }
-            }
-            when {
-                beforeAgent(true)
+                beforeAgent true
                 allOf {
-                    expression { isReleaseBranch == true }
-                    expression { isBumpBuild == false }
+                    expression { isPullRequest == false }
                 }
             }
             steps {
                 script {
-                    def commitId = getCommitId()
-                    checkout(scm: [
-                        $class: "GitSCM",
-                        branches: [[
-                            name: commitId
-                        ]],
-                        userRemoteConfigs: scm.userRemoteConfigs
-                    ])
-                    unstash(name: ".npmrc")
-                    catchError(buildResult: "UNSTABLE", stageResult: "FAILURE") {
-                        nodeCmd(
-                            install: true,
-                            script: "npm publish",
-                            varEnv: [
-                                NODE_ENV: 'production'
-                            ]
-                        )
+                    withCredentials([usernamePassword(credentialsId: 'npm-zextras-bot-auth-token', usernameVariable: 'AUTH_USERNAME', passwordVariable: 'NPM_TOKEN')]) {
+                        withCredentials([usernamePassword(credentialsId: 'tarsier-bot-pr-token-github', usernameVariable: 'GH_USERNAME', passwordVariable: 'GH_TOKEN')]) {
+                            npxCmd(
+                                script: "semantic-release",
+                                install: true
+                            )
+                        }
                     }
                 }
             }

README.md

@@ -43,11 +43,11 @@ import { PreviewManager } from "@zextras/carbonio-ui-preview";
 Init the preview from within your app
 
 ```tsx
-import { PreviewsManagerContext } from "@zextras/carbonio-ui-preview";
+import { usePreview } from "@zextras/carbonio-ui-preview";
 
 // ...
 
-const { initPreview } = useContext(PreviewsManagerContext);
+const { initPreview } = usePreview();
 
 initPreview([
   {
@@ -67,18 +67,20 @@ initPreview([
 And open the preview of an initialized item through its id
 
 ```tsx
-import { PreviewsManagerContext } from "@zextras/carbonio-ui-preview";
+import { usePreview } from "@zextras/carbonio-ui-preview";
 
 // ...
 
-const { openPreview } = useContext(PreviewsManagerContext);
+const { openPreview } = usePreview();
 
 openPreview(id);
 ```
 
 See the [example app](examples/app) for a simple working example.
 
-See the [API Documentation](docs/carbonio-ui-preview.md) to see the full list of the props available.
+See the [API Documentation](docs/api/carbonio-ui-preview.md) to see the full list of the props available.
+
+See [Migration](docs/migration.md) for hints about the migration to a major version.
 
 ### How to build
 

babel.config.jest.cjs

@@ -11,7 +11,12 @@ module.exports = {
 				modules: 'commonjs'
 			}
 		],
-		'@babel/preset-react',
+		[
+			'@babel/preset-react',
+			{
+				runtime: 'automatic'
+			}
+		],
 		'@babel/preset-typescript'
 	]
 };

docs/carbonio-ui-preview.imagepreview.md → docs/api/carbonio-ui-preview.imagepreview.md

@@ -9,5 +9,5 @@ Main component for rendering the preview of an image
 **Signature:**
 
 ```typescript
-ImagePreview: React.ForwardRefExoticComponent<ImagePreviewProps & React.RefAttributes<HTMLDivElement>>
+ImagePreview: import("react").ForwardRefExoticComponent<ImagePreviewProps & import("react").RefAttributes<HTMLDivElement>>
 ```

docs/carbonio-ui-preview.md → docs/api/carbonio-ui-preview.md

@@ -6,6 +6,32 @@
 
 A library to open previews of images and pdf.
 
+## Functions
+
+<table><thead><tr><th>
+
+Function
+
+
+</th><th>
+
+Description
+
+
+</th></tr></thead>
+<tbody><tr><td>
+
+[usePreview()](./carbonio-ui-preview.usepreview.md)
+
+
+</td><td>
+
+Util hook to quick access to the preview functions
+
+
+</td></tr>
+</tbody></table>
+
 ## Interfaces
 
 <table><thead><tr><th>

docs/api/carbonio-ui-preview.usepreview.md

@@ -0,0 +1,17 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@zextras/carbonio-ui-preview](./carbonio-ui-preview.md) &gt; [usePreview](./carbonio-ui-preview.usepreview.md)
+
+## usePreview() function
+
+Util hook to quick access to the preview functions
+
+**Signature:**
+
+```typescript
+usePreview: () => PreviewManagerContextType
+```
+**Returns:**
+
+[PreviewManagerContextType](./carbonio-ui-preview.previewmanagercontexttype.md)
+

docs/migration.md

@@ -0,0 +1,92 @@
+# Migration guide
+
+## From 1 to 2
+
+With version 2 the react-pdf dependency is upgraded from v7 to v9.
+This version includes pdfjs as esm module.
+
+In order to upgrade from @zextras/carbonio-ui-preview v1 to v2 the following changes might be required.
+
+If you face some errors while upgrading, check also the migration guide from react-pdf:
+- https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-7.x-to-8.x
+- https://github.com/wojtekmaj/react-pdf/wiki/Upgrade-guide-from-version-8.x-to-9.x
+
+### Webpack
+
+If you use webpack to bundle your application, you will need to add an alias for the new React JSX transform
+inside webpack configurations.
+
+```ts
+// webpack.config.ts
+import webpack from 'webpack';
+const config: webpack.Configuration = {
+  // other configs
+  resolve: {
+    alias: {
+      'react/jsx-runtime': 'react/jsx-runtime.js'
+    }
+  }
+};
+
+export default config;
+```
+
+### Jest
+
+#### Configure jest to transpile also esm modules
+
+@zextras/carbonio-ui-preview and pdfjs-dist are full esm modules.
+This means that you need to configure jest to correctly interpret them.
+You can do it either enabling jest [esm experimental support](https://jestjs.io/docs/ecmascript-modules),
+or using the [transformIgnorePatterns configuration](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring).
+
+Since @zextras/carbonio-ui-preview now uses the module version of pdfjs worker, you will also need to add the mjs extension
+to the [transform configuration](https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object).
+
+Your jest config should look like this:
+
+```ts
+// jest.config.ts
+import type {Config} from 'jest';
+
+const config: Config = {
+  transform: {
+    '^.+\\.[t|j]sx?$': ['babel-jest', { configFile: 'your custom config file - optional' }],
+    '\\.mjs?$': ['babel-jest', { configFile: 'your custom config file - optional' }],
+    // other transformers
+  },
+  transformIgnorePatterns: [
+    // ignore all node_modules except the one in the array
+    `/node_modules/(?!(${['@zextras/carbonio-ui-preview', 'pdfjs-dist'].join('|')}))`,
+    '\\.pnp\\.[^\\/]+$'
+  ]
+};
+
+export default config;
+```
+
+#### Add the required polyfills in node versions < 22
+
+If you run node in version previous to 22, you will need to polyfill some functions.
+
+You can simply import the required polyfills in the setup file.
+
+```ts
+// jest.config.ts
+import type {Config} from 'jest';
+
+const config: Config = {
+  // ...
+  setupFilesAfterEnv: ['jest-env-setup.ts'],
+  // ...
+};
+
+export default config;
+```
+
+```ts
+// jest-env-setup.ts
+
+import 'core-js/proposals/promise-with-resolvers';
+// other imports
+```

etc/carbonio-ui-preview.api.md

@@ -4,7 +4,9 @@
 
 ```ts
 
-import { default as React_2 } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import * as React_2 from 'react';
+import { RefAttributes } from 'react';
 import { Theme } from '@zextras/carbonio-design-system';
 import { TooltipProps } from '@zextras/carbonio-design-system';
 
@@ -29,7 +31,7 @@ interface HeaderProps {
 }
 
 // @public
-export const ImagePreview: React_2.ForwardRefExoticComponent<ImagePreviewProps & React_2.RefAttributes<HTMLDivElement>>;
+export const ImagePreview: ForwardRefExoticComponent<ImagePreviewProps & RefAttributes<HTMLDivElement>>;
 
 // Warning: (ae-forgotten-export) The symbol "PreviewNavigatorProps" needs to be exported by the entry point index.d.ts
 //
@@ -130,4 +132,7 @@ export type PreviewWrapperProps = (ImagePreviewProps & {
     previewType: 'pdf';
 });
 
+// @public
+export const usePreview: () => PreviewManagerContextType;
+
 ```