Fixes 1.2 Add missing imports

.babelrc

@@ -1,20 +1,38 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "presets": [
+    "@babel/preset-env",
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
   "plugins": [
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-proposal-object-rest-spread"
+    "@babel/plugin-transform-class-properties",
+    "@babel/plugin-transform-object-rest-spread",
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "runtime": "automatic"
+      }
+    ]
   ],
   "env": {
     "production": {
       "plugins": [
         [
           "react-remove-properties",
           {
-            "properties": ["data-testid"]
+            "properties": [
+              "data-testid"
+            ]
           }
         ]
       ],
-      "ignore": ["src/lib/__tests__/**"]
+      "ignore": [
+        "src/lib/__tests__/**"
+      ]
     }
   }
 }

.eslintrc.json

@@ -0,0 +1,41 @@
+{
+  "env": {
+    "browser": true,
+    "jest/globals": true,
+    "node": true,
+    "es6": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react",
+    "jest",
+    "prettier"
+  ],
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "react/jsx-uses-vars": 2,
+    "react/no-children-prop": 0,
+    "react/no-unused-prop-types": 0,
+    "no-labels": 0,
+    "arrow-parens": 0,
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}

.gitignore

@@ -16,3 +16,4 @@ package-lock.json
 coverage
 
 *.orig
+dist

.prettierrc

@@ -1,4 +1,6 @@
 {
+  "printWidth": 120,
   "singleQuote": true,
-  "semi": false
+  "semi": false,
+  "trailingComma": "all"
 }

CHANGELOG.md

@@ -7,7 +7,25 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+## 0.30.0 (beta)
+Huge update made by @Remco4EF and @remcoblumink
+ * full rewrite to typescript 
+ * uses Vite as bundler
+ * Updates dependencies to latest versions
+ * Updates react usage to 18+
+ * REMOVED enzyme for tests --> testing does not work atm
+
+
+## 0.28.0
+
+* Add unit argument to onZoom and onTimeChange callbacks @hckr #655
 * Add `className` prop to Timeline component to override `react-calendar-timeline` class #682
+* support zoom level seconds #835 @horizon-plaza
+* custom buffer prop (help with controlled scrolling) @Ilaiwi
+* Fix injecting custom vertical line's class names for time periods longer than day @RafikiTiki
+* fix Context Menu unintentionally disabled by default @dsgipe #769
+* delete props `headerLabelFormats` and `subHeaderLabelFormats` not you can pass `formatLabel` function to `DateHeader` with label width and start and end time of intervals
+
 
 ## 0.26.7
 
@@ -49,11 +67,11 @@ Using controlled scroll and react-spring to trigger scrolling and create an anim
 
 * add documentation for `onItemDeselect` #350 @ilaiwi
 * solve a bug where `onItemDeselect` is not triggered as expected for several item clicks #350 @ilaiwi
-* fix row height on browser scaling #615 @gaston-niglia 
+* fix row height on browser scaling #615 @gaston-niglia
 
 ### Packages
 
-update to `[email protected]` for newer versions of node. 
+update to `[email protected]` for newer versions of node.
 
 ## 0.26.2
 
@@ -85,7 +103,7 @@ you can as well solve the issue without upgrading by adding the following style
 
 #### Breaking
 
