@platformatic/ui-components 0.3.3 → 0.3.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/Modal.jsx

@@ -40,7 +40,8 @@ function Modal ({
   backgroundClassName,
   titleClassName,
   childrenClassContainer,
-  modalCloseClassName
+  modalCloseClassName,
+  permanent
 }) {
   let contentFullscreen
   let titleFullscreen
@@ -96,7 +97,10 @@ function Modal ({
   }
 
   function closeModal (event) {
+    console.log('closeModal', event)
     if (event.target === blurRef.current) {
+      event.preventDefault()
+      event.stopPropagation()
       setIsOpen(false)
     }
   }
@@ -105,7 +109,7 @@ function Modal ({
     case MODAL_POPUP_V2:
       whichModal = (
 
-        <div className={`${styles['blur-fixed']}`} onClick={(event) => closeModal(event)} ref={blurRef}>
+        <div className={`${styles['blur-fixed']}`} onClick={(event) => permanent ? {} : closeModal(event)} ref={blurRef}>
           <div className={styles.content}>
             <div className={modalClassName}>
               <div className={headerClassName}>
@@ -124,7 +128,7 @@ function Modal ({
     case MODAL_POPUP:
       whichModal = (
         <>
-          <div className={styles.blur} onClick={() => setIsOpen(false)} />
+          <div className={styles.blur} onClick={() => permanent ? {} : setIsOpen(false)} />
           <div className={`${styles.container} ${styles.centered}`}>
             <div className={modalClassName}>
               <div className={headerClassName}>
@@ -242,37 +246,41 @@ Modal.propTypes = {
    */
   childrenClassContainer: PropTypes.string,
   /**
-   * setIsOpen
+   * setIsOpen: function from Parent for close/pen
    */
   setIsOpen: PropTypes.func,
   /**
-   * title
+   * title: Title on top for small Modals (check MODAL_LAYOUTS)
    */
   title: PropTypes.string,
   /**
-   * layout
+   * layout: type of Layout of the modal
    */
   layout: PropTypes.oneOf(MODAL_LAYOUTS),
   /**
-   * Size
+   * Size: of the modal
    */
   size: PropTypes.oneOf(MODAL_SIZES),
   /**
-   * profile
+   * profile: deprecated
    */
   profile: PropTypes.oneOf(PROFILES),
   /**
-   * backgroundClassName
+   * backgroundClassName: background of the full screen modal
    */
   backgroundClassName: PropTypes.string,
   /**
-   * titleClassName
+   * titleClassName: classes of the title
    */
   titleClassName: PropTypes.string,
   /**
-   * modalCloseClassName
+   * modalCloseClassName: classes for the closing icon
    */
-  modalCloseClassName: PropTypes.string
+  modalCloseClassName: PropTypes.string,
+  /**
+   * permanent: modal could be closed only with Esc, X or Cancel
+   */
+  permanent: PropTypes.bool
 }
 
 Modal.defaultProps = {
@@ -285,7 +293,8 @@ Modal.defaultProps = {
   profile: '',
   backgroundClassName: '',
   titleClassName: '',
-  modalCloseClassName: ''
+  modalCloseClassName: '',
+  permanent: false
 }
 
 export default Modal

package/src/components/ModalDirectional.jsx

@@ -17,7 +17,8 @@ function ModalDirectional ({
   titleClassName,
   children,
   smallLayout,
-  classNameModalLefty
+  classNameModalLefty,
+  permanent
 }) {
   const className = `${styles.container} ${styles.modalLeftCover} ${smallLayout ? styles.smallLayout : styles.normalLayout}`
   const [modalClassName] = useState(className)
@@ -39,7 +40,7 @@ function ModalDirectional ({
 
   return (
     <>
-      <div className={styles.blur} onClick={() => closeModal()} />
+      <div className={styles.blur} onClick={() => permanent ? {} : closeModal()} />
       <div className={variantModalClassName}>
         <div className={classNameLefty}>
           <div className={styles.headerClassName}>
@@ -89,7 +90,11 @@ ModalDirectional.propTypes = {
   /**
    * classNameLefty
    */
-  classNameLefty: PropTypes.string
+  classNameLefty: PropTypes.string,
+  /**
+   * permanent: modal could be closed only with Esc, X or Cancel
+   */
+  permanent: PropTypes.bool
 }
 
 ModalDirectional.defaultProps = {
@@ -98,7 +103,8 @@ ModalDirectional.defaultProps = {
   title: '',
   titleClassName: '',
   smallLayout: false,
-  classNameLefty: ''
+  classNameLefty: '',
+  permanent: false
 }
 
 export default ModalDirectional

package/src/components/forms/Input.jsx

@@ -12,6 +12,7 @@ function Input ({
   name,
   borderColor,
   errorMessage,
+  errorMessageTextClassName,
   onChange,
   disabled,
   beforeIcon,
@@ -27,7 +28,7 @@ function Input ({
   let baseInputClassName = `${commonStyles.fullWidth} ${styles.input} ${inputTextClassName} `
   baseInputClassName += verticalPaddingClassName || ` ${styles.inputDefaultVerticalPadding} `
   baseInputClassName += ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles[`background-color-${backgroundColor}`]
-
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
   const showError = errorMessage.length > 0
   if (disabled) baseInputClassName += ' ' + commonStyles['apply-opacity-30']
   if (beforeIcon) baseInputClassName += ' ' + styles.beforeIconPadding
@@ -80,7 +81,7 @@ function Input ({
         {placeholderApart && <p className={styles.placeholderAPart}>{placeholder}</p>}
         {afterIcon && <div className={styles.afterInputIcon}><PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={null} /></div>}
       </div>
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -157,7 +158,15 @@ Input.propTypes = {
   /**
    * readOnly
   */
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  /**
+   * errorMessage
+  */
+  errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string
 }
 
 Input.defaultProps = {
@@ -167,6 +176,7 @@ Input.defaultProps = {
   borderColor: MAIN_GREEN,
   backgroundColor: WHITE,
   errorMessage: '',
+  errorMessageTextClassName: '',
   onChange: () => {},
   disabled: false,
   beforeIcon: null,

package/src/components/forms/InputWithSeparator.jsx

@@ -14,6 +14,7 @@ function InputWithSeparator ({
   borderColor,
   backgroundColor,
   errorMessage,
+  errorMessageTextClassName,
   onChange,
   disabled,
   afterIcon,
@@ -27,6 +28,7 @@ function InputWithSeparator ({
   const [focus, setFocus] = useState(false)
   const baseClassName = `${styles.input} ${styles.flexNone} ${styles.smallMargin} ${inputTextClassName} ` + commonStyles[`background-color-${backgroundColor}`]
   const buttonClassName = commonStyles[`background-color-${borderColor}`] + ' ' + commonStyles['background-color-opaque-30']
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
   const [chunks, setChunks] = useState([])
   const [inputClassName, setInputClassName] = useState(normalClassName())
   const [inputContainerClassName, setInputContainerClassName] = useState(unFocusedClassName())
@@ -164,7 +166,7 @@ function InputWithSeparator ({
             />
           )}
       </div>
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -222,7 +224,15 @@ InputWithSeparator.propTypes = {
     color: PropTypes.string,
     handleClick: PropTypes.func,
     disabled: PropTypes.bool
-  })
+  }),
+  /**
+   * errorMessage
+  */
+  errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string
 }
 
 InputWithSeparator.defaultProps = {
@@ -234,6 +244,7 @@ InputWithSeparator.defaultProps = {
   borderColor: MAIN_GREEN,
   backgroundColor: WHITE,
   errorMessage: '',
+  errorMessageTextClassName: '',
   onChange: () => {},
   disabled: false,
   afterIcon: null,

package/src/components/forms/Password.jsx

@@ -6,10 +6,11 @@ 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, onChange, disabled }) {
+function Input ({ placeholder, value, name, borderColor, errorMessage, errorMessageTextClassName, onChange, disabled }) {
   const [type, setType] = useState('password')
   let passwordClassName = `${commonStyles.fullWidth} ${styles.password} `
   passwordClassName += commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + styles.afterIconPadding
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
   const showError = errorMessage.length > 0
   if (showError) passwordClassName += ' ' + commonStyles['bordered--error-red']
   if (disabled) passwordClassName += ' ' + commonStyles['apply-opacity-30']
@@ -24,7 +25,7 @@ function Input ({ placeholder, value, name, borderColor, errorMessage, onChange,
             : <PlatformaticIcon iconName='EyeClosedIcon' color={MAIN_DARK_BLUE} data-testid='after-eye-closed-icon' onClick={() => setType('password')} />}
         </div>
       </div>
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -61,7 +62,15 @@ Input.propTypes = {
   /**
    * placeholderApart
    */
-  placeholderApart: PropTypes.bool
+  placeholderApart: PropTypes.bool,
+  /**
+   * errorMessage
+  */
+  errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string
 }
 
 Input.defaultProps = {
@@ -70,6 +79,7 @@ Input.defaultProps = {
   name: '',
   borderColor: MAIN_DARK_BLUE,
   errorMessage: '',
+  errorMessageTextClassName: '',
   onChange: () => {},
   disabled: false,
   focused: false,

package/src/components/forms/RadioGroup.jsx

@@ -5,8 +5,10 @@ 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, onChange, disabled, value }) {
+function RadioGroup ({ name, radios, errorMessage, errorMessageTextClassName, onChange, disabled, value }) {
   let radioContainerClass = styles.radioContainer
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
+
   const showError = errorMessage.length > 0
   if (disabled) radioContainerClass += ' ' + commonStyles['apply-opacity-30']
 
@@ -20,7 +22,7 @@ function RadioGroup ({ name, radios, errorMessage, onChange, disabled, value })
           </div>
         ))}
       </div>
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -41,6 +43,10 @@ RadioGroup.propTypes = {
    * errorMessage
    */
   errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string,
   /**
    * onChange
    */
@@ -63,6 +69,7 @@ RadioGroup.defaultProps = {
   name: '',
   radios: [],
   errorMessage: '',
+  errorMessageTextClassName: '',
   onChange: () => {},
   disabled: false,
   color: MAIN_DARK_BLUE,

package/src/components/forms/Select.jsx

@@ -17,6 +17,7 @@ function Select ({
   borderColor,
   borderListColor,
   errorMessage,
+  errorMessageTextClassName,
   onSelect,
   disabled,
   mainColor,
@@ -30,7 +31,7 @@ function Select ({
   // eslint-disable-next-line  no-unused-vars
   const [isSelected, setIsSelected] = useState(false)
   const [isOnFocus, setIsOnFocus] = useState(false)
-
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
   const showError = errorMessage.length > 0
   const containerClassName = `${styles.container} ${defaultContainerClassName} `
   let inputClassName = `${commonStyles.fullWidth} ${styles.select} ${inputTextClassName}`
@@ -165,7 +166,7 @@ function Select ({
         </div>
       </div>
       {showOptions && !showError && renderOptions()}
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -250,7 +251,15 @@ Select.propTypes = {
   /**
    * inputTextClassName
   */
-  inputTextClassName: PropTypes.string
+  inputTextClassName: PropTypes.string,
+  /**
+   * errorMessage
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string
 }
 
 Select.defaultProps = {
@@ -265,6 +274,7 @@ Select.defaultProps = {
   borderColor: MAIN_GREEN,
   borderListColor: '',
   errorMessage: '',
+  errorMessageTextClassName: '',
   onSelect: () => {},
   disabled: false,
   mainColor: MAIN_DARK_BLUE,

package/src/components/forms/SelectWithInput.jsx

@@ -17,6 +17,7 @@ function SelectWithInput ({
   borderColor,
   borderListColor,
   errorMessage,
+  errorMessageTextClassName,
   onChange,
   onSelect,
   onClear,
@@ -32,7 +33,7 @@ function SelectWithInput ({
   const [showOptions, setShowOptions] = useState(false)
   const [isSelected, setIsSelected] = useState(false)
   const [isOnFocus, setIsOnFocus] = useState(false)
-
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
   const showError = errorMessage.length > 0
   const containerClassName = `${styles.container} ${defaultContainerClassName} `
   let inputClassName = `${commonStyles.fullWidth} ${styles.select} ${inputTextClassName}`
@@ -194,7 +195,7 @@ function SelectWithInput ({
         </div>
       </div>
       {showOptions && !showError && renderOptions()}
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -297,7 +298,15 @@ SelectWithInput.propTypes = {
   /**
    * inputTextClassName
   */
-  inputTextClassName: PropTypes.string
+  inputTextClassName: PropTypes.string,
+  /**
+   * errorMessage
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string
 }
 
 SelectWithInput.defaultProps = {
@@ -312,6 +321,7 @@ SelectWithInput.defaultProps = {
   borderColor: MAIN_GREEN,
   borderListColor: '',
   errorMessage: '',
+  errorMessageTextClassName: '',
   onChange: () => {},
   onSelect: () => {},
   onClear: () => {},

package/src/components/forms/TextArea.jsx

@@ -6,9 +6,22 @@ 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 }) {
+function TextArea ({
+  placeholder,
+  value,
+  name,
+  borderColor,
+  errorMessage,
+  errorMessageTextClassName,
+  onChange,
+  disabled,
+  afterIcon,
+  rows,
+  cols
+}) {
   let className = styles.textAreaContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`]
   const showError = errorMessage.length > 0
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
   if (showError) className += ' ' + commonStyles['bordered--error-red']
   if (disabled) className += ' ' + commonStyles['apply-opacity-30']
   const textAreaClassName = `${commonStyles.fullWidth} ${styles.textarea}`
@@ -19,7 +32,7 @@ function TextArea ({ placeholder, value, name, borderColor, errorMessage, onChan
         <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>}
+      {showError && <span className={errorMessageClassName}>{errorMessage}</span>}
     </div>
   )
 }
@@ -64,7 +77,15 @@ TextArea.propTypes = {
   /**
    * cols
    */
-  cols: PropTypes.number
+  cols: PropTypes.number,
+  /**
+   * errorMessage
+   */
+  errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string
 }
 
 TextArea.defaultProps = {
@@ -73,6 +94,7 @@ TextArea.defaultProps = {
   name: '',
   borderColor: MAIN_DARK_BLUE,
   errorMessage: '',
+  errorMessageTextClassName: '',
   onChange: () => {},
   disabled: false,
   afterIcon: null,

package/src/components/forms/ToggleSwitch.jsx

@@ -4,10 +4,21 @@ import PropTypes from 'prop-types'
 import styles from './ToggleSwitch.module.css'
 import commonStyles from '../Common.module.css'
 
-function ToggleSwitch ({ name, label, labelClassName, errorMessage, onChange, checked, disabled }) {
+function ToggleSwitch ({
+  name,
+  label,
+  labelClassName,
+  errorMessage,
+  errorMessageTextClassName,
+  onChange,
+  checked,
+  disabled
+}) {
   let className = `${styles.switch} `
   if (disabled) className += styles.disabled
   const styleLabel = labelClassName || styles.defaultLabel
+  const errorMessageClassName = errorMessageTextClassName || commonStyles['error-message']
+
   return (
     <>
       <div className={styles.container}>
@@ -17,7 +28,7 @@ function ToggleSwitch ({ name, label, labelClassName, errorMessage, onChange, ch
         </label>
         <span className={styleLabel}>{label}</span>
       </div>
-      {errorMessage.length > 0 && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+      {errorMessage.length > 0 && <span className={errorMessageClassName}>{errorMessage}</span>}
     </>
   )
 }
@@ -35,6 +46,10 @@ ToggleSwitch.propTypes = {
    * errorMessage
    */
   errorMessage: PropTypes.string,
+  /**
+   * errorMessageTextClassName
+  */
+  errorMessageTextClassName: PropTypes.string,
   /**
    * checked
    */
@@ -58,6 +73,7 @@ ToggleSwitch.defaultProps = {
   name: '',
   label: '',
   errorMessage: '',
+  errorMessageTextClassName: '',
   checked: false,
   disabled: false,
   onChange: () => {},

package/src/stories/Modal.stories.jsx

@@ -4,7 +4,7 @@ import Button from '../components/Button'
 import BorderedBox from '../components/BorderedBox'
 import DropDown from '../components/DropDown'
 import HorizontalSeparator from '../components/HorizontalSeparator'
-import { FULL_WIDTH, MAIN_DARK_BLUE, MAIN_GREEN, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT, MODAL_LAYOUTS, MODAL_SIZES } from '../components/constants'
+import { FULL_WIDTH, MAIN_DARK_BLUE, MAIN_GREEN, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT, MODAL_LAYOUTS, MODAL_POPUP_V2, MODAL_SIZES } from '../components/constants'
 export default {
   title: 'Platformatic/Modal',
   component: Modal,
@@ -107,3 +107,54 @@ FullscreenLayoutLight.args = {
   size: FULL_WIDTH,
   layout: MODAL_FULL_LIGHT
 }
+
+const NestedModalsTemplate = () => {
+  const [isOpen1, setIsOpen1] = useState(false)
+  const [isOpen2, setIsOpen2] = useState(false)
+  const [isOpen3, setIsOpen3] = useState(false)
+
+  return (
+    <main style={{ height: '1440px', overflow: 'scroll' }}>
+      <Button color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpen1(true)} label='Open 1st Modal' />
+      {isOpen1 && (
+        <Modal
+          setIsOpen={setIsOpen1}
+          title='Fist One'
+          layout={MODAL_POPUP_V2}
+        >
+          <p style={{ color: 'white' }}>This Is the first</p>
+          <Button color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpen2(true)} label='Open 2nd Modal' />
+          {isOpen2 && (
+            <Modal
+              setIsOpen={setIsOpen2}
+              title='Second One'
+              layout={MODAL_POPUP_V2}
+            >
+              <p style={{ color: 'white' }}>This Is the second</p>
+              <Button color={MAIN_GREEN} backgroundColor={MAIN_DARK_BLUE} onClick={() => setIsOpen3(true)} label='Open 3rd Modal' />
+              {isOpen3 && (
+                <Modal
+                  setIsOpen={setIsOpen3}
+                  title='Third One'
+                  layout={MODAL_POPUP_V2}
+                >
+                  <p style={{ color: 'white' }}>This Is the third</p>
+                </Modal>
+              )}
+            </Modal>
+          )}
+        </Modal>
+      )}
+    </main>
+  )
+}
+
+export const NestedModals = NestedModalsTemplate.bind({})
+NestedModals.args = {}
+
+export const Permanent = Template.bind({})
+Permanent.args = {
+  title: 'Permanent modal',
+  text: 'Close clicking on Cancel or X or Esc',
+  permanent: true
+}