@platformatic/ui-components 0.1.49 → 0.1.50

package/src/components/TabbedWindow.module.css

@@ -1,17 +1,17 @@
-.tabbed-container {
-  @apply bg-main-dark-blue;
-}
-
-.tabs-header {
-  @apply flex justify-start text-white uppercase hover:cursor-pointer mb-4 tracking-super-widest h-[2rem];
-}
-.tab {
-  @apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0;  
-}
-.selected-tab {
-  @apply underline text-main-green underline-offset-8 font-bold;
-}
-
-.tabs-content {
-  @apply h-screen
+.tabbed-container {
+  @apply bg-main-dark-blue;
+}
+
+.tabs-header {
+  @apply flex justify-start text-white uppercase hover:cursor-pointer mb-4 tracking-super-widest h-[2rem];
+}
+.tab {
+  @apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0;  
+}
+.selected-tab {
+  @apply underline text-main-green underline-offset-8 font-bold;
+}
+
+.tabs-content {
+  @apply h-screen
 }

package/src/components/TextWithLabel.jsx

@@ -1,11 +1,11 @@
-import React from 'react'
-import styles from './TextWithLabel.module.css'
-export default function TextWithLabel ({ label, text, children }) {
-  return (
-    <div className={styles.container}>
-      <span className={styles.label}>{label}:</span>
-      {text && <span className={styles.text}>{text}</span>}
-      {children && <span>{children}</span>}
-    </div>
-  )
-}
+import React from 'react'
+import styles from './TextWithLabel.module.css'
+export default function TextWithLabel ({ label, text, children }) {
+  return (
+    <div className={styles.container}>
+      <span className={styles.label}>{label}:</span>
+      {text && <span className={styles.text}>{text}</span>}
+      {children && <span>{children}</span>}
+    </div>
+  )
+}

package/src/components/TextWithLabel.module.css

@@ -1,9 +1,9 @@
-.container {
-  @apply text-white
-}
-.label {
-  @apply font-thin mr-2;
-}
-.text {
-  @apply font-semibold;
+.container {
+  @apply text-white
+}
+.label {
+  @apply font-thin mr-2;
+}
+.text {
+  @apply font-semibold;
 }

package/src/components/Versions.jsx

@@ -1,9 +1,9 @@
-'use strict'
-import React from 'react'
-import BorderedBox from './BorderedBox'
-
-export default function Versions () {
-  return (
-    <BorderedBox color='green'>Versions</BorderedBox>
-  )
-}
+'use strict'
+import React from 'react'
+import BorderedBox from './BorderedBox'
+
+export default function Versions () {
+  return (
+    <BorderedBox color='green'>Versions</BorderedBox>
+  )
+}

package/src/components/VerticalSeparator.jsx

@@ -1,5 +1,5 @@
-'use strict'
-import React from 'react'
-export default function VerticalSeparator () {
-  return <span className='text-dark-green m-3'> | </span>
-}
+'use strict'
+import React from 'react'
+export default function VerticalSeparator () {
+  return <span className='text-dark-green m-3'> | </span>
+}

package/src/components/forms/Field.jsx

@@ -1,20 +1,53 @@
-import React from 'react'
-import styles from './Field.module.css'
-import HorizontalSeparator from '../HorizontalSeparator'
-
-export default function Field ({ title, helper, children, disabled }) {
-  let className = `${styles.container}`
-  if (disabled) className += ` ${styles.disabled}`
-  return (
-    <>
-      <div className={className}>
-        <p className={styles.title}>{title}</p>
-        <p className={styles.helper}>{helper}</p>
-        <div className={styles.content}>
-          {children}
-        </div>
-      </div>
-      <HorizontalSeparator color='main-dark-green' opacity={20} marginBottom={10} marginTop={10} />
-    </>
-  )
-}
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Field.module.css'
+
+function Field ({ title, titleColor, helper, children, disabled }) {
+  let className = `${styles.container}`
+  if (disabled) className += ` ${styles.disabled}`
+  let classnameTitle = `${styles.title} `
+  classnameTitle += styles[`text-color-${titleColor}`]
+
+  return (
+    <div className={className}>
+      <p className={classnameTitle}>{title}</p>
+      <p className={styles.helper}>{helper}</p>
+      <div className={styles.content}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+Field.propTypes = {
+  /**
+   * title
+   */
+  title: PropTypes.string,
+  /**
+   * titleColor
+   */
+  titleColor: PropTypes.oneOf(['error-red', 'main-dark-blue']),
+  /**
+   * helper
+   */
+  helper: PropTypes.string,
+  /**
+   * color of border
+   */
+  children: PropTypes.node,
+  /**
+   * disabled
+   */
+  disabled: PropTypes.bool
+}
+
+Field.defaultProps = {
+  title: '',
+  titleColor: 'main-dark-blue',
+  helper: '',
+  children: null,
+  disabled: false
+}
+
+export default Field

package/src/components/forms/Field.module.css

@@ -1,18 +1,24 @@
-.container {
-  @apply flex flex-col;
-}
-.title{
-  @apply text-xl font-semibold text-main-dark-blue;
-}
-.helper{
-  @apply text-sm text-main-dark-blue pb-4;
-}
-.content {
-  @apply flex gap-x-1 w-full;
-}
-.content button {
-  @apply shrink-0;
-}
-.disabled {
-  @apply opacity-20;
+.container {
+  @apply flex flex-col;
+}
+.title {
+  @apply text-xl font-semibold;
+}
+.text-color-main-dark-blue {
+  @apply text-main-dark-blue;
+}
+.text-color-error-red {
+  @apply text-error-red;
+}
+.helper{
+  @apply text-sm pb-4;
+}
+.content {
+  @apply flex gap-x-1 w-full;
+}
+.content button {
+  @apply shrink-0;
+}
+.disabled {
+  @apply opacity-20;
 }

package/src/components/forms/Input.jsx

@@ -1,80 +1,80 @@
-'use strict'
-import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './Input.module.css'
-import commonStyles from '../Common.module.css'
-import PlatformaticIcon from '../PlatformaticIcon'
-
-function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, beforeIcon, afterIcon }) {
-  let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles.padded
-  const showError = errorMessage.length > 0
-  if (showError) className += ' ' + commonStyles['bordered--error-red']
-
-  return (
-    <div className={styles.container}>
-      <div className={className}>
-        {beforeIcon && <PlatformaticIcon iconName={beforeIcon.iconName} classes={styles.beforeInputIcon} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} />}
-        <input type='text' name={name} value={value} placeholder={placeholder} className={styles.fullWidth} onChange={onChange} disabled={disabled} />
-        {afterIcon && <PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={null} />}
-      </div>
-      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
-    </div>
-  )
-}
-
-Input.propTypes = {
-  /**
-   * placeholder
-   */
-  placeholder: PropTypes.string,
-  /**
-   * value
-   */
-  value: PropTypes.string,
-  /**
-   * name
-   */
-  name: PropTypes.string,
-  /**
-   * color of border
-   */
-  borderColor: PropTypes.oneOf(['main-green', 'main-dark-blue']),
-  /**
-   * onChange
-   */
-  onChange: PropTypes.func,
-  /**
-   * Disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * beforeIcon: PlatformaticIcon props
-   */
-  beforeIcon: PropTypes.shape({
-    iconName: PropTypes.string,
-    color: PropTypes.string,
-    onClick: PropTypes.func
-  }),
-  /**
-   * afterIcon: PlatformaticIcon props
-   */
-  afterIcon: PropTypes.shape({
-    iconName: PropTypes.string,
-    color: PropTypes.string,
-    onClick: PropTypes.func
-  })
-}
-
-Input.defaultProps = {
-  placeholder: '',
-  value: '',
-  name: '',
-  borderColor: 'main-green',
-  errorMessage: '',
-  onChange: () => {},
-  disabled: false,
-  beforeIcon: null,
-  afterIcon: null
-}
-
-export default Input
+'use strict'
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Input.module.css'
+import commonStyles from '../Common.module.css'
+import PlatformaticIcon from '../PlatformaticIcon'
+
+function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, beforeIcon, afterIcon }) {
+  let className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles.padded
+  const showError = errorMessage.length > 0
+  if (showError) className += ' ' + commonStyles['bordered--error-red']
+
+  return (
+    <div className={styles.container}>
+      <div className={className}>
+        {beforeIcon && <PlatformaticIcon iconName={beforeIcon.iconName} classes={styles.beforeInputIcon} size='small' data-testid='before-icon' color={beforeIcon.color} onClick={() => beforeIcon.onClick()} />}
+        <input type='text' name={name} value={value} placeholder={placeholder} className={styles.fullWidth} onChange={onChange} disabled={disabled} />
+        {afterIcon && <PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={null} />}
+      </div>
+      {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+    </div>
+  )
+}
+
+Input.propTypes = {
+  /**
+   * placeholder
+   */
+  placeholder: PropTypes.string,
+  /**
+   * value
+   */
+  value: PropTypes.string,
+  /**
+   * name
+   */
+  name: PropTypes.string,
+  /**
+   * color of border
+   */
+  borderColor: PropTypes.oneOf(['main-green', 'main-dark-blue']),
+  /**
+   * onChange
+   */
+  onChange: PropTypes.func,
+  /**
+   * Disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * beforeIcon: PlatformaticIcon props
+   */
+  beforeIcon: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string,
+    onClick: PropTypes.func
+  }),
+  /**
+   * afterIcon: PlatformaticIcon props
+   */
+  afterIcon: PropTypes.shape({
+    iconName: PropTypes.string,
+    color: PropTypes.string,
+    onClick: PropTypes.func
+  })
+}
+
+Input.defaultProps = {
+  placeholder: '',
+  value: '',
+  name: '',
+  borderColor: 'main-green',
+  errorMessage: '',
+  onChange: () => {},
+  disabled: false,
+  beforeIcon: null,
+  afterIcon: null
+}
+
+export default Input

