@platformatic/ui-components 0.15.5 → 0.17.1

package/src/components/ButtonFullRounded.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import commonStyles from './Common.module.css'
 import styles from './ButtonFullRounded.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
-import { COLORS_ICON, SIZES, DULLS_BACKGROUND_COLOR, PADDING_SIZES, SMALL, WHITE, NONE } from './constants'
+import { DULLS_BACKGROUND_COLOR, SMALL, WHITE, NONE } from './constants'
 function ButtonFullRounded ({
   className = '',
   iconName = '',
@@ -49,59 +48,4 @@ function ButtonFullRounded ({
   )
 }
 
-ButtonFullRounded.propTypes = {
-  /**
-   * iconName
-   */
-  iconName: PropTypes.string,
-  /**
-   * iconColor
-   */
-  iconColor: PropTypes.oneOf(COLORS_ICON),
-  /**
-   * iconColor
-   */
-  iconSize: PropTypes.oneOf(SIZES),
-  /**
-   * disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * paddingSize
-   */
-  paddingSize: PropTypes.oneOf(PADDING_SIZES),
-  /**
-   * alt
-   */
-  alt: PropTypes.string,
-  /**
-   * onClick
-   */
-  onClick: PropTypes.func,
-  /**
-   * Effect on hover
-   */
-  hoverEffect: PropTypes.oneOf(['', DULLS_BACKGROUND_COLOR]),
-  /**
-   * bordered
-   */
-  bordered: PropTypes.bool,
-  /**
-   * tip
-   */
-  tip: PropTypes.string,
-  /**
-   * Selected: default false
-   */
-  selected: PropTypes.bool,
-  /**
-     * buttonClassName
-     */
-  buttonClassName: PropTypes.string,
-  /**
-     * internalOverHandling
-     */
-  internalOverHandling: PropTypes.bool
-}
-
 export default ButtonFullRounded

package/src/components/ButtonOnlyIcon.jsx

@@ -1,9 +1,8 @@
 import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
 import styles from './ButtonOnlyIcon.module.css'
 import commonStyles from './Common.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
-import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, DULLS_BACKGROUND_COLOR, MAIN_DARK_BLUE, LARGE, MEDIUM, TRANSPARENT } from './constants'
+import { BOX_SHADOW, UNDERLINE, DULLS_BACKGROUND_COLOR, MAIN_DARK_BLUE, LARGE, MEDIUM, TRANSPARENT } from './constants'
 
 function ButtonOnlyIcon ({
   textClass = '',
@@ -94,59 +93,4 @@ function ButtonOnlyIcon ({
   )
 }
 
-ButtonOnlyIcon.propTypes = {
-  /**
-   * textClass
-   */
-  textClass: PropTypes.string,
-  /**
-   * paddingClass
-   */
-  paddingClass: PropTypes.string,
-  /**
-   * altLabel
-   */
-  altLabel: PropTypes.string,
-  /**
-   * color of text, icon and borders
-   */
-  color: PropTypes.oneOf(COLORS_BUTTON),
-  /**
-   * background color of the button
-   */
-  backgroundColor: PropTypes.oneOf(COLORS_BUTTON),
-  /**
-   * Size
-   */
-  size: PropTypes.oneOf(SIZES),
-  /**
-   * Disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Effect on hover
-   */
-  hoverEffect: PropTypes.oneOf(HOVER_EFFECTS_BUTTONS),
-  /**
-   * Apply border: default true
-   */
-  bordered: PropTypes.bool,
-  /**
-   * Full Width: default false
-   */
-  fullWidth: PropTypes.bool,
-  /**
-   * platformaticIcon: should be removed
-   */
-  platformaticIcon: PropTypes.shape({
-    iconName: PropTypes.string,
-    color: PropTypes.string,
-    size: PropTypes.string
-  }),
-  /**
-   * Selected: default false
-   */
-  selected: PropTypes.bool
-}
-
 export default ButtonOnlyIcon

package/src/components/Checkbox.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styles from './Checkbox.module.css'
-import { MAIN_DARK_BLUE, MEDIUM, RICH_BLACK, SMALL, WHITE } from './constants'
+import { MAIN_DARK_BLUE, MEDIUM } from './constants'
 function Checkbox ({
   disabled = false,
   color = MAIN_DARK_BLUE,
@@ -17,19 +16,4 @@ function Checkbox ({
   )
 }
 
-Checkbox.propTypes = {
-  /**
-   * disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * color
-   */
-  color: PropTypes.oneOf([WHITE, MAIN_DARK_BLUE, RICH_BLACK]),
-  /**
-   * size
-   */
-  size: PropTypes.oneOf([SMALL, MEDIUM])
-}
-
 export default Checkbox

package/src/components/CopyAndPaste.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import PropTypes from 'prop-types'
-import { COLORS_ICON, DIRECTION_TOP, MEDIUM, SIZES, POSITIONS, POSITION_CENTER, MAIN_DARK_BLUE } from './constants'
+import { DIRECTION_TOP, MEDIUM, POSITION_CENTER, MAIN_DARK_BLUE } from './constants'
 import PlatformaticIcon from './PlatformaticIcon'
 import TooltipAbsolute from './TooltipAbsolute'
 import Tooltip from './Tooltip'
@@ -74,43 +73,4 @@ function CopyAndPaste ({
   return renderTooltip()
 }
 
-CopyAndPaste.propTypes = {
-  /**
-   * value
-   */
-  value: PropTypes.string,
-  /**
-   * tooltipLabel
-   */
-  tooltipLabel: PropTypes.string,
-  /**
-   * size
-   */
-  size: PropTypes.oneOf(SIZES),
-  /**
-   * color
-   */
-  color: PropTypes.oneOf(COLORS_ICON),
-  /**
-   * timeout
-   */
-  timeout: PropTypes.number,
-  /**
-   * internalOverHandling
-   */
-  internalOverHandling: PropTypes.bool,
-  /**
-   * timeout
-   */
-  tooltipClassName: PropTypes.string,
-  /**
-   * position
-   */
-  position: PropTypes.oneOf(POSITIONS),
-  /**
-   * tooltipFixed
-   */
-  tooltipFixed: PropTypes.bool
-}
-
 export default CopyAndPaste

package/src/components/DropDown.jsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
 import styles from './DropDown.module.css'
 import commonStyles from './Common.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
-import { DARK_BLUE, LIGHT_BLUE, MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './constants'
+import { DARK_BLUE, MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './constants'
+
 function DropDown ({
   pictureUrl = '',
   header = '',
@@ -89,55 +89,4 @@ function DropDown ({
   )
 }
 
-DropDown.propTypes = {
-  /**
-   * pictureUrl
-   */
-  pictureUrl: PropTypes.string,
-  /**
-   * header
-   */
-  header: PropTypes.string,
-  /**
-   * headerClassName
-   */
-  headerClassName: PropTypes.string,
-  /**
-   * align
-   */
-  align: PropTypes.string,
-  /**
-   * items
-   */
-  items: PropTypes.array,
-  /**
-   * backgroundColor
-   */
-  backgroundColor: PropTypes.oneOf([DARK_BLUE, LIGHT_BLUE, RICH_BLACK]),
-  /**
-   * textColor
-   */
-  textColor: PropTypes.oneOf([MAIN_DARK_BLUE, LIGHT_BLUE, WHITE]),
-  /**
-   * borderColor
-   */
-  borderColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
-  /**
-   * headerColor
-   */
-  headerColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
-  /**
-   * lastButton
-   */
-  lastButton: PropTypes.node,
-  /**
-   * menuCustomClassName
-   */
-  menuCustomClassName: PropTypes.string,
-  /**
-   * handleClickOutside
-   */
-  handleClickOutside: PropTypes.bool
-}
-
 export default DropDown

package/src/components/FollowUs.jsx

@@ -1,8 +1,7 @@
 import React, { useState } from 'react'
-import PropTypes from 'prop-types'
 import styles from './FollowUs.module.css'
 import Icons from './icons'
-import { MAIN_GREEN, WHITE, MEDIUM, SMALL, MAIN_DARK_BLUE, LIGHT_GREEN } from './constants'
+import { WHITE, MEDIUM } from './constants'
 
 function SocialElement ({ href, iconName, iconClassName, iconColor, iconSize }) {
   const [hover, setHover] = useState(false)
@@ -67,38 +66,4 @@ function FollowUs ({
   )
 }
 
-FollowUs.propTypes = {
-  /**
-   * label
-   */
-  label: PropTypes.string,
-  /**
-   * labelClassName
-   */
-  labelClassName: PropTypes.string,
-  /**
-   * frontPageAspect
-   */
-  frontPageAspect: PropTypes.bool,
-  /**
-   * labelColor
-   */
-  labelColor: PropTypes.oneOf([LIGHT_GREEN, WHITE, MAIN_DARK_BLUE]),
-  /**
-   * iconColor
-   */
-  iconColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE, MAIN_GREEN]),
-  /**
-   * iconSize
-   */
-  iconSize: PropTypes.oneOf([MEDIUM, SMALL]),
-  /**
-   * socialElements
-   */
-  socialElements: PropTypes.arrayOf(PropTypes.shape({
-    link: PropTypes.string.isRequired,
-    iconName: PropTypes.string.isRequired
-  }))
-}
-
 export default FollowUs

package/src/components/HorizontalSeparator.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import commonStyles from './Common.module.css'
-import { DARK_GREEN, MAIN_DARK_BLUE, WHITE, MARGIN_4 } from './constants'
+import { DARK_GREEN, MARGIN_4 } from './constants'
 import styles from './HorizontalSeparator.module.css'
+
 function HorizontalSeparator ({
   marginTop = MARGIN_4,
   marginBottom = MARGIN_4,
@@ -22,23 +22,4 @@ function HorizontalSeparator ({
   return <hr className={getClassName()} />
 }
 
-HorizontalSeparator.propTypes = {
-  /**
-   * marginTop
-   */
-  marginTop: PropTypes.number,
-  /**
-   * marginBottom
-   */
-  marginBottom: PropTypes.number,
-  /**
-   * color
-   */
-  color: PropTypes.oneOf([DARK_GREEN, MAIN_DARK_BLUE, WHITE]),
-  /**
-   * opacity
-   */
-  opacity: PropTypes.number
-}
-
 export default HorizontalSeparator

package/src/components/InfoBox.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styles from './InfoBox.module.css'
 import Button from './Button'
 import PlatformaticIcon from './PlatformaticIcon'
-import { COLORS_BUTTON, COLORS_ICON, HOVER_EFFECTS_BUTTONS, MAIN_GREEN } from './constants'
+import { MAIN_GREEN } from './constants'
 
 function InfoBox (props) {
   const {
@@ -24,34 +23,4 @@ function InfoBox (props) {
   )
 }
 
-InfoBox.propTypes = {
-  /**
-   * children
-   */
-  children: PropTypes.node,
-  /**
-   * iconName
-   */
-  iconName: PropTypes.string,
-  /**
-   * iconColor
-   */
-  iconColor: PropTypes.oneOf(COLORS_ICON),
-  /**
-   * helpText
-   */
-  helpText: PropTypes.string,
-  /**
-   * background color of the button
-   */
-  buttonProps: PropTypes.shape({
-    label: PropTypes.string,
-    backgroundColor: PropTypes.string,
-    color: PropTypes.oneOf(COLORS_BUTTON),
-    hoverEffect: PropTypes.oneOf(HOVER_EFFECTS_BUTTONS),
-    bordered: PropTypes.bool,
-    onClick: PropTypes.func
-  })
-}
-
 export default InfoBox

package/src/components/ListElement.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import PlatformaticIcon from './PlatformaticIcon'
 import commonStyles from './Common.module.css'
 import styles from './ListElement.module.css'
-import { MAIN_DARK_BLUE, MEDIUM, SMALL, WHITE, MAIN_GREEN } from './constants'
+import { MEDIUM, WHITE, MAIN_GREEN } from './constants'
 
 function List ({
   title = '',
@@ -40,35 +39,5 @@ function List ({
     </div>
   )
 }
-List.propTypes = {
-  /**
-   * title
-   */
-  title: PropTypes.string,
-  /**
-   * detail
-   */
-  detail: PropTypes.string,
-  /**
-   * marginSize
-   */
-  marginSize: PropTypes.oneOf([SMALL, MEDIUM]),
-  /**
-   * color
-   */
-  titleColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
-  /**
-   * color
-   */
-  iconColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE]),
-  /**
-   * titleColor
-   */
-  detailColor: PropTypes.oneOf([WHITE, MAIN_DARK_BLUE]),
-  /**
-   * semiBold
-   */
-  semiBold: PropTypes.bool
-}
 
 export default List

package/src/components/LoadingSpinner.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styles from './LoadingSpinner.module.css'
 import SpinnerCircular from './loaders/SpinnerCircular'
 
@@ -16,11 +15,4 @@ function LoadingSpinner ({ loading = false }) {
     : <></>
 }
 
-LoadingSpinner.propTypes = {
-  /**
-   * loading
-   */
-  loading: PropTypes.bool
-}
-
 export default LoadingSpinner

package/src/components/LoadingSpinnerV2.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styles from './LoadingSpinnerV2.module.css'
 import SpinnerCircular from './loaders/SpinnerCircular'
 
@@ -26,28 +25,4 @@ function LoadingSpinnerV2 ({
     : <></>
 }
 
-LoadingSpinnerV2.propTypes = {
-  /**
-   * loading
-   */
-  loading: PropTypes.bool,
-  /**
-   * applySentences
-   */
-  applySentences: PropTypes.object,
-  /**
-   * spinnerProps
-   */
-  spinnerProps: PropTypes.shape({
-    className: PropTypes.string,
-    color: PropTypes.string,
-    size: PropTypes.number,
-    thickness: PropTypes.number
-  }),
-  /**
-   * containerClassName
-   */
-  containerClassName: PropTypes.string
-}
-
 export default LoadingSpinnerV2

package/src/components/LogoDropDown.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import PropTypes from 'prop-types'
 import styles from './LogoDropDown.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
 import { MAIN_DARK_BLUE, SMALL, WHITE } from './constants'
@@ -60,31 +59,4 @@ function LogoDropDown ({
   )
 }
 
-LogoDropDown.propTypes = {
-  /**
-   * width
-   */
-  width: PropTypes.number,
-  /**
-   * height
-   */
-  height: PropTypes.number,
-  /**
-   * itemSelected
-   */
-  itemSelected: PropTypes.string,
-  /**
-   * items
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string,
-    handleClick: PropTypes.func
-  })),
-  /**
-   * onClickItemSelected
-   */
-  onClickItemSelected: PropTypes.func
-}
-
 export default LogoDropDown

package/src/components/MetricInfoBox.jsx

@@ -0,0 +1,80 @@
+import React, { useState } from 'react'
+import styles from './MetricInfoBox.module.css'
+import TrendDownIcon from './icons/TrendDownIcon'
+import TrendUpIcon from './icons/TrendUpIcon'
+import TrendLine from './TrendLine'
+import Tooltip from './Tooltip'
+import { DIRECTION_TOP, POSITION_CENTER, MEDIUM, WHITE } from './constants'
+import PlatformaticIcon from './PlatformaticIcon'
+
+export default function MetricInfoBox ({
+  title,
+  value,
+  unit,
+  data = [],
+  helper,
+  tooltip,
+  showGraph = false
+}) {
+  // set trend variable up or down, depending on the first and last value of the data array
+  const trend = data[0] > data[data.length - 1] ? 'up' : 'down'
+  const [tooltipVisible, setTooltipVisible] = useState(false)
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.headerRow}>
+        <span className={styles.title}>{title}</span>
+        {/* on hover show tooltip */}
+        {tooltip && (
+          <div
+            className={styles.infoIcon}
+            onMouseEnter={() => setTooltipVisible(true)}
+            onMouseLeave={() => setTooltipVisible(false)}
+          >
+            <Tooltip
+              content={<span>{tooltip}</span>}
+              visible={tooltipVisible}
+              direction={DIRECTION_TOP}
+              position={POSITION_CENTER}
+              offset={24}
+              delay={100}
+              activeDependsOnVisible
+            >
+              <PlatformaticIcon
+                size={MEDIUM}
+                iconName='InfoCircleIcon'
+                color={WHITE}
+
+              />
+            </Tooltip>
+          </div>
+        )}
+      </div>
+      <div className={styles.content}>
+        <div className={styles.contentText}>
+          <div>
+            <div className={styles.value}>
+              <span className={styles.valueNumber}>{value}</span>
+              <span className={styles.valueUnit}>{unit}</span>
+              <div className={styles.trend}>
+                {trend === 'up' ? <TrendUpIcon color='white' /> : <TrendDownIcon color='white' />}
+              </div>
+            </div>
+
+          </div>
+          <div className={styles.helperBox}>
+            {helper}
+          </div>
+
+        </div>
+
+        {showGraph && (
+          <div className={styles.contentGraph}>
+            <TrendLine yValues={data} />
+          </div>
+        )}
+      </div>
+
+    </div>
+  )
+}

package/src/components/MetricInfoBox.module.css

@@ -0,0 +1,42 @@
+.container {
+  @apply bg-black-russian rounded-lg p-4 box-border flex flex-col w-full gap-4;
+}
+
+.headerRow {
+  @apply flex justify-between items-center mb-4;
+}
+
+.title {
+  @apply text-[24px] font-semibold text-white;
+}
+
+.infoIcon {
+  @apply text-white/70 cursor-pointer text-[16px];
+}
+
+.content {
+  @apply flex items-center justify-center gap-4;
+}
+
+.contentText {
+  @apply flex flex-col gap-2 items-center justify-center;
+}
+.value {
+  @apply flex gap-4 items-center justify-center;
+}
+
+.valueNumber {
+  @apply text-[24px] font-semibold text-white;
+}
+
+.valueUnit {
+  @apply text-[16px] font-normal text-white/70;
+}
+
+.helperBox {
+  @apply text-[14px] font-normal text-white/70;
+} 
+
+.contentGraph {
+  @apply w-[210px] h-[60px];
+}