@platformatic/ui-components 0.1.49 → 0.1.51

package/src/components/Modal.jsx

@@ -1,93 +1,93 @@
-import React, { useState } from 'react'
-import useEscapeKey from '../hooks/useEscapeKey'
-import CloseIcon from './icons/CloseIcon'
-import CircleCloseIcon from './icons/CircleCloseIcon'
-import CircleCloseHoverIcon from './icons/CircleCloseHoverIcon'
-import Logo from './Logo'
-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)}>
-                  <CloseIcon />
-                </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 ? <CircleCloseHoverIcon /> : <CircleCloseIcon />}
-                </div>
-              </div>
-              <p className={styles.titleInvite}>{title}</p>
-              <div>{props.children}</div>
-            </div>
-          </div>
-        </>
-      )
-      break
-
-    case 'fullscreen':
-      whichModal = (
-        <>
-          <div className={`${styles.container} ${styles.fullscreen}`}>
-            <div className={styles.modalFullscreen}>
-              <div className={styles.headerInvite}>
-                <div
-                  className={styles.close}
-                  onClick={() => setIsOpen(false)}
-                  onMouseEnter={() => setIsHoverCloseModal(true)}
-                  onMouseLeave={() => setIsHoverCloseModal(false)}
-                >
-                  {isHoverCloseModal ? <CircleCloseHoverIcon color='main-dark-blue' /> : <CircleCloseIcon color='main-dark-blue' />}
-                </div>
-              </div>
-              <div className={styles.contentFullscreen}>
-                <div className={styles.titleFullscreen}>
-                  <Logo width={100} heigth={80} color='main-dark-blue' />
-                  <h3>PLATFORMATIC</h3>
-                </div>
-                <div>{props.children}</div>
-              </div>
-            </div>
-          </div>
-        </>
-      )
-      break
-
-    default:
-      break
-  }
-  return whichModal
-}
+import React, { useState } from 'react'
+import useEscapeKey from '../hooks/useEscapeKey'
+import CloseIcon from './icons/CloseIcon'
+import CircleCloseIcon from './icons/CircleCloseIcon'
+import CircleCloseHoverIcon from './icons/CircleCloseHoverIcon'
+import Logo from './Logo'
+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)}>
+                  <CloseIcon size='small' />
+                </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 ? <CircleCloseHoverIcon /> : <CircleCloseIcon />}
+                </div>
+              </div>
+              <p className={styles.titleInvite}>{title}</p>
+              <div>{props.children}</div>
+            </div>
+          </div>
+        </>
+      )
+      break
+
+    case 'fullscreen':
+      whichModal = (
+        <>
+          <div className={`${styles.container} ${styles.fullscreen}`}>
+            <div className={styles.modalFullscreen}>
+              <div className={styles.headerInvite}>
+                <div
+                  className={styles.close}
+                  onClick={() => setIsOpen(false)}
+                  onMouseEnter={() => setIsHoverCloseModal(true)}
+                  onMouseLeave={() => setIsHoverCloseModal(false)}
+                >
+                  {isHoverCloseModal ? <CircleCloseHoverIcon color='main-dark-blue' /> : <CircleCloseIcon color='main-dark-blue' />}
+                </div>
+              </div>
+              <div className={styles.contentFullscreen}>
+                <div className={styles.titleFullscreen}>
+                  <Logo width={100} heigth={80} color='main-dark-blue' />
+                  <h3>PLATFORMATIC</h3>
+                </div>
+                <div>{props.children}</div>
+              </div>
+            </div>
+          </div>
+        </>
+      )
+      break
+
+    default:
+      break
+  }
+  return whichModal
+}

package/src/components/Modal.module.css

