Search and UX Improvements (#528)

## Updates & Enhancements

We've been busy improving the timeline component! Here are some of the highlights from recent development efforts:

* **Search Functionality Added:** You can now easily find specific content within the timeline items using the new search bar in the toolbar. Navigate between results with dedicated "previous" and "next" buttons.
* **Improved Styling & Appearance:** The timeline has a more polished and consistent look. We've refined the styling of cards, navigation elements, and list items for better readability and visual appeal.
* **Enhanced Accessibility:** We've made significant strides in making the timeline more accessible. This includes better screen reader support, improved keyboard navigation, clearer focus indicators, and enhanced ARIA attributes.
* **Better Media Handling:** The component now includes improved support for displaying various media types (images, videos, and YouTube videos) within timeline cards, with dedicated components for a smoother experience.
* **Added Animations:** Subtle ripple and pulse animations have been added to timeline points to provide visual feedback and enhance interactivity.
* **Smoother Slideshow:** The slideshow functionality has been optimized using `requestAnimationFrame` for smoother transitions and better performance.
* **Under-the-Hood Improvements:** We've extensively refactored the codebase for better organization, maintainability, performance, and type safety. This includes streamlining logic, optimizing event handling, and cleaning up code.
* **Bug Fixes:** Addressed visual issues such as color contrast in dark mode and preventing content overflow in cards.

These updates aim to provide a more functional, aesthetically pleasing, accessible, and performant timeline experience.

Author: prabhuignoto

.stylelintrc

@@ -1,12 +1,5 @@
 {
-  "processors": [
-    "stylelint-processor-styled-components"
-  ],
-  "plugins": [
-    "stylelint-order"
-  ],
-  "extends": [
-    "stylelint-config-styled-components",
-    "stylelint-config-recess-order"
-  ]
-}
+  "customSyntax": "postcss-styled-syntax",
+  "rules": {},
+  "ignoreFiles": ["node_modules/**/*", "dist/**/*"]
+}

.vscode/settings.json

@@ -11,6 +11,6 @@
   ],
   "sonarlint.connectedMode.project": {
     "connectionId": "prabhuignoto",
-    "projectKey": "prabhuignoto"
+    "projectKey": "prabhuignoto_react-chrono"
   }
 }

README.md