package/src/components/forms/Input.module.css

@@ -1,28 +1,28 @@
-.container {
-  @apply flex flex-col w-full relative;
-}
-.inputContainer {
-  @apply flex h-10 border border-solid box-border rounded-md;
-}
-.fullWidth {
-  @apply w-full;
-}
-.input {
-  @apply focus:outline-none focus-within:outline-none focus-visible:outline-none;
-}
-.beforeInputIcon {
-  @apply ml-1 mr-3;
-}
-.color-main-dark-blue {
-  @apply text-main-dark-blue;
-}
-.color-error-red{
-  @apply text-error-red;
-}
-.color-white{
-  @apply text-white;
-}
-
-[type='text']:focus {
-  outline: none;
-}
+.container {
+  @apply flex flex-col w-full relative;
+}
+.inputContainer {
+  @apply flex h-10 border border-solid box-border rounded-md;
+}
+.fullWidth {
+  @apply w-full;
+}
+.input {
+  @apply focus:outline-none focus-within:outline-none focus-visible:outline-none;
+}
+.beforeInputIcon {
+  @apply ml-1 mr-3;
+}
+.color-main-dark-blue {
+  @apply text-main-dark-blue;
+}
+.color-error-red{
+  @apply text-error-red;
+}
+.color-white{
+  @apply text-white;
+}
+
+[type='text']:focus {
+  outline: none;
+}

