prabhuignoto / react-chrono / #92

Committed 18 Jun 2025 10:08AM UTC coverage: 90.727% (+0.9%) from 89.791%

Build # #92

Build Type

push

Committed by

Commit Message

Minor cleanup and expanding test coverage (#548)

* refactor: rename project to React Chrono UI and update related files

* fix: update tsconfig to reference the correct entry file for React Chrono UI

* feat: enhance styles with vendor prefixes and improve cross-browser support

* Add tests for useNewScrollPosition hook and TimelineHorizontal component

- Implement comprehensive tests for the useNewScrollPosition hook covering horizontal, vertical, and edge cases.
- Create a new test file for the TimelineHorizontal component, ensuring it renders correctly and handles various props and states.
- Update snapshots for timeline control and vertical components to reflect recent changes in class names.
- Modify vitest configuration to include all test files in the src directory.

* refactor: simplify transform handling in timeline styles

* refactor: clean up test imports and remove unused styles in timeline components

Run Details

1783 of 2112 branches covered (84.42%)

Branch coverage included in aggregate %.

670 of 674 new or added lines in 12 files covered. (99.41%)

400 existing lines in 29 files now uncovered.

10564 of 11497 relevant lines covered (91.88%)

10.09 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

73.61

/src/components/timeline-vertical/timeline-vertical.styles.ts

import { Theme } from '@models/Theme'; // Assuming Theme model path
import { TimelineMode } from '@models/TimelineModel'; // Assuming TimelineModel path
import styled, { css, keyframes } from 'styled-components';
import { zIndex } from '../../styles/z-index';

/**
 * Main container for the entire vertical timeline component.
 */
export const TimelineVerticalWrapper = styled.div`
  display: flex;
  flex-direction: column; /* Stack items vertically */
  width: 100%;
  padding: 0.25rem; /* Small padding around the timeline */
  outline: 0; /* Remove default outline */
  position: relative; /* Establish positioning context */
`;

/**
 * Keyframes for the fade-in animation of timeline items.
 */
const animateVisible = keyframes`
  from {
    opacity: 0;
    visibility: hidden; /* Start hidden */
  }
  to {
    opacity: 1;
    visibility: visible; /* Fade to visible */
  }
`;

/**
 * Props for the VerticalItemWrapper component.
 */
interface VerticalItemWrapperProps {
  /** Controls layout for alternating cards mode. */
  $alternateCards?: boolean;
  /** Explicit height for the card content area. */
  $cardHeight?: number; // Note: Consider if this prop is truly needed or if height should be intrinsic
  /** Style adjustments for items without card content. */
  $cardLess?: boolean;
  /** Indicates if the item is part of a nested timeline structure. */
  $isNested?: boolean;
  /** Theme object for styling. */
  theme?: Theme;
}

/**
 * Wrapper for a single timeline item (row), containing title, point, and content.
 * Handles visibility animation and basic layout.
 */
export const VerticalItemWrapper = styled.li<VerticalItemWrapperProps>`
  display: flex;
  position: relative;
  visibility: hidden; /* Initially hidden for animation */
  width: 100%;
  align-items: stretch; /* Stretch children vertically */
  justify-content: center; /* Center items horizontally */
  z-index: ${zIndex.timelineCard - 1}; /* Just below the card but above the lines */
  margin: 1rem 0; /* Vertical spacing between items */
  list-style: none; /* Remove default list styling */

  /* Alignment adjustments based on side (used in non-alternating modes) */
  &.left {
    margin-right: auto; /* Align left */
  }
  &.right {
    margin-left: auto; /* Align right */
  }

  /* Class added when the item should become visible */
  &.visible {
    visibility: visible;
    /* Consider adding animation here if needed, though content animates */
  }

  /* Styling for nested timelines */
  ${(p) =>
    p.$isNested && // Apply only if $isNested is true
    css`
      position: relative;

      /* Vertical connector line for nested items */
      &:not(:last-child)::after {
        content: '';
        position: absolute;
        width: 2px; /* Line width */
        height: 2rem; /* Connector height */
        background: ${p.theme?.primary ?? '#007bff'};
        left: 50%;
        transform: translateX(-50%);
        bottom: -2rem; /* Position below the item */
      }
    `}
`;

/**
 * Props for the TimelineCardContentWrapper component.
 */
interface TimelineCardContentWrapperProps {
  /** Controls layout for alternating cards mode. */
  $alternateCards?: boolean;
  /** Style adjustments for items without card content. */
  $cardLess?: boolean;
  /** Reverses the order of elements (content/point/title). */
  $flip?: boolean;
  /** Flag for mobile-specific styling adjustments. */
  $isMobile?: boolean;
  /** Indicates if the timeline item has no title, affecting layout. */
  $noTitle?: boolean;
  /** Explicit height for the card content area. */
  height?: number; // Consider if this should be min-height or if height is necessary
}

/**
 * Wrapper for the main content card of a timeline item.
 * Handles width, alignment, order, and visibility animation based on props.
 */
export const TimelineCardContentWrapper = styled.div<TimelineCardContentWrapperProps>`
  visibility: hidden; /* Initially hidden for animation */
  position: relative;
  display: flex;
  align-items: center; /* Vertically center content */

  /* --- Width Calculation --- */
  ${(p) => {
    // Alternating mode: Takes up ~half the space minus the point/title areas
    if (p.$alternateCards) {
      return `width: ${p.$isMobile ? '75%;' : '37.5%;'}`;
    }
    // No title mode: Takes up most of the space
    else if (p.$noTitle) {
      return `width: 95%;`;
    }
    // Default vertical mode: Takes up space minus the title area
    else {
      return `width: ${p.$isMobile ? '75%;' : '85%;'}`;
    }
  }}

  /* --- Order and Justification (Standard Layout) --- */
  ${(p) =>
    !p.$flip && // Apply only if NOT flipped
    css`
      &.left {
        order: 1; /* Content first */
        justify-content: flex-end; /* Align card content to the right (towards center) */
      }
      &.right {
        order: 3; /* Content last */
        justify-content: flex-start; /* Align card content to the left (towards center) */
      }
    `}

  /* --- Order and Justification (Flipped Layout) --- */
  ${(p) =>
    p.$flip && // Apply only if flipped
    css`
      justify-content: flex-end; /* Always align card content to the right */
      &.left {
        order: 3; /* Content last */
      }
      &.right {
        order: 1; /* Content first */
      }
    `}

  /* --- Visibility Animation --- */
  &.visible {
    visibility: visible;
    animation: ${animateVisible} 0.25s ease-in; /* Apply fade-in animation */
  }
`;

/**
 * Props for the TimelineTitleWrapper component.
 */
interface TimelineTitleWrapperProps {
  /** Controls layout for alternating cards mode. */
  $alternateCards?: boolean;
  /** Reverses the order of elements. */
  $flip?: boolean;
  /** Hides the title visually. */
  $hide?: boolean;
  /** Current timeline mode (e.g., VERTICAL, VERTICAL_ALTERNATING). */
  mode?: TimelineMode;
}

/**
 * Wrapper for the title/date section of a timeline item.
 * Handles width, alignment, and order based on props and mode.
 */
export const TimelineTitleWrapper = styled.div<TimelineTitleWrapperProps>`
  align-items: center; /* Vertically center title content */
  display: ${(p) =>
    p.$hide && p.mode === 'VERTICAL'
      ? 'none'
      : 'flex'}; /* Hide only if $hide and mode is VERTICAL */

  /* --- Width Calculation --- */
  width: ${(p) =>
    p.$alternateCards
      ? '37.5%' /* Takes up space in alternating mode */
      : '10%'}; /* Smaller width in standard vertical mode */

  /* --- Prevent text overflow from affecting layout --- */
  min-width: 0; /* Allow flex items to shrink below their content size */
  overflow: hidden; /* Hide overflowing content */

  /* --- Order and Justification --- */
  &.left {
    /* Justification depends on whether layout is flipped */
    justify-content: ${(p) => (p.$flip ? 'flex-end' : 'flex-start')};
    /* Order depends on flip status and mode */
    order: ${(p) => (p.$flip && p.mode === 'VERTICAL_ALTERNATING' ? '1' : '3')};
  }

  &.right {
    /* Justification depends on whether layout is flipped */
    justify-content: ${(p) => (p.$flip ? 'flex-start' : 'flex-end')};
    /* Order depends on flip status and mode */
    order: ${(p) => (p.$flip && p.mode === 'VERTICAL_ALTERNATING' ? '3' : '1')};
  }
`;

1	import { Theme } from '@models/Theme'; // Assuming Theme model path
2	import { TimelineMode } from '@models/TimelineModel'; // Assuming TimelineModel path
3	import styled, { css, keyframes } from 'styled-components';	1✔
4	import { zIndex } from '../../styles/z-index';	1✔
5
6	/**
7	* Main container for the entire vertical timeline component.
8	*/
9	export const TimelineVerticalWrapper = styled.div`	1✔
10	display: flex;
11	flex-direction: column; /* Stack items vertically */
12	width: 100%;
13	padding: 0.25rem; /* Small padding around the timeline */
14	outline: 0; /* Remove default outline */
15	position: relative; /* Establish positioning context */
16	`;
17
18	/**
19	* Keyframes for the fade-in animation of timeline items.
20	*/
21	const animateVisible = keyframes`	1✔
22	from {
23	opacity: 0;
24	visibility: hidden; /* Start hidden */
25	}
26	to {
27	opacity: 1;
28	visibility: visible; /* Fade to visible */
29	}
30	`;
31
32	/**
33	* Props for the VerticalItemWrapper component.
34	*/
35	interface VerticalItemWrapperProps {
36	/** Controls layout for alternating cards mode. */
37	$alternateCards?: boolean;
38	/** Explicit height for the card content area. */
39	$cardHeight?: number; // Note: Consider if this prop is truly needed or if height should be intrinsic
40	/** Style adjustments for items without card content. */
41	$cardLess?: boolean;
42	/** Indicates if the item is part of a nested timeline structure. */
43	$isNested?: boolean;
44	/** Theme object for styling. */
45	theme?: Theme;
46	}
47
48	/**
49	* Wrapper for a single timeline item (row), containing title, point, and content.
50	* Handles visibility animation and basic layout.
51	*/
52	export const VerticalItemWrapper = styled.li<VerticalItemWrapperProps>`	1✔
53	display: flex;
54	position: relative;
55	visibility: hidden; /* Initially hidden for animation */
56	width: 100%;
57	align-items: stretch; /* Stretch children vertically */
58	justify-content: center; /* Center items horizontally */
59	z-index: ${zIndex.timelineCard - 1}; /* Just below the card but above the lines */	1✔
60	margin: 1rem 0; /* Vertical spacing between items */
61	list-style: none; /* Remove default list styling */
62
63	/* Alignment adjustments based on side (used in non-alternating modes) */
64	&.left {
65	margin-right: auto; /* Align left */
66	}
67	&.right {
68	margin-left: auto; /* Align right */
69	}
70
71	/* Class added when the item should become visible */
72	&.visible {
73	visibility: visible;
74	/* Consider adding animation here if needed, though content animates */
75	}
76
77	/* Styling for nested timelines */
78	${(p) =>	1✔
79	p.$isNested && // Apply only if $isNested is true	26!
UNCOV 80	css`	×
81	position: relative;
82
83	/* Vertical connector line for nested items */
84	&:not(:last-child)::after {
85	content: '';
86	position: absolute;
87	width: 2px; /* Line width */
88	height: 2rem; /* Connector height */
UNCOV 89	background: ${p.theme?.primary ?? '#007bff'};	×
90	left: 50%;
91	transform: translateX(-50%);
92	bottom: -2rem; /* Position below the item */
93	}
94	`}	1✔
95	`;
96
97	/**
98	* Props for the TimelineCardContentWrapper component.
99	*/
100	interface TimelineCardContentWrapperProps {
101	/** Controls layout for alternating cards mode. */
102	$alternateCards?: boolean;
103	/** Style adjustments for items without card content. */
104	$cardLess?: boolean;
105	/** Reverses the order of elements (content/point/title). */
106	$flip?: boolean;
107	/** Flag for mobile-specific styling adjustments. */
108	$isMobile?: boolean;
109	/** Indicates if the timeline item has no title, affecting layout. */
110	$noTitle?: boolean;
111	/** Explicit height for the card content area. */
112	height?: number; // Consider if this should be min-height or if height is necessary
113	}
114
115	/**
116	* Wrapper for the main content card of a timeline item.
117	* Handles width, alignment, order, and visibility animation based on props.
118	*/
119	export const TimelineCardContentWrapper = styled.div<TimelineCardContentWrapperProps>`	1✔
120	visibility: hidden; /* Initially hidden for animation */
121	position: relative;
122	display: flex;
123	align-items: center; /* Vertically center content */
124
125	/* --- Width Calculation --- */
126	${(p) => {	1✔
127	// Alternating mode: Takes up ~half the space minus the point/title areas
128	if (p.$alternateCards) {	26✔
129	return `width: ${p.$isMobile ? '75%;' : '37.5%;'}`;	16!
130	}	16✔
131	// No title mode: Takes up most of the space
132	else if (p.$noTitle) {	10!
UNCOV 133	return `width: 95%;`;	×
UNCOV 134	}	×
135	// Default vertical mode: Takes up space minus the title area
136	else {	10✔
137	return `width: ${p.$isMobile ? '75%;' : '85%;'}`;	10!
138	}	10✔
139	}}	26✔
140
141	/* --- Order and Justification (Standard Layout) --- */
142	${(p) =>	1✔
143	!p.$flip && // Apply only if NOT flipped	26✔
144	css`	26✔
145	&.left {
146	order: 1; /* Content first */
147	justify-content: flex-end; /* Align card content to the right (towards center) */
148	}
149	&.right {
150	order: 3; /* Content last */
151	justify-content: flex-start; /* Align card content to the left (towards center) */
152	}
153	`}	1✔
154
155	/* --- Order and Justification (Flipped Layout) --- */
156	${(p) =>	1✔
157	p.$flip && // Apply only if flipped	26!
UNCOV 158	css`	×
159	justify-content: flex-end; /* Always align card content to the right */
160	&.left {
161	order: 3; /* Content last */
162	}
163	&.right {
164	order: 1; /* Content first */
165	}
166	`}	1✔
167
168	/* --- Visibility Animation --- */
169	&.visible {
170	visibility: visible;
171	animation: ${animateVisible} 0.25s ease-in; /* Apply fade-in animation */	1✔
172	}
173	`;
174
175	/**
176	* Props for the TimelineTitleWrapper component.
177	*/
178	interface TimelineTitleWrapperProps {
179	/** Controls layout for alternating cards mode. */
180	$alternateCards?: boolean;
181	/** Reverses the order of elements. */
182	$flip?: boolean;
183	/** Hides the title visually. */
184	$hide?: boolean;
185	/** Current timeline mode (e.g., VERTICAL, VERTICAL_ALTERNATING). */
186	mode?: TimelineMode;
187	}
188
189	/**
190	* Wrapper for the title/date section of a timeline item.
191	* Handles width, alignment, and order based on props and mode.
192	*/
193	export const TimelineTitleWrapper = styled.div<TimelineTitleWrapperProps>`	1✔
194	align-items: center; /* Vertically center title content */
195	display: ${(p) =>	1✔
196	p.$hide && p.mode === 'VERTICAL'	22!
UNCOV 197	? 'none'	×
198	: 'flex'}; /* Hide only if $hide and mode is VERTICAL */	1✔
199
200	/* --- Width Calculation --- */
201	width: ${(p) =>	1✔
202	p.$alternateCards	22✔
203	? '37.5%' /* Takes up space in alternating mode */	12✔
204	: '10%'}; /* Smaller width in standard vertical mode */	1✔
205
206	/* --- Prevent text overflow from affecting layout --- */
207	min-width: 0; /* Allow flex items to shrink below their content size */
208	overflow: hidden; /* Hide overflowing content */
209
210	/* --- Order and Justification --- */
211	&.left {
212	/* Justification depends on whether layout is flipped */
213	justify-content: ${(p) => (p.$flip ? 'flex-end' : 'flex-start')};	1!
214	/* Order depends on flip status and mode */
215	order: ${(p) => (p.$flip && p.mode === 'VERTICAL_ALTERNATING' ? '1' : '3')};	1!
216	}
217
218	&.right {
219	/* Justification depends on whether layout is flipped */
220	justify-content: ${(p) => (p.$flip ? 'flex-start' : 'flex-end')};	1!
221	/* Order depends on flip status and mode */
222	order: ${(p) => (p.$flip && p.mode === 'VERTICAL_ALTERNATING' ? '3' : '1')};	1!
223	}
224	`;

prabhuignoto / react-chrono / #92

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous