@platformatic/ui-components 0.1.48 → 0.1.50

package/src/components/Sidebar.jsx

@@ -1,153 +1,153 @@
-import React, { useState } from 'react'
-import Icons from './icons'
-import styles from './Sidebar.module.css'
-import ReactTooltip from 'react-tooltip'
-import HorizontalSeparator from './HorizontalSeparator'
-import PlatformaticIcon from './PlatformaticIcon'
-import PropTypes from 'prop-types'
-
-function Sidebar (props) {
-  const {
-    title,
-    defaultSelected,
-    onClickItemSelectedParent,
-    items,
-    onClickAdd,
-    addTitle,
-    onClickSettings
-  } = props
-  const [collapsed, setCollapsed] = useState(false)
-  const [selectedItem, setSelectedItem] = useState(defaultSelected)
-
-  function onClickItemSelected (index) {
-    setSelectedItem(index)
-    onClickItemSelectedParent(index)
-  }
-
-  return (
-    <div className={`${styles.container} ${collapsed && styles.collapsed}`}>
-      {collapsed
-        ? (
-          <>
-            <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
-              <Icons.StaticWorkspaceIcon color='white' />
-            </button>
-            <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
-              {title}
-            </div>
-            <HorizontalSeparator marginBottom={2} marginTop={2} />
-            <div className={styles.bottom}>
-              <button type='button' className={styles.buttonSettings} onClick={onClickSettings}>
-                <Icons.GearIcon color='white' />
-              </button>
-              <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
-                Settings
-              </div>
-            </div>
-          </>
-          )
-        : (
-          <>
-            <button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(true) }}>
-              <PlatformaticIcon
-                iconName='CircleBackIcon'
-                color='white'
-                size='normal'
-              />
-            </button>
-            <div className={styles.title} data-testid='lateral-bar-title'>
-              {title}
-            </div>
-            <div className={styles.items} data-test-id='lateral-bar-items'>
-              {items.map((item, index) => {
-                const isSelected = selectedItem === index
-                return (
-                  <React.Fragment key={index}>
-                    <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(index)}>
-                      {item.iconName && (<PlatformaticIcon
-                        iconName={item.iconName}
-                        color={isSelected ? 'green' : 'white'}
-                        tip={item.title}
-                                         />)}
-                      <div className={`${styles.item} ${isSelected ? styles.itemSelected : ''}`}>
-                        <span className={styles.itemSubTitle}>{item.subTitle}</span>
-                        <span className={styles.itemTitle}>{item.title}</span>
-                      </div>
-                    </button>
-                    <ReactTooltip />
-                  </React.Fragment>
-                )
-              })}
-              {/* <Button label='Add' buttonClass='transparent' icon={faPlus} color='white' size='small' inClick={onClickAdd}/> */}
-              <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} onClick={onClickAdd}>
-                <PlatformaticIcon
-                  iconName='CircleAddIcon'
-                  color='white'
-                  tip={addTitle}
-                />
-                {!collapsed && <span className={styles.item}>{addTitle}</span>}
-              </button>
-            </div>
-            <HorizontalSeparator marginBottom='2' marginTop='2' />
-
-            <div className={styles.bottom}>
-              <button type='button' className={`${styles.buttonSettings} ${styles.buttonSettingsExpanded}`} onClick={onClickSettings}>
-                <Icons.GearIcon color='white' size='small' /> <span className={styles.titleSettings}>Settings</span>
-              </button>
-            </div>
-          </>
-          )}
-    </div>
-  )
-}
-
-Sidebar.propTypes = {
-  /**
-   * title
-   */
-  title: PropTypes.string,
-  /**
-   * defaultSelected
-   */
-  defaultSelected: PropTypes.number,
-  /**
-   * addTitle
-   */
-  addTitle: PropTypes.string,
-  /**
-   * items: array with keys
-   * title: name to display
-   * subtitle: secondary title
-   * icon: what Icon
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.string,
-    subtitle: PropTypes.string,
-    iconName: PropTypes.string
-  })),
-  /**
-   * Apply onClickItemSelectedParent
-   */
-  onClickItemSelectedParent: PropTypes.func,
-  /**
-   * Apply onClickAdd: function called clicking on plus button
-   */
-  onClickAdd: PropTypes.func,
-  /**
-   * Apply onClickSettings: function called clicking on Settings button
-   */
-  onClickSettings: PropTypes.func
-
-}
-
-Sidebar.defaultProps = {
-  title: '',
-  defaultSelected: 0,
-  onClickItemSelectedParent: () => {},
-  items: [],
-  onClickAdd: () => {},
-  addTitle: 'Add',
-  onClickSettings: () => {}
-}
-
-export default Sidebar
+import React, { useState } from 'react'
+import Icons from './icons'
+import styles from './Sidebar.module.css'
+import ReactTooltip from 'react-tooltip'
+import HorizontalSeparator from './HorizontalSeparator'
+import PlatformaticIcon from './PlatformaticIcon'
+import PropTypes from 'prop-types'
+
+function Sidebar (props) {
+  const {
+    title,
+    defaultSelected,
+    onClickItemSelectedParent,
+    items,
+    onClickAdd,
+    addTitle,
+    onClickSettings
+  } = props
+  const [collapsed, setCollapsed] = useState(false)
+  const [selectedItem, setSelectedItem] = useState(defaultSelected)
+
+  function onClickItemSelected (index) {
+    setSelectedItem(index)
+    onClickItemSelectedParent(index)
+  }
+
+  return (
+    <div className={`${styles.container} ${collapsed && styles.collapsed}`}>
+      {collapsed
+        ? (
+          <>
+            <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
+              <Icons.StaticWorkspaceIcon color='white' />
+            </button>
+            <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
+              {title}
+            </div>
+            <HorizontalSeparator marginBottom={2} marginTop={2} />
+            <div className={styles.bottom}>
+              <button type='button' className={styles.buttonSettings} onClick={onClickSettings}>
+                <Icons.GearIcon color='white' />
+              </button>
+              <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
+                Settings
+              </div>
+            </div>
+          </>
+          )
+        : (
+          <>
+            <button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(true) }}>
+              <PlatformaticIcon
+                iconName='CircleBackIcon'
+                color='white'
+                size='normal'
+              />
+            </button>
+            <div className={styles.title} data-testid='lateral-bar-title'>
+              {title}
+            </div>
+            <div className={styles.items} data-test-id='lateral-bar-items'>
+              {items.map((item, index) => {
+                const isSelected = selectedItem === index
+                return (
+                  <React.Fragment key={index}>
+                    <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(index)}>
+                      {item.iconName && (<PlatformaticIcon
+                        iconName={item.iconName}
+                        color={isSelected ? 'green' : 'white'}
+                        tip={item.title}
+                                         />)}
+                      <div className={`${styles.item} ${isSelected ? styles.itemSelected : ''}`}>
+                        <span className={styles.itemSubTitle}>{item.subTitle}</span>
+                        <span className={styles.itemTitle}>{item.title}</span>
+                      </div>
+                    </button>
+                    <ReactTooltip />
+                  </React.Fragment>
+                )
+              })}
+              {/* <Button label='Add' buttonClass='transparent' icon={faPlus} color='white' size='small' inClick={onClickAdd}/> */}
+              <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} onClick={onClickAdd}>
+                <PlatformaticIcon
+                  iconName='CircleAddIcon'
+                  color='white'
+                  tip={addTitle}
+                />
+                {!collapsed && <span className={styles.item}>{addTitle}</span>}
+              </button>
+            </div>
+            <HorizontalSeparator marginBottom='2' marginTop='2' />
+
+            <div className={styles.bottom}>
+              <button type='button' className={`${styles.buttonSettings} ${styles.buttonSettingsExpanded}`} onClick={onClickSettings}>
+                <Icons.GearIcon color='white' size='small' /> <span className={styles.titleSettings}>Settings</span>
+              </button>
+            </div>
+          </>
+          )}
+    </div>
+  )
+}
+
+Sidebar.propTypes = {
+  /**
+   * title
+   */
+  title: PropTypes.string,
+  /**
+   * defaultSelected
+   */
+  defaultSelected: PropTypes.number,
+  /**
+   * addTitle
+   */
+  addTitle: PropTypes.string,
+  /**
+   * items: array with keys
+   * title: name to display
+   * subtitle: secondary title
+   * icon: what Icon
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    iconName: PropTypes.string
+  })),
+  /**
+   * Apply onClickItemSelectedParent
+   */
+  onClickItemSelectedParent: PropTypes.func,
+  /**
+   * Apply onClickAdd: function called clicking on plus button
+   */
+  onClickAdd: PropTypes.func,
+  /**
+   * Apply onClickSettings: function called clicking on Settings button
+   */
+  onClickSettings: PropTypes.func
+
+}
+
+Sidebar.defaultProps = {
+  title: '',
+  defaultSelected: 0,
+  onClickItemSelectedParent: () => {},
+  items: [],
+  onClickAdd: () => {},
+  addTitle: 'Add',
+  onClickSettings: () => {}
+}
+
+export default Sidebar

