@platformatic/ui-components 0.1.40 → 0.1.41

package/index.js

@@ -13,7 +13,7 @@ import GHLoginButton from './src/components/GHLoginButton'
 import HorizontalSeparator from './src/components/HorizontalSeparator'
 import Forms from './src/components/forms'
 import Icons from './src/components/icons'
-import SideBar from './src/components/SideBar'
+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'
@@ -46,7 +46,7 @@ export {
   GHLoginButton,
   Forms,
   Icons,
-  SideBar,
+  Sidebar,
   Layout,
   List,
   ListElement,

package/package.json

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

package/src/components/BorderedBox.module.css

@@ -1,3 +1,3 @@
 .borderedBox {
-  @apply rounded-md p-5 bg-dark-blue text-white mb-4 flex-1 gap-y-4;
+  @apply rounded-md p-5 bg-dark-blue text-white flex-1 gap-y-4;
 }

package/src/components/Button.module.css

@@ -66,7 +66,7 @@
 .color-dark-green {
   @apply text-dark-green border-dark-green;
 }
-.color-main-dark-blue{
+.color-main-dark-blue {
   @apply text-main-dark-blue border-main-dark-blue;
 }
 .color-dark-blue{

package/src/components/Modal.module.css

@@ -12,10 +12,10 @@
   @apply p-4 rounded-md mx-auto my-auto min-w-[480px] max-h-[85vh] overflow-y-auto;
 }
 .modalInfo {
-  @apply bg-light-blue;
+  @apply bg-light-blue max-w-[480px];
 }
 .modalInvite {
-  @apply bg-main-dark-blue border-light-green border shadow-wrap shadow-main-green max-w-[432px] max-h-[300px];
+  @apply bg-main-dark-blue border-light-green border shadow-wrap shadow-main-green max-w-[480px] max-h-[300px];
 }
 .fullscreen {
   @apply fixed top-0 left-0 bg-light-blue h-screen w-full min-h-screen min-w-full py-4 pl-20 pr-4 overflow-y-auto;

package/src/components/{SideBar.jsx → Sidebar.jsx}

@@ -1,12 +1,22 @@
 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 { faChevronLeft, faPlusCircle, faGear } from '@fortawesome/free-solid-svg-icons'
+import styles from './Sidebar.module.css'
 import ReactTooltip from 'react-tooltip'
+import Button from './Button'
 import HorizontalSeparator from './HorizontalSeparator'
-export default function SideBar (props) {
-  const { title, defaultSelected = 0, onClickItemSelectedParent = () => {}, items = [], onClickAdd = () => {}, addTitle = 'Add' } = props
+
+export default function Sidebar (props) {
+  const {
+    title,
+    defaultSelected = 0,
+    onClickItemSelectedParent = () => {},
+    items = [],
+    onClickAdd = () => {},
+    addTitle = 'Add',
+    onClickSettings = () => {}
+  } = props
   const [collapsed, setCollapsed] = useState(false)
   const [selectedItem, setSelectedItem] = useState(defaultSelected)
 
@@ -49,13 +59,17 @@ export default function SideBar (props) {
               })}
               {/* <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} />
+                <FontAwesomeIcon color='white' icon={faPlusCircle} data-tip={addTitle} />
                 {!collapsed && <span className={styles.item}>{addTitle}</span>}
               </button>
             </div>
           </>
           )}
       <HorizontalSeparator marginBottom={2} marginTop={2} />
+
+      <div className={styles.bottom}>
+        <Button color='white' label='Settings' type='button' onClick={() => onClickSettings()} icon={faGear} />
+      </div>
     </div>
   )
 }

package/src/components/{SideBar.module.css → Sidebar.module.css}

@@ -32,6 +32,13 @@
 .items {
   @apply flex flex-col gap-y-3 py-2;
 }
+.bottom {
+  @apply absolute left-0 bottom-[1rem] w-full px-4;
+}
+
+.bottom button {
+  @apply w-full;
+}
 
 @keyframes fadeIn {
   0% {

package/src/components/forms/Input.jsx

@@ -3,12 +3,16 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './Input.module.css'
 import commonStyles from '../Common.module.css'
-function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled }) {
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+
+function Input ({ placeholder, value, name, borderColor, errorMessage, onChange, disabled, beforeInputIcon, afterInputIcon, afterInputIconColor, onClickBeforeIcon }) {
   const className = styles.inputContainer + ' ' + commonStyles[`bordered--${borderColor}`] + ' ' + commonStyles[`text--${borderColor}`] + ' ' + commonStyles.padded
   return (
     <div className={styles.container}>
       <div className={className}>
+        {beforeInputIcon && <FontAwesomeIcon icon={beforeInputIcon} className={styles.beforeInputIcon} data-testid='before-icon' color='white' onClick={() => onClickBeforeIcon()} />}
         <input type='text' name={name} value={value} placeholder={placeholder} className={styles.fullWidth} onChange={onChange} disabled={disabled} />
+        {afterInputIcon && <FontAwesomeIcon icon={afterInputIcon} className={styles[`color-${afterInputIconColor}`]} data-testid='after-icon' />}
       </div>
       {errorMessage.length > 0 && <span className={commonStyles['error-message']}>{errorMessage}</span>}
     </div>
@@ -39,7 +43,23 @@ Input.propTypes = {
   /**
    * Disabled
    */
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
+  /**
+   * beforeInputIcon
+   */
+  beforeInputIcon: PropTypes.object,
+  /**
+   * afterInputIcon
+   */
+  afterInputIcon: PropTypes.object,
+  /**
+   * afterInputIconColor
+   */
+  afterInputIconColor: PropTypes.oneOf(['error-red', 'main-dark-blue']),
+  /**
+   * onClickBeforeIcon
+   */
+  onClickBeforeIcon: PropTypes.func
 }
 
 Input.defaultProps = {
@@ -49,7 +69,11 @@ Input.defaultProps = {
   borderColor: 'main-green',
   errorMessage: '',
   onChange: () => {},
-  disabled: false
+  disabled: false,
+  beforeInputIcon: null,
+  afterInputIcon: null,
+  onClickBeforeIcon: () => {},
+  afterInputIconColor: 'main-dark-blue'
 }
 
 export default Input

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

@@ -10,6 +10,16 @@
 .input {
   @apply focus:outline-none focus-within:outline-none focus-visible:outline-none;
 }
+.beforeInputIcon {
+  @apply ml-1 mr-3 cursor-pointer;
+}
+.color-main-dark-blue {
+  @apply text-main-dark-blue;
+}
+.color-error-red{
+  @apply text-error-red;
+}
+
 [type='text']:focus {
   outline: none;
 }

package/src/components/icons/AppEmptyIcon.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+export default function AppEmptyIcon () {
+  return (
+    <svg
+      width={81}
+      height={80}
+      viewBox='0 0 81 80'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M34.8199 45.5671H24.4589C23.9066 45.5671 23.4589 46.0149 23.4589 46.5671V66.3802C23.4589 66.9324 23.9066 67.3802 24.4589 67.3802H56.5418C57.0941 67.3802 57.5418 66.9324 57.5418 66.3802V46.5671C57.5418 46.0149 57.0941 45.5671 56.5418 45.5671H46.1808'
+        stroke='#21FA90'
+        strokeWidth={3}
+        strokeLinecap='round'
+      />
+      <rect
+        x={34.8199}
+        y={67.3799}
+        width={11.3609}
+        height={5.45325}
+        stroke='#21FA90'
+        strokeWidth={3}
+      />
+      <path
+        d='M29.1394 73.8333C29.1394 73.281 29.5871 72.8333 30.1394 72.8333H50.8613C51.4136 72.8333 51.8613 73.281 51.8613 73.8333V76.9232H29.1394V73.8333Z'
+        stroke='#21FA90'
+        strokeWidth={3}
+      />
+      <path
+        d='M40.5004 42.8403L43.051 50.3765L51.3053 50.3765L44.6275 55.0342L47.1782 62.5704L40.5004 57.9128L33.8226 62.5704L36.3732 55.0342L29.6954 50.3765L37.9497 50.3765L40.5004 42.8403Z'
+        stroke='#21FA90'
+        strokeWidth={3}
+        strokeLinejoin='round'
+      />
+      <path
+        d='M19.1982 57.0413H9.25739V37.1597'
+        stroke='#21FA90'
+        strokeWidth={3}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M29.139 39.9999V14.4377'
+        stroke='#21FA90'
+        strokeWidth={3}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M61.8018 57.0414H71.7426V45.6804'
+        stroke='#21FA90'
+        strokeWidth={3}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <path
+        d='M49.0207 41.4201V32.8994H58.9615V17.2781'
+        stroke='#21FA90'
+        strokeWidth={3}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <circle
+        cx={9.25738}
+        cy={31.4793}
+        r={5.68047}
+        stroke='#21FA90'
+        strokeWidth={3}
+      />
+      <circle
+        cx={29.139}
+        cy={8.75738}
+        r={5.68047}
+        stroke='#21FA90'
+        strokeWidth={3}
+      />
+      <circle
+        cx={58.9615}
+        cy={11.5977}
+        r={5.68047}
+        stroke='#21FA90'
+        strokeWidth={3}
+      />
+      <circle
+        cx={71.7426}
+        cy={40.0001}
+        r={5.68047}
+        stroke='#21FA90'
+        strokeWidth={3}
+      />
+    </svg>
+  )
+}

package/src/components/icons/AppIcon.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+export default function AppEmptyIcon () {
+  return (
+    <svg
+      width={32}
+      height={33}
+      viewBox='0 0 32 33'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <path
+        d='M12 6.75317H5C4.44772 6.75317 4 7.20089 4 7.75317V21.1132C4 21.6655 4.44772 22.1132 5 22.1132H27C27.5523 22.1132 28 21.6655 28 21.1132V7.75317C28 7.20089 27.5523 6.75317 27 6.75317H20'
+        stroke='#00283D'
+        strokeWidth={2}
+        strokeLinecap='round'
+      />
+      <rect
+        x={12}
+        y={22.1133}
+        width={8}
+        height={3.84}
+        stroke='#00283D'
+        strokeWidth={2}
+      />
+      <path
+        d='M8 26.9534C8 26.4011 8.44772 25.9534 9 25.9534H23C23.5523 25.9534 24 26.4011 24 26.9534V28.8334H8V26.9534Z'
+        stroke='#00283D'
+        strokeWidth={2}
+      />
+      <path
+        d='M16 4.83325L17.7961 10.14H23.6085L18.9062 13.4198L20.7023 18.7265L16 15.4468L11.2977 18.7265L13.0938 13.4198L8.39155 10.14H14.2039L16 4.83325Z'
+        stroke='#00283D'
+        strokeWidth={2}
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}

package/src/components/icons/PuzzleDynamicIcon.jsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import styles from './Icons.module.css'
+const PuzzleDynamicIcon = ({ 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 24 25'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+    >
+      <rect
+        x={3}
+        y={3.5}
+        width={6}
+        height={7.55245}
+        rx={1}
+        stroke='none'
+        strokeWidth={1.5}
+      />
+      <path
+        d='M12 3.5L16.5 7.25L12 11V3.5Z'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+      <rect
+        x={21}
+        y={21.5}
+        width={6}
+        height={7.55245}
+        rx={1}
+        transform='rotate(-180 21 21.5)'
+        stroke='none'
+        stroke-width={1.5}
+      />
+      <rect
+        x={12}
+        y={21.5}
+        width={9}
+        height={7.55245}
+        rx={1}
+        transform='rotate(-180 12 21.5)'
+        stroke='#21FA90'
+        stroke-width={1.5}
+      />
+      <path
+        d='M16.5 9.5V11L21 7.25L16.5 3.5V5'
+        stroke='none'
+        strokeWidth={1.5}
+        strokeLinecap='round'
+        strokeLinejoin='round'
+      />
+    </svg>
+  )
+}
+
+export default PuzzleDynamicIcon

package/src/components/icons/index.js

@@ -1,10 +1,13 @@
 import ApiIcon from './ApiIcon'
 import ApiIconClosed from './ApiIconClosed'
 import ApiEmptyIcon from './ApiEmptyIcon'
+import AppIcon from './AppIcon'
+import AppEmptyIcon from './AppEmptyIcon'
 import CloseModalIcon from './CloseModalIcon'
 import RoundCloseIcon from './RoundCloseIcon'
 import RoundCloseHoverIcon from './RoundCloseHoverIcon'
 import MetricsIcon from './MetricsIcon'
+import PuzzleDynamicIcon from './PuzzleDynamicIcon'
 import PuzzleIcon from './PuzzleIcon'
 import PullRequestIcon from './PullRequestIcon'
 
@@ -12,10 +15,13 @@ export default {
   ApiIcon,
   ApiIconClosed,
   ApiEmptyIcon,
+  AppIcon,
+  AppEmptyIcon,
   CloseModalIcon,
   RoundCloseIcon,
   RoundCloseHoverIcon,
   MetricsIcon,
+  PuzzleDynamicIcon,
   PuzzleIcon,
   PullRequestIcon
 }

package/src/stories/{SideBar.stories.jsx → Sidebar.stories.jsx}

@@ -1,6 +1,6 @@
 'use strict'
 import { useState } from 'react'
-import SideBar from '../components/SideBar'
+import Sidebar from '../components/Sidebar'
 import BorderedBox from '../components/BorderedBox'
 
 const divStyle = {
@@ -11,8 +11,8 @@ const divStyle = {
 }
 
 export default {
-  title: 'Platformatic/SideBar',
-  component: SideBar,
+  title: 'Platformatic/Sidebar',
+  component: Sidebar,
   decorators: [
     (Story) => (
       <div style={divStyle}>
@@ -23,17 +23,18 @@ export default {
   ]
 }
 
-const Template = (args) => <SideBar {...args} />
+const Template = (args) => <Sidebar {...args} />
 
-export const EmptySideBar = Template.bind({})
+export const EmptySidebar = Template.bind({})
 
-EmptySideBar.args = {
-  title: 'SideBar bar empty',
+EmptySidebar.args = {
+  title: 'Sidebar bar empty',
   addTitle: 'Create',
-  onClickAdd: () => alert('clicked on add EmptySideBar')
+  onClickAdd: () => alert('clicked on add EmptySidebar'),
+  onClickSettings: () => alert('settings')
 }
 
-const FullSideBarTemplate = (args) => {
+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)
@@ -42,14 +43,15 @@ const FullSideBarTemplate = (args) => {
   }
 
   return (
-    <SideBar items={items} onClickAdd={() => onClickAdd()} {...args} />
+    <Sidebar items={items} onClickAdd={() => onClickAdd()} {...args} />
   )
 }
 
-export const FullSideBar = FullSideBarTemplate.bind({})
+export const FullSidebar = FullSidebarTemplate.bind({})
 
-FullSideBar.args = {
-  title: 'SideBar bar Full',
+FullSidebar.args = {
+  title: 'Sidebar bar Full',
   addTitle: 'Create',
-  onClickItemSelected: (index) => alert('selected: ' + index)
+  onClickItemSelected: (index) => alert('selected: ' + index),
+  onClickSettings: () => alert('settings')
 }

package/src/stories/forms/Input.stories.jsx

@@ -1,6 +1,8 @@
 'use strict'
 import React, { useState } from 'react'
 import Input from '../../components/forms/Input'
+import { faAdd, faCheckCircle } from '@fortawesome/free-solid-svg-icons'
+
 export default {
   title: 'Platformatic/Forms/Input',
   component: Input
@@ -54,3 +56,13 @@ ValuedAndAlertChange.args = {
   name: 'test',
   placeholder: 'Platformatic'
 }
+
+export const IconBeforeAndAfter = Template.bind({})
+
+IconBeforeAndAfter.args = {
+  name: 'test',
+  placeholder: 'Platformatic',
+  beforeInputIcon: faAdd,
+  afterInputIcon: faCheckCircle,
+  afterInputIconColor: 'error-red'
+}