@platformatic/ui-components 0.1.45 → 0.1.46

package/package.json

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

package/src/components/Button.jsx

@@ -5,7 +5,7 @@ import styles from './Button.module.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 function Button (props) {
-  const { icon, label, color, backgroundColor, size, disabled, bold, hoverEffect, bordered, ...rest } = props
+  const { icon, label, color, backgroundColor, size, disabled, bold, hoverEffect, bordered, fullWidth, ...rest } = props
   let className = `${styles.button} ${styles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
   if (!bordered) className += ` ${styles['no-border']}`
   if (disabled) {
@@ -18,7 +18,7 @@ function Button (props) {
     }
   }
   if (bold) className += ` ${styles.fontBold}`
-
+  if (fullWidth) className += ` ${styles.fullWidth}`
   return (
     <button className={className} disabled={disabled} alt={label} {...rest}>
       {icon ? <FontAwesomeIcon icon={icon} className={`${styles['margin-right-' + size]}`} data-testid='button-icon' /> : null}
@@ -63,7 +63,11 @@ Button.propTypes = {
   /**
    * Apply border: default true
    */
-  bordered: PropTypes.bool
+  bordered: PropTypes.bool,
+  /**
+   * Full Width: default false
+   */
+  fullWidth: PropTypes.bool
 }
 
 Button.defaultProps = {
@@ -73,7 +77,8 @@ Button.defaultProps = {
   size: 'large',
   bold: false,
   hoverEffect: 'hover',
-  bordered: true
+  bordered: true,
+  fullWidth: false
 }
 
 export default Button

package/src/components/Button.module.css

@@ -122,4 +122,7 @@
 }
 .underline-effect {
   @apply hover:underline;
+}
+.fullWidth {
+  @apply w-full;
 }

package/src/components/InfoBox.jsx

@@ -0,0 +1,60 @@
+'use strict'
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './InfoBox.module.css'
+import Button from './Button'
+import Icons from './icons'
+
+function renderItemIcon (iconName, color) {
+  if (iconName) {
+    return React.createElement(Icons[`${iconName}`], {
+      size: 'extra-large',
+      color
+    })
+  }
+  return (<></>)
+}
+
+function InfoBox ({ children, iconLogo, helpText, buttonProps }) {
+  return (
+    <div className={styles.container}>
+      {renderItemIcon(iconLogo)}
+      {children}
+      <p className={styles.helpText}>{helpText}</p>
+      {buttonProps && (<Button type='button' size='extra-large' label={buttonProps.label} color={buttonProps.color} backgroundColor={buttonProps.backgroundColor} onClick={() => buttonProps.onClick()} fullWidth />)}
+    </div>
+  )
+}
+
+InfoBox.propTypes = {
+  /**
+   * children
+   */
+  children: PropTypes.node,
+  /**
+   * iconLogo
+   */
+  iconLogo: PropTypes.string,
+  /**
+   * helpText
+   */
+  helpText: PropTypes.string,
+  /**
+   * background color of the button
+   */
+  buttonProps: PropTypes.shape({
+    label: PropTypes.string,
+    backgroundColor: PropTypes.string,
+    color: PropTypes.string,
+    onClick: PropTypes.func
+  })
+}
+
+InfoBox.defaultProps = {
+  children: null,
+  iconLogo: null,
+  helpText: null,
+  buttonProps: null
+}
+
+export default InfoBox

package/src/components/InfoBox.module.css

@@ -0,0 +1,6 @@
+.container {
+  @apply bg-main-dark-blue border-0 rounded-md p-3 flex flex-col items-center gap-y-2 w-full;
+}
+.helpText {
+  @apply text-sm text-center mx-6 text-white font-normal;
+}

package/src/components/forms/Preview.jsx

@@ -1,15 +1,84 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import styles from './Preview.module.css'
 import HorizontalSeparator from '../HorizontalSeparator'
+import Icons from '../icons'
 
-export default function Preview ({ title, value, isLink = false }) {
+function renderItemIcon (iconName, color) {
+  if (iconName) {
+    return React.createElement(Icons[`${iconName}`], {
+      color,
+      size: 'small'
+    })
+  }
+  return (<></>)
+}
+
+function renderLink (value) {
+  return (<a className={styles.link} href={value} target='_blank' rel='noreferrer'>{value}</a>)
+}
+
+function renderParagraph (value, afterValueIcon, afterValueColor, onClickAfterValueIcon) {
+  return (
+    <>
+      <p className={styles.value}>
+        {value}
+        {afterValueIcon && (<span className={styles.afterIcon} onClick={onClickAfterValueIcon}>{renderItemIcon(afterValueIcon, afterValueColor)}</span>)}
+      </p>
+    </>
+  )
+}
+function Preview ({ title, value, isLink, children, afterValueIcon, afterValueColor, onClickAfterValueIcon }) {
   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>}
+        {isLink ? renderLink(value) : renderParagraph(value, afterValueIcon, afterValueColor, onClickAfterValueIcon)}
       </div>
+      {children}
       <HorizontalSeparator color='main-dark-green' opacity={20} marginBottom={10} marginTop={10} />
     </>
   )
 }
+
+Preview.propTypes = {
+  /**
+   * title
+   */
+  title: PropTypes.string,
+  /**
+   * value
+   */
+  value: PropTypes.string,
+  /**
+   * isLink
+   */
+  isLink: PropTypes.bool,
+  /**
+   * color of border
+   */
+  children: PropTypes.node,
+  /**
+   * afterValueIcon
+   */
+  afterValueIcon: PropTypes.object,
+  /**
+   * afterValueIconColor
+   */
+  afterValueIconColor: PropTypes.oneOf(['error-red', 'main-dark-blue', 'white']),
+  /**
+   * onClickAfterValueIcon
+   */
+  onClickAfterValueIcon: PropTypes.func
+}
+
+Preview.defaultProps = {
+  title: '',
+  value: '',
+  isLink: false,
+  afterValueIconColor: 'main-dark-blue',
+  afterValueIcon: null,
+  onClickAfterValueIcon: () => {}
+}
+
+export default Preview

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

@@ -1,12 +1,15 @@
 .container {
   @apply flex flex-col
 }
-.title{
+.title {
   @apply text-sm text-main-dark-blue pb-1;
 }
-.value{
-  @apply text-xl font-semibold text-main-dark-blue;
+.value {
+  @apply text-xl font-semibold text-main-dark-blue inline-flex;
 }
 .link {
   @apply font-semibold;
 }
+.afterIcon {
+  @apply ml-3 cursor-pointer;
+}

package/src/components/icons/CopyIcon.jsx

@@ -0,0 +1,46 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CopyIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={24}
+          height={25}
+          viewBox='0 0 24 25'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path
+            d='M9 21.3333V8.00073C9 7.72459 9.22386 7.50073 9.5 7.50073H15.9001C16.023 7.50073 16.1416 7.54597 16.2332 7.6278L20.833 11.7357C20.9393 11.8306 21 11.9662 21 12.1086V21.3333C21 21.6094 20.7761 21.8333 20.5 21.8333H9.5C9.22386 21.8333 9 21.6094 9 21.3333Z'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+          />
+          <path
+            d='M15.75 12.5171V7.50073L21 12.5171H15.75Z'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M14.25 6.78409L10.9818 3.95521C10.8909 3.87655 10.7748 3.83326 10.6546 3.83326H6.92045H3.5C3.22386 3.83326 3 4.05712 3 4.33326L3.00001 17.0335C3.00001 17.3096 3.22387 17.5335 3.50001 17.5335H8.25001'
+            stroke='none'
+            strokeWidth={1.5}
+            strokeLinecap='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default CopyIcon

package/src/components/icons/CreatedWorkspaceIcon.jsx

@@ -0,0 +1,70 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CreatedWorkspaceIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'extra-large':
+      icon = (
+        <svg
+          width={120}
+          height={120}
+          viewBox='0 0 120 120'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect
+            x={15}
+            y={15}
+            width={37.5}
+            height={37.5}
+            rx={1}
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <rect
+            x={45}
+            y={105}
+            width={30}
+            height={37.7622}
+            rx={1}
+            transform='rotate(-180 45 105)'
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <rect
+            x={105}
+            y={105}
+            width={45}
+            height={37.7622}
+            rx={1}
+            transform='rotate(-180 105 105)'
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <circle
+            cx={86.25}
+            cy={33.75}
+            r={18.75}
+            stroke='none'
+            strokeWidth={6.5}
+          />
+          <path
+            d='M76.875 33.7499L84.6875 39.9999L93.75 30'
+            stroke='none'
+            strokeWidth={6.5}
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default CreatedWorkspaceIcon

package/src/components/icons/UpgradeIcon.jsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const UpgradeIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'extra-large':
+      icon = (
+        <svg
+          width={120}
+          height={120}
+          viewBox='0 0 120 120'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <path
+            d='M73.5692 71.2499C70.4961 74.9505 65.8773 77.3043 60.7127 77.3043C55.2863 77.3043 50.4624 74.7057 47.4009 70.6768'
+            stroke='none'
+            stroke-width={6.5}
+            stroke-linecap='round'
+            stroke-linejoin='round'
+          />
+          <path
+            d='M23.2957 51.3793L17.6102 51.3793C16.1675 51.3793 15 52.5551 15 54.0082L15 66.8661C15 68.3192 16.1675 69.495 17.6102 69.495L23.2957 69.495C24.3778 69.495 25.3554 70.1738 25.7351 71.1967L28.4782 78.5003C28.8483 79.4946 28.5921 80.6226 27.8138 81.3491L24.074 84.8576C22.973 85.89 22.973 87.649 24.0645 88.691L32.9677 97.161C33.9549 98.1074 35.5115 98.117 36.5176 97.1897L41.4343 92.6775C42.2126 91.97 43.3326 91.7884 44.2913 92.2377L50.8405 95.2968C51.7707 95.727 52.3592 96.6639 52.3592 97.6868L52.3592 102.371C52.3592 103.824 53.5267 105 54.9694 105L65.9608 105C67.4035 105 68.571 103.824 68.571 102.371L68.571 97.4573C68.571 96.3197 69.3018 95.3064 70.3744 94.9527L77.9393 92.4671C78.8315 92.1804 79.8091 92.3907 80.502 93.0216L84.9346 97.0654C86.0167 98.05 87.6967 97.9545 88.6553 96.8455L96.7517 87.5247C97.6819 86.4541 97.5965 84.8289 96.5619 83.8634L93.088 80.613C92.3191 79.9056 92.0534 78.8062 92.3951 77.8216L94.749 71.0342C95.1192 69.973 96.1063 69.2656 97.2168 69.2656L102.39 69.2656C103.833 69.2656 105 68.0898 105 66.6367L105 54.2472C105 52.7941 103.833 51.6183 102.39 51.6183L97.2168 51.6183'
+            stroke='none'
+            stroke-width={6.5}
+            stroke-linecap='round'
+            stroke-linejoin='round'
+          />
+          <path
+            d='M59.1684 15.3455L37.5 36.8033L48.75 36.8034L48.75 60.1728L71.25 60.1728L71.25 37.7592L82.5 37.7592L59.1684 15.3455Z'
+            stroke='none'
+            stroke-width={6.5}
+            stroke-linecap='round'
+            stroke-linejoin='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default UpgradeIcon

package/src/components/icons/index.js

@@ -8,12 +8,15 @@ import CircleExclamationIcon from './CircleExclamationIcon'
 import CircleCloseIcon from './CircleCloseIcon'
 import CircleCloseHoverIcon from './CircleCloseHoverIcon'
 import CloseIcon from './CloseIcon'
+import CopyIcon from './CopyIcon'
+import CreatedWorkspaceIcon from './CreatedWorkspaceIcon'
 import GearIcon from './GearIcon'
 import MetricsIcon from './MetricsIcon'
 import DynamicWorkspaceIcon from './DynamicWorkspaceIcon'
 import StaticWorkspaceIcon from './StaticWorkspaceIcon'
 import PullRequestIcon from './PullRequestIcon'
 import TriangleExclamationIcon from './TriangleExclamationIcon'
+import UpgradeIcon from './UpgradeIcon'
 
 export default {
   ApiIcon,
@@ -26,10 +29,13 @@ export default {
   CircleCloseIcon,
   CircleCloseHoverIcon,
   CloseIcon,
+  CopyIcon,
+  CreatedWorkspaceIcon,
   GearIcon,
   MetricsIcon,
   DynamicWorkspaceIcon,
   StaticWorkspaceIcon,
   PullRequestIcon,
-  TriangleExclamationIcon
+  TriangleExclamationIcon,
+  UpgradeIcon
 }

package/src/stories/Button.stories.jsx

@@ -46,6 +46,9 @@ export default {
     },
     bordered: {
       type: 'boolean'
+    },
+    fullWidth: {
+      type: 'boolean'
     }
   }
 }

package/src/stories/InfoBox.stories.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import InfoBox from '../components/InfoBox'
+
+const divStyle = {
+  width: '100%',
+  height: 'auto',
+  padding: '10px',
+  backgroundColor: 'white'
+}
+
+export default {
+  title: 'Platformatic/InfoBox',
+  component: InfoBox,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ]
+}
+
+const Template = (args) => <InfoBox {...args}><p>this will be your custom title</p></InfoBox>
+export const InfoBoxSample = Template.bind({})
+InfoBoxSample.args = {
+  iconLogo: 'UpgradeIcon',
+  helpText: 'Helper text',
+  buttonProps: {
+    label: 'Sample button',
+    backgroundColor: 'main-green',
+    color: 'red',
+    onClick: () => alert('Clicked InfoBoxSample')
+  }
+}
+
+const ContainedTemplate = (args) => <div style={{ maxWidth: '300px' }}><InfoBox {...args} /></div>
+export const InfoBoxContained = ContainedTemplate.bind({})
+InfoBoxContained.args = {
+  iconLogo: 'UpgradeIcon',
+  helpText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.',
+  buttonProps: {
+    label: 'Sample button',
+    color: 'white',
+    onClick: () => alert('Clicked ContainedTemplate')
+  }
+}

package/src/stories/forms/Preview.stories.jsx

@@ -11,26 +11,47 @@ const divStyle = {
 export default {
   title: 'Platformatic/Forms/Preview',
   component: Preview,
-  parameters: {
-    backgrounds: {
-      default: 'white'
-    }
-  }
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ]
 }
 
-const SimpleTemplate = (args) => <div style={divStyle}><Preview {...args} /></div>
+const Template = (args) => <Preview {...args} />
 
-export const NormalPreview = SimpleTemplate.bind({})
+export const NormalPreview = Template.bind({})
 
 NormalPreview.args = {
   title: 'My title',
   value: 'My value'
 }
 
-export const WithLink = SimpleTemplate.bind({})
+export const WithLink = Template.bind({})
 
 WithLink.args = {
   title: 'My value is a link',
   value: 'https://example.com',
   isLink: true
 }
+
+const TemplateWithChildren = (args) => <Preview {...args}><p>1st paragraph</p><p>2nd paragraph</p></Preview>
+
+export const WithChildren = TemplateWithChildren.bind({})
+
+WithChildren.args = {
+  title: 'My title',
+  value: 'My value'
+}
+
+export const WithIcon = Template.bind({})
+
+WithIcon.args = {
+  title: 'My title',
+  value: 'My value',
+  afterValueIcon: 'StaticWorkspaceIcon',
+  afterValueIconColor: 'green',
+  onClickAfterValueIcon: () => alert('icon clicked')
+}

package/src/stories/icons/Icons.stories.jsx

@@ -4,11 +4,28 @@ import CloseIcon from '../../components/icons/CloseIcon'
 import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
 import TriangleExclamationIcon from '../../components/icons/TriangleExclamationIcon'
 import StaticWorkspaceIcon from '../../components/icons/StaticWorkspaceIcon'
+import CreatedWorkspaceIcon from '../../components/icons/CreatedWorkspaceIcon'
+import UpgradeIcon from '../../components/icons/UpgradeIcon'
 import DynamicWorkspaceIcon from '../../components/icons/DynamicWorkspaceIcon'
 
+const divStyle = {
+  display: 'flex',
+  width: '100%',
+  minHeight: '400px',
+  gap: '10px',
+  backgroundColor: 'white'
+}
+
 export default {
   title: 'Platformatic/Icons',
   component: PullRequestIcon,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+      </div>
+    )
+  ],
   argTypes: {
     color: {
       type: 'string',
@@ -36,29 +53,22 @@ const TriangleExclamationIconTemplate = (args) => <TriangleExclamationIcon {...a
 export const TriangleExclamationIconDefault = TriangleExclamationIconTemplate.bind({})
 TriangleExclamationIconDefault.args = {}
 
-const divStyle = {
-  display: 'flex',
-  width: '100%',
-  minHeight: '400px',
-  gap: '10px',
-  backgroundColor: 'white'
-}
-
 const WorkspaceIconsTemplate = () => (
-  <div style={divStyle}>
-    {
-    [<StaticWorkspaceIcon key='a' />, <DynamicWorkspaceIcon key='b' />].map((component, index) => {
-      const listElement = []
-      listElement.push(React.cloneElement(component, { key: `0${index}` }))
-      listElement.push(React.cloneElement(component, { key: `1${index}`, size: 'small', color: 'green' }))
-      listElement.push(React.cloneElement(component, { key: `2${index}`, color: 'red' }))
-      listElement.push(React.cloneElement(component, { key: `3${index}`, size: 'small', color: 'red' }))
-      listElement.push(React.cloneElement(component, { key: `4${index}`, color: 'main-dark-blue' }))
-      listElement.push(React.cloneElement(component, { key: `5${index}`, size: 'small', color: 'main-dark-blue' }))
-      return listElement
-    })
-  }
-  </div>)
+  [<StaticWorkspaceIcon key='a' />, <DynamicWorkspaceIcon key='b' />].map((component, index) => {
+    const listElement = []
+    listElement.push(React.cloneElement(component, { key: `0${index}` }))
+    listElement.push(React.cloneElement(component, { key: `1${index}`, size: 'small', color: 'green' }))
+    listElement.push(React.cloneElement(component, { key: `2${index}`, color: 'red' }))
+    listElement.push(React.cloneElement(component, { key: `3${index}`, size: 'small', color: 'red' }))
+    listElement.push(React.cloneElement(component, { key: `4${index}`, color: 'main-dark-blue' }))
+    listElement.push(React.cloneElement(component, { key: `5${index}`, size: 'small', color: 'main-dark-blue' }))
+    return listElement
+  })
+)
 
 export const WorkspaceIconsAll = WorkspaceIconsTemplate.bind({})
 WorkspaceIconsAll.args = {}
+
+const LargeIconsTemplate = () => ([<CreatedWorkspaceIcon key='a' size='extra-large' />, <UpgradeIcon key='b' size='extra-large' />].map(component => component))
+export const LargeIconsDefault = LargeIconsTemplate.bind({})
+LargeIconsDefault.args = {}