@platformatic/ui-components 0.4.0 → 0.5.1

package/src/components/ModalDirectional.jsx

@@ -12,13 +12,13 @@ import {
 import Button from './Button'
 
 function ModalDirectional ({
-  setIsOpen,
-  title,
-  titleClassName,
-  children,
-  smallLayout,
-  classNameModalLefty,
-  permanent
+  children = null,
+  setIsOpen = () => {},
+  title = '',
+  titleClassName = '',
+  smallLayout = false,
+  classNameModalLefty = '',
+  permanent = false
 }) {
   const className = `${styles.container} ${styles.modalLeftCover} ${smallLayout ? styles.smallLayout : styles.normalLayout}`
   const [modalClassName] = useState(className)
@@ -88,23 +88,13 @@ ModalDirectional.propTypes = {
    */
   smallLayout: PropTypes.bool,
   /**
-   * classNameLefty
+   * classNameModalLefty
    */
-  classNameLefty: PropTypes.string,
+  classNameModalLefty: PropTypes.string,
   /**
    * permanent: modal could be closed only with Esc, X or Cancel
    */
   permanent: PropTypes.bool
 }
 
-ModalDirectional.defaultProps = {
-  children: null,
-  setIsOpen: () => {},
-  title: '',
-  titleClassName: '',
-  smallLayout: false,
-  classNameLefty: '',
-  permanent: false
-}
-
 export default ModalDirectional

package/src/components/ModalStepsForward.jsx

@@ -8,19 +8,19 @@ import HorizontalSeparator from './HorizontalSeparator'
 import styles from './ModalStepsForward.module.css'
 import commonStyles from './Common.module.css'
 import {
-  MODAL_SIZES,
-  SMALL,
-  MODAL_LAYOUTS,
-  MODAL_POPUP,
   MAIN_DARK_BLUE,
   DULLS_BACKGROUND_COLOR,
   LARGE,
-  PROFILES,
   MARGIN_0,
   OPACITY_20
 } from './constants'
 
-function ModalStepsForward ({ setIsOpen, right, stepper, left }) {
+function ModalStepsForward ({
+  setIsOpen = () => {},
+  right = null,
+  stepper = null,
+  left = null
+}) {
   const buttonFullRoundedClassName = commonStyles['background-color-white']
   let modalCoverClassName = `${styles.container} ${styles.fullscreen} `
   modalCoverClassName += commonStyles['background-color-light-blue']
@@ -62,29 +62,17 @@ ModalStepsForward.propTypes = {
    */
   setIsOpen: PropTypes.func,
   /**
-   * layout
+   * right
    */
-  layout: PropTypes.oneOf(MODAL_LAYOUTS),
+  right: PropTypes.node,
   /**
-   * Size
+   * stepper
    */
-  size: PropTypes.oneOf(MODAL_SIZES),
+  stepper: PropTypes.node,
   /**
-   * profile
+   * left
    */
-  profile: PropTypes.oneOf(PROFILES),
-  /**
-   * backgroundClassName
-   */
-  backgroundClassName: PropTypes.string
-}
-
-ModalStepsForward.defaultProps = {
-  setIsOpen: () => {},
-  layout: MODAL_POPUP,
-  size: SMALL,
-  profile: '',
-  backgroundClassName: ''
+  left: PropTypes.node
 }
 
 export default ModalStepsForward

package/src/components/PlatformaticIcon.jsx

@@ -6,15 +6,15 @@ import styles from './PlatformaticIcon.module.css'
 import { COLORS_ICON, MAIN_GREEN, SIZES, SMALL } from './constants'
 
 function PlatformaticIcon ({
-  iconName,
-  color,
-  onClick,
-  size,
-  classes,
-  tip,
-  disabled,
-  inactive,
-  internalOverHandling,
+  iconName = '',
+  color = MAIN_GREEN,
+  onClick = () => {},
+  size = SMALL,
+  classes = '',
+  tip = '',
+  disabled = false,
+  inactive = false,
+  internalOverHandling = false,
   ...rest
 }) {
   const [hover, setHover] = useState(false)
@@ -90,16 +90,4 @@ PlatformaticIcon.propTypes = {
   internalOverHandling: PropTypes.bool
 }
 
-PlatformaticIcon.defaultProps = {
-  iconName: '',
-  color: MAIN_GREEN,
-  size: SMALL,
-  onClick: () => {},
-  classes: '',
-  tip: '',
-  disabled: false,
-  inactive: false,
-  internalOverHandling: false
-}
-
 export default PlatformaticIcon

package/src/components/SearchBarV2.jsx

@@ -6,15 +6,15 @@ import styles from './SearchBarV2.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
 import { RICH_BLACK, SMALL, TRANSPARENT, WHITE } from './constants'
 function SearchBarV2 ({
-  onSubmit,
-  onChange,
-  onClear,
-  color,
-  backgroundColor,
-  placeholder,
-  dataAttrName,
-  dataAttrValue,
-  inputTextClassName
+  color = WHITE,
+  backgroundColor = RICH_BLACK,
+  onSubmit = () => { },
+  onChange = () => { },
+  onClear = () => { },
+  placeholder = 'Search',
+  dataAttrName = '',
+  dataAttrValue = '',
+  inputTextClassName = ''
 }) {
   const inputRef = useRef()
   const baseClassName = `${styles.container} ${styles.wrapperPadding} ` + commonStyles[`background-color-${backgroundColor}`]
@@ -119,17 +119,4 @@ SearchBarV2.propTypes = {
   inputTextClassName: PropTypes.string
 }
 
-SearchBarV2.defaultProps = {
-  color: WHITE,
-  backgroundColor: RICH_BLACK,
-  onSubmit: () => { },
-  onChange: () => { },
-  onClear: () => { },
-  placeholder: 'Search',
-  dataAttrName: '',
-  dataAttrValue: '',
-  inputTextClassName: ''
-
-}
-
 export default SearchBarV2

package/src/components/Sidebar.jsx

@@ -10,19 +10,18 @@ import PlatformaticIcon from './PlatformaticIcon'
 import PropTypes from 'prop-types'
 import { DULLS_BACKGROUND_COLOR, MEDIUM, WHITE } from './constants'
 
-function Sidebar (props) {
-  const {
-    title,
-    labelButtonSettings,
-    defaultSelected,
-    onClickItemSelectedParent,
-    items,
-    onClickAdd,
-    addTitle,
-    onClickSettings,
-    disableClickAdd,
-    disableClickSettings
-  } = props
+function Sidebar ({
+  title = '',
+  labelButtonSettings = 'Settings',
+  defaultSelected = null,
+  onClickItemSelectedParent = () => {},
+  items = [],
+  onClickAdd = () => {},
+  addTitle = 'Add',
+  onClickSettings = () => {},
+  disableClickAdd = false,
+  disableClickSettings = false
+}) {
   const [collapsed, setCollapsed] = useState(false)
   const [selectedItem, setSelectedItem] = useState(null)
   const disabledCreateButton = disableClickAdd ? styles.disabled : ''
@@ -190,17 +189,4 @@ Sidebar.propTypes = {
   disableClickSettings: PropTypes.bool
 }
 
-Sidebar.defaultProps = {
-  title: '',
-  labelButtonSettings: 'Settings',
-  defaultSelected: null,
-  onClickItemSelectedParent: () => {},
-  items: [],
-  onClickAdd: () => {},
-  addTitle: 'Add',
-  onClickSettings: () => {},
-  disableClickAdd: false,
-  disableClickSettings: false
-}
-
 export default Sidebar

package/src/components/Status.jsx

@@ -4,7 +4,11 @@ import PropTypes from 'prop-types'
 import PlatformaticIcon from './PlatformaticIcon'
 import { COLORS_ICON, EXTRA_SMALL, SIZES, WHITE } from './constants'
 
-function Status ({ color, status, size }) {
+function Status ({
+  color = WHITE,
+  status = '',
+  size = EXTRA_SMALL
+}) {
   const className = `inline-flex items-center text-${color}`
   return (
     <div className={className}>
@@ -30,10 +34,4 @@ Status.propTypes = {
 
 }
 
-Status.defaultProps = {
-  color: WHITE,
-  status: '',
-  size: EXTRA_SMALL
-}
-
 export default Status

package/src/components/TabbedWindow.jsx

@@ -3,7 +3,13 @@ import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import styles from './TabbedWindow.module.css'
 
-function TabbedWindow ({ tabs, keySelected, callbackSelected }) {
+function TabbedWindow ({
+  tabs = [],
+  keySelected = '',
+  callbackSelected = () => {},
+  tabContainerClassName = '',
+  tabContentClassName = ''
+}) {
   const headers = []
   const keys = []
   const components = []
@@ -14,7 +20,8 @@ function TabbedWindow ({ tabs, keySelected, callbackSelected }) {
   })
   const [selected, setSelected] = useState(keySelected || tabs?.at(0).key || '')
   const [currentComponent, setCurrentComponent] = useState(components[0])
-
+  const containerClassName = tabContainerClassName || styles.tabContainerClassName
+  const contentClassName = tabContentClassName || styles.tabContentClassName
   useEffect(() => {
     const indexKey = keys.findIndex(key => key === selected)
     setCurrentComponent(components[indexKey])
@@ -26,7 +33,7 @@ function TabbedWindow ({ tabs, keySelected, callbackSelected }) {
   }
 
   return (
-    <div className={styles['tabbed-container']}>
+    <div className={containerClassName}>
       <div className={styles['tabs-header']}>
         {headers.map((header, index) => {
           return (
@@ -38,7 +45,7 @@ function TabbedWindow ({ tabs, keySelected, callbackSelected }) {
           )
         })}
       </div>
-      <div className={styles['tabs-content']}>{currentComponent}</div>
+      <div className={contentClassName}>{currentComponent}</div>
     </div>
   )
 }
@@ -59,10 +66,4 @@ TabbedWindow.propTypes = {
 
 }
 
-TabbedWindow.defaultProps = {
-  tabs: [],
-  keySelected: '',
-  callbackSelected: () => {}
-}
-
 export default TabbedWindow

package/src/components/TabbedWindow.module.css

@@ -1,4 +1,4 @@
-.tabbed-container {
+.tabContainerClassName {
   @apply bg-main-dark-blue;
 }
 .tabs-header {
@@ -8,10 +8,10 @@
   @apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0 hover:font-semibold;  
 }
 .selected-tab {
-  @apply underline text-main-green underline-offset-8 font-semibold;
+  @apply underline underline-offset-8 font-semibold;
 }
-.tabs-content {
-  @apply min-h-screen
+.tabContentClassName {
+  @apply max-h-[calc(100vH-10rem)] overflow-y-auto
 }
 .tab::before {
   display: block;

package/src/components/Tag.jsx

@@ -5,7 +5,15 @@ import commonStyles from './Common.module.css'
 import styles from './Tag.module.css'
 import { COLORS_BUTTON, OPACITY_100, OPACITY_20, OPACITY_30, OPACITY_60, WHITE } from './constants'
 
-function Tag ({ text, textClassName, color, backgroundColor, bordered, opaque, fullRounded }) {
+function Tag ({
+  text = '',
+  textClassName = '',
+  color = WHITE,
+  backgroundColor = '',
+  bordered = true,
+  opaque = OPACITY_100,
+  fullRounded = false
+}) {
   const stylesColor = textClassName || commonStyles[`text--${color}`]
   let stylesBorderColor = ''
   if (bordered) {
@@ -56,14 +64,4 @@ Tag.propTypes = {
 
 }
 
-Tag.defaultProps = {
-  backgroundColor: '',
-  color: WHITE,
-  text: '',
-  textClassName: '',
-  bordered: true,
-  opaque: OPACITY_100,
-  fullRounded: false
-}
-
 export default Tag

package/src/components/TextWithLabel.jsx

@@ -3,7 +3,13 @@ import PropTypes from 'prop-types'
 import { FONT_BASE, FONT_XS, MAIN_DARK_BLUE, WHITE } from './constants'
 import commonStyles from './Common.module.css'
 import styles from './TextWithLabel.module.css'
-function TextWithLabel ({ label, text, children, color, fontSize }) {
+function TextWithLabel ({
+  label = '',
+  text = '',
+  children = null,
+  color = WHITE,
+  fontSize = FONT_BASE
+}) {
   const className = commonStyles[`text--${color}`] + ' ' + commonStyles[`text--${fontSize}`]
   return (
     <div className={className}>
@@ -37,12 +43,4 @@ TextWithLabel.propTypes = {
   fontSize: PropTypes.oneOf([FONT_BASE, FONT_XS])
 }
 
-TextWithLabel.defaultProps = {
-  label: '',
-  text: '',
-  children: null,
-  color: WHITE,
-  fontSize: FONT_BASE
-}
-
 export default TextWithLabel

package/src/components/Tooltip.jsx

@@ -5,14 +5,14 @@ import { useEffect, useRef, useState } from 'react'
 import { DIRECTIONS, DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP } from './constants'
 
 function Tooltip ({
-  direction,
-  visible,
-  activeDependsOnVisible,
-  content,
-  delay,
-  children,
-  tooltipClassName,
-  offset
+  direction = DIRECTION_TOP,
+  visible = false,
+  activeDependsOnVisible = false,
+  content = null,
+  delay = 0,
+  children = null,
+  tooltipClassName = '',
+  offset = 0
 }) {
   let timeout
   const [active, setActive] = useState(activeDependsOnVisible ? visible : false)
@@ -117,15 +117,4 @@ Tooltip.propTypes = {
   offset: PropTypes.number
 }
 
-Tooltip.defaultProps = {
-  direction: DIRECTION_TOP,
-  tooltipClassName: '',
-  delay: 0,
-  activeDependsOnVisible: false,
-  visible: false,
-  children: null,
-  content: null,
-  offset: 0
-}
-
 export default Tooltip

package/src/components/TooltipAbsolute.jsx

@@ -2,18 +2,18 @@
 import PropTypes from 'prop-types'
 import styles from './TooltipAbsolute.module.css'
 import { useEffect, useState } from 'react'
-import { DIRECTIONS, DIRECTION_LEFT, DIRECTION_BOTTOM, DIRECTION_TOP, DIRECTION_RIGHT } from './constants'
+import { DIRECTIONS, DIRECTION_LEFT, DIRECTION_BOTTOM, DIRECTION_TOP, DIRECTION_RIGHT, POSITION_START } from './constants'
 
 const TooltipAbsolute = ({
-  direction,
-  content,
-  delay,
-  children,
-  tooltipClassName,
-  offset,
-  position,
-  visible,
-  activeDependsOnVisible
+  direction = DIRECTION_TOP,
+  tooltipClassName = '',
+  delay = 0,
+  children = null,
+  content = null,
+  offset = 0,
+  position = POSITION_START,
+  visible = false,
+  activeDependsOnVisible = false
 }) => {
   let timeout
   const [active, setActive] = useState(activeDependsOnVisible ? visible : false)
@@ -109,16 +109,4 @@ TooltipAbsolute.propTypes = {
   activeDependsOnVisible: PropTypes.bool
 }
 
-TooltipAbsolute.defaultProps = {
-  direction: DIRECTION_TOP,
-  tooltipClassName: '',
-  delay: 0,
-  children: null,
-  content: null,
-  offset: 0,
-  position: 'start',
-  activeDependsOnVisible: false,
-  visible: false
-}
-
 export default TooltipAbsolute

package/src/components/VerticalSeparator.jsx

@@ -5,7 +5,11 @@ import { DARK_GREEN, MAIN_DARK_BLUE, OPACITY_10, OPACITY_20, OPACITY_30, OPACITY
 import commonStyles from './Common.module.css'
 import styles from './VerticalSeparator.module.css'
 
-function VerticalSeparator ({ color, backgroundColorOpacity, classes }) {
+function VerticalSeparator ({
+  color = DARK_GREEN,
+  backgroundColorOpacity = OPACITY_100,
+  classes = ''
+}) {
   const backgroundColor = commonStyles[`background-color-${color}`]
   const backgroundOpacity = commonStyles[`background-color-opaque-${backgroundColorOpacity}`]
   const className = `${backgroundColor} ${backgroundOpacity} ${styles.fullHeight} ${classes}`
@@ -32,10 +36,4 @@ VerticalSeparator.propTypes = {
 
 }
 
-VerticalSeparator.defaultProps = {
-  color: DARK_GREEN,
-  backgroundColorOpacity: 100,
-  classes: ''
-}
-
 export default VerticalSeparator

package/src/components/forms/Field.jsx

@@ -4,14 +4,14 @@ import styles from './Field.module.css'
 import { ERROR_RED, MAIN_DARK_BLUE, WHITE } from '../constants'
 
 function Field ({
-  title,
-  titleColor,
-  helper,
-  children,
-  disabled,
-  required,
-  titleClassName,
-  helperClassName
+  title = '',
+  titleColor = MAIN_DARK_BLUE,
+  helper = '',
+  children = null,
+  disabled = false,
+  required = false,
+  titleClassName = '',
+  helperClassName = ''
 }) {
   let className = `${styles.container}`
   if (disabled) className += ` ${styles.disabled}`
@@ -67,15 +67,4 @@ Field.propTypes = {
   helperClassName: PropTypes.string
 }
 
-Field.defaultProps = {
-  title: '',
-  titleColor: 'main-dark-blue',
-  helper: '',
-  children: null,
-  disabled: false,
-  required: false,
-  titleClassName: '',
-  helperClassName: ''
-}
-
 export default Field

package/src/components/forms/Input.jsx

@@ -7,23 +7,23 @@ import PlatformaticIcon from '../PlatformaticIcon'
 import { ERROR_RED, MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, TRANSPARENT, WHITE } from '../constants'
 
 function Input ({
-  placeholder,
-  value,
-  name,
-  borderColor,
-  errorMessage,
-  errorMessageTextClassName,
-  onChange,
-  disabled,
-  beforeIcon,
-  afterIcon,
-  placeholderApart,
-  backgroundColor,
-  inputTextClassName,
-  verticalPaddingClassName,
-  dataAttrName,
-  dataAttrValue,
-  readOnly
+  placeholder = '',
+  value = '',
+  name = '',
+  borderColor = MAIN_GREEN,
+  errorMessage = '',
+  errorMessageTextClassName = '',
+  onChange = () => {},
+  disabled = false,
+  beforeIcon = null,
+  afterIcon = null,
+  placeholderApart = '',
+  backgroundColor = WHITE,
+  inputTextClassName = '',
+  verticalPaddingClassName = '',
+  dataAttrName = '',
+  dataAttrValue = '',
+  readOnly = false
 }) {
   let baseInputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName} `
   baseInputClassName += verticalPaddingClassName || ` ${styles.inputDefaultVerticalPadding} `
@@ -169,24 +169,4 @@ Input.propTypes = {
   errorMessageTextClassName: PropTypes.string
 }
 
-Input.defaultProps = {
-  placeholder: '',
-  value: '',
-  name: '',
-  borderColor: MAIN_GREEN,
-  backgroundColor: WHITE,
-  errorMessage: '',
-  errorMessageTextClassName: '',
-  onChange: () => {},
-  disabled: false,
-  beforeIcon: null,
-  afterIcon: null,
-  shadowPlaceholder: false,
-  inputTextClassName: '',
-  verticalPaddingClassName: '',
-  dataAttrName: '',
-  dataAttrValue: '',
-  readOnly: false
-}
-
 export default Input

package/src/components/forms/InputWithSeparator.jsx

@@ -9,20 +9,20 @@ import BorderedBox from '../BorderedBox'
 import ButtonFullRounded from '../ButtonFullRounded'
 
 function InputWithSeparator ({
-  placeholder,
-  name,
-  borderColor,
-  backgroundColor,
-  errorMessage,
-  errorMessageTextClassName,
-  onChange,
-  disabled,
-  afterIcon,
-  defaultValue,
-  defaultValueSeparator,
-  value,
-  separators,
-  inputTextClassName
+  placeholder = '',
+  name = '',
+  value = '',
+  borderColor = MAIN_GREEN,
+  backgroundColor = WHITE,
+  errorMessage = '',
+  errorMessageTextClassName = '',
+  onChange = () => {},
+  disabled = false,
+  afterIcon = null,
+  defaultValue = '',
+  defaultValueSeparator = ',',
+  separators = [''],
+  inputTextClassName = ''
 }) {
   const showError = errorMessage.length > 0
   const [focus, setFocus] = useState(false)
@@ -235,21 +235,4 @@ InputWithSeparator.propTypes = {
   errorMessageTextClassName: PropTypes.string
 }
 
-InputWithSeparator.defaultProps = {
-  placeholder: '',
-  value: '',
-  defaultValue: '',
-  defaultValueSeparator: ',',
-  name: '',
-  borderColor: MAIN_GREEN,
-  backgroundColor: WHITE,
-  errorMessage: '',
-  errorMessageTextClassName: '',
-  onChange: () => {},
-  disabled: false,
-  afterIcon: null,
-  separators: [''],
-  inputTextClassName: ''
-}
-
 export default InputWithSeparator