@platformatic/ui-components 0.15.5 → 0.17.1

package/src/components/icons/UserComputerIcon.jsx

@@ -1,7 +1,6 @@
 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'
+import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const UserComputerIcon = ({
   color = MAIN_DARK_BLUE,
@@ -83,23 +82,4 @@ const UserComputerIcon = ({
   return icon
 }
 
-UserComputerIcon.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 UserComputerIcon

package/src/components/icons/UserIcon.jsx

@@ -1,7 +1,6 @@
 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'
+import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const UserIcon = ({
   color = MAIN_DARK_BLUE,
@@ -72,23 +71,4 @@ const UserIcon = ({
   return icon
 }
 
-UserIcon.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 UserIcon

package/src/components/icons/UserRemoveIcon.jsx

@@ -1,7 +1,6 @@
 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'
+import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const UserRemoveIcon = ({
   color = MAIN_DARK_BLUE,
@@ -85,19 +84,4 @@ const UserRemoveIcon = ({
   return icon
 }
 
-UserRemoveIcon.propTypes = {
-  /**
-   * color of text, icon and borders
-   */
-  color: PropTypes.oneOf(COLORS_ICON),
-  /**
-   * Size
-   */
-  size: PropTypes.oneOf(SIZES),
-  /**
-   * tip
-   */
-  tip: PropTypes.string
-}
-
 export default UserRemoveIcon

package/src/components/icons/UserRoleIcon.jsx

@@ -1,7 +1,6 @@
 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'
+import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const UserRoleIcon = ({
   color = MAIN_DARK_BLUE,
@@ -84,19 +83,4 @@ const UserRoleIcon = ({
   return icon
 }
 
-UserRoleIcon.propTypes = {
-  /**
-   * color of text, icon and borders
-   */
-  color: PropTypes.oneOf(COLORS_ICON),
-  /**
-   * Size
-   */
-  size: PropTypes.oneOf(SIZES),
-  /**
-   * tip
-   */
-  tip: PropTypes.string
-}
-
 export default UserRoleIcon

package/src/components/icons/WorkspaceDynamicIcon.jsx

@@ -1,7 +1,6 @@
 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'
+import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceDynamicIcon = ({
   color = MAIN_DARK_BLUE,
@@ -80,23 +79,4 @@ const WorkspaceDynamicIcon = ({
   return icon
 }
 
-WorkspaceDynamicIcon.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 WorkspaceDynamicIcon

package/src/components/icons/WorkspaceEmptyIcon.jsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
+import { MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceEmptyIcon = ({
   color = MAIN_DARK_BLUE,
@@ -47,23 +46,4 @@ const WorkspaceEmptyIcon = ({
   return icon
 }
 
-WorkspaceEmptyIcon.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 WorkspaceEmptyIcon

package/src/components/icons/WorkspaceFailIcon.jsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-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'
+import { SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceFailIcon = ({
   color = MAIN_DARK_BLUE,
@@ -105,23 +104,4 @@ const WorkspaceFailIcon = ({
   return icon
 }
 
-WorkspaceFailIcon.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 WorkspaceFailIcon

package/src/components/icons/WorkspaceGitHubIcon.jsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-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'
+import { SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceGitHubIcon = ({
   color = MAIN_DARK_BLUE,
@@ -124,23 +123,4 @@ const WorkspaceGitHubIcon = ({
   return icon
 }
 
-WorkspaceGitHubIcon.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 WorkspaceGitHubIcon

package/src/components/icons/WorkspaceLoadingIcon.jsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import PropTypes from 'prop-types'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES, EXTRA_LARGE, MEDIUM, MAIN_DARK_BLUE } from '../constants'
+import { EXTRA_LARGE, MEDIUM, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceLoadingIcon = ({
   color = MAIN_DARK_BLUE,
@@ -49,23 +48,4 @@ const WorkspaceLoadingIcon = ({
   return icon
 }
 
-WorkspaceLoadingIcon.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 WorkspaceLoadingIcon

package/src/components/icons/WorkspaceReadyIcon.jsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-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'
+import { SMALL, MEDIUM, LARGE, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceReadyIcon = ({
   color = MAIN_DARK_BLUE,
@@ -137,23 +136,4 @@ const WorkspaceReadyIcon = ({
   return icon
 }
 
-WorkspaceReadyIcon.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 WorkspaceReadyIcon

package/src/components/icons/WorkspaceStaticIcon.jsx

@@ -1,7 +1,6 @@
 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'
+import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const WorkspaceStaticIcon = ({
   color = MAIN_DARK_BLUE,
@@ -77,23 +76,4 @@ const WorkspaceStaticIcon = ({
   return icon
 }
 
-WorkspaceStaticIcon.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 WorkspaceStaticIcon

package/src/components/icons/ZoomInIcon.jsx

@@ -1,7 +1,6 @@
-import * as React from 'react'
-import PropTypes from 'prop-types'
+import React from 'react'
 import styles from './Icons.module.css'
-import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
+import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const ZoomInIcon = ({
   color = MAIN_DARK_BLUE,
@@ -77,23 +76,4 @@ const ZoomInIcon = ({
   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

@@ -1,7 +1,6 @@
 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'
+import { SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
 
 const ZoomOutIcon = ({
   color = MAIN_DARK_BLUE,
@@ -74,23 +73,4 @@ const ZoomOutIcon = ({
   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

@@ -209,6 +209,8 @@ import TaxonomyIcon from './TaxonomyIcon'
 import TeamsIcon from './TeamsIcon'
 import TerminalIcon from './TerminalIcon'
 import TrashIcon from './TrashIcon'
+import TrendDownIcon from './TrendDownIcon'
+import TrendUpIcon from './TrendUpIcon'
 import TwoUsersIcon from './TwoUsersIcon'
 import UpgradeIcon from './UpgradeIcon'
 import UploadFileIcon from './UploadFileIcon'
@@ -438,6 +440,8 @@ export default {
   TeamsIcon,
   TerminalIcon,
   TrashIcon,
+  TrendDownIcon,
+  TrendUpIcon,
   TwoUsersIcon,
   UpgradeIcon,
   UploadFileIcon,

package/src/components/layouts/Layout.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 
 function Layout (props) {
   const {
@@ -15,15 +14,4 @@ function Layout (props) {
   )
 }
 
-Layout.propTypes = {
-  /**
-   * className
-   */
-  className: PropTypes.string,
-  /**
-   * children
-   */
-  children: PropTypes.node
-}
-
 export default Layout

package/src/components/loaders/SpinnerCircular.jsx

@@ -1,8 +1,7 @@
 // https://loading.io/css/
 import React from 'react'
-import PropTypes from 'prop-types'
 import styles from './SpinnerCircular.module.css'
-import { COLORS_BUTTON, WHITE } from '../constants'
+import { WHITE } from '../constants'
 
 function SpinnerCircular ({
   className = '',
@@ -29,23 +28,4 @@ function SpinnerCircular ({
   )
 }
 
-SpinnerCircular.propTypes = {
-  /**
-   * className
-   */
-  className: PropTypes.string,
-  /**
-   * color
-   */
-  color: PropTypes.oneOf(COLORS_BUTTON),
-  /**
-   * size
-   */
-  size: PropTypes.number,
-  /**
-   * thickness
-   */
-  thickness: PropTypes.number
-}
-
 export default SpinnerCircular

package/src/components/logos/AdvancedLogo.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { MAIN_DARK_BLUE, WHITE } from '../constants'
 
 function AdvancedLogo ({
@@ -39,19 +38,4 @@ function AdvancedLogo ({
   return icon
 }
 
-AdvancedLogo.propTypes = {
-  /**
-   * background color of the button
-   */
-  backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
-  /**
-   * width
-   */
-  width: PropTypes.number,
-  /**
-   * height
-   */
-  height: PropTypes.number
-}
-
 export default AdvancedLogo

package/src/components/logos/BasicLogo.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { MAIN_DARK_BLUE, WHITE } from '../constants'
 
 function BasicLogo ({
@@ -42,19 +41,4 @@ function BasicLogo ({
   return icon
 }
 
-BasicLogo.propTypes = {
-  /**
-   * background color of the button
-   */
-  backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
-  /**
-   * width
-   */
-  width: PropTypes.number,
-  /**
-   * height
-   */
-  height: PropTypes.number
-}
-
 export default BasicLogo

package/src/components/logos/FreeLogo.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { MAIN_DARK_BLUE, WHITE } from '../constants'
 
 function FreeLogo ({
@@ -40,19 +39,4 @@ function FreeLogo ({
   return icon
 }
 
-FreeLogo.propTypes = {
-  /**
-   * background color of the button
-   */
-  backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
-  /**
-   * width
-   */
-  width: PropTypes.number,
-  /**
-   * height
-   */
-  height: PropTypes.number
-}
-
 export default FreeLogo

package/src/components/logos/ProLogo.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import { MAIN_DARK_BLUE, WHITE } from '../constants'
 
 function ProLogo ({
@@ -40,19 +39,4 @@ function ProLogo ({
   return icon
 }
 
-ProLogo.propTypes = {
-  /**
-   * background color of the button
-   */
-  backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
-  /**
-   * width
-   */
-  width: PropTypes.number,
-  /**
-   * height
-   */
-  height: PropTypes.number
-}
-
 export default ProLogo

package/src/stories/ArcMetric.stories.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import ArcMetric from '../components/ArcMetric'
+
+export default {
+  title: 'Platformatic/Metrics/ArcMetric',
+  component: ArcMetric
+}
+
+export const Default = () => (
+  <ArcMetric
+    value={50}
+    max={100}
+    unit='MB'
+    title='Memory Allocation & Usage'
+    helper={<><span>100 MB</span><br /><span>Allocated</span></>}
+  />
+)

package/src/stories/MetricInfoBox.stories.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import MetricInfoBox from '../components/MetricInfoBox'
+
+export default {
+  title: 'Platformatic/Metrics/MetricInfoBox',
+  component: MetricInfoBox
+}
+
+export const Default = () => (
+  <MetricInfoBox
+    title='Memory Allocation & Usage'
+    value={50}
+    unit='MB'
+    data={[100, 90, 80, 70, 60, 50, 40, 30, 20, 10]}
+    helper='Average Usage'
+  />
+)
+export const WithGraph = () => (
+  <MetricInfoBox
+    title='Memory Allocation & Usage'
+    value={50}
+    unit='MB'
+    data={[100, 90, 80, 70, 60, 50, 40, 30, 20, 10]}
+    helper='Average Usage'
+    showGraph
+  />
+)
+
+export const WithTooltip = () => (
+  <MetricInfoBox
+    title='Memory Allocation & Usage'
+    value={50}
+    unit='MB'
+    data={[100, 90, 80, 70, 60, 50, 40, 30, 20, 10]}
+    helper='Average Usage'
+    showGraph
+    tooltip='This is a tooltip'
+  />
+)

package/src/stories/TrendLine.stories.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import TrendLine from '../components/TrendLine'
+
+export default {
+  title: 'Components/TrendLine',
+  component: TrendLine
+}
+
+const Template = (args) => (
+  <div style={{ background: '#0B1016', padding: 24, minHeight: 180 }}>
+    <TrendLine {...args} />
+  </div>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  yValues: [20, 40, 30, 50, 35, 60, 55, 70, 65, 80, 60, 75, 70, 90, 85],
+  width: 400,
+  height: 120
+}