package/src/components/forms/Preview.jsx

@@ -1,77 +1,75 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import styles from './Preview.module.css'
-import HorizontalSeparator from '../HorizontalSeparator'
-import PlatformaticIcon from '../PlatformaticIcon'
-
-function renderLink (value) {
-  return (<a className={styles.link} href={value} target='_blank' rel='noreferrer'>{value}</a>)
-}
-
-function renderParagraph (value, afterValueIcon, afterValueIconColor, onClickAfterValueIcon) {
-  return (
-    <>
-      <p className={styles.value}>
-        {value}
-        {afterValueIcon && (<PlatformaticIcon iconName={afterValueIcon} color={afterValueIconColor} classes={styles.afterIcon} onClick={() => onClickAfterValueIcon} />)}
-      </p>
-    </>
-  )
-}
-function Preview ({ title, value, isLink, children, afterValueIcon, afterValueIconColor, onClickAfterValueIcon }) {
-  return (
-    <>
-      <div className={styles.container}>
-        <p className={styles.title}>{title}</p>
-        {isLink ? renderLink(value) : renderParagraph(value, afterValueIcon, afterValueIconColor, onClickAfterValueIcon)}
-      </div>
-      {children}
-      <HorizontalSeparator color='main-dark-green' opacity={20} marginBottom={10} marginTop={10} />
-    </>
-  )
-}
-
-Preview.propTypes = {
-  /**
-   * title
-   */
-  title: PropTypes.string,
-  /**
-   * value
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number
-  ]),
-  /**
-   * isLink
-   */
-  isLink: PropTypes.bool,
-  /**
-   * color of border
-   */
-  children: PropTypes.node,
-  /**
-   * afterValueIcon
-   */
-  afterValueIcon: PropTypes.string,
-  /**
-   * afterValueIconColor
-   */
-  afterValueIconColor: PropTypes.oneOf(['error-red', 'main-dark-blue', 'white']),
-  /**
-   * onClickAfterValueIcon
-   */
-  onClickAfterValueIcon: PropTypes.func
-}
-
-Preview.defaultProps = {
-  title: '',
-  value: '',
-  isLink: false,
-  afterValueIconColor: 'main-dark-blue',
-  afterValueIcon: null,
-  onClickAfterValueIcon: () => {}
-}
-
-export default Preview
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './Preview.module.css'
+import PlatformaticIcon from '../PlatformaticIcon'
+
+function renderLink (value) {
+  return (<a className={styles.link} href={value} target='_blank' rel='noreferrer'>{value}</a>)
+}
+
+function renderParagraph (value, afterValueIcon, afterValueIconColor, onClickAfterValueIcon) {
+  return (
+    <>
+      <p className={styles.value}>
+        {value}
+        {afterValueIcon && (<PlatformaticIcon iconName={afterValueIcon} color={afterValueIconColor} classes={styles.afterIcon} onClick={() => onClickAfterValueIcon} />)}
+      </p>
+    </>
+  )
+}
+function Preview ({ title, value, isLink, children, afterValueIcon, afterValueIconColor, onClickAfterValueIcon }) {
+  return (
+    <>
+      <div className={styles.container}>
+        <p className={styles.title}>{title}</p>
+        {isLink ? renderLink(value) : renderParagraph(value, afterValueIcon, afterValueIconColor, onClickAfterValueIcon)}
+      </div>
+      {children}
+    </>
+  )
+}
+
+Preview.propTypes = {
+  /**
+   * title
+   */
+  title: PropTypes.string,
+  /**
+   * value
+   */
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  /**
+   * isLink
+   */
+  isLink: PropTypes.bool,
+  /**
+   * color of border
+   */
+  children: PropTypes.node,
+  /**
+   * afterValueIcon
+   */
+  afterValueIcon: PropTypes.string,
+  /**
+   * afterValueIconColor
+   */
+  afterValueIconColor: PropTypes.oneOf(['error-red', 'main-dark-blue', 'white']),
+  /**
+   * onClickAfterValueIcon
+   */
+  onClickAfterValueIcon: PropTypes.func
+}
+
+Preview.defaultProps = {
+  title: '',
+  value: '',
+  isLink: false,
+  afterValueIconColor: 'main-dark-blue',
+  afterValueIcon: null,
+  onClickAfterValueIcon: () => {}
+}
+
+export default Preview

