@platformatic/ui-components 0.1.32 → 0.1.33

package/src/components/SearchBar.jsx

@@ -1,63 +1,63 @@
-'use strict'
-import React, { useRef, useState } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSearch } from '@fortawesome/free-solid-svg-icons'
-import styles from './SearchBar.module.css'
-import commonStyles from './Common.module.css'
-export default function SearchBar (props) {
-  const inputRef = useRef()
-  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
-  const [isOnFocus, setIsOnFocus] = useState(false)
-  const { onSubmit, onChange, title } = props
-
-  function handleSearch () {
-    if (onSubmit) {
-      const value = inputRef.current.value
-      return onSubmit(value)
-    }
-  }
-
-  function handleChange () {
-    if (onChange) {
-      const value = inputRef.current.value
-      return onChange(value)
-    }
-  }
-
-  function onFocus () {
-    if (!isOnFocus) {
-      setIsOnFocus(true)
-      setWrapperClassName(onFocusClassName())
-    }
-  }
-
-  function onBlur () {
-    setIsOnFocus(false)
-    setWrapperClassName(normalClassName())
-  }
-
-  function onFocusClassName () {
-    return `${styles.input} ${commonStyles.padded} ${styles.onFocus}`
-  }
-
-  function normalClassName () {
-    return `${styles.input} ${commonStyles.padded} ${styles.onBlur}`
-  }
-
-  function iconClassName () {
-    return isOnFocus ? 'text-main-green' : 'text-white'
-  }
-
-  return (
-    <div>
-      {title && <h1 className={styles.title}>{title}</h1>}
-      <div className={wrapperClassName}>
-        <input type='text' placeholder='Search' className='grow' ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
-        <button onClick={handleSearch} onFocus={onFocus} onBlur={onBlur}>
-          <FontAwesomeIcon className={iconClassName()} icon={faSearch} />
-        </button>
-      </div>
-    </div>
-
-  )
-}
+'use strict'
+import React, { useRef, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
+import styles from './SearchBar.module.css'
+import commonStyles from './Common.module.css'
+export default function SearchBar (props) {
+  const inputRef = useRef()
+  const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
+  const [isOnFocus, setIsOnFocus] = useState(false)
+  const { onSubmit, onChange, title } = props
+
+  function handleSearch () {
+    if (onSubmit) {
+      const value = inputRef.current.value
+      return onSubmit(value)
+    }
+  }
+
+  function handleChange () {
+    if (onChange) {
+      const value = inputRef.current.value
+      return onChange(value)
+    }
+  }
+
+  function onFocus () {
+    if (!isOnFocus) {
+      setIsOnFocus(true)
+      setWrapperClassName(onFocusClassName())
+    }
+  }
+
+  function onBlur () {
+    setIsOnFocus(false)
+    setWrapperClassName(normalClassName())
+  }
+
+  function onFocusClassName () {
+    return `${styles.input} ${commonStyles.padded} ${styles.onFocus}`
+  }
+
+  function normalClassName () {
+    return `${styles.input} ${commonStyles.padded} ${styles.onBlur}`
+  }
+
+  function iconClassName () {
+    return isOnFocus ? 'text-main-green' : 'text-white'
+  }
+
+  return (
+    <div>
+      {title && <h1 className={styles.title}>{title}</h1>}
+      <div className={wrapperClassName}>
+        <input type='text' placeholder='Search' className='grow' ref={inputRef} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} />
+        <button onClick={handleSearch} onFocus={onFocus} onBlur={onBlur}>
+          <FontAwesomeIcon className={iconClassName()} icon={faSearch} />
+        </button>
+      </div>
+    </div>
+
+  )
+}

package/src/components/SearchBar.module.css

@@ -1,21 +1,21 @@
-.input {
-  @apply flex justify-between w-full h-10 text-white border border-solid box-border rounded-md;
-}
-.onFocus {
-  @apply border-main-green;
-}
-.onBlur {
-  @apply border-white;
-}
-.fillGreen {
-  @apply fill-main-green;
-}
-.fillWhite {
-  @apply fill-white;
-}
-.input > input:focus {
-  @apply outline-none;
-}
-.title {
-  @apply font-semibold text-white text-3xl pb-4;
+.input {
+  @apply flex justify-between w-full h-10 text-white border border-solid box-border rounded-md;
+}
+.onFocus {
+  @apply border-main-green;
+}
+.onBlur {
+  @apply border-white;
+}
+.fillGreen {
+  @apply fill-main-green;
+}
+.fillWhite {
+  @apply fill-white;
+}
+.input > input:focus {
+  @apply outline-none;
+}
+.title {
+  @apply font-semibold text-white text-3xl pb-4;
 }

package/src/components/SimpleMetric.jsx

@@ -1,32 +1,32 @@
-'use strict'
-
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-// The icon that is in design is not in the free version of fontawesome
-// Temporary using this one
-import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons'
-import ReactTooltip from 'react-tooltip'
-import BorderedBox from './BorderedBox'
-import styles from './SimpleMetric.module.css'
-import MetricValue from './MetricValue'
-
-export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, children }) {
-  return (
-    <>
-      <BorderedBox>
-        <div className={styles.header}>
-          <span className={styles.title}>{title}</span>
-          <FontAwesomeIcon
-            icon={faCircleExclamation}
-            data-tip={tooltip}
-          />
-        </div>
-        <div>
-          <MetricValue pre={pre} color={color} unit={unit} value={value} />
-          {children}
-        </div>
-      </BorderedBox>
-      <ReactTooltip />
-    </>
-  )
-}
+'use strict'
+
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+// The icon that is in design is not in the free version of fontawesome
+// Temporary using this one
+import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons'
+import ReactTooltip from 'react-tooltip'
+import BorderedBox from './BorderedBox'
+import styles from './SimpleMetric.module.css'
+import MetricValue from './MetricValue'
+
+export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, children }) {
+  return (
+    <>
+      <BorderedBox>
+        <div className={styles.header}>
+          <span className={styles.title}>{title}</span>
+          <FontAwesomeIcon
+            icon={faCircleExclamation}
+            data-tip={tooltip}
+          />
+        </div>
+        <div>
+          <MetricValue pre={pre} color={color} unit={unit} value={value} />
+          {children}
+        </div>
+      </BorderedBox>
+      <ReactTooltip />
+    </>
+  )
+}

