@platformatic/ui-components 0.1.148 → 0.1.150

package/.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
       - run: npm ci

package/.nvmrc

@@ -1 +1 @@
-18.18.0
+18.19.0

package/index.js

@@ -4,6 +4,7 @@ import BorderedBox from './src/components/BorderedBox'
 import Box from './src/components/Box'
 import Button from './src/components/Button'
 import ButtonFullRounded from './src/components/ButtonFullRounded'
+import ButtonOnlyIcon from './src/components/ButtonOnlyIcon'
 import Backgrounds from './src/components/backgrounds'
 import CopyAndPaste from './src/components/CopyAndPaste'
 import Checkbox from './src/components/Checkbox'
@@ -49,6 +50,7 @@ export {
   Box,
   Button,
   ButtonFullRounded,
+  ButtonOnlyIcon,
   Checkbox,
   CopyAndPaste,
   DetailedMetric,

package/package.json

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

package/src/components/ButtonOnlyIcon.jsx

@@ -0,0 +1,165 @@
+'use strict'
+import React, { useEffect, useState } from 'react'
+import PropTypes from 'prop-types'
+import styles from './Button.module.css'
+import commonStyles from './Common.module.css'
+import PlatformaticIcon from './PlatformaticIcon'
+import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, LARGE, MEDIUM } from './constants'
+
+function ButtonOnlyIcon ({
+  textClass,
+  paddingClass,
+  altLabel,
+  color,
+  backgroundColor,
+  size,
+  disabled,
+  bold,
+  hoverEffect,
+  bordered,
+  fullWidth,
+  platformaticIcon,
+  platformaticIconAfter,
+  selected,
+  ...rest
+}) {
+  let buttonClassName = textClass
+  buttonClassName += ` ${styles.button} ${styles['color-' + color]} `
+  let contentClassName = `${styles.content} `
+  if (paddingClass) {
+    contentClassName += `${paddingClass} `
+  } else {
+    contentClassName += `${styles['button-' + size]} `
+  }
+  if (disabled) {
+    buttonClassName += ' ' + commonStyles[`bordered--${color}-30`]
+    contentClassName += ` ${styles.disabled}`
+  } else {
+    buttonClassName += bordered ? commonStyles[`bordered--${color}-100`] : ''
+  }
+  if (!bordered) buttonClassName += ` ${styles['no-border']}`
+  if (bold) buttonClassName += ` ${styles.fontBold}`
+  if (fullWidth) {
+    buttonClassName += ` ${styles.fullWidth}`
+  }
+  if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
+  const [hover, setHover] = useState(false)
+  const [backgroundClassName, setBackgroundClassName] = useState(restClassName())
+
+  useEffect(() => {
+    if (!disabled) {
+      if (hover) {
+        switch (hoverEffect) {
+          case BACKGROUND_COLOR_OPAQUE:
+            setBackgroundClassName(restClassName() + ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${color}`])
+            break
+          case BOX_SHADOW:
+            setBackgroundClassName(restClassName() + ' ' + styles[`hover-${BOX_SHADOW}-${backgroundColor}`])
+            break
+          case UNDERLINE:
+            setBackgroundClassName(`${restClassName()} ${styles['underline-effect']}`)
+            break
+          default:
+            break
+        }
+      } else {
+        setBackgroundClassName(restClassName())
+      }
+    }
+  }, [disabled, hover, hoverEffect])
+
+  function restClassName () {
+    return `${commonStyles['background-color-' + backgroundColor]} `
+  }
+
+  return (
+    <button className={`${buttonClassName} ${restClassName()}`} disabled={disabled} alt={altLabel} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
+      <div className={`${contentClassName} ${backgroundClassName}`}>
+        {platformaticIcon ? <PlatformaticIcon key='center' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' size={MEDIUM} onClick={null} disabled={disabled} /> : null}
+      </div>
+    </button>
+  )
+}
+
+ButtonOnlyIcon.propTypes = {
+  /**
+   * textClass
+   */
+  textClass: PropTypes.string,
+  /**
+   * paddingClass
+   */
+  paddingClass: PropTypes.string,
+  /**
+   * altLabel
+   */
+  altLabel: PropTypes.string,
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_BUTTON),
+  /**
+   * background color of the button
+   */
+  backgroundColor: PropTypes.oneOf(COLORS_BUTTON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * Disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Bold
+   */
+  bold: PropTypes.bool,
+  /**
+   * Effect on hover
+   */
+  hoverEffect: PropTypes.oneOf(HOVER_EFFECTS_BUTTONS),
+  /**
+   * Apply border: default true
+   */
+  bordered: PropTypes.bool,
+  /**
+   * Full Width: default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * platformaticIcon: should be removed
+   */
+  platformaticIcon: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string
+  }),
+  /**
+   * platformaticIconAfter: should be removed
+   */
+  platformaticIconAfter: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string
+  }),
+  /**
+   * Selected: default false
+   */
+  selected: PropTypes.bool
+}
+
+ButtonOnlyIcon.defaultProps = {
+  textClass: '',
+  paddingClass: '',
+  altLabel: '',
+  color: MAIN_DARK_BLUE,
+  backgroundColor: 'transparent',
+  disabled: false,
+  size: LARGE,
+  bold: false,
+  hoverEffect: BACKGROUND_COLOR_OPAQUE,
+  bordered: true,
+  fullWidth: false,
+  platformaticIcon: null,
+  selected: false
+}
+
+export default ButtonOnlyIcon

package/src/components/Modal.jsx

@@ -22,7 +22,9 @@ import {
   BASIC,
   MODAL_FULL_DARK,
   MODAL_FULL_LIGHT,
-  WHITE
+  MODAL_FULL_RICH_BLACK,
+  WHITE,
+  RICH_BLACK
 } from './constants'
 import PlatformaticIcon from './PlatformaticIcon'
 
@@ -62,6 +64,13 @@ function Modal ({
     case MODAL_FULL_LIGHT:
       modalCoverClassName += commonStyles['background-color-light-blue']
       break
+    case MODAL_FULL_RICH_BLACK:
+      contentFullscreen = styles[`content--${layout}`]
+      modalCoverClassName += commonStyles[`background-color-${RICH_BLACK}`]
+      modalCoverClassName += ` ${backgroundClassName}`
+      buttonFullRoundedClassName = `${styles['close--cover']} `
+      buttonFullRoundedClassName += commonStyles[`background-color-${RICH_BLACK}`]
+      break
 
     default:
       break
@@ -129,7 +138,7 @@ function Modal ({
         <div className={modalCoverClassName}>
           <div className={headerClassName}>
             <ButtonFullRounded
-              className={buttonFullRoundedClassName}
+              buttonClassName={buttonFullRoundedClassName}
               iconName='CircleCloseIcon'
               iconSize={LARGE}
               iconColor={MAIN_DARK_BLUE}
@@ -172,6 +181,31 @@ function Modal ({
       )
       break
 
+    case MODAL_FULL_RICH_BLACK:
+      whichModal = (
+        <div className={modalCoverClassName}>
+          <div className={headerClassName}>
+            <ButtonFullRounded
+              buttonClassName={buttonFullRoundedClassName}
+              iconName='CircleCloseIcon'
+              iconSize={LARGE}
+              iconColor={WHITE}
+              hoverEffect={BACKGROUND_COLOR_OPAQUE}
+              onClick={() => { setIsOpen(false) }}
+              bordered={false}
+              alt='Close'
+            />
+          </div>
+          <div className={contentFullscreen}>
+            <div className={titleFullscreen}>
+              <Logo width={70} heigth={56} color={WHITE} />
+            </div>
+            <div>{children}</div>
+          </div>
+        </div>
+      )
+      break
+
     default:
       break
   }

package/src/components/Modal.module.css

@@ -32,12 +32,13 @@
   @apply bg-light-blue;
 }
 .fullscreen {
-  @apply fixed top-0 left-0 h-screen w-full min-h-screen min-w-full py-4 pl-20 pr-4 overflow-y-auto;
+  @apply fixed top-0 left-0 h-screen w-full min-h-screen min-w-full overflow-y-auto;
 }
 .header--popup-v2,
 .header--popup {
   @apply flex justify-between items-center;
 }
+.header--full-rich-black,
 .header--full-dark,
 .header--full-light,
 .header--cover {
@@ -49,10 +50,11 @@
 .title {
   @apply font-bold text-[20px];
 }
+.content--full-rich-black,
 .content--full-dark,
 .header--full-light,
 .content--cover {
-  @apply h-auto w-full mt-4 mb-10;
+  @apply h-auto w-auto p-4 md:pt-4 md:pb-10 md:px-40;
 }
 .title--cover {
   @apply inline-flex items-center;

package/src/components/ModalDirectional.jsx

@@ -14,11 +14,13 @@ function ModalDirectional ({
   title,
   titleClassName,
   children,
-  smallLayout
+  smallLayout,
+  classNameModalLefty
 }) {
   const className = `${styles.container} ${styles.modalLeftCover} ${smallLayout ? styles.smallLayout : styles.normalLayout}`
   const [modalClassName] = useState(className)
   const [variantModalClassName, setVariantModalClassName] = useState(`${styles.container} ${styles.modalLeftCover}`)
+  const classNameLefty = classNameModalLefty || styles.modalLefty
 
   useEffect(() => {
     setVariantModalClassName(`${modalClassName} ${styles.modalLeftCoverEntering}`)
@@ -37,7 +39,7 @@ function ModalDirectional ({
     <>
       <div className={styles.blur} onClick={() => closeModal()} />
       <div className={variantModalClassName}>
-        <div className={styles.modalLefty}>
+        <div className={classNameLefty}>
           <div className={styles.headerClassName}>
             <PlatformaticIcon iconName='ArrowLongLeftIcon' color={WHITE} size={SMALL} onClick={() => closeModal()} />
             <span className={titleClassName}>{title}</span>
@@ -69,7 +71,11 @@ ModalDirectional.propTypes = {
   /**
    * smallLayout
    */
-  smallLayout: PropTypes.bool
+  smallLayout: PropTypes.bool,
+  /**
+   * classNameLefty
+   */
+  classNameLefty: PropTypes.string
 }
 
 ModalDirectional.defaultProps = {
@@ -77,7 +83,8 @@ ModalDirectional.defaultProps = {
   setIsOpen: () => {},
   title: '',
   titleClassName: '',
-  smallLayout: false
+  smallLayout: false,
+  classNameLefty: ''
 }
 
 export default ModalDirectional

package/src/components/constants.js

@@ -36,7 +36,9 @@ 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_V2, MODAL_POPUP, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT]
+export const MODAL_FULL_RICH_BLACK = 'full-rich-black'
+
+export const MODAL_LAYOUTS = [MODAL_POPUP_V2, MODAL_POPUP, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT, MODAL_FULL_RICH_BLACK]
 
 export const FREE = 'free'
 export const BASIC = 'basic'

package/src/stories/ButtonOnlyIcon.stories.jsx

@@ -0,0 +1,75 @@
+'use strict'
+import React from 'react'
+import ButtonOnlyIcon from '../components/ButtonOnlyIcon'
+import { COLORS_BUTTON, HOVER_EFFECTS_BUTTONS, SIZES, WHITE, RICH_BLACK, BACKGROUND_COLOR_OPAQUE, SMALL } from '../components/constants'
+
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '2px',
+  backgroundColor: 'white'
+}
+
+export default {
+  title: 'Platformatic/ButtonOnlyIcon',
+  component: ButtonOnlyIcon,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ],
+  argTypes: {
+    altLabel: {
+      type: 'string',
+      control: 'text'
+    },
+    bold: {
+      type: 'boolean'
+    },
+    backgroundColor: {
+      type: 'radio',
+      options: COLORS_BUTTON
+    },
+    color: {
+      type: 'radio',
+      options: COLORS_BUTTON
+    },
+    disabled: {
+      type: 'boolean'
+    },
+    size: {
+      type: 'string',
+      control: {
+        type: 'radio',
+        options: SIZES
+      }
+    },
+    hoverEffect: {
+      type: 'radio',
+      options: HOVER_EFFECTS_BUTTONS
+    },
+    bordered: {
+      type: 'boolean'
+    },
+    fullWidth: {
+      type: 'boolean'
+    },
+    selected: {
+      type: 'boolean'
+    }
+  }
+}
+
+const OnlyIconTemplate = (args) => (<ButtonOnlyIcon {...args} />)
+
+export const OnlyIcon = OnlyIconTemplate.bind({})
+
+OnlyIcon.args = {
+  color: WHITE,
+  backgroundColor: RICH_BLACK,
+  onClick: () => { alert('hit!') },
+  hoverEffect: BACKGROUND_COLOR_OPAQUE,
+  platformaticIcon: { size: SMALL, iconName: 'RunningIcon', color: WHITE }
+}