@platformatic/ui-components 0.15.5 → 0.17.1

package/src/components/TrendLine.jsx

@@ -0,0 +1,146 @@
+import React, { useRef, useEffect, useState } from 'react'
+import * as d3 from 'd3'
+
+/**
+ * TrendLine component
+ * @param {Object} props
+ * @param {number[]} props.yValues - Array of y-values (equally spaced on x-axis)
+ * @param {number} [props.width=400] - Width of the SVG
+ * @param {number} [props.height=120] - Height of the SVG
+ */
+function TrendLine ({ yValues }) {
+  const ref = useRef(null)
+  const containerRef = useRef(null)
+  /** @type {React.RefObject<HTMLDivElement>} */
+  // @ts-ignore
+  const typedContainerRef = containerRef
+  const [dimensions, setDimensions] = useState({ width: 400, height: 120 })
+
+  useEffect(() => {
+    if (!typedContainerRef.current) return
+    // Initial set
+    const bounding = typedContainerRef.current.getBoundingClientRect()
+    if (bounding) {
+      setDimensions({ width: bounding.width, height: bounding.height })
+    }
+    // Resize observer
+    const resizeObserver = new window.ResizeObserver(entries => {
+      for (const entry of entries) {
+        if (entry.target === typedContainerRef.current) {
+          const { width, height } = entry.contentRect
+          setDimensions({ width, height })
+        }
+      }
+    })
+    resizeObserver.observe(typedContainerRef.current)
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  useEffect(() => {
+    const { width, height } = dimensions
+    if (!yValues || yValues.length === 0) return
+    // Limit to max 5 points by downsampling if needed
+    let limitedYValues = yValues
+    if (yValues.length > 5) {
+      const step = (yValues.length - 1) / 4
+      limitedYValues = Array.from({ length: 5 }, (_, i) => yValues[Math.round(i * step)])
+    }
+    const svg = d3.select(ref.current)
+    svg.selectAll('*').remove() // Clear previous
+
+    // Margins for padding
+    // const margin = { top: 10, right: 10, bottom: 10, left: 10 }
+    const margin = { top: 0, right: 0, bottom: 0, left: 0 }
+    const w = width - margin.left - margin.right
+    const h = height - margin.top - margin.bottom
+
+    // Ensure yValues is a number[] and filter out undefined/null
+    const cleanYValues = limitedYValues.filter(v => typeof v === 'number' && !isNaN(v))
+    if (cleanYValues.length === 0) return
+
+    // Helper to ensure [number, number][]
+    function toXYPairs (arr) {
+      const out = []
+      for (let i = 0; i < arr.length; i++) {
+        const x = i
+        const y = arr[i]
+        if (typeof x === 'number' && typeof y === 'number' && Number.isFinite(x) && Number.isFinite(y)) {
+          out.push([x, y])
+        }
+      }
+      return out
+    }
+    const points = toXYPairs(cleanYValues)
+    if (points.length < 2) return
+
+    // X and Y scales
+    const x = d3.scaleLinear()
+      .domain([0, points.length - 1])
+      .range([0, w])
+    const y = d3.scaleLinear()
+      .domain([
+        Number(d3.max(cleanYValues) ?? 1),
+        Number(d3.min(cleanYValues) ?? 0)
+      ]) // Invert so higher values are up
+      .range([margin.top, h + margin.top])
+
+    // Line generator for [x, y] pairs
+    const line = d3.line()
+      .x(d => x(d[0]) + margin.left)
+      .y(d => y(d[1]))
+      .curve(d3.curveCatmullRom.alpha(0.5))
+
+    // Area generator for [x, y] pairs
+    const area = d3.area()
+      .x(d => x(d[0]) + margin.left)
+      .y0(h + margin.top)
+      .y1(d => y(d[1]))
+      .curve(d3.curveCatmullRom.alpha(0.5))
+
+    // Draw area (shadow/fill)
+    svg.append('path')
+      // @ts-ignore
+      .attr('d', area(points))
+      .attr('fill', 'url(#trend-gradient)')
+      .attr('opacity', 1)
+
+    // Draw line
+    svg.append('path')
+      // @ts-ignore
+      .attr('d', line(points))
+      .attr('fill', 'none')
+      .attr('stroke', '#BFC3C7')
+      .attr('stroke-width', 2)
+      .attr('stroke-linecap', 'round')
+
+    // Gradient for area
+    const defs = svg.append('defs')
+    const gradient = defs.append('linearGradient')
+      .attr('id', 'trend-gradient')
+      .attr('x1', '0%')
+      .attr('y1', '0%')
+      .attr('x2', '0%')
+      .attr('y2', '100%')
+    gradient.append('stop')
+      .attr('offset', '0%')
+      .attr('stop-color', '#BFC3C7')
+      .attr('stop-opacity', 0.12)
+    gradient.append('stop')
+      .attr('offset', '100%')
+      .attr('stop-color', '#BFC3C7')
+      .attr('stop-opacity', 0)
+  }, [yValues, dimensions])
+
+  return (
+    <div className='w-full h-full' ref={typedContainerRef} style={{ position: 'relative' }}>
+      <svg
+        ref={ref}
+        width='100%'
+        height='100%'
+        style={{ display: 'block', background: '#0B1016', borderRadius: 6 }}
+      />
+    </div>
+  )
+}
+
+export default TrendLine

package/src/components/VerticalSeparator.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import { DARK_GREEN, MAIN_DARK_BLUE, OPACITY_10, OPACITY_20, OPACITY_30, OPACITY_60, OPACITY_100, WHITE } from './constants'
+import { DARK_GREEN, OPACITY_100 } from './constants'
 import commonStyles from './Common.module.css'
 import styles from './VerticalSeparator.module.css'
 
@@ -15,24 +14,4 @@ function VerticalSeparator ({
   return <div className={className} />
 }
 
-VerticalSeparator.propTypes = {
-  /**
-   * color
-   */
-  color: PropTypes.oneOf([DARK_GREEN, MAIN_DARK_BLUE, WHITE]),
-  /**
-   * backgroundColorOpacity
-   */
-  backgroundColorOpacity: PropTypes.oneOf([OPACITY_10,
-    OPACITY_20,
-    OPACITY_30,
-    OPACITY_60,
-    OPACITY_100]),
-  /**
-   * backgroundColorOpacity
-   */
-  classes: PropTypes.string
-
-}
-
 export default VerticalSeparator

package/src/components/forms/Field.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styles from './Field.module.css'
-import { ERROR_RED, MAIN_DARK_BLUE, WHITE } from '../constants'
+import { MAIN_DARK_BLUE } from '../constants'
 
 function Field ({
   title = '',
@@ -31,39 +30,4 @@ function Field ({
   )
 }
 
-Field.propTypes = {
-  /**
-   * title
-   */
-  title: PropTypes.string,
-  /**
-   * titleColor
-   */
-  titleColor: PropTypes.oneOf([ERROR_RED, MAIN_DARK_BLUE, WHITE]),
-  /**
-   * helper
-   */
-  helper: PropTypes.string,
-  /**
-   * color of border
-   */
-  children: PropTypes.node,
-  /**
-   * disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * required
-   */
-  required: PropTypes.bool,
-  /**
-   * titleClassName
-   */
-  titleClassName: PropTypes.string,
-  /**
-   * titleClassName
-   */
-  helperClassName: PropTypes.string
-}
-
 export default Field

package/src/components/forms/Input.jsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react'
-import PropTypes from 'prop-types'
 import styles from './Input.module.css'
 import commonStyles from '../Common.module.css'
 import PlatformaticIcon from '../PlatformaticIcon'
-import { ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
+import { ERROR_RED, MAIN_GREEN, WHITE } from '../constants'
 
 function Input ({
   placeholder = '',
@@ -85,87 +84,4 @@ function Input ({
   )
 }
 
-Input.propTypes = {
-  /**
-   * placeholder
-   */
-  placeholder: PropTypes.string,
-  /**
-   * value
-   */
-  value: PropTypes.string,
-  /**
-   * name
-   */
-  name: PropTypes.string,
-  /**
-   * color of border
-   */
-  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
-  /**
-   * color of border
-   */
-  backgroundColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK, TRANSPARENT]),
-  /**
-   * onChange
-   */
-  onChange: PropTypes.func,
-  /**
-   * Disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * beforeIcon: PlatformaticIcon props
-   */
-  beforeIcon: PropTypes.shape({
-    iconName: PropTypes.string,
-    color: PropTypes.string,
-    onClick: PropTypes.func
-  }),
-  /**
-   * afterIcon: PlatformaticIcon props
-   */
-  afterIcon: PropTypes.shape({
-    iconName: PropTypes.string,
-    color: PropTypes.string,
-    onClick: PropTypes.func
-  }),
-  /**
-   * placeholderApart
-   */
-  placeholderApart: PropTypes.bool,
-  /**
-   * backgroundTransparent
-   */
-  backgroundTransparent: PropTypes.bool,
-  /**
-   * inputTextClassName
-   */
-  inputTextClassName: PropTypes.string,
-  /**
-   * verticalPaddingClassName
-   */
-  verticalPaddingClassName: PropTypes.string,
-  /**
-   * dataAttrName
-  */
-  dataAttrName: PropTypes.string,
-  /**
-   * dataAttrValue
-  */
-  dataAttrValue: PropTypes.string,
-  /**
-   * readOnly
-  */
-  readOnly: PropTypes.bool,
-  /**
-   * errorMessage
-  */
-  errorMessage: PropTypes.string,
-  /**
-   * errorMessageTextClassName
-  */
-  errorMessageTextClassName: PropTypes.string
-}
-
 export default Input

package/src/components/forms/InputFileUpload.jsx

@@ -1,10 +1,9 @@
 import React, { useState } from 'react'
-import PropTypes from 'prop-types'
 import styles from './InputFileUpload.module.css'
 import commonStyles from '../Common.module.css'
 import PlatformaticIcon from '../PlatformaticIcon'
 import Button from '../Button'
-import { ACTIVE_AND_INACTIVE_STATUS, ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
+import { ACTIVE_AND_INACTIVE_STATUS, ERROR_RED, MAIN_GREEN, WHITE } from '../constants'
 
 function InputFileUpload ({
   idInputFile = 'fileUpload',
@@ -139,103 +138,4 @@ function InputFileUpload ({
   )
 }
 
-InputFileUpload.propTypes = {
-  /**
-   * idInputFile
-   */
-  idInputFile: PropTypes.string,
-  /**
-   * placeholder
-   */
-  placeholder: PropTypes.string,
-  /**
-   * color of border
-   */
-  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
-  /**
-   * color of border
-   */
-  backgroundColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK, TRANSPARENT]),
-  /**
-   * onFileSelect
-   */
-  onFileSelect: PropTypes.func,
-  /**
-   * Disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * beforeIcon: PlatformaticIcon props
-   */
-  beforeIcon: PropTypes.shape({
-    iconName: PropTypes.string,
-    color: PropTypes.string,
-    onClick: PropTypes.func
-  }),
-  /**
-   * afterIcon: PlatformaticIcon props
-   */
-  afterIcon: PropTypes.shape({
-    iconName: PropTypes.string,
-    color: PropTypes.string,
-    onClick: PropTypes.func
-  }),
-  /**
-   * backgroundTransparent
-   */
-  backgroundTransparent: PropTypes.bool,
-  /**
-   * inputTextClassName
-   */
-  inputTextClassName: PropTypes.string,
-  /**
-   * detailTextClassName
-   */
-  detailTextClassName: PropTypes.string,
-  /**
-   * accept
-   */
-  accept: PropTypes.string,
-  /**
-   * verticalPaddingClassName
-   */
-  verticalPaddingClassName: PropTypes.string,
-  /**
-   * dataAttrName
-  */
-  dataAttrName: PropTypes.string,
-  /**
-   * dataAttrValue
-  */
-  dataAttrValue: PropTypes.string,
-  /**
-   * readOnly
-  */
-  readOnly: PropTypes.bool,
-  /**
-   * errorMessage
-  */
-  errorMessage: PropTypes.string,
-  /**
-   * errorMessageTextClassName
-  */
-  errorMessageTextClassName: PropTypes.string,
-  /**
-   * removeFileButton
-  */
-  removeFileButton: PropTypes.object,
-  /**
-   * showDetailButton
-  */
-  showDetailButton: PropTypes.bool,
-  /**
-   * detailFileButton
-  */
-  detailFileButton: PropTypes.object,
-  /**
-     * onClickDetail
-    */
-  onClickDetail: PropTypes.func
-}
-
 export default InputFileUpload

package/src/components/forms/InputWithSeparator.jsx

@@ -1,9 +1,8 @@
 import React, { useState, useEffect } from 'react'
-import PropTypes from 'prop-types'
 import inputStyles from './Input.module.css'
 import styles from './InputWithSeparator.module.css'
 import commonStyles from '../Common.module.css'
-import { DULLS_BACKGROUND_COLOR, ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, MEDIUM, OPACITY_30, RICH_BLACK, SIZES, SMALL, TRANSPARENT, WHITE } from '../constants'
+import { DULLS_BACKGROUND_COLOR, ERROR_RED, MAIN_GREEN, MEDIUM, OPACITY_30, SMALL, TRANSPARENT, WHITE } from '../constants'
 import BorderedBox from '../BorderedBox'
 import ButtonFullRounded from '../ButtonFullRounded'
 import PlatformaticIcon from '../PlatformaticIcon'
@@ -182,76 +181,4 @@ function InputWithSeparator ({
   )
 }
 
-InputWithSeparator.propTypes = {
-  /**
-   * placeholder
-   */
-  placeholder: PropTypes.string,
-  /**
-   * name
-   */
-  name: PropTypes.string,
-  /**
-   * value
-   */
-  value: PropTypes.string,
-  /**
-   * defaultValue
-   */
-  defaultValue: PropTypes.string,
-  /**
-   * defaultValueSeparator
-   */
-  defaultValueSeparator: PropTypes.string,
-  /**
-   * separators
-   */
-  separators: PropTypes.arrayOf(PropTypes.string),
-  /**
-   * inputTextClassName
-   */
-  inputTextClassName: PropTypes.string,
-  /**
-   * color of border
-   */
-  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK]),
-  /**
-   * color of border
-   */
-  backgroundColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE, RICH_BLACK, TRANSPARENT]),
-  /**
-   * onChange
-   */
-  onChange: PropTypes.func,
-  /**
-   * Disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * afterIcon: PlatformaticIcon props
-   */
-  afterIcon: PropTypes.shape({
-    iconName: PropTypes.string,
-    color: PropTypes.string,
-    handleClick: PropTypes.func,
-    disabled: PropTypes.bool
-  }),
-  /**
-   * beforeIcon: PlatformaticIcon props
-   */
-  beforeIcon: PropTypes.shape({
-    iconName: PropTypes.string,
-    color: PropTypes.string,
-    size: PropTypes.oneOf(SIZES)
-  }),
-  /**
-   * errorMessage
-  */
-  errorMessage: PropTypes.string,
-  /**
-   * errorMessageTextClassName
-  */
-  errorMessageTextClassName: PropTypes.string
-}
-
 export default InputWithSeparator

package/src/components/forms/Password.jsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react'
-import PropTypes from 'prop-types'
 import styles from './Password.module.css'
 import commonStyles from '../Common.module.css'
 import PlatformaticIcon from '../PlatformaticIcon'
-import { MAIN_DARK_BLUE, MAIN_GREEN } from '../constants'
+import { MAIN_DARK_BLUE } from '../constants'
 
-function Input ({
+function Password ({
   placeholder = '',
   value = '',
   name = '',
@@ -38,43 +37,4 @@ function Input ({
   )
 }
 
-Input.propTypes = {
-  /**
-   * placeholder
-   */
-  placeholder: PropTypes.string,
-  /**
-   * value
-   */
-  value: PropTypes.string,
-  /**
-   * name
-   */
-  name: PropTypes.string,
-  /**
-   * color of border
-   */
-  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE]),
-  /**
-   * onChange
-   */
-  onChange: PropTypes.func,
-  /**
-   * Disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * placeholderApart
-   */
-  placeholderApart: PropTypes.bool,
-  /**
-   * errorMessage
-  */
-  errorMessage: PropTypes.string,
-  /**
-   * errorMessageTextClassName
-  */
-  errorMessageTextClassName: PropTypes.string
-}
-
-export default Input
+export default Password

package/src/components/forms/Preview.jsx

@@ -1,9 +1,8 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styles from './Preview.module.css'
 import PlatformaticIcon from '../PlatformaticIcon'
 import CopyAndPaste from '../CopyAndPaste'
-import { SIZES, COLORS_ICON } from '../constants'
+import {} from '../constants'
 
 function renderLink (value) {
   return (<a className={styles.link} href={value} target='_blank' rel='noreferrer'>{value}</a>)
@@ -41,53 +40,4 @@ function Preview ({
   )
 }
 
-Preview.propTypes = {
-  /**
-   * title
-   */
-  title: PropTypes.string,
-  /**
-   * value
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]),
-  /**
-   * isLink
-   */
-  isLink: PropTypes.bool,
-  /**
-   * color of border
-   */
-  children: PropTypes.node,
-  /**
-   * useCopyAndPaste
-   */
-  useCopyAndPaste: PropTypes.bool,
-  /**
-   * copyAndPaste
-   */
-  copyAndPaste: PropTypes.shape({
-    value: PropTypes.string,
-    tooltipLabel: PropTypes.string,
-    iconSize: PropTypes.oneOf(SIZES),
-    iconColor: PropTypes.oneOf(COLORS_ICON),
-    timeout: PropTypes.number
-  }),
-  /**
-   * usePlatformaticIcon
-   */
-  usePlatformaticIcon: PropTypes.bool,
-  /**
-   * platformaticIcon
-   */
-  platformaticIcon: PropTypes.shape({
-    iconName: PropTypes.string.isRequired,
-    color: PropTypes.oneOf(COLORS_ICON),
-    size: PropTypes.oneOf(SIZES),
-    onClick: PropTypes.func
-  })
-}
-
 export default Preview

package/src/components/forms/RadioGroup.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import styles from './RadioGroup.module.css'
 import commonStyles from '../Common.module.css'
 
@@ -33,38 +32,4 @@ function RadioGroup ({
   )
 }
 
-RadioGroup.propTypes = {
-  /**
-   * name
-   */
-  name: PropTypes.string,
-  /**
-   * radios
-   */
-  radios: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string
-  })),
-  /**
-   * errorMessage
-   */
-  errorMessage: PropTypes.string,
-  /**
-   * errorMessageTextClassName
-  */
-  errorMessageTextClassName: PropTypes.string,
-  /**
-   * onChange
-   */
-  onChange: PropTypes.func,
-  /**
-   * Disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * value
-   */
-  value: PropTypes.string
-}
-
 export default RadioGroup