feat: merge changes from production

CHANGELOG.md

@@ -1,10 +1,3 @@
-## [1.0.6](https://github.com/florianbepunkt/timeline/compare/v1.0.5...v1.0.6) (2023-08-13)
-
-
-### Bug Fixes
-
-* **deps:** update dependency ts-pattern to v5 ([92ae091](https://github.com/florianbepunkt/timeline/commit/92ae0910e4ad085b6b1d69d68a3ae5c8152fb3f3))
-
 ## [1.0.5](https://github.com/florianbepunkt/timeline/compare/v1.0.4...v1.0.5) (2023-01-30)
 
 

TODO.md

@@ -1,15 +1,10 @@
-# Bugs
-
-- css bug item title overflow [x]
-- bug: items not visible initially (not in stories, but when importing / using package) []
-- bug: stories in safari do not render timeline at correct position (defaultStart / defaultEnd), Chrome is ok []
 
 # TODO
 
 - css design []
 - header... primary should be a flag not a unit, semantics matter []
 - dissolve \_\_fixtures\_\_ folder []
-- refactor timeline as functional ... end boss style []
+- refactor timeline as functional ... end boss []
 - refactor scroll/ScrollElement as functional (naah, we need to fix the test first) []
 - add living documentation in form of typescript docs and stories []
 

renovate.json

@@ -1,6 +1,6 @@
 {
   "additionalBranchPrefix": "{{parentDir}}-",
-  "automerge": true,
+  "automerge": false,
   "automergeType": "branch",
   "extends": ["config:base", "group:allNonMajor", "schedule:monthly", ":pinDependencies"],
   "labels": ["chore", "dependencies"],

src/headers/sidebar-header.tsx

@@ -28,7 +28,7 @@ type SidebarHeaderChildrenFnProps<Data> = {
 };
 
 const defaultSidebarHeaderChildren = ({ getRootProps }: SidebarHeaderChildrenFnProps<unknown>) => (
-  <div data-testid="sidebarHeader" {...getRootProps({ style: {} })} />
+  <div className="rct-sidebar-header" data-testid="sidebarHeader" {...getRootProps({ style: {} })} />
 );
 
 export const SidebarHeader = <T,>(props: SidebarHeaderProps<T>): JSX.Element => {

src/index.ts

@@ -2,5 +2,6 @@ export { CursorMarker, CustomMarker, NowMarker } from "./markers/index.js";
 export { CustomHeader, DateHeader, SidebarHeader, TimelineHeaders } from "./headers/index.js";
 export { defaultTimeSteps, defaultHeaderFormats } from "./default-config.js";
 export { Timeline, TimelineContext } from "./timeline/index.js";
-export type { Id, TimelineGroupBase, TimelineItemBase } from "./shared-model.js";
+export type { Id, TimelineGroupBase, TimelineItemBase, TimelineItemEdge } from "./shared-model.js";
+export type { ItemRendererProps } from "./items/index.js";
 export type { TimelineProps } from "./timeline/index.js";

src/items/item.tsx

@@ -153,9 +153,13 @@ export const Item = <TGroup extends TimelineGroupBase, TItem extends TimelineIte
 
   const [interactMounted, setInteractMounted] = React.useState(false);
   const [dragging, setDragging] = useRefState(false);
-  const [dragTime, setDragTime] = React.useState<number | null>(null);
-  const [dragGroupDelta, setDragGroupDelta] = useRefState<number | null>(null);
-  const [dragStart, setDragStart] = useRefState<{ x: number; y: number; offset: number } | null>(null);
+
+  // const [dragGroupDelta, setDragGroupDelta] = useRefState<number | null>(null);
+  // const [dragStart, setDragStart] = useRefState<{ x: number; y: number; offset: number } | null>(null);
+  const dragStart = React.useRef<{ x: number; y: number; offset: number } | null>(null);
+  const dragTime = React.useRef<number | null>(null);
+  const dragGroupDelta = React.useRef<number | null>(null);
+  // const [dragTime, setDragTime] = React.useState<number | null>(null);
 
   const [resizing, setResizing] = useRefState(false);
   const [resizeEdge, setResizeEdge] = useRefState<TimelineItemEdge | undefined>(undefined);
@@ -178,7 +182,7 @@ export const Item = <TGroup extends TimelineGroupBase, TItem extends TimelineIte
       const offset = considerOffset ? new Date().getTimezoneOffset() * 60 * 1000 : 0;
       return Math.round(dragTime / dragSnap) * dragSnap - (offset % dragSnap);
     } else {
-      return dragTime;
+      return Math.round(dragTime);
     }
   };
 
@@ -187,7 +191,7 @@ export const Item = <TGroup extends TimelineGroupBase, TItem extends TimelineIte
       const endTime = item.endTime % dragSnap;
       return Math.round((dragTime - endTime) / dragSnap) * dragSnap + endTime;
     } else {
-      return dragTime;
+      return Math.round(dragTime);
     }
   };
 