@@ -65,6 +65,7 @@
   - [🎨Theme](#theme)
   - [Customize Font sizes](#customize-font-sizes)
   - [Customize alt text for buttons](#customize-alt-text-for-buttons)
+  - [Search Functionality](#search-functionality)
 - [Using custom class names](#using-custom-class-names)
 - [📦CodeSandbox Examples](#codesandbox-examples)
 - [Kitchen Sink](#kitchen-sink)
@@ -201,6 +202,9 @@ Below are the available configuration options for the component:
 | uniqueId                 |                      | Used with `noUniqueId` to set a custom unique id for the wrapper.                                                                        |
 | useReadMore              | true                 | Enables or disables the "read more" button. Available if text content on the card is taller than the card itself.                        |
 | disableToolbar           | false                | Hides the toolbar / control panel                                                                                                        |
+| searchPlaceholder        | "Search..."          | Customizes the placeholder text for the search input.                                                                                    |
+| searchAriaLabel          | "Search timeline"    | Sets the aria-label for the search input for accessibility.                                                                              |
+| clearSearch              | "Clear search"       | Customizes the text for the clear search button.                                                                                         |
 
 ### Mode
 
@@ -573,6 +577,23 @@ Defaults
 | `play`     | 'Play Slideshow' |
 | `previous` | 'Previous'       |
 
+### Search Functionality
+
+React-Chrono includes a powerful search feature that allows users to quickly find specific content within your timeline. The search functionality is included in the toolbar by default and can be customized with several props.
+
+The search feature scans through all text content in your timeline items, including titles, card titles, subtitles, and detailed text. When matches are found, users can navigate through the results, and the timeline will automatically focus on the matching items.
+
+```jsx
+<Chrono
+  items={data}
+  searchPlaceholder="Find in timeline..."
+  searchAriaLabel="Search through timeline events"
+  clearSearch="Reset search"
+/>
+```
+
+You can hide the search functionality (along with the rest of the toolbar) by setting the `disableToolbar` prop to `true`.
+
 ## Using custom class names
 
 You can use the classNames prop to apply your own class names. The following example shows how to use custom class names on different elements.

cypress/e2e/react-chrono/horizontal_spec.js

@@ -12,13 +12,4 @@ context('Chrono.Horizontal.Basic', () => {
   it('check timeline controls', () => {
     cy.get('.timeline-controls').children().should('have.length', 6);
   });
-
-  // it('check read more', () => {
-  //   cy.get('.timeline-card-content').within(() => {
-  //     cy.get('.card-description').should('have.class', 'show-less');
-  //     cy.get('.show-more').click();
-  //     cy.wait(400);
-  //     cy.get('.card-description').should('not.have.class', 'show-less');
-  //   });
-  // });
 });

cypress/e2e/react-chrono/vertical_alternating_nomedia.js

@@ -62,19 +62,6 @@ context('Chrono.Vertical.Alternating', () => {
       .should('have.class', 'active');
   });
 
-  it('check read more action', () => {
-    cy.get('.vertical-item-row')
-      .eq(1)
-      .find('.card-description')
-      .should('have.class', 'show-less');
-    cy.get('.vertical-item-row').eq(1).find('.show-more').click();
-    cy.wait(500);
-    cy.get('.vertical-item-row')
-      .eq(1)
-      .find('.card-description')
-      .should('not.have.class', 'show-less');
-  });
-
   it('check scroll', () => {
     cy.get('.timeline-main-wrapper').scrollTo('bottom');
     cy.wait(1000);

cypress/e2e/react-chrono/vertical_alternating_spec.js

@@ -62,20 +62,6 @@ context('Chrono.Vertical.Alternating.Mixed', () => {
       .should('have.class', 'active');
   });
 
-  it('check read more action', () => {
-    cy.get('.vertical-item-row')
-      .eq(2)
-      .find('.card-description')
-      .should('have.class', 'show-less');
-    // cy.scrollTo(700);
-    cy.get('.vertical-item-row').eq(2).find('.show-more').click();
-    cy.wait(500);
-    cy.get('.vertical-item-row')
-      .eq(2)
-      .find('.card-description')
-      .should('not.have.class', 'show-less');
-  });
-
   it('check video', () => {
     cy.get('.vertical-item-row')
       .eq(2)
@@ -87,13 +73,6 @@ context('Chrono.Vertical.Alternating.Mixed', () => {
       );
   });
 
-  // it('check video', () => {
-  //   cy.get('.vertical-item-row')
-  //     .eq(8)
-  //     .find('video')
-  //     .should('have.css', 'visibility', 'hidden');
-  // });
-
   it('check scroll', () => {
     cy.get('.timeline-main-wrapper').scrollTo('bottom');
     cy.wait(1000);

cypress/e2e/react-chrono/vertical_spec.js

@@ -70,19 +70,6 @@ context('Chrono.Vertical.Basic', () => {
       .should('have.class', 'active');
   });
 
-  // it('check read more action', () => {
-  //   cy.get('.vertical-item-row')
-  //     .eq(1)
-  //     .find('.card-description')
-  //     .should('have.class', 'show-less');
-  //   cy.get('.vertical-item-row').eq(1).find('.show-more').click();
-  //   cy.wait(500);
-  //   cy.get('.vertical-item-row')
-  //     .eq(1)
-  //     .find('.card-description')
-  //     .should('not.have.class', 'show-less');
-  // });
-
   it('check scroll', () => {
     cy.get('.timeline-main-wrapper').scrollTo('bottom');
     cy.wait(1000);

cypress/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "types": [
       "cypress"
-    ]
+    ],
+    "rootDir": ".."
   },
   "include": [
     "../node_modules/cypress",

package.json

@@ -103,6 +103,7 @@
     "cssnano": "^7.0.6",
     "cypress": "14.2.1",
     "eslint": "^9.23.0",
+    "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.4",
@@ -115,6 +116,8 @@
     "lint-staged": "^15.5.0",
     "postcss": "^8.5.3",
     "postcss-preset-env": "^10.1.5",
+    "postcss-scss": "^4.0.9",
+    "postcss-styled-syntax": "^0.7.1",
     "postcss-syntax": "^0.36.2",
     "prettier": "^3.5.3",
     "pretty-quick": "^4.1.1",
@@ -136,8 +139,8 @@
     "snyk": "^1.1296.1",
     "start-server-and-test": "^2.0.11",
     "stylelint": "^16.17.0",
+    "stylelint-config-recess-order": "^6.0.0",
     "stylelint-config-recommended": "^15.0.0",
-    "stylelint-config-styled-components": "^0.1.1",
     "stylelint-order": "^6.0.4",
     "typescript": "^5.8.2",
     "typescript-plugin-styled-components": "^3.0.0",