@platformatic/ui-components 0.5.0 → 0.5.1

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

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/BranchIcon.jsx

@@ -0,0 +1,102 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const BranchIcon = ({
+  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) {
+    case SMALL:
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='3.8001' cy='4.8' r='1.8' transform='rotate(90 3.8001 4.8)' stroke='none' />
+          <circle cx='12.2' cy='4.8' r='1.8' transform='rotate(90 12.2 4.8)' stroke='none' />
+          <line x1='10.3999' y1='4.69995' x2='5.5999' y2='4.69995' stroke='none' />
+          <circle cx='11.8001' cy='10.8' r='1.8' transform='rotate(90 11.8001 10.8)' stroke='none' />
+          <path d='M6 5V5C7.10457 5 8 5.89543 8 7L8 9C8 10.1046 8.89543 11 10 11V11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='5.6999' cy='7.2' r='2.7' transform='rotate(90 5.6999 7.2)' stroke='none' strokeWidth={1.5} />
+          <circle cx='18.3' cy='7.2' r='2.7' transform='rotate(90 18.3 7.2)' stroke='none' strokeWidth={1.5} />
+          <line x1='15.6001' y1='7.05005' x2='8.4001' y2='7.05005' stroke='none' strokeWidth={1.5} />
+          <circle cx='17.6999' cy='16.1999' r='2.7' transform='rotate(90 17.6999 16.1999)' stroke='none' strokeWidth={1.5} />
+          <path d='M8.99951 7.49988V7.49988C10.6564 7.49988 11.9995 8.84303 11.9995 10.4999L11.9995 13.4999C11.9995 15.1567 13.3427 16.4999 14.9995 16.4999V16.4999' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='9.5' cy='12' r='4.5' transform='rotate(90 9.5 12)' stroke='none' strokeWidth={2} />
+          <circle cx='30.5' cy='12' r='4.5' transform='rotate(90 30.5 12)' stroke='none' strokeWidth={2} />
+          <line x1='26' y1='11.5' x2='14' y2='11.5' stroke='none' strokeWidth={2} />
+          <circle cx='29.5' cy='26.9999' r='4.5' transform='rotate(90 29.5 26.9999)' stroke='none' strokeWidth={2} />
+          <path d='M14.9995 12.4999V12.4999C17.7609 12.4999 19.9995 14.7385 19.9995 17.4999L19.9995 22.4999C19.9995 25.2613 22.2381 27.4999 24.9995 27.4999V27.4999' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+BranchIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default BranchIcon