@@ -243,20 +247,25 @@ export const Item = <TGroup extends TimelineGroupBase, TItem extends TimelineIte
     if (!props.selected) return false;
     const clickTime = timeFor(e);
     setDragging(true);
-    setDragStart({ x: e.pageX, y: e.pageY, offset: item.startTime - clickTime });
-    setDragTime(item.startTime);
-    setDragGroupDelta(0);
+    // setDragStart({ x: e.pageX, y: e.pageY, offset: item.startTime - clickTime });
+    dragStart.current = { x: e.pageX, y: e.pageY, offset: item.startTime - clickTime };
+    dragTime.current = item.startTime;
+    // setDragTime(item.startTime);
+    dragGroupDelta.current = 0;
+    // setDragGroupDelta(0);
     return;
   };
 
   const handleDragMove = (e: DragEvent) => {
     if (!dragging.current) return;
     let newDragTime = getDragTime(e);
-    const dragGroupDelta = getDragGroupDelta(e);
+    const newDragGroupDelta = getDragGroupDelta(e);
     if (props.moveResizeValidator) newDragTime = props.moveResizeValidator("move", item, newDragTime);
-    if (props.onDrag) props.onDrag(item.id, newDragTime, props.order.index + dragGroupDelta);
-    setDragTime(newDragTime);
-    setDragGroupDelta(dragGroupDelta);
+    if (props.onDrag) props.onDrag(item.id, newDragTime, props.order.index + newDragGroupDelta);
+    // setDragTime(newDragTime);
+    dragTime.current = newDragTime;
+    // setDragGroupDelta(newDragGroupDelta);
+    dragGroupDelta.current = newDragGroupDelta;
   };
 
   const handleDragEnd = (e: DragEvent) => {
@@ -267,9 +276,12 @@ export const Item = <TGroup extends TimelineGroupBase, TItem extends TimelineIte
       props.onDrop(item.id, dragTime, props.order.index + getDragGroupDelta(e));
     }
     setDragging(false);
-    setDragStart(null);
-    setDragTime(null);
-    setDragGroupDelta(null);
+    // setDragStart(null);
+    dragStart.current = null;
+    // setDragTime(null);
+    dragTime.current = null;
+    // setDragGroupDelta(null);
+    dragGroupDelta.current = null;
   };
 
   // resize handlers
@@ -279,6 +291,7 @@ export const Item = <TGroup extends TimelineGroupBase, TItem extends TimelineIte
     setResizeEdge(undefined);
     setResizeStart(e.pageX);
     setResizeTime(0);
