@platformatic/ui-components 0.1.123 → 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/Sidebar.jsx

@@ -40,95 +40,100 @@ function Sidebar (props) {
 
   return (
     <div className={`${styles.container} ${collapsed && styles.collapsed}`}>
-      {collapsed
-        ? (
-          <>
-            <ButtonFullRounded
-              className={buttonFullRoundedClassName}
-              iconName='CircleArrowRightIcon'
-              iconSize={MEDIUM}
-              iconColor={WHITE}
-              hoverEffect={BACKGROUND_COLOR_OPAQUE}
-              onClick={() => { setCollapsed(false) }}
-              bordered={false}
-            />
-            <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
-              <Icons.WorkspaceStaticIcon color='white' size='large' />
-            </button>
-            <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
-              {title}
-            </div>
-            <HorizontalSeparator marginBottom={0} marginTop={0} />
-            <div className={styles.bottom}>
-              <button type='button' className={styles.buttonSettings} onClick={onClickSettings}>
-                <Icons.GearIcon color='white' size='large' />
-              </button>
-            </div>
-          </>
-          )
-        : (
-          <>
-            <ButtonFullRounded
-              className={buttonFullRoundedClassName}
-              iconName='CircleArrowLeftIcon'
-              iconSize={MEDIUM}
-              iconColor={WHITE}
-              hoverEffect={BACKGROUND_COLOR_OPAQUE}
-              onClick={() => { setCollapsed(true) }}
-              bordered={false}
-            />
-            <div className={styles.title} data-testid='lateral-bar-title'>
-              {title}
-            </div>
-            <div className={styles.items} data-test-id='lateral-bar-items'>
-              {items.map(item => {
-                const isSelected = selectedItem === item.id
-                return (
-                  <React.Fragment key={item.id}>
-                    <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(item)}>
-                      {item.iconName && (<PlatformaticIcon
-                        iconName={item.iconName}
-                        color={isSelected ? 'main-green' : 'white'}
-                        tip={item.title}
-                        size='medium'
-                                         />)}
-                      <div className={`${styles.item} ${isSelected ? styles.itemSelected : ''}`}>
-                        <span className={styles.itemSubTitle}>{item.subTitle}</span>
-                        <span className={styles.itemTitle}>{item.title}</span>
-                      </div>
-                    </button>
-                    <ReactTooltip place='top' type='info' />
-                  </React.Fragment>
-                )
-              })}
-              <button className={`${styles.buttonCreate} ${collapsed && styles.buttonItemCollapsed} ${disabledCreateButton} ${!disableClickAdd && styles.hoverSemibold}`} onClick={onClickAdd} disabled={disableClickAdd}>
-                <PlatformaticIcon
-                  iconName='CircleAddIcon'
-                  color='white'
-                  size='medium'
-                  tip={addTitle}
-                  onClick={null}
-                />
-                {!collapsed && <span className={styles.item}>{addTitle}</span>}
+      <div>
+        {collapsed
+          ? (
+            <>
+              <ButtonFullRounded
+                className={buttonFullRoundedClassName}
+                iconName='CircleArrowRightIcon'
+                iconSize={MEDIUM}
+                iconColor={WHITE}
+                hoverEffect={BACKGROUND_COLOR_OPAQUE}
+                onClick={() => { setCollapsed(false) }}
+                bordered={false}
+              />
+              <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
+                <Icons.WorkspaceStaticIcon color='white' size='large' />
               </button>
-            </div>
-            <HorizontalSeparator marginBottom={2} marginTop={2} />
-
-            <div className={styles.bottom}>
-              <Button
-                label={labelButtonSettings}
-                color={WHITE}
-                onClick={onClickSettings}
-                platformaticIcon={{ iconName: 'GearIcon', color: WHITE }}
-                fullWidth
-                bold
-                size={MEDIUM}
-                disabled={disableClickSettings}
+              <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
+                {title}
+              </div>
+              <HorizontalSeparator marginBottom={0} marginTop={0} />
+            </>
+            )
+          : (
+            <>
+              <ButtonFullRounded
+                className={buttonFullRoundedClassName}
+                iconName='CircleArrowLeftIcon'
+                iconSize={MEDIUM}
+                iconColor={WHITE}
                 hoverEffect={BACKGROUND_COLOR_OPAQUE}
+                onClick={() => { setCollapsed(true) }}
+                bordered={false}
               />
-            </div>
-          </>
-          )}
+              <div className={styles.title} data-testid='lateral-bar-title'>
+                {title}
+              </div>
+              <div className={styles.items} data-test-id='lateral-bar-items'>
+                {items.map(item => {
+                  const isSelected = selectedItem === item.id
+                  return (
+                    <React.Fragment key={item.id}>
+                      <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(item)}>
+                        {item.iconName && (<PlatformaticIcon
+                          iconName={item.iconName}
+                          color={isSelected ? 'main-green' : 'white'}
+                          tip={item.title}
+                          size='medium'
+                                           />)}
+                        <div className={`${styles.item} ${isSelected ? styles.itemSelected : ''}`}>
+                          <span className={styles.itemSubTitle}>{item.subTitle}</span>
+                          <span className={styles.itemTitle}>{item.title}</span>
+                        </div>
+                      </button>
+                      <ReactTooltip place='top' type='info' />
+                    </React.Fragment>
+                  )
+                })}
+                <button className={`${styles.buttonCreate} ${collapsed && styles.buttonItemCollapsed} ${disabledCreateButton} ${!disableClickAdd && styles.hoverSemibold}`} onClick={onClickAdd} disabled={disableClickAdd}>
+                  <PlatformaticIcon
+                    iconName='CircleAddIcon'
+                    color='white'
+                    size='medium'
+                    tip={addTitle}
+                    onClick={null}
+                  />
+                  {!collapsed && <span className={styles.item}>{addTitle}</span>}
+                </button>
+              </div>
+              <HorizontalSeparator marginBottom={2} marginTop={2} />
+            </>
+            )}
+      </div>
+
+      <div>
+        {collapsed
+          ? (
+            <button type='button' className={styles.buttonSettings} onClick={onClickSettings}>
+              <Icons.GearIcon color='white' size='large' />
+            </button>
+            )
+          : (
+            <Button
+              label={labelButtonSettings}
+              color={WHITE}
+              onClick={onClickSettings}
+              platformaticIcon={{ iconName: 'GearIcon', color: WHITE }}
+              fullWidth
+              bold
+              size={MEDIUM}
+              disabled={disableClickSettings}
+              hoverEffect={BACKGROUND_COLOR_OPAQUE}
+            />
+            )}
+      </div>
     </div>
   )
 }

package/src/components/Sidebar.module.css

@@ -1,7 +1,10 @@
 .container {
-  @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh] z-10 bg-dark-blue;
+  @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh] z-10 bg-dark-blue flex flex-col gap-y-6 justify-between;
   transition: max-width 0.2s linear;
 }
+.content {
+  @apply flex flex-col justify-between
+} 
 .collapsed {
   @apply max-w-[96px] text-center;
 }
@@ -54,9 +57,6 @@
 .items {
   @apply flex flex-col gap-y-4;
 }
-.bottom {
-  @apply absolute left-0 bottom-[1rem] w-full px-4;
-}
 .titleSettings {
   @apply text-white font-semibold ml-3;
 }

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