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

77.22

/src/components/timeline-elements/timeline-control/timeline-control.styles.ts

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

export const ScreenReaderOnly = styled.div`
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
`;

export const TimelineNavWrapper = styled.div<{ theme?: Theme }>`
  border-radius: 8px;
  display: flex;
  list-style: none;
  padding: 0.25rem;
  // box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background: ${(p) => p.theme.toolbarBgColor};
  // border: 1px solid ${(p) => p.theme.toolbarBtnBgColor};
  position: relative;
  z-index: ${zIndex.controls};

  .nav-item {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &.disabled {
      pointer-events: none;
      filter: opacity(0.4);
    }
  }
`;

export const TimelineNavItem = styled.li<{ $disable?: boolean }>`
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  ${(p) =>
    p.$disable
      ? 'pointer-events: none; filter: opacity(0.4);'
      : 'cursor: pointer;'};
`;

export const TimelineNavButton = styled.button<{
  mode?: TimelineMode;
  rotate?: 'TRUE' | 'FALSE';
  theme?: Theme;
  $active?: boolean;
}>`
  align-items: center;
  background: ${(p) => p.theme.toolbarBtnBgColor};
  border-radius: 6px;
  border: 1px solid ${(p) => p.theme.buttonBorderColor ?? 'transparent'};
  color: ${(p) => p.theme.toolbarTextColor ?? p.theme.secondary};
  cursor: pointer;
  display: flex;
  height: 28px;
  justify-content: center;
  margin: 0 0.2rem;
  padding: 0;
  transition:
    background-color 0.2s ease-out,
    transform 0.15s ease-out,
    box-shadow 0.2s ease-out,
    border-color 0.2s ease-out;
  width: 28px;
  box-shadow: 0 1px 1px ${(p) => p.theme.shadowColor ?? 'rgba(0, 0, 0, 0.08)'};

  transform: ${(p) => (p.rotate === 'TRUE' ? 'rotate(90deg)' : 'none')};

  &:hover {
    background: ${(p) =>
      p.theme.buttonHoverBgColor ?? p.theme.toolbarBtnBgColor};
    border-color: ${(p) => p.theme.buttonHoverBorderColor ?? p.theme.primary};
    box-shadow: 0 2px 4px ${(p) => p.theme.shadowColor ?? 'rgba(0, 0, 0, 0.12)'};
    transform: ${(p) => (p.rotate === 'TRUE' ? 'rotate(90deg)' : 'none')}
      translateY(-1px);
  }

  &:active {
    transform: ${(p) => (p.rotate === 'TRUE' ? 'rotate(90deg)' : 'none')}
      scale(0.95);
    background: ${(p) => p.theme.toolbarBtnBgColor};
    box-shadow: inset 0 1px 1px
      ${(p) => p.theme.shadowColor ?? 'rgba(0, 0, 0, 0.1)'};
  }

  ${(p) =>
    p.$active &&
    css`
      background: ${p.theme.darkToggleActiveBgColor ?? p.theme.secondary};
      border-color: ${p.theme.darkToggleActiveBorderColor ?? p.theme.primary};
      box-shadow: 0 0 0 2px
        ${p.theme.darkToggleGlowColor ??
        p.theme.glowColor ??
        'rgba(59, 130, 246, 0.3)'};

      &:hover {
        background: ${p.theme.buttonHoverBgColor ?? p.theme.secondary};
        opacity: 0.9;
        box-shadow:
          0 2px 4px ${p.theme.shadowColor ?? 'rgba(0, 0, 0, 0.12)'},
          0 0 0 2px
            ${p.theme.darkToggleGlowColor ??
            p.theme.glowColor ??
            'rgba(59, 130, 246, 0.4)'};
      }

      svg {
        color: ${p.theme.darkToggleActiveIconColor ??
        p.theme.buttonActiveIconColor ??
        '#fff'};
      }
    `}

  svg {
    width: 75%;
    height: 75%;
    color: ${(p) => p.theme.iconColor ?? p.theme.primary};
    transition: color 0.2s ease-out;
  }
`;

// Control container with improved layout
export const ControlContainer = styled.div<{ theme: Theme }>`
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  background: ${(p) => p.theme.cardBgColor};
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
`;

export const TimelineControlContainer = styled.div`
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0.5rem 0;
  position: relative;
  z-index: ${zIndex.controls};
`;

export const ControlButton = styled.button<{ theme?: Theme }>`
  align-items: center;
  background: ${(p) => p.theme.primary};
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  height: 3em;
  justify-content: center;
  margin-left: 0.5em;
  width: 3em;
  outline: 0;
  color: #fff;

  svg {
    width: 80%;
    height: 80%;
  }
`;

export const MediaToggle = styled(ControlButton)``;

