@platformatic/ui-components 0.1.32 → 0.1.34

package/src/components/Modal.jsx

@@ -1,29 +1,61 @@
-import React from 'react'
-import useEscapeKey from '../hooks/useEscapeKey'
-import CloseModalIcon from './icons/CloseModalIcon'
-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)} />
-      <div className={`${styles.container} ${styles.centered}`}>
-        <div className={styles.modal}>
-          <div className={styles.header}>
-            <div className={styles.title}>{title}</div>
-            <div className={styles.close} onClick={() => setIsOpen(false)}>
-              <CloseModalIcon />
-            </div>
-          </div>
-          <hr className={styles.hr} />
-          <div>
-            {props.children}
-          </div>
-          <hr className={styles.hr} />
-        </div>
-      </div>
-    </>
-
-  )
-}
+import React, { useState } from 'react'
+import useEscapeKey from '../hooks/useEscapeKey'
+import CloseModalIcon from './icons/CloseModalIcon'
+import CloseModalGreenIcon from './icons/CloseModalGreenIcon'
+import CloseModalGreenHoverIcon from './icons/CloseModalGreenHoverIcon'
+import styles from './Modal.module.css'
+export default function Modal (props) {
+  const { setIsOpen, title, layout = 'info' } = props
+  const [isHoverCloseModal, setIsHoverCloseModal] = useState(false)
+  useEscapeKey(() => setIsOpen(false))
+
+  let whichModal = <></>
+  switch (layout) {
+    case 'info':
+      whichModal = (
+        <>
+          <div className={styles.blur} onClick={() => setIsOpen(false)} />
+          <div className={`${styles.container} ${styles.centered}`}>
+            <div className={`${styles.modal} ${styles.modalInfo}`}>
+              <div className={styles.header}>
+                <div className={styles.title}>{title}</div>
+                <div className={styles.close} onClick={() => setIsOpen(false)}>
+                  <CloseModalIcon />
+                </div>
+              </div>
+              <div>
+                {props.children}
+              </div>
+            </div>
+          </div>
+        </>
+      )
+      break
+    case 'invite':
+      whichModal = (
+        <>
+          <div className={styles.blur} onClick={() => setIsOpen(false)} />
+          <div className={`${styles.container} ${styles.centered}`}>
+            <div className={`${styles.modal} ${styles.modalInvite}`}>
+              <div className={styles.headerInvite}>
+                <div
+                  className={styles.close}
+                  onClick={() => setIsOpen(false)}
+                  onMouseEnter={() => setIsHoverCloseModal(true)}
+                  onMouseLeave={() => setIsHoverCloseModal(false)}
+                >
+                  {isHoverCloseModal ? <CloseModalGreenHoverIcon /> : <CloseModalGreenIcon />}
+                </div>
+              </div>
+              <p className={styles.titleInvite}>{title}</p>
+              <div>{props.children}</div>
+            </div>
+          </div>
+        </>
+      )
+      break
+    default:
+      break
+  }
+  return whichModal
+}

package/src/components/Modal.module.css