@@ -1,50 +1,50 @@
-.blur {
-  @apply fixed top-[50%] left-[50%] w-full h-screen translate-x-[-50%] translate-y-[-50%] z-10;
-  background-color: rgba(0, 0, 0, 0.75);
-}
-.container {
-  @apply z-20;
-}
-.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 max-w-[480px];
-}
-.modalInvite {
-  @apply bg-main-dark-blue border-light-green border shadow-wrap shadow-main-green max-w-[480px] max-h-[300px];
-}
-.fullscreen {
-  @apply fixed top-0 left-0 bg-light-blue h-screen w-full min-h-screen min-w-full py-4 pl-20 pr-4 overflow-y-auto;
-}
-.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;
-}
-.contentFullscreen {
-  @apply h-auto w-full pt-4;
-}
-.titleFullscreen {
-  @apply inline-flex items-center;
-}
-.titleFullscreen h3 {
-  @apply text-[22px] text-dark-blue font-bold tracking-widest mx-3;
-}
-
+.blur {
+  @apply fixed top-[50%] left-[50%] w-full h-screen translate-x-[-50%] translate-y-[-50%] z-10;
+  background-color: rgba(0, 0, 0, 0.75);
+}
+.container {
+  @apply z-20;
+}
+.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 max-w-[480px];
+}
+.modalInvite {
+  @apply bg-main-dark-blue border-light-green border shadow-wrap shadow-main-green max-w-[480px] max-h-[300px];
+}
+.fullscreen {
+  @apply fixed top-0 left-0 bg-light-blue h-screen w-full min-h-screen min-w-full py-4 pl-20 pr-4 overflow-y-auto;
+}
+.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;
+}
+.contentFullscreen {
+  @apply h-auto w-full pt-4;
+}
+.titleFullscreen {
+  @apply inline-flex items-center;
+}
+.titleFullscreen h3 {
+  @apply text-[22px] text-dark-blue font-bold tracking-widest mx-3;
+}
+

package/src/components/PlatformaticIcon.jsx

@@ -1,57 +1,57 @@
-'use strict'
-import React from 'react'
-import PropTypes from 'prop-types'
-import Icons from './icons'
-import styles from './PlatformaticIcon.module.css'
-
-function PlatformaticIcon ({ iconName, color, onClick, size, classes, tip }) {
-  let icon = React.createElement(Icons[`${iconName}`], {
-    color,
-    size,
-    tip
-  })
-  if (onClick) {
-    let className = styles.cursorPointer
-    if (classes) className += ` ${classes}`
-    icon = (<span className={className} onClick={onClick}>{icon}</span>)
-  }
-  return icon
-}
-
-PlatformaticIcon.propTypes = {
-  /**
-   * iconName
-   */
-  iconName: PropTypes.string.isRequired,
-  /**
-   * color
-   */
-  color: PropTypes.string,
-  /**
-   * size
-   */
-  size: PropTypes.string,
-  /**
-   * onClick
-   */
-  onClick: PropTypes.func,
-  /**
-   * classes
-   */
-  classes: PropTypes.string,
-  /**
-   * tip
-   */
-  tip: PropTypes.string
-}
-
-PlatformaticIcon.defaultProps = {
-  iconName: null,
-  color: 'green',
-  size: 'small',
-  onClick: () => {},
-  classes: null,
-  tip: null
-}
-
-export default PlatformaticIcon
+'use strict'
+import React from 'react'
+import PropTypes from 'prop-types'
+import Icons from './icons'
+import styles from './PlatformaticIcon.module.css'
+
+function PlatformaticIcon ({ iconName, color, onClick, size, classes, tip }) {
+  let icon = React.createElement(Icons[`${iconName}`], {
+    color,
+    size,
+    tip
+  })
+  if (onClick) {
+    let className = styles.cursorPointer
+    if (classes) className += ` ${classes}`
+    icon = (<span className={className} onClick={onClick}>{icon}</span>)
+  }
+  return icon
+}
+
+PlatformaticIcon.propTypes = {
+  /**
+   * iconName
+   */
+  iconName: PropTypes.string.isRequired,
+  /**
+   * color
+   */
+  color: PropTypes.string,
+  /**
+   * size
+   */
+  size: PropTypes.string,
+  /**
+   * onClick
+   */
+  onClick: PropTypes.func,
+  /**
+   * classes
+   */
+  classes: PropTypes.string,
+  /**
+   * tip
+   */
+  tip: PropTypes.string
+}
+
+PlatformaticIcon.defaultProps = {
+  iconName: null,
+  color: 'green',
+  size: 'small',
+  onClick: () => {},
+  classes: null,
+  tip: null
+}
+
+export default PlatformaticIcon

package/src/components/PlatformaticIcon.module.css

@@ -1,3 +1,3 @@
-.cursorPointer {
-  @apply cursor-pointer;
+.cursorPointer {
+  @apply cursor-pointer;
 }

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