@platformatic/ui-components 0.3.4 → 0.3.6

package/package.json

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

package/src/components/Button.module.css

@@ -119,4 +119,7 @@
 }
 .active {
   @apply opacity-100;
+}
+.cursorDefault {
+  @apply cursor-default;
 }

package/src/components/ButtonOnlyIcon.jsx

@@ -62,7 +62,7 @@ function ButtonOnlyIcon ({
 
   useEffect(() => {
     if (disabled) {
-      setButtonClassName(buttonRestClassName())
+      setButtonClassName(buttonRestClassName() + ` ${styles.cursorDefault}`)
     } else {
       setButtonClassName(buttonActiveClassName())
     }

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/TooltipAbsolute.module.css

@@ -33,7 +33,7 @@
   left: 12px;
 }
 
-.center {
+.center, .center::before {
   left: 50%;
   transform: translateX(-50%);
 }
@@ -42,7 +42,7 @@
   transform: translateX(-100%);
 }
 .end::before {
-  right: 4px;
+  right: 12px;
 }
 
 

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
+}