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

83.15

/src/components/timeline/timeline.style.ts

import { Theme } from '@models/Theme';
import { TimelineMode } from '@models/TimelineModel';
import styled, { css } from 'styled-components';
import { zIndex } from '../../styles/z-index';
import { ScrollBar } from '../common/styles';

// CSS transform and animation fallbacks
const getTransform = (transform?: string) => transform || 'none';

const transitionMixin = css`
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
`;

// Timeline wrapper with improved cross-browser support
export const Wrapper = styled.div<{
  cardPositionHorizontal?: 'TOP' | 'BOTTOM';
  theme?: Theme;
  $translate?: string;
}>`
  -webkit-transform: ${props => getTransform(props.$translate)};
  -moz-transform: ${props => getTransform(props.$translate)};
  -ms-transform: ${props => getTransform(props.$translate)};
  transform: ${props => getTransform(props.$translate)};
  ${transitionMixin}
  display: flex;
  flex-direction: column;
  /* cannot remove this */
  height: 100%;
  z-index: ${zIndex.timelineCard - 2}; /* Base z-index for timeline */

  &:focus {
    outline: 0;
  }

  overflow: hidden;
  position: relative;
  width: 100%;

  &.horizontal {
    justify-content: flex-start;
  }

  &.js-focus-visible :focus:not(.focus-visible) {
    /* outline: 0; */
  }

  &.js-focus-visible .focus-visible {
    outline: 2px solid #528deb;
  }
`;

export const TimelineMainWrapper = styled.div<{
  $scrollable?: boolean | { scrollbar: boolean };
  mode?: TimelineMode;
  position?: 'top' | 'bottom';
  theme?: Theme;
}>`
  align-items: flex-start;
  display: flex;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  ${(p) => (p.mode === 'HORIZONTAL' ? 'position: relative' : '')};
  scroll-behavior: smooth;
  width: 100%;
  background-color: ${(p) => p.theme?.timelineBgColor || 'transparent'};
  /* order: ${(p) => (p.position === 'top' ? 1 : 0)}; */
  background: transparent;
  F ${ScrollBar} &.horizontal {
    min-height: 150px;
  }

  padding: ${({ $scrollable }) => (!$scrollable ? '0 1rem 0' : '')};
`;

export const TimelineMain = styled.div`
  position: absolute;
  top: 50%;
  left: 0;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
  transform: translate(0, -50%);

  &.vertical {
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
  }
`;

export const Outline = styled.div<{ color?: string; height?: number }>`
  position: absolute;
  right: 0;
  left: 0;
  width: 100%;
  height: ${(p) => `${p.height}px`};
  margin-right: auto;
  margin-left: auto;
  background: ${(p) => p.color};
`;

export const TimelineControlContainer = styled.div<{
  active?: boolean;
  mode?: TimelineMode;
}>`
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;

  filter: ${(p) => {
    if (p.active) {
      return `opacity(1);`;
    } else {
      return `opacity(0.9);`;
    }
  }};

  &.hide {
    visibility: hidden;
  }

  &.show {
    visibility: visible;
  }
`;

export const TimelineContentRender = styled.div<{ $showAllCards?: boolean }>`
  display: flex;
  align-items: flex-start;
  justify-content: ${(p) => (p.$showAllCards ? 'flex-start' : 'center')};
  width: 98%;
  margin-right: auto;
  margin-left: auto;
  overflow-x: hidden;
`;

export const ToolbarWrapper = styled.div<{ position: 'top' | 'bottom' }>`
  display: flex;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  width: 100%;
  padding: 0;
  margin: ${(p) => (p.position === 'top' ? '0 0 20px 0' : '20px 0 0 0')};
  order: ${(p) => (p.position === 'top' ? 0 : 1)};
  z-index: ${zIndex.controls - 1}; /* Below controls but above base timeline */
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
`;

export const ExtraControls = styled.ul<{
  $hide: boolean;
  $slideShowRunning: boolean;
}>`
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0.1rem;
  visibility: ${(p) => (p.$hide ? 'hidden' : 'visible')};
  flex-shrink: 0;
`;

export const ExtraControlChild = styled.li`
  display: flex;
  margin: 0.5rem 0;
  margin-right: 0.5rem;
`;

export const SearchWrapper = styled.div<{ theme?: Theme }>`
  display: flex;
  align-items: center;
  background-color: ${(p) => p.theme?.toolbarBtnBgColor};
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
  border: 1px solid ${(p) => p.theme?.buttonBorderColor};
  flex-grow: 1;
  max-width: 400px;
  margin: 0 1rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

  &:focus-within {
    border-color: ${(p) => p.theme?.primary};
    box-shadow: 0 0 0 2px ${(p) => p.theme?.glowColor};
  }
`;

