@platformatic/ui-components 0.1.48 → 0.1.50

package/src/components/Common.module.css

@@ -1,28 +1,28 @@
-.bordered {
-  @apply border border-solid box-border rounded-md;
-}
-.bordered--main-green {
-  @apply border-main-green;
-}
-.bordered--main-dark-blue {
-  @apply border-main-dark-blue;
-}
-.bordered--error-red {
-  @apply border-error-red;
-}
-
-.error-message {
-  @apply absolute -bottom-5 text-error-red text-xs px-2;
-}
-
-.padded {
-  @apply px-2 py-2.5;
-}
-
-.text--green {
-  @apply text-main-green
-}
-.text--main-dark-blue {
-  @apply text-main-dark-blue;
-}
-
+.bordered {
+  @apply border border-solid box-border rounded-md;
+}
+.bordered--main-green {
+  @apply border-main-green;
+}
+.bordered--main-dark-blue {
+  @apply border-main-dark-blue;
+}
+.bordered--error-red {
+  @apply border-error-red;
+}
+
+.error-message {
+  @apply absolute -bottom-5 text-error-red text-xs px-2;
+}
+
+.padded {
+  @apply px-2 py-2.5;
+}
+
+.text--green {
+  @apply text-main-green
+}
+.text--main-dark-blue {
+  @apply text-main-dark-blue;
+}
+

package/src/components/DetailedMetric.jsx

@@ -1,32 +1,32 @@
-'use strict'
-
-import React from 'react'
-import SimpleMetric from './SimpleMetric'
-import HorizontalSeparator from './HorizontalSeparator'
-import VerticalSeparator from './VerticalSeparator'
-import styles from './DetailedMetric.module.css'
-import MetricValue from './MetricValue'
-export default function DetailedMetric (props) {
-  const { leftDetail, rightDetail } = props
-  return (
-    <SimpleMetric {...props}>
-      <HorizontalSeparator />
-      <div className={styles.detailContainer}>
-        <MetricValue
-          pre={leftDetail.pre}
-          unit={leftDetail.unit}
-          color={leftDetail.color}
-          value={leftDetail.value}
-        />
-        <VerticalSeparator />
-        <MetricValue
-          pre={rightDetail.pre}
-          unit={rightDetail.unit}
-          color={rightDetail.color}
-          value={rightDetail.value}
-        />
-      </div>
-    </SimpleMetric>
-
-  )
-}
+'use strict'
+
+import React from 'react'
+import SimpleMetric from './SimpleMetric'
+import HorizontalSeparator from './HorizontalSeparator'
+import VerticalSeparator from './VerticalSeparator'
+import styles from './DetailedMetric.module.css'
+import MetricValue from './MetricValue'
+export default function DetailedMetric (props) {
+  const { leftDetail, rightDetail } = props
+  return (
+    <SimpleMetric {...props}>
+      <HorizontalSeparator />
+      <div className={styles.detailContainer}>
+        <MetricValue
+          pre={leftDetail.pre}
+          unit={leftDetail.unit}
+          color={leftDetail.color}
+          value={leftDetail.value}
+        />
+        <VerticalSeparator />
+        <MetricValue
+          pre={rightDetail.pre}
+          unit={rightDetail.unit}
+          color={rightDetail.color}
+          value={rightDetail.value}
+        />
+      </div>
+    </SimpleMetric>
+
+  )
+}

package/src/components/DetailedMetric.module.css