-* Removed `<InfoLabel />` in favour of allowing for custom component to be rendered on move or resize. Check out the demo in `demo/app/demo-custom-info-label` for an example on how to display your own custom info label or [this example](https://codesandbox.io/s/timeline-demo-info-label-neec9). 
+* Removed `<InfoLabel />` in favour of allowing for custom component to be rendered on move or resize. Check out the demo in `demo/app/demo-custom-info-label` for an example on how to display your own custom info label or [this example](https://codesandbox.io/s/timeline-demo-info-label-neec9).
 
 
 ## 0.25.4
@@ -383,7 +401,7 @@ from 'react-calendar-timeline'
 
 * added `stickyHeader` to disable/enable timeline header sticking on scroll.
 * removed `fullUpdate` prop and functionality. Labels rely on `position: sticky` to show for items that start before `visibleTimeStart`. This (should) greatly improve scroll performance.
-* removed extraneous css such as `text-align: center` on `.rct-item`, `.rct-item-overflow` to simplify the dom structure of `Item.js`
+* removed extraneous css such as `text-align: center` on `.rct-item`, `.rct-item-overflow` to simplify the dom structure of `Item.tsx`
 * added `headerRef` callback to receive a reference to the header element. Due to the change in how the header positioning is implemented (i.e. using `position: sticky`), there is a need to use a polyfill in [certain browsers](https://caniuse.com/#feat=css-sticky) that don't support `position: sticky`. With a reference to the header dom element, you can use a polyfill to apply sticky behavior.
 * `minimumWidthForItemContentVisibility` prop to control at what width inner item content is rendered.
 

README.md

@@ -1,7 +1,28 @@
+
 # React Calendar Timeline
 
 A modern and responsive React timeline component.
 
+**🎉 Version 0.30.0-beta.1 Now Available!**
+
+We're excited to announce the beta release of v0.30.0 which includes:
+- Full TypeScript rewrite
+- Vite as bundler
+- Updated dependencies to latest versions 
+- React 18+ support
+
+The beta version is available via:
+```bash
+npm install react-calendar-timeline@beta
+```
+
+We encourage users to try out the beta and provide feedback before the stable release. Please report any issues on GitHub.
+
+ Note: Testing framework has been updated and some tests are currently being migrated.
+
+# ⚠️⚠️⚠️⚠️ HELP WANTED
+please email me [[email protected]](mailto:[email protected]) and we will setup some time to speak and see if you can help maintain this library.
+
 ![calendar demo](https://raw.githubusercontent.com/namespace-ee/react-calendar-timeline/master/demo.gif)
 
 Checkout the [examples here](https://github.com/namespace-ee/react-calendar-timeline/tree/master/examples)!
@@ -140,6 +161,14 @@ The exact viewport of the calendar. When these are specified, scrolling in the c
 
 **Note that you need to provide either `defaultTimeStart/End` or `visibleTimeStart/End` for the timeline to function**
 
+## buffer
+
+a number (default to 3) which represents the extra timeline rendered on right and lift of the visible area which the user will scroll through before the time rerenders.
+
+more explication in section [behind the scenes](#behind-the-scenes)
+
+Note: setting buffer to 1 will disable the scrolling on the timeline
+
 ## selected
 
 An array with id's corresponding to id's in items (`item.id`). If this prop is set you have to manage the selected items yourself within the `onItemSelect` handler to update the property with new id's and use `onItemDeselect` handler to clear selection. This overwrites the default behaviour of selecting one item on click.
@@ -202,6 +231,7 @@ What percentage of the height of the line is taken by the item? Default `0.65`
 
 Smallest time the calendar can zoom to in milliseconds. Default `60 * 60 * 1000` (1 hour)
 
+__notes__: please note than second won't show up unless you change this to `60 * 1000`
 ## maxZoom
 
 Largest time the calendar can zoom to in milliseconds. Default `5 * 365.24 * 86400 * 1000` (5 years)
@@ -312,7 +342,7 @@ Called when an empty spot on the canvas was double clicked. Get the group ID and
 
 Called when the canvas is clicked by the right button of the mouse. Note: If this property is set the default context menu doesn't appear
 
-## onZoom(timelineContext)
+## onZoom(timelineContext, unit)
 
 Called when the timeline is zoomed, either via mouse/pinch zoom or clicking header to change timeline units
 
@@ -342,7 +372,7 @@ function (action, item, time, resizeEdge) {
 ```
 
 
-## onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas)
+## onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas, unit)
 
 A function that's called when the user tries to scroll. Call the passed `updateScrollCanvas(start, end)` with the updated visibleTimeStart and visibleTimeEnd (as unix timestamps in milliseconds) to change the scroll behavior, for example to limit scrolling.
 
@@ -435,8 +465,8 @@ Rather than applying props on the element yourself and to avoid your props being
   * onTouchEnd: event handler
   * onDoubleClick: event handler
   * onContextMenu: event handler
-  * style: inline object 
-  
+  * style: inline object
+
 
   \*\* _the given styles will only override the styles that are not a requirement for positioning the item. Other styles like `color`, `radius` and others_
 
@@ -915,6 +945,12 @@ by default we provide a responsive format for the dates based on the label width
     mediumLong: 'HH:mm',
     medium: 'HH:mm',
     short: 'mm',
+  },
+  second: {
+    "long": 'mm:ss',
+    mediumLong: 'mm:ss',
+    medium: 'mm:ss',
+    "short": 'ss'
   }
 }
   ```
@@ -1236,6 +1272,8 @@ This results in a visually endless scrolling canvas with optimal performance.
 
 Extensibility and usability: While some parameters (`onTimeChange`, `moveResizeValidator`) might be hard to configure, these are design decisions to make it as extensible as possible. If you have recipes for common tasks regarding those parameters, send a PR to add them to this doc.
 
+Note: 3x can be controlled by changing the buffer
+
 ## Interaction
 
 To interact and navigate within the timeline there are the following options for the user:
@@ -1263,7 +1301,7 @@ $ yarn start
 
 Check http://0.0.0.0:8888/ in your browser and have fun!
 
-Please run `npm run lint` before you send a pull request. `npm run jest` runs the tests.
+Please run `npm run lint` before you send a pull request. `npm run test` runs the jest tests.
 
 <!--
 

__fixtures__/stateAndProps.js

@@ -11,6 +11,7 @@ export const props = {
   itemHeightRatio: 0.75,
   visibleTimeEnd,
   visibleTimeStart,
+  buffer: 3,
 }
 
 export const propsNoStack = {