Merge branch 'develop' into 877-spa-runtime-config

Author: g-saracca

CHANGELOG.md

@@ -8,12 +8,19 @@ 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
 
 - Use of the new `sourceLastUpdateTime` query parameter from update dataset and file metadata endpoints to support optimistic concurrency control during editing operations. See [Edit Dataset Metadata](https://guides.dataverse.org/en/6.8/api/native-api.html#edit-dataset-metadata) and [Updating File Metadata](https://guides.dataverse.org/en/6.8/api/native-api.html#updating-file-metadata) guides for more details.
+- Changed the way we were handling DATE type metadata field validation to better match the backend validation and give users better error messages. For example, for an input like “foo AD”, we now show “Production Date is not a valid date. The AD year must be numeric.“. For an input like “99999 AD”, we now show “Production Date is not a valid date. The AD year cant be higher than 9999.“. For an input like “[-9999?], we now show “Production Date is not a valid date. The year in brackets cannot be negative.“, etc.
 
 ### Fixed
 
+- Add word-break to items text to prevent layout issues when long descriptions without spaces are entered. (#839)
 - Show toast notification when API token is copied to clipboard.
 
 ### Removed

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

@@ -18,14 +18,14 @@
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-alpha.76",
+    "@iqss/dataverse-client-javascript": "2.0.0-alpha.77",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",
     "@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",
@@ -145,7 +145,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,18 +5,31 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # Non Published Changes
 
+# [2.1.0](https://github.com/IQSS/dataverse-frontend/compare/@iqss/[email protected]...@iqss/[email protected]) (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.
+- **FormInput:** Add `size` prop to allow different input sizes (e.g., 'sm', 'lg'). Defaults to standard size if not specified.
 
 # [2.0.2](https://github.com/IQSS/dataverse-frontend/compare/@iqss/[email protected]...@iqss/[email protected]) (2024-06-23)