@@ -1,3 +1,3 @@
-.detailContainer {
-  @apply flex items-center justify-around;
+.detailContainer {
+  @apply flex items-center justify-around;
 }

package/src/components/DropDown.jsx

@@ -1,36 +1,36 @@
-'use strict'
-
-import React, { useState } from 'react'
-import styles from './DropDown.module.css'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronRight, faChevronDown } from '@fortawesome/free-solid-svg-icons'
-export default function DropDown (props) {
-  const { pictureUrl, header, items, align = 'left' } = props
-  const [open, setOpen] = useState(false)
-  function handleOpen () {
-    setOpen(!open)
-  }
-  return (
-    <div className={`${styles.dropDown} ${styles[align]}`}>
-      <span className={styles.header} onClick={handleOpen}>
-        {pictureUrl && <img src={pictureUrl} height={32} width={32} className={styles.picture} />}
-        {header}
-        {!open && <FontAwesomeIcon className={styles.arrow} icon={faChevronRight} />}
-        {open && <FontAwesomeIcon className={styles.arrow} icon={faChevronDown} />}
-      </span>
-      {open && (
-        <div className={styles.menu}>
-          {items.map((item, index) => {
-            return (
-              <div className={styles.item} key={index}>
-                {item}
-              </div>
-            )
-          })}
-        </div>
-      )}
-
-    </div>
-
-  )
-}
+'use strict'
+
+import React, { useState } from 'react'
+import styles from './DropDown.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronRight, faChevronDown } from '@fortawesome/free-solid-svg-icons'
+export default function DropDown (props) {
+  const { pictureUrl, header, items, align = 'left' } = props
+  const [open, setOpen] = useState(false)
+  function handleOpen () {
+    setOpen(!open)
+  }
+  return (
+    <div className={`${styles.dropDown} ${styles[align]}`}>
+      <span className={styles.header} onClick={handleOpen}>
+        {pictureUrl && <img src={pictureUrl} height={32} width={32} className={styles.picture} />}
+        {header}
+        {!open && <FontAwesomeIcon className={styles.arrow} icon={faChevronRight} />}
+        {open && <FontAwesomeIcon className={styles.arrow} icon={faChevronDown} />}
+      </span>
+      {open && (
+        <div className={styles.menu}>
+          {items.map((item, index) => {
+            return (
+              <div className={styles.item} key={index}>
+                {item}
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+    </div>
+
+  )
+}

package/src/components/DropDown.module.css

@@ -1,28 +1,28 @@
-.dropDown {
-  @apply mx-4 relative flex flex-col;
-}
-
-.right {
-  @apply items-end;
-}
-
-.left {
-  @apply items-start;
-}
-.arrow {
-  @apply absolute top-[50%] right-0 translate-y-[-50%];
-}
-.header {
-  @apply flex items-center hover:cursor-pointer relative pr-6 tracking-more-widest uppercase text-sm font-normal;
-}
-.picture {
-  @apply border border-transparent rounded-full mr-2;
-}
-.menu {
-  @apply absolute border-solid border border-white px-0 py-1 bg-light-blue mt-8 rounded-md z-10 text-sm min-w-[175px];
-}
-.item {
-  @apply py-3 px-3 text-main-dark-blue first:border-t-0 text-sm uppercase hover:font-semibold hover:cursor-pointer tracking-more-widest; 
-  /* it's a workaround due to opacity... */
-  border-top: 1px solid rgba(0, 40, 61, 0.2);;
+.dropDown {
+  @apply mx-4 relative flex flex-col;
+}
+
+.right {
+  @apply items-end;
+}
+
+.left {
+  @apply items-start;
+}
+.arrow {
+  @apply absolute top-[50%] right-0 translate-y-[-50%];
+}
+.header {
+  @apply flex items-center hover:cursor-pointer relative pr-6 tracking-more-widest uppercase text-sm font-normal;
+}
+.picture {
+  @apply border border-transparent rounded-full mr-2;
+}
+.menu {
+  @apply absolute border-solid border border-white px-0 py-1 bg-light-blue mt-8 rounded-md z-10 text-sm min-w-[175px];
+}
+.item {
+  @apply py-3 px-3 text-main-dark-blue first:border-t-0 text-sm uppercase hover:font-semibold hover:cursor-pointer tracking-more-widest; 
+  /* it's a workaround due to opacity... */
+  border-top: 1px solid rgba(0, 40, 61, 0.2);;
 }

package/src/components/FollowUs.jsx

@@ -1,35 +1,35 @@
-import React from 'react'
-import styles from './FollowUs.module.css'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faGithub, faTwitter, faLinkedin, faDiscord } from '@fortawesome/free-brands-svg-icons'
-
-export default function FollowUs ({ label = 'FOLLOW US ON' }) {
-  return (
-    <div className={styles.container}>
-      <div className={styles.label}>
-        {label}
-      </div>
-      <div className={styles.icon}>
-        <a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
-          <FontAwesomeIcon icon={faTwitter} className='mr-3 text-white' />
-        </a>
-      </div>
-      <div className={styles.icon}>
-        <a href='https://www.linkedin.com/company/platformatic/' target='_blank' rel='noopener noreferrer'>
-          <FontAwesomeIcon icon={faLinkedin} className='mr-3 text-white' />
-        </a>
-      </div>
-      <div className={styles.icon}>
-        <a href='https://github.com/platformatic' target='_blank' rel='noopener noreferrer'>
-          <FontAwesomeIcon icon={faGithub} className='mr-2 text-white' />
-        </a>
-      </div>
-      <div className={styles.icon}>
-        <a href='https://discord.gg/platformatic' target='_blank' rel='noopener noreferrer'>
-          <FontAwesomeIcon icon={faDiscord} className='mr-2 text-white' />
-        </a>
-      </div>
-
-    </div>
-  )
-}
+import React from 'react'
+import styles from './FollowUs.module.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faGithub, faTwitter, faLinkedin, faDiscord } from '@fortawesome/free-brands-svg-icons'
+
+export default function FollowUs ({ label = 'FOLLOW US ON' }) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.label}>
+        {label}
+      </div>
+      <div className={styles.icon}>
+        <a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faTwitter} className='mr-3 text-white' />
+        </a>
+      </div>
+      <div className={styles.icon}>
+        <a href='https://www.linkedin.com/company/platformatic/' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faLinkedin} className='mr-3 text-white' />
+        </a>
+      </div>
+      <div className={styles.icon}>
+        <a href='https://github.com/platformatic' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faGithub} className='mr-2 text-white' />
+        </a>
+      </div>
+      <div className={styles.icon}>
+        <a href='https://discord.gg/platformatic' target='_blank' rel='noopener noreferrer'>
+          <FontAwesomeIcon icon={faDiscord} className='mr-2 text-white' />
+        </a>
+      </div>
+
+    </div>
+  )
+}

