@platformatic/ui-components 0.1.104 → 0.1.106

package/src/components/forms/Select.jsx

@@ -0,0 +1,125 @@
+'use strict'
+import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+import styles from './Select.module.css'
+import commonStyles from '../Common.module.css'
+import { MAIN_DARK_BLUE, MAIN_GREEN } from '../constants'
+import PlatformaticIcon from '../PlatformaticIcon'
+
+function Select ({ placeholder, name, value, options, borderColor, errorMessage, onChange, onSelect, disabled }) {
+  const inputRef = useRef()
+  const [showOptions, setShowOptions] = useState(false)
+  const [isSelected, setIsSelected] = useState(false)
+  const showError = errorMessage.length > 0
+  let inputClassName = `${commonStyles.fullWidth} ${styles.select} `
+  inputClassName += ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`]
+  if (showError) inputClassName += ' ' + commonStyles['bordered--error-red']
+  if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
+
+  function setSelected ({ label, value }) {
+    setIsSelected(true)
+    setShowOptions(false)
+    /* eslint-disable-next-line no-undef */
+    onSelect(new CustomEvent('valueSelected', {
+      detail: {
+        name,
+        label,
+        value
+      }
+    }))
+  }
+
+  useEffect(() => {
+    if (value.length > 0 && !showOptions && !isSelected) {
+      setShowOptions(true)
+    }
+    if (value.length === 0) {
+      setIsSelected(false)
+    }
+  }, [value])
+
+  function renderOptions () {
+    const filteredOptions = value.length > 0 ? options.filter(option => option.label.toLowerCase().includes(value.toLowerCase())) : options
+    return (
+      <ul className={styles.options}>
+        {filteredOptions.length > 0 ? filteredOptions.map((option, index) => <li key={index} className={styles.option} onClick={() => setSelected(option)}>{option.label}</li>) : <li className={styles.option}>No data found</li>}
+      </ul>
+    )
+  }
+
+  // https://stackoverflow.com/questions/23892547/what-is-the-best-way-to-trigger-change-or-input-event-in-react-js
+  function clearValue () {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set
+    nativeInputValueSetter.call(inputRef.current, '')
+    const ev2 = new Event('input', { bubbles: true })
+    ev2.simulated = true
+    inputRef.current.dispatchEvent(ev2)
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.selectContainer}>
+        <input type='text' name={name} value={value} className={inputClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} />
+        <div className={styles.icons}>
+          {value?.length > 0 && <PlatformaticIcon iconName='CloseIcon' color={borderColor} onClick={() => clearValue()} />}
+          <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} onClick={() => setShowOptions(!showOptions)} />
+        </div>
+      </div>
+      {showOptions && !showError && renderOptions()}
+      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+    </div>
+  )
+}
+
+Select.propTypes = {
+  /**
+   * placeholder
+   */
+  placeholder: PropTypes.string,
+  /**
+   * name
+   */
+  name: PropTypes.string,
+  /**
+   * value
+   */
+  value: PropTypes.string,
+  /**
+   * options
+   */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string,
+    label: PropTypes.string
+  })),
+  /**
+   * color of border
+   */
+  borderColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE]),
+  /**
+   * onChange
+   */
+  onChange: PropTypes.func,
+  /**
+   * onSelect
+   */
+  onSelect: PropTypes.func,
+  /**
+   * Disabled
+   */
+  disabled: PropTypes.bool
+}
+
+Select.defaultProps = {
+  placeholder: 'this is the default',
+  name: '',
+  value: '',
+  id: '',
+  options: [],
+  borderColor: MAIN_GREEN,
+  errorMessage: '',
+  onChange: () => {},
+  onSelect: () => {},
+  disabled: false
+}
+
+export default Select

package/src/components/forms/Select.module.css

@@ -0,0 +1,23 @@
+.container {
+  @apply flex flex-col w-full relative z-10;
+}
+.selectContainer {
+  @apply w-full flex items-center h-10 relative;
+}
+.select {
+  @apply px-2 h-full border border-solid box-border rounded-md ;
+}
+.select.active,
+.select:focus {
+  @apply shadow-main-dark-blue outline-none;
+}
+.options {
+  @apply absolute left-0 top-[42px] bg-white w-full max-h-[216px] overflow-y-scroll;
+  box-shadow: 0px 0px 10px rgb(0 40 61 / 25%);
+}
+.option {
+  @apply w-full px-4 py-2 border-b border-main-dark-blue/[.15] font-light cursor-pointer hover:bg-main-dark-blue hover:bg-opacity-10
+}
+.icons {
+  @apply absolute top-[50%] right-[0.5rem] translate-y-[-50%] flex gap-x-2;
+}

package/src/components/forms/TextArea.jsx

@@ -0,0 +1,83 @@
+'use strict'
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './TextArea.module.css'
+import commonStyles from '../Common.module.css'
+import PlatformaticIcon from '../PlatformaticIcon'
+import { MAIN_DARK_BLUE, MAIN_GREEN } from '../constants'
+
+function TextArea ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, afterIcon, rows, cols }) {
+  let className = styles.textAreaContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`]
+  const showError = errorMessage.length > 0
+  if (showError) className += ' ' + commonStyles['bordered--error-red']
+  if (disabled) className += ' ' + commonStyles['apply-opacity-30']
+  const textAreaClassName = `${commonStyles.fullWidth} ${styles.textarea}`
+
+  return (
+    <div className={styles.container}>
+      <div className={className}>
+        <textarea name={name} className={textAreaClassName} onChange={onChange} disabled={disabled} placeholder={placeholder} rows={rows} cols={cols} value={value} />
+        {afterIcon && <div className={styles.afterIcon}><PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={null} /></div>}
+      </div>
+      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+    </div>
+  )
+}
+
+TextArea.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,
+  /**
+   * afterIcon: PlatformaticIcon props
+   */
+  afterIcon: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string,
+    onClick: PropTypes.func
+  }),
+  /**
+   * rows
+   */
+  rows: PropTypes.number,
+  /**
+   * cols
+   */
+  cols: PropTypes.number
+}
+
+TextArea.defaultProps = {
+  placeholder: '',
+  value: '',
+  name: '',
+  borderColor: MAIN_DARK_BLUE,
+  errorMessage: '',
+  onChange: () => {},
+  disabled: false,
+  afterIcon: null,
+  rows: 5,
+  cols: 20
+}
+
+export default TextArea

