Merge pull request #872 from IQSS/release/870-release-design-system-2.1.0

ofahimIQSS · web-flow · commit 2b38ef0fd471 · 2025-10-16T10:15:15.000-04:00
Release design system 2.1.0
diff --git a/DEVELOPER_GUIDE.md b/DEVELOPER_GUIDE.md
@@ -1048,84 +1048,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 -->
 
diff --git a/docs/making-design-system-releases.md b/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.
diff --git a/lerna.json b/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/*"]
+  }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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",
diff --git a/packages/design-system/CHANGELOG.md b/packages/design-system/CHANGELOG.md
@@ -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.
 
diff --git a/packages/design-system/README.md b/packages/design-system/README.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'
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -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",

Original file line number	Diff line number	Diff line change
`@@ -1,12 +1,13 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "node_modules/lerna/schemas/lerna-schema.json",`
`3`	`3`	`"version": "independent",`
	`4`	`+ "npmClient": "npm",`
	`5`	`+ "packages": ["packages/*"],`
`4`	`6`	`"command": {`
`5`	`7`	`"version": {`
`6`		`- "conventionalCommits": true,`
`7`		`- "changelogPreset": "angular"`
	`8`	`+ "npmClientArgs": [`
	`9`	`+ "--legacy-peer-deps"`
	`10`	`+ ]`
`8`	`11`	`}`
`9`		`- },`
`10`		`- "npmClient": "npm",`
`11`		`- "packages": ["packages/*"]`
	`12`	`+ }`
`12`	`13`	`}`