@getsoren/design-system 4.55.0 → 4.56.1

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

@@ -0,0 +1,14 @@
+import { BookingTimelineProps } from './types';
+/**
+ * Rental timeline: a vertical rail carrying the Delivery / Start / End / Retrieval bookends,
+ * with every event of the rental displayed in between on a single line (status flag node,
+ * name, photo pile, declarant avatar, date).
+ *
+ * Purely presentational — dates and labels arrive formatted; the host app adapts its data.
+ * The arrival / departure arrows belong to Delivery / Retrieval: when those bookends are
+ * absent (delivery on the start day / retrieval on the end day, folded into the start / end
+ * anchors) the anchors keep the arrows, otherwise the start shows a play icon and the end
+ * a finish flag.
+ */
+declare const BookingTimeline: ({ start, end, delivery, retrieval, isLoading, emptyMessage, labels, events, "data-test": dataTest, "data-testid": dataTestId, }: BookingTimelineProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default BookingTimeline;

package/dist/src/components/DataDisplay/BookingTimeline/components/Rail.d.ts

@@ -0,0 +1,14 @@
+interface RailSegmentProps {
+    variant: "top" | "mid" | "bottom";
+    /** Vertical bounds of the node within the row: the rail leaves a real gap there instead of
+     * being masked, so it renders correctly on any background colour. */
+    gap: readonly [number, number];
+}
+/** Vertical rail of a node row, interrupted around the node. "top" starts below the node,
+ * "bottom" stops above it, "mid" runs through with a gap. */
+export declare const RailSegment: ({ variant, gap }: RailSegmentProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+/** Empty stretch of rail — adds vertical breathing room while the line runs through. */
+export declare const RailSpacer: ({ height }: {
+    height: number;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/DataDisplay/BookingTimeline/components/TimelineAnchor.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { BookingTimelineAnchor } from '../types';
+interface TimelineAnchorProps {
+    anchor: BookingTimelineAnchor;
+    icon: ReactNode;
+    railVariant: "top" | "mid" | "bottom";
+}
+/** Début / Fin / Livraison / Reprise bookend on the rail: node + overline + title (+ content). */
+declare const TimelineAnchor: ({ anchor, icon, railVariant }: TimelineAnchorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default TimelineAnchor;

package/dist/src/components/DataDisplay/BookingTimeline/components/TimelineEvent.d.ts

@@ -0,0 +1,8 @@
+import { BookingTimelineEvent, BookingTimelineLabels } from '../types';
+interface TimelineEventProps {
+    event: BookingTimelineEvent;
+    labels: BookingTimelineLabels;
+}
+/** Event row: status / icon node on the rail + one-line card (name, photos, avatar, date, chevron). */
+declare const TimelineEvent: ({ event, labels }: TimelineEventProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default TimelineEvent;

package/dist/src/components/DataDisplay/BookingTimeline/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const RAIL_X = 20;
+export declare const ANCHOR_COL = 40;
+export declare const NODE_SIZE = 34;
+export declare const CARD_GAP = 12;
+export declare const ANCHOR_NODE_GAP: readonly [11, number];
+export declare const EVENT_NODE_GAP: readonly [3, number];

package/dist/src/components/DataDisplay/BookingTimeline/index.d.ts

@@ -0,0 +1,3 @@
+import { default as BookingTimeline } from './BookingTimeline';
+export default BookingTimeline;
+export * from './types';

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

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+/**
+ * Built-in UI strings; each falls back to the design-system locale (en/fr) when not overridden.
+ */
+export interface BookingTimelineLabels {
+    /** Status tooltip of a closed event. */
+    closed: string;
+    /** Status tooltip of an open event. */
+    open: string;
+}
+/** Début / Fin / Livraison / Reprise milestone on the rail. */
+export interface BookingTimelineAnchor {
+    /** Small uppercase grey overline above the title (e.g. "Début"). */
+    overline?: string;
+    /** Main line — typically the formatted date (e.g. "Lundi 3 juin"). */
+    title: string;
+    /** Smaller muted text inline after the title (e.g. "(Livraison 8h - 12h)"). */
+    titleSuffix?: string;
+    /** Colours the title in warning (e.g. overdue end date). */
+    warning?: boolean;
+    /** Filled teal node (milestone reached) vs hollow grey ring (still to come). */
+    reached?: boolean;
+    /** Rendered below the title (e.g. the overdue extend / terminate call to action). */
+    content?: ReactNode;
+}
+export interface BookingTimelineUser {
+    avatar?: string | null;
+    /** Avatar fallback when there is no image. */
+    initials?: string;
+}
+export interface BookingTimelinePhoto {
+    src: string;
+    name?: string;
+}
+/** One chronological event row between the bookends. */
+export interface BookingTimelineEvent {
+    key: string;
+    /** Event name; may embed custom content (e.g. a coloured quantity delta). */
+    label: ReactNode;
+    /** Plain-text version of the label, shown in the overflow tooltip when the name is truncated. */
+    labelText: string;
+    /** Neutral icon shown on the rail for events without an open/closed status. */
+    icon?: ReactNode;
+    /** Renders the flag status node — green when closed, orange when open — with its tooltip. */
+    status?: "open" | "closed";
+    /** Right-aligned formatted date (e.g. "5 juin"). */
+    date?: string;
+    /** Declarant avatar, next to the date. */
+    user?: BookingTimelineUser;
+    /** Tooltip of the avatar + date cluster (e.g. "Léa Girard · 09:15"). */
+    tooltip?: string;
+    /** Photo thumbnails, stacked as a pile before the avatar. */
+    photos?: BookingTimelinePhoto[];
+    /** Makes the row clickable and shows the chevron. */
+    onClick?: () => void;
+}
+export interface BookingTimelineProps {
+    /** Rental start bookend. */
+    start?: BookingTimelineAnchor;
+    /** Rental end bookend. */
+    end?: BookingTimelineAnchor;
+    /** Delivery bookend above the start — only when it happens on a different day. */
+    delivery?: BookingTimelineAnchor;
+    /** Retrieval bookend below the end — only when it happens on a different day. */
+    retrieval?: BookingTimelineAnchor;
+    /** Chronological events between the bookends. */
+    events?: BookingTimelineEvent[];
+    /** If true, a skeleton loading state is displayed. */
+    isLoading?: boolean;
+    /** Message displayed when there is nothing to show. */
+    emptyMessage?: string;
+    /** Override the built-in labels (e.g. to plug the host app's i18n). */
+    labels?: Partial<BookingTimelineLabels>;
+    /** Data attributes for testing purposes. */
+    "data-test"?: string;
+    /** Data attributes for testing purposes. */
+    "data-testid"?: string;
+}

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

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

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

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

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

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

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

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

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

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

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

@@ -2,11 +2,13 @@ declare const _default: {
     apply: string;
     clickToUpload: string;
     close: string;
+    closed: string;
     day: string;
     escape: string;
     files: string;
     month: string;
     noResult: string;
+    open: string;
     openFullPage: string;
     openFullScreen: string;
     reset: string;

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

@@ -2,11 +2,13 @@ declare const _default: {
     apply: string;
     clickToUpload: string;
     close: string;
+    closed: string;
     day: string;
     escape: string;
     files: string;
     month: string;
     noResult: string;
+    open: string;
     openFullPage: string;
     openFullScreen: string;
     reset: string;

package/dist/src/main.d.ts

@@ -7,6 +7,8 @@ export { default as Avatar } from './components/DataDisplay/Avatar';
 export type { AvatarProps } from './components/DataDisplay/Avatar/Avatar';
 export * from './components/DataDisplay/AvatarAppBar';
 export { default as AvatarAppBar } from './components/DataDisplay/AvatarAppBar';
+export * from './components/DataDisplay/BookingTimeline';
+export { default as BookingTimeline } from './components/DataDisplay/BookingTimeline';
 export * from './components/DataDisplay/Chat/Chat';
 export { default as Chat } from './components/DataDisplay/Chat/Chat';
 export { default as ChatConversationDetail } from './components/DataDisplay/Chat/components/ChatConversationDetail';

package/package.json

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