Merge branch 'develop' into feat/361-link-collection-and-link-dataset

Author: g-saracca

CHANGELOG.md

@@ -9,6 +9,8 @@ This changelog follows the principles of [Keep a Changelog](https://keepachangel
 ### Added
 
 - Added the value entered by the user in the error messages for metadata field validation errors in EMAIL and URL type fields. For example, instead of showing “Point of Contact E-mail is not a valid email address.“, we now show “Point of Contact E-mail foo is not a valid email address.”
+- Contact Owner button in File Page.
+- Share button in File Page.
 - Link Collection and Link Dataset features.
 
 ### Changed

DEVELOPER_GUIDE.md

@@ -944,15 +944,14 @@ However, we prioritize user-centric testing over coverage numbers.
 - **Coverage Threshold:** We aim for a test coverage of 95% for the unit tests. This threshold is set in the `.nycrc.json` file.
 - **Coverage Reports:** We use [nyc](https://www.npmjs.com/package/nyc) to generate coverage reports, which are available
   in the `coverage` folder after running the tests. These reports are also published to [Coveralls](https://coveralls.io/github/IQSS/dataverse-frontend?branch=develop)
-  with every pull request and merge. The coverage badge is displayed at the top of the README.
+  with every pull request and merge. The coverage badge is displayed at the top of the README. See "include" and "exclude" in `.nycrc.json` to learn about which source files are included in coverage reports.
 - **Tests included in the coverage:** We include all unit tests in the coverage report.
 
 #### How to run the code coverage
 
-To generate the code coverage, you first need to run the tests with the `test:unit` script. After running the tests, you
-can check the coverage with the `test:coverage` script.
+To generate the code coverage, you first need to run the tests with the `test:unit` script. This can take a while! After running the tests, you can check the coverage with the `test:coverage` script. This will simply report the total coverage.
 
-If you want to see the coverage report in the browser, you can open the `coverage/lcov-report/index.html` file in the browser.
+To see which lines are not covered, you can open the coverage report in the browser: `coverage/lcov-report/index.html`.
 
 ```bash
 # root project directory
@@ -964,8 +963,12 @@ npm run test:unit
 # Check the coverage
 
 npm run test:coverage
+
+# See detailed report at coverage/lcov-report/index.html
 ```
 
+Note that it's easy for the `lcov-report` report to get overwritten. For example, running any test with `npm run cy:open-unit` will overwrite it. For this reason you might want to copy the `lcov-report` directory elsewhere for safe keeping. That’s mainly useful for debugging previous coverage results and improving them.
+
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 <br>
 
@@ -1048,84 +1051,6 @@ path included will redirect to the frontend application.
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 <br>
 
-## Publishing the Design System
-
-The Design System is published to the npm Package Registry. To publish a new version, follow these steps:
-
-1. **Update the version**
-
-   Update the version running the lerna command:
-
-   ```shell
-   lerna version --no-push
-   ```
-
-   This command will ask you for the new version and will update the `package.json` files and create a new commit with the changes.
-
-2. **Review the auto generated CHANGELOG.md**
-
-   The lerna command will generate a new `CHANGELOG.md` file with the changes for the new version. Review the changes and make sure that the file is correct.
-
-   If it looks good, you can push the changes to the repository.
-
-   ```shell
-   git push && git push --tags
-   ```
-
-   Optional:
-
-   If you need to make any changes to the `CHANGELOG.md` file, you can do it manually.
-
-   After manually updating the `CHANGELOG.md` file, you can commit the changes.
-
-   ```shell
-   git add .
-   git commit --amend --no-edit
-   git push --force && git push --tags --force
-   ```
-
-   This command will amend the lerna commit and push the changes to the repository.
-
-3. **Review the new tag in GitHub**
-
-   After pushing the changes, you can review the new tag in the [GitHub repository](https://github.com/IQSS/dataverse-frontend/tags).
-
-   The tag should be created with the new version.
-
-4. **Publish the package**
-
-   After the version is updated, you can publish the package running the lerna command:
-
-   ```shell
-   lerna publish from-package
-   ```
-
-   This command will publish the package to the npm registry.
-
-   Remember that you need a valid npm token to publish the packages.
-
-   Get a new token from the npm website and update the `.npmrc` file with the new token.
-
-   Open the `.npmrc` file and replace `YOUR_NPM_TOKEN ` with your actual npm token.
-
-   ⚠️ Please ensure that any lines registering the `@iqss` scope with the GitHub Packages registry are commented out. This is important because otherwise, the package would be published there instead of npm.
-
-   ```plaintext
-   legacy-peer-deps=true
-
-    //npm.pkg.github.com/:_authToken=YOUR_NPM_TOKEN
-    @iqss:registry=https://npm.pkg.github.com/
-   ```
-
-5. **Review the new version in the npm registry**
-
-   After publishing the packages, you can review the new version in the [npm registry](https://www.npmjs.com/package/@iqss/dataverse-design-system?activeTab=versions).
-
-   The new version should be available in the npm registry.
-
-<p align="right">(<a href="#readme-top">back to top</a>)</p>
-<br>
-
 <!-- MARKDOWN LINKS & IMAGES -->
 <!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
 

docs/making-design-system-releases.md

@@ -0,0 +1,81 @@
+## Publishing the Design System
+
+The Design System is published to the npm Package Registry. To publish a new version, follow these steps:
+
+1. **Update the Changelog**
+
+   Move entries from Non Published Changes to the new version section and clear the Non Published Changes section.
+
+2. **Update Readme with the latest Storybook build**
+
+   Update the `README.md` file in the `packages/design-system` folder with the latest Storybook build.
+
+   You can search this link in the Chromatic Deployment Github Action -> Publish To Chromatic step -> "View your Storybook at"
+
+3. **Update the version**
+
+   Commit all your changes so far.
+
+   Update the version running the lerna command:
+
+   ```shell
+   lerna version --no-push
+   ```
+
+   This command will ask you for the new version and will update the `package.json` files and create a new commit with the changes.
+
+   If it looks good, you can push the changes to the repository.
+
+   ```shell
+   git push && git push --tags
+   ```
+
+4. **Review the new tag in GitHub**
+
+   After pushing the changes, you can review the new tag in the [GitHub repository](https://github.com/IQSS/dataverse-frontend/tags).
+
+   The tag should be created with the new version.
+
+5. **Build the package**
+
+   Ensure the design system is built so the dist artifacts are available:
+
+   ```bash
+   # from the repo root
+   npm run --workspace @iqss/dataverse-design-system build
+   # or, from the package folder
+   # cd packages/design-system && npm run build
+   ```
+
+   Note: publishing will also trigger a build automatically via the package's prepublishOnly script, but running it explicitly helps catch issues earlier.
+
+6. **Publish the package**
+
+   After the version is updated and the package is built, you can publish the package running the lerna command:
+
+   ```shell
+   lerna publish from-package
+   ```
+
+   This command will publish the package to the npm registry.
+
+   Remember that you need a valid npm token to publish the packages.
+
+   Get a new token from the npm website and update the `.npmrc` file with the new token.
+
+   Open the `.npmrc` file and replace `YOUR_NPM_TOKEN ` with your actual npm token.
+
+   ⚠️ Please ensure that any lines registering the `@iqss` scope with the GitHub Packages registry are commented out. This is important because otherwise, the package would be published there instead of npm.
+
+   ```plaintext
+   legacy-peer-deps=true
+
+    //npm.pkg.github.com/:_authToken=YOUR_NPM_TOKEN
+    @iqss:registry=https://npm.pkg.github.com/
+   ```
+
+7. **Review the new version in the npm registry**
+
+   After publishing the packages, you can review the new version in the [npm registry](https://www.npmjs.com/package/@iqss/dataverse-design-system?activeTab=versions).
+
+   The new version should be available in the npm registry.

lerna.json

@@ -1,12 +1,13 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "version": "independent",
+  "npmClient": "npm",
+  "packages": ["packages/*"],
   "command": {
     "version": {
-      "conventionalCommits": true,
-      "changelogPreset": "angular"
+      "npmClientArgs": [
+        "--legacy-peer-deps"
+      ]
     }
-  },
-  "npmClient": "npm",
-  "packages": ["packages/*"]
+  }
 }

package-lock.json

@@ -25,7 +25,7 @@
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "13.5.0",
-    "@types/node": "16.18.12",
+    "@types/node": "22.18.10",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
     "ajv": "8.17.1",
@@ -144,7 +144,7 @@
     "chromatic": "13.3.0",
     "concurrently": "8.0.1",
     "cypress": "15.2.0",
-    "cypress-vite": "1.4.0",
+    "cypress-vite": "1.8.0",
     "eslint": "8.33.0",
     "eslint-config-prettier": "8.6.0",
     "eslint-plugin-import": "2.27.5",

package.json

@@ -5,16 +5,27 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # Non Published Changes
 
+# [2.1.0](https://github.com/IQSS/dataverse-frontend/compare/@iqss/dataverse-design-system@2.0.2...@iqss/dataverse-design-system@2.1.0) (2025-10-09)
+
+### Added
+
 - **DropdownButton:**
   - Add `customToggle` prop to allow custom toggle components.
   - Add `customToggleClassname` and `customToggleMenuClassname` props to allow custom styling of the custom toggle dropdown wrapper and menu.
   - Add `align` prop to control the alignment of the dropdown menu.
   - Add `size` prop to control the size of the button (e.g., 'sm', 'lg').
 - **DropdownButtonItem:**
   - Add `type` prop to allow specifying the type of the element.
+
+### Changed
+
 - **SelectAdvanced:**
-  - Fix word wrapping in options list to prevent overflow and ensure long text is displayed correctly.
   - Support for options with a shape of `{ label: string; value: string; }[]` instead of just `string[]`.
+
+### Fixed
+
+- **SelectAdvanced:**
+  - Fix word wrapping in options list to prevent overflow and ensure long text is displayed correctly.
 - **ButtonGroup:**
   - Fix styles for vertical button groups when using tooltips.
 - **FormText:** Add `className` prop to allow custom styling.

packages/design-system/CHANGELOG.md

@@ -56,7 +56,7 @@ function App() {
 export default App
 ```
 
-For detailed usage instructions and available customization options, refer to the [Storybook](https://646fbe232a8d3b501a1943f3-euwxbewiys.chromatic.com) provided with the package.
+For detailed usage instructions and available customization options, refer to the [Storybook](https://646fbe232a8d3b501a1943f3-mdvdyoulio.chromatic.com) provided with the package.
 
 [//]: # 'COMMING SOON'
 [//]: # '## Contributions'

packages/design-system/README.md

@@ -1,6 +1,6 @@
 {
   "name": "@iqss/dataverse-design-system",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Dataverse Design System Component Library",
   "type": "module",
   "license": "MIT",
@@ -22,6 +22,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
+    "prepublishOnly": "npm run build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6007",

packages/design-system/package.json

@@ -85,6 +85,10 @@
         "replace": "Replace",
         "delete": "Delete"
       }
+    },
+    "share": {
+      "title": "Share File",
+      "helpText": "Share this file on your favorite social media networks."
     }
   },
   "deleteFileModal": {