Updated js dependencies to modern versions

.gitignore

@@ -10,3 +10,5 @@ node_modules
 __*
 _site
 out
+dist/
+package-lock.json

package.json

@@ -1,9 +1,9 @@
 {
-  "devDependencies": {
-    "lerna": "^2.0.0"
-  },
   "scripts": {
     "postinstall": "lerna bootstrap",
     "test": "lerna run test"
+  },
+  "devDependencies": {
+    "lerna": "^8.1.8"
   }
 }

packages/zeitline-react/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

packages/zeitline-react/jest.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  // moduleNameMapper: {
+  //   '\\.(css|less)$': 'identity-obj-proxy', // If you are using CSS modules
+  // },
+};

packages/zeitline-react/jest.setup.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

packages/zeitline-react/package.json

@@ -14,19 +14,10 @@
     "build": "nwb build-react-component",
     "clean": "nwb clean-module && nwb clean-demo",
     "start": "nwb serve-react-demo",
-    "test": "nwb test-react",
+    "test": "jest",
     "test:coverage": "nwb test-react --coverage",
     "test:watch": "nwb test-react --server"
   },
-  "peerDependencies": {
-    "react": "15.x"
-  },
-  "devDependencies": {
-    "nwb": "0.18.x",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
-    "zeitline": "^0.1.1"
-  },
   "author": "",
   "homepage": "",
   "license": "MIT",
@@ -37,5 +28,19 @@
   "keywords": [
     "zeitline",
     "react-component"
-  ]
+  ],
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "zeitline": "file:../zeitline"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.0.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0"
+  }
 }

packages/zeitline-react/src/index.js

@@ -1,20 +1,19 @@
-import React, {Component} from 'react'
-import { Timeline } from 'zeitline';
+import React, { Component } from "react";
+import { Timeline } from "zeitline";
 
 // Zeitline component
 export default class extends Component {
-
   constructor(props) {
     super(props);
 
-    this.state = {conf: {}};
+    this.state = { conf: {} };
   }
 
   componentDidMount() {
     this.t = new Timeline({
       selector: this.timelineSvg,
       ...this.props,
-      ...this.state.conf
+      ...this.state.conf,
     });
 
     this.t.render();
@@ -36,7 +35,9 @@ export default class extends Component {
         className="Zeitline"
         width={width || 500}
         height={height || 100}
-        ref={(svg) => {this.timelineSvg = svg;}}
+        ref={(svg) => {
+          this.timelineSvg = svg;
+        }}
       ></svg>
     );
   }

packages/zeitline-react/tests/index.test.js

@@ -0,0 +1,79 @@
+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+// import "@testing-library/jest-dom/extend-expect";
+import Zeitline from "../src";
+
+// import React from "react";
+// import { render, unmountComponentAtNode } from "react-dom";
+// import { render as rtlRender, cleanup } from "@testing-library/react";
+// import "@testing-library/jest-dom/extend-expect";
+// import Zeitline from "src/";
+
+describe("Zeitline", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("has an svg node", () => {
+    const { container } = render(<Zeitline />);
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+
+  it("has two events", () => {
+    const { container } = render(
+      <Zeitline
+        data={[
+          { date: new Date("30 Jun 2017"), label: "first" },
+          { date: new Date("10 Jul 2017"), label: "second" },
+        ]}
+      />
+    );
+    expect(container.querySelectorAll(".event-group").length).toEqual(2);
+  });
+
+  it("has no more svg node after unmount", () => {
+    const { container, unmount } = render(<Zeitline />);
+    unmount();
+    expect(container.innerHTML).toEqual("");
+  });
+});
+
+// import expect from 'expect'
+// import React from 'react'
+// import {render, unmountComponentAtNode} from 'react-dom'
+
+// import Zeitline from 'src/'
+
+// describe('Zeitline', () => {
+//   let node
+
+//   beforeEach(() => {
+//     node = document.createElement('div')
+//   })
+
+//   afterEach(() => {
+//     unmountComponentAtNode(node)
+//   })
+
+//   it('have a svg node', () => {
+//     render(<Zeitline/>, node, () => {
+//       expect(node.innerHTML).toContain('svg')
+//     })
+//   })
+
+//   it('have two events', () => {
+//     render(<Zeitline data={[
+//       {date: new Date('30 Jun 2017'), label: 'first'},
+//       {date: new Date('10 Jul 2017'), label: 'second'},
+//     ]}/>, node, () => {
+//       expect(node.querySelectorAll('.event-group').length).toEqual(2)
+//     })
+//   })
+
+//   it('have no more svg node', () => {
+//     render(<Zeitline/>, node, () => {
+//       unmountComponentAtNode(node);
+//       expect(node.innerHTML).toEqual('')
+//     })
+//   })
+// })

packages/zeitline/.babelrc

@@ -1,3 +1,4 @@
 {
-  "plugins": ["transform-object-rest-spread"]
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-object-rest-spread"]
 }