versions timeline component. (#790)

* add the timeline component

* test

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bldrs",
-  "version": "1.0.0-r688",
+  "version": "1.0.0-r692",
   "main": "src/index.jsx",
   "license": "MIT",
   "homepage": "https://github.com/bldrs-ai/Share",

src/Components/Timeline.fixture.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import Timeline from './Timeline'
+import FixtureContext from '../FixtureContext'
+
+
+const versions = [
+  {name: 'Version1',
+    date: '09.17.2023',
+    description: 'Add initial model',
+    icon: 'architecture',
+  },
+  {name: 'Version2',
+    date: '09.18.2023',
+    description: 'Change the facade details',
+    icon: 'engineering',
+  },
+  {name: 'Version3',
+    date: '09.19.2023',
+    description: 'Submit the model for review',
+    icon: 'architecture',
+  },
+  {name: 'Version4',
+    date: '09.20.2023',
+    description: 'Updated the structural system',
+    icon: 'engineering',
+  },
+]
+
+
+export default (
+  <FixtureContext>
+    <Timeline versionHistory={versions}/>
+  </FixtureContext>
+)

src/Components/Timeline.jsx

@@ -0,0 +1,75 @@
+/* eslint-disable no-magic-numbers */
+import React, {useState} from 'react'
+import Paper from '@mui/material/Paper'
+import Timeline from '@mui/lab/Timeline'
+import TimelineItem from '@mui/lab/TimelineItem'
+import TimelineSeparator from '@mui/lab/TimelineSeparator'
+import TimelineConnector from '@mui/lab/TimelineConnector'
+import TimelineContent from '@mui/lab/TimelineContent'
+import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'
+import TimelineDot from '@mui/lab/TimelineDot'
+import Typography from '@mui/material/Typography'
+import ArchitectureIcon from '@mui/icons-material/Architecture'
+import EngineeringIcon from '@mui/icons-material/Engineering'
+
+
+/**
+ * Verison history timeline component
+ *
+ * @property {Array<object>} versionHistory object containing versions information
+ * @return {React.Component}
+ */
+export default function VersionsTimeline({versionHistory}) {
+  const [active, setActive] = useState(0)
+  return (
+    <Paper sx={{overflow: 'scroll'}}>
+      <Timeline>
+        {versionHistory.map((version, i) => {
+          return (
+            <TimelineItem key={i} onClick={() => setActive(i)} sx={{cursor: 'pointer'}}>
+              <TimelineOppositeContent
+                sx={{m: 'auto 0'}}
+                align="center"
+                color={active === i ? 'text.primary' : 'text.secondary'}
+              >
+                <Typography variant="body2" >
+                  {version.name}
+                </Typography>
+                <Typography variant="caption" >
+                  {version.date}
+                </Typography>
+              </TimelineOppositeContent>
+              <TimelineSeparator>
+                <TimelineConnector/>
+                <TimelineDot
+                  color={active === i ? 'primary' : 'secondary'}
+                >
+                  {version.icon === 'architecture' ?
+                    <ArchitectureIcon data-testid="architecture-icon"/> :
+                    <EngineeringIcon data-testid="engineering-icon"/>
+                  }
+                </TimelineDot>
+                <TimelineConnector/>
+              </TimelineSeparator>
+              <TimelineContent sx={{py: '12px', px: 2, lineHeight: '1em'}} >
+                <Paper
+                  variant='background'
+                  elevation={active === i ? 4 : 1}
+                  sx={{padding: '10px'}}
+                >
+                  <Typography
+                    variant="caption"
+                    sx={{wordBreak: 'normal'}}
+                  >
+                    {version.description}
+                  </Typography>
+                </Paper>
+              </TimelineContent>
+            </TimelineItem>
+          )
+        })
+        }
+      </Timeline>
+    </Paper>
+  )
+}

src/Components/Timeline.test.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import {render, screen, fireEvent} from '@testing-library/react'
+import VersionsTimeline from './Timeline' // adjust the import to your file structure
+import '@testing-library/jest-dom/extend-expect'
+
+
+describe('VersionsTimeline component', () => {
+  const mockVersionHistory = [
+    {name: 'v1.0', date: '09.17.2023', icon: 'architecture', description: 'Intital model'},
+    {name: 'v1.1', date: '09.88.2023', icon: 'engineering', description: 'Fix structural details'},
+  ]
+
+  it('renders without crashing', () => {
+    render(<VersionsTimeline versionHistory={mockVersionHistory}/>)
+  })
+
+  it('displays all timeline items from versionHistory prop', () => {
+    render(<VersionsTimeline versionHistory={mockVersionHistory}/>)
+    expect(screen.getByText('v1.0')).toBeInTheDocument()
+    expect(screen.getByText('v1.1')).toBeInTheDocument()
+    expect(screen.getByText('09.17.2023')).toBeInTheDocument()
+    expect(screen.getByText('Fix structural details')).toBeInTheDocument()
+  })
+
+  it('sets active timeline item when clicked', () => {
+    render(<VersionsTimeline versionHistory={mockVersionHistory}/>)
+    const firstItem = screen.getByText('v1.0')
+    const secondItem = screen.getByText('v1.1')
+    fireEvent.click(firstItem)
+    expect(firstItem).toHaveStyle('color: text.primary')
+    fireEvent.click(secondItem)
+    expect(secondItem).toHaveStyle('color: text.primary')
+  })
+
+  it('displays the correct icons for each item', () => {
+    render(<VersionsTimeline versionHistory={mockVersionHistory}/>)
+    expect(screen.getByTestId('architecture-icon')).toBeInTheDocument()
+    expect(screen.getByTestId('engineering-icon')).toBeInTheDocument()
+  })
+})