@getsoren/design-system 4.48.1 → 4.49.0

package/dist/src/components/DataDisplay/Icons/KeyboardArrowLeftRoundedIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const KeyboardArrowLeftRoundedIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default KeyboardArrowLeftRoundedIcon;

package/dist/src/components/DataDisplay/Icons/KeyboardArrowRightRoundedIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const KeyboardArrowRightRoundedIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default KeyboardArrowRightRoundedIcon;

package/dist/src/components/DataDisplay/Icons/KeyboardDoubleArrowLeftRoundedIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const KeyboardDoubleArrowLeftRoundedIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default KeyboardDoubleArrowLeftRoundedIcon;

package/dist/src/components/DataDisplay/Icons/KeyboardDoubleArrowRightRoundedIcon.d.ts

@@ -0,0 +1,3 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const KeyboardDoubleArrowRightRoundedIcon: (props: SvgIconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default KeyboardDoubleArrowRightRoundedIcon;

package/dist/src/components/DataDisplay/PlanningTimeline/PlanningTimeline.d.ts

@@ -0,0 +1,3 @@
+import { PlanningTimelineProps, PlanningTimelineTask } from './types';
+declare const PlanningTimeline: <T extends PlanningTimelineTask>({ tasks, isLoading, onClick, onBarResize, renderRow, renderBar, renderTooltip, isTaskSelected, recenterKey, sidebarTitle, locale, labels, defaultViewMode, localStorageKeys, sidebarWidth, rowHeight, }: PlanningTimelineProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default PlanningTimeline;

package/dist/src/components/DataDisplay/PlanningTimeline/components/TaskBar.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { PlanningTimelineBarContext, PlanningTimelineTask } from '../types';
+import { TimeScale } from '../utils/timeScale';
+interface TaskBarProps<T extends PlanningTimelineTask> {
+    /**
+     * The task row this bar represents — its start/end drive the bar geometry, its statusColor the
+     * hue, and its overdue/plannedEnd/incidents the hatched overlays.
+     */
+    task: T;
+    /**
+     * The active time scale — converts the task dates to px (position/width) and the dragged px back
+     * to a date on resize.
+     */
+    scale: TimeScale;
+    /**
+     * Row height in px; the bar fills it minus a vertical padding.
+     */
+    rowHeight: number;
+    /**
+     * Whether the left column is collapsed — forwarded to `renderBar` so the bar can surface the
+     * identity the sidebar no longer shows.
+     */
+    sidebarCollapsed: boolean;
+    /**
+     * Highlight the bar (e.g. its detail view is open).
+     */
+    selected?: boolean;
+    /**
+     * Click on the bar (not fired for the click ending a resize).
+     */
+    onClick?: (task: T) => void;
+    /**
+     * Drag of the right-edge handle committed — `newEnd` is the date matching the new width. Omitting
+     * it hides the handle and disables resizing.
+     */
+    onBarResize?: (task: T, newEnd: Date) => void;
+    /**
+     * Inner content of the bar.
+     */
+    renderBar?: (task: T, context: PlanningTimelineBarContext) => ReactNode;
+    /**
+     * Content of the tooltip shown while hovering the bar; nothing is shown when omitted.
+     */
+    renderTooltip?: (task: T) => ReactNode;
+}
+declare const TaskBar: <T extends PlanningTimelineTask>({ task, scale, rowHeight, sidebarCollapsed, selected, onClick, onBarResize, renderBar, renderTooltip, }: TaskBarProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default TaskBar;

package/dist/src/components/DataDisplay/PlanningTimeline/components/TimelineHeader.d.ts

@@ -0,0 +1,20 @@
+import { TimeScale } from '../utils/timeScale';
+interface TimelineHeaderProps {
+    /**
+     * The active time scale (range, zoom, ticks) — the header draws one cell per minor/major tick and
+     * positions them with its px converters.
+     */
+    scale: TimeScale;
+    /**
+     * Total header height in px, split in two: major groupings (month/year) on the top half, minor
+     * cells (day/week/month) on the bottom half.
+     */
+    height: number;
+    /**
+     * The focus date (from the toolbar nav) — its minor cell is emphasised so navigation is visible.
+     */
+    selectedDate?: Date;
+}
+/** Two-tier time axis: major groupings (month/year) on top, minor cells (day/week/month) below. */
+declare const TimelineHeader: ({ scale, height, selectedDate }: TimelineHeaderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default TimelineHeader;

package/dist/src/components/DataDisplay/PlanningTimeline/hooks/useBarDrag.d.ts

@@ -0,0 +1,24 @@
+import { PointerEvent as ReactPointerEvent } from 'react';
+interface UseBarDragOptions {
+    /** Called on pointer-up with the horizontal drag distance in px (only when it actually moved). */
+    onCommit: (deltaPx: number) => void;
+    disabled?: boolean;
+}
+interface UseBarDragResult {
+    /** Live horizontal delta (px) while dragging, 0 otherwise — add it to the bar width for a live preview. */
+    deltaPx: number;
+    dragging: boolean;
+    /** Spread onto the right-edge drag handle element. */
+    handleProps: {
+        onPointerDown: (event: ReactPointerEvent) => void;
+        onPointerMove: (event: ReactPointerEvent) => void;
+        onPointerUp: (event: ReactPointerEvent) => void;
+        onPointerCancel: (event: ReactPointerEvent) => void;
+    };
+}
+/**
+ * Native pointer-events drag for resizing a bar's right edge. Uses setPointerCapture so the gesture
+ * keeps tracking even when the pointer leaves the thin handle — no third-party drag lib needed.
+ */
+export declare const useBarDrag: ({ onCommit, disabled }: UseBarDragOptions) => UseBarDragResult;
+export {};

package/dist/src/components/DataDisplay/PlanningTimeline/types.d.ts

@@ -0,0 +1,98 @@
+import { ReactNode } from 'react';
+import { ViewMode } from './utils/timeScale';
+export type PlanningTimelineViewMode = ViewMode;
+export type PlanningTimelineTaskType = "task" | "project";
+/** MUI palette color driving a bar's hue; "default" renders muted (grey). */
+export type PlanningTimelineStatusColor = "default" | "error" | "info" | "success" | "warning";
+/** An incident (e.g. a breakdown) rendered as a hatched day-wide segment on the bar. */
+export interface PlanningTimelineIncident {
+    incidentDate: string | Date;
+}
+/**
+ * A timeline row. A "project" row is a group header (collapsible), a "task" row is a bar on the
+ * time axis. Extend this interface to attach your own domain data and get it back, typed, in every
+ * render prop and callback.
+ */
+export interface PlanningTimelineTask {
+    id: string;
+    type: PlanningTimelineTaskType;
+    name: string;
+    start: Date;
+    end: Date;
+    /** For project rows: whether its children rows are collapsed. */
+    hideChildren?: boolean;
+    /** For task rows: id of the parent project (group) row. */
+    project?: string;
+    /** Incidents rendered as red hatched day-wide segments on the bar. */
+    incidents?: PlanningTimelineIncident[];
+    /** Original planned end (before any overdue extension of `end`). */
+    plannedEnd?: Date;
+    /** Task past its planned end — the segment `plannedEnd` → `end` is hatched in warning. */
+    overdue?: boolean;
+    /** MUI palette color of the bar. @default "default" */
+    statusColor?: PlanningTimelineStatusColor;
+    /** For project (group header) rows: number of task rows in the group. */
+    childCount?: number;
+    /** For project rows: the group's data is being fetched. */
+    loading?: boolean;
+}
+/** Context given to `renderRow` for a left-column cell. */
+export interface PlanningTimelineRowContext<T extends PlanningTimelineTask = PlanningTimelineTask> {
+    /** Forwarded `onClick` — call it to make the whole cell clickable like the bar. */
+    onJump: (task: T) => void;
+    selected: boolean;
+    sidebarCollapsed: boolean;
+}
+/** Context given to `renderBar` for a bar's inner content. */
+export interface PlanningTimelineBarContext {
+    sidebarCollapsed: boolean;
+}
+/** localStorage keys used to persist the timeline UI preferences. */
+export interface PlanningTimelineLocalStorageKeys {
+    /** Key storing the selected view mode. @default "soren-planning-timeline-view-mode" */
+    viewMode: string;
+}
+/** Built-in UI strings; each falls back to the design-system locale (en/fr) when not overridden. */
+export interface PlanningTimelineLabels {
+    day: string;
+    week: string;
+    month: string;
+    year: string;
+    today: string;
+    noResult: string;
+}
+export interface PlanningTimelineProps<T extends PlanningTimelineTask = PlanningTimelineTask> {
+    tasks?: T[];
+    isLoading?: boolean;
+    /** Click a bar — e.g. open the row's detail view. */
+    onClick?: (task: T) => void;
+    /** Drag the right edge of a bar — extend the task to `newEnd`. Omit to disable resizing. */
+    onBarResize?: (task: T, newEnd: Date) => void;
+    /** Left-column cell renderer (group header or task row). Defaults to the task name. */
+    renderRow?: (task: T, context: PlanningTimelineRowContext<T>) => ReactNode;
+    /** Inner content of a bar. Defaults to the task name. */
+    renderBar?: (task: T, context: PlanningTimelineBarContext) => ReactNode;
+    renderTooltip?: (task: T) => ReactNode;
+    /** Whether a task row is the currently selected one (e.g. its detail view is open). */
+    isTaskSelected?: (task: T) => boolean;
+    /** Opaque value that changes when filters change — the timeline re-centres on today when it does. */
+    recenterKey?: string;
+    /** Title of the left (frozen) column, also used as the collapse button tooltip. */
+    sidebarTitle?: string;
+    /** BCP 47 locale for the axis and toolbar date labels (e.g. "fr"). @default "en" */
+    locale?: string;
+    /** Override the built-in labels (e.g. to plug the host app's i18n). */
+    labels?: Partial<PlanningTimelineLabels>;
+    /** Initial zoom level, when none is persisted yet. @default "day" */
+    defaultViewMode?: PlanningTimelineViewMode;
+    /**
+     * localStorage keys used to persist UI preferences. Override them to namespace the keys per
+     * screen/app so timelines don't share their saved view.
+     * @default { viewMode: "soren-planning-timeline-view-mode" }
+     */
+    localStorageKeys?: Partial<PlanningTimelineLocalStorageKeys>;
+    /** Width (px) of the left column. @default 300 */
+    sidebarWidth?: number;
+    /** Height (px) of every row. @default 56 */
+    rowHeight?: number;
+}

package/dist/src/components/DataDisplay/PlanningTimeline/utils/timeScale.d.ts

@@ -0,0 +1,77 @@
+/** Zoom level of the timeline. Each mode is just a different px-per-day and tick granularity. */
+export type ViewMode = "day" | "week" | "month" | "year";
+export declare const MS_PER_DAY: number;
+/**
+ * Horizontal zoom per mode. Bar geometry is always computed in px-per-day, so switching mode only
+ * rescales the same linear axis — it never changes the bar maths (avoids variable-width month columns).
+ */
+export declare const PX_PER_DAY: Record<ViewMode, number>;
+export interface DateRange {
+    start: Date;
+    end: Date;
+}
+/** A single header cell (a day/week/month for the minor row, a month/year for the major row). */
+export interface Tick {
+    key: string;
+    /** Left offset in px from the range start. */
+    x: number;
+    /** Cell width in px. */
+    width: number;
+    label: string;
+}
+export interface TimeScale {
+    mode: ViewMode;
+    rangeStart: Date;
+    rangeEnd: Date;
+    pxPerDay: number;
+    /** Total timeline width in px. */
+    width: number;
+    /** Map a date to its x offset (px) from the range start. */
+    dateToX: (date: Date | number) => number;
+    /** Inverse of `dateToX`. */
+    xToDate: (x: number) => Date;
+    ticks: {
+        minor: Tick[];
+        major: Tick[];
+    };
+}
+/** Local-midnight start of the given day. */
+export declare const startOfDay: (date: Date | number) => Date;
+/** Last millisecond of the given day (23:59:59.999, local time). */
+export declare const endOfDay: (date: Date | number) => Date;
+export declare const startOfMonth: (date: Date | number) => Date;
+export declare const startOfYear: (date: Date | number) => Date;
+export declare const addDays: (date: Date | number, days: number) => Date;
+/** Add calendar months, clamping to the last day of the target month (Jan 31 + 1 month → Feb 28/29). */
+export declare const addMonths: (date: Date | number, months: number) => Date;
+/** Step a date by one `mode` unit (toolbar prev/next arrows). */
+export declare const addViewModeStep: (date: Date, direction: 1 | -1, mode: ViewMode) => Date;
+/** Toolbar label for the focused date: "05 Jan 2026" (day/week), "January 2026" (month), "2026" (year). */
+export declare const formatViewDateLabel: (date: Date, mode: ViewMode, locale?: string) => string;
+/**
+ * Compute the visible date span: from the earliest start to the latest end, padded on both sides.
+ * The end always keeps at least `horizonMonths` of runway after today, so a rental can be dragged /
+ * extended well into the future even when every loaded booking ends sooner. Invalid dates (NaN) are
+ * ignored — a single corrupt row must not poison the whole axis. Falls back to a window around today
+ * when no valid date remains.
+ */
+export declare const computeRange: (tasks: {
+    start: Date;
+    end: Date;
+}[], padDays?: number, horizonMonths?: number) => DateRange;
+/** Map a date to its x offset (px) from `rangeStart`, at ms precision. */
+export declare const dateToX: (date: Date | number, rangeStart: Date | number, pxPerDay: number) => number;
+/** Inverse of `dateToX`: map an x offset (px) back to a date. */
+export declare const xToDate: (x: number, rangeStart: Date | number, pxPerDay: number) => Date;
+/** Snap a date to the nearest day boundary (midnight) — used when committing a dragged bar end. */
+export declare const snapDateToDay: (date: Date | number) => Date;
+/** Build the two-tier header ticks (minor cells + their major groupings) for the given range and mode. */
+export declare const getTicks: (rangeStart: Date, rangeEnd: Date, mode: ViewMode, locale?: string) => {
+    minor: Tick[];
+    major: Tick[];
+};
+/** Build the full scale (range, zoom, width, converters, ticks) for a set of rows in a given mode. */
+export declare const createTimeScale: (tasks: {
+    start: Date;
+    end: Date;
+}[], mode: ViewMode, locale?: string, padDays?: number) => TimeScale;

package/dist/src/locales/en.d.ts

@@ -1,8 +1,14 @@
 declare const _default: {
     apply: string;
     clickToUpload: string;
+    day: string;
     files: string;
+    month: string;
+    noResult: string;
     reset: string;
     selectAll: string;
+    today: string;
+    week: string;
+    year: string;
 };
 export default _default;

package/dist/src/locales/fr.d.ts

@@ -1,8 +1,14 @@
 declare const _default: {
     apply: string;
     clickToUpload: string;
+    day: string;
     files: string;
+    month: string;
+    noResult: string;
     reset: string;
     selectAll: string;
+    today: string;
+    week: string;
+    year: string;
 };
 export default _default;

package/dist/src/main.d.ts

@@ -27,6 +27,8 @@ export * from './components/DataDisplay/ListItemCard';
 export { default as ListItemCard } from './components/DataDisplay/ListItemCard';
 export * from './components/DataDisplay/Logo';
 export { default as Logo } from './components/DataDisplay/Logo';
+export { default as PlanningTimeline } from './components/DataDisplay/PlanningTimeline/PlanningTimeline';
+export * from './components/DataDisplay/PlanningTimeline/types';
 export * from './components/DataDisplay/StatusIcon';
 export { default as StatusIcon } from './components/DataDisplay/StatusIcon';
 export * from './components/DataDisplay/TimeLine';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@getsoren/design-system",
   "description": "Design System React library",
   "sideEffects": false,
-  "version": "4.48.1",
+  "version": "4.49.0",
   "license": "ISC",
   "type": "module",
   "types": "./dist/src/main.d.ts",