skip-release - Modified files for sanitize didn't get prettier format…

…ting and bumps for dependencies (#1717)

* chore(prettier): changes are formatting only to keep in line with recent updates

* chore(app): bump vue, @sveltejs/package, sass, classnames, @types/react, @vue/eslint-config-prettier, @nrwl/devkit

* fix(eslint): config for VS Code

* fix(core/config): missing type keyword for interfaces

* chore(app): bump vue, classnames, @vitejs/plugin-vue

.eslintignore

@@ -13,5 +13,5 @@ yarn.lock
 **/node_modules
 **/LICENSE.md
 
-# Prettier (which shares this config) totally messess up Storybook MDX files right now
+# Prettier (which shares this config) has issues with Storybook MDX files
 *.mdx

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "prettier.configPath": "prettier.config.mjs",
-  "prettier.ignorePath": ".prettierignore",
-  "prettier.prettierPath": ""
+  "prettier.ignorePath": ".eslintignore",
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

package.json

@@ -2,6 +2,7 @@
   "name": "@carbon/charts-monorepo",
   "private": true,
   "description": "Carbon Charts component libraries for JavaScript, Angular, React, Svelte and Vue",
+  "type": "module",
   "scripts": {
     "clean:root": "rm -rf node_modules yarn.lock .yarn/cache .yarn/install-state.gz",
     "clean:pages": "rm -rf pages && mkdir -p pages && touch pages/.nojekyll && echo 'charts.carbondesignsystem.com' > pages/CNAME",
@@ -27,7 +28,7 @@
   "packageManager": "[email protected]",
   "prettier": "./prettier.config.mjs",
   "devDependencies": {
-    "@nrwl/devkit": "^17.2.7",
+    "@nrwl/devkit": "^17.2.8",
     "@storybook/addon-essentials": "~7.6.6",
     "@storybook/addon-interactions": "~7.6.6",
     "@storybook/addon-links": "~7.6.6",
@@ -42,7 +43,7 @@
     "@storybook/vue3-vite": "~7.6.6",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",
-    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
@@ -65,7 +66,7 @@
     "react-dom": "^18.2.0",
     "storybook": "~7.6.6",
     "vite": "^5.0.10",
-    "vue": "^3.3.13"
+    "vue": "^3.4.3"
   },
   "husky": {
     "hooks": {

packages/core/package.json

@@ -116,14 +116,14 @@
 		"@types/d3": "^7.4.3",
 		"@types/d3-cloud": "^1.2.9",
 		"@types/d3-sankey": "^0.12.4",
-		"@types/dompurify": "^3",
+		"@types/dompurify": "^3.0.5",
 		"@types/lodash-es": "^4.17.12",
 		"@types/topojson": "^3.2.6",
 		"concurrently": "^8.2.2",
 		"downlevel-dts": "^0.11.0",
 		"jsdom": "^23.0.1",
 		"resize-observer-polyfill": "^1.5.1",
-		"sass": "^1.69.5",
+		"sass": "^1.69.6",
 		"storybook": "~7.6.6",
 		"typedoc": "^0.25.4",
 		"typescript": "^5.3.3",

packages/core/src/components/essentials/legend.ts

@@ -337,7 +337,10 @@ export class Legend extends Component {
 		if (truncationType !== TruncationTypes.NONE) {
 			addedLegendItemsText.html(function (d: any) {
 				const _sanitizedLabel = sanitizeText(d.name)
-				if (_sanitizedLabel.length > truncationThreshold && _sanitizedLabel.length !== truncationNumCharacter) {
+				if (
+					_sanitizedLabel.length > truncationThreshold &&
+					_sanitizedLabel.length !== truncationNumCharacter
+				) {
 					return truncateLabel(_sanitizedLabel, truncationType, truncationNumCharacter)
 				} else {
 					return _sanitizedLabel

packages/core/src/components/essentials/modal.ts

@@ -79,9 +79,9 @@ export class Modal extends Component {
 			<div class="cds--modal-header cds--modal-header">
 				<p class="cds--modal-header__label cds--type-delta cds--modal-header__label cds--type-delta" id="modal-title">Tabular representation</p>
 
-				<p class="cds--modal-header__heading cds--type-beta cds--modal-header__heading cds--type-beta" id="modal-description">${
-					sanitizeText(options.title)
-				}</p>
+				<p class="cds--modal-header__heading cds--type-beta cds--modal-header__heading cds--type-beta" id="modal-description">${sanitizeText(
+					options.title
+				)}</p>
 
 				<button class="cds--modal-close cds--modal-close" type="button" data-modal-close aria-label="close modal"  data-modal-primary-focus>
 					<svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-label="Close" width="20" height="20" viewBox="0 0 32 32" role="img" class="cds--modal-close__icon cds--modal-close__icon">

packages/core/src/components/essentials/tooltip.ts

@@ -42,13 +42,15 @@ export class Tooltip extends Component {
 		// if there is a provided tooltip HTML function call it
 		if (getProperty(this.getOptions(), 'tooltip', 'customHTML')) {
 			if (e.detail.content) {
-				const labelHTML = `<div class="title-tooltip"><p>${sanitizeHtml(e.detail.content)}</p></div>`
+				const labelHTML = `<div class="title-tooltip"><p>${sanitizeHtml(
+					e.detail.content
+				)}</p></div>`
 				tooltipTextContainer.html(labelHTML)
 			} else {
 				tooltipTextContainer.html(
-					`<div class="title-tooltip"><p>${sanitizeHtml(this.model
-						.getOptions()
-						.tooltip.customHTML(data, defaultHTML))}</p></div>`
+					`<div class="title-tooltip"><p>${sanitizeHtml(
+						this.model.getOptions().tooltip.customHTML(data, defaultHTML)
+					)}</p></div>`
 				)
 			}
 		} else {

packages/core/src/configuration.ts

@@ -1,7 +1,7 @@
 import { enUS as localeObject } from 'date-fns/locale'
 import { merge } from 'lodash-es'
 import { circlePack } from './configuration-non-customizable'
-import {
+import type {
 	AlluvialChartOptions,
 	AreaChartOptions,
 	AxisChartOptions,
@@ -44,8 +44,8 @@ import {
 	Projection,
 	ChartTheme
 } from '@/interfaces/enums'
-import { AxesOptions, AxisOptions, TimeScaleOptions } from '@/interfaces/axis-scales'
-import {
+import type { AxesOptions, AxisOptions, TimeScaleOptions } from '@/interfaces/axis-scales'
+import type {
 	GridOptions,
 	RulerOptions,
 	TooltipOptions,

packages/react/package.json

@@ -49,16 +49,16 @@
 	},
 	"devDependencies": {
 		"@stackblitz/sdk": "1.9.0",
-		"@types/react": "^18.2.45",
+		"@types/react": "^18.2.46",
 		"@types/react-dom": "^18.2.18",
 		"@vitejs/plugin-react": "^4.2.1",
-		"classnames": "^2.4.0",
+		"classnames": "^2.5.1",
 		"concurrently": "^8.2.2",
 		"d3": "^7.8.5",
 		"d3-cloud": "^1.2.7",
 		"d3-sankey": "^0.12.3",
 		"downlevel-dts": "^0.11.0",
-		"sass": "^1.69.5",
+		"sass": "^1.69.6",
 		"storybook": "~7.6.6",
 		"typescript": "^5.3.3",
 		"vite": "^5.0.10",

packages/svelte/package.json

@@ -49,7 +49,7 @@
 		"@stackblitz/sdk": "^1.9.0",
 		"@sveltejs/adapter-auto": "^3.0.1",
 		"@sveltejs/kit": "^2.0.6",
-		"@sveltejs/package": "^2.2.4",
+		"@sveltejs/package": "^2.2.5",
 		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"concurrently": "^8.2.2",
 		"d3": "^7.8.5",

packages/vue/package.json

@@ -35,17 +35,17 @@
 		"pub:demo": "cp -a demo/bundle/. ../../pages/vue"
 	},
 	"peerDependencies": {
-		"vue": "^3.3.0"
+		"vue": "^3.4.0"
 	},
 	"dependencies": {
 		"@carbon/charts": "workspace:*",
 		"@carbon/telemetry": "~0.1.0",
-		"vue": "^3.3.13"
+		"vue": "^3.4.3"
 	},
 	"devDependencies": {
 		"@stackblitz/sdk": "^1.9.0",
 		"@types/d3": "^7.4.3",
-		"@vitejs/plugin-vue": "^5.0.0",
+		"@vitejs/plugin-vue": "^5.0.2",
 		"concurrently": "^8.2.2",
 		"d3": "^7.8.5",
 		"d3-cloud": "^1.2.7",