@platformatic/ui-components 0.1.24 → 0.1.26

package/package.json

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

package/src/components/DropDown.module.css

@@ -16,7 +16,7 @@
   @apply hover:cursor-pointer
 }
 .menu {
-  @apply absolute border-solid border border-main-green p-4 bg-dark-blue mt-8 rounded-md;
+  @apply absolute border-solid border border-main-green p-4 bg-dark-blue mt-8 rounded-md z-[999];
 }
 .item {
   @apply mb-2

package/src/components/Modal.jsx

@@ -1,9 +1,11 @@
 import { faClose } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
+import useEscapeKey from '../hooks/useEscapeKey'
 import styles from './Modal.module.css'
 export default function Modal (props) {
   const { setIsOpen, title } = props
+  useEscapeKey(() => setIsOpen(false))
   return (
     <>
       <div className={styles.blur} onClick={() => setIsOpen(false)} />

package/src/components/Modal.module.css

@@ -1,7 +1,10 @@
 .blur {
-  @apply absolute top-[50%] left-[50%] z-0 w-[100vw] h-[100vh] translate-x-[-50%] translate-y-[-50%];
+  @apply absolute top-[50%] left-[50%] z-0 w-[100vw] h-[100vh] translate-x-[-50%] translate-y-[-50%] z-[9999];
   background-color: rgba(0, 0, 0, 0.75);
 }
+.container {
+  @apply z-[9999];
+}
 .centered {
   @apply fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]
 }

package/src/hooks/useEscapeKey.js

@@ -0,0 +1,20 @@
+import { useCallback, useEffect } from 'react'
+const KEY_NAME_ESC = 'Escape'
+const KEY_EVENT_TYPE = 'keyup'
+function useEscapeKey (handleClose) {
+  const handleEscKey = useCallback((event) => {
+    if (event.key === KEY_NAME_ESC) {
+      handleClose()
+    }
+  }, [handleClose])
+
+  useEffect(() => {
+    document.addEventListener(KEY_EVENT_TYPE, handleEscKey, false)
+
+    return () => {
+      document.removeEventListener(KEY_EVENT_TYPE, handleEscKey, false)
+    }
+  }, [handleEscKey])
+}
+
+export default useEscapeKey

package/src/stories/DropDown.stories.jsx

@@ -1,12 +1,31 @@
 'use strict'
 import DropDown from '../components/DropDown'
+import BorderedBox from '../components/BorderedBox'
+import HorizontalSeparator from '../components/HorizontalSeparator'
+import { useState } from 'react'
 export default {
   title: 'Platformatic/DropDown',
   component: DropDown,
   decorators: [dd => <div className='text-white'>{dd()}</div>]
 }
 
-const Template = (args) => <DropDown {...args} />
+const Template = (args) => (
+  <div>
+    <DropDown {...args} />
+    <HorizontalSeparator />
+    <ContentThatLoads />
+  </div>
+)
+
+const ContentThatLoads = () => {
+  const [content, setContent] = useState(null)
+  setTimeout(() => {
+    setContent(<div className='mt-4'><BorderedBox>This is rendered after</BorderedBox></div>)
+  }, 1000)
+
+  return content
+}
+
 export const DefaultAlignment = Template.bind({})
 
 DefaultAlignment.args = {

package/src/stories/Modal.stories.jsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react'
 import Modal from '../components/Modal'
 import Button from '../components/Button'
+import BorderedBox from '../components/BorderedBox'
+import DropDown from '../components/DropDown'
+import HorizontalSeparator from '../components/HorizontalSeparator'
 export default {
   title: 'Platformatic/Modal',
   component: Modal
@@ -10,13 +13,43 @@ const Template = (args) => {
   const [isOpen, setIsOpen] = useState(false)
   return (
     <main>
+      <BorderedBox>This Is another Content</BorderedBox>
+      <ContentThatLoads />
       <Button color='green' primary='true' onClick={() => setIsOpen(true)} label='Open Modal' />
       {isOpen && <Modal setIsOpen={setIsOpen} title='Modal Title'>Hello world!</Modal>}
     </main>
   )
 }
 
+const ContentThatLoads = () => {
+  const [content, setContent] = useState(null)
+  setTimeout(() => {
+    setContent(<div className='mt-4'><BorderedBox>This is a Future Component</BorderedBox></div>)
+  }, 1000)
+
+  return content
+}
+
 export const Default = Template.bind({})
 Default.args = {
   title: 'List Title'
 }
+
+const MenuTemplate = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const dropDownArgs = {
+    header: 'My Menu',
+    items: [
+      <span className='hover:cursor-pointer' key='2' onClick={() => setIsOpen(true)}>Show Modal</span>
+    ]
+  }
+  return (
+    <div>
+      <div className='text-white'><DropDown {...dropDownArgs} /></div>
+      <HorizontalSeparator />
+      {isOpen && <Modal setIsOpen={setIsOpen} title='Modal Title'>Hello world!</Modal>}
+      <ContentThatLoads />
+    </div>
+  )
+}
+export const WithDropDown = MenuTemplate.bind({})