fix: updated with staging

package.json

@@ -4,7 +4,7 @@
     "registry": "https://npm.pkg.github.com"
   },
   "repository": "git://github.com/contacto-io/contacto-console",
-  "version": "0.5.20",
+  "version": "0.5.28",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [

src/components/TimeLeftBar/index.js

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react'
+import { Progress } from 'antd'
+import PropTypes from 'prop-types'
+
+export const TimeLeftBar = ({
+  duration,
+  colorOne,
+  colorTwo,
+  colorThreshold,
+  className,
+  ...props
+}) => {
+  const [progressPercent, setProgressPercent] = useState(100)
+  useEffect(() => {
+    let startTime = new Date().getTime()
+
+    const interval = setInterval(() => {
+      const currentTime = new Date().getTime()
+      const elapsedTime = currentTime - startTime
+
+      if (elapsedTime >= duration) {
+        clearInterval(interval)
+      }
+      // calculating the percentage of time left
+      const percentage = 100 - (elapsedTime / duration) * 100
+
+      if (percentage < 0) clearInterval(interval)
+      setProgressPercent(percentage)
+    }, 100) // Update every 100 milliseconds
+
+    return () => clearInterval(interval)
+  }, [])
+
+  let progressBarColor
+  if (colorThreshold !== undefined)
+    progressBarColor = progressPercent <= colorThreshold ? colorTwo : colorOne
+  else progressBarColor = colorOne
+
+  return (
+    <Progress
+      className={className}
+      percent={progressPercent}
+      showInfo={false}
+      strokeColor={`var(--${progressBarColor})`}
+      reverse
+      {...props}
+    />
+  )
+}
+
+TimeLeftBar.propTypes = {
+  className: PropTypes.string,
+  /**
+   * This indicates how much time is left
+   */
+  duration: PropTypes.string,
+  /**
+   * This indicates initial color of the bar
+   */
+  colorOne: PropTypes.string,
+  /**
+   * This indicates color that changes after color one threshold
+   */
+  colorTwo: PropTypes.string,
+  /**
+   * This indicates when at what percentage the color one changes
+   */
+  colorThreshold: PropTypes.string,
+}

src/components/TimeLeftBar/index.stories.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { TimeLeftBar } from '.'
+
+export default {
+  title: 'Components/TimeLeft Bar',
+  component: TimeLeftBar,
+  parameters: {},
+}
+
+const Template = (args) => <TimeLeftBar {...args} />
+
+export const Default = Template.bind({})
+Default.args = {
+  duration: 20000, // total duration of bar
+  colorOne: 'success-color', // Color of the bar is it's percentage is more than progressPercentage
+  colorTwo: 'danger-color', // Color of the  bar is it's percentage is less than progressPercentage
+  colorThreshold: 25, // Percent at which the  bar changes it's color
+}
+
+export const WithoutThreshold = Template.bind({})
+WithoutThreshold.args = {
+  duration: 20000,
+  colorOne: 'primary-color',
+}

src/index.js

@@ -23,3 +23,4 @@ export * from './components/Cascader/index'
 export * from './components/DatePicker/index'
 export * from './components/KeyValueEditor/index'
 export * from './components/TopBanner/index'
+export * from './components/TimeLeftBar/index'