package/src/components/forms/TextArea.module.css

@@ -0,0 +1,16 @@
+.container {
+  @apply flex flex-col w-full relative z-10;
+}
+.textAreaContainer {
+  @apply w-full flex items-center relative;
+}
+.textarea {
+  @apply p-3 h-full border border-solid box-border rounded-md bg-transparent;
+}
+.textarea.active,
+.textarea:focus {
+  @apply shadow-main-dark-blue outline-none;
+}
+.afterIcon {
+  @apply absolute top-[1.25rem] right-[1.25rem]
+}

package/src/components/forms/index.js

@@ -1,9 +1,21 @@
 import Field from './Field'
 import Input from './Input'
 import InputWithSeparator from './InputWithSeparator'
+import Password from './Password'
 import Preview from './Preview'
+import RadioGroup from './RadioGroup'
+import Select from './Select'
+import TextArea from './TextArea'
 import ToggleSwitch from './ToggleSwitch'
 
 export default {
-  Field, Input, InputWithSeparator, Preview, ToggleSwitch
+  Field,
+  Input,
+  InputWithSeparator,
+  Password,
+  Preview,
+  RadioGroup,
+  Select,
+  TextArea,
+  ToggleSwitch
 }

package/src/components/icons/AddIcon.jsx

@@ -1,14 +1,14 @@
 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, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const AddIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -23,7 +23,7 @@ const AddIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -38,7 +38,7 @@ const AddIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -72,8 +72,8 @@ AddIcon.propTypes = {
 }
 
 AddIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default AddIcon

package/src/components/icons/AlertIcon.jsx

@@ -1,14 +1,14 @@
 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, SIZES, SMALL, MEDIUM, LARGE, ERROR_RED } from '../constants'
 
 const AlertIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -24,7 +24,7 @@ const AlertIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -40,7 +40,7 @@ const AlertIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -75,8 +75,8 @@ AlertIcon.propTypes = {
 }
 
 AlertIcon.defaultProps = {
-  color: 'error-red',
-  size: 'medium'
+  color: ERROR_RED,
+  size: MEDIUM
 }
 
 export default AlertIcon

