@platformatic/ui-components 0.1.56 → 0.1.58

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.1.56",
+  "version": "0.1.58",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/ListElement.jsx

@@ -1,23 +1,56 @@
 import React from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCircleCheck } from '@fortawesome/free-regular-svg-icons'
+import PropTypes from 'prop-types'
+import PlatformaticIcon from './PlatformaticIcon'
 import styles from './ListElement.module.css'
-export default function List ({ title, detail }) {
+
+function List ({ title, detail, marginSize, titleAspect }) {
+  let className = `${styles.container} `
+  className += styles[`margin-${marginSize}`]
+
+  let classNameTitle = `${styles.title} `
+  classNameTitle += styles[`${titleAspect}`]
+
   return (
-    <div className={styles.container}>
-      <div className={styles.iconCol}>
-        <div data-testid='list-element-title-icon' className={styles.icon}>
-          <FontAwesomeIcon icon={faCircleCheck} />
-        </div>
-      </div>
-      <div className={styles.textCol}>
-        <div className={styles.title} data-testid='list-element-title'>
+    <div className={className}>
+      <div className={styles.row}>
+        <PlatformaticIcon iconName='CircleCheckMarkIcon' color='green' data-testid='list-element-title-icon' onClick={null} />
+        <div className={classNameTitle} data-testid='list-element-title'>
           {title}
         </div>
-        <div data-test-id='list-element-detail'>
-          {detail}
-        </div>
       </div>
+      {detail &&
+        (
+          <div className={styles.textCol} data-test-id='list-element-detail'>
+            {detail}
+          </div>
+        )}
     </div>
   )
 }
+List.propTypes = {
+  /**
+   * title
+   */
+  title: PropTypes.string,
+  /**
+   * detail
+   */
+  detail: PropTypes.string,
+  /**
+   * marginSize
+   */
+  marginSize: PropTypes.oneOf(['small', 'medium']),
+  /**
+   * titleAspect
+   */
+  titleAspect: PropTypes.oneOf(['boldAndGreen', 'lightAndWhite'])
+}
+
+List.defaultProps = {
+  title: '',
+  detail: '',
+  marginSize: 'medium',
+  titleAspect: 'boldAndGreen'
+}
+
+export default List

package/src/components/ListElement.module.css

@@ -1,21 +1,26 @@
 .container {
-  @apply flex flex-row my-4
+  @apply flex flex-col my-4
 }
-
-.iconCol {
-  @apply flex flex-col w-6
+.margin-medium {
+  @apply my-4
 }
-
-.icon {
-  @apply text-light-green
+.margin-small {
+  @apply my-2
 }
-
 .title {
-  @apply flex text-light-green font-bold w-full
+  @apply w-full;
+}
+.boldAndGreen {
+  @apply text-light-green font-bold;
+}
+.lightAndWhite {
+  @apply text-white font-light;
+}
+.row {
+  @apply flex gap-x-2 items-center w-full;
 }
-
 .textCol {
-  @apply flex flex-col text-white text-justify w-full
+  @apply flex flex-col text-white text-justify w-full ml-6;
 }
 
 .detailSpace {

package/src/components/Sidebar.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Icons from './icons'
 import styles from './Sidebar.module.css'
 import ReactTooltip from 'react-tooltip'
@@ -17,13 +17,17 @@ function Sidebar (props) {
     onClickSettings
   } = props
   const [collapsed, setCollapsed] = useState(false)
-  const [selectedItem, setSelectedItem] = useState(defaultSelected)
+  const [selectedItem, setSelectedItem] = useState(null)
 
-  function onClickItemSelected (index) {
-    setSelectedItem(index)
-    onClickItemSelectedParent(index)
+  function onClickItemSelected (item) {
+    setSelectedItem(item.id)
+    onClickItemSelectedParent(item.id)
   }
 
+  useEffect(() => {
+    setSelectedItem(defaultSelected)
+  }, [defaultSelected])
+
   return (
     <div className={`${styles.container} ${collapsed && styles.collapsed}`}>
       {collapsed
@@ -63,11 +67,11 @@ function Sidebar (props) {
               {title}
             </div>
             <div className={styles.items} data-test-id='lateral-bar-items'>
-              {items.map((item, index) => {
-                const isSelected = selectedItem === index
+              {items.map(item => {
+                const isSelected = selectedItem === item.id
                 return (
-                  <React.Fragment key={index}>
-                    <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(index)}>
+                  <React.Fragment key={item.id}>
+                    <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(item)}>
                       {item.iconName && (<PlatformaticIcon
                         iconName={item.iconName}
                         color={isSelected ? 'green' : 'white'}
@@ -114,18 +118,20 @@ Sidebar.propTypes = {
   /**
    * defaultSelected
    */
-  defaultSelected: PropTypes.number,
+  defaultSelected: PropTypes.string,
   /**
    * addTitle
    */
   addTitle: PropTypes.string,
   /**
    * items: array with keys
+   * id: id of the worspacedSeleted
    * title: name to display
    * subtitle: secondary title
    * icon: what Icon
    */
   items: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
     title: PropTypes.string,
     subtitle: PropTypes.string,
     iconName: PropTypes.string
@@ -147,7 +153,7 @@ Sidebar.propTypes = {
 
 Sidebar.defaultProps = {
   title: '',
-  defaultSelected: 0,
+  defaultSelected: null,
   onClickItemSelectedParent: () => {},
   items: [],
   onClickAdd: () => {},

package/src/stories/List.stories.jsx

@@ -15,7 +15,7 @@ ListWithNoElements.args = {
 
 const TemplateWithElements = (args) => (
   <List {...args}>
-    <ListElement title='List Element 1' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
+    <ListElement title='List Element 1' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' titleAspect='boldAndGreen' />
     <ListElement title='List Element 2' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
   </List>
 )
@@ -27,3 +27,15 @@ ListWithElements.args = {
 
 export const ListWithElementsNoTitle = TemplateWithElements.bind({})
 ListWithElementsNoTitle.args = {}
+
+const TemplateWithElementsVariants = (args) => (
+  <List {...args}>
+    <ListElement title='List Element 1' titleAspect='boldAndGreen' marginSize='small' />
+    <ListElement title='List Element 2' titleAspect='lightAndWhite' marginSize='small' />
+  </List>
+)
+
+export const ListWithElementsVariants = TemplateWithElementsVariants.bind({})
+ListWithElementsVariants.args = {
+  title: 'List Title'
+}

package/src/stories/Sidebar.stories.jsx

@@ -36,9 +36,9 @@ EmptySidebar.args = {
 
 const FullSidebarTemplate = (args) => {
   const [items, setItems] = useState([
-    { iconName: 'WorkspaceStaticIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
-    { title: 'Title number 2', subTitle: 'Subtitle 2' },
-    { title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'WorkspaceDynamicIcon' }
+    { id: '1', iconName: 'WorkspaceStaticIcon', subTitle: 'Subtitle', title: 'a very very very very very long title 1' },
+    { id: '2', title: 'Title number 2', subTitle: 'Subtitle 2' },
+    { id: '3', title: 'Another Title', subTitle: 'Subtitle 3', iconName: 'WorkspaceDynamicIcon' }
   ])
   function onClickAdd () {
     const tmpItem = items.map(item => item)
@@ -59,3 +59,18 @@ FullSidebar.args = {
   onClickItemSelected: (index) => alert('selected: ' + index),
   onClickSettings: () => alert('settings')
 }
+
+export const AlreadySelected = Template.bind({})
+
+AlreadySelected.args = {
+  title: 'Sidebar bar Full',
+  addTitle: 'Create',
+  defaultSelected: '3',
+  items: [
+    { id: '1', iconName: 'WorkspaceStaticIcon', title: 'Static 1', subTitle: 'Subtitle 1' },
+    { id: '2', iconName: 'WorkspaceStaticIcon', title: 'Static 2', subTitle: 'Subtitle 2' },
+    { id: '3', iconName: 'WorkspaceDynamicIcon', title: 'Dynamic', subTitle: 'Subtitle 3' }
+  ],
+  onClickItemSelected: (index) => alert('selected: ' + index),
+  onClickSettings: () => alert('settings')
+}