@platformatic/ui-components 0.1.124 → 0.1.125

package/src/components/ModalDirectional.jsx

@@ -0,0 +1,83 @@
+'use strict'
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+import useEscapeKey from '../hooks/useEscapeKey'
+import styles from './ModalDirectional.module.css'
+import {
+  SMALL,
+  WHITE
+} from './constants'
+import PlatformaticIcon from './PlatformaticIcon'
+
+function ModalDirectional ({
+  setIsOpen,
+  title,
+  titleClassName,
+  children,
+  smallLayout
+}) {
+  const className = `${styles.container} ${styles.modalLeftCover} ${smallLayout ? styles.smallLayout : styles.normalLayout}`
+  const [modalClassName] = useState(className)
+  const [variantModalClassName, setVariantModalClassName] = useState(`${styles.container} ${styles.modalLeftCover}`)
+
+  useEffect(() => {
+    setVariantModalClassName(`${modalClassName} ${styles.modalLeftCoverEntering}`)
+  }, [])
+
+  useEscapeKey(() => closeModal())
+
+  function closeModal () {
+    setVariantModalClassName(`${modalClassName} ${styles.modalLeftCoverLeaving}`)
+    setTimeout(() => {
+      setIsOpen(false)
+    }, 300)
+  }
+
+  return (
+    <>
+      <div className={styles.blur} onClick={() => closeModal()} />
+      <div className={variantModalClassName}>
+        <div className={styles.modalLefty}>
+          <div className={styles.headerClassName}>
+            <PlatformaticIcon iconName='ArrowLongLeftIcon' color={WHITE} size={SMALL} onClick={() => closeModal()} />
+            <span className={titleClassName}>{title}</span>
+          </div>
+          {children}
+        </div>
+      </div>
+    </>
+  )
+}
+
+ModalDirectional.propTypes = {
+  /**
+   * children
+   */
+  children: PropTypes.node,
+  /**
+   * setIsOpen
+   */
+  setIsOpen: PropTypes.func,
+  /**
+   * title
+   */
+  title: PropTypes.string,
+  /**
+   * title
+   */
+  titleClassName: PropTypes.string,
+  /**
+   * smallLayout
+   */
+  smallLayout: PropTypes.bool
+}
+
+ModalDirectional.defaultProps = {
+  children: null,
+  setIsOpen: () => {},
+  title: '',
+  titleClassName: '',
+  smallLayout: false
+}
+
+export default ModalDirectional

package/src/components/ModalDirectional.module.css

@@ -0,0 +1,38 @@
+.blur {
+  @apply absolute top-0 left-0 w-full h-full z-10 bg-rich-black/75;
+}
+.container {
+  @apply z-20 fixed top-0 -right-[100%] min-h-full h-full bg-rich-black border-solid border-white border-l; 
+}
+.normalLayout {
+  @apply max-w-[75%] min-w-[75%];
+}
+.smallLayout {
+  @apply max-w-[34%] min-w-[34%];
+}
+.modalLeftCover {
+  @apply overflow-y-auto w-full ;
+}
+.modalLeftCoverEntering {
+  animation: come-in 400ms forwards;
+}
+.modalLeftCoverLeaving {
+  animation: come-out 200ms forwards;
+}
+.headerClassName {
+  @apply flex items-center gap-x-2 pb-4;
+}
+.modalLefty {
+  @apply py-20 px-[7.5rem];
+  height: calc(100% - 10rem);
+}
+
+@keyframes come-in {
+  from {right: -100%}
+  to {right: 0%}
+}
+
+@keyframes come-out {
+  from {right: 0%}
+  to {right: -100%}
+}

package/src/components/PlatformaticIcon.jsx

@@ -6,19 +6,29 @@ import Icons from './icons'
 import styles from './PlatformaticIcon.module.css'
 import { COLORS_ICON, MAIN_GREEN, SIZES, SMALL } from './constants'
 
