@platformatic/ui-components 0.4.0 → 0.5.1

package/src/components/icons/WorkspaceEmptyIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceEmptyIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceEmptyIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -60,11 +65,5 @@ WorkspaceEmptyIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceEmptyIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceEmptyIcon

package/src/components/icons/WorkspaceFailIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceFailIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceFailIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -118,11 +123,5 @@ WorkspaceFailIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceFailIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceFailIcon

package/src/components/icons/WorkspaceGitHubIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceGitHubIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceGitHubIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -137,11 +142,5 @@ WorkspaceGitHubIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceGitHubIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceGitHubIcon

package/src/components/icons/WorkspaceLoadingIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, EXTRA_LARGE, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceLoadingIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceLoadingIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -62,11 +67,5 @@ WorkspaceLoadingIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceLoadingIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceLoadingIcon

package/src/components/icons/WorkspaceReadyIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceReadyIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceReadyIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -150,11 +155,5 @@ WorkspaceReadyIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceReadyIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceReadyIcon

package/src/components/icons/WorkspaceStaticIcon.jsx

@@ -3,7 +3,12 @@ import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
 import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
-const WorkspaceStaticIcon = ({ color, size, disabled, inactive }) => {
+const WorkspaceStaticIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
   let className = `${styles.svgClassName} ` + styles[`${color}`]
   if (disabled) {
     className += ` ${styles.iconDisabled}`
@@ -90,11 +95,5 @@ WorkspaceStaticIcon.propTypes = {
    */
   inactive: PropTypes.bool
 }
-WorkspaceStaticIcon.defaultProps = {
-  color: MAIN_DARK_BLUE,
-  size: MEDIUM,
-  disabled: false,
-  inactive: false
-}
 
 export default WorkspaceStaticIcon

package/src/components/icons/ZoomInIcon.jsx

@@ -0,0 +1,99 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const ZoomInIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  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='7' cy='7' r='5' stroke='none' />
+          <path d='M7 5V9.5' stroke='none' strokeLinecap='round' />
+          <path d='M9.25 7.25L4.75 7.25' stroke='none' strokeLinecap='round' />
+          <path d='M14 14L11 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='10.5' cy='10.5' r='7.5' stroke='none' strokeWidth={1.5} />
+          <path d='M10.5 7.5V14.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M13.875 10.875L7.125 10.875' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M21 21L16.5 16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='17.5' cy='17.5' r='12.5' stroke='none' strokeWidth={2} />
+          <path d='M17.5 12.5V23.75' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M23.125 18.125L11.875 18.125' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M35 35L27.5 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ZoomInIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default ZoomInIcon

package/src/components/icons/ZoomOutIcon.jsx

@@ -0,0 +1,96 @@
+import * as React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Icons.module.css'
+import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+
+const ZoomOutIcon = ({
+  color = MAIN_DARK_BLUE,
+  size = MEDIUM,
+  disabled = false,
+  inactive = false
+}) => {
+  let className = `${styles.svgClassName} ` + styles[`${color}`]
+  if (disabled) {
+    className += ` ${styles.iconDisabled}`
+  }
+  if (inactive) {
+    className += ` ${styles.iconInactive}`
+  }
+  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='7' cy='7' r='5' stroke='none' />
+          <path d='M9.25 7.25L4.75 7.25' stroke='none' strokeLinecap='round' />
+          <path d='M14 14L11 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case MEDIUM:
+      icon = (
+        <svg
+          width={24}
+          height={24}
+          viewBox='0 0 24 24'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='10.5' cy='10.5' r='7.5' stroke='none' strokeWidth={1.5} />
+          <path d='M13.875 10.875L7.125 10.875' stroke='none' strokeWidth={1.5} strokeLinecap='round' />
+          <path d='M21 21L16.5 16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+    case LARGE:
+      icon = (
+        <svg
+          width={40}
+          height={40}
+          viewBox='0 0 40 40'
+          fill='none'
+          xmlns='http://www.w3.org/2000/svg'
+          className={className}
+        >
+          <circle cx='17.5' cy='17.5' r='12.5' stroke='none' strokeWidth={2} />
+          <path d='M23.125 18.125L11.875 18.125' stroke='none' strokeWidth={2} strokeLinecap='round' />
+          <path d='M35 35L27.5 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
+        </svg>
+      )
+      break
+
+    default:
+      break
+  }
+  return icon
+}
+
+ZoomOutIcon.propTypes = {
+  /**
+   * color of text, icon and borders
+   */
+  color: PropTypes.oneOf(COLORS_ICON),
+  /**
+   * Size
+   */
+  size: PropTypes.oneOf(SIZES),
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * inactive
+   */
+  inactive: PropTypes.bool
+}
+
+export default ZoomOutIcon

package/src/components/icons/index.js

@@ -27,6 +27,7 @@ import ArrowUpIcon from './ArrowUpIcon'
 import BellIcon from './BellIcon'
 import BillingIcon from './BillingIcon'
 import BuiltInLoggingIcon from './BuiltInLoggingIcon'
+import BranchIcon from './BranchIcon'
 import CalendarIcon from './CalendarIcon'
 import Calendar1DayIcon from './Calendar1DayIcon'
 import Calendar7DaysIcon from './Calendar7DaysIcon'
@@ -64,6 +65,7 @@ import RunningAppIcon from './RunningAppIcon'
 import DatabaseIcon from './DatabaseIcon'
 import DatabaseMigrationIcon from './DatabaseMigrationIcon'
 import DepencenciesReloadIcon from './DepencenciesReloadIcon'
+import DeploymentHistoryIcon from './DeploymentHistoryIcon'
 import EditDocumentIcon from './EditDocumentIcon'
 import EditIcon from './EditIcon'
 import EntrypointIcon from './EntrypointIcon'
@@ -73,6 +75,7 @@ import ExpandIcon from './ExpandIcon'
 import ExploreDocIcon from './ExploreDocIcon'
 import EyeClosedIcon from './EyeClosedIcon'
 import EyeOpenedIcon from './EyeOpenedIcon'
+import FailureRateIcon from './FailureRateIcon'
 import FolderIcon from './FolderIcon'
 import FoldersIcon from './FoldersIcon'
 import GearIcon from './GearIcon'
@@ -81,6 +84,7 @@ import GiveOwnershipIcon from './GiveOwnershipIcon'
 import GitHubRepoIcon from './GitHubRepoIcon'
 import GitHubRepo2Icon from './GitHubRepo2Icon'
 import GraphQLIcon from './GraphQLIcon'
+import K8SMetricsIcon from './K8SMetricsIcon'
 import KeyIcon from './KeyIcon'
 import ImportAppIcon from './ImportAppIcon'
 import LabelIcon from './LabelIcon'
@@ -92,12 +96,16 @@ import LogOutIcon from './LogOutIcon'
 import LogsRiskIcon from './LogsRiskIcon'
 import MetricsIcon from './MetricsIcon'
 import MetricsLoadingIcon from './MetricsLoadingIcon'
+import MetricsLogsIcon from './MetricsLogsIcon'
 import MissingTemplateIcon from './MissingTemplateIcon'
-
 import NameAppIcon from './NameAppIcon'
+import NodeJSMetricsIcon from './NodeJSMetricsIcon'
 import NoMetricsIcon from './NoMetricsIcon'
+import NotCompliantServiceIcon from './NotCompliantServiceIcon'
 import OrganizationIcon from './OrganizationIcon'
 import OutOfBoxGraphQLIcon from './OutOfBoxGraphQLIcon'
+import OutdatedServiceIcon from './OutdatedServiceIcon'
+import OtherLogosGoogleIcon from './OtherLogosGoogleIcon'
 import PlatformaticComposerIcon from './PlatformaticComposerIcon'
 import PlatformaticDBIcon from './PlatformaticDBIcon'
 import PlatformaticRuntimeIcon from './PlatformaticRuntimeIcon'
@@ -108,6 +116,7 @@ import PullRequestIcon from './PullRequestIcon'
 import PullRequestLoadingIcon from './PullRequestLoadingIcon'
 import RequestOwnershipIcon from './RequestOwnershipIcon'
 import RecentAppsIcon from './RecentAppsIcon'
+import ResourceIcon from './ResourceIcon'
 import RestartIcon from './RestartIcon'
 import RocketIcon from './RocketIcon'
 import RunningIcon from './RunningIcon'
@@ -146,6 +155,8 @@ import WorkspaceFailIcon from './WorkspaceFailIcon'
 import WorkspaceLoadingIcon from './WorkspaceLoadingIcon'
 import WorkspaceReadyIcon from './WorkspaceReadyIcon'
 import WorkspaceStaticIcon from './WorkspaceStaticIcon'
+import ZoomInIcon from './ZoomInIcon'
+import ZoomOutIcon from './ZoomOutIcon'
 
 export default {
   AddIcon,
@@ -177,6 +188,7 @@ export default {
   BellIcon,
   BillingIcon,
   BuiltInLoggingIcon,
+  BranchIcon,
   CalendarIcon,
   Calendar1DayIcon,
   Calendar7DaysIcon,
@@ -214,6 +226,7 @@ export default {
   DatabaseIcon,
   DatabaseMigrationIcon,
   DepencenciesReloadIcon,
+  DeploymentHistoryIcon,
   EditDocumentIcon,
   EditIcon,
   EntrypointIcon,
@@ -223,6 +236,7 @@ export default {
   ExploreDocIcon,
   EnlargeIcon,
   EntryIcon,
+  FailureRateIcon,
   FolderIcon,
   FoldersIcon,
   GearIcon,
@@ -232,6 +246,7 @@ export default {
   GitHubRepo2Icon,
   GraphQLIcon,
   ImportAppIcon,
+  K8SMetricsIcon,
   KeyIcon,
   LabelIcon,
   LayersIcon,
@@ -242,10 +257,15 @@ export default {
   LogsRiskIcon,
   MetricsIcon,
   MetricsLoadingIcon,
+  MetricsLogsIcon,
   MissingTemplateIcon,
   NameAppIcon,
+  NodeJSMetricsIcon,
   NoMetricsIcon,
+  NotCompliantServiceIcon,
   OrganizationIcon,
+  OutdatedServiceIcon,
+  OtherLogosGoogleIcon,
   OutOfBoxGraphQLIcon,
   PlatformaticComposerIcon,
   PlatformaticDBIcon,
@@ -257,6 +277,7 @@ export default {
   PullRequestLoadingIcon,
   RequestOwnershipIcon,
   RecentAppsIcon,
+  ResourceIcon,
   RestartIcon,
   RocketIcon,
   RunningIcon,
@@ -294,5 +315,7 @@ export default {
   WorkspaceGitHubIcon,
   WorkspaceLoadingIcon,
   WorkspaceReadyIcon,
-  WorkspaceStaticIcon
+  WorkspaceStaticIcon,
+  ZoomInIcon,
+  ZoomOutIcon
 }

package/src/components/layouts/Layout.jsx

@@ -2,7 +2,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-function Layout ({ className, children }) {
+function Layout ({
+  className = 'container mx-auto px-5 my-5 flex flex-col gap-10 h-screen',
+  children = null
+}) {
   return (
     <div className={className}>
       {children}
@@ -22,9 +25,4 @@ Layout.propTypes = {
   children: PropTypes.node
 }
 
-Layout.defaultProps = {
-  className: 'container mx-auto px-5 my-5 flex flex-col gap-10 h-screen',
-  children: null
-}
-
 export default Layout

package/src/components/logos/AdvancedLogo.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { MAIN_DARK_BLUE, WHITE } from '../constants'
 
-function AdvancedLogo ({ backgroundColor, width, height }) {
+function AdvancedLogo ({
+  backgroundColor = WHITE,
+  width = 539,
+  height = 182
+}) {
   let icon = (
     <svg width={width} height={height} viewBox='0 0 539 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path d='M186.81 64.7676H502.742C522.767 64.7676 539 81.0007 539 101.025V101.025C539 121.05 522.767 137.283 502.742 137.283H186.81L213.978 122.78L222.859 96.8815L207.708 75.1269L186.81 64.7676Z' fill='#00283D' />
@@ -50,10 +54,4 @@ AdvancedLogo.propTypes = {
   height: PropTypes.number
 }
 
-AdvancedLogo.defaultProps = {
-  backgroundColor: WHITE,
-  width: 539,
-  height: 182
-}
-
 export default AdvancedLogo

package/src/components/logos/BasicLogo.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { MAIN_DARK_BLUE, WHITE } from '../constants'
 
-function BasicLogo ({ backgroundColor, width, height }) {
+function BasicLogo ({
+  backgroundColor = WHITE,
+  width = 423,
+  height = 182
+}) {
   let icon = (
     <svg width={width} height={height} viewBox='0 0 423 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path d='M187.436 64.9733H385.39C405.484 64.9733 421.773 81.2622 421.773 101.356V101.356C421.773 121.449 405.484 137.738 385.39 137.738H187.436L214.697 123.185L223.609 97.1977L208.406 75.3682L187.436 64.9733Z' fill='#00283D' />
@@ -53,10 +57,4 @@ BasicLogo.propTypes = {
   height: PropTypes.number
 }
 
-BasicLogo.defaultProps = {
-  backgroundColor: WHITE,
-  width: 423,
-  height: 182
-}
-
 export default BasicLogo

package/src/components/logos/FreeLogo.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { MAIN_DARK_BLUE, WHITE } from '../constants'
 
-function FreeLogo ({ backgroundColor, width, height }) {
+function FreeLogo ({
+  backgroundColor = WHITE,
+  width = 399,
+  height = 183
+}) {
   let icon = (
     <svg width={width} height={height} viewBox='0 0 399 183' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path d='M187.725 65.0947H354.562C374.696 65.0947 391.018 81.4167 391.018 101.551V101.551C391.018 121.685 374.696 138.007 354.562 138.007H187.725L215.041 123.424L223.971 97.3844L208.737 75.5107L187.725 65.0947Z' fill='#00283D' />
@@ -51,10 +55,4 @@ FreeLogo.propTypes = {
   height: PropTypes.number
 }
 
-FreeLogo.defaultProps = {
-  backgroundColor: WHITE,
-  width: 399,
-  height: 183
-}
-
 export default FreeLogo

package/src/components/logos/ProLogo.jsx

@@ -2,7 +2,11 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { MAIN_DARK_BLUE, WHITE } from '../constants'
 
-function ProLogo ({ backgroundColor, width, height }) {
+function ProLogo ({
+  backgroundColor = WHITE,
+  width = 370,
+  height = 182
+}) {
   let icon = (
     <svg width={width} height={height} viewBox='0 0 370 182' fill='none' xmlns='http://www.w3.org/2000/svg'>
       <path d='M187.437 64.9734H332.966C353.06 64.9734 369.349 81.2623 369.349 101.356V101.356C369.349 121.449 353.06 137.738 332.966 137.738H187.437L214.697 123.185L223.609 97.1978L208.406 75.3684L187.437 64.9734Z' fill='#00283D' />
@@ -51,10 +55,4 @@ ProLogo.propTypes = {
   height: PropTypes.number
 }
 
-ProLogo.defaultProps = {
-  backgroundColor: WHITE,
-  width: 370,
-  height: 182
-}
-
 export default ProLogo

package/vitest.config.js

@@ -8,7 +8,8 @@ export default defineConfig({
   test: {
     globals: true,
     environment: 'happy-dom',
-    exclude: ['node_modules']
+    exclude: ['node_modules'],
+    setupFiles: ['./setupTests.js']
   }
 
 })