package/src/components/icons/AllInOneIcon.jsx

@@ -1,14 +1,14 @@
 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, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const AllInOneIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -34,7 +34,7 @@ const AllInOneIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -60,7 +60,7 @@ const AllInOneIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -105,8 +105,8 @@ AllInOneIcon.propTypes = {
 }
 
 AllInOneIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default AllInOneIcon

package/src/components/icons/ApiCloudIcon.jsx

@@ -1,14 +1,14 @@
 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, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const ApiCloudIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -28,7 +28,7 @@ const ApiCloudIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -48,7 +48,7 @@ const ApiCloudIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -87,8 +87,8 @@ ApiCloudIcon.propTypes = {
 }
 
 ApiCloudIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default ApiCloudIcon

package/src/components/icons/ApiEmptyIcon.jsx

@@ -1,7 +1,7 @@
 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, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const ApiEmptyIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`] + ' '
@@ -9,7 +9,7 @@ const ApiEmptyIcon = ({ color, size }) => {
   let icon = <></>
 
   switch (size) {
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg
           width={80}
@@ -135,8 +135,8 @@ ApiEmptyIcon.propTypes = {
 }
 
 ApiEmptyIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default ApiEmptyIcon

package/src/components/icons/ApiIcon.jsx

@@ -1,14 +1,14 @@
 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, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const ApiIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -25,7 +25,7 @@ const ApiIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -42,7 +42,7 @@ const ApiIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -78,8 +78,8 @@ ApiIcon.propTypes = {
 }
 
 ApiIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default ApiIcon

package/src/components/icons/AppEmptyIcon.jsx

@@ -1,14 +1,14 @@
 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, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const AppEmptyIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg width={105} height={105} viewBox='0 0 105 105' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
           <path d='M45.1159 59.7372H31.3467C30.7944 59.7372 30.3467 60.1849 30.3467 60.7372V87.0941C30.3467 87.6464 30.7944 88.0941 31.3467 88.0941H73.6544C74.2067 88.0941 74.6544 87.6464 74.6544 87.0941V60.7372C74.6544 60.1849 74.2067 59.7372 73.6544 59.7372H59.8851' stroke='none' strokeWidth={3} strokeLinecap='round' />
@@ -46,8 +46,8 @@ AppEmptyIcon.propTypes = {
 }
 
 AppEmptyIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default AppEmptyIcon

package/src/components/icons/AppIcon.jsx

@@ -1,14 +1,14 @@
 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, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const AppIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -26,7 +26,7 @@ const AppIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -43,7 +43,7 @@ const AppIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -79,8 +79,8 @@ AppIcon.propTypes = {
 }
 
 AppIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default AppIcon

package/src/components/icons/AppListIcon.jsx

@@ -1,14 +1,14 @@
 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, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const AppListIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
   let icon = <></>
 
   switch (size) {
-    case 'extra-large':
+    case EXTRA_LARGE:
       icon = (
         <svg
           width={81}
@@ -97,8 +97,8 @@ AppListIcon.propTypes = {
 }
 
 AppListIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default AppListIcon

package/src/components/icons/ArrowDownFullIcon.jsx

@@ -1,7 +1,7 @@
 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, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const ArrowDownFullIcon = ({ color, size }) => {
   const className = `${styles.noShrinkForFlex} ` + styles[`${color}`] + ' '
@@ -9,7 +9,7 @@ const ArrowDownFullIcon = ({ color, size }) => {
   let icon = <></>
 
   switch (size) {
-    case 'small':
+    case SMALL:
       icon = (
         <svg
           width={16}
@@ -23,7 +23,7 @@ const ArrowDownFullIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'medium':
+    case MEDIUM:
       icon = (
         <svg
           width={24}
@@ -37,7 +37,7 @@ const ArrowDownFullIcon = ({ color, size }) => {
         </svg>
       )
       break
-    case 'large':
+    case LARGE:
       icon = (
         <svg
           width={40}
@@ -70,8 +70,8 @@ ArrowDownFullIcon.propTypes = {
 }
 
 ArrowDownFullIcon.defaultProps = {
-  color: 'main-dark-blue',
-  size: 'medium'
+  color: MAIN_DARK_BLUE,
+  size: MEDIUM
 }
 
 export default ArrowDownFullIcon