+    return;
   };
 
   const handleResizeMove = (e: ResizeEvent) => {
@@ -409,7 +422,7 @@ export const Item = <TGroup extends TimelineGroupBase, TItem extends TimelineIte
 
   const getItemProps = (props: Partial<Omit<TimelineItemProps, "key" | "ref">> = {}) => {
     const classNames = "rct-item" + (item.className ? ` ${item.className}` : "");
-    const result: TimelineItemProps & { title: string | undefined } = {
+    const result: TimelineItemProps = {
       className: classNames + ` ${props.className ? props.className : ""}`,
       key: item.id,
       onContextMenu: composeEvents(handleContextMenu, props.onContextMenu),
@@ -420,7 +433,7 @@ export const Item = <TGroup extends TimelineGroupBase, TItem extends TimelineIte
       onTouchStart: composeEvents(onTouchStart, props.onTouchStart),
       ref: _item,
       style: Object.assign({}, getItemStyle(props)),
-      title: item.title,
+      // title: item.title,
     };
     return result;
   };
@@ -456,7 +469,7 @@ export const Item = <TGroup extends TimelineGroupBase, TItem extends TimelineIte
       width: `${dimensions.width}px`,
       height: `${dimensions.height}px`,
       lineHeight: `${dimensions.height}px`,
-      overflow: "hidden"
+      overflow: "hidden",
     };
 
     return Object.assign(
@@ -533,7 +546,7 @@ export const Item = <TGroup extends TimelineGroupBase, TItem extends TimelineIte
     dragging: dragging.current,
     dragGroupDelta: dragGroupDelta.current,
     dragStart: dragStart.current,
-    dragTime: dragTime,
+    dragTime: dragTime.current,
     resizeEdge: resizeEdge.current,
     resizeStart: resizeStart.current,
     resizeTime: resizeTime,

src/items/styles.ts

@@ -1,11 +1,11 @@
 import type { CSSProperties } from "react";
 
 export const overridableStyles: CSSProperties = {
-  fontSize: 12,
+  fontSize: 14,
   color: "white",
   cursor: "pointer",
-  background: "#2196f3",
-  borderColor: "#1a6fb3",
+  background: "var(--mui-palette-primary-600)",
+  borderColor: "var(--mui-palette-primary-900)",
   borderStyle: "solid",
   borderTopWidth: "1px",
   borderBottomWidth: "1px",
@@ -15,9 +15,8 @@ export const overridableStyles: CSSProperties = {
 };
 
 export const selectedStyle: CSSProperties = {
-  background: "#ffc107",
-  borderColor: "#ff9800",
-  // border: "1px solid #ff9800",
+  background: "var(--mui-palette-secondary-main)",
+  borderColor: "var(--mui-palette-secondary-dark)",
   zIndex: 82,
 };
 

src/markers/implementations/cursor-marker.tsx

@@ -16,7 +16,7 @@ export type CursorMarkerProps = { renderer?: MarkerRenderer };
  *  when the user mouseleaves the element
  */
 export const CursorMarker: React.FC<CursorMarkerProps> = ({
-  renderer = createDefaultRenderer("default-cursor-marker"),
+  renderer = createDefaultRenderer("default-cursor-marker", "rct-cursor-marker"),
 }) => {
   const { subscribeToMouseOver } = React.useContext(MarkerCanvasContext);
   const _unsubscribe = React.useRef<null | (() => void)>(null);

src/markers/implementations/custom-marker.tsx

@@ -14,7 +14,7 @@ type CustomMarkerProps = {
 export const CustomMarker: React.FC<CustomMarkerProps> = ({
   date,
   getLeftOffsetFromDate,
-  renderer = createDefaultRenderer("default-customer-marker-id"),
+  renderer = createDefaultRenderer("default-customer-marker-id", "rct-custom-marker"),
 }) => {
   const value = typeof date === "number" ? date : date.valueOf();
   const leftOffset = getLeftOffsetFromDate(value);

src/markers/implementations/now-marker.tsx

@@ -14,7 +14,7 @@ type NowMarkerProps = {
 export const NowMarker: React.FC<NowMarkerProps> = ({
   getLeftOffsetFromDate,
   interval,
-  renderer = createDefaultRenderer("default-today-line"),
+  renderer = createDefaultRenderer("default-today-line", "rct-now-marker"),
 }) => {
   const _intervalToken = React.useRef<NodeJS.Timer | undefined>();
   const [date, setDate] = React.useState(Date.now());

src/markers/implementations/shared.tsx

@@ -5,11 +5,10 @@ import memoize from "memoize-one";
  * Baseline styles to get the marker to render correctly
  */
 const criticalStyles: React.CSSProperties = {
-  backgroundColor: "black",
   bottom: 0,
   position: "absolute",
   top: 0,
-  width: "2px",
+  // width: "2px",
 
   // by default, pointer events (specifically click) will
   // "pass through".  This is added so that CursorMarker
@@ -24,8 +23,8 @@ export const createMarkerStylesWithLeftOffset = memoize(
   })
 );
 
-export const createDefaultRenderer = (dataTestidValue: string) => {
+export const createDefaultRenderer = (dataTestidValue: string, className?: string) => {
   return function DefaultMarkerRenderer({ styles }: { styles: React.CSSProperties }) {
-    return <div style={styles} data-testid={dataTestidValue} />;
+    return <div className={className} style={styles} data-testid={dataTestidValue} />;
   };
 };

src/markers/markers-context.tsx

@@ -42,9 +42,7 @@ export const MarkersProvider: React.FC<MarkersProviderProps> = ({ children }) =>
   };
 
   const updateMarker = (marker: Marker) => {
-    const ix = markers.findIndex(({ id }) => marker.id === id);
-    if (ix < 0) return;
-    setMarkers((curr) => [...curr.slice(0, ix), marker, ...curr.slice(ix + 1)]);
+    setMarkers((curr) => curr.map((m) => m.id == marker.id ? marker : m));
   };
 
   return (

src/markers/markers-renderer.tsx

@@ -12,7 +12,6 @@ import React from "react";
 export const MarkersRenderer: React.FC = () => {
   const { getLeftOffsetFromDate } = React.useContext(TimelineContext);
   const { markers } = React.useContext(MarkersContext);
-
   return (
     <React.Fragment>
       {markers.map((marker) =>