export const ReplayWrapper = styled(ControlButton)``;

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
6	export const ScreenReaderOnly = styled.div`	1✔
7	position: absolute;
8	width: 1px;
9	height: 1px;
10	padding: 0;
11	margin: -1px;
12	overflow: hidden;
13	clip: rect(0, 0, 0, 0);
14	white-space: nowrap;
15	border-width: 0;
16	`;
17
18	export const TimelineNavWrapper = styled.div<{ theme?: Theme }>`	1✔
19	border-radius: 8px;
20	display: flex;
21	list-style: none;
22	padding: 0.25rem;
23	// box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
24	background: ${(p) => p.theme.toolbarBgColor};	1✔
25	// border: 1px solid ${(p) => p.theme.toolbarBtnBgColor};	1✔
26	position: relative;
27	z-index: ${zIndex.controls};	1✔
28
29	.nav-item {
30	padding: 0;
31	display: flex;
32	align-items: center;
33	justify-content: center;
34	cursor: pointer;
35
36	&.disabled {
37	pointer-events: none;
38	filter: opacity(0.4);
39	}
40	}
41	`;
42
43	export const TimelineNavItem = styled.li<{ $disable?: boolean }>`	1✔
44	padding: 0;
45	display: flex;
46	align-items: center;
47	justify-content: center;
48	${(p) =>	1✔
UNCOV 49	p.$disable	×
UNCOV 50	? 'pointer-events: none; filter: opacity(0.4);'	×
51	: 'cursor: pointer;'};	1✔
52	`;
53
54	export const TimelineNavButton = styled.button<{	1✔
55	mode?: TimelineMode;
56	rotate?: 'TRUE' \| 'FALSE';
57	theme?: Theme;
58	$active?: boolean;
59	}>`
60	align-items: center;
61	background: ${(p) => p.theme.toolbarBtnBgColor};	1✔
62	border-radius: 6px;
63	border: 1px solid ${(p) => p.theme.buttonBorderColor ?? 'transparent'};	1✔
64	color: ${(p) => p.theme.toolbarTextColor ?? p.theme.secondary};	1!
65	cursor: pointer;
66	display: flex;
67	height: 28px;
68	justify-content: center;
69	margin: 0 0.2rem;
70	padding: 0;
71	transition:
72	background-color 0.2s ease-out,
73	transform 0.15s ease-out,
74	box-shadow 0.2s ease-out,
75	border-color 0.2s ease-out;
76	width: 28px;
77	box-shadow: 0 1px 1px ${(p) => p.theme.shadowColor ?? 'rgba(0, 0, 0, 0.08)'};	1✔
78
79	transform: ${(p) => (p.rotate === 'TRUE' ? 'rotate(90deg)' : 'none')};	1✔
80
81	&:hover {
82	background: ${(p) =>	1✔
83	p.theme.buttonHoverBgColor ?? p.theme.toolbarBtnBgColor};	1✔
84	border-color: ${(p) => p.theme.buttonHoverBorderColor ?? p.theme.primary};	1✔
85	box-shadow: 0 2px 4px ${(p) => p.theme.shadowColor ?? 'rgba(0, 0, 0, 0.12)'};	1✔
86	transform: ${(p) => (p.rotate === 'TRUE' ? 'rotate(90deg)' : 'none')}	1✔
87	translateY(-1px);
88	}
89
90	&:active {
91	transform: ${(p) => (p.rotate === 'TRUE' ? 'rotate(90deg)' : 'none')}	1✔
92	scale(0.95);
93	background: ${(p) => p.theme.toolbarBtnBgColor};	1✔
94	box-shadow: inset 0 1px 1px
95	${(p) => p.theme.shadowColor ?? 'rgba(0, 0, 0, 0.1)'};	1✔
96	}
97
98	${(p) =>	1✔
99	p.$active &&	64!
UNCOV 100	css`	×
UNCOV 101	background: ${p.theme.darkToggleActiveBgColor ?? p.theme.secondary};	×
102	border-color: ${p.theme.darkToggleActiveBorderColor ?? p.theme.primary};	×
103	box-shadow: 0 0 0 2px
UNCOV 104	${p.theme.darkToggleGlowColor ??	×
UNCOV 105	p.theme.glowColor ??	×
UNCOV 106	'rgba(59, 130, 246, 0.3)'};	×
107
108	&:hover {
UNCOV 109	background: ${p.theme.buttonHoverBgColor ?? p.theme.secondary};	×
110	opacity: 0.9;
111	box-shadow:
UNCOV 112	0 2px 4px ${p.theme.shadowColor ?? 'rgba(0, 0, 0, 0.12)'},	×
113	0 0 0 2px
UNCOV 114	${p.theme.darkToggleGlowColor ??	×
UNCOV 115	p.theme.glowColor ??	×
UNCOV 116	'rgba(59, 130, 246, 0.4)'};	×
117	}
118
119	svg {
UNCOV 120	color: ${p.theme.darkToggleActiveIconColor ??	×
UNCOV 121	p.theme.buttonActiveIconColor ??	×
UNCOV 122	'#fff'};	×
123	}
124	`}	1✔
125
126	svg {
127	width: 75%;
128	height: 75%;
129	color: ${(p) => p.theme.iconColor ?? p.theme.primary};	1✔
130	transition: color 0.2s ease-out;
131	}
132	`;
133
134	// Control container with improved layout
135	export const ControlContainer = styled.div<{ theme: Theme }>`	1✔
136	display: -webkit-box;
137	display: -ms-flexbox;
138	display: flex;
139	-webkit-box-align: center;
140	-ms-flex-align: center;
141	align-items: center;
142	gap: 0.5rem;
143	padding: 0.5rem;
144	background: ${(p) => p.theme.cardBgColor};
145	border-radius: 4px;
146	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
147	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
148	`;
149
150	export const TimelineControlContainer = styled.div`
151	align-items: center;
152	display: flex;
153	justify-content: center;
154	margin: 0.5rem 0;
155	position: relative;
156	z-index: ${zIndex.controls};
157	`;
158		1✔
159	export const ControlButton = styled.button<{ theme?: Theme }>`	1✔
160	align-items: center;
161	background: ${(p) => p.theme.primary};
162	border-radius: 50%;
163	cursor: pointer;
164	display: flex;
165	height: 3em;
166	justify-content: center;
167	margin-left: 0.5em;
168	width: 3em;
169	outline: 0;
170	color: #fff;
171
172	svg {
173	width: 80%;	1✔
174	height: 80%;
175	}
176	`;
177
178	export const MediaToggle = styled(ControlButton)``;
179
180	export const ReplayWrapper = styled(ControlButton)``;

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