package/src/components/FollowUs.module.css

@@ -1,11 +1,11 @@
-.container {
-  @apply flex w-full items-center;
-}
-
-.label {
-  @apply uppercase text-light-green tracking-more-widest text-sm mr-8;
-}
-
-.icon {
-  @apply text-white mx-4 text-xl;
-}
+.container {
+  @apply flex w-full items-center;
+}
+
+.label {
+  @apply uppercase text-light-green tracking-more-widest text-sm mr-8;
+}
+
+.icon {
+  @apply text-white mx-4 text-xl;
+}

package/src/components/GHLoginButton.jsx

@@ -1,14 +1,14 @@
-import React from 'react'
-import LoginButton from './LoginButton'
-import { faGithub } from '@fortawesome/free-brands-svg-icons'
-
-export default function GHLoginButton ({ onClick, ...props }) {
-  return (
-    <LoginButton
-      label='Continue with Github'
-      onClick={onClick}
-      icon={faGithub}
-      {...props}
-    />
-  )
-}
+import React from 'react'
+import LoginButton from './LoginButton'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+
+export default function GHLoginButton ({ onClick, ...props }) {
+  return (
+    <LoginButton
+      label='Continue with Github'
+      onClick={onClick}
+      icon={faGithub}
+      {...props}
+    />
+  )
+}

package/src/components/HorizontalSeparator.jsx

