fix(umd): Issue 1646 - change process.env.NODE_ENV to string (#1649)

* fix(umd): simplify exports * chore(app): bump lerna, angular, sass, @types/react * chore(sass): limit version for core due to issue in @carbon/styles * chore(repo): node bug fix, bump deploy action version * chore(release): make version less specific * chore(release): add icons * fix(core/umd): replace process.env.NODE_ENV in bundle * chore(app): bump storybook, eslint, svelte, svelte-check * chore(app): bump storybook, eslint * feat(modal): reduce dependency on deprecated carbon-components for testing * chore(app): bump vite-plugin-dts * chore(modal): improve typing * chore(vite): only need plugin-replace
carbon-design-system · Aug 14, 2023 · 8e11271 · 8e11271
1 parent 8ad1a69
commit 8e11271
Show file tree

Hide file tree

Showing 15 changed files with 1,461 additions and 1,543 deletions.
diff --git a/packages/angular/package.json b/packages/angular/package.json
@@ -57,14 +57,14 @@
 		"@carbon/icon-helpers": "^10.44.0",
 		"@carbon/icons": "^11.24.0",
 		"@stackblitz/sdk": "^1.9.0",
-		"@storybook/addon-essentials": "^7.2.2",
-		"@storybook/addon-interactions": "^7.2.2",
-		"@storybook/addon-links": "^7.2.2",
-		"@storybook/angular": "^7.2.2",
-		"@storybook/blocks": "^7.2.2",
-		"@storybook/manager-api": "^7.2.2",
+		"@storybook/addon-essentials": "^7.2.3",
+		"@storybook/addon-interactions": "^7.2.3",
+		"@storybook/addon-links": "^7.2.3",
+		"@storybook/angular": "^7.2.3",
+		"@storybook/blocks": "^7.2.3",
+		"@storybook/manager-api": "^7.2.3",
 		"@storybook/testing-library": "^0.2.0",
-		"@storybook/theming": "^7.2.2",
+		"@storybook/theming": "^7.2.3",
 		"@types/carbon__icon-helpers": "^10.7.2",
 		"@typescript-eslint/eslint-plugin": "^6.3.0",
 		"@typescript-eslint/parser": "^6.3.0",
@@ -73,7 +73,7 @@
 		"d3-cloud": "^1.2.7",
 		"d3-sankey": "^0.12.3",
 		"downlevel-dts": "^0.11.0",
-		"eslint": "^8.46.0",
+		"eslint": "^8.47.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-prettier": "^5.0.0",
 		"eslint-plugin-storybook": "^0.6.13",
@@ -82,7 +82,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"rxjs": "~7.8.1",
-		"storybook": "^7.2.2",
+		"storybook": "^7.2.3",
 		"style-loader": "^3.3.3",
 		"typescript": "~5.1.6",
 		"zone.js": "~0.13.1"

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -110,17 +110,18 @@
 		"@carbon/layout": "^11.18.0",
 		"@carbon/styles": "^1.35.0",
 		"@carbon/themes": "^11.23.0",
+		"@rollup/plugin-replace": "^5.0.2",
 		"@rushstack/eslint-patch": "^1.3.3",
 		"@stackblitz/sdk": "^1.9.0",
-		"@storybook/addon-essentials": "^7.2.2",
-		"@storybook/addon-interactions": "^7.2.2",
-		"@storybook/addon-links": "^7.2.2",
-		"@storybook/blocks": "^7.2.2",
-		"@storybook/html": "^7.2.2",
-		"@storybook/html-vite": "^7.2.2",
-		"@storybook/manager-api": "^7.2.2",
+		"@storybook/addon-essentials": "^7.2.3",
+		"@storybook/addon-interactions": "^7.2.3",
+		"@storybook/addon-links": "^7.2.3",
+		"@storybook/blocks": "^7.2.3",
+		"@storybook/html": "^7.2.3",
+		"@storybook/html-vite": "^7.2.3",
+		"@storybook/manager-api": "^7.2.3",
 		"@storybook/testing-library": "^0.2.0",
-		"@storybook/theming": "^7.2.2",
+		"@storybook/theming": "^7.2.3",
 		"@types/d3": "^7.4.0",
 		"@types/d3-cloud": "^1.2.5",
 		"@types/d3-sankey": "^0.12.1",
@@ -130,19 +131,19 @@
 		"@typescript-eslint/parser": "^6.3.0",
 		"concurrently": "^8.2.0",
 		"downlevel-dts": "^0.11.0",
-		"eslint": "^8.46.0",
+		"eslint": "^8.47.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-storybook": "^0.6.13",
 		"jsdom": "^22.1.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"resize-observer-polyfill": "^1.5.1",
 		"sass": "~1.64.2",
-		"storybook": "^7.2.2",
+		"storybook": "^7.2.3",
 		"typedoc": "^0.24.8",
 		"typescript": "^5.1.6",
 		"vite": "^4.4.9",
-		"vite-plugin-dts": "^3.5.1",
+		"vite-plugin-dts": "^3.5.2",
 		"vitest": "^0.34.1"
 	},
 	"publishConfig": {

diff --git a/packages/core/src/components/essentials/carbon-components.d.ts b/packages/core/src/components/essentials/carbon-components.d.ts
@@ -1,14 +1,62 @@
 declare module 'carbon-components' {
-	export class Modal {
-		static create(node: any): any
+	export interface ModalOptions {
+		selectorInit: string
+		selectorModalClose: string
+		selectorPrimaryFocus: string
+		selectorsFloatingMenus: string[]
+		selectorModalContainer: string
+		classVisible: string
+		classBody: string
+		attribInitTarget: string
+		initEventNames: string[]
+		eventBeforeShown: string
+		eventAfterShown: string
+		eventBeforeHidden: string
+		eventAfterHidden: string
 	}
-}
 
-declare module 'carbon-components/es/globals/js/settings' {
-	export default {
-		disableAutoInit: boolean,
-		prefix: string,
-		selectorTabbable: string,
-		selectorFocusable: string
+  interface Handle {
+    release: () => null
+  }
+
+  type Component = any
+
+	export class Modal {
+    // carbon-components Modal class
+    constructor(element: HTMLDivElement, options?: Partial<ModalOptions>)
+    element: HTMLDivElement // implied
+    previouslyFocusedNode: Element // implied
+		_handleFocusinListener?: Handle
+		_handleKeydownListener: Handle
+    createdByLauncher(evt: Event): void
+    shouldStateBeChanged(state: string): boolean
+    _changeState(state: string, detail: object, callback: () => void): void // overrides mixin EventedState
+    _hookCloseActions(): void
+    _handleFocusin: (evt: FocusEvent) => void
+    static components: WeakMap<HTMLDivElement, Modal>
+		static get options(): ModalOptions
+
+    // mixin CreateComponent
+    children: Component[]
+		static create(node: HTMLDivElement): Modal
+    release(): null
+
+    // mixin InitComponentByLauncher
+    static forLazyInit: boolean
+    init(target: Document, options: ModalOptions): void
+
+    // mixin EventedShowHideState
+    show(evtOrElem?, callback?): void
+    hide(evtOrElem?, callback?): void
+
+    // mixin EventedState
+    _changeState(): void // overload
+    changeState(...args): void
+
+    // mixin Handles
+    handles: Set<Handle> // mixin Handles
+    manage(handle: Handle): Handle
+    unmanage(handle: Handle): Handle
+    // release - handles vs. release in CreateComponent mixin which is for children
 	}
 }
diff --git a/packages/core/src/components/essentials/legend.spec.ts b/packages/core/src/components/essentials/legend.spec.ts
@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, expect, describe, it } from 'vitest'
 import ResizeObserver from 'resize-observer-polyfill'
 import { select } from 'd3'
-import settings from 'carbon-components/es/globals/js/settings' // CSS prefixes
+import { prefix } from '@/tests'
 import { ScatterChart } from '@/charts'
 import { options as optionsConfigs } from '@/configuration'
 import { TestEnvironment } from '@/tests/test-environment'
@@ -36,7 +36,7 @@ describe('legend component', () => {
 				chartEventsService.removeEventListener(Events.Chart.RENDER_FINISHED, renderCb)
 
 				const numberOfLegendItems = select(
-					`g.${settings.prefix}--${optionsConfigs.chart.style?.prefix}--legend`
+					`g.${prefix}--${optionsConfigs.chart.style?.prefix}--legend`
 				)
 					.selectAll('g.legend-item')
 					.size()

diff --git a/packages/core/src/components/essentials/modal.ts b/packages/core/src/components/essentials/modal.ts
@@ -1,14 +1,14 @@
-import { select } from 'd3'
+import { select, type Selection } from 'd3'
 import { get } from 'lodash-es'
-import { Modal as CarbonModalComponent } from 'carbon-components' // Carbon model
+import { Modal as CarbonModalComponent } from 'carbon-components' // /es/components/modal
 import { getProperty } from '@/tools'
 import { carbonPrefix } from '@/configuration-non-customizable' // CSS prefix
 import { Component } from '@/components/component'
 import { DOMUtils } from '@/services/essentials/dom-utils'
 import type { ChartModel } from '@/model/model'
+import type { ChartOptions } from '@/interfaces/charts'
 import { Events } from '@/interfaces/enums'
 
-
 export class Modal extends Component {
 	type = 'modal'
 
@@ -103,11 +103,11 @@ export class Modal extends Component {
   // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
 	render(animate = false) {
-		const options = this.model.getOptions()
+		const options = this.model.getOptions() as ChartOptions
 		if (!this.isEventListenerAdded) {
 			// Grab the tooltip element
-			const holder = select(this.services.domUtils.getHolder())
-			const chartprefix = getProperty(options, 'style', 'prefix')
+			const holder = select(this.services.domUtils.getHolder()) as Selection<HTMLDivElement, any, Element, any>
+			const chartprefix = getProperty(options, 'style', 'prefix') as string
 			this.modal = DOMUtils.appendOrSelect(holder, `div.${carbonPrefix}--${chartprefix}--modal`)
 
 			this.addEventListeners()

diff --git a/packages/core/src/components/essentials/title.spec.ts b/packages/core/src/components/essentials/title.spec.ts
@@ -1,6 +1,6 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 import ResizeObserver from 'resize-observer-polyfill'
-import settings from 'carbon-components/es/globals/js/settings' // CSS prefixes
+import { prefix } from '@/tests'
 import { select } from 'd3'
 import { options as optionsConfigs } from '@/configuration'
 import { ScatterChart } from '@/charts/scatter'
@@ -25,7 +25,7 @@ describe('title component', () => {
 
 			const chartEventsService = chart.services.events
 			const renderCb = () => {
-				const title = select(`g.${settings.prefix}--${optionsConfigs.chart.style?.prefix}--title`)
+				const title = select(`g.${prefix}--${optionsConfigs.chart.style?.prefix}--title`)
 
 				// Remove event listener for when chart render is finished
 				chartEventsService.removeEventListener(Events.Chart.RENDER_FINISHED, renderCb)

diff --git a/packages/core/src/configuration-non-customizable.ts b/packages/core/src/configuration-non-customizable.ts
@@ -1,7 +1,7 @@
 import { easeCubicInOut } from 'd3'
 import { LegendItemType, ZoomBarTypes,  } from '@/interfaces/enums'
 
-export const carbonPrefix = 'cds'
+export const carbonPrefix = 'cds' as string
 
 export const area = {
 	opacity: {

diff --git a/packages/core/src/selectedGroups.spec.ts b/packages/core/src/selectedGroups.spec.ts
@@ -2,11 +2,12 @@ import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import ResizeObserver from 'resize-observer-polyfill'
 import { select } from 'd3'
 import { TestEnvironment } from './tests'
-import settings from 'carbon-components/es/globals/js/settings' // CSS prefixes
+import { prefix } from '@/tests'
 import { ScatterChart } from '@/charts/scatter'
 import { options } from './configuration'
 import { Events } from '@/interfaces/enums'
 
+const prefix = 'bx'
 global.ResizeObserver = ResizeObserver
 let chart: ScatterChart
 let testEnvironment: TestEnvironment
@@ -29,7 +30,7 @@ describe('selectedGroups option', () => {
 				chartEventsService.removeEventListener(Events.Chart.RENDER_FINISHED, renderCb)
 
 				const selectedLegendLabels = select(
-					`g.${settings.prefix}--${options.chart.style?.prefix}--legend`
+					`g.${prefix}--${options.chart.style?.prefix}--legend`
 				)
 					.selectAll<SVGGElement, unknown>('g.legend-item.active > text')
 					.nodes()

diff --git a/packages/core/src/tests/index.ts b/packages/core/src/tests/index.ts
@@ -1 +1,2 @@
 export { data, options, TestEnvironment } from './test-environment'
+export const prefix = 'bx'
diff --git a/packages/core/src/tests/tools.ts b/packages/core/src/tests/tools.ts
@@ -1,12 +1,12 @@
-import settings from 'carbon-components/es/globals/js/settings' // CSS prefix
+import { prefix } from '@/tests'
 import { ChartTypes } from '@/interfaces/enums'
 
 export const makeChartID = (chartType: ChartTypes) => `${chartType}-chart-holder`
 
 export const createChartHolder = (chartType: any) => {
 	const chartHolder = document.createElement('div')
 	chartHolder.id = makeChartID(chartType)
-	chartHolder.classList.add(`${settings.prefix}--chart-holder`)
+	chartHolder.classList.add(`${prefix}--chart-holder`)
 
 	document.body.appendChild(chartHolder)
 

diff --git a/packages/core/vite.umd.config.ts b/packages/core/vite.umd.config.ts
@@ -1,8 +1,16 @@
 import { fileURLToPath } from 'url'
 import { defineConfig } from 'vite'
+import replace from '@rollup/plugin-replace'
 
 export default defineConfig({
 	build: {
+		rollupOptions: {
+			plugins: [
+				replace({
+          'process.env.NODE_ENV': JSON.stringify('production'),
+        })
+			]
+		},
 		outDir: 'dist/umd',
 		sourcemap: true,
 		chunkSizeWarningLimit: 600,

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -60,16 +60,16 @@
 		"@babel/preset-typescript": "^7.22.5",
 		"@rushstack/eslint-patch": "^1.3.3",
 		"@stackblitz/sdk": "1.9.0",
-		"@storybook/addon-essentials": "^7.2.2",
-		"@storybook/addon-interactions": "^7.2.2",
-		"@storybook/addon-links": "^7.2.2",
-		"@storybook/blocks": "^7.2.2",
-		"@storybook/manager-api": "^7.2.2",
-		"@storybook/react": "^7.2.2",
-		"@storybook/react-vite": "^7.2.2",
-		"@storybook/react-webpack5": "^7.2.2",
+		"@storybook/addon-essentials": "^7.2.3",
+		"@storybook/addon-interactions": "^7.2.3",
+		"@storybook/addon-links": "^7.2.3",
+		"@storybook/blocks": "^7.2.3",
+		"@storybook/manager-api": "^7.2.3",
+		"@storybook/react": "^7.2.3",
+		"@storybook/react-vite": "^7.2.3",
+		"@storybook/react-webpack5": "^7.2.3",
 		"@storybook/testing-library": "^0.2.0",
-		"@storybook/theming": "^7.2.2",
+		"@storybook/theming": "^7.2.3",
 		"@types/carbon__icons-react": "^11.20.0",
 		"@types/react": "^18.2.20",
 		"@types/react-dom": "^18.2.7",
@@ -83,19 +83,19 @@
 		"d3-cloud": "^1.2.7",
 		"d3-sankey": "^0.12.3",
 		"downlevel-dts": "^0.11.0",
-		"eslint": "^8.46.0",
+		"eslint": "^8.47.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-prettier": "^5.0.0",
 		"eslint-plugin-react": "^7.33.1",
 		"eslint-plugin-storybook": "^0.6.13",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"sass": "^1.65.1",
-		"storybook": "^7.2.2",
+		"storybook": "^7.2.3",
 		"style-loader": "^3.3.3",
 		"typescript": "^5.1.6",
 		"vite": "^4.4.9",
-		"vite-plugin-dts": "^3.5.1",
+		"vite-plugin-dts": "^3.5.2",
 		"webpack": "5.88.2"
 	},
 	"publishConfig": {

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -47,35 +47,35 @@
 	},
 	"devDependencies": {
 		"@stackblitz/sdk": "^1.9.0",
-		"@storybook/addon-essentials": "^7.2.2",
-		"@storybook/addon-interactions": "^7.2.2",
-		"@storybook/addon-links": "^7.2.2",
-		"@storybook/blocks": "^7.2.2",
-		"@storybook/manager-api": "^7.2.2",
-		"@storybook/svelte": "^7.2.2",
-		"@storybook/sveltekit": "^7.2.2",
+		"@storybook/addon-essentials": "^7.2.3",
+		"@storybook/addon-interactions": "^7.2.3",
+		"@storybook/addon-links": "^7.2.3",
+		"@storybook/blocks": "^7.2.3",
+		"@storybook/manager-api": "^7.2.3",
+		"@storybook/svelte": "^7.2.3",
+		"@storybook/sveltekit": "^7.2.3",
 		"@storybook/testing-library": "^0.2.0",
-		"@storybook/theming": "^7.2.2",
+		"@storybook/theming": "^7.2.3",
 		"@sveltejs/adapter-auto": "^2.1.0",
-		"@sveltejs/kit": "^1.22.4",
-		"@sveltejs/package": "^2.2.0",
+		"@sveltejs/kit": "^1.22.5",
+		"@sveltejs/package": "^2.2.1",
 		"@typescript-eslint/eslint-plugin": "^6.3.0",
 		"@typescript-eslint/parser": "^6.3.0",
 		"concurrently": "^8.2.0",
 		"d3": "^7.8.5",
 		"d3-cloud": "^1.2.7",
 		"d3-sankey": "^0.12.3",
-		"eslint": "^8.46.0",
+		"eslint": "^8.47.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-storybook": "^0.6.13",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"prettier-plugin-svelte": "^3.0.3",
 		"publint": "^0.2.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"storybook": "^7.2.2",
-		"svelte": "^4.1.2",
-		"svelte-check": "^3.4.6",
+		"storybook": "^7.2.3",
+		"svelte": "^4.2.0",
+		"svelte-check": "^3.5.0",
 		"tslib": "^2.6.1",
 		"typescript": "^5.1.6",
 		"vite": "^4.4.9"