@platformatic/ui-components 0.1.37 → 0.1.39

package/dist/main.css

@@ -660,11 +660,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-dark-green {
-  --tw-text-opacity: 1;
-  color: rgb(2 120 63 / var(--tw-text-opacity));
-}
-
 .text-main-green {
   --tw-text-opacity: 1;
   color: rgb(33 250 144 / var(--tw-text-opacity));
@@ -675,6 +670,11 @@ video {
   color: rgb(250 33 33 / var(--tw-text-opacity));
 }
 
+.text-dark-green {
+  --tw-text-opacity: 1;
+  color: rgb(2 120 63 / var(--tw-text-opacity));
+}
+
 .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);

package/index.js

@@ -11,13 +11,14 @@ import DropDown from './src/components/DropDown'
 import FollowUs from './src/components/FollowUs'
 import GHLoginButton from './src/components/GHLoginButton'
 import HorizontalSeparator from './src/components/HorizontalSeparator'
+import Forms from './src/components/forms'
 import Icons from './src/components/icons'
-import Input from './src/components/Input'
 import SideBar from './src/components/SideBar'
 import Layout from './src/components/layouts/Layout'
 import List from './src/components/List'
 import ListElement from './src/components/ListElement'
 import Loadable from './src/components/Loadable'
+import Loader from './src/components/Loader'
 import LoginButton from './src/components/LoginButton'
 import Logo from './src/components/Logo'
 import Modal from './src/components/Modal'
@@ -30,6 +31,7 @@ import TextWithLabel from './src/components/TextWithLabel'
 import TwoColumnsLayout from './src/components/layouts/TwoColumnsLayout'
 import Versions from './src/components/Versions'
 import VerticalSeparator from './src/components/VerticalSeparator'