package/src/components/Sidebar.module.css

@@ -1,66 +1,66 @@
-.container {
-  @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh];
-  transition: max-width 0.2s linear;
-}
-.collapsed {
-  @apply max-w-[96px] text-center;
-}
-.buttonExpand {
-  @apply border rounded-md p-1 border-white;
-}
-.buttonSettings {
-  @apply border rounded-md p-1 border-white;
-}
-.buttonCollapse {
-  @apply absolute border-0 rounded-full right-[-0.875rem]; 
-  /* Override tailwind dist button[type='button]: background: transparent*/
-  @apply bg-main-dark-blue !important;
-  top: 1rem;
-}
-.title {
-  @apply text-white font-bold py-3;
-}
-.titleCollapsed {
-  @apply text-white text-[10px];
-}
-.buttonItem {
-  @apply flex items-center justify-start border-0 w-full;
-}
-.buttonItemCollapsed {
-  @apply w-auto;
-}
-.item {
-  @apply text-white ml-2 grow-0 text-left flex flex-col;
-  width: calc(100% - 28px)
-}
-.itemSubTitle {
-  @apply text-[10px] leading-[10px]; 
-}
-.itemTitle{
-  @apply text-xs text-ellipsis overflow-hidden whitespace-nowrap;
-}
-
-.itemSelected {
-  @apply text-light-green;
-}
-.items {
-  @apply flex flex-col gap-y-3 py-2;
-}
-.bottom {
-  @apply absolute left-0 bottom-[1rem] w-full px-4;
-}
-.titleSettings {
-  @apply text-white font-semibold ml-3;
-}
-.buttonSettingsExpanded {
-  @apply flex items-center justify-center w-full;
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
+.container {
+  @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh];
+  transition: max-width 0.2s linear;
+}
+.collapsed {
+  @apply max-w-[96px] text-center;
+}
+.buttonExpand {
+  @apply border rounded-md p-1 border-white;
+}
+.buttonSettings {
+  @apply border rounded-md p-1 border-white;
+}
+.buttonCollapse {
+  @apply absolute border-0 rounded-full right-[-0.875rem]; 
+  /* Override tailwind dist button[type='button]: background: transparent*/
+  @apply bg-main-dark-blue !important;
+  top: 1rem;
+}
+.title {
+  @apply text-white font-bold py-3;
+}
+.titleCollapsed {
+  @apply text-white text-[10px];
+}
+.buttonItem {
+  @apply flex items-center justify-start border-0 w-full;
+}
+.buttonItemCollapsed {
+  @apply w-auto;
+}
+.item {
+  @apply text-white ml-2 grow-0 text-left flex flex-col;
+  width: calc(100% - 28px)
+}
+.itemSubTitle {
+  @apply text-[10px] leading-[10px]; 
+}
+.itemTitle{
+  @apply text-xs text-ellipsis overflow-hidden whitespace-nowrap;
+}
+
+.itemSelected {
+  @apply text-light-green;
+}
+.items {
+  @apply flex flex-col gap-y-3 py-2;
+}
+.bottom {
+  @apply absolute left-0 bottom-[1rem] w-full px-4;
+}
+.titleSettings {
+  @apply text-white font-semibold ml-3;
+}
+.buttonSettingsExpanded {
+  @apply flex items-center justify-center w-full;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/components/SimpleMetric.jsx

@@ -1,28 +1,28 @@
-'use strict'
-
-import React from 'react'
-// The icon that is in design is not in the free version of fontawesome
-// Temporary using this one
-import ReactTooltip from 'react-tooltip'
-import BorderedBox from './BorderedBox'
-import styles from './SimpleMetric.module.css'
-import MetricValue from './MetricValue'
-import Icons from './icons'
-
-export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, children }) {
-  return (
-    <>
-      <BorderedBox>
-        <div className={styles.header}>
-          <span className={styles.title}>{title}</span>
-          <Icons.CircleExclamationIcon tip={tooltip} />
-        </div>
-        <div>
-          <MetricValue pre={pre} color={color} unit={unit} value={value} />
-          {children}
-        </div>
-      </BorderedBox>
-      <ReactTooltip />
-    </>
-  )
-}
+'use strict'
+
+import React from 'react'
+// The icon that is in design is not in the free version of fontawesome
+// Temporary using this one
+import ReactTooltip from 'react-tooltip'
+import BorderedBox from './BorderedBox'
+import styles from './SimpleMetric.module.css'
+import MetricValue from './MetricValue'
+import Icons from './icons'
+
+export default function SimpleMetric ({ title, pre, color, unit, value, tooltip, children }) {
+  return (
+    <>
+      <BorderedBox>
+        <div className={styles.header}>
+          <span className={styles.title}>{title}</span>
+          <Icons.CircleExclamationIcon 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-base font-semibold;
+.header {
+  @apply flex justify-between items-center font-bold;
+}
+
+.title {
+  @apply text-base font-semibold;
 }

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