npm - @platformatic/ui-components - Versions diffs - 0.5.0 → 0.5.1 - Mend

@platformatic/ui-components 0.5.0 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/dist/assets/index-hLMQmMDJ.js +40 -0
package/dist/index.html +1 -1
package/package.json +1 -1
package/src/components/DropDown.jsx +10 -26
package/src/components/FollowUs.jsx +18 -27
package/src/components/InfoBox.jsx +8 -10
package/src/components/ListElement.jsx +9 -11
package/src/components/LoadingSpinner.jsx +1 -5
package/src/components/LogoDropDown.jsx +7 -8
package/src/components/ModalDirectional.jsx +9 -19
package/src/components/ModalStepsForward.jsx +12 -24
package/src/components/SearchBarV2.jsx +9 -22
package/src/components/Sidebar.jsx +12 -26
package/src/components/Status.jsx +5 -7
package/src/components/TextWithLabel.jsx +7 -9
package/src/components/Tooltip.jsx +8 -19
package/src/components/TooltipAbsolute.jsx +10 -22
package/src/components/VerticalSeparator.jsx +0 -4
package/src/components/forms/Field.jsx +8 -19
package/src/components/forms/Input.jsx +17 -37
package/src/components/forms/InputWithSeparator.jsx +14 -31
package/src/components/forms/Password.jsx +10 -18
package/src/components/forms/Preview.jsx +10 -12
package/src/components/forms/RadioGroup.jsx +9 -17
package/src/components/forms/Select.jsx +19 -40
package/src/components/forms/SelectWithInput.jsx +22 -46
package/src/components/forms/TextArea.jsx +11 -25
package/src/components/forms/ToggleSwitch.jsx +8 -19
package/src/components/icons/BranchIcon.jsx +102 -0
package/src/components/icons/DeploymentHistoryIcon.jsx +118 -0
package/src/components/icons/FailureRateIcon.jsx +104 -0
package/src/components/icons/K8SMetricsIcon.jsx +106 -0
package/src/components/icons/MetricsLogsIcon.jsx +124 -0
package/src/components/icons/NodeJSMetricsIcon.jsx +106 -0
package/src/components/icons/NotCompliantServiceIcon.jsx +103 -0
package/src/components/icons/OtherLogosGoogleIcon.jsx +69 -0
package/src/components/icons/OutdatedServiceIcon.jsx +105 -0
package/src/components/icons/ResourceIcon.jsx +111 -0
package/src/components/icons/ZoomInIcon.jsx +99 -0
package/src/components/icons/ZoomOutIcon.jsx +96 -0
package/src/components/icons/index.js +25 -2
package/dist/assets/index-BHLxMHb5.js +0 -40

package/dist/index.html CHANGED Viewed

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Platformatic UI Components</title>
-    <script type="module" crossorigin src="/assets/index-BHLxMHb5.js"></script>
+    <script type="module" crossorigin src="/assets/index-hLMQmMDJ.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Of0we_2v.css">
   </head>
   <body>

package/package.json CHANGED Viewed

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

package/src/components/DropDown.jsx CHANGED Viewed

@@ -6,15 +6,15 @@ import commonStyles from './Common.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
 import { DARK_BLUE, LIGHT_BLUE, MAIN_DARK_BLUE, RICH_BLACK, WHITE } from './constants'
 function DropDown ({
-  pictureUrl,
-  header,
-  items,
-  align,
-  backgroundColor,
-  textColor,
-  borderColor,
-  headerColor,
-  lastButton
+  pictureUrl = '',
+  header = '',
+  align = 'left',
+  items = [],
+  backgroundColor = DARK_BLUE,
+  textColor = MAIN_DARK_BLUE,
+  headerColor = WHITE,
+  borderColor = WHITE,
+  lastButton = null
 }) {
   const [open, setOpen] = useState(false)
   const borderClass = commonStyles[`bordered--${borderColor}-30`]
@@ -105,23 +105,7 @@ DropDown.propTypes = {
   /**
    * lastButton
    */
-  lastButton: PropTypes.node,
-  /**
-   * callBackClose
-   */
-  callBackClose: PropTypes.func
+  lastButton: PropTypes.node
 }
-DropDown.defaultProps = {
-  pictureUrl: '',
-  header: '',
-  align: 'left',
-  items: [],
-  backgroundColor: DARK_BLUE,
-  textColor: MAIN_DARK_BLUE,
-  headerColor: WHITE,
-  borderColor: WHITE,
-  lastButton: null,
-  callBackClose: () => {}
-}
 export default DropDown

package/src/components/FollowUs.jsx CHANGED Viewed

@@ -24,12 +24,24 @@ function SocialElement ({ href, iconName, iconClassName, iconColor, iconSize })
 }
 function FollowUs ({
-  label,
-  labelClassName,
-  useOnFrontpage,
-  iconColor,
-  iconSize,
-  socialElements
+  label = 'Follow us on',
+  labelClassName = '',
+  useOnFrontpage = true,
+  iconColor = WHITE,
+  iconSize = MEDIUM,
+  socialElements = [{
+    link: 'https://twitter.com/platformatic',
+    iconName: 'SocialXIcon'
+  }, {
+    link: 'https://www.linkedin.com/company/platformatic/',
+    iconName: 'SocialLinkedInIcon'
+  }, {
+    link: 'https://github.com/platformatic',
+    iconName: 'SocialGitHubIcon'
+  }, {
+    link: 'https://discord.gg/platformatic',
+    iconName: 'SocialDiscordIcon'
+  }]
 }) {
   const suffix = useOnFrontpage ? 'Frontpage' : 'Dashboard'
   const className = styles[`container${suffix}`]
@@ -89,25 +101,4 @@ FollowUs.propTypes = {
   }))
 }