-function PlatformaticIcon ({ iconName, color, onClick, size, classes, tip, ...rest }) {
+function PlatformaticIcon ({
+  iconName,
+  color,
+  onClick,
+  size,
+  classes,
+  tip,
+  disabled,
+  ...rest
+}) {
   let icon = <></>
   if (iconName) {
     icon = React.createElement(Icons[`${iconName}`], {
       color,
       size,
       tip,
+      disabled,
       ...rest
     })
-    if (onClick) {
+    if (onClick && !disabled) {
       let className = styles.cursorPointer
       if (classes) className += ` ${classes}`
-      icon = (<span className={className} onClick={onClick}>{icon}</span>)
+      icon = (<div className={className} onClick={onClick}>{icon}</div>)
     }
   }
   return (
@@ -53,7 +63,11 @@ PlatformaticIcon.propTypes = {
   /**
    * tip
    */
-  tip: PropTypes.string
+  tip: PropTypes.string,
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
 }
 
 PlatformaticIcon.defaultProps = {
@@ -62,7 +76,8 @@ PlatformaticIcon.defaultProps = {
   size: SMALL,
   onClick: () => {},
   classes: '',
-  tip: ''
+  tip: '',
+  disabled: false
 }
 
 export default PlatformaticIcon

package/src/components/SearchBarV2.jsx

@@ -0,0 +1,120 @@
+'use strict'
+import React, { useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import styles from './SearchBarV2.module.css'
+import PlatformaticIcon from './PlatformaticIcon'
+import { MEDIUM, WHITE } from './constants'
+function SearchBarV2 ({
+  onSubmit,
+  onChange,
+  onClear,
+  color,
+  onFocusColor,
+  placeholder,
+  dataAttrName,
+  dataAttrValue
+}) {
+  const inputRef = useRef()
+  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
+  const [isOnFocus, setIsOnFocus] = useState(false)
+  const dataProps = {}
+  if (dataAttrName && dataAttrValue) {
+    dataProps[`data-${dataAttrName}`] = dataAttrValue
+  }
+  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 handleClear () {
+    inputRef.current.value = ''
+    return onClear()
+  }
+
+  function onFocus () {
+    if (!isOnFocus) {
+      setIsOnFocus(true)
+      setWrapperClassName(onFocusClassName())
+    }
+  }
+
+  function onBlur () {
+    setIsOnFocus(false)
+    setWrapperClassName(normalClassName())
+  }
+
+  function onFocusClassName () {
+    return `${styles.container} ${styles.wrapperPadding} ${styles.onFocus}`
+  }
+
+  function normalClassName () {
+    return `${styles.container} ${styles.wrapperPadding} ${styles.onBlur}`
+  }
+
+  return (
+    <div className={wrapperClassName} {...dataProps}>
+      <PlatformaticIcon iconName='LensIcon' color={isOnFocus ? onFocusColor : color} size={MEDIUM} onClick={handleSearch} />
+      <input type='text' placeholder={placeholder} className={styles.input} ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
+      <div className={styles.clearContainer}>
+        <PlatformaticIcon iconName='CircleCloseIcon' color={isOnFocus ? onFocusColor : color} size={MEDIUM} onClick={handleClear} />
+      </div>
+    </div>
+  )
+}
+
+SearchBarV2.propTypes = {
+  /**
+   * onSubmit
+   */
+  onSubmit: PropTypes.func,
+  /**
+   * onSubmit
+   */
+  onChange: PropTypes.func,
+  /**
+   * onSubmit
+   */
+  onClear: PropTypes.func,
+  /**
+   * color
+   */
+  color: PropTypes.string,
+  /**
+   * onFocusColor
+   */
+  onFocusColor: PropTypes.string,
+  /**
+   * placeholder
+   */
+  placeholder: PropTypes.string,
+  /**
+   * dataAttrName
+  */
+  dataAttrName: PropTypes.string,
+  /**
+   * dataAttrValue
+  */
+  dataAttrValue: PropTypes.string
+}
+
+SearchBarV2.defaultProps = {
+  color: WHITE,
+  onFocusColor: WHITE,
+  onSubmit: () => {},
+  onChange: () => {},
+  onClear: () => {},
+  placeholder: 'Search',
+  dataAttrName: '',
+  dataAttrValue: ''
+}
+
+export default SearchBarV2

package/src/components/SearchBarV2.module.css

@@ -0,0 +1,28 @@
+.container {
+  @apply relative flex gap-x-2 w-full h-auto border border-solid box-border rounded-md;
+}
+.input {
+  @apply w-full p-0 bg-transparent border-none text-white ;
+}
+.onFocus {
+  @apply border-white;
+}
+.onBlur {
+  @apply border-white/15;
+}
+.fillWhite {
+  @apply fill-white;
+}
+.container > input:focus {
+  @apply outline-none;
+}
+.title {
+  @apply font-semibold text-white text-3xl pb-4;
+}
+.clearContainer {
+  @apply absolute right-[1rem] translate-y-[-50%];
+}
+.wrapperPadding {
+  @apply px-2 py-1.5;
+}
+

package/src/components/TabbedWindowV2.jsx

@@ -0,0 +1,82 @@
+'use strict'
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import styles from './TabbedWindowV2.module.css'
+import commonStyles from './Common.module.css'
+import { MAIN_DARK_BLUE, OPACITY_30, TRANSPARENT, WHITE } from './constants'
+import VerticalSeparator from './VerticalSeparator'
+
+function TabbedWindowV2 ({ tabs, keySelected, backgroundColor }) {
+  const headers = []
+  const keys = []
+  const components = []
+  tabs.forEach((tab) => {
+    headers.push(tab.headerComponent)
+    keys.push(tab.key)
+    components.push(tab.component)
+  })
+  const [currentComponent, setCurrentComponent] = useState(components[0])
+  const className = commonStyles.fullWidth + ' ' + commonStyles[`background-color-${backgroundColor}`] + ' '
+
+  useEffect(() => {
+    if (keySelected) {
+      const indexKey = keys.findIndex(key => key === keySelected)
+      setCurrentComponent(components[indexKey])
+    }
+  }, [keySelected])
+
+  function renderHeaders () {
+    const cmps = []
+    headers.forEach((header, index) => {
+      if (index > 0) {
+        cmps.push(<VerticalSeparator color={WHITE} backgroundColorOpacity={OPACITY_30} key={`vs${index}`} />)
+      }
+      cmps.push(header())
+      /* const element = header()
+      cmps.push(
+        React.cloneElement(element, {
+          key: element.key,
+          onClick: () => {setCurrentTab(index)},
+        })
+      ) */
+    })
+    return cmps
+  }
+
+  return (
+    <div className={`${styles.container} ${className}`}>
+      <div className={styles['tabs-header']}>
+        {renderHeaders()}
+      </div>
+      <div className={styles['tabs-content']}>{currentComponent}</div>
+    </div>
+  )
+}
+
+TabbedWindowV2.propTypes = {
+  /**
+   * tabs
+   */
+  tabs: PropTypes.array,
+  /**
+   * keySelected
+   */
+  keySelected: PropTypes.string,
+  /**
+   * callbackSelected
+   */
+  callbackSelected: PropTypes.func,
+  /**
+   * backgroundColor
+   */
+  backgroundColor: PropTypes.oneOf([WHITE, MAIN_DARK_BLUE, TRANSPARENT])
+}
+
+TabbedWindowV2.defaultProps = {
+  tabs: [],
+  keySelected: '',
+  callbackSelected: () => {},
+  backgroundColor: MAIN_DARK_BLUE
+}
+
+export default TabbedWindowV2

package/src/components/TabbedWindowV2.module.css

@@ -0,0 +1,17 @@
+.container {
+  @apply flex flex-col gap-y-10
+}
+.tabs-header {
+  @apply flex justify-start items-center gap-x-0;
+}
+.tabs-content {
+  @apply min-h-screen
+}
+.tab::before {
+  display: block;
+  content: attr(title);
+  font-weight: bold;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}

package/src/components/VerticalSeparator.jsx

@@ -1,23 +1,35 @@
 'use strict'
 import React from 'react'
 import PropTypes from 'prop-types'
-import { DARK_GREEN, MAIN_DARK_BLUE } from './constants'
+import { DARK_GREEN, MAIN_DARK_BLUE, OPACITY_10, OPACITY_20, OPACITY_30, OPACITY_60, OPACITY_100, WHITE } from './constants'
 import commonStyles from './Common.module.css'
+import styles from './VerticalSeparator.module.css'
 
-function VerticalSeparator ({ color }) {
-  const className = commonStyles[`text--${color}`] + ' my-auto mx-5'
-  return <span className={className}> | </span>
+function VerticalSeparator ({ color, backgroundColorOpacity }) {
+  const backgroundColor = commonStyles[`background-color-${color}`]
+  const backgroundOpacity = commonStyles[`background-color-opaque-${backgroundColorOpacity}`]
+  const className = `${backgroundColor} ${backgroundOpacity} ${styles.fullHeight}`
+  return <div className={className} />
 }
 
 VerticalSeparator.propTypes = {
   /**
    * color
    */
-  color: PropTypes.oneOf([DARK_GREEN, MAIN_DARK_BLUE])
+  color: PropTypes.oneOf([DARK_GREEN, MAIN_DARK_BLUE, WHITE]),
+  /**
+   * backgroundColorOpacity
+   */
+  backgroundColorOpacity: PropTypes.oneOf([OPACITY_10,
+    OPACITY_20,
+    OPACITY_30,
+    OPACITY_60,
+    OPACITY_100])
 }
 
 VerticalSeparator.defaultProps = {
-  color: DARK_GREEN
+  color: DARK_GREEN,
+  backgroundColorOpacity: 100
 }
 
 export default VerticalSeparator

package/src/components/VerticalSeparator.module.css

@@ -0,0 +1,3 @@
+.fullHeight {
+  @apply h-full min-h-[18px] w-[1px];
+}

package/src/components/constants.js

@@ -9,6 +9,8 @@ export const TRANSPARENT = 'transparent'
 export const TERTIARY_BLUE = 'tertiary-blue'
 export const ERROR_RED = 'error-red'
 export const WARNING_YELLOW = 'warning-yellow'
+export const RICH_BLACK = 'rich-black'
+
 export const NONE = 'none'
 export const EXTRA_SMALL = 'extra-small'
 export const SMALL = 'small'
@@ -26,14 +28,15 @@ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, BACKGROUND_COLOR_OPAQUE, UNDER
 export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
 
 export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE]
-export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT]
+export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK]
 export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE]
 
 export const MODAL_POPUP = 'popup'
+export const MODAL_POPUP_V2 = 'popup-v2'
 export const MODAL_COVER = 'cover'
 export const MODAL_FULL_DARK = 'full-dark'
 export const MODAL_FULL_LIGHT = 'full-light'
-export const MODAL_LAYOUTS = [MODAL_POPUP, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT]
+export const MODAL_LAYOUTS = [MODAL_POPUP_V2, MODAL_POPUP, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT]
 
 export const FREE = 'free'
 export const BASIC = 'basic'
@@ -49,6 +52,11 @@ export const ROLE_USER = 'user'
 export const ROLE_OWNER = 'owner'
 
 export const MARGIN_10 = 10
+export const MARGIN_8 = 8
 export const MARGIN_0 = 0
 
+export const OPACITY_10 = 10
 export const OPACITY_20 = 20
+export const OPACITY_30 = 30
+export const OPACITY_60 = 60
+export const OPACITY_100 = 100

package/src/components/forms/Field.jsx

@@ -1,19 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Field.module.css'
+import { ERROR_RED, MAIN_DARK_BLUE, WHITE } from '../constants'
 
-function Field ({ title, titleColor, helper, children, disabled, required }) {
+function Field ({
+  title,
+  titleColor,
+  helper,
+  children,
+  disabled,
+  required,
+  titleClassName,
+  helperClassName
+}) {
   let className = `${styles.container}`
   if (disabled) className += ` ${styles.disabled}`
-  let classnameTitle = `${styles.title} `
-  classnameTitle += styles[`text-color-${titleColor}`]
+  const styledTitle = titleClassName || (`${styles.title} ` + styles[`text-color-${titleColor}`])
+  let styledHelper = helperClassName || styles.helper
+  styledHelper += ` ${styles.helperPadding}`
   let titleTmp = title
   if (required) { titleTmp += ' *' }
 
   return (
     <div className={className}>
-      <p className={classnameTitle}>{titleTmp}</p>
-      {helper && <p className={styles.helper}>{helper}</p>}
+      <p className={styledTitle}>{titleTmp}</p>
+      {helper && <p className={styledHelper}>{helper}</p>}
       <div className={styles.content}>
         {children}
       </div>
@@ -29,7 +40,7 @@ Field.propTypes = {
   /**
    * titleColor
    */
-  titleColor: PropTypes.oneOf(['error-red', 'main-dark-blue']),
+  titleColor: PropTypes.oneOf([ERROR_RED, MAIN_DARK_BLUE, WHITE]),
   /**
    * helper
    */
@@ -45,7 +56,15 @@ Field.propTypes = {
   /**
    * required
    */
-  required: PropTypes.bool
+  required: PropTypes.bool,
+  /**
+   * titleClassName
+   */
+  titleClassName: PropTypes.string,
+  /**
+   * titleClassName
+   */
+  helperClassName: PropTypes.string
 }
 
 Field.defaultProps = {
@@ -54,7 +73,9 @@ Field.defaultProps = {
   helper: '',
   children: null,
   disabled: false,
-  required: false
+  required: false,
+  titleClassName: '',
+  helperClassName: ''
 }
 
 export default Field

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

@@ -1,5 +1,5 @@
 .container {
-  @apply flex flex-col w-full;
+  @apply flex flex-col w-full gap-y-1;
 }
 .title {
   @apply font-semibold pb-2;
@@ -10,6 +10,9 @@
 .text-color-error-red {
   @apply text-error-red;
 }
+.text-color-white {
+  @apply text-white;
+}
 .helper{
   @apply text-sm pb-4;
 }
@@ -21,4 +24,7 @@
 }
 .disabled {
   @apply opacity-20;
+}
+.helperPadding {
+  @apply pb-3
 }