+
 export {
   BorderedBox,
   BorderedText,
@@ -42,13 +44,14 @@ export {
   FollowUs,
   HorizontalSeparator,
   GHLoginButton,
+  Forms,
   Icons,
-  Input,
   SideBar,
   Layout,
   List,
   ListElement,
   Loadable,
+  Loader,
   LoginButton,
   Logo,
   Modal,
@@ -60,5 +63,5 @@ export {
   TextWithLabel,
   TwoColumnsLayout,
   Versions,
-  VerticalSeparator
+  VerticalSeparator,
 }

package/package.json

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

package/src/components/Button.jsx

@@ -1,16 +1,17 @@
 'use strict'
-
 import React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Button.module.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-export default function Button (props) {
-  const { icon, label, buttonClass = 'secondary', color = 'green', disabled, size = 'large', bold = false, ...rest } = props
-  let className = `${styles.button} ${styles[buttonClass + '-' + color]} ${styles['button-' + size]}`
+
+function Button (props) {
+  const { icon, label, color, backgroundColor, size, disabled, bold, underlineEffect, bordered, ...rest } = props
+  let className = `${styles.button} ${styles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
+  if (!bordered) className += ` ${styles['no-border']}`
   if (disabled) {
     className += ` ${styles.disabled}`
-    if (buttonClass === 'transparent') {
-      className += ` ${styles['disabled-transparent']}`
-    }
+  } else {
+    if (underlineEffect) className += ` ${styles['underline-effect']}`
   }
   if (bold) className += ` ${styles.fontBold}`
 
@@ -21,3 +22,54 @@ export default function Button (props) {
     </button>
   )
 }
+
+Button.propTypes = {
+  /**
+   * Icon
+   */
+  icon: PropTypes.object,
+  /**
+   * label
+   */
+  label: PropTypes.string,
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']),
+  /**
+   * background color of the button
+   */
+  backgroundColor: PropTypes.oneOf(['main-green', 'dark-green', 'light-green', 'main-dark-blue', 'dark-blue', 'light-blue', 'white', 'error-red', 'tertiary-blue', 'transparent']),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large']),
+  /**
+   * Disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Bold
+   */
+  bold: PropTypes.bool,
+  /**
+   * Underline effect on hover
+   */
+  underlineEffect: PropTypes.bool,
+  /**
+   * Apply border: default true
+   */
+  bordered: PropTypes.bool
+}
+
+Button.defaultProps = {
+  color: 'main-dark-blue',
+  backgroundColor: 'transparent',
+  disabled: false,
+  size: 'large',
+  bold: false,
+  underlineEffect: false,
+  bordered: true
+}
+
+export default Button

package/src/components/Button.module.css

@@ -1,5 +1,5 @@
 .button {
-  @apply rounded text-center cursor-pointer font-normal;
+  @apply rounded text-center cursor-pointer font-normal rounded-md border border-solid box-border;
 }
 .fontBold {
   @apply font-semibold;
@@ -27,42 +27,72 @@
 .margin-right-extra-large {
   @apply mr-3;
 }
-
-.primary-green {
-  @apply text-main-dark-blue bg-light-green;
+.background-color-main-green {
+  @apply bg-main-green !important;
 }
-.secondary-green {
-  @apply border-main-green text-main-green bg-none border border-solid box-border rounded-md;
+.background-color-light-green {
+  @apply bg-light-green !important;
 }
-.transparent-green {
-  @apply text-main-green border-0 bg-transparent hover:underline;
+.background-color-dark-green {
+  @apply bg-dark-green !important;
 }
-
-
-.primary-red {
-  @apply text-main-dark-blue bg-error-red;
+.background-color-main-dark-blue{
+  @apply bg-main-dark-blue !important;
 }
-.secondary-red {
-  @apply border-error-red text-error-red bg-none border border-solid box-border rounded-md;
+.background-color-dark-blue{
+  @apply bg-dark-blue !important;
 }
-.transparent-red {
-  @apply text-error-red border-0 bg-transparent hover:underline;
+.background-color-light-blue{
+  @apply bg-light-blue !important;
 }
-
-.primary-white {
-  @apply text-main-dark-blue bg-white;
+.background-color-white{
+  @apply bg-white !important;
 }
-.secondary-white {
-  @apply border-white text-white bg-none border border-solid box-border rounded-md;
+.background-color-error-red{
+  @apply bg-error-red !important;
 }
-.transparent-white {
-  @apply text-white border-0 bg-transparent hover:underline;
+.background-color-tertiary-blue{
+  @apply bg-tertiary-blue !important;
+}
+.background-color-transparent{
+  @apply bg-transparent;
+}
+.color-main-green {
+  @apply text-main-green border-main-green;
+}
+.color-light-green {
+  @apply text-light-green border-light-green;
+}
+.color-dark-green {
+  @apply text-dark-green border-dark-green;
+}
+.color-main-dark-blue{
+  @apply text-main-dark-blue border-main-dark-blue;
+}
+.color-dark-blue{
+  @apply text-dark-blue border-dark-blue;
+}
+.color-light-blue{
+  @apply text-light-blue border-light-blue;
+}
+.color-white{
+  @apply text-white border-white;
+}
+.color-error-red{
+  @apply text-error-red border-error-red;
+}
+.color-tertiary-blue{
+  @apply text-tertiary-blue border-tertiary-blue;
+}
+.color-transparent{
+  @apply text-transparent border-transparent;
+}
+.no-border {
+  @apply border-0;
 }
-
 .disabled {
   @apply opacity-30 cursor-default;
 }
-
-.disabled-transparent {
-  @apply hover:no-underline;
-}
+.underline-effect {
+  @apply hover:underline;
+}

package/src/components/Common.module.css

@@ -1,7 +1,25 @@
+.bordered {
+  @apply border border-solid box-border rounded-md;
+}
+.bordered--main-green {
+  @apply border-main-green
+}
+.bordered--main-dark-blue {
+  @apply border-main-dark-blue;
+}
+
+.error-message {
+  @apply absolute -bottom-5 text-error-red text-xs px-2;
+}
+
 .padded {
   @apply px-2 py-2.5;
 }
 
-.bordered {
-  @apply border border-solid box-border rounded-md;
+.text--green {
+  @apply text-main-green
+}
+.text--main-dark-blue {
+  @apply text-main-dark-blue;
 }
+

package/src/components/HorizontalSeparator.jsx

@@ -1,9 +1,14 @@
 'use strict'
 import React from 'react'
 import styles from './HorizontalSeparator.module.css'
-export default function HorizontalSeparator ({ marginTop = 4, marginBottom = 4 }) {
+export default function HorizontalSeparator ({ marginTop = 4, marginBottom = 4, color = 'dark-green', opacity = 1 }) {
   function getClassName () {
-    return 'text-dark-green ' + (marginTop === marginBottom ? `${styles['marginY-' + marginTop]}` : `${styles['marginT-' + marginTop]} ${styles['marginB-' + marginBottom]}`)
+    let className = `text-${color} `
+    // margin
+    className += (marginTop === marginBottom ? `${styles['marginY-' + marginTop]}` : `${styles['marginT-' + marginTop]} ${styles['marginB-' + marginBottom]}`)
+    // opacity
+    if (opacity > 1) className += ' ' + styles[`apply-opacity-${opacity}`]
+    return className
   }
 
   return <hr className={getClassName()} />

package/src/components/HorizontalSeparator.module.css

@@ -20,4 +20,8 @@
 
 .marginB-10 {
   @apply mb-10;
+}
+
+.apply-opacity-20 {
+  @apply opacity-20;
 }

package/src/components/Loadable.jsx

@@ -2,7 +2,7 @@ import React, { useState, cloneElement, Children } from 'react'
 import styles from './Loadable.module.css'
 import { SpinnerCircular } from 'spinners-react'
 
-export default function List ({ ...props }) {
+export default function Loadable ({ ...props }) {
   // If null then loading not started, if true then loading, if false then done loading
   const [loading, setLoading] = useState(null)
   const startLoading = (reset = false) => {

package/src/components/Loader.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import styles from './Loader.module.css'
+import { SpinnerCircular } from 'spinners-react'
+
+export default function Loader ({ loading, children }) {
+  return (
+    <>
+      {
+        loading
+          ? (
+            <div className={styles.container} data-testid='loading'>
+              <div data-testid='loading-content' className={styles.content}>
+                <SpinnerCircular className={styles.spinner} thickness={180} size={60} />
+                <div className={styles.blurred}>{children}</div>
+              </div>
+            </div>
+            )
+          : children
+      }
+    </>
+  )
+}

package/src/components/Loader.module.css

@@ -0,0 +1,13 @@
+.container {
+  @apply fixed top-0 left-0 h-full w-full z-40;
+}
+.content {
+  @apply h-full w-full;
+}
+.spinner {
+  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50;
+}
+.blurred {
+  @apply blur-sm;
+}
+

package/src/components/Logo.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-export default function Logo ({ width = 107, heigth = 86 }) {
+import styles from './Logo.module.css'
+export default function Logo ({ width = 107, heigth = 86, color = 'white' }) {
+  const className = styles[`${color}`]
   return (
     <svg
       width={width}
@@ -7,10 +9,12 @@ export default function Logo ({ width = 107, heigth = 86 }) {
       viewBox='0 0 107 86'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      className={className}
     >
       <path
+        id='platformatic-cloud'
         d='M30.8197 62.5803H89.7919V62.5614C92.0266 62.4574 94.2096 61.8539 96.1799 60.7954C98.1502 59.7369 99.8577 58.2503 101.177 56.4452C102.496 54.6401 103.392 52.5624 103.801 50.3652C104.21 48.168 104.12 45.9072 103.538 43.7493C102.956 41.5915 101.897 39.5915 100.438 37.8967C98.9799 36.202 97.1596 34.8556 95.1114 33.9567C93.0632 33.0579 90.8392 32.6294 88.6032 32.703C86.3673 32.7765 84.1763 33.3502 82.1917 34.3817C80.9669 31.5572 79.1131 29.0491 76.7716 27.0482C74.43 25.0473 71.6623 23.6064 68.6792 22.8352M18.1691 22.8352C13.8266 23.9537 9.97973 26.4828 7.23367 30.0244C4.48761 33.566 2.99827 37.9192 3 42.399C3.00173 46.8787 4.49443 51.2307 7.24322 54.7702C9.992 58.3098 13.8409 60.8359 18.1841 61.951'
-        stroke='white'
+        stroke='none'
         strokeWidth={4.21053}
         strokeLinecap='round'
         strokeLinejoin='round'

package/src/components/Logo.module.css

@@ -0,0 +1,6 @@
+.white > path[id='platformatic-cloud']{
+  @apply stroke-white
+}
+.main-dark-blue > path[id='platformatic-cloud']{
+  @apply stroke-main-dark-blue
+}

package/src/components/Modal.jsx

@@ -1,9 +1,12 @@
 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 RoundCloseIcon from './icons/RoundCloseIcon'
+import RoundCloseHoverIcon from './icons/RoundCloseHoverIcon'
+import Logo from './Logo'
+import HorizontalSeparator from './HorizontalSeparator'
 import styles from './Modal.module.css'
+
 export default function Modal (props) {
   const { setIsOpen, title, layout = 'info' } = props
   const [isHoverCloseModal, setIsHoverCloseModal] = useState(false)
@@ -31,6 +34,7 @@ export default function Modal (props) {
         </>
       )
       break
+
     case 'invite':
       whichModal = (
         <>
@@ -44,7 +48,7 @@ export default function Modal (props) {
                   onMouseEnter={() => setIsHoverCloseModal(true)}
                   onMouseLeave={() => setIsHoverCloseModal(false)}
                 >
-                  {isHoverCloseModal ? <CloseModalGreenHoverIcon /> : <CloseModalGreenIcon />}
+                  {isHoverCloseModal ? <RoundCloseHoverIcon /> : <RoundCloseIcon />}
                 </div>
               </div>
               <p className={styles.titleInvite}>{title}</p>
@@ -54,6 +58,36 @@ export default function Modal (props) {
         </>
       )
       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 ? <RoundCloseHoverIcon color='main-dark-blue' /> : <RoundCloseIcon 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>
+                <HorizontalSeparator marginTop={10} marginBottom={10} color='main-dark-blue' opacity={20} />
+                <div>{props.children}</div>
+              </div>
+            </div>
+          </div>
+        </>
+      )
+      break
+
     default:
       break
   }

package/src/components/Modal.module.css

@@ -1,9 +1,9 @@
 .blur {
-  @apply absolute top-[50%] left-[50%] z-0 w-[100vw] h-[100vh] translate-x-[-50%] translate-y-[-50%] z-[9999];
+  @apply absolute top-[50%] left-[50%] w-[100vw] h-[100vh] translate-x-[-50%] translate-y-[-50%] z-[9999];
   background-color: rgba(0, 0, 0, 0.75);
 }
 .container {
-  @apply z-[9999];
+  @apply z-20;
 }
 .centered {
   @apply fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%]
@@ -17,6 +17,9 @@
 .modalInvite {
   @apply bg-main-dark-blue border-light-green border shadow-wrap shadow-main-green max-w-[432px] 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;
 }
@@ -35,3 +38,14 @@
 .titleInvite {
   @apply font-bold text-lg text-main-green text-center;
 }
+.contentFullscreen {
+  @apply h-auto max-w-[70%] 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/forms/Field.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import styles from './Field.module.css'
+import HorizontalSeparator from '../HorizontalSeparator'
+
+export default function Field ({ title, helper, children, disabled }) {
+  let className = `${styles.container}`
+  if (disabled) className += ` ${styles.disabled}`
+  return (
+    <>
+      <div className={className}>
+        <p className={styles.title}>{title}</p>
+        <p className={styles.helper}>{helper}</p>
+        <div className={styles.content}>
+          {children}
+        </div>
+      </div>
+      <HorizontalSeparator color='main-dark-green' opacity={20} marginBottom={10} marginTop={10} />
+    </>
+  )
+}

package/src/components/forms/Field.module.css

@@ -0,0 +1,18 @@
+.container {
+  @apply flex flex-col;
+}
+.title{
+  @apply text-xl font-semibold text-main-dark-blue;
+}
+.helper{
+  @apply text-sm text-main-dark-blue pb-4;
+}
+.content {
+  @apply flex gap-x-1 w-full;
+}
+.content button {
+  @apply shrink-0;
+}
+.disabled {
+  @apply opacity-20;
+}

package/src/components/forms/Input.jsx

@@ -0,0 +1,55 @@
+'use strict'
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Input.module.css'
+import commonStyles from '../Common.module.css'
+function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled }) {
+  const className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles.padded
+  return (
+    <div className={styles.container}>
+      <div className={className}>
+        <input type='text' name={name} value={value} placeholder={placeholder} className={styles.fullWidth} onChange={onChange} disabled={disabled} />
+      </div>
+      {errorMessage.length > 0 && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+    </div>
+  )
+}
+
+Input.propTypes = {
+  /**
+   * placeholder
+   */
+  placeholder: PropTypes.string,
+  /**
+   * value
+   */
+  value: PropTypes.string,
+  /**
+   * name
+   */
+  name: PropTypes.string,
+  /**
+   * color of border
+   */
+  borderColor: PropTypes.oneOf(['main-green', 'main-dark-blue']),
+  /**
+   * onChange
+   */
+  onChange: PropTypes.func,
+  /**
+   * Disabled
+   */
+  disabled: PropTypes.bool
+}
+
+Input.defaultProps = {
+  placeholder: '',
+  value: null,
+  name: '',
+  borderColor: 'main-green',
+  errorMessage: '',
+  onChange: () => {},
+  disabled: false
+}
+
+export default Input

package/src/components/forms/Input.module.css

@@ -0,0 +1,15 @@
+.container {
+  @apply flex flex-col w-full relative;
+}
+.inputContainer {
+  @apply flex h-10 border border-solid box-border rounded-md;
+}
+.fullWidth {
+  @apply w-full;
+}
+.input {
+  @apply focus:outline-none focus-within:outline-none focus-visible:outline-none;
+}
+[type='text']:focus {
+  outline: none;
+}

package/src/components/forms/Preview.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import styles from './Preview.module.css'
+import HorizontalSeparator from '../HorizontalSeparator'
+
+export default function Preview ({ title, value, isLink = false }) {
+  return (
+    <>
+      <div className={styles.container}>
+        <p className={styles.title}>{title}</p>
+        {isLink ? <a className={styles.link} href={value} target='_blank' rel='noreferrer'>{value}</a> : <p className={styles.value}>{value}</p>}
+      </div>
+      <HorizontalSeparator color='main-dark-green' opacity={20} marginBottom={10} marginTop={10} />
+    </>
+  )
+}

package/src/components/forms/Preview.module.css

@@ -0,0 +1,12 @@
+.container {
+  @apply flex flex-col
+}
+.title{
+  @apply text-sm text-main-dark-blue pb-1;
+}
+.value{
+  @apply text-xl font-semibold text-main-dark-blue;
+}
+.link {
+  @apply font-semibold;
+}

package/src/components/forms/ToggleSwitch.jsx

@@ -0,0 +1,18 @@
+'use strict'
+import React from 'react'
+import styles from './ToggleSwitch.module.css'
+import commonStyles from '../Common.module.css'
+export default function ToggleSwitch ({ name, label, errorMessage = '', onChange = () => {} }) {
+  return (
+    <>
+      <div className={styles.container}>
+        <label className={styles.switch}>
+          <input type='checkbox' name={name} onChange={onChange} />
+          <span className={`${styles.slider} ${styles.round}`} />
+        </label>
+        <span className={styles.label}>{label}</span>
+      </div>
+      {errorMessage.length > 0 && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+    </>
+  )
+}