-FollowUs.defaultProps = {
-  label: 'Follow us on',
-  labelClassName: '',
-  useOnFrontpage: true,
-  iconColor: WHITE,
-  iconSize: MEDIUM,
-  socialElements: [{
-    link: 'https://twitter.com/platformatic',
-    iconName: 'SocialXIcon'
-  }, {
-    link: 'https://www.linkedin.com/company/platformatic/',
-    iconName: 'SocialLinkedInIcon'
-  }, {
-    link: 'https://github.com/platformatic',
-    iconName: 'SocialGitHubIcon'
-  }, {
-    link: 'https://discord.gg/platformatic',
-    iconName: 'SocialDiscordIcon'
-  }]
-}
 export default FollowUs

package/src/components/InfoBox.jsx CHANGED Viewed

@@ -4,9 +4,15 @@ import PropTypes from 'prop-types'
 import styles from './InfoBox.module.css'
 import Button from './Button'
 import PlatformaticIcon from './PlatformaticIcon'
-import { COLORS_BUTTON, COLORS_ICON, HOVER_EFFECTS_BUTTONS } from './constants'
+import { COLORS_BUTTON, COLORS_ICON, HOVER_EFFECTS_BUTTONS, MAIN_GREEN } from './constants'
-function InfoBox ({ children, iconName, iconColor, helpText, buttonProps }) {
+function InfoBox ({
+  children = null,
+  iconName = '',
+  iconColor = MAIN_GREEN,
+  helpText = '',
+  buttonProps = null
+}) {
   return (
     <div className={styles.container}>
       <PlatformaticIcon size='extra-large' iconName={iconName} color={iconColor} />
@@ -47,12 +53,4 @@ InfoBox.propTypes = {
   })
 }
-InfoBox.defaultProps = {
-  children: null,
-  iconName: '',
-  iconColor: 'main-green',
-  helpText: '',
-  buttonProps: null
-}
 export default InfoBox

package/src/components/ListElement.jsx CHANGED Viewed

@@ -5,7 +5,15 @@ import commonStyles from './Common.module.css'
 import styles from './ListElement.module.css'
 import { MAIN_DARK_BLUE, MEDIUM, SMALL, WHITE, MAIN_GREEN } from './constants'
-function List ({ title, detail, marginSize, detailColor, titleColor, semiBold, iconColor }) {
+function List ({
+  title = '',
+  detail = '',
+  marginSize = MEDIUM,
+  detailColor = WHITE,
+  titleColor = MAIN_GREEN,
+  semiBold = true,
+  iconColor = MAIN_GREEN
+}) {
   let className = `${styles.container} `
   className += styles[`margin-${marginSize}`]
@@ -63,14 +71,4 @@ List.propTypes = {
   semiBold: PropTypes.bool
 }
-List.defaultProps = {
-  title: '',
-  detail: '',
-  marginSize: MEDIUM,
-  detailColor: WHITE,
-  titleColor: MAIN_GREEN,
-  iconColor: MAIN_GREEN,
-  semiBold: true
-}
 export default List

package/src/components/LoadingSpinner.jsx CHANGED Viewed

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import styles from './LoadingSpinner.module.css'
 import { SpinnerCircular } from 'spinners-react'
-function LoadingSpinner ({ loading }) {
+function LoadingSpinner ({ loading = false }) {
   // If null then loading not started, if true then loading, if false then done loading
   return loading
     ? (
@@ -23,8 +23,4 @@ LoadingSpinner.propTypes = {
   loading: PropTypes.bool
 }
-LoadingSpinner.defaultProps = {
-  loading: false
-}
 export default LoadingSpinner

package/src/components/LogoDropDown.jsx CHANGED Viewed

@@ -5,7 +5,13 @@ import styles from './LogoDropDown.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
 import { MAIN_DARK_BLUE, SMALL, WHITE } from './constants'
 import Logo from './Logo'
-function LogoDropDown ({ itemSelected, items, width, height, onClickItemSelected }) {
+function LogoDropDown ({
+  itemSelected = '',
+  items = [],
+  width = 71,
+  height = 56,
+  onClickItemSelected = () => {}
+}) {
   const [open, setOpen] = useState(false)
   function handleOpen () {
@@ -82,11 +88,4 @@ LogoDropDown.propTypes = {
   onClickItemSelected: PropTypes.func
 }
-LogoDropDown.defaultProps = {
-  width: 71,
-  height: 56,
-  itemSelected: '',
-  items: [],
-  onClickItemSelected: () => {}
-}
 export default LogoDropDown

package/src/components/ModalDirectional.jsx CHANGED Viewed

@@ -12,13 +12,13 @@ import {
 import Button from './Button'
 function ModalDirectional ({
-  setIsOpen,
-  title,
-  titleClassName,
-  children,
-  smallLayout,
-  classNameModalLefty,
-  permanent
+  children = null,
+  setIsOpen = () => {},
+  title = '',
+  titleClassName = '',
+  smallLayout = false,
+  classNameModalLefty = '',
+  permanent = false
 }) {
   const className = `${styles.container} ${styles.modalLeftCover} ${smallLayout ? styles.smallLayout : styles.normalLayout}`
   const [modalClassName] = useState(className)
@@ -88,23 +88,13 @@ ModalDirectional.propTypes = {
    */
   smallLayout: PropTypes.bool,
   /**
-   * classNameLefty
+   * classNameModalLefty
    */
-  classNameLefty: PropTypes.string,
+  classNameModalLefty: PropTypes.string,
   /**
    * permanent: modal could be closed only with Esc, X or Cancel
    */
   permanent: PropTypes.bool
 }
-ModalDirectional.defaultProps = {
-  children: null,
-  setIsOpen: () => {},
-  title: '',
-  titleClassName: '',
-  smallLayout: false,
-  classNameLefty: '',
-  permanent: false
-}
 export default ModalDirectional

package/src/components/ModalStepsForward.jsx CHANGED Viewed

@@ -8,19 +8,19 @@ import HorizontalSeparator from './HorizontalSeparator'
 import styles from './ModalStepsForward.module.css'
 import commonStyles from './Common.module.css'
 import {
-  MODAL_SIZES,
-  SMALL,
-  MODAL_LAYOUTS,
-  MODAL_POPUP,
   MAIN_DARK_BLUE,
   DULLS_BACKGROUND_COLOR,
   LARGE,
-  PROFILES,
   MARGIN_0,
   OPACITY_20
 } from './constants'
-function ModalStepsForward ({ setIsOpen, right, stepper, left }) {
+function ModalStepsForward ({
+  setIsOpen = () => {},
+  right = null,
+  stepper = null,
+  left = null
+}) {
   const buttonFullRoundedClassName = commonStyles['background-color-white']
   let modalCoverClassName = `${styles.container} ${styles.fullscreen} `
   modalCoverClassName += commonStyles['background-color-light-blue']
@@ -62,29 +62,17 @@ ModalStepsForward.propTypes = {
    */
   setIsOpen: PropTypes.func,
   /**
-   * layout
+   * right
    */
-  layout: PropTypes.oneOf(MODAL_LAYOUTS),
+  right: PropTypes.node,
   /**
-   * Size
+   * stepper
    */
-  size: PropTypes.oneOf(MODAL_SIZES),
+  stepper: PropTypes.node,
   /**
-   * profile
+   * left
    */
-  profile: PropTypes.oneOf(PROFILES),
-  /**
-   * backgroundClassName
-   */
-  backgroundClassName: PropTypes.string
-}
-ModalStepsForward.defaultProps = {
-  setIsOpen: () => {},
-  layout: MODAL_POPUP,
-  size: SMALL,
-  profile: '',
-  backgroundClassName: ''
+  left: PropTypes.node
 }
 export default ModalStepsForward

package/src/components/SearchBarV2.jsx CHANGED Viewed

@@ -6,15 +6,15 @@ import styles from './SearchBarV2.module.css'
 import PlatformaticIcon from './PlatformaticIcon'
 import { RICH_BLACK, SMALL, TRANSPARENT, WHITE } from './constants'
 function SearchBarV2 ({
-  onSubmit,
-  onChange,
-  onClear,
-  color,
-  backgroundColor,
-  placeholder,
-  dataAttrName,
-  dataAttrValue,
-  inputTextClassName
+  color = WHITE,
+  backgroundColor = RICH_BLACK,
+  onSubmit = () => { },
+  onChange = () => { },
+  onClear = () => { },
+  placeholder = 'Search',
+  dataAttrName = '',
+  dataAttrValue = '',
+  inputTextClassName = ''
 }) {
   const inputRef = useRef()
   const baseClassName = `${styles.container} ${styles.wrapperPadding} ` + commonStyles[`background-color-${backgroundColor}`]
@@ -119,17 +119,4 @@ SearchBarV2.propTypes = {
   inputTextClassName: PropTypes.string
 }
-SearchBarV2.defaultProps = {
-  color: WHITE,
-  backgroundColor: RICH_BLACK,
-  onSubmit: () => { },
-  onChange: () => { },
-  onClear: () => { },
-  placeholder: 'Search',
-  dataAttrName: '',
-  dataAttrValue: '',
-  inputTextClassName: ''
-}
 export default SearchBarV2

package/src/components/Sidebar.jsx CHANGED Viewed

@@ -10,19 +10,18 @@ import PlatformaticIcon from './PlatformaticIcon'
 import PropTypes from 'prop-types'
 import { DULLS_BACKGROUND_COLOR, MEDIUM, WHITE } from './constants'
-function Sidebar (props) {
-  const {
-    title,
-    labelButtonSettings,
-    defaultSelected,
-    onClickItemSelectedParent,
-    items,
-    onClickAdd,
-    addTitle,
-    onClickSettings,
-    disableClickAdd,
-    disableClickSettings
-  } = props
+function Sidebar ({
+  title = '',
+  labelButtonSettings = 'Settings',
+  defaultSelected = null,
+  onClickItemSelectedParent = () => {},
+  items = [],
+  onClickAdd = () => {},
+  addTitle = 'Add',
+  onClickSettings = () => {},
+  disableClickAdd = false,
+  disableClickSettings = false
+}) {
   const [collapsed, setCollapsed] = useState(false)
   const [selectedItem, setSelectedItem] = useState(null)
   const disabledCreateButton = disableClickAdd ? styles.disabled : ''
@@ -190,17 +189,4 @@ Sidebar.propTypes = {
   disableClickSettings: PropTypes.bool
 }
-Sidebar.defaultProps = {
-  title: '',
-  labelButtonSettings: 'Settings',
-  defaultSelected: null,
-  onClickItemSelectedParent: () => {},
-  items: [],
-  onClickAdd: () => {},
-  addTitle: 'Add',
-  onClickSettings: () => {},
-  disableClickAdd: false,
-  disableClickSettings: false
-}
 export default Sidebar

package/src/components/Status.jsx CHANGED Viewed

@@ -4,7 +4,11 @@ import PropTypes from 'prop-types'
 import PlatformaticIcon from './PlatformaticIcon'
 import { COLORS_ICON, EXTRA_SMALL, SIZES, WHITE } from './constants'
-function Status ({ color, status, size }) {
+function Status ({
+  color = WHITE,
+  status = '',
+  size = EXTRA_SMALL
+}) {
   const className = `inline-flex items-center text-${color}`
   return (
     <div className={className}>
@@ -30,10 +34,4 @@ Status.propTypes = {
 }
-Status.defaultProps = {
-  color: WHITE,
-  status: '',
-  size: EXTRA_SMALL
-}
 export default Status

package/src/components/TextWithLabel.jsx CHANGED Viewed

@@ -3,7 +3,13 @@ import PropTypes from 'prop-types'
 import { FONT_BASE, FONT_XS, MAIN_DARK_BLUE, WHITE } from './constants'
 import commonStyles from './Common.module.css'
 import styles from './TextWithLabel.module.css'
-function TextWithLabel ({ label, text, children, color, fontSize }) {
+function TextWithLabel ({
+  label = '',
+  text = '',
+  children = null,
+  color = WHITE,
+  fontSize = FONT_BASE
+}) {
   const className = commonStyles[`text--${color}`] + ' ' + commonStyles[`text--${fontSize}`]
   return (
     <div className={className}>
@@ -37,12 +43,4 @@ TextWithLabel.propTypes = {
   fontSize: PropTypes.oneOf([FONT_BASE, FONT_XS])
 }
-TextWithLabel.defaultProps = {
-  label: '',
-  text: '',
-  children: null,
-  color: WHITE,
-  fontSize: FONT_BASE
-}
 export default TextWithLabel

package/src/components/Tooltip.jsx CHANGED Viewed

@@ -5,14 +5,14 @@ import { useEffect, useRef, useState } from 'react'
 import { DIRECTIONS, DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP } from './constants'
 function Tooltip ({
-  direction,
-  visible,
-  activeDependsOnVisible,
-  content,
-  delay,
-  children,
-  tooltipClassName,
-  offset
+  direction = DIRECTION_TOP,
+  visible = false,
+  activeDependsOnVisible = false,
+  content = null,
+  delay = 0,
+  children = null,
+  tooltipClassName = '',
+  offset = 0
 }) {
   let timeout
   const [active, setActive] = useState(activeDependsOnVisible ? visible : false)
@@ -117,15 +117,4 @@ Tooltip.propTypes = {
   offset: PropTypes.number
 }
-Tooltip.defaultProps = {
-  direction: DIRECTION_TOP,
-  tooltipClassName: '',
-  delay: 0,
-  activeDependsOnVisible: false,
-  visible: false,
-  children: null,
-  content: null,
-  offset: 0
-}
 export default Tooltip

package/src/components/TooltipAbsolute.jsx CHANGED Viewed

@@ -2,18 +2,18 @@
 import PropTypes from 'prop-types'
 import styles from './TooltipAbsolute.module.css'
 import { useEffect, useState } from 'react'
-import { DIRECTIONS, DIRECTION_LEFT, DIRECTION_BOTTOM, DIRECTION_TOP, DIRECTION_RIGHT } from './constants'
+import { DIRECTIONS, DIRECTION_LEFT, DIRECTION_BOTTOM, DIRECTION_TOP, DIRECTION_RIGHT, POSITION_START } from './constants'
 const TooltipAbsolute = ({
-  direction,
-  content,
-  delay,
-  children,
-  tooltipClassName,
-  offset,
-  position,
-  visible,
-  activeDependsOnVisible
+  direction = DIRECTION_TOP,
+  tooltipClassName = '',
+  delay = 0,
+  children = null,
+  content = null,
+  offset = 0,
+  position = POSITION_START,
+  visible = false,
+  activeDependsOnVisible = false
 }) => {
   let timeout
   const [active, setActive] = useState(activeDependsOnVisible ? visible : false)
@@ -109,16 +109,4 @@ TooltipAbsolute.propTypes = {
   activeDependsOnVisible: PropTypes.bool
 }
-TooltipAbsolute.defaultProps = {
-  direction: DIRECTION_TOP,
-  tooltipClassName: '',
-  delay: 0,
-  children: null,
-  content: null,
-  offset: 0,
-  position: 'start',
-  activeDependsOnVisible: false,
-  visible: false
-}
 export default TooltipAbsolute

package/src/components/VerticalSeparator.jsx CHANGED Viewed

@@ -36,8 +36,4 @@ VerticalSeparator.propTypes = {
 }
-VerticalSeparator.defaultProps = {
-}
 export default VerticalSeparator

package/src/components/forms/Field.jsx CHANGED Viewed

@@ -4,14 +4,14 @@ import styles from './Field.module.css'
 import { ERROR_RED, MAIN_DARK_BLUE, WHITE } from '../constants'
 function Field ({
-  title,
-  titleColor,
-  helper,
-  children,
-  disabled,
-  required,
-  titleClassName,
-  helperClassName
+  title = '',
+  titleColor = MAIN_DARK_BLUE,
+  helper = '',
+  children = null,
+  disabled = false,
+  required = false,
+  titleClassName = '',
+  helperClassName = ''
 }) {
   let className = `${styles.container}`
   if (disabled) className += ` ${styles.disabled}`
@@ -67,15 +67,4 @@ Field.propTypes = {
   helperClassName: PropTypes.string
 }
-Field.defaultProps = {
-  title: '',
-  titleColor: 'main-dark-blue',
-  helper: '',
-  children: null,
-  disabled: false,
-  required: false,
-  titleClassName: '',
-  helperClassName: ''
-}
 export default Field