@platformatic/ui-components 0.1.35 → 0.1.36

package/dist/main.css

@@ -586,6 +586,10 @@ video {
   flex-grow: 1;
 }
 
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .flex-col {
   flex-direction: column;
 }

package/index.js

@@ -13,6 +13,7 @@ import GHLoginButton from './src/components/GHLoginButton'
 import HorizontalSeparator from './src/components/HorizontalSeparator'
 import Icons from './src/components/icons'
 import Input from './src/components/Input'
+import Sidebar from './src/components/Sidebar'
 import Layout from './src/components/layouts/Layout'
 import List from './src/components/List'
 import ListElement from './src/components/ListElement'
@@ -43,6 +44,7 @@ export {
   GHLoginButton,
   Icons,
   Input,
+  Sidebar,
   Layout,
   List,
   ListElement,

package/package.json

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

package/src/components/BorderedText.module.css

@@ -1,3 +1,3 @@
 .bordered {
-  @apply border border-solid rounded-md px-2 py-1 border-white tracking-[.25rem] text-white;
+  @apply border border-solid rounded-md px-2 py-1 border-white tracking-super-widest text-white;
 }

package/src/components/DropDown.jsx

@@ -3,9 +3,9 @@
 import React, { useState } from 'react'
 import styles from './DropDown.module.css'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faChevronLeft, faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import { faChevronRight, faChevronDown } from '@fortawesome/free-solid-svg-icons'
 export default function DropDown (props) {
-  const { header, items, align = 'left' } = props
+  const { pictureUrl, header, items, align = 'left' } = props
   const [open, setOpen] = useState(false)
   function handleOpen () {
     setOpen(!open)
@@ -13,8 +13,9 @@ export default function DropDown (props) {
   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={faChevronLeft} />}
+        {!open && <FontAwesomeIcon className={styles.arrow} icon={faChevronRight} />}
         {open && <FontAwesomeIcon className={styles.arrow} icon={faChevronDown} />}
       </span>
       {open && (

package/src/components/DropDown.module.css

@@ -13,13 +13,16 @@
   @apply absolute top-[50%] right-0 translate-y-[-50%];
 }
 .header {
-  @apply hover:cursor-pointer relative pr-6;
+  @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-[999] 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-[0.15em]; 
+  @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.module.css

@@ -3,7 +3,7 @@
 }
 
 .label {
-  @apply uppercase text-light-green tracking-[.15em] text-sm mr-8;
+  @apply uppercase text-light-green tracking-more-widest text-sm mr-8;
 }
 
 .icon {

package/src/components/SideBar.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import PuzzleIcon from './icons/PuzzleIcon'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronLeft, faPlus } from '@fortawesome/free-solid-svg-icons'
+import styles from './Sidebar.module.css'
+import ReactTooltip from 'react-tooltip'
+import HorizontalSeparator from './HorizontalSeparator'
+export default function Sidebar (props) {
+  const { title, defaultSelected = 0, onClickItemSelectedParent = () => {}, items = [], onClickAdd = () => {}, addTitle = 'Add' } = 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.buttonPuzzle} onClick={() => { setCollapsed(false) }}>
+              <PuzzleIcon tip='expand' />
+            </button>
+            <ReactTooltip />
+          </>
+          )
+        : (
+          <>
+            <button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(true) }}>
+              <FontAwesomeIcon icon={faChevronLeft} size='1x' color='white' />
+            </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)}>
+                      <PuzzleIcon size='small' color={isSelected ? 'green' : 'white'} tip={item} />
+                      <span className={`${styles.item} ${isSelected ? styles.itemSelected : ''}`}>{item}</span>
+                    </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}>
+                <FontAwesomeIcon color='white' icon={faPlus} data-tip={addTitle} />
+                {!collapsed && <span className={styles.item}>{addTitle}</span>}
+              </button>
+            </div>
+          </>
+          )}
+      <HorizontalSeparator marginBottom={2} marginTop={2} />
+    </div>
+  )
+}

package/src/components/SideBar.module.css