@@ -1,25 +1,37 @@
-.blur {
-  @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%]
-}
-.modal {
-  @apply bg-[#E9F7FF] p-4 rounded-md mx-auto my-auto min-w-[480px] max-h-[85vh] overflow-y-auto;
-}
-.header {
-  @apply flex justify-between items-center;
-}
-.close {
-  @apply hover:cursor-pointer;
-}
-.hr {
-  @apply text-[#00283D] my-2 opacity-20;
-}
-.title {
-  @apply font-bold text-lg;
-}
+.blur {
+  @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%]
+}
+.modal {
+  @apply p-4 rounded-md mx-auto my-auto min-w-[480px] max-h-[85vh] overflow-y-auto;
+}
+.modalInfo {
+  @apply bg-light-blue;
+}
+.modalInvite {
+  @apply bg-main-dark-blue border-light-green border shadow-wrap shadow-main-green max-w-[432px] max-h-[300px];
+}
+.header {
+  @apply flex justify-between items-center;
+}
+.headerInvite {
+  @apply flex justify-end;
+}
+.close {
+  @apply hover:cursor-pointer;
+}
+.hr {
+  @apply text-[#00283D] my-2 opacity-20;
+}
+.title {
+  @apply font-bold text-lg;
+}
+.titleInvite {
+  @apply font-bold text-lg text-main-green text-center;
+}

package/src/components/Playground.jsx

@@ -1,9 +1,9 @@
-'use strict'
-import React from 'react'
-import BorderedBox from './BorderedBox'
-
-export default function Playground () {
-  return (
-    <BorderedBox color='green'>Playground</BorderedBox>
-  )
-}
+'use strict'
+import React from 'react'
+import BorderedBox from './BorderedBox'
+
+export default function Playground () {
+  return (
+    <BorderedBox color='green'>Playground</BorderedBox>
+  )
+}

package/src/components/SearchBar.jsx

@@ -1,63 +1,63 @@
-'use strict'
-import React, { useRef, useState } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSearch } from '@fortawesome/free-solid-svg-icons'
-import styles from './SearchBar.module.css'
-import commonStyles from './Common.module.css'
-export default function SearchBar (props) {
-  const inputRef = useRef()
-  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
-  const [isOnFocus, setIsOnFocus] = useState(false)
-  const { onSubmit, onChange, title } = props
-
-  function handleSearch () {
-    if (onSubmit) {
-      const value = inputRef.current.value
-      return onSubmit(value)
-    }
-  }
-
-  function handleChange () {
-    if (onChange) {
-      const value = inputRef.current.value
-      return onChange(value)
-    }
-  }
-
-  function onFocus () {
-    if (!isOnFocus) {
-      setIsOnFocus(true)
-      setWrapperClassName(onFocusClassName())
-    }
-  }
-
-  function onBlur () {
-    setIsOnFocus(false)
-    setWrapperClassName(normalClassName())
-  }
-
-  function onFocusClassName () {
-    return `${styles.input} ${commonStyles.padded} ${styles.onFocus}`
-  }
-
-  function normalClassName () {
-    return `${styles.input} ${commonStyles.padded} ${styles.onBlur}`
-  }
-
-  function iconClassName () {
-    return isOnFocus ? 'text-main-green' : 'text-white'
-  }
-
-  return (
-    <div>
-      {title && <h1 className={styles.title}>{title}</h1>}
-      <div className={wrapperClassName}>
-        <input type='text' placeholder='Search' className='grow' ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
-        <button onClick={handleSearch} onFocus={onFocus} onBlur={onBlur}>
-          <FontAwesomeIcon className={iconClassName()} icon={faSearch} />
-        </button>
-      </div>
-    </div>
-
-  )
-}
+'use strict'
+import React, { useRef, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
+import styles from './SearchBar.module.css'
+import commonStyles from './Common.module.css'
+export default function SearchBar (props) {
+  const inputRef = useRef()
+  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
+  const [isOnFocus, setIsOnFocus] = useState(false)
+  const { onSubmit, onChange, title } = props
+
+  function handleSearch () {
+    if (onSubmit) {
+      const value = inputRef.current.value
+      return onSubmit(value)
+    }
+  }
+
+  function handleChange () {
+    if (onChange) {
+      const value = inputRef.current.value
+      return onChange(value)
+    }
+  }
+
+  function onFocus () {
+    if (!isOnFocus) {
+      setIsOnFocus(true)
+      setWrapperClassName(onFocusClassName())
+    }
+  }
+
+  function onBlur () {
+    setIsOnFocus(false)
+    setWrapperClassName(normalClassName())
+  }
+
+  function onFocusClassName () {
+    return `${styles.input} ${commonStyles.padded} ${styles.onFocus}`
+  }
+
+  function normalClassName () {
+    return `${styles.input} ${commonStyles.padded} ${styles.onBlur}`
+  }
+
+  function iconClassName () {
+    return isOnFocus ? 'text-main-green' : 'text-white'
+  }
+
+  return (
+    <div>
+      {title && <h1 className={styles.title}>{title}</h1>}
+      <div className={wrapperClassName}>
+        <input type='text' placeholder='Search' className='grow' ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
+        <button onClick={handleSearch} onFocus={onFocus} onBlur={onBlur}>
+          <FontAwesomeIcon className={iconClassName()} icon={faSearch} />
+        </button>
+      </div>
+    </div>
+
+  )
+}

package/src/components/SearchBar.module.css

@@ -1,21 +1,21 @@
-.input {
-  @apply flex justify-between w-full h-10 text-white border border-solid box-border rounded-md;
-}
-.onFocus {
-  @apply border-main-green;
-}
-.onBlur {
-  @apply border-white;
-}
-.fillGreen {
-  @apply fill-main-green;
-}
-.fillWhite {
-  @apply fill-white;
-}
-.input > input:focus {
-  @apply outline-none;
-}
-.title {
-  @apply font-semibold text-white text-3xl pb-4;
+.input {
+  @apply flex justify-between w-full h-10 text-white border border-solid box-border rounded-md;
+}
+.onFocus {
+  @apply border-main-green;
+}
+.onBlur {
+  @apply border-white;
+}
+.fillGreen {
+  @apply fill-main-green;
+}
+.fillWhite {
+  @apply fill-white;
+}
+.input > input:focus {
+  @apply outline-none;
+}
+.title {
+  @apply font-semibold text-white text-3xl pb-4;
 }

package/src/components/SimpleMetric.jsx

@@ -1,32 +1,32 @@
-'use strict'
-
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-// The icon that is in design is not in the free version of fontawesome
-// Temporary using this one
-import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons'
-import ReactTooltip from 'react-tooltip'
-import BorderedBox from './BorderedBox'
-import styles from './SimpleMetric.module.css'
-import MetricValue from './MetricValue'
-
-export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, children }) {
-  return (
-    <>
-      <BorderedBox>
-        <div className={styles.header}>
-          <span className={styles.title}>{title}</span>
-          <FontAwesomeIcon
-            icon={faCircleExclamation}
-            data-tip={tooltip}
-          />
-        </div>
-        <div>
-          <MetricValue pre={pre} color={color} unit={unit} value={value} />
-          {children}
-        </div>
-      </BorderedBox>
-      <ReactTooltip />
-    </>
-  )
-}
+'use strict'
+
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+// The icon that is in design is not in the free version of fontawesome
+// Temporary using this one
+import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons'
+import ReactTooltip from 'react-tooltip'
+import BorderedBox from './BorderedBox'
+import styles from './SimpleMetric.module.css'
+import MetricValue from './MetricValue'
+
+export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, children }) {
+  return (
+    <>
+      <BorderedBox>
+        <div className={styles.header}>
+          <span className={styles.title}>{title}</span>
+          <FontAwesomeIcon
+            icon={faCircleExclamation}
+            data-tip={tooltip}
+          />
+        </div>
+        <div>
+          <MetricValue pre={pre} color={color} unit={unit} value={value} />
+          {children}
+        </div>
+      </BorderedBox>
+      <ReactTooltip />
+    </>
+  )
+}