package/src/components/SimpleMetric.module.css

@@ -1,7 +1,7 @@
-.header {
-  @apply flex justify-between items-center font-bold;
-}
-
-.title {
-  @apply text-xl;
+.header {
+  @apply flex justify-between items-center font-bold;
+}
+
+.title {
+  @apply text-xl;
 }

package/src/components/Status.jsx

@@ -1,26 +1,26 @@
-'use strict'
-import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCircle } from '@fortawesome/free-solid-svg-icons'
-export default function Status (props) {
-  const { color, status } = props
-
-  function getColorClass (color) {
-    switch (color) {
-      case 'green':
-        return 'text-main-green'
-      case 'red':
-        return 'text-error-red'
-      case 'white':
-      default:
-        return 'text-white'
-    }
-  }
-  const colorClass = getColorClass(color)
-  return (
-    <div className={colorClass}>
-      <FontAwesomeIcon icon={faCircle} size='2xs' className={`text-${colorClass} mr-2`} />
-      {status}
-    </div>
-  )
-}
+'use strict'
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCircle } from '@fortawesome/free-solid-svg-icons'
+export default function Status (props) {
+  const { color, status } = props
+
+  function getColorClass (color) {
+    switch (color) {
+      case 'green':
+        return 'text-main-green'
+      case 'red':
+        return 'text-error-red'
+      case 'white':
+      default:
+        return 'text-white'
+    }
+  }
+  const colorClass = getColorClass(color)
+  return (
+    <div className={colorClass}>
+      <FontAwesomeIcon icon={faCircle} size='2xs' className={`text-${colorClass} mr-2`} />
+      {status}
+    </div>
+  )
+}

package/src/components/TabbedWindow.jsx

@@ -1,34 +1,34 @@
-'use strict'
-import React, { useEffect, useState } from 'react'
-import styles from './TabbedWindow.module.css'
-
-export default function TabbedWindow (props) {
-  const [selected, setSelected] = useState(0)
-  const { tabs } = props
-  const headers = []
-  const components = []
-  tabs.forEach((tab) => {
-    headers.push(tab.label)
-    components.push(tab.component)
-  })
-  let currentComponent = components[selected]
-
-  useEffect(() => {
-    currentComponent = components[selected]
-  }, [selected])
-
-  return (
-    <div className={styles['tabbed-container']}>
-      <div className={styles['tabs-header']}>
-        {headers.map((header, index) => {
-          return (
-            <span onClick={() => setSelected(index)} key={index} className={`${styles.tab} ${selected === index ? styles['selected-tab'] : ''}`}>
-              {header}
-            </span>
-          )
-        })}
-      </div>
-      <div className={styles['tabs-content']}>{currentComponent()}</div>
-    </div>
-  )
-}
+'use strict'
+import React, { useEffect, useState } from 'react'
+import styles from './TabbedWindow.module.css'
+
+export default function TabbedWindow (props) {
+  const [selected, setSelected] = useState(0)
+  const { tabs } = props
+  const headers = []
+  const components = []
+  tabs.forEach((tab) => {
+    headers.push(tab.label)
+    components.push(tab.component)
+  })
+  let currentComponent = components[selected]
+
+  useEffect(() => {
+    currentComponent = components[selected]
+  }, [selected])
+
+  return (
+    <div className={styles['tabbed-container']}>
+      <div className={styles['tabs-header']}>
+        {headers.map((header, index) => {
+          return (
+            <span onClick={() => setSelected(index)} key={index} className={`${styles.tab} ${selected === index ? styles['selected-tab'] : ''}`}>
+              {header}
+            </span>
+          )
+        })}
+      </div>
+      <div className={styles['tabs-content']}>{currentComponent()}</div>
+    </div>
+  )
+}

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-[.25rem] 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-[.25rem] 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>
+}