export const SearchInput = styled.input<{ theme?: Theme }>`
  flex-grow: 1;
  border: none;
  outline: none;
  background: transparent;
  color: ${(p) => p.theme?.toolbarTextColor};
  font-size: 0.9rem;
  padding: 0.4rem 0.5rem;

  &::placeholder {
    color: ${(p) => p.theme?.toolbarTextColor};
    opacity: 0.6;
  }

  &::-webkit-search-cancel-button {
    appearance: none;
    height: 10px;
    width: 10px;
    margin-left: 0.2rem;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" fill="%23${(
      p,
    ) =>
      p.theme?.toolbarTextColor?.substring(
        1,
      )}"><path d=\"M.7.7l8.6 8.6M9.3.7L.7 9.3\" stroke=\"%23${(p) =>
      p.theme?.toolbarTextColor?.substring(1)}\" stroke-width=\"1.5\"/></svg>');
    cursor: pointer;
    opacity: 0.6;
    &:hover {
      opacity: 1;
    }
  }
`;

export const SearchInfo = styled.span<{ theme?: Theme }>`
  font-size: 0.8rem;
  color: ${(p) => p.theme?.toolbarTextColor};
  opacity: 0.8;
  margin: 0 0.5rem;
  white-space: nowrap;
`;

1	import { Theme } from '@models/Theme';
2	import { TimelineMode } from '@models/TimelineModel';
3	import styled, { css } from 'styled-components';	1✔
4	import { zIndex } from '../../styles/z-index';	1✔
5	import { ScrollBar } from '../common/styles';	1✔
6
7	// CSS transform and animation fallbacks
8	const getTransform = (transform?: string) => transform \|\| 'none';	1✔
9
10	const transitionMixin = css`	1✔
11	-webkit-transition: all 0.2s ease;
12	-moz-transition: all 0.2s ease;
13	-ms-transition: all 0.2s ease;
14	-o-transition: all 0.2s ease;
15	transition: all 0.2s ease;
16	`;
17
18	// Timeline wrapper with improved cross-browser support
19	export const Wrapper = styled.div<{	1✔
20	cardPositionHorizontal?: 'TOP' \| 'BOTTOM';
21	theme?: Theme;
22	$translate?: string;
23	}>`
24	-webkit-transform: ${props => getTransform(props.$translate)};	1✔
25	-moz-transform: ${props => getTransform(props.$translate)};	1✔
26	-ms-transform: ${props => getTransform(props.$translate)};	1✔
27	transform: ${props => getTransform(props.$translate)};	1✔
28	${transitionMixin}	1✔
29	display: flex;
30	flex-direction: column;
31	/* cannot remove this */
32	height: 100%;
33	z-index: ${zIndex.timelineCard - 2}; /* Base z-index for timeline */	1✔
34
35	&:focus {
36	outline: 0;
37	}
38
39	overflow: hidden;
40	position: relative;
41	width: 100%;
42
43	&.horizontal {
44	justify-content: flex-start;
45	}
46
47	&.js-focus-visible :focus:not(.focus-visible) {
48	/* outline: 0; */
49	}
50
51	&.js-focus-visible .focus-visible {
52	outline: 2px solid #528deb;
53	}
54	`;
55
56	export const TimelineMainWrapper = styled.div<{	1✔
57	$scrollable?: boolean \| { scrollbar: boolean };
58	mode?: TimelineMode;
59	position?: 'top' \| 'bottom';
60	theme?: Theme;
61	}>`
62	align-items: flex-start;
63	display: flex;
64	justify-content: center;
65	overflow-y: auto;
66	overflow-x: hidden;
67	overscroll-behavior: contain;
68	${(p) => (p.mode === 'HORIZONTAL' ? 'position: relative' : '')};	1✔
69	scroll-behavior: smooth;
70	width: 100%;
71	background-color: ${(p) => p.theme?.timelineBgColor \|\| 'transparent'};	1!
72	/* order: ${(p) => (p.position === 'top' ? 1 : 0)}; */	1!
73	background: transparent;
74	F ${ScrollBar} &.horizontal {	1✔
75	min-height: 150px;
76	}
77
78	padding: ${({ $scrollable }) => (!$scrollable ? '0 1rem 0' : '')};	1!
79	`;
80
81	export const TimelineMain = styled.div`	1✔
82	position: absolute;
83	top: 50%;
84	left: 0;
85	display: flex;
86	align-items: center;
87	transition: all 0.2s ease;
88	transform: translate(0, -50%);
89
90	&.vertical {
91	align-items: flex-start;
92	justify-content: flex-start;
93	width: 100%;
94	height: 100%;
95	}
96	`;
97
98	export const Outline = styled.div<{ color?: string; height?: number }>`	1✔
99	position: absolute;
100	right: 0;
101	left: 0;
102	width: 100%;
103	height: ${(p) => `${p.height}px`};	1✔
104	margin-right: auto;
105	margin-left: auto;
106	background: ${(p) => p.color};	1✔
107	`;
108
109	export const TimelineControlContainer = styled.div<{	1✔
110	active?: boolean;
111	mode?: TimelineMode;
112	}>`
113	display: flex;
114	align-items: center;
115	justify-content: center;
116	min-height: 3rem;
117
118	filter: ${(p) => {	1✔
UNCOV 119	if (p.active) {	×
120	return `opacity(1);`;	×
121	} else {	×
122	return `opacity(0.9);`;	×
123	}	×
124	}};	×
125
126	&.hide {
127	visibility: hidden;
128	}
129
130	&.show {
131	visibility: visible;
132	}
133	`;
134
135	export const TimelineContentRender = styled.div<{ $showAllCards?: boolean }>`	1✔
136	display: flex;
137	align-items: flex-start;
138	justify-content: ${(p) => (p.$showAllCards ? 'flex-start' : 'center')};	1!
139	width: 98%;
140	margin-right: auto;
141	margin-left: auto;
142	overflow-x: hidden;
143	`;
144
145	export const ToolbarWrapper = styled.div<{ position: 'top' \| 'bottom' }>`	1✔
146	display: flex;
147	font-weight: bold;
148	text-align: center;
149	text-decoration: none;
150	border-radius: 6px;
151	width: 100%;
152	padding: 0;
153	margin: ${(p) => (p.position === 'top' ? '0 0 20px 0' : '20px 0 0 0')};	1!
154	order: ${(p) => (p.position === 'top' ? 0 : 1)};	1!
155	z-index: ${zIndex.controls - 1}; /* Below controls but above base timeline */	1✔
156	align-items: center;
157	justify-content: space-between;
158	gap: 1rem;
159	`;
160
161	export const ExtraControls = styled.ul<{	1✔
162	$hide: boolean;
163	$slideShowRunning: boolean;
164	}>`
165	display: flex;
166	align-items: center;
167	list-style: none;
168	margin: 0;
169	padding: 0.1rem;
170	visibility: ${(p) => (p.$hide ? 'hidden' : 'visible')};	1!
171	flex-shrink: 0;
172	`;
173
174	export const ExtraControlChild = styled.li`	1✔
175	display: flex;
176	margin: 0.5rem 0;
177	margin-right: 0.5rem;
178	`;
179
180	export const SearchWrapper = styled.div<{ theme?: Theme }>`	1✔
181	display: flex;
182	align-items: center;
183	background-color: ${(p) => p.theme?.toolbarBtnBgColor};	1✔
184	padding: 0.1rem 0.5rem;
185	border-radius: 6px;
186	border: 1px solid ${(p) => p.theme?.buttonBorderColor};	1✔
187	flex-grow: 1;
188	max-width: 400px;
189	margin: 0 1rem;
190	transition:
191	border-color 0.2s ease,
192	box-shadow 0.2s ease;
193
194	&:focus-within {
195	border-color: ${(p) => p.theme?.primary};	1✔
196	box-shadow: 0 0 0 2px ${(p) => p.theme?.glowColor};	1✔
197	}
198	`;
199
200	export const SearchInput = styled.input<{ theme?: Theme }>`	1✔
201	flex-grow: 1;
202	border: none;
203	outline: none;
204	background: transparent;
205	color: ${(p) => p.theme?.toolbarTextColor};	1✔
206	font-size: 0.9rem;
207	padding: 0.4rem 0.5rem;
208
209	&::placeholder {
210	color: ${(p) => p.theme?.toolbarTextColor};	1✔
211	opacity: 0.6;
212	}
213
214	&::-webkit-search-cancel-button {
215	appearance: none;
216	height: 10px;
217	width: 10px;
218	margin-left: 0.2rem;
219	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" fill="%23${(	1✔
220	p,	7✔
221	) =>
222	p.theme?.toolbarTextColor?.substring(	7!
223	1,	7✔
224	)}"><path d=\"M.7.7l8.6 8.6M9.3.7L.7 9.3\" stroke=\"%23${(p) =>	1✔
225	p.theme?.toolbarTextColor?.substring(1)}\" stroke-width=\"1.5\"/></svg>');	1!
226	cursor: pointer;
227	opacity: 0.6;
228	&:hover {
229	opacity: 1;
230	}
231	}
232	`;
233
234	export const SearchInfo = styled.span<{ theme?: Theme }>`	1✔
235	font-size: 0.8rem;
236	color: ${(p) => p.theme?.toolbarTextColor};	1✔
237	opacity: 0.8;
238	margin: 0 0.5rem;
239	white-space: nowrap;
240	`;

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