package/src/components/SimpleMetric.module.css

@@ -1,7 +1,7 @@
-.header {
-  @apply flex justify-between items-center font-bold;
-}
-
-.title {
-  @apply text-xl;
+.header {
+  @apply flex justify-between items-center font-bold;
+}
+
+.title {
+  @apply text-xl;
 }

package/src/components/Status.jsx

@@ -1,26 +1,26 @@
-'use strict'
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCircle } from '@fortawesome/free-solid-svg-icons'
-export default function Status (props) {
-  const { color, status } = props
-
-  function getColorClass (color) {
-    switch (color) {
-      case 'green':
-        return 'text-main-green'
-      case 'red':
-        return 'text-error-red'
-      case 'white':
-      default:
-        return 'text-white'
-    }
-  }
-  const colorClass = getColorClass(color)
-  return (
-    <div className={colorClass}>
-      <FontAwesomeIcon icon={faCircle} size='2xs' className={`text-${colorClass} mr-2`} />
-      {status}
-    </div>
-  )
-}
+'use strict'
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircle } from '@fortawesome/free-solid-svg-icons'
+export default function Status (props) {
+  const { color, status } = props
+
+  function getColorClass (color) {
+    switch (color) {
+      case 'green':
+        return 'text-main-green'
+      case 'red':
+        return 'text-error-red'
+      case 'white':
+      default:
+        return 'text-white'
+    }
+  }
+  const colorClass = getColorClass(color)
+  return (
+    <div className={colorClass}>
+      <FontAwesomeIcon icon={faCircle} size='2xs' className={`text-${colorClass} mr-2`} />
+      {status}
+    </div>
+  )
+}

package/src/components/TabbedWindow.jsx

