@platformatic/ui-components 0.1.47 → 0.1.48

package/package.json

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

package/src/components/Button.jsx

@@ -2,10 +2,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Button.module.css'
+import PlatformaticIcon from './PlatformaticIcon'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 function Button (props) {
-  const { icon, label, color, backgroundColor, size, disabled, bold, hoverEffect, bordered, fullWidth, ...rest } = props
+  const { icon, label, color, backgroundColor, size, disabled, bold, hoverEffect, bordered, fullWidth, platformaticIcon, ...rest } = props
   let className = `${styles.button} ${styles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
   if (!bordered) className += ` ${styles['no-border']}`
   if (disabled) {
@@ -22,6 +23,7 @@ function Button (props) {
   return (
     <button className={className} disabled={disabled} alt={label} {...rest}>
       {icon ? <FontAwesomeIcon icon={icon} className={`${styles['margin-right-' + size]}`} data-testid='button-icon' /> : null}
+      {platformaticIcon ? <PlatformaticIcon iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
       <span>{label}</span>
     </button>
   )
@@ -67,10 +69,18 @@ Button.propTypes = {
   /**
    * Full Width: default false
    */
-  fullWidth: PropTypes.bool
+  fullWidth: PropTypes.bool,
+  /**
+   * platformaticIcon: should be removed once we use totally our icons
+   */
+  platformaticIcon: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string
+  })
 }
 
 Button.defaultProps = {
+  label: '',
   color: 'main-dark-blue',
   backgroundColor: 'transparent',
   disabled: false,
@@ -78,7 +88,8 @@ Button.defaultProps = {
   bold: false,
   hoverEffect: 'hover',
   bordered: true,
-  fullWidth: false
+  fullWidth: false,
+  platformaticIcon: null
 }
 
 export default Button

package/src/components/Button.module.css

@@ -1,5 +1,5 @@
 .button {
-  @apply rounded text-center cursor-pointer font-normal rounded-md border border-solid box-border;
+  @apply rounded text-center cursor-pointer font-normal rounded-md border border-solid box-border flex items-center justify-center gap-x-2;
 }
 .fontBold {
   @apply font-semibold;

package/src/components/MetricValue.module.css

@@ -2,7 +2,7 @@
   @apply flex justify-center items-center gap-x-2;
 }
 .value {
-  @apply text-[32px] font-semibold;
+  @apply text-sm lg:text-base;
 }
 .unit,
 .pre {

package/src/components/Modal.jsx

@@ -4,15 +4,12 @@ import CloseIcon from './icons/CloseIcon'
 import CircleCloseIcon from './icons/CircleCloseIcon'
 import CircleCloseHoverIcon from './icons/CircleCloseHoverIcon'
 import Logo from './Logo'
-import HorizontalSeparator from './HorizontalSeparator'
 import styles from './Modal.module.css'
 
 export default function Modal (props) {
-  const { setIsOpen, title, layout = 'info', maxWidth = 50 } = props
+  const { setIsOpen, title, layout = 'info' } = props
   const [isHoverCloseModal, setIsHoverCloseModal] = useState(false)
   useEscapeKey(() => setIsOpen(false))
-  const styledMaxWidth = styles[`maxW${maxWidth}`]
-  const classNameFullScreen = `${styles.contentFullscreen} ${styledMaxWidth}`
   let whichModal = <></>
 
   switch (layout) {
@@ -76,12 +73,11 @@ export default function Modal (props) {
                   {isHoverCloseModal ? <CircleCloseHoverIcon color='main-dark-blue' /> : <CircleCloseIcon color='main-dark-blue' />}
                 </div>
               </div>
-              <div className={classNameFullScreen}>
+              <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>

package/src/components/Modal.module.css

@@ -41,15 +41,6 @@
 .contentFullscreen {
   @apply h-auto w-full pt-4;
 }
-.maxW50 {
-  @apply max-w-[50%];
-}
-.maxW70 {
-  @apply max-w-[70%];
-}
-.maxW100 {
-  @apply max-w-[100%];
-}
 .titleFullscreen {
   @apply inline-flex items-center;
 }

package/src/components/icons/Calendar1Icon.jsx

@@ -0,0 +1,54 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const Calendar1Icon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
+          <path
+            d='M2 7H5M14 7H11'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <line
+            x1={4.5}
+            y1={5.5}
+            x2={4.5}
+            y2={2.5}
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <line
+            x1={11.5}
+            y1={5.5}
+            x2={11.5}
+            y2={2.5}
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <path
+            d='M7.59712 13V6.5L8.21223 7.09L7.59712 8H7.5L6.5 9V7L7.5 6H9V13H7.59712Z'
+            fill='none'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default Calendar1Icon

package/src/components/icons/Calendar7Icon.jsx

@@ -0,0 +1,55 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const Calendar7Icon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
+
+          <path
+            d='M2 7H4M14 7H12'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <line
+            x1={4.5}
+            y1={5.5}
+            x2={4.5}
+            y2={2.5}
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <line
+            x1={11.5}
+            y1={5.5}
+            x2={11.5}
+            y2={2.5}
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <path
+            d='M6.46691 13L9.65441 6.52L10.0294 7.1H5.65074L6.33456 6.47V8.29H5V6H11V6.87L8 13H6.46691Z'
+            fill='none'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default Calendar7Icon

package/src/components/icons/CalendarIcon.jsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+
+const CalendarIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <rect x={2} y={4} width={12} height={10} rx={1} stroke='none' />
+          <path
+            d='M2 7H14'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <line
+            x1={4.5}
+            y1={5.5}
+            x2={4.5}
+            y2={2.5}
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <line
+            x1={11.5}
+            y1={5.5}
+            x2={11.5}
+            y2={2.5}
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <rect x={4} y={8} width={2} height={2} rx={0.5} fill='none' />
+          <rect x={4} y={11} width={2} height={2} rx={0.5} fill='none' />
+          <rect x={7} y={8} width={2} height={2} rx={0.5} fill='none' />
+          <rect x={10} y={8} width={2} height={2} rx={0.5} fill='none' />
+          <rect x={7} y={11} width={2} height={2} rx={0.5} fill='none' />
+          <rect x={10} y={11} width={2} height={2} rx={0.5} fill='none' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default CalendarIcon

package/src/components/icons/LiveIcon.jsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const LiveIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg
+          width={16}
+          height={16}
+          viewBox='0 0 16 16'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx={8} cy={8.75137} r={1.5} fill='none' />
+          <path
+            d='M6 6.51529C5.38625 7.06461 5 7.8629 5 8.7514C5 9.6399 5.38625 10.4382 6 10.9875M10 6.51529C10.6137 7.06461 11 7.8629 11 8.7514C11 9.6399 10.6137 10.4382 10 10.9875'
+            stroke='none'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+          />
+          <path
+            d='M11 5.39722C11.9206 6.2212 12.5 7.41863 12.5 8.75138C12.5 10.0841 11.9206 11.2816 11 12.1055M5 5.39722C4.07938 6.2212 3.5 7.41863 3.5 8.75138C3.5 10.0841 4.07938 11.2816 5 12.1055'
+            stroke='none'
+            strokeLinecap='round'
+          />
+          <path
+            d='M12 4.27916C13.2275 5.3778 14 6.97437 14 8.75137C14 10.6328 13.134 12.312 11.779 13.412M4.33558 4C2.91494 5.09726 2 6.81747 2 8.75137C2 10.5434 2.78563 12.152 4.03126 13.2514'
+            stroke='none'
+            strokeLinecap='round'
+          />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default LiveIcon

package/src/components/icons/PlayIcon.jsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const PlayIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg width={16} height={16} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
+          <path d='M2 2L14 8L2 14V2Z' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default PlayIcon

package/src/components/icons/StopIcon.jsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const StopIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg width={16} height={16} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
+          <circle cx={8} cy={8} r={6} stroke='none' />
+          <path d='M3.5 12L12 3.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default StopIcon

package/src/components/icons/TerminalIcon.jsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const TerminalIcon = ({ color = 'green', size = 'normal' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let icon = <></>
+  switch (size) {
+    case 'small':
+      icon = (
+        <svg width={16} height={16} viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
+          <rect x={2} y={2} width={12} height={12} rx={1} stroke='none' />
+          <path d='M4 9L6 7L4 5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+          <path d='M7 11H11.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    default:
+      break
+  }
+  return icon
+}
+
+export default TerminalIcon

package/src/components/icons/index.js

@@ -4,6 +4,9 @@ import ApiEmptyIcon from './ApiEmptyIcon'
 import AppIcon from './AppIcon'
 import AppListIcon from './AppListIcon'
 import AppEmptyIcon from './AppEmptyIcon'
+import CalendarIcon from './CalendarIcon'
+import Calendar1Icon from './Calendar1Icon'
+import Calendar7Icon from './Calendar7Icon'
 import CircleAddIcon from './CircleAddIcon'
 import CircleBackIcon from './CircleBackIcon'
 import CircleExclamationIcon from './CircleExclamationIcon'
@@ -12,11 +15,15 @@ import CircleCloseHoverIcon from './CircleCloseHoverIcon'
 import CloseIcon from './CloseIcon'
 import CopyIcon from './CopyIcon'
 import CreatedWorkspaceIcon from './CreatedWorkspaceIcon'
+import DynamicWorkspaceIcon from './DynamicWorkspaceIcon'
 import GearIcon from './GearIcon'
+import LiveIcon from './LiveIcon'
 import MetricsIcon from './MetricsIcon'
-import DynamicWorkspaceIcon from './DynamicWorkspaceIcon'
-import StaticWorkspaceIcon from './StaticWorkspaceIcon'
+import PlayIcon from './PlayIcon'
 import PullRequestIcon from './PullRequestIcon'
+import StaticWorkspaceIcon from './StaticWorkspaceIcon'
+import StopIcon from './StopIcon'
+import TerminalIcon from './TerminalIcon'
 import TriangleExclamationIcon from './TriangleExclamationIcon'
 import UpgradeIcon from './UpgradeIcon'
 
@@ -27,6 +34,9 @@ export default {
   AppIcon,
   AppListIcon,
   AppEmptyIcon,
+  CalendarIcon,
+  Calendar1Icon,
+  Calendar7Icon,
   CircleAddIcon,
   CircleBackIcon,
   CircleExclamationIcon,
@@ -35,11 +45,15 @@ export default {
   CloseIcon,
   CopyIcon,
   CreatedWorkspaceIcon,
+  DynamicWorkspaceIcon,
   GearIcon,
+  LiveIcon,
   MetricsIcon,
-  DynamicWorkspaceIcon,
-  StaticWorkspaceIcon,
+  PlayIcon,
   PullRequestIcon,
+  StaticWorkspaceIcon,
+  StopIcon,
+  TerminalIcon,
   TriangleExclamationIcon,
   UpgradeIcon
 }

package/src/stories/Button.stories.jsx

@@ -100,9 +100,15 @@ DisabledGreen.args = {
 }
 
 export const DisabledRed = DisabledTemplate.bind({})
-
 DisabledRed.args = {
   label: 'A simple button',
   color: 'error-red',
   disabled: true
 }
+
+export const UsingPlatformaticIcon = Template.bind({})
+UsingPlatformaticIcon.args = {
+  label: 'White',
+  color: 'white',
+  platformaticIcon: { iconName: 'GearIcon', color: 'white' }
+}

package/src/stories/PlatformaticIcon.stories.jsx

@@ -1,5 +1,12 @@
 import React from 'react'
 import PlatformaticIcon from '../components/PlatformaticIcon'
+import Icons from '../components/icons'
+
+const divStyle = {
+  width: '100%',
+  display: 'flex',
+  flexGap: '10px'
+}
 
 export default {
   title: 'Platformatic/PlatformaticIcon',
@@ -12,3 +19,17 @@ PlatformaticIconDefault.args = {
   iconName: 'CopyIcon',
   onClick: () => alert('clicked')
 }
+
+const AllIconsTemplate = (args) => {
+  const icons = Object.values(Icons)
+  return (
+    <div style={divStyle}>
+      {icons.map(IconComponent => <PlatformaticIcon key={IconComponent.name} iconName={IconComponent.name} {...args} />)}
+    </div>
+  )
+}
+export const PlatformaticIconAll = AllIconsTemplate.bind({})
+PlatformaticIconAll.args = {
+  color: 'white',
+  size: 'small'
+}