@@ -0,0 +1,43 @@
+.container {
+  @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative;
+  transition: max-width 0.2s linear;
+}
+.collapsed {
+  @apply max-w-[96px] text-center;
+}
+.buttonPuzzle {
+  @apply border-0;
+}
+.buttonCollapse {
+  @apply absolute border border-white rounded-full h-6 w-6 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;
+}
+.buttonItem {
+  @apply flex items-center border-0 w-full mx-auto;
+}
+.buttonItemCollapsed {
+  @apply w-auto
+}
+.item {
+  @apply text-sm text-white ml-2 grow-0;
+}
+.itemSelected {
+  @apply text-light-green;
+}
+.items {
+  @apply flex flex-col gap-y-3 py-2;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/components/TabbedWindow.module.css

@@ -3,7 +3,7 @@
 }
 
 .tabs-header {
-  @apply flex justify-start text-white uppercase hover:cursor-pointer mb-4 tracking-[.25rem] h-[2rem];
+  @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;  

package/src/components/icons/Icons.module.css

@@ -1,15 +1,19 @@
 .green > circle,
 .green > rect, 
 .green > path {
-    @apply stroke-main-green;
+  @apply stroke-main-green;
 }
 .red > circle,
 .red > rect,
 .red > path {
-    @apply stroke-error-red;
+  @apply stroke-error-red;
 }
 .white > circle,
 .white > rect,
 .white > path {
-    @apply stroke-white;
+  @apply stroke-white;
+}
+
+.noShrinkForFlex {
+  @apply shrink-0
 }

package/src/components/icons/PuzzleIcon.jsx

@@ -0,0 +1,65 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const PuzzleIcon = ({ color = 'green', size = 'normal', tip = '' }) => {
+  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
+  let dimension = 40
+  switch (size) {
+    case 'small':
+      dimension = 24
+      break
+    default:
+      break
+  }
+  return (
+    <svg
+      width={dimension}
+      height={dimension}
+      viewBox='0 0 40 40'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+      data-tip={tip}
+    >
+      <rect
+        x={5}
+        y={5}
+        width={10}
+        height={12.5874}
+        rx={1}
+        stroke='none'
+        strokeWidth={1.5}
+      />
+      <rect
+        x={20}
+        y={5}
+        width={15}
+        height={12.5874}
+        rx={1}
+        stroke='none'
+        strokeWidth={1.5}
+      />
+      <rect
+        x={35}
+        y={35}
+        width={10}
+        height={12.5874}
+        rx={1}
+        transform='rotate(-180 35 35)'
+        stroke='none'
+        strokeWidth={1.5}
+      />
+      <rect
+        x={20}
+        y={35}
+        width={15}
+        height={12.5874}
+        rx={1}
+        transform='rotate(-180 20 35)'
+        stroke='none'
+        strokeWidth={1.5}
+      />
+    </svg>
+  )
+}
+
+export default PuzzleIcon

package/src/stories/SideBar.stories.jsx

@@ -0,0 +1,55 @@
+'use strict'
+import { useState } from 'react'
+import Sidebar from '../components/Sidebar'
+import BorderedBox from '../components/BorderedBox'
+
+const divStyle = {
+  display: 'flex',
+  width: '100%',
+  minHeight: '400px',
+  gap: '10px'
+}
+
+export default {
+  title: 'Platformatic/Sidebar',
+  component: Sidebar,
+  decorators: [
+    (Story) => (
+      <div style={divStyle}>
+        <Story />
+        <BorderedBox>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</BorderedBox>
+      </div>
+    )
+  ]
+}
+
+const Template = (args) => <Sidebar {...args} />
+
+export const EmptySidebar = Template.bind({})
+
+EmptySidebar.args = {
+  title: 'Sidebar bar empty',
+  addTitle: 'Create',
+  onClickAdd: () => alert('clicked on add EmptySidebar')
+}
+
+const FullSidebarTemplate = (args) => {
+  const [items, setItems] = useState(['a very very very very very long title 1', 'Title number 2'])
+  function onClickAdd () {
+    const tmpItem = items.map(item => item)
+    tmpItem.push('Title number ' + (items.length + 1))
+    setItems(tmpItem)
+  }
+
+  return (
+    <Sidebar items={items} onClickAdd={() => onClickAdd()} {...args} />
+  )
+}
+
+export const FullSidebar = FullSidebarTemplate.bind({})
+
+FullSidebar.args = {
+  title: 'Sidebar bar Full',
+  addTitle: 'Create',
+  onClickItemSelected: (index) => alert('selected: ' + index)
+}

package/tailwind.config.cjs

@@ -28,6 +28,16 @@ module.exports = {
     },
     fontFamily: {
       sans: ['Montserrat']
+    },
+    letterSpacing: {
+      tighter: '-.05em',
+      tight: '-.025em',
+      normal: '0',
+      wide: '.025em',
+      wider: '.05em',
+      widest: '.1em',
+      'more-widest': '.15em',
+      'super-widest': '.25em',
     }
   },
   safelist: [