ui-soxo-bootstrap-core 2.4.26 → 2.5.0

package/core/modules/steps/timeline.js

@@ -0,0 +1,54 @@
+/**
+ * TimelinePanel Component
+ *
+ * - Displays a vertical timeline for a multi-step process.
+ * - Highlights active and completed steps visually.
+ * - Allows direct navigation by clicking on timeline steps.
+ * - Supports collapsing and expanding the timeline view.
+ * - Shows a loading skeleton while step data is being fetched.
+ *
+ * Used as a visual step navigator within a step-based workflow.
+ */
+
+import React from 'react';
+import { Skeleton } from 'antd';
+import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { Card } from '../../lib';
+
+export default function TimelinePanel({ loading, steps, activeStep, timelineCollapsed, handleTimelineClick, setTimelineCollapsed }) {
+  return (
+    <Card className="timeline-card">
+      {loading ? (
+        <Skeleton active />
+      ) : (
+        <div className={`timeline-sidebar ${timelineCollapsed ? 'collapsed' : ''}`}>
+          {steps.map((step, index) => (
+            <div
+              key={step.step_id}
+              className={`timeline-step 
+                ${index === activeStep ? 'active' : ''} 
+                ${index < activeStep ? 'completed' : ''}`}
+              onClick={() => handleTimelineClick(index)}
+            >
+              <div className="step-marker">
+                <div className="step-number">{index + 1}</div>
+                {index < steps.length - 1 && <div className="vertical-line"></div>}
+              </div>
+
+              {!timelineCollapsed && (
+                <div className="step-info">
+                  <div className="step-title">Step {index + 1}</div>
+                  <div className="step-main">{step.step_name}</div>
+                </div>
+              )}
+            </div>
+          ))}
+
+          <div className="toggle-arrow" onClick={() => setTimelineCollapsed(!timelineCollapsed)}>
+            {timelineCollapsed ? <RightOutlined /> : <LeftOutlined />}
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+}

package/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '\\.(css|scss)$': 'jest-transform-stub',
+  },
+};

package/jest.setup.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.4.26",
+  "version": "2.5.0",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"
@@ -13,7 +13,7 @@
   "main": "index.js",
   "scripts": {
     "size": "size-limit",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
     "start": "webpack-dev-server --mode development",
     "transpile": "babel / -d build --copy-files",
     "build": "webpack --mode production",
@@ -82,10 +82,13 @@
   "devDependencies": {
     "@babel/core": "^7.16.5",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
     "@eslint/compat": "^1.1.1",
     "@eslint/js": "^9.9.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^12.1.5",
+    "babel-jest": "^27.5.1",
     "babel-loader": "^8.3.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -100,6 +103,8 @@
     "eslint-plugin-unicorn": "^55.0.0",
     "globals": "^15.9.0",
     "husky": "^9.1.5",
+    "jest": "^27.5.1",
+    "jest-transform-stub": "^2.0.0",
     "prettier": "^3.3.3",
     "sass-loader": "^10.5.2",
     "style-loader": "^1.3.0",