38 |
54 |
42 | 
52 |
53 |
52 | Loading nested timeline...
;
31 | }
32 |
33 | return (
34 |
5 |
8 |
12 | title
13 |
14 |
17 | content
18 |
19 |
20 |
21 | `;
22 |
--------------------------------------------------------------------------------
/src/components/timeline-elements/timeline-card-content/__tests__/content-header.test.tsx:
--------------------------------------------------------------------------------
1 | import { describe } from 'vitest';
2 | import { customRender } from '../../../common/test';
3 | import { providerProps } from '../../../common/test/index';
4 | import { ContentHeader } from '../content-header';
5 |
6 | describe('Content Header', () => {
7 | // should render the title and subtitle of the card
8 | it('should render the title and subtitle of the card', () => {
9 | const { getByText } = customRender(
10 |
5 |
39 | `;
40 |
41 | exports[`Timeline Card media > should match the snapshot ( VIDEO ) 1`] = `
42 |
9 |
25 |
13 | 
23 |
24 |
29 |
32 |
35 | This is another test
36 |
37 |
38 |
43 |
71 | `;
72 |
--------------------------------------------------------------------------------
/src/components/timeline-elements/timeline-card-media/components/ErrorMessage.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { ErrorMessage as StyledErrorMessage } from '../timeline-card-media.styles';
3 |
4 | interface ErrorMessageProps {
5 | message: string;
6 | }
7 |
8 | /**
9 | * Displays an error message when media fails to load
10 | */
11 | export const LazyErrorMessage = memo(({ message }: ErrorMessageProps) => (
12 |
47 |
56 |
57 |
61 |
64 |
67 | This is another test
68 |
69 |
70 |
5 |
35 | `;
36 |
--------------------------------------------------------------------------------
/src/components/timeline-elements/timeline-card/hooks/useTimelineCard.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
2 | import cls from 'classnames';
3 | import { GlobalContext } from '../../../GlobalContext';
4 |
5 | export const useTimelineCard = ({
6 | active,
7 | autoScroll,
8 | slideShowRunning,
9 | cardLess,
10 | showAllCardsHorizontal,
11 | id,
12 | onClick,
13 | mode,
14 | position,
15 | iconChild,
16 | }) => {
17 | const circleRef = useRef
9 |
34 |
12 |
24 |
25 |
29 |
32 |
33 |
5 |
11 | `;
12 |
--------------------------------------------------------------------------------
/src/components/timeline-elements/timeline-item-title/__tests__/timeline-card-title.test.tsx:
--------------------------------------------------------------------------------
1 | import { waitFor } from '@testing-library/react';
2 | import { describe } from 'vitest';
3 | import { customRender } from '../../../common/test';
4 | import { providerProps } from '../../../common/test/index';
5 | import TimelineItemTitle from '../timeline-card-title';
6 |
7 | describe('Timeline item title', () => {
8 | //should render the title
9 | it('should render the title', () => {
10 | const { getByText } = customRender(
8 | title
9 |
10 |
11 |
24 |
25 |
5 |
10 |
76 |
77 | `;
78 |
--------------------------------------------------------------------------------
/src/components/timeline-vertical/__tests__/timeline-point.test.tsx:
--------------------------------------------------------------------------------
1 | import { TimelinePointModel } from '@models/TimelineVerticalModel';
2 | import { describe, expect, it, vi } from 'vitest';
3 | import { customRender } from '../../common/test';
4 | import { providerProps } from '../../common/test/index';
5 | import { TimelinePoint } from '../timeline-point';
6 |
7 | const commonProps: TimelinePointModel = {
8 | active: false,
9 | alternateCards: false,
10 | cardLess: true,
11 | className: 'test_class_name',
12 | disableClickOnCircle: false,
13 | iconChild: null,
14 | id: '1',
15 | lineWidth: 3,
16 | onActive: vi.fn(),
17 | onClick: vi.fn(),
18 | slideShowRunning: false,
19 | timelinePointDimension: 20,
20 | };
21 |
22 | describe('Timeline point', () => {
23 | // should match the snapshot
24 |
25 | it('Should match snapshot', () => {
26 | const { asFragment } = customRender(
14 |
21 |
18 | vertical item title
19 |
20 |
24 |
31 |
55 |
56 |
61 |
74 |
75 | {item.name}
23 | ))}
24 | Content
46 |
40 | 
41 |
42 |
43 |
44 |
45 |
46 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
47 |
48 |
49 |
50 |
51 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
29 |
30 |
31 |
32 |
33 |
56 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/src/demo/layout.module.scss:
--------------------------------------------------------------------------------
1 | .center-column {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | height: 100%;
6 | }
7 |
8 | .column-left {
9 | display: flex;
10 | flex-direction: column;
11 | justify-content: flex-start;
12 | align-items: flex-start;
13 | height: 100%;
14 | }
15 |
16 | .center {
17 | display: flex;
18 | flex-direction: row;
19 | height: 100%;
20 | }
21 |
22 | .center-left {
23 | display: flex;
24 | flex-direction: row;
25 | justify-content: flex-start;
26 | align-items: center;
27 | height: 100%;
28 | }
29 |
30 | .wrapper {
31 | @extend .center-column;
32 | width: 99%;
33 | min-height: 99vh;
34 | justify-content: flex-start;
35 | margin-left: auto;
36 | margin-right: auto;
37 | }
38 |
39 | .container {
40 | @extend .center;
41 | width: 100%;
42 | align-items: flex-start;
43 | }
44 |
45 | .aside {
46 | @extend .column-left;
47 | width: 300px;
48 | min-height: 500px;
49 | padding: 1rem;
50 | }
51 |
52 | .content {
53 | // @extend .center;
54 | display: flex;
55 | align-items: flex-start;
56 | border-left: 1px solid #ccc;
57 | width: calc(100% - 300px);
58 | justify-content: flex-start;
59 | padding: 1rem;
60 | }
61 |
62 | .header {
63 | height: 100px;
64 | @extend .center-left;
65 | border: 1px solid #ccc;
66 | width: 100%;
67 | padding-left: 1rem;
68 | }
69 |
--------------------------------------------------------------------------------
/src/demo/layout.tsx:
--------------------------------------------------------------------------------
1 | import cls from 'classnames';
2 | import React from 'react';
3 | import { NavLink, Outlet } from 'react-router-dom';
4 | import styles from './layout.module.scss';
5 |
6 | const items = [
7 | { path: '/theme-showcase', label: 'Theme Showcase' },
8 | { path: '/vertical-basic', label: 'Vertical Basic' },
9 | {
10 | path: '/vertical-basic-nested',
11 | label: 'Vertical Basic Nested',
12 | hoverClass: 'hover:bg-blue-600',
13 | },
14 | { path: '/vertical-world-history', label: 'Vertical World History' },
15 | { path: '/vertical-alternating-mixed', label: 'Vertical Alternating Mixed' },
16 | {
17 | path: '/vertical-alternating-nested',
18 | label: 'Vertical Alternating Nested',
19 | },
20 | { path: '/vertical-alternating', label: 'Vertical Alternating' },
21 | { path: '/horizontal', label: 'Horizontal' },
22 | { path: '/horizontal-all', label: 'Horizontal All' },
23 | { path: '/horizontal-initial-select', label: 'Horizontal Initial Select' },
24 | { path: '/vertical-custom', label: 'Vertical Custom' },
25 | { path: '/vertical-custom-icon', label: 'Vertical Custom Icon' },
26 | { path: '/dynamic-load', label: 'Dynamic Load' },
27 | {
28 | path: '/timeline-without-cards',
29 | label: 'Timeline Without Cards (Vertical)',
30 | },
31 | {
32 | path: '/timeline-without-cards-horizontal',
33 | label: 'Timeline Without Cards (Horizontal)',
34 | },
35 | ];
36 |
37 | const Layout = () => {
38 | return (
39 |
57 |
65 |
40 |
50 |
54 |
74 | );
75 | };
76 |
77 | export { Layout };
78 |
--------------------------------------------------------------------------------
/src/examples/basic-horizontal.tsx:
--------------------------------------------------------------------------------
1 | import Chrono from '../components/index';
2 | import timelineData from './data';
3 | import React from 'react';
4 |
5 | export default () => (
6 | 51 | React-Chrono (Kitchen Sink) 52 |
53 |
55 |
69 |
73 |
70 |
72 |
7 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/examples/basic-slideshow.tsx:
--------------------------------------------------------------------------------
1 | import Chrono from '../components/index';
2 | import timelineData from './data';
3 | import React from 'react';
4 |
5 | export default () => (
6 |
7 |
14 | );
15 |
--------------------------------------------------------------------------------
/src/examples/basic-vertical.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Chrono from '../components/index';
3 | import timelineData from './data';
4 |
5 | export default () => (
6 |
7 |
9 | );
10 |
--------------------------------------------------------------------------------
/src/examples/slideshow-with-overall-progress.tsx:
--------------------------------------------------------------------------------
1 | import Chrono from '../components/index';
2 | import timelineData from './data';
3 | import React from 'react';
4 |
5 | export default () => (
6 |
7 |
15 | );
--------------------------------------------------------------------------------
/src/hooks/__tests__/useBackground.test.ts:
--------------------------------------------------------------------------------
1 | import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
2 | import { renderHook } from '@testing-library/react';
3 | import { useBackground } from '../useBackground';
4 | import { hexToRGBA } from '../../utils';
5 |
6 | // Mock the hexToRGBA function
7 | vi.mock('../../utils', () => {
8 | return {
9 | hexToRGBA: vi.fn(() => 'rgba(0,0,0,0.8)'),
10 | };
11 | });
12 |
13 | describe('useBackground', () => {
14 | const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
15 |
16 | beforeEach(() => {
17 | warnSpy.mockClear();
18 | vi.mocked(hexToRGBA).mockClear();
19 | });
20 |
21 | afterEach(() => {
22 | warnSpy.mockReset();
23 | vi.mocked(hexToRGBA).mockReset();
24 | });
25 |
26 | it('returns empty string if no color is provided', () => {
27 | const { result } = renderHook(() => useBackground());
28 | expect(result.current).toBe('');
29 | expect(hexToRGBA).not.toHaveBeenCalled();
30 | });
31 |
32 | it('returns empty string and warns if color is invalid hex', () => {
33 | const { result } = renderHook(() => useBackground('not-a-hex'));
34 | expect(result.current).toBe('');
35 | expect(warnSpy).toHaveBeenCalledWith('Invalid hex color: not-a-hex');
36 | expect(hexToRGBA).not.toHaveBeenCalled();
37 | });
38 |
39 | it('calls hexToRGBA and returns its value for valid hex', () => {
40 | vi.mocked(hexToRGBA).mockReturnValue('rgba(255,255,255,0.8)');
41 | const { result } = renderHook(() => useBackground('#ffffff'));
42 | expect(hexToRGBA).toHaveBeenCalledWith('#ffffff', 0.8);
43 | expect(result.current).toBe('rgba(255,255,255,0.8)');
44 | });
45 |
46 | it('reacts to color and opacity changes', () => {
47 | vi.mocked(hexToRGBA)
48 | .mockReturnValueOnce('rgba(255,0,0,0.5)')
49 | .mockReturnValueOnce('rgba(255,0,0,1)');
50 |
51 | const { result, rerender } = renderHook(
52 | ({ color, opacity }) => useBackground(color, opacity),
53 | {
54 | initialProps: { color: '#ff0000', opacity: 0.5 },
55 | },
56 | );
57 | expect(result.current).toBe('rgba(255,0,0,0.5)');
58 | rerender({ color: '#ff0000', opacity: 1 });
59 | expect(result.current).toBe('rgba(255,0,0,1)');
60 | });
61 | });
62 |
--------------------------------------------------------------------------------
/src/hooks/__tests__/useUIState.test.ts:
--------------------------------------------------------------------------------
1 | import { renderHook, act } from '@testing-library/react';
2 | import { describe, expect, it } from 'vitest';
3 | import { useUIState } from '../useUIState';
4 |
5 | describe('useUIState', () => {
6 | it('should initialize with the provided state', () => {
7 | const { result } = renderHook(() => useUIState