Add react component for Timeline visualization

CHANGELOG.md

@@ -583,3 +583,7 @@ to rebuild them every time the envelope list is updated. Use this instead of `<W
 [4.1.1]: https://github.com/cucumber/cucumber-react/compare/v4.0.0...v4.1.1
 [4.0.0]: https://github.com/cucumber/cucumber-react/compare/v3.3.0...v4.0.0
 [3.3.0]: https://github.com/cucumber/cucumber-react/compare/v3.2.0...v3.3.0
+
+## [Unreleased]
+### Added
+- Add `<Timeline/>` component showing scenario execution over time grouped by worker ported from cucumber-jvm's TimelineFormatter ([#126](https://github.com/cucumber/react-components/issues/126))

package.json

@@ -48,7 +48,9 @@
     "rehype-sanitize": "6.0.0",
     "remark-breaks": "4.0.0",
     "remark-gfm": "4.0.1",
-    "use-debounce": "^10.0.0"
+    "use-debounce": "^10.0.0",
+    "vis-data": "^8.0.4",
+    "vis-timeline": "^8.5.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

src/components/app/Report.module.scss

@@ -1,3 +1,5 @@
+@use '../../styles/theming';
+
 .layout {
   > section:not(:last-child) {
     margin-bottom: 1.5em;
@@ -8,3 +10,37 @@
   font-size: 1.25em;
   margin: 1em 0;
 }
+
+.tabList {
+  display: flex;
+  gap: 0.25em;
+  border-bottom: 1px solid theming.$panelAccentColor;
+  margin-bottom: 1em;
+}
+
+.tab {
+  padding: 0.5em 1em;
+  border-bottom: 2px solid transparent;
+  color: theming.$panelTextColor;
+  cursor: pointer;
+  outline: none;
+
+  &[data-hovered] {
+    background-color: theming.$panelBackgroundColor;
+  }
+
+  &[data-selected] {
+    border-bottom-color: theming.$anchorColor;
+    color: theming.$anchorColor;
+    font-weight: 600;
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid theming.$anchorColor;
+    outline-offset: 2px;
+  }
+}
+
+.tabPanel {
+  outline: none;
+}

src/components/app/Report.tsx

@@ -1,10 +1,12 @@
 import type { FC } from 'react'
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from 'react-aria-components'
 
 import { ExecutionSummary } from './ExecutionSummary.js'
 import { FilteredDocuments } from './FilteredDocuments.js'
 import styles from './Report.module.scss'
 import { SearchBar } from './SearchBar.js'
 import { TestRunHooks } from './TestRunHooks.js'
+import { Timeline } from './Timeline.js'
 
 export const Report: FC = () => {
   return (
@@ -14,8 +16,24 @@ export const Report: FC = () => {
         <SearchBar />
       </section>
       <section>
-        <h2 className={styles.heading}>Scenarios</h2>
-        <FilteredDocuments />
+        <Tabs className={styles.tabs}>
+          <TabList aria-label="Report views" className={styles.tabList}>
+            <Tab id="scenarios" className={styles.tab}>
+              Scenarios
+            </Tab>
+            <Tab id="timeline" className={styles.tab}>
+              Timeline
+            </Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel id="scenarios" className={styles.tabPanel}>
+              <FilteredDocuments />
+            </TabPanel>
+            <TabPanel id="timeline" className={styles.tabPanel}>
+              <Timeline />
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
       </section>
       <section>
         <h2 className={styles.heading}>Hooks</h2>