prabhuignoto / react-chrono / #94

Committed 21 Jun 2025 07:36PM UTC coverage: 90.669% (-0.06%) from 90.727%

Build # #94

Build Type

push

Committed by

Commit Message

refactor: fix package name from react-chrono-ui to react-chrono (#551)

- Updated package name in package.json and related paths.
- Adjusted size limits for the new package name.
- Modified rollup configuration to reflect the new input file name.
- Created a new test file for the Chrono component and its TimelineItem type.
- Updated context providers and hooks to use the new uniqueId.
- Adjusted snapshot tests to match updated class names and structure.
- Refactored timeline component to generate IDs with the new package name.
- Added a new entry point file for the renamed package.
- Updated z-index comments to reflect the new package name.
- Adjusted TypeScript configuration to point to the new entry file.

Run Details

1776 of 2104 branches covered (84.41%)

Branch coverage included in aggregate %.

8 of 8 new or added lines in 6 files covered. (100.0%)

15 existing lines in 4 files now uncovered.

10535 of 11474 relevant lines covered (91.82%)

10.1 hits per line

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

91.34

/src/components/timeline-elements/timeline-card-media/timeline-card-media.tsx

import { CardMediaModel } from '@models/TimelineMediaModel';
import cls from 'classnames';
import React, { memo, useCallback, useContext } from 'react';
import { GlobalContext } from '../../GlobalContext';
import { MediaWrapper } from './timeline-card-media.styles';
import { useMediaLoad } from './hooks/useMediaLoad';
import { useYouTubeDetection } from './hooks/useYouTubeDetection';
import { useToggleControls } from './hooks/useToggleControls';
import { useViewOptions } from './hooks/useViewOptions';
import { MediaContent } from './components/MediaContent';
import { ContentDisplay } from './components/ContentDisplay';

/**
 * CardMedia component - A highly optimized component for media rendering in timeline cards
 */
const CardMedia: React.FunctionComponent<CardMediaModel> = memo(
  ({
    active,
    id,
    onMediaStateChange,
    title,
    content,
    media,
    slideshowActive,
    url,
    detailsText,
  }: CardMediaModel) => {
    // Custom hooks for state management
    const { loadFailed, mediaLoaded, handleMediaLoaded, handleError } =
      useMediaLoad(id, onMediaStateChange);
    const isYouTube = useYouTubeDetection(media.source.url);
    const { expandDetails, showText, toggleExpand, toggleText } =
      useToggleControls();

    // Get context
    const {
      mode,
      fontSizes,
      classNames,
      mediaHeight,
      borderLessCards,
      textOverlay,
      theme,
      cardHeight,
      mediaSettings,
    } = useContext(GlobalContext);

    // Use view options hook for calculated values
    const {
      canShowTextMemo,
      canShowTextContent,
      canExpand,
      gradientColor,
      canShowGradient,
      getCardHeight,
    } = useViewOptions({
      showText,
      expandDetails,
      textOverlay,
      detailsText,
      title,
      content,
      theme,
      cardHeight,
      mediaHeight,
    });

    // Cast mode to TimelineMode
    const timelineMode = mode;

    // Details text callback
    const onDetailsTextRef = useCallback((height?: number) => {
      if (height) {
        // Do something with height if needed
      }
    }, []);

    return (
      <>
        <MediaWrapper
          theme={theme}
          $active={active}
          mode={timelineMode}
          $slideShowActive={slideshowActive}
          className={cls('card-media-wrapper', classNames?.cardMedia)}
          $cardHeight={getCardHeight}
          align={mediaSettings?.align}
          $textOverlay={textOverlay}
        >
          <MediaContent
            media={media}
            isYouTube={isYouTube}
            loadFailed={loadFailed}
            mediaLoaded={mediaLoaded}
            active={active}
            id={id}
            mediaHeight={mediaHeight}
            mode={timelineMode}
            borderLessCards={borderLessCards}
            mediaSettings={mediaSettings}
            handleMediaLoaded={handleMediaLoaded}
            handleError={handleError}
            onMediaStateChange={onMediaStateChange}
          />
        </MediaWrapper>

        {canShowTextContent && (
          <ContentDisplay
            mode={timelineMode}
            textOverlay={textOverlay}
            theme={theme}
            expandDetails={expandDetails}
            showText={showText}
            canExpand={canExpand}
            canShowGradient={canShowGradient}
            gradientColor={gradientColor}
            title={title}
            active={active}
            url={url}
            fontSizes={fontSizes}
            classNames={classNames}
            toggleText={toggleText}
            toggleExpand={toggleExpand}
            content={content}
            canShowTextMemo={canShowTextMemo}
            detailsText={detailsText}
            onDetailsTextRef={onDetailsTextRef}
          />
        )}
      </>
    ) as React.ReactElement;
  },
  (prevProps, nextProps) => {
    // Custom comparison function to avoid unnecessary re-renders
    return (
      prevProps.active === nextProps.active &&
      prevProps.slideshowActive === nextProps.slideshowActive &&
      prevProps.paused === nextProps.paused &&
      prevProps.startWidth === nextProps.startWidth &&
      prevProps.remainInterval === nextProps.remainInterval &&
      JSON.stringify(prevProps.theme) === JSON.stringify(nextProps.theme)
    );
  },
);

CardMedia.displayName = 'Card Media';

export default CardMedia;

1	import { CardMediaModel } from '@models/TimelineMediaModel';
2	import cls from 'classnames';	1✔
3	import React, { memo, useCallback, useContext } from 'react';	1✔
4	import { GlobalContext } from '../../GlobalContext';	1✔
5	import { MediaWrapper } from './timeline-card-media.styles';	1✔
6	import { useMediaLoad } from './hooks/useMediaLoad';	1✔
7	import { useYouTubeDetection } from './hooks/useYouTubeDetection';	1✔
8	import { useToggleControls } from './hooks/useToggleControls';	1✔
9	import { useViewOptions } from './hooks/useViewOptions';	1✔
10	import { MediaContent } from './components/MediaContent';	1✔
11	import { ContentDisplay } from './components/ContentDisplay';	1✔
12
13	/**
14	* CardMedia component - A highly optimized component for media rendering in timeline cards
15	*/
16	const CardMedia: React.FunctionComponent<CardMediaModel> = memo(	1✔
17	({	1✔
18	active,	18✔
19	id,	18✔
20	onMediaStateChange,	18✔
21	title,	18✔
22	content,	18✔
23	media,	18✔
24	slideshowActive,	18✔
25	url,	18✔
26	detailsText,	18✔
27	}: CardMediaModel) => {	18✔
28	// Custom hooks for state management
29	const { loadFailed, mediaLoaded, handleMediaLoaded, handleError } =	18✔
30	useMediaLoad(id, onMediaStateChange);	18✔
31	const isYouTube = useYouTubeDetection(media.source.url);	18✔
32	const { expandDetails, showText, toggleExpand, toggleText } =	18✔
33	useToggleControls();	18✔
34
35	// Get context
36	const {	18✔
37	mode,	18✔
38	fontSizes,	18✔
39	classNames,	18✔
40	mediaHeight,	18✔
41	borderLessCards,	18✔
42	textOverlay,	18✔
43	theme,	18✔
44	cardHeight,	18✔
45	mediaSettings,	18✔
46	} = useContext(GlobalContext);	18✔
47
48	// Use view options hook for calculated values
49	const {	18✔
50	canShowTextMemo,	18✔
51	canShowTextContent,	18✔
52	canExpand,	18✔
53	gradientColor,	18✔
54	canShowGradient,	18✔
55	getCardHeight,	18✔
56	} = useViewOptions({	18✔
57	showText,	18✔
58	expandDetails,	18✔
59	textOverlay,	18✔
60	detailsText,	18✔
61	title,	18✔
62	content,	18✔
63	theme,	18✔
64	cardHeight,	18✔
65	mediaHeight,	18✔
66	});	18✔
67
68	// Cast mode to TimelineMode
69	const timelineMode = mode;	18✔
70
71	// Details text callback
72	const onDetailsTextRef = useCallback((height?: number) => {	18✔
UNCOV 73	if (height) {	×
74	// Do something with height if needed
75	}	×
76	}, []);	18✔
77
78	return (	18✔
79	<>	18✔
80	<MediaWrapper	18✔
81	theme={theme}	18✔
82	$active={active}	18✔
83	mode={timelineMode}	18✔
84	$slideShowActive={slideshowActive}	18✔
85	className={cls('card-media-wrapper', classNames?.cardMedia)}	18✔
86	$cardHeight={getCardHeight}	18✔
87	align={mediaSettings?.align}	18!
88	$textOverlay={textOverlay}	18✔
89	>
90	<MediaContent	18✔
91	media={media}	18✔
92	isYouTube={isYouTube}	18✔
93	loadFailed={loadFailed}	18✔
94	mediaLoaded={mediaLoaded}	18✔
95	active={active}	18✔
96	id={id}	18✔
97	mediaHeight={mediaHeight}	18✔
98	mode={timelineMode}	18✔
99	borderLessCards={borderLessCards}	18✔
100	mediaSettings={mediaSettings}	18✔
101	handleMediaLoaded={handleMediaLoaded}	18✔
102	handleError={handleError}	18✔
103	onMediaStateChange={onMediaStateChange}	18✔
104	/>	18✔
105	</MediaWrapper>	18✔
106
107	{canShowTextContent && (	18✔
108	<ContentDisplay	14✔
109	mode={timelineMode}	14✔
110	textOverlay={textOverlay}	14✔
111	theme={theme}	14✔
112	expandDetails={expandDetails}	14✔
113	showText={showText}	14✔
114	canExpand={canExpand}	14✔
115	canShowGradient={canShowGradient}	14✔
116	gradientColor={gradientColor}	14✔
117	title={title}	14✔
118	active={active}	14✔
119	url={url}	14✔
120	fontSizes={fontSizes}	14✔
121	classNames={classNames}	14✔
122	toggleText={toggleText}	14✔
123	toggleExpand={toggleExpand}	14✔
124	content={content}	14✔
125	canShowTextMemo={canShowTextMemo}	14✔
126	detailsText={detailsText}	14✔
127	onDetailsTextRef={onDetailsTextRef}	14✔
128	/>	14✔
129	)}
130	</>	18✔
131	) as React.ReactElement;
132	},	18✔
133	(prevProps, nextProps) => {	1✔
134	// Custom comparison function to avoid unnecessary re-renders
135	return (	×
136	prevProps.active === nextProps.active &&	×
137	prevProps.slideshowActive === nextProps.slideshowActive &&	×
138	prevProps.paused === nextProps.paused &&	×
139	prevProps.startWidth === nextProps.startWidth &&	×
140	prevProps.remainInterval === nextProps.remainInterval &&	×
141	JSON.stringify(prevProps.theme) === JSON.stringify(nextProps.theme)	×
142	);
143	},	×
144	);	1✔
145
146	CardMedia.displayName = 'Card Media';	1✔
147
148	export default CardMedia;	1✔

prabhuignoto / react-chrono / #94

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