@platformatic/ui-components 0.4.0 → 0.5.1

package/src/components/forms/Password.jsx

@@ -6,7 +6,16 @@ import commonStyles from '../Common.module.css'
 import PlatformaticIcon from '../PlatformaticIcon'
 import { MAIN_DARK_BLUE, MAIN_GREEN } from '../constants'
 
-function Input ({ placeholder, value, name, borderColor, errorMessage, errorMessageTextClassName, onChange, disabled }) {
+function Input ({
+  placeholder = '',
+  value = '',
+  name = '',
+  borderColor = MAIN_DARK_BLUE,
+  errorMessage = '',
+  errorMessageTextClassName = '',
+  onChange = () => {},
+  disabled = false
+}) {
   const [type, setType] = useState('password')
   let passwordClassName = `${commonStyles.fullWidth} ${styles.password} `
   passwordClassName += commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + styles.afterIconPadding
@@ -55,10 +64,6 @@ Input.propTypes = {
    * Disabled
    */
   disabled: PropTypes.bool,
-  /**
-   * addFocus
-   */
-  focused: PropTypes.bool,
   /**
    * placeholderApart
    */
@@ -73,17 +78,4 @@ Input.propTypes = {
   errorMessageTextClassName: PropTypes.string
 }
 
-Input.defaultProps = {
-  placeholder: '',
-  value: '',
-  name: '',
-  borderColor: MAIN_DARK_BLUE,
-  errorMessage: '',
-  errorMessageTextClassName: '',
-  onChange: () => {},
-  disabled: false,
-  focused: false,
-  shadowPlaceholder: false
-}
-
 export default Input

package/src/components/forms/Preview.jsx

@@ -20,7 +20,16 @@ function renderParagraph (value, useCopyAndPaste, copyAndPaste, usePlatformaticI
     </>
   )
 }
-function Preview ({ title, value, isLink, children, useCopyAndPaste, copyAndPaste, usePlatformaticIcon, platformaticIcon }) {
+function Preview ({
+  title = '',
+  value = '',
+  isLink = false,
+  children = null,
+  useCopyAndPaste = false,
+  copyAndPaste = null,
+  platformaticIcon = null,
+  usePlatformaticIcon = false
+}) {
   return (
     <>
       <div className={styles.container}>
@@ -81,15 +90,4 @@ Preview.propTypes = {
   })
 }
 
-Preview.defaultProps = {
-  title: '',
-  value: '',
-  isLink: false,
-  children: null,
-  useCopyAndPaste: false,
-  copyAndPaste: null,
-  platformaticIcon: null,
-  usePlatformaticIcon: false
-}
-
 export default Preview

package/src/components/forms/RadioGroup.jsx

@@ -3,9 +3,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './RadioGroup.module.css'
 import commonStyles from '../Common.module.css'
-import { MAIN_DARK_BLUE, MAIN_GREEN } from '../constants'
 
-function RadioGroup ({ name, radios, errorMessage, errorMessageTextClassName, onChange, disabled, value }) {
+function RadioGroup ({
+  name = '',
+  radios = [],
+  errorMessage = '',
+  errorMessageTextClassName = '',
+  onChange = () => {},
+  disabled = false,
+  value = ''
+}) {
   let radioContainerClass = styles.radioContainer
   const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
 
@@ -55,25 +62,10 @@ RadioGroup.propTypes = {
    * Disabled
    */
   disabled: PropTypes.bool,
-  /**
-   * color
-   */
-  color: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE]),
   /**
    * value
    */
   value: PropTypes.string
 }
 
-RadioGroup.defaultProps = {
-  name: '',
-  radios: [],
-  errorMessage: '',
-  errorMessageTextClassName: '',
-  onChange: () => {},
-  disabled: false,
-  color: MAIN_DARK_BLUE,
-  value: ''
-}
-
 export default RadioGroup

package/src/components/forms/Select.jsx

@@ -7,24 +7,25 @@ import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, SMALL, WHITE } from '../constan
 import PlatformaticIcon from '../PlatformaticIcon'
 
 function Select ({
-  defaultContainerClassName,
-  placeholder,
-  name,
-  value,
-  options,
-  defaultOptionsClassName,
-  optionsBorderedBottom,
-  borderColor,
-  borderListColor,
-  errorMessage,
-  errorMessageTextClassName,
-  onSelect,
-  disabled,
-  mainColor,
-  dataAttrName,
-  dataAttrValue,
-  backgroundColor,
-  inputTextClassName
+  defaultContainerClassName = '',
+  placeholder = 'this is the default',
+  name = '',
+  value = '',
+  id = '',
+  options = [],
+  defaultOptionsClassName = '',
+  optionsBorderedBottom = true,
+  borderColor = MAIN_GREEN,
+  borderListColor = '',
+  errorMessage = '',
+  errorMessageTextClassName = '',
+  onSelect = () => {},
+  disabled = false,
+  mainColor = MAIN_DARK_BLUE,
+  dataAttrName = '',
+  dataAttrValue = '',
+  backgroundColor = WHITE,
+  inputTextClassName = ''
 }) {
   const inputRef = useRef()
   const [showOptions, setShowOptions] = useState(false)
@@ -262,26 +263,4 @@ Select.propTypes = {
   errorMessageTextClassName: PropTypes.string
 }
 
-Select.defaultProps = {
-  defaultContainerClassName: '',
-  placeholder: 'this is the default',
-  name: '',
-  value: '',
-  id: '',
-  options: [],
-  defaultOptionsClassName: '',
-  optionsBorderedBottom: true,
-  borderColor: MAIN_GREEN,
-  borderListColor: '',
-  errorMessage: '',
-  errorMessageTextClassName: '',
-  onSelect: () => {},
-  disabled: false,
-  mainColor: MAIN_DARK_BLUE,
-  dataAttrName: '',
-  dataAttrValue: '',
-  backgroundColor: WHITE,
-  inputTextClassName: ''
-}
-
 export default Select

package/src/components/forms/SelectWithInput.jsx

@@ -7,27 +7,28 @@ import { MAIN_DARK_BLUE, MAIN_GREEN, RICH_BLACK, SMALL, WHITE } from '../constan
 import PlatformaticIcon from '../PlatformaticIcon'
 
 function SelectWithInput ({
-  defaultContainerClassName,
-  placeholder,
-  name,
-  value,
-  options,
-  defaultOptionsClassName,
-  optionsBorderedBottom,
-  borderColor,
-  borderListColor,
-  errorMessage,
-  errorMessageTextClassName,
-  onChange,
-  onSelect,
-  onClear,
-  disabled,
-  mainColor,
-  optionSelected,
-  dataAttrName,
-  dataAttrValue,
-  backgroundColor,
-  inputTextClassName
+  defaultContainerClassName = '',
+  placeholder = 'this is the default',
+  name = '',
+  value = '',
+  id = '',
+  options = [],
+  defaultOptionsClassName = '',
+  optionsBorderedBottom = true,
+  borderColor = MAIN_GREEN,
+  borderListColor = '',
+  errorMessage = '',
+  errorMessageTextClassName = '',
+  onChange = () => {},
+  onSelect = () => {},
+  onClear = () => {},
+  disabled = false,
+  mainColor = MAIN_DARK_BLUE,
+  optionSelected = null,
+  dataAttrName = '',
+  dataAttrValue = '',
+  backgroundColor = WHITE,
+  inputTextClassName = ''
 }) {
   const inputRef = useRef()
   const [showOptions, setShowOptions] = useState(false)
@@ -309,29 +310,4 @@ SelectWithInput.propTypes = {
   errorMessageTextClassName: PropTypes.string
 }
 
-SelectWithInput.defaultProps = {
-  defaultContainerClassName: '',
-  placeholder: 'this is the default',
-  name: '',
-  value: '',
-  id: '',
-  options: [],
-  defaultOptionsClassName: '',
-  optionsBorderedBottom: true,
-  borderColor: MAIN_GREEN,
-  borderListColor: '',
-  errorMessage: '',
-  errorMessageTextClassName: '',
-  onChange: () => {},
-  onSelect: () => {},
-  onClear: () => {},
-  disabled: false,
-  mainColor: MAIN_DARK_BLUE,
-  optionSelected: null,
-  dataAttrName: '',
-  dataAttrValue: '',
-  backgroundColor: WHITE,
-  inputTextClassName: ''
-}
-
 export default SelectWithInput

package/src/components/forms/TextArea.jsx

@@ -7,17 +7,17 @@ import PlatformaticIcon from '../PlatformaticIcon'
 import { MAIN_DARK_BLUE, MAIN_GREEN } from '../constants'
 
 function TextArea ({
-  placeholder,
-  value,
-  name,
-  borderColor,
-  errorMessage,
-  errorMessageTextClassName,
-  onChange,
-  disabled,
-  afterIcon,
-  rows,
-  cols
+  placeholder = '',
+  value = '',
+  name = '',
+  borderColor = MAIN_DARK_BLUE,
+  errorMessage = '',
+  errorMessageTextClassName = '',
+  onChange = () => {},
+  disabled = false,
+  afterIcon = null,
+  rows = 5,
+  cols = 20
 }) {
   let className = styles.textAreaContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`]
   const showError = errorMessage.length > 0
@@ -88,18 +88,4 @@ TextArea.propTypes = {
   errorMessageTextClassName: PropTypes.string
 }
 
-TextArea.defaultProps = {
-  placeholder: '',
-  value: '',
-  name: '',
-  borderColor: MAIN_DARK_BLUE,
-  errorMessage: '',
-  errorMessageTextClassName: '',
-  onChange: () => {},
-  disabled: false,
-  afterIcon: null,
-  rows: 5,
-  cols: 20
-}
-
 export default TextArea

package/src/components/forms/ToggleSwitch.jsx

@@ -5,14 +5,14 @@ import styles from './ToggleSwitch.module.css'
 import commonStyles from '../Common.module.css'
 
 function ToggleSwitch ({
-  name,
-  label,
-  labelClassName,
-  errorMessage,
-  errorMessageTextClassName,
-  onChange,
-  checked,
-  disabled
+  name = '',
+  label = '',
+  labelClassName = '',
+  errorMessage = '',
+  errorMessageTextClassName = '',
+  onChange = () => {},
+  checked = false,
+  disabled = false
 }) {
   let className = `${styles.switch} `
   if (disabled) className += styles.disabled
@@ -69,15 +69,4 @@ ToggleSwitch.propTypes = {
 
 }
 
-ToggleSwitch.defaultProps = {
-  name: '',
-  label: '',
-  errorMessage: '',
-  errorMessageTextClassName: '',
-  checked: false,
-  disabled: false,
-  onChange: () => {},
-  labelClassName: ''
-}
-
 export default ToggleSwitch

package/src/components/icons/APIDocsIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const APIDocsIcon = ({ color, size, disabled, inactive }) => {
+const APIDocsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -104,11 +109,5 @@ APIDocsIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-APIDocsIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default APIDocsIcon

package/src/components/icons/AddIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const AddIcon = ({ color, size, disabled, inactive }) => {
+const AddIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -84,11 +89,5 @@ AddIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AddIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AddIcon

package/src/components/icons/AlertIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, ERROR_RED } from '../constants'
 
-const AlertIcon = ({ color, size, disabled, inactive }) => {
+const AlertIcon = ({
+  color = ERROR_RED,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -87,11 +92,5 @@ AlertIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AlertIcon.defaultProps = {
-  color: ERROR_RED,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AlertIcon

package/src/components/icons/AllAppsIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const AllAppsIcon = ({ color, size, disabled, inactive }) => {
+const AllAppsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -100,11 +105,5 @@ AllAppsIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AllAppsIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AllAppsIcon

package/src/components/icons/AllInOneIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const AllInOneIcon = ({ color, size, disabled, inactive }) => {
+const AllInOneIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -117,11 +122,5 @@ AllInOneIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AllInOneIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AllInOneIcon

package/src/components/icons/ApiCloudIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const ApiCloudIcon = ({ color, size, disabled, inactive }) => {
+const ApiCloudIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -99,11 +104,5 @@ ApiCloudIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ApiCloudIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ApiCloudIcon

package/src/components/icons/ApiEmptyIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const ApiEmptyIcon = ({ color, size, disabled, inactive }) => {
+const ApiEmptyIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -147,11 +152,5 @@ ApiEmptyIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ApiEmptyIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ApiEmptyIcon

package/src/components/icons/ApiIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const ApiIcon = ({ color, size, disabled, inactive }) => {
+const ApiIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -90,11 +95,5 @@ ApiIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ApiIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ApiIcon

package/src/components/icons/ApiIconClosed.jsx

@@ -1,13 +1,21 @@
 import * as React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES } from '../constants'
+import { COLORS_ICON, MAIN_DARK_BLUE, MEDIUM, SIZES } from '../constants'
 
-const ApiIconClosed = ({ color, size, disabled }) => {
+const ApiIconClosed = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
   }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
   let icon = <></>
 
   switch (size) {
@@ -51,9 +59,5 @@ ApiIconClosed.propTypes = {
    */
   disabled: PropTypes.bool
 }
-ApiIconClosed.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
-}
 
 export default ApiIconClosed

package/src/components/icons/ApiPerformanceIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const ApiPerformanceIcon = ({ color, size, disabled, inactive }) => {
+const ApiPerformanceIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -105,11 +110,5 @@ ApiPerformanceIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-ApiPerformanceIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default ApiPerformanceIcon

package/src/components/icons/AppConfigurationIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const AppConfigurationIcon = ({ color, size, disabled, inactive }) => {
+const AppConfigurationIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -108,11 +113,5 @@ AppConfigurationIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppConfigurationIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppConfigurationIcon

package/src/components/icons/AppDetailsIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const AppDetailsIcon = ({ color, size, disabled, inactive }) => {
+const AppDetailsIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -89,11 +94,5 @@ AppDetailsIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-AppDetailsIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default AppDetailsIcon