@@ -1,15 +1,15 @@
-'use strict'
-import React from 'react'
-import styles from './HorizontalSeparator.module.css'
-export default function HorizontalSeparator ({ marginTop = 4, marginBottom = 4, color = 'dark-green', opacity = 1 }) {
-  function getClassName () {
-    let className = `text-${color} `
-    // margin
-    className += (marginTop === marginBottom ? `${styles['marginY-' + marginTop]}` : `${styles['marginT-' + marginTop]} ${styles['marginB-' + marginBottom]}`)
-    // opacity
-    if (opacity > 1) className += ' ' + styles[`apply-opacity-${opacity}`]
-    return className
-  }
-
-  return <hr className={getClassName()} />
-}
+'use strict'
+import React from 'react'
+import styles from './HorizontalSeparator.module.css'
+export default function HorizontalSeparator ({ marginTop = 4, marginBottom = 4, color = 'dark-green', opacity = 1 }) {
+  function getClassName () {
+    let className = `text-${color} `
+    // margin
+    className += (marginTop === marginBottom ? `${styles['marginY-' + marginTop]}` : `${styles['marginT-' + marginTop]} ${styles['marginB-' + marginBottom]}`)
+    // opacity
+    if (opacity > 1) className += ' ' + styles[`apply-opacity-${opacity}`]
+    return className
+  }
+
+  return <hr className={getClassName()} />
+}

package/src/components/HorizontalSeparator.module.css

@@ -1,27 +1,27 @@
-.marginY-4 {
-  @apply my-4;
-}
-
-.marginT-4 {
-  @apply mt-4;
-}
-
-.marginB-4 {
-  @apply mb-4;
-}
-
-.marginY-10 {
-  @apply my-10;
-}
-
-.marginT-10 {
-  @apply mt-10;
-}
-
-.marginB-10 {
-  @apply mb-10;
-}
-
-.apply-opacity-20 {
-  @apply opacity-20;
+.marginY-4 {
+  @apply my-4;
+}
+
+.marginT-4 {
+  @apply mt-4;
+}
+
+.marginB-4 {
+  @apply mb-4;
+}
+
+.marginY-10 {
+  @apply my-10;
+}
+
+.marginT-10 {
+  @apply mt-10;
+}
+
+.marginB-10 {
+  @apply mb-10;
+}
+
+.apply-opacity-20 {
+  @apply opacity-20;
 }

package/src/components/InfoBox.jsx

@@ -1,50 +1,50 @@
-'use strict'
-import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './InfoBox.module.css'
-import Button from './Button'
-import PlatformaticIcon from './PlatformaticIcon'
-
-function InfoBox ({ children, iconLogo, helpText, buttonProps }) {
-  return (
-    <div className={styles.container}>
-      <PlatformaticIcon size='extra-large' iconName={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 bold />)}
-    </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
+'use strict'
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './InfoBox.module.css'
+import Button from './Button'
+import PlatformaticIcon from './PlatformaticIcon'
+
+function InfoBox ({ children, iconLogo, helpText, buttonProps }) {
+  return (
+    <div className={styles.container}>
+      <PlatformaticIcon size='extra-large' iconName={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 bold />)}
+    </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

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

package/src/components/List.jsx

@@ -1,20 +1,20 @@
-import React from 'react'
-import styles from './List.module.css'
-
-export default function List ({ title, ...props }) {
-  return (
-    <div className={styles.container}>
-      {title &&
-        <div
-          className={styles.title}
-          data-testid='list-title'
-          {...props}
-        >
-          {title}
-        </div>}
-      <div className={styles.elements}>
-        {props.children}
-      </div>
-    </div>
-  )
-}
+import React from 'react'
+import styles from './List.module.css'
+
+export default function List ({ title, ...props }) {
+  return (
+    <div className={styles.container}>
+      {title &&
+        <div
+          className={styles.title}
+          data-testid='list-title'
+          {...props}
+        >
+          {title}
+        </div>}
+      <div className={styles.elements}>
+        {props.children}
+      </div>
+    </div>
+  )
+}

package/src/components/List.module.css

@@ -1,11 +1,11 @@
-.title {
-  @apply text-light-green font-bold w-full text-left uppercase
-}
-
-.container {
-  @apply w-full
-}
-
-.elements {
-  @apply flex flex-col
-}
+.title {
+  @apply text-light-green font-bold w-full text-left uppercase
+}
+
+.container {
+  @apply w-full
+}
+
+.elements {
+  @apply flex flex-col
+}