package/src/components/forms/Preview.module.css

@@ -1,15 +1,15 @@
-.container {
-  @apply flex flex-col
-}
-.title {
-  @apply text-sm text-main-dark-blue pb-1;
-}
-.value {
-  @apply text-xl font-semibold text-main-dark-blue inline-flex;
-}
-.link {
-  @apply font-semibold;
-}
-.afterIcon {
-  @apply ml-3;
+.container {
+  @apply flex flex-col
+}
+.title {
+  @apply text-sm text-main-dark-blue pb-1;
+}
+.value {
+  @apply text-xl font-semibold text-main-dark-blue inline-flex;
+}
+.link {
+  @apply font-semibold;
+}
+.afterIcon {
+  @apply ml-3;
 }

package/src/components/forms/ToggleSwitch.jsx

@@ -1,18 +1,18 @@
-'use strict'
-import React from 'react'
-import styles from './ToggleSwitch.module.css'
-import commonStyles from '../Common.module.css'
-export default function ToggleSwitch ({ name, label, errorMessage = '', onChange = () => {} }) {
-  return (
-    <>
-      <div className={styles.container}>
-        <label className={styles.switch}>
-          <input type='checkbox' name={name} onChange={onChange} />
-          <span className={`${styles.slider} ${styles.round}`} />
-        </label>
-        <span className={styles.label}>{label}</span>
-      </div>
-      {errorMessage.length > 0 && <span className={commonStyles['error-message']}>{errorMessage}</span>}
-    </>
-  )
-}
+'use strict'
+import React from 'react'
+import styles from './ToggleSwitch.module.css'
+import commonStyles from '../Common.module.css'
+export default function ToggleSwitch ({ name, label, errorMessage = '', onChange = () => {} }) {
+  return (
+    <>
+      <div className={styles.container}>
+        <label className={styles.switch}>
+          <input type='checkbox' name={name} onChange={onChange} />
+          <span className={`${styles.slider} ${styles.round}`} />
+        </label>
+        <span className={styles.label}>{label}</span>
+      </div>
+      {errorMessage.length > 0 && <span className={commonStyles['error-message']}>{errorMessage}</span>}
+    </>
+  )
+}