@@ -1,34 +1,34 @@
-'use strict'
-import React, { useEffect, useState } from 'react'
-import styles from './TabbedWindow.module.css'
-
-export default function TabbedWindow (props) {
-  const [selected, setSelected] = useState(0)
-  const { tabs } = props
-  const headers = []
-  const components = []
-  tabs.forEach((tab) => {
-    headers.push(tab.label)
-    components.push(tab.component)
-  })
-  let currentComponent = components[selected]
-
-  useEffect(() => {
-    currentComponent = components[selected]
-  }, [selected])
-
-  return (
-    <div className={styles['tabbed-container']}>
-      <div className={styles['tabs-header']}>
-        {headers.map((header, index) => {
-          return (
-            <span onClick={() => setSelected(index)} key={index} className={`${styles.tab} ${selected === index ? styles['selected-tab'] : ''}`}>
-              {header}
-            </span>
-          )
-        })}
-      </div>
-      <div className={styles['tabs-content']}>{currentComponent()}</div>
-    </div>
-  )
-}
+'use strict'
+import React, { useEffect, useState } from 'react'
+import styles from './TabbedWindow.module.css'
+
+export default function TabbedWindow (props) {
+  const [selected, setSelected] = useState(0)
+  const { tabs } = props
+  const headers = []
+  const components = []
+  tabs.forEach((tab) => {
+    headers.push(tab.label)
+    components.push(tab.component)
+  })
+  let currentComponent = components[selected]
+
+  useEffect(() => {
+    currentComponent = components[selected]
+  }, [selected])
+
+  return (
+    <div className={styles['tabbed-container']}>
+      <div className={styles['tabs-header']}>
+        {headers.map((header, index) => {
+          return (
+            <span onClick={() => setSelected(index)} key={index} className={`${styles.tab} ${selected === index ? styles['selected-tab'] : ''}`}>
+              {header}
+            </span>
+          )
+        })}
+      </div>
+      <div className={styles['tabs-content']}>{currentComponent()}</div>
+    </div>
+  )
+}

package/src/components/TabbedWindow.module.css

@@ -1,17 +1,17 @@
-.tabbed-container {
-  @apply bg-main-dark-blue;
-}
-
-.tabs-header {
-  @apply flex justify-start text-white uppercase hover:cursor-pointer mb-4 tracking-[.25rem] h-[2rem];
-}
-.tab {
-  @apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0;  
-}
-.selected-tab {
-  @apply underline text-main-green underline-offset-8 font-bold;
-}
-
-.tabs-content {
-  @apply h-screen
+.tabbed-container {
+  @apply bg-main-dark-blue;
+}
+
+.tabs-header {
+  @apply flex justify-start text-white uppercase hover:cursor-pointer mb-4 tracking-[.25rem] h-[2rem];
+}
+.tab {
+  @apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0;  
+}
+.selected-tab {
+  @apply underline text-main-green underline-offset-8 font-bold;
+}
+
+.tabs-content {
+  @apply h-screen
 }

package/src/components/TextWithLabel.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import styles from './TextWithLabel.module.css'
-export default function TextWithLabel ({ label, text, children }) {
-  return (
-    <div className={styles.container}>
-      <span className={styles.label}>{label}:</span>
-      {text && <span className={styles.text}>{text}</span>}
-      {children && <span>{children}</span>}
-    </div>
-  )
-}
+import React from 'react'
+import styles from './TextWithLabel.module.css'
+export default function TextWithLabel ({ label, text, children }) {
+  return (
+    <div className={styles.container}>
+      <span className={styles.label}>{label}:</span>
+      {text && <span className={styles.text}>{text}</span>}
+      {children && <span>{children}</span>}
+    </div>
+  )
+}

package/src/components/TextWithLabel.module.css

@@ -1,9 +1,9 @@
-.container {
-  @apply text-white
-}
-.label {
-  @apply font-thin mr-2;
-}
-.text {
-  @apply font-semibold;
+.container {
+  @apply text-white
+}
+.label {
+  @apply font-thin mr-2;
+}
+.text {
+  @apply font-semibold;
 }

package/src/components/Versions.jsx

@@ -1,9 +1,9 @@
-'use strict'
-import React from 'react'
-import BorderedBox from './BorderedBox'
-
-export default function Versions () {
-  return (
-    <BorderedBox color='green'>Versions</BorderedBox>
-  )
-}
+'use strict'
+import React from 'react'
+import BorderedBox from './BorderedBox'
+
+export default function Versions () {
+  return (
+    <BorderedBox color='green'>Versions</BorderedBox>
+  )
+}

package/src/components/VerticalSeparator.jsx

@@ -1,5 +1,5 @@
-'use strict'
-import React from 'react'
-export default function VerticalSeparator () {
-  return <span className='text-dark-green m-3'> | </span>
-}
+'use strict'
+import React from 'react'
+export default function VerticalSeparator () {
+  return <span className='text-dark-green m-3'> | </span>
+}