200 move to pnpm

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 .idea/
 .cache/
+.pnpm-store/
 
 .env
 

.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts=true

package.json

@@ -3,11 +3,6 @@
   "version": "0.5.3",
   "description": "Lume is a component library for visual representations of data, built for Vue with D3.",
   "type": "module",
-  "workspaces": [
-    "packages/lib",
-    "packages/vue2",
-    "packages/vue3"
-  ],
   "license": "MIT",
   "contributors": [
     {
@@ -32,63 +27,34 @@
     "url": "https://github.com/Adyen/lume.git"
   },
   "scripts": {
-    "build": "nx run-many --target=build",
+    "build": "pnpm --parallel -r --filter='./packages/*' run build",
     "build:storybook": "NODE_ENV=production build-storybook -c .storybook -o storybook",
     "confighooks": "git config core.hooksPath ./git-hooks",
-    "prepare": "npm run confighooks && echo \" ✔ Git hooks path configured to ./git-hooks\"",
+    "pack": "pnpm -r --filter='./packages/vue*' run pack",
+    "prepare": "pnpm run confighooks && echo \" ✔ Git hooks path configured to ./git-hooks\"",
     "release": "release-it",
-    "storybook:vue2": "npm run storybook --workspace=packages/vue2",
-    "storybook:vue3": "npm run storybook --workspace=packages/vue3",
-    "test": "nx test lib",
-    "test:watch": "nx test:watch lib",
-    "test:update:snapshot": "nx test:update:snapshot lib",
-    "test:coverage": "nx test:coverage lib"
-  },
-  "dependencies": {
-    "@popperjs/core": "^2.11.4",
-    "d3": "7.8.0",
-    "d3-sankey": "0.12.3"
+    "storybook": "pnpm --parallel -r --filter='./packages/*' run storybook",
+    "test": "pnpm --parallel -r --filter='./packages/*' run test",
+    "test:vue2": "pnpm --filter='./packages/vue2' run test",
+    "test:vue3": "pnpm --filter='./packages/vue3' run test"
   },
   "devDependencies": {
     "@release-it-plugins/workspaces": "^3.2.0",
-    "@storybook/addon-a11y": "^7.0.11",
-    "@storybook/addon-essentials": "^7.0.11",
-    "@storybook/cli": "^7.0.11",
-    "@storybook/manager-api": "^7.0.11",
-    "@storybook/theming": "^7.0.11",
-    "@types/d3": "^7.4.0",
-    "@types/d3-sankey": "^0.12.0",
-    "@types/jest": "^29.2.2",
     "@types/node": "^18.11.5",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.43.0",
-    "@vitest/coverage-istanbul": "^0.27.0",
-    "@vue/test-utils": "^2.3.0",
     "auto-changelog": "^2.4.0",
     "css-loader": "^6.7.2",
     "eslint": "^8.27.0",
     "eslint-plugin-vue": "^9.9.0",
     "glob": "^8.0.3",
-    "html-webpack-plugin": "^5.5.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.3.1",
-    "jsdom": "^20.0.3",
     "mini-css-extract-plugin": "^2.7.0",
-    "nx": "14.8.2",
     "prettier": "^2.7.1",
     "release-it": "^15.6.0",
     "resize-observer-polyfill": "^1.5.1",
-    "sass": "^1.43.4",
+    "sass": "^1.62.1",
     "sass-loader": "^13.2.0",
-    "ts-jest": "^29.0.3",
     "typescript": "^4.6.3",
-    "vite": "^4.0.0",
-    "vite-plugin-static-copy": "^0.13.0",
-    "vitest": "^0.27.0",
-    "vue": "^3.2.47",
-    "vue-loader": "^15.10.0",
-    "vue-style-loader": "^4.1.3",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.0"
   },

packages/lib/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@adyen/lume-core",
-  "version": "*",
+  "version": "0.5.3",
   "description": "",
+  "private": true,
   "main": "index.js",
-  "directories": {
-    "test": "test"
-  },
   "exports": {
     ".": "./src/index.ts",
     "./plugin": "./src/plugin.ts",
@@ -14,11 +12,17 @@
   "scripts": {
     "lint:fix": "npm run lint -- --fix",
     "lint:pretty": "prettier --write --ignore-unknown .",
-    "lint": "eslint ./src ./test --ext .js,.ts,.vue",
-    "test": "vitest run --config=vitest.config.ts --silent",
-    "test:watch": "vitest --config=vitest.config.ts",
-    "test:update:snapshot": "vitest --config=vitest.config.ts -u",
-    "test:coverage": "vitest run --coverage"
+    "lint": "eslint ./src ./test --ext .js,.ts,.vue"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.4",
+    "d3": "7.8.0",
+    "d3-sankey": "0.12.3"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "7.0.18",
+    "@vue/test-utils": "^2.3.2",
+    "vitest": "^0.32.0"
   },
   "keywords": [],
   "author": "",

packages/lib/src/components/charts/lume-alluvial-diagram/lume-alluvial-diagram.spec.ts

@@ -83,7 +83,7 @@ describe('lume-alluvial-diagram.vue', () => {
 
     const data = [{ values }];
 
-    mount(LumeAlluvialDiagram, { props: { data } });
+    mount(LumeAlluvialDiagram, { props: { data }, propsData: { data } });
 
     await nextTick();
 
@@ -101,7 +101,7 @@ describe('lume-alluvial-diagram.vue', () => {
       },
     ];
 
-    mount(LumeAlluvialDiagram, { props: { data } });
+    mount(LumeAlluvialDiagram, { props: { data }, propsData: { data } });
 
     await nextTick();
 
@@ -139,7 +139,7 @@ describe('lume-alluvial-diagram.vue', () => {
       },
     ];
 
-    mount(LumeAlluvialDiagram, { props: { data } });
+    mount(LumeAlluvialDiagram, { props: { data }, propsData: { data } });
 
     await nextTick();
 

packages/lib/src/components/charts/lume-single-bar-chart/lume-single-bar-chart.spec.ts

@@ -53,16 +53,16 @@ describe('lume-single-bar-chart.vue', () => {
 
     // check +ve bars
     expect(
-      el.findAllComponents('[data-j-lume-bar]')[0].props('isNegative')
+      el.findAllComponents('[data-j-lume-bar]').at(0).props('isNegative')
     ).toBeFalsy();
     expect(
-      el.findAllComponents('[data-j-lume-bar]')[2].props('isNegative')
+      el.findAllComponents('[data-j-lume-bar]').at(2).props('isNegative')
     ).toBeFalsy();
     expect(
-      el.findAllComponents('[data-j-lume-bar]')[3].props('isNegative')
+      el.findAllComponents('[data-j-lume-bar]').at(3).props('isNegative')
     ).toBeFalsy();
     expect(
-      el.findAllComponents('[data-j-lume-bar]')[6].props('isNegative')
+      el.findAllComponents('[data-j-lume-bar]').at(6).props('isNegative')
     ).toBeFalsy();
     expect(
       el
@@ -71,10 +71,10 @@ describe('lume-single-bar-chart.vue', () => {
     ).toHaveLength(numberOfPositiveBars);
     // check -ve bars
     expect(
-      el.findAllComponents('[data-j-lume-bar]')[1].props('isNegative')
+      el.findAllComponents('[data-j-lume-bar]').at(1).props('isNegative')
     ).toBeTruthy();
     expect(
-      el.findAllComponents('[data-j-lume-bar]')[4].props('isNegative')
+      el.findAllComponents('[data-j-lume-bar]').at(4).props('isNegative')
     ).toBeTruthy();
     expect(
       el
@@ -83,7 +83,7 @@ describe('lume-single-bar-chart.vue', () => {
     ).toHaveLength(numberOfNegativeBars);
     // check null bars
     expect(
-      el.findAllComponents('[data-j-lume-bar]')[5].props('isNegative')
+      el.findAllComponents('[data-j-lume-bar]').at(5).props('isNegative')
     ).toBeFalsy();
   });
 

packages/lib/src/components/charts/lume-sparkline-chart/lume-sparkline.spec.ts

@@ -64,7 +64,7 @@ describe('lume-sparkline.vue', () => {
       data: mutatedData,
       labels,
       xScale,
-      options: { ...defaultOptions, showArea: true },
+      options: { showArea: true },
     }).run().wrapper;
 
     const el = wrapper.findComponent(LumeSparkline);

packages/lib/src/components/core/lume-axis/lume-axis.spec.ts

@@ -16,17 +16,16 @@ const scale: Scale = scaleBand<number>()
 describe('lume-axis.vue', () => {
   test('mounts component and sets prop values', () => {
     const wrapper = mount(LumeAxis, {
-      props: {
-        scale,
-      },
+      props: { scale },
+      propsData: { scale },
     });
 
     const el = wrapper.find('[data-j-axis]');
     expect(el.exists()).toBeTruthy();
     const ticks = wrapper.findAll('[data-j-axis__tick]');
     expect(el.exists()).toBeTruthy();
     expect(ticks).toHaveLength(7);
-    expect(wrapper.emitted('mouseover')).toBeFalsy();
+    expect(wrapper.emitted().mouseover).toBeFalsy();
   });
 
   test('mounts component and sets custom value for skip option to false', () => {
@@ -35,6 +34,10 @@ describe('lume-axis.vue', () => {
         scale,
         options: { skip: false },
       },
+      propsData: {
+        scale,
+        options: { skip: false },
+      },
     });
 
     expect(
@@ -51,6 +54,10 @@ describe('lume-axis.vue', () => {
         scale,
         options: { skip },
       },
+      propsData: {
+        scale,
+        options: { skip },
+      },
     });
 
     await nextTick();
@@ -64,31 +71,40 @@ describe('lume-axis.vue', () => {
 
   describe('Events API', () => {
     it('should dispatch `click` if user clicks an axis tick', async () => {
-      const wrapper = mount(LumeAxis, { props: { scale } });
+      const wrapper = mount(LumeAxis, {
+        props: { scale },
+        propsData: { scale },
+      });
 
       const ticks = wrapper.findAll('[data-j-axis__tick=""]');
 
-      await ticks[0].trigger('click');
-      await ticks[3].trigger('click');
+      await ticks.at(0).trigger('click');
+      await ticks.at(3).trigger('click');
 
       expect(wrapper.emitted()).toHaveProperty('click');
       expect(wrapper.emitted().click).toHaveLength(2);
     });
 
     it('should dispatch `mouseenter` if user mouses over an axis tick', async () => {
-      const wrapper = mount(LumeAxis, { props: { scale } });
+      const wrapper = mount(LumeAxis, {
+        props: { scale },
+        propsData: { scale },
+      });
 
       const ticks = wrapper.findAll('[data-j-axis__tick=""]');
 
-      await ticks[0].trigger('mouseenter');
-      await ticks[3].trigger('mouseenter');
+      await ticks.at(0).trigger('mouseenter');
+      await ticks.at(3).trigger('mouseenter');
 
       expect(wrapper.emitted()).toHaveProperty('mouseenter');
       expect(wrapper.emitted().mouseenter).toHaveLength(2);
     });
 
     it('should dispatch `mouseleave` if user moves mouse away from an axis', async () => {
-      const wrapper = mount(LumeAxis, { props: { scale } });
+      const wrapper = mount(LumeAxis, {
+        props: { scale },
+        propsData: { scale },
+      });
 
       